/* ============================================================================
   HotelTRS pickers

   Six modals let you choose something from a list: ClassSelectModal,
   ClassMultiSelectModal, EnumSelectModal, EnumMultiSelectModal, UserPickerModal
   and SurveyPickerModal. Each carried its own <style> block, and between them
   they defined the same global class names more than once with DIFFERENT
   values:

     .item-picker-holder   3 definitions - 360px vs 400px vs 400px, three
                           different borders, three different hover colours
     .message-holder       3 definitions
     .account-btn /        byte-identical rules under two names
       .survey-button
     @keyframes fade-in    2 definitions
     .account-photo        also defined in LayoutHeaderComponent, which is on
                           screen the entire time you are logged in, at
                           width/height 100% against this file's 30px

   A <style> block is not scoped to its component: it goes into the document and
   applies to everything. Which of those three .item-picker-holder rules won
   depended on which modal happened to render last. One set of trs-picker-*
   classes now.

   The palette was stock Bootstrap blue (#3399ff, #99cfff, #0b5ed7, #eef4ff)
   with a spring-green hover (rgba(0,255,127,.1)) and a dodgerblue selected
   state - none of it from the brand. Tokens throughout.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   LIST
   ---------------------------------------------------------------------------- */

.trs-picker-list {
    width: 100%;
    height: var(--trs-picker-list-h, 400px);
    overflow-y: auto;
    border: 1px solid var(--trs-border);
    border-radius: var(--trs-radius-sm);
    padding: var(--trs-space-1);
    background: var(--trs-surface);
}

/* The multi-select variants put a chip row above the list, so they give it back
   the height those chips take. This is the 360px that used to be one of three
   competing .item-picker-holder rules. */
.trs-picker-list-short {
    --trs-picker-list-h: 360px;
}

.trs-picker-row {
    cursor: pointer;
    user-select: none;
    border: 1px solid transparent;
    border-radius: var(--trs-radius-sm);
    overflow-wrap: break-word;
    padding: 0.55rem var(--trs-space-3);
    margin: var(--trs-space-1) 0.15rem;
    display: flex;
    align-items: center;
    transition: background-color var(--trs-motion-fast) var(--trs-ease),
                border-color var(--trs-motion-fast) var(--trs-ease);
}

.trs-picker-row:hover {
    background: var(--trs-surface-sunken);
    border-color: var(--trs-border-strong);
}

.trs-picker-row-selected,
.trs-picker-row-selected:hover {
    background: var(--trs-success-bg);
    border-color: var(--trs-success);
}

/* EnumSelectModal renders a real <select> with <option> children rather than
   divs, so the rows have to be addressed through the element. */
.trs-picker-options > option {
    background: transparent;
    cursor: pointer;
    user-select: none;
    border: 1px solid var(--trs-border);
    border-radius: var(--trs-radius-sm);
    text-align: center;
    white-space: normal;
    padding: var(--trs-space-2);
    margin: var(--trs-space-2);
}

.trs-picker-options > option:hover {
    background: var(--trs-surface-sunken);
}

/* "No results" sitting in the row list. It must not look or behave clickable. */
.trs-picker-empty,
.trs-picker-empty:hover {
    cursor: default;
    text-align: center;
    padding: var(--trs-space-5) var(--trs-space-2);
    color: var(--trs-text-secondary);
    background: none;
    border-color: transparent;
}

/* ----------------------------------------------------------------------------
   FILTERS AND CHIPS
   ---------------------------------------------------------------------------- */

.trs-picker-filters {
    background: var(--trs-surface-sunken);
    border: 1px solid var(--trs-border);
    border-radius: var(--trs-radius-sm);
    padding: var(--trs-space-3);
}

.trs-picker-filters .form-label,
.trs-picker-filters label {
    font-size: var(--trs-text-sm);
    font-weight: var(--trs-weight-medium);
    text-transform: uppercase;
    letter-spacing: 0.02em;
    color: var(--trs-text-secondary);
    margin-bottom: var(--trs-space-1);
    line-height: 1.1;
}

/* Dashed, because it is a staging area for what you have picked so far rather
   than a control in its own right. */
