/* ============================= SELECT THEME =============================
   The one themed arrow for every native dropdown in the application.

   Browsers draw <select> arrows themselves, in the operating system's
   colours -- a grey Windows glyph sitting on every dark Connecto surface.
   This file removes the native pointer and paints the application's own
   chevron instead. The chevron is a data: URI, not a fetched image, so
   the pages that must work on a slow or absent network (sign-in above
   all) stay free of extra requests.

   Specificity is (0,2,1) ON PURPOSE. The classes that style dropdown
   surfaces around the app (.sel, .inp, .cnx-input, .mini-select,
   .input-field-select, .form-group select, Bootstrap's .form-select)
   set `background:` and `padding:` SHORTHANDS at (0,1,x). At (0,2,1)
   the arrow and its right-hand clearance win those two properties while
   every colour, border, size and font a page sets still applies. A page
   that genuinely needs a different arrow overrides at (0,2,1) or higher
   AFTER this link -- PrisonerDocV2's styled-dropdown is the one example.

   The chevron hexes track the theme tokens: #8ea3c7 is --sub and
   #00eac2 is --acc. CSS variables cannot reach inside a data: URI, so a
   change to those tokens must be mirrored here.

   Sized in em so the arrow follows each select's own font-size -- the
   28px pager mini-select and the fluid rem-scaled sign-in field get the
   same arrow at their own scale.

   Excluded: multi-selects and list boxes ([multiple]/[size]), which
   have no dropdown arrow to replace. The Kiosk* pages do not link this
   file: they are standalone screens with their own design language and
   KioskLogin already carries its own chevron. */

select:not([multiple]):not([size]) {
    -webkit-appearance: none;
    -moz-appearance: none;
    appearance: none;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%238ea3c7' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 0.7em center;
    background-size: 0.85em;
    padding-right: 2.1em;
    color-scheme: dark;   /* native popup follows the theme everywhere */
}

/* The arrow answers focus the same way borders do all over the app: it
   turns accent while the list is open. */
select:not([multiple]):not([size]):focus {
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2300eac2' stroke-width='2.4' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'/%3E%3C/svg%3E");
}

/* Old Edge and IE drew their arrow through a separate control part that
   appearance:none does not reach. */
select::-ms-expand { display: none; }

/* ========================== THE OPEN LIST ==========================
   Everything above styles the closed control. The OPEN list -- the
   popup with the options in it -- is drawn by the operating system and
   ordinary CSS cannot reach it; color-scheme:dark merely keeps it from
   flashing white. Chromium 135+ ships customizable selects, where
   `appearance: base-select` hands the popup to the page and
   ::picker(select) styles it like any element. Everything in this
   block is guarded by @supports: engines without it keep the dark
   native popup, losing nothing.

   Theme tokens are read with var() fallbacks because this file loads
   on pages whose :root declares them and would also be correct on one
   whose :root does not. */
