/* Invoice search: a search panel on the left, styled like the drawer's index panel (sections, soft fields,
   grey header), and the results on the right. The page fits the window; the panel body and the results
   table scroll on their own. */
/* The app bar is dense: MudBlazor then offsets the content by 3/4 of --mud-appbar-height. */
.search-page {
    display: flex;
    height: calc(100vh - var(--mud-appbar-height) * 3 / 4);
    overflow: hidden;
}

/* Search panel */
.search-panel {
    width: 380px;
    flex-shrink: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border-right: 1px solid var(--mud-palette-lines-default);
}

.search-panel-head {
    padding: 14px 14px 12px;
    background-color: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-lines-default);
}

.search-panel-title {
    display: flex;
    align-items: center;
    gap: 8px;
    min-height: 24px;
    font-size: 0.95rem;
    font-weight: 500;
}

/* The title pushes the filter count and Clear to the right; Clear is a small link-style button. */
.search-clear.mud-button-root {
    min-width: 0;
    padding: 0 6px;
    text-transform: none;
    font-weight: 400;
    color: var(--mud-palette-text-secondary);
}

.search-panel-title > span:first-child {
    margin-right: auto;
}

/* Search bar: the full-text box with the Search button right next to it, same height. */
.search-bar {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-top: 10px;
}

.search-bar .search-submit {
    height: 36px;
    flex-shrink: 0;
    box-shadow: none;
}

.search-bar .search-submit.wide {
    flex: 1;
}

/* Full-text box: white on the grey header, with a hairline; no caption above it. */
.search-fulltext {
    flex: 1;
    min-width: 0;
}

.search-fulltext .mud-input.mud-input-text {
    margin-top: 0 !important;
    background-color: var(--mud-palette-surface) !important;
    box-shadow: inset 0 0 0 1px var(--mud-palette-lines-default);
}

.search-fulltext .mud-input.mud-input-text:hover {
    background-color: var(--mud-palette-surface) !important;
    box-shadow: inset 0 0 0 1px var(--mud-palette-lines-inputs);
}

.search-fulltext .mud-input.mud-input-text:focus-within {
    box-shadow: inset 0 0 0 1px var(--mud-palette-primary);
}

.search-fulltext .mud-input.mud-input-text > input.mud-input-root {
    padding-top: 8px;
    padding-bottom: 8px;
}

.search-panel-body {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
}


/* States as soft toggle chips: grey like the fields, tinted in the app colour when selected. */
.search-states {
    display: flex;
    flex-wrap: wrap;
    gap: 6px;
    padding-top: 2px;
}

.search-states .mud-chip {
    margin: 0;
    height: 28px;
    border-radius: 6px;
    font-size: 0.8125rem;
    background-color: var(--index-field-bg);
    color: var(--mud-palette-text-primary);
}

.search-states .mud-chip:hover {
    background-color: var(--index-field-bg-hover);
}

.search-states .mud-chip.mud-chip-selected {
    background-color: var(--index-selected-bg);
    color: var(--mud-palette-primary);
    font-weight: 500;
}

/* Results */
.search-results {
    flex: 1;
    min-width: 0;
    display: flex;
    flex-direction: column;
    padding: 14px 24px 8px;
}

.search-results-head {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 32px;
    margin-bottom: 6px;
}

.search-results-count {
    font-size: 1rem;
    font-weight: 500;
}

/* Framed like the admin tables: a hairline border with rounded corners around header, rows and pager. */
.search-grid.mud-table {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    background-color: var(--mud-palette-surface);
    border: 1px solid var(--mud-palette-lines-default);
    border-radius: 8px;
    overflow: hidden;
}

.search-grid .mud-table-container {
    flex: 1;
    min-height: 0;
    overflow: auto;
}

.search-grid .mud-table-pagination {
    border-top: 1px solid var(--mud-palette-lines-default);
}

/* Before the first search: a hint in the middle of the results area. */
.search-empty {
    margin: auto;
    max-width: 340px;
    text-align: center;
    color: var(--mud-palette-text-secondary);
}

.search-empty .mud-icon-root {
    font-size: 3.5rem;
    opacity: 0.5;
}

.search-empty-title {
    margin-top: 8px;
    font-size: 1.05rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.search-empty-text {
    margin-top: 4px;
    font-size: 0.875rem;
}

/* The created dates at the top of the panel, above the sections: field styling of a section body, with room above
   and the sections' dividing line below. */
.search-panel-body .search-created {
    padding-top: 8px;
    border-bottom: 1px solid var(--mud-palette-lines-default);
}