/* 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);
}

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

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

.app-multiselect-panel hr {
    margin: 0.5rem 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);
}