.trs-picker-chip-row {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    max-height: 90px;
    overflow-y: auto;
    padding: var(--trs-space-2);
    border: 1px dashed var(--trs-border-strong);
    border-radius: var(--trs-radius-md);
    background: var(--trs-surface);
}

.trs-picker-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.55rem;
    background: var(--trs-success-bg);
    border: 1px solid var(--trs-success);
    color: var(--trs-success);
    border-radius: 999px;
    font-size: var(--trs-text-sm);
    cursor: pointer;
    user-select: none;
    transition: background-color var(--trs-motion-fast) var(--trs-ease),
                border-color var(--trs-motion-fast) var(--trs-ease);
}

.trs-picker-chip:hover {
    background: var(--trs-surface);
    border-color: var(--trs-fill);
}

.trs-picker-chip-label {
    white-space: nowrap;
    max-width: 180px;
    overflow: hidden;
    text-overflow: ellipsis;
}

.trs-picker-chip-x {
    font-size: var(--trs-text-sm);
}

/* ----------------------------------------------------------------------------
   CARD LISTS

   UserPickerModal and SurveyPickerModal show fat rows with an avatar or a
   title. Their two rule sets were byte-identical under two names.
   ---------------------------------------------------------------------------- */


.trs-picker-card {
    display: flex;
    align-items: center;
    gap: var(--trs-space-3);

    /* border-strong, not border.

       Measured card-against-well: the two grounds are only 1.19 apart in light
       and 1.17 in dark, which is not a separation anyone can see - and the well
       cannot simply be darkened, because a mid-ramp neutral does not flip with
       the theme and would end up LIGHTER than the card in dark, inverting which
       layer looks raised. So the edge does the work: border-strong measures 1.38
       against the well in light and 1.90 in dark. */
    border: 1px solid var(--trs-border-strong);
    /* radius-md, not the 10px magic number this carried over from the old modals. */
    border-radius: var(--trs-radius-md);
    cursor: pointer;
    padding: 0.55rem var(--trs-space-3);
    font-size: var(--trs-text-base);
    background-color: var(--trs-surface);
    color: var(--trs-text);
    box-shadow: var(--trs-elevation-1);
    transition: box-shadow var(--trs-motion-base) var(--trs-ease),
                border-color var(--trs-motion-base) var(--trs-ease),
                transform var(--trs-motion-fast) var(--trs-ease);
    animation: trs-picker-fade-in var(--trs-motion-slow) forwards;
    text-align: left;
    width: 100%;

    /* Rows were flush against each other inside the scroll well - the card class
       came from UserPickerModal, which got its spacing from a flex gap on the
       wrapper, and the virtualized list has no such wrapper. Touching borders is
       most of what made this read as an undesigned block.

       Margin rather than a flex gap on the container: Virtualize inserts its own
       spacer elements, and they would become flex items. It does mean the row
       height the virtualizer is told must include this - see RowHeight. */
    margin-bottom: var(--trs-space-2);
}

/* The card's ground has to out-specify Bootstrap.

   These rows are Blazorise Buttons, so they carry .btn - and Bootstrap's
   `.btn { background-color: var(--bs-btn-bg) }` ties with a single class at
   (0,1,0). Measured in the browser: the cards were rendering FULLY TRANSPARENT,
   which nobody could see while the list behind them was the same white. Against
   the sunken well they vanished.

   :root:root takes it to (0,3,0), which is the pattern dark.css already uses to
   get past the Blazorise theme's in-<body> style block. No !important needed. */
:root:root .trs-picker-card {
    background-color: var(--trs-surface);
}

:root:root .trs-picker-card.selected {
    background-color: var(--trs-success-bg);
}

/* Bootstrap also owns .btn:hover, so the hover ground needs the same treatment -
   otherwise hovering a card would drop it back to transparent. */
:root:root .trs-picker-card:hover {
    background-color: var(--trs-surface);
}

:root:root .trs-picker-card.selected:hover {
    background-color: var(--trs-success-bg);
}

/* Hover LIFTS rather than dimming.

   It used to darken the card to --trs-surface-sunken, which was readable while
   the list behind it was white. On the well that is now the ground colour, so
   the old hover made the card dissolve into it - the one change here that is a
   correctness fix rather than taste. */
