/* App-bar global search box and its results dropdown.
   A plain stylesheet rather than GlobalSearchBox.razor.css: Blazor's scoped-CSS bundle is
   commented out in index.html, so component .razor.css files are never served. Class names
   are all gs- prefixed to stand in for the scoping that isolation would have provided, and
   the MudBlazor overrides below are held inside .gs-root so they cannot leak to other inputs. */

/* Centred in the app bar by a MudSpacer on either side in MainLayout, so the width below is
   what decides how much of the bar it takes rather than where it sits. */
.gs-root {
    position: relative;
    width: 800px;
    max-width: 42vw;
    margin: 0 16px;
}

/* The field is its own light card on the app bar rather than an outline borrowing the bar's
   colour: background, border, radius and text are all stated from the theme palette, so it
   looks the same on any tenant's app-bar colour and follows the light/dark theme with the
   rest of the page instead of the bar. */
.gs-root .mud-input.mud-input-outlined {
    background-color: var(--mud-palette-surface);
    border-radius: 8px;
}

/* The outline is a separate overlay element with a radius of its own, and MudBlazor's rule for
   it carries three classes — matched class for class here, or the corners stay square against a
   rounded background. Hover and focus are left to MudBlazor: those selectors are more specific
   still, so the border keeps turning primary while the box is in use. */
.gs-root .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--mud-palette-lines-inputs);
    border-radius: 8px;
}

.gs-root .mud-input {
    color: var(--mud-palette-text-primary);
}

/* The magnifier and the clear button, both quieter than the text the user types. */
.gs-root .mud-input-adornment {
    color: var(--mud-palette-text-secondary);
}

/* MudBlazor's own placeholder rule is currentColor at 42% opacity and names the input element,
   so it has to be matched element for element to be overridden at all — a plain
   `.gs-root input::placeholder` loses to it and does nothing. */
.gs-root .mud-input > input.mud-input-root::placeholder {
    color: var(--mud-palette-text-secondary);
    opacity: 1;
}

/* Wider than the input on purpose, and independent of it — the popover is set to
   DropdownWidth.Ignore so this width wins. A row carries up to four lines of text, and
   matching the box's width put an ellipsis through most of them. */
.gs-panel {
    width: 640px;
    max-width: 42vw;

    /* The scroll cap. Employees alone can return five rows plus a "See all", so the panel
       has to stop growing well before it runs off the bottom of the window. */
    max-height: min(70vh, 560px);
    overflow-y: auto;
    padding-bottom: 4px;
}

.gs-message {
    display: flex;
    align-items: center;
    padding: 16px;
    font-size: 0.875rem;
    color: var(--mud-palette-text-secondary);
}

.gs-message-centred {
    justify-content: center;
}

.gs-message-error {
    color: var(--mud-palette-error);
}

/* ---- Type colours ------------------------------------------------------------------------
   One hue per entity type, put on the group header and on every row's icon under it by
   GlobalSearchNavigator.TypeClass, so a section and its rows share a colour and a type is
   recognisable before its label is read.

   The hue is declared once as a variable and spent on a solid tile behind a white glyph. That
   keeps the contrast between the glyph and the tile, where it is fixed, rather than between a
   coloured glyph and the panel, where it would swing with the theme: a hue dark enough to read
   on white is too dark to read on a dark surface, and vice versa. */

