/* Multi-select checkbox panel - see wwwroot/js/app-multiselect.js and
   TagHelpers/AppFieldTagHelper.cs.

   Every colour is a Bootstrap CSS variable, never a literal - same rule as
   app-chips.css and app-editor.css. This app defaults to dark and the toggle
   flips data-bs-theme at runtime with no reload, so a hard-coded #fff survives
   the flip and becomes an unreadable panel. */

/* Until the script runs this is a plain <select multiple> and must look like
   one. Nothing below applies before .app-multiselect-active goes on the
   wrapper, so a blocked or broken script leaves an ordinary field rather than
   a half-styled one. */
.app-multiselect-control {
    position: relative;
}

/* Hidden, never removed: it is still the posted control and still carries the
   data-val-* attributes asp-for generated. display:none rather than
   visibility/opacity so it takes no space and cannot be tabbed into. */
.app-multiselect-source-hidden {
    display: none;
}

/* .form-select already draws the box and the caret; this only handles the
   summary text, which has to stay on one line and end in an ellipsis rather
   than pushing the caret off the control. */
.app-multiselect-toggle {
    display: block;
    width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.app-multiselect-summary {
    pointer-events: none;
}

/* ABSOLUTE, so opening the panel does not reflow the form under it. In the
   edit modal the fields below this one would otherwise jump down by the height
   of the list at the moment of the click, which moves whatever the reader was
   about to press next.

   z-index above Bootstrap's .modal content stacking so the panel is not
   clipped behind a later field inside the dialog. */
.app-multiselect-panel {
    position: absolute;
    z-index: 5;
    top: calc(100% + 0.125rem);
    left: 0;
    right: 0;
    max-height: 15rem;
    overflow-y: auto;
    padding: 0.5rem 0.75rem;
    border: var(--bs-border-width) solid var(--bs-border-color);
    border-radius: var(--bs-border-radius);
    background-color: var(--bs-body-bg);
    box-shadow: var(--bs-box-shadow);
}

/* Opening drops the panel in from the toggle over 140ms. Short, and only
   because a list appearing from nothing under the pointer reads as a jump.
   It is the [hidden] attribute that shows and hides the panel, so this has to
   be an animation rather than a transition - there is no display:none state
   to transition from. Off under reduced motion. */
.app-multiselect-panel:not([hidden]) {
    animation: app-multiselect-in .14s ease-out;
}

@keyframes app-multiselect-in {
    from { opacity: 0; transform: translateY(-4px); }
    to { opacity: 1; transform: none; }
}

@media (prefers-reduced-motion: reduce) {
    .app-multiselect-panel:not([hidden]) {
        animation: none;
    }
}

.app-multiselect-panel .form-check {
    margin-bottom: 0.25rem;
}

.app-multiselect-panel .form-check:last-child {
    margin-bottom: 0;
}

/* THE WHOLE ROW IS THE TARGET, not the width of the word in it.
   Bootstrap's .form-check-label is inline-block, so it was only as wide as its
   text - "Afghanistan" gave a 74px target in a 151px row, and everything to
   the right of the word was dead space that looked exactly as tappable as the
   word did. Rows of short names (grade levels, program types) were mostly
   dead.

   The height is the other half. At 21px these rows were under the 24x24 CSS px
   minimum for a pointer target; 2rem clears it, and on a coarse pointer 2.75rem
   gets near the 44px that thumbs actually want. Measured on the Team Counts
   filter bar at 375px, where this panel is now one of the primary controls. */
.app-multiselect-panel .form-check-label {
    display: block;
    width: 100%;
    min-height: 2rem;
    padding-top: 0.125rem;
    cursor: pointer;
}

@media (pointer: coarse) {
    .app-multiselect-panel .form-check-label {
        min-height: 2.75rem;
        padding-top: 0.375rem;
    }
}

.app-multiselect-panel hr {
    margin: 0.5rem 0;
}

/* A SEARCHABLE PANEL MAY BE WIDER THAN THE CONTROL IT HANGS FROM.

   The panel is left:0/right:0 on the field, so it is normally exactly as wide
   as the toggle - which is right for a column of short words (Paid, Pending)
   and wrong for the list that earns a search box in the first place. In a
   filter bar of auto-width columns the toggle is as wide as the words "All
   events", and the options are "Sample Regional League (DEV-EVT-003)": measured
   at 118px against labels that wrap to one word per line, which reads as a
   broken control rather than a narrow one.

   Over-constrained left + right + min-width resolves by ignoring `right`, so
   the panel grows to the RIGHT of the field. The max-width keeps it inside a
   phone; the field is full width there anyway, so the min-width never bites. */
[data-app-multiselect-searchable="true"] .app-multiselect-panel {
    min-width: 22rem;
    max-width: 90vw;
}

/* The search box on a <app-multiselect searchable> panel.

   STICKY, because the panel itself is the scroll container (max-height above)
   and a filter box that scrolls away with the first flick is a filter box the
   reader has to scroll back up to correct. The negative margins and matching
   padding let the sticky background reach the panel's edges, so rows pass
   UNDER it rather than beside it.

   The background is the panel's own, not transparent: without it the list
   shows through the box as it scrolls past. */
.app-multiselect-search {
    position: sticky;
    top: 0;
    z-index: 1;
    margin: -0.5rem -0.75rem 0.5rem;
    padding: 0.5rem 0.75rem;
    background-color: var(--bs-body-bg);
    border-bottom: var(--bs-border-width) solid var(--bs-border-color);
}

/* The "nothing matched that" line, in place of the list. Padded like a row so
   the panel does not visibly shrink to a single line of small text. */
.app-multiselect-empty {
    padding: 0.375rem 0;
}

/* Select all / Clear. Set above the rule rather than among the checkboxes,
   because they ACT on the list rather than belonging to it - a third
   checkbox-shaped thing in a column of checkboxes would read as another
   option. */
.app-multiselect-actions {
    display: flex;
    gap: 0.75rem;
    font-size: 0.875rem;
}

/* Read-only render (inside <fieldset disabled>). No toggle and no panel: what
   is left should read as a value, the same way the locked form renders every
   other field flat rather than as a greyed-out control. Matches
   app-chips.css's own read-only rule. */
.app-multiselect-readonly {
    padding: 0.375rem 0;
    color: var(--bs-body-color);
}