/* =========================================================================
   Bottom-sheet multi-select (component_bottom_sheet_multiselect.py)
   Every selector is scoped under `.bsms-*` so nothing leaks into other pages.
   Colors use Bootstrap CSS variables so the sheet follows the active
   light/dark theme automatically.
   ========================================================================= */

/* ---- trigger (mimics a dcc.Dropdown control) --------------------------- */
/* Mirror the app's .form-control (04_forms_inputs.css) so the trigger looks
   exactly like a normal text input: same tokens, padding, font-size, focus. */
.bsms-trigger.btn {
    width: 100%;
    text-align: left;
    display: flex;
    /* flex-start so the caret stays at the top-right when chips wrap to
       several lines (the box grows downward). */
    align-items: flex-start;
    justify-content: space-between;
    gap: 8px;
    padding: 6px 12px;                       /* = .form-control 0.375rem 0.75rem */
    line-height: 1.5;                        /* match input height */
    font-size: var(--font-size-sm, 0.875rem);
    font-weight: 400;
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #212529);
    border: 1px solid var(--border-primary, #ced4da);
    border-radius: var(--bs-border-radius, 6px);
    overflow: hidden;
}
.bsms-trigger.btn:hover {
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #212529);
    border-color: var(--border-primary, #ced4da);
    box-shadow: none;
}
.bsms-trigger.btn:focus {                    /* = .form-control:focus */
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #212529);
    border-color: var(--border-focus, #0d6efd);
    box-shadow: 0 0 0 0.25rem var(--border-focus-shadow, rgba(13, 110, 253, 0.25));
}
.bsms-trigger-placeholder { color: var(--text-muted, #6c757d); }
/* single-select: one value, shown as plain truncating text. flex:1 1 0 + min-width:0
   lets it shrink so a long label ellipsis-truncates instead of clipping. */
.bsms-trigger-value {
    flex: 1 1 0;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
/* multi-select: each value is an outlined chip; chips wrap onto new lines so
   they stay within the control width instead of overflowing it. */
.bsms-trigger-chips {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 4px;
    flex: 1 1 auto;
    min-width: 0;                            /* allow chips to shrink/wrap */
}
.bsms-trigger-chip {
    max-width: 100%;
    padding: 0 6px;
    /* keep the readable 14px — don't shrink text to save space; height is
       gained by wrapping instead. */
    font-size: var(--font-size-sm, 0.875rem);
    line-height: 1.45;
    border: 1px solid var(--border-primary, #ced4da);
    border-radius: 4px;
    background: var(--bg-secondary, rgba(0, 0, 0, 0.03));
    color: var(--text-primary, #212529);
    overflow: hidden;                        /* truncate a single over-long chip */
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bsms-trigger-chip-more {
    color: var(--text-muted, #6c757d);
    background: transparent;
}
.bsms-trigger-caret {
    color: var(--text-muted, #6c757d);
    flex: 0 0 auto;
    line-height: 1.45;                       /* align with the first chip row */
}

/* ---- backdrop ---------------------------------------------------------- */
.bsms-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.45);
    z-index: 1055;
    opacity: 0;
    pointer-events: none;
    /* a drag starting on the backdrop must not scroll the page behind the sheet */
    touch-action: none;
    transition: opacity 0.2s ease;
}
.bsms-backdrop.bsms-open { opacity: 1; pointer-events: auto; }

/* Lock the page scroll while the sheet is open, so a stray touch just outside the
   list (on the backdrop or sheet chrome) doesn't scroll the content behind it.
   Touch devices only (phones + tablets, incl. iPad ≥768px) via the input-modality
   query — on a desktop pointer this would cause a scrollbar-width layout shift, and
   it's a touch problem anyway. Mirrors Bootstrap's body.modal-open lock. The
   sheet's option list is its own scroll container, so it still scrolls normally.
   Uses :has() (Safari 15.4+/Chrome 105+/Firefox 121+ — universal on our target
   mobile browsers); a browser without it simply skips the lock and keeps the old
   scroll-bleed behavior — graceful, nothing breaks. */
@media (hover: none) and (pointer: coarse) {
    html:has(.bsms-backdrop.bsms-open),
    body:has(.bsms-backdrop.bsms-open) { overflow: hidden; }
}

/* ---- the sheet --------------------------------------------------------- */
.bsms-sheet {
    position: fixed;
    left: 0;
    right: 0;
    /* lifted above the soft keyboard by JS via --bsms-kb (see
       bottom_sheet_multiselect.js); 0 when there's no keyboard. */
    bottom: var(--bsms-kb, 0px);
    z-index: 1056;
    display: flex;
    flex-direction: column;
    /* cap to the *visible* viewport when the keyboard is up (--bsms-vvh, set by
       JS) so the sheet never extends behind the keyboard; 80vh otherwise. */
    max-height: min(80vh, calc(var(--bsms-vvh, 100vh) - 12px));
    background: var(--bg-primary, #fff);
    color: var(--text-primary, #212529);
    border-top: 1px solid var(--border-primary, #dee2e6);
    border-top-left-radius: 16px;
    border-top-right-radius: 16px;
    box-shadow: 0 -8px 30px rgba(0, 0, 0, 0.25);
    transform: translateY(100%);
    /* visibility (delayed until the slide-out finishes) guarantees a closed
       sheet is fully gone regardless of its height — otherwise a short sheet's
       top edge / box-shadow can peek above the viewport bottom. */
    visibility: hidden;
    transition: transform 0.25s ease, visibility 0s linear 0.25s;
    /* respect the iOS home-indicator safe area */
    padding-bottom: env(safe-area-inset-bottom, 0px);
}
.bsms-sheet.bsms-open {
    transform: translateY(0);
    visibility: visible;
    transition: transform 0.25s ease;    /* show immediately, then slide up */
}

/* Keyboard-aware lift (mobile). bottom_sheet_multiselect.js adds .bsms-kb-open
   on <html> and sets --bsms-kb / --bsms-vvh while the filter input is focused
   and the soft keyboard is up. Pin the sheet to fill the visible viewport so a
   short filtered list top-anchors right under the filter (above the keyboard)
   instead of collapsing to the bottom of the screen behind it. The lift itself
   (bottom: --bsms-kb) and the max-height cap are on .bsms-sheet above. */
.bsms-kb-open .bsms-sheet {
    height: calc(var(--bsms-vvh, 100vh) - 12px);
}
@media (min-width: 768px) {
    .bsms-sheet {
        left: 50%;
        right: auto;
        bottom: 5vh;
        width: 480px;
        max-width: 92vw;
        border-radius: 16px;
        border: 1px solid var(--border-primary, #dee2e6);
        transform: translate(-50%, 130%);
    }
    .bsms-sheet.bsms-open { transform: translate(-50%, 0); }
    /* keyboard-aware: when the soft keyboard is up (iPad etc.), lift the
       centered card above it too — without this, the breakpoint's bottom: 5vh
       overrides the root --bsms-kb lift and the card sits behind the keyboard.
       (Specificity 0,0,2,0 beats the .bsms-sheet bottom: 5vh above; the base
       .bsms-kb-open height rule still fills it to the visible viewport.) */
    .bsms-kb-open .bsms-sheet { bottom: var(--bsms-kb, 0px); }
}

/* ---- header ------------------------------------------------------------ */
.bsms-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--border-primary, #dee2e6);
}
.bsms-title {
    font-weight: 600;
    font-size: 15px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}
.bsms-header-actions { display: flex; align-items: center; gap: 4px; flex: 0 0 auto; }

/* ---- filter ------------------------------------------------------------ */
.bsms-filter-wrap { padding: 12px 16px 4px; }
.bsms-filter.form-control {
    /* >=16px keeps iOS Safari from auto-zooming on focus */
    font-size: 16px;
    min-height: 44px;
}

/* ---- scrollable option list ------------------------------------------- */
.bsms-list {
    flex: 1 1 auto;
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    /* don't chain the scroll to the page when the list hits its top/bottom edge */
    overscroll-behavior: contain;
    padding: 4px 16px 16px;
}
.bsms-checklist { display: flex; flex-direction: column; }
.bsms-option {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 4px;
    font-size: 15px;
    line-height: 1.3;
    cursor: pointer;
    border-bottom: 1px solid var(--border-primary, rgba(0, 0, 0, 0.08));
}
.bsms-option:last-child { border-bottom: none; }
.bsms-option-input {
    width: 20px;
    height: 20px;
    flex: 0 0 auto;
    cursor: pointer;
}

/* ---- "show more" pagination ------------------------------------------- */
.bsms-more { width: 100%; margin-top: 12px; }