.trs-picker-card:hover {
    box-shadow: var(--trs-elevation-2);
}

.trs-picker-card.selected {
    border-color: var(--trs-success);
    background-color: var(--trs-success-bg);
    box-shadow: var(--trs-elevation-1);
}

/* The originals set `outline: none` on :focus. These are buttons in a list you
   are expected to arrow through, so that removed the only indication of where
   the keyboard was. base.css draws the ring; nothing here takes it away. */


@keyframes trs-picker-fade-in {
    from { opacity: 0; }
    to   { opacity: 1; }
}

/* `@keyframes fade-out` was defined in both card pickers and referenced by
   neither - searched the whole solution. Not carried across. */

@media (prefers-reduced-motion: reduce) {
    .trs-picker-card,
    .trs-picker-row,
    .trs-picker-chip {
        animation: none;
        transition: none;
    }
}

/* ----------------------------------------------------------------------------
   FOOTER
   ---------------------------------------------------------------------------- */




/* ----------------------------------------------------------------------------
   TAG PICKER

   The block ended with a bare `input { ... }` - width, padding, a #ccc border,
   a radius and a 10px bottom margin applied to EVERY input in the document for
   as long as this component was rendered. It was meant for the one TextEdit
   below the chips, and is scoped to it now.

   Its .remove-button rules went with the block rather than into this file:
   nothing in TagPicker's markup carries that class (the tags are TRSTag
   components with an OnClick), so the five rules were dead - and they collided
   by name with the live .remove-button in EditAccountIndex, which is a round
   delete button on a photo thumbnail and shares nothing but the word.
   ---------------------------------------------------------------------------- */

.trs-tag-picker {
    display: inline-block;
    width: 100%;
    padding: var(--trs-space-3);
    border: 1px solid var(--trs-border);
    border-radius: var(--trs-radius-sm);
}

.trs-tag-picker input {
    margin-bottom: var(--trs-space-3);
}

.trs-tag-selected {
    display: flex;
    flex-wrap: wrap;
    gap: 0.3rem;
    margin-bottom: var(--trs-space-3);
}

/* The candidate list is capped at about three rows and clipped: it is a
   filtered suggestion list, not something to scroll through. */
.trs-tag-list {
    display: flex;
    flex-wrap: wrap;
    justify-content: flex-start;
    gap: 0.3rem;
    max-height: 4.8rem;
    overflow: hidden;
}

/* ----------------------------------------------------------------------------
   COUNTRY SELECT

   Already had a unique slc- prefix, so unlike the six picker modals above it
   was not colliding with anything and the names are kept. What changes is the
   palette: the hover was a spring green (rgba(0,255,127,...)) and the selected
   state was dodgerblue, two colours with no meaning anywhere else in the app.
   They now take the same hover and selected treatment as .trs-picker-row, so a
   list row behaves the same wherever you meet one.
   ---------------------------------------------------------------------------- */

.slc-toggle {
    display: flex;
    align-items: center;
    justify-content: center;
}

.slc-dropdown-item:hover {
    background-color: var(--trs-surface-sunken);
    border-color: var(--trs-border-strong);
}

.slc-dropdown-item.selected {
    background-color: var(--trs-success-bg);
    border-color: var(--trs-success);
}

.slc-search {
    position: absolute;
    left: var(--trs-space-3);
    top: 50%;
    transform: translateY(-50%);
}

.slc-search-x {
    position: absolute;
    right: var(--trs-space-3);
    top: 50%;
    transform: translateY(-50%);
}

.slc-toggle-x-icon,
.slc-x-icon {
    cursor: pointer;
    transition: transform var(--trs-motion-base) var(--trs-ease);
    transform-origin: center;
}

.slc-toggle-x-icon:hover {
    transform: scale(1.1);
}

/* This one is vertically centred by a translate, so the hover scale has to
   carry that translate with it or the icon jumps on hover. */
.slc-x-icon:hover {
    transform: scale(1.1) translateY(-50%);
}