.gs-type-employee { --gs-type-colour: #2563eb; }
.gs-type-timesheet { --gs-type-colour: #d97706; }
.gs-type-contract { --gs-type-colour: #7c3aed; }
.gs-type-site { --gs-type-colour: #0d9488; }
.gs-type-invoice { --gs-type-colour: #db2777; }

/* Anything the frontend has no colour for yet still renders, just in the neutral it had before. */
.gs-type-default { --gs-type-colour: var(--mud-palette-text-secondary); }

.gs-type-tile {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    width: 28px;
    height: 28px;
    border-radius: 6px;
    background-color: var(--gs-type-colour);
    color: #fff;
}

/* Section break between Employees / Timesheets / Contracts / Sites. The tinted band does the
   separating rather than a bare hairline, which is easy to lose between two white rows once
   the panel is scrolling. The rule above closes the band off against the row before it. */
.gs-group + .gs-group .gs-group-header {
    border-top: 1px solid var(--mud-palette-divider);
}

.gs-group-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 16px;
    background-color: var(--mud-palette-background-gray);
    border-bottom: 1px solid var(--mud-palette-divider);

    /* Keeps the section label in view while its own rows scroll under it, so it stays clear
       which group the row under the cursor belongs to. */
    position: sticky;
    top: 0;
    z-index: 1;

    /* The type's hue as a stripe down the edge of the band. An inset shadow rather than a
       border-left so it does not shift the label across by three pixels. */
    box-shadow: inset 3px 0 0 var(--gs-type-colour);
}

.gs-group-header .gs-group-icon {
    color: var(--gs-type-colour);
}

.gs-group-title {
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

.gs-row {
    display: flex;
    align-items: flex-start;
    gap: 12px;
    padding: 8px 16px;
    cursor: pointer;
}

/* One highlight for both the mouse and the arrow keys: hovering moves the active row, so the
   two can never disagree about which row Enter would open. */
.gs-row-active {
    background-color: var(--mud-palette-action-default-hover);
}

.gs-row-media {
    flex: 0 0 auto;
    padding-top: 2px;
}

/* min-width:0 is what actually lets the ellipsis happen — a flex item's default minimum is
   its content width, so without it the text pushes the row wider instead of truncating. */
.gs-row-text {
    flex: 1 1 auto;
    min-width: 0;
}

.gs-row-title,
.gs-row-subtitle,
.gs-row-description,
.gs-row-via {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.gs-row-title {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--mud-palette-text-primary);
}

.gs-row-subtitle {
    font-size: 0.8125rem;
    color: var(--mud-palette-text-secondary);
}

/* Secondary rather than disabled: this line carries the status, date and amount that tell two
   invoices apart, so it has to be read, not just noticed. Size alone keeps it under the title. */
.gs-row-description {
    font-size: 0.75rem;
    color: var(--mud-palette-text-secondary);
}

.gs-row-via {
    font-size: 0.75rem;
    font-style: italic;
    color: var(--mud-palette-text-disabled);
}

/* ---- Matched words ------------------------------------------------------------------------
   What was typed, marked wherever it turns up in a dropdown row — the "See all" dialog passes
   no keyword and so renders none of these. It carries most of its weight on the
   "via" line: a timesheet or an invoice is reached by expanding the employee or site that
   matched, never by matching its own text, so that line is the only answer the row gives to
   "why am I being shown this" — and unmarked it reads as a footnote rather than as the reason.

   The browser default for <mark> is a fixed yellow that ignores the theme and outshouts the
   title above it, so the colour is restated: the primary hue at low alpha, behind whatever
   colour the line already had. That keeps the marked run part of its own sentence — a little
   firmer, not a different piece of text — and works on both themes, since the alpha lets the
   surface underneath show through instead of assuming a light one. */
.gs-row mark.gs-mark {
    background-color: rgba(var(--mud-palette-primary-rgb), 0.18);
    color: inherit;
    font-weight: 600;
    border-radius: 3px;

    /* Horizontal only. Vertical padding on an inline box overflows the line rather than
       growing it, which would put the mark under the line above on these tight rows. */
    padding: 0 2px;
}

/* The via line is the italic, greyed one, so its mark is the one at risk of being missed.
   The name comes up to full text strength against that grey rather than taking a colour of its
   own, which at 0.75rem italic would cost more contrast than it bought attention. */
.gs-row-via mark.gs-mark {
    color: var(--mud-palette-text-primary);
}

.gs-see-all {
    align-items: center;
    gap: 2px;
    padding-bottom: 10px;
    font-size: 0.8125rem;
    font-weight: 500;
    color: var(--mud-palette-primary);
}

/* The app bar has the logo on the left and four controls on the right, so the box gives up
   width first on narrow screens. The dropdown keeps its own width, capped by vw. */
@media (max-width: 960px) {
    .gs-root {
        width: 260px;
    }
}

/* ---- "See all" dialog -------------------------------------------------------------------
   Lists one group's full set of results. Rows reuse the .gs-row rules above, so a result
   looks the same here as it does in the dropdown. */

.gs-dialog-title {
    display: flex;
    align-items: center;
}

.gs-dialog-title .mud-icon-root {
    color: var(--gs-type-colour);
}

.gs-dialog-subtitle {
    color: var(--mud-palette-text-secondary);
}

/* Loading, error and empty all sit in the same centred block so the dialog does not resize
   as it moves between them. */
.gs-dialog-state {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    padding: 48px 16px;
    text-align: center;
}

/* The scroll cap, as in the dropdown: this list can run to the endpoint's 25 rows, which is
   taller than most windows once each row carries up to four lines. */
.gs-dialog-list {
    max-height: min(60vh, 520px);
    overflow-y: auto;

    /* Pulls the rows out to the dialog's edges — .gs-row brings its own 16px side padding. */
    margin: 0 -24px;
}

.gs-dialog-list .gs-row + .gs-row {
    border-top: 1px solid var(--mud-palette-divider);
}

/* The dropdown moves .gs-row-active on mouseenter because the arrow keys share that highlight.
   Nothing is keyboard-driven here, so plain hover does the job. */
.gs-dialog-list .gs-row:hover {
    background-color: var(--mud-palette-action-default-hover);
}

/* ---- "See all" dialog: sections -----------------------------------------------------------
   A group's full list is up to 25 rows of one type, which for invoices means two dozen numbers
   that differ only in their digits. GlobalSearchAllDialog.BuildCategories sorts them under the
   record they belong to — the site an invoice was raised for, the contract a timesheet was
   worked against — and these are the headings for those sections. Deliberately quieter than the
   dropdown's group headers: those separate one type from another, these only subdivide a list
   that is already all one type. */

.gs-subgroup-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 6px 16px;
    background-color: var(--mud-palette-background-gray);
    border-top: 1px solid var(--mud-palette-divider);
    border-bottom: 1px solid var(--mud-palette-divider);

    /* Keeps the section's name in view while its own rows scroll under it — the point of the
       sections is knowing which one the row under the cursor belongs to. */
    position: sticky;
    top: 0;
    z-index: 1;

    /* The type's hue as a stripe down the edge, as on the dropdown's group headers. */
    box-shadow: inset 3px 0 0 var(--gs-type-colour);
}

/* The list's own top edge does the separating for the first section. */
.gs-subgroup:first-child .gs-subgroup-header {
    border-top: none;
}

.gs-subgroup-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--mud-palette-text-secondary);
}

/* How many rows the section holds, so the shape of the result is readable without counting. */
.gs-subgroup-count {
    flex: 0 0 auto;
    padding: 1px 8px;
    border-radius: 999px;
    background-color: var(--mud-palette-action-default-hover);
    font-size: 0.6875rem;
    font-weight: 600;
    color: var(--mud-palette-text-secondary);
}