@supports selector(::picker(select)) {

    /* The two-line opt-in: the control and its picker both switch to
       the stylable base appearance. The base button draws its own
       arrow through ::picker-icon -- hidden, because the chevron
       painted above already does that job on every engine alike. */
    select:not([multiple]):not([size]),
    select:not([multiple]):not([size])::picker(select) {
        appearance: base-select;
    }

    /* Base appearance lays the button out as a plain box, which leaves
       the value text sitting at the TOP of the app's fixed-height
       fields. Centre it again the way the native control did --
       align-content covers block layout, align-items covers flex,
       whichever the UA stylesheet uses. */
    select:not([multiple]):not([size]) {
        align-content: center;
        align-items: center;
    }

    select:not([multiple]):not([size])::picker-icon { display: none; }

    /* The popup panel: the application's card surface, floating.

       position-try-order matters: the UA default is most-block-size,
       which puts the list on whichever side of the control has MORE
       room -- so a long select in the lower half of the screen opened
       UPWARD even when it could have scrolled comfortably below.
       `normal` restores the reading-order behaviour every native
       dropdown has always had: below first, above only when below
       cannot hold it. margin-block rather than margin-top for the same
       reason -- when the list genuinely does flip above, the clearance
       must sit under it, not push it further up.

       max-block-size is what MAKES "above only when below cannot hold
       it" work, and without it `normal` is actively worse than the
       default. The UA sets max-block-size:stretch, which sizes the list
       to the space on the chosen side -- so a cramped side never
       OVERFLOWS, it just squeezes, and position-try-fallbacks (which
       only fire on overflow) never get a chance. most-block-size was
       hiding that by comparing the two sides directly. The grid pager
       proved it: the Rows dropdown sits ~24px above the window edge, so
       the list opened downward into that gap and rendered as a 12px
       sliver with one option scrolling inside it.

       Giving the list a real intrinsic cap restores overflow, and the
       fallbacks already declared by the UA (start span-end first) flip
       it above. Measured in Chromium 148: 24px of room below now opens
       ABOVE at full height, 400px below still opens BELOW, and a
       24-item list with room below stays BELOW and scrolls at the cap
       -- which is exactly the case `normal` was added to protect.

       The cap is min(40vh, 340px): vh so the larger side can ALWAYS
       hold it (either side of a control is at worst ~47vh, so a flip
       target is guaranteed and the list can never end up clipped),
       340px so it does not grow into a window-height wall of options on
       a large monitor. */
    select:not([multiple]):not([size])::picker(select) {
        position-try-order: normal;
        max-block-size: min(40vh, 340px);
        margin-block: 5px;
        padding: 5px;
        border: 1px solid var(--line, rgba(140, 170, 255, 0.16));
        border-radius: var(--r-sm, 11px);
        background: rgba(12, 20, 36, 0.97);
        box-shadow: 0 18px 40px -14px rgba(0, 0, 0, 0.7);
        -webkit-backdrop-filter: blur(14px) saturate(1.2);
        backdrop-filter: blur(14px) saturate(1.2);
        color: var(--txt, #e9effd);

        /* Opening: a short rise, the same gesture as the app's cards.
           display/overlay transition discretely so the fade can play. */
        opacity: 0;
        transform: translateY(4px);
        transition: opacity 0.14s ease, transform 0.14s ease,
                    overlay 0.14s ease allow-discrete,
                    display 0.14s ease allow-discrete;
    }

    select:not([multiple]):not([size]):open::picker(select) {
        opacity: 1;
        transform: none;
    }

    @starting-style {
        select:not([multiple]):not([size]):open::picker(select) {
            opacity: 0;
            transform: translateY(4px);
        }
    }

    /* Options: quiet rows that answer the pointer with the accent, the
       way every hoverable row in the application does. */
    select:not([multiple]):not([size]) option {
        display: flex;
        align-items: center;
        gap: 8px;
        padding: 7px 10px;
        border-radius: calc(var(--r-sm, 11px) - 4px);
        background: transparent;
        color: var(--txt, #e9effd);
        cursor: pointer;
        transition: background-color 0.12s, color 0.12s;
    }

        select:not([multiple]):not([size]) option:hover,
        select:not([multiple]):not([size]) option:focus-visible {
            background: rgba(0, 234, 194, 0.10);
            color: var(--acc, #00eac2);
            outline: none;
        }

        select:not([multiple]):not([size]) option:checked {
            background: rgba(0, 234, 194, 0.07);
            color: var(--acc, #00eac2);
            font-weight: 600;
        }

        /* The tick beside the chosen option. */
        select:not([multiple]):not([size]) option::checkmark {
            order: 1;
            margin-left: auto;
            content: "\2713";
            font-weight: 700;
            color: var(--acc, #00eac2);
        }

        /* Placeholder rows ("Locations unavailable...", value=""). */
        select:not([multiple]):not([size]) option:disabled {
            color: var(--faint, #5b6f93);
            cursor: default;
        }

    @media (prefers-reduced-motion: reduce) {
        select:not([multiple]):not([size])::picker(select) {
            transition: none;
            transform: none;
        }
    }
}