/* ----------------------------------------------------------------------------
   PICKER FIELD ROW

   UserPicker and SurveyTemplatePicker are the same shape - a button that opens
   a picker modal, sitting in a full-width row - and wrote it out separately.
   The survey one gains the 4px gap the user one had; nothing else changes.
   ---------------------------------------------------------------------------- */



/* Matches --trs-control-h so the button lines up with the inputs beside it. */

/* ============================================================================
   THE REWORKED PICKER (TrsPicker)

   Everything below belongs to the one picker family that replaces the five
   selection idioms this file's header describes. The older .trs-picker-row and
   .trs-picker-options rules above stay until the last call site has moved off
   the components that use them.
   ============================================================================ */

/* ----------------------------------------------------------------------------
   TRIGGER

   The old trigger was a full-width outline Button, which did not line up with
   the TextEdit and DatePicker it usually sits between: different height,
   different border, centred text, and a chosen value styled exactly like a
   placeholder. This makes it a form control that happens to open a modal.
   ---------------------------------------------------------------------------- */

.trs-picker-trigger {
    display: flex;
    align-items: center;
    gap: var(--trs-space-2);
    width: 100%;
    min-height: var(--trs-control-h);
    padding: 0 var(--trs-space-3);
    background: var(--trs-surface);
    border: 1px solid var(--trs-border);
    border-radius: var(--trs-radius-md);
    color: var(--trs-text);
    font-size: var(--trs-text-base);
    text-align: left;
    transition: border-color var(--trs-motion-fast) var(--trs-ease),
                background-color var(--trs-motion-fast) var(--trs-ease);
}

.trs-picker-trigger:hover:not(:disabled) {
    border-color: var(--trs-border-strong);
    background: var(--trs-surface-sunken);
}

/* Nothing chosen yet. Muted rather than a lighter weight, so it reads as absent
   rather than as a quiet value. */
.trs-picker-trigger--placeholder .trs-picker-trigger-value {
    color: var(--trs-text-muted);
}

.trs-picker-trigger--invalid {
    border-color: var(--trs-danger);
}

/* Takes the slack so the chevron stays pinned right, and truncates rather than
   pushing the chevron off the end. */
.trs-picker-trigger-value {
    flex: 1;
    min-width: 0;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.trs-picker-trigger-chevron {
    flex-shrink: 0;
    color: var(--trs-text-secondary);
}

.trs-picker-trigger-leading {
    flex-shrink: 0;
    color: var(--trs-text-secondary);
}

/* ----------------------------------------------------------------------------
   CARD BODY

   .trs-picker-card already exists above - it was written for UserPickerModal
   and is the look this rework generalises. These are the lines inside it.
   ---------------------------------------------------------------------------- */

.trs-picker-card-body {
    display: flex;
    flex-direction: column;
    gap: 0.15rem;
    flex: 1;
    min-width: 0;
}

/* The name is the thing you read, so it gets a real step up: 15px semibold
   against a 13px muted detail line. It was 14px/500 against 13px/400, which is
   barely a step at all - two lines of almost the same text, which is a large
   part of why the row read as undesigned. */
.trs-picker-card-title {
    font-size: var(--trs-text-lg);
    font-weight: var(--trs-weight-semibold);
    line-height: 1.25;
    color: var(--trs-text);
    overflow-wrap: anywhere;
}

/* Subtitle, meta and chips on one row, wrapping only if they must. */
.trs-picker-card-line {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: 0.35rem var(--trs-space-2);
    min-width: 0;
}

.trs-picker-card-subtitle {
    font-size: var(--trs-text-sm);
    color: var(--trs-text-secondary);
    overflow-wrap: anywhere;
}

/* The numbers. Separated from the subtitle by a dot rather than a line break,
   so the detail stays on one row. */
.trs-picker-card-meta {
    font-size: var(--trs-text-sm);
    color: var(--trs-text-muted);
}

.trs-picker-card-line .trs-picker-card-meta::before {
    content: "\00B7";
    margin-right: var(--trs-space-2);
}

.trs-picker-card-trailing {
    flex-shrink: 0;
    margin-left: auto;
    padding-left: var(--trs-space-3);
    font-variant-numeric: tabular-nums;
    color: var(--trs-text-secondary);
}

/* The row the keyboard is on.

   It needs its own indicator because DOM focus never leaves the search box - that
   is what makes typing work without rerouting keystrokes, and it means the browser
   draws no focus ring on the row itself. Drawn as an inset box-shadow rather than
   an outline so it is not clipped by the scroll container's edge, and in the same
   colour as the real focus ring in base.css so the two read as one idea. */
.trs-picker-card--active {
    box-shadow: inset 0 0 0 2px var(--trs-focus);
}

/* A row that exists but cannot be chosen - already assigned elsewhere, or past
   a selection cap. Shown rather than hidden, so the list does not appear to be
   missing things. */
.trs-picker-card:disabled,
.trs-picker-card[aria-disabled="true"] {
    opacity: 0.55;
    cursor: not-allowed;
}

.trs-picker-card:disabled:hover,
.trs-picker-card[aria-disabled="true"]:hover {
    background-color: var(--trs-surface);
    border-color: var(--trs-border);
}

/* The multi-select tick. Its own class so the checkbox column lines up down the
   list whether or not a row has an avatar. */
.trs-picker-check {
    flex-shrink: 0;
}

/* ----------------------------------------------------------------------------
   COMPACT ROWS

   One line, for lists of short labels: enum values, room types, currencies.
   Same element as the comfortable card, so selection, focus and disabled states
   are shared rather than reimplemented.
   ---------------------------------------------------------------------------- */

.trs-picker-card--compact {
    gap: var(--trs-space-2);
    padding: 0.4rem var(--trs-space-3);
    font-size: var(--trs-text-base);
}

.trs-picker-card--compact .trs-picker-card-body {
    flex-direction: row;
    align-items: baseline;
    gap: var(--trs-space-2);
}

.trs-picker-card--compact .trs-picker-card-subtitle {
    font-size: var(--trs-text-sm);
}

/* ----------------------------------------------------------------------------
   MODAL CHROME
   ---------------------------------------------------------------------------- */

/* The row of quick-filter chips, above the search box. */
.trs-picker-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.35rem;
    margin-bottom: var(--trs-space-2);
}

/* Replaces an inline `font-size: 0.9em; visibility: ...` that the two
   multi-select modals each carried. visibility rather than display, so the line
   holds its space and the list below does not jump as the count appears. */
.trs-picker-count {
    display: flex;
    justify-content: flex-end;
    margin-top: var(--trs-space-2);
    font-size: var(--trs-text-sm);
    color: var(--trs-text-secondary);
}

.trs-picker-count--empty {
    visibility: hidden;
}

/* The scroll container the keyboard walks. Its own class rather than reusing
   .trs-picker-list: this one holds cards, needs a real element reference for
   scrollIntoView, and must not inherit the older list's fixed height. */
/* A sunken well, not another white panel.

   It used to be --trs-surface, which is also the modal's ground AND the cards'
   ground: three layers of the same white separated only by hairlines, which is
   why the whole thing read as the plainest possible list. The well drops one
   step so the cards have something to sit ON. */
.trs-picker-scroll {
    /* Grows with the window instead of sitting at a flat 380px.

       The gap under the list is the shared modal's own bottom padding, which
       every modal in the app has - not something this list can reclaim without
       overriding it for one dialog. So the list takes the room instead: at a
       1400px-tall window this goes from 380px to about 700px, roughly nine
       comfortable rows rather than five. Clamped at both ends so a laptop does
       not get a cramped list and a tall monitor does not get one taller than
       the screen. */
    height: var(--trs-picker-scroll-h, clamp(280px, 50vh, 640px));
    overflow-y: auto;
    padding: var(--trs-space-2);
    border: 1px solid var(--trs-border-strong);
    border-radius: var(--trs-radius-md);
    background: var(--trs-surface-sunken);
}

/* Multi-select puts a chip row above the list, so it gives back the height
   those chips take - the same trade the old .trs-picker-list-short made. */
/* Multi-select puts a chip row above the list, so it gives back the height those
   chips take. */
.trs-picker-scroll--short {
    --trs-picker-scroll-h: clamp(240px, 42vh, 560px);
}

@media (prefers-reduced-motion: reduce) {
    .trs-picker-trigger {
        transition: none;
    }
}

/* A trigger sitting inline in a table cell rather than in a form. Replaces the
   `min-width: 150px; max-width: 220px` inline styles the Zodomus mapping table
   carried on each of its per-row selects. */
.trs-picker-trigger--compact {
    min-width: 150px;
    max-width: 220px;
    min-height: auto;
    padding: 0.15rem var(--trs-space-2);
    font-size: var(--trs-text-sm);
}

/* ----------------------------------------------------------------------------
   FOOTER ROW — pager centred under the list, count on the right
   ---------------------------------------------------------------------------- */

/* Three columns rather than flex with space-between: an empty first column the
   same width as the count keeps the pager optically centred under the list, and
   it stays centred as the count text changes width ("11 results" vs "3
   selected"). */
.trs-picker-footer-row {
    display: grid;
    grid-template-columns: 1fr auto 1fr;
    align-items: center;
    gap: var(--trs-space-2);
    margin-top: var(--trs-space-2);
}

.trs-picker-pager-slot {
    display: flex;
    justify-content: center;
    min-width: 0;
}

/* The count keeps the right-hand column. */
.trs-picker-footer-row .trs-picker-count {
    grid-column: 3;
    margin-top: 0;
}

@media (prefers-reduced-motion: reduce) {
    .trs-picker-card:hover {
        box-shadow: var(--trs-elevation-1);
    }
}

/* ----------------------------------------------------------------------------
   CHIPS ON A CARD

   Scoped to the picker, because TrsStatusBadge is shared with about forty other
   places and this is not a change to make globally.

   Measured: the availability chip rendered as a SOLID rgb(122,98,52) pill with
   white text - the heaviest object on the card, carrying the least important
   fact on it. A tint with coloured text says the same thing without shouting.
   :root:root to get past Bootstrap's own .text-bg-* rules.
   ---------------------------------------------------------------------------- */

:root:root .trs-picker-card .badge {
    padding: 0.1rem 0.4rem;
    font-size: var(--trs-text-2xs);
    font-weight: var(--trs-weight-medium);
    border: 1px solid transparent;
}

:root:root .trs-picker-card .badge.text-bg-warning {
    background-color: var(--trs-warning-bg);
    border-color: var(--trs-warning);
    color: var(--trs-warning);
}

:root:root .trs-picker-card .badge.text-bg-danger {
    background-color: var(--trs-danger-bg);
    border-color: var(--trs-danger);
    color: var(--trs-danger);
}

:root:root .trs-picker-card .badge.text-bg-success {
    background-color: var(--trs-success-bg);
    border-color: var(--trs-success);
    color: var(--trs-success);
}

:root:root .trs-picker-card .badge.text-bg-info {
    background-color: var(--trs-info-bg);
    border-color: var(--trs-info);
    color: var(--trs-info);
}

:root:root .trs-picker-card .badge.text-bg-secondary {
    background-color: var(--trs-surface-sunken);
    border-color: var(--trs-border-strong);
    color: var(--trs-text-secondary);
}

/* ----------------------------------------------------------------------------
   TRIGGER SPACING

   TrsFormField renders a real Blazorise Field, and Blazorise gives .form-group a
   16px bottom margin. The modal body already spaces its own children by 16px, so
   a picker ended up with 32px under it while the plain Divs beside it had 16px -
   the picker used to be one of those Divs, which is why this only appeared now.

   Zeroed here rather than on .form-group, which every form field in the app uses.
   ---------------------------------------------------------------------------- */

.trs-picker-field > .form-group {
    margin-bottom: 0;
}

/* ----------------------------------------------------------------------------
   DIALOG WIDTH

   Blazorise only offers 500px or 800px here. 500 squeezed the card's text column
   to 311px; 800 was wider than the content needs. This lands in between.

   Matched with :has() on the list itself, so it applies to picker dialogs and
   nothing else. A compact list is short labels, so it keeps the narrow dialog.
   ---------------------------------------------------------------------------- */

.modal-dialog:has(.trs-picker-scroll) {
    max-width: 640px;
}

.modal-dialog:has(.trs-picker-card--compact) {
    max-width: 500px;
}