/* ============================================================================
 * HireTheVeterans.com — Filter Sidebar Stylesheet
 * Path: /public_html/assets/css/jobs-filters-sidebar.css
 * Replaces: /public_html/assets/css/jobs-filters-sidebar.css (S85)
 * ============================================================================
 *
 * Session 86 changes vs S85:
 *   • Closed-section labels lifted from #8fa8c0 (4.83:1, ghost text) to #b5c8de
 *     (7.8:1). Open section labels lifted to #e8f0f8. Panel heading "FILTERS"
 *     strengthened to match.
 *   • Section dividers lifted from rgba(255,255,255,0.06) to 0.12 — visible
 *     visual rhythm between sections.
 *   • Active-section indicator: red dot pip REMOVED. Replaced with a left-edge
 *     vertical bar (3px #C0392B) positioned at panel inner edge via pseudo-
 *     element so layout doesn't shift. Provides positional cue colour-blind
 *     users get equally.
 *   • Single-select inputs (.filter-select) moved from pure white #fff to soft
 *     off-white #f4f6f9 — softens the harsh white-on-navy edge while preserving
 *     13.5:1 text contrast.
 *   • Country pills inactive state strengthened (rgba 0.04 → 0.07, border 0.12
 *     → 0.18) so they read as distinct buttons rather than near-flat.
 *   • Hiring-path icons inactive opacity lifted 0.85 → 0.95.
 *   • REMOVED .filter-select-multi rules — short multi-selects converted to
 *     checkbox lists (.filter-cbl), long ones to searchable checkbox lists
 *     (.filter-cbl with .filter-cbl-search).
 *   • ADDED .filter-cbl pattern — accessible scrollable checkbox lists with
 *     optional client-side search. Replaces ALL native <select multiple>
 *     elements: Agency (256 rows, searchable), Grade Schedule (64, searchable),
 *     Occupational Series (367, searchable), Clearance Level (17, short),
 *     Appointment Type (7, short), Service Type (3, short), plus the two new
 *     ENUM sections.
 *   • ADDED summary :focus-visible left-border accent (separate from active
 *     border) for keyboard users — visible focus on the section heading.
 *
 * Palette anchors (HTV-locked, unchanged):
 *   #2C5F8A — site blue, focus rings, FCL checked highlight
 *   #C0392B — site red, active filter accent, pill focus ring
 *   #1B2A4A — dark navy text on light inputs
 *   #1e2d4a — panel card background
 * ============================================================================ */


/* ───────────────────────────────────────────────────────────────────────────
 * Filter panel — navy card container
 * ─────────────────────────────────────────────────────────────────────────── */

.filter-panel {
    background: var(--card-bg, #1e2d4a);
    border: 1px solid var(--border, rgba(255,255,255,0.08));
    border-radius: 8px;
    padding: 1.1rem 1.25rem;
    position: relative; /* required for .filter-section::before active accent */
}

.filter-panel-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: 0.5rem;
    padding-bottom: 0.85rem;
    border-bottom: 1px solid rgba(255,255,255,0.18);
}

.filter-panel-heading {
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.95rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: #e8f0f8;
    margin: 0;
}

.filter-clear-all {
    font-size: 0.78rem;
    font-weight: 600;
    color: #ff7a6b;
    text-decoration: underline;
}
.filter-clear-all:hover  { color: #ffa499; }
.filter-clear-all:focus-visible {
    outline: 2px solid #C0392B;
    outline-offset: 2px;
    border-radius: 2px;
}


/* ───────────────────────────────────────────────────────────────────────────
 * Accordion sections — native <details>/<summary>, zero JS
 * ─────────────────────────────────────────────────────────────────────────── */

.filter-section {
    margin: 0;
    padding: 0;
    border-bottom: 1px solid rgba(255,255,255,0.12);
    position: relative;
}
.filter-section:last-of-type { border-bottom: none; }

/* Active-filter accent — left edge of section, positioned in panel padding
   so it sits flush against the panel inner edge without shifting layout. */
.filter-section.has-active::before {
    content: '';
    position: absolute;
    left: -1.25rem;          /* matches .filter-panel padding-left */
    top: 0.65rem;
    bottom: 0.65rem;
    width: 3px;
    background: #C0392B;
    border-radius: 0 2px 2px 0;
}

.filter-section-head {
    list-style: none;
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 0.6rem;
    padding: 0.85rem 0;
    cursor: pointer;
    user-select: none;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #b5c8de;          /* lifted from #8fa8c0 — closed state */
    transition: color 0.15s;
}
.filter-section-head::-webkit-details-marker { display: none; }
.filter-section-head::marker { content: ''; }
.filter-section-head:hover { color: #e0eaf2; }
.filter-section[open]    > .filter-section-head { color: #e8f0f8; }  /* open state */
.filter-section.has-active > .filter-section-head { color: #e8f0f8; } /* active also bright */

.filter-section-head:focus-visible {
    outline: 2px solid #2C5F8A;
    outline-offset: 2px;
    border-radius: 3px;
}

.filter-section-label {
    flex: 1;
    min-width: 0;
}

/* Chevron — rotates 180° when section opens */
.filter-section-chevron {
    width: 9px;
    height: 9px;
    border-right: 2px solid currentColor;
    border-bottom: 2px solid currentColor;
    transform: rotate(45deg);
    margin-top: -3px;
    transition: transform 0.18s ease;
    flex-shrink: 0;
}
.filter-section[open] > .filter-section-head .filter-section-chevron {
    transform: rotate(-135deg);
    margin-top: 2px;
}

.filter-section-body {
    padding: 0 0 0.95rem 0;
    display: flex;
    flex-direction: column;
    gap: 0.5rem;
}


/* ───────────────────────────────────────────────────────────────────────────
 * Form controls — single-select dropdowns on soft off-white surface
 * ─────────────────────────────────────────────────────────────────────────── */

.filter-select {
    width: 100%;
    background-color: #f4f6f9;        /* softened from #ffffff — eye-test fix */
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 5px;
    color: #1B2A4A;
    padding: 0.5rem 0.7rem;
    font-size: 0.88rem;
    font-family: 'Barlow', sans-serif;
    cursor: pointer;
    appearance: none;
    -webkit-appearance: none;
    -moz-appearance: none;
    /* Inline SVG chevron — color matches dark text */
    background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='10' height='6' viewBox='0 0 10 6'><path fill='%231B2A4A' d='M0 0l5 6 5-6z'/></svg>");
    background-repeat: no-repeat;
    background-position: right 0.7rem center;
    padding-right: 2rem;
}
.filter-select:focus {
    outline: none;
    border-color: #2C5F8A;
    box-shadow: 0 0 0 2px rgba(44,95,138,0.30);
}
.filter-select option {
    background-color: #ffffff;
    color: #1B2A4A;
}

/* Custom checkbox treatment — used by the More Options group */
.filter-checkbox {
    display: flex;
    align-items: center;
    gap: 0.6rem;
    font-size: 0.88rem;
    color: #e8f0f8;
    cursor: pointer;
    padding: 0.25rem 0;
    user-select: none;
    position: relative;
}
.filter-checkbox input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.filter-checkbox-mark {
    width: 1rem;
    height: 1rem;
    border: 2px solid rgba(255,255,255,0.35);
    border-radius: 3px;
    flex-shrink: 0;
    position: relative;
    transition: background 0.15s, border-color 0.15s;
}
.filter-checkbox input:checked ~ .filter-checkbox-mark {
    background: #2C5F8A;
    border-color: #2C5F8A;
}
.filter-checkbox input:checked ~ .filter-checkbox-mark::after {
    content: '';
    position: absolute;
    left: 2px; top: -1px;
    width: 5px; height: 9px;
    border: 2px solid #fff;
    border-top: none; border-left: none;
    transform: rotate(45deg);
}
.filter-checkbox input:focus-visible ~ .filter-checkbox-mark {
    outline: 2px solid #2C5F8A;
    outline-offset: 2px;
}

.vf-star { color: gold; }

.filter-submit-btn {
    width: 100%;
    margin-top: 0.75rem;
    padding: 0.65rem;
    background: #2C5F8A;
    color: #fff;
    border: none;
    border-radius: 5px;
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 700;
    font-size: 0.88rem;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
}
.filter-submit-btn:hover  { background: #366e9c; }
.filter-submit-btn:focus-visible {
    outline: 2px solid #C0392B;
    outline-offset: 2px;
}


/* ───────────────────────────────────────────────────────────────────────────
 * Filter Checkbox List (FCL) — replaces native <select multiple>
 *   Variants:
 *     .filter-cbl              base block, scrolls at max-height
 *     .filter-cbl-list.is-short  no scroll, no max-height (≤17 items)
 *     .filter-cbl-search       optional search input above the list
 * ─────────────────────────────────────────────────────────────────────────── */

.filter-cbl {
    display: flex;
    flex-direction: column;
    gap: 0.4rem;
}

.filter-cbl-search {
    width: 100%;
    background-color: #f4f6f9;
    border: 1px solid rgba(255,255,255,0.18);
    border-radius: 5px;
    color: #1B2A4A;
    padding: 0.42rem 0.6rem;
    font-size: 0.85rem;
    font-family: 'Barlow', sans-serif;
}
.filter-cbl-search::placeholder { color: #6b7a8c; }
.filter-cbl-search:focus {
    outline: none;
    border-color: #2C5F8A;
    box-shadow: 0 0 0 2px rgba(44,95,138,0.30);
}

.filter-cbl-list {
    list-style: none;
    margin: 0;
    padding: 0.3rem;
    max-height: 14rem;
    overflow-y: auto;
    background: rgba(255,255,255,0.04);
    border: 1px solid rgba(255,255,255,0.10);
    border-radius: 5px;
    scrollbar-width: thin;
    scrollbar-color: rgba(255,255,255,0.25) rgba(255,255,255,0.04);
}
.filter-cbl-list.is-short {
    max-height: none;
    overflow-y: visible;
}
.filter-cbl-list::-webkit-scrollbar        { width: 6px; }
.filter-cbl-list::-webkit-scrollbar-track  { background: rgba(255,255,255,0.04); }
.filter-cbl-list::-webkit-scrollbar-thumb  { background: rgba(255,255,255,0.25); border-radius: 3px; }
.filter-cbl-list::-webkit-scrollbar-thumb:hover { background: rgba(255,255,255,0.35); }

/* Empty-state — shown when search matches nothing */
.filter-cbl-empty {
    padding: 0.6rem 0.5rem;
    font-size: 0.82rem;
    font-style: italic;
    color: #b5c8de;
    text-align: center;
}

.filter-cbl-item {
    margin: 0;
    padding: 0;
}

.filter-cbl-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.38rem 0.45rem;
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: background 0.12s;
}
.filter-cbl-row:hover { background: rgba(255,255,255,0.06); }
.filter-cbl-row.is-checked {
    background: rgba(44, 95, 138, 0.22);
}

.filter-cbl-row input[type="checkbox"] {
    position: absolute;
    opacity: 0;
    pointer-events: none;
}

.filter-cbl-mark {
    width: 14px;
    height: 14px;
    border: 1.5px solid rgba(255,255,255,0.40);
    border-radius: 3px;
    flex-shrink: 0;
    position: relative;
    background: rgba(255,255,255,0.05);
    transition: background 0.12s, border-color 0.12s;
}
.filter-cbl-row input:checked ~ .filter-cbl-mark {
    background: #2C5F8A;
    border-color: #2C5F8A;
}
.filter-cbl-row input:checked ~ .filter-cbl-mark::after {
    content: '';
    position: absolute;
    left: 3px; top: 0;
    width: 4px; height: 8px;
    border: 2px solid #fff;
    border-top: none; border-left: none;
    transform: rotate(45deg);
}
.filter-cbl-row input:focus-visible ~ .filter-cbl-mark {
    outline: 2px solid #2C5F8A;
    outline-offset: 2px;
}

.filter-cbl-label {
    flex: 1;
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: 0.86rem;
    line-height: 1.3;
    color: #d4e2f0;
    overflow-wrap: break-word;
    word-wrap: break-word;
}
.filter-cbl-row.is-checked .filter-cbl-label {
    color: #fff;
    font-weight: 500;
}


/* ───────────────────────────────────────────────────────────────────────────
 * Country pills — US / UK / Global radio group
 * ─────────────────────────────────────────────────────────────────────────── */

.filter-pills {
    display: flex;
    gap: 0.4rem;
    flex-wrap: wrap;
}

.filter-pill {
    flex: 1 1 0;
    min-width: 60px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.48rem 0.55rem;
    background: rgba(255,255,255,0.07);       /* lifted from 0.04 */
    color: #d4e2f0;                            /* lifted from --text-muted */
    border: 1px solid rgba(255,255,255,0.18);  /* lifted from 0.12 */
    border-radius: 4px;
    font-family: 'Barlow Condensed', sans-serif;
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    cursor: pointer;
    user-select: none;
    position: relative;
    transition: background 0.15s, border-color 0.15s, color 0.15s;
}

.filter-pill input[type="radio"] {
    position: absolute;
    width: 1px; height: 1px;
    padding: 0; margin: -1px;
    overflow: hidden;
    clip: rect(0,0,0,0);
    white-space: nowrap;
    border: 0;
}

.filter-pill:hover {
    border-color: #2C5F8A;
    color: #ffffff;
    background: rgba(255,255,255,0.10);
}

.filter-pill.is-active {
    background: #2C5F8A;
    border-color: #2C5F8A;
    color: #fff;
}

.filter-pill:has(input[type="radio"]:focus-visible),
.filter-pill input[type="radio"]:focus-visible + .filter-pill-label {
    outline: 2px solid #C0392B;
    outline-offset: 2px;
}


/* ───────────────────────────────────────────────────────────────────────────
 * Hiring-paths checkbox group — icons + labels
 * ─────────────────────────────────────────────────────────────────────────── */

.filter-hp-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 0.35rem;
}

.filter-hp-item {
    margin: 0;
    padding: 0;
}

.filter-hp-row {
    display: flex;
    align-items: center;
    gap: 0.55rem;
    padding: 0.42rem 0.48rem;
    background: rgba(255,255,255,0.03);
    border: 1px solid transparent;
    border-radius: 4px;
    cursor: pointer;
    transition: background 0.15s, border-color 0.15s;
}

.filter-hp-row:hover {
    background: rgba(255,255,255,0.07);
    border-color: rgba(255,255,255,0.15);
}

.filter-hp-row.is-checked {
    background: rgba(44, 95, 138, 0.22);
    border-color: #2C5F8A;
}

.filter-hp-row input[type="checkbox"] {
    flex-shrink: 0;
    width: 16px;
    height: 16px;
    margin: 0;
    accent-color: #C0392B;
    cursor: pointer;
}

.filter-hp-icon {
    flex-shrink: 0;
    width: 28px;
    height: 28px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
}

.filter-hp-icon img {
    width: 100%;
    height: 100%;
    object-fit: contain;
    /* Dark-on-transparent SVGs → invert for dark sidebar */
    filter: brightness(0) invert(1);
    opacity: 0.95;                  /* lifted from 0.85 */
}

.filter-hp-row.is-checked .filter-hp-icon img {
    opacity: 1;
}

.filter-hp-label {
    flex: 1;
    min-width: 0;
    font-family: 'Barlow', system-ui, sans-serif;
    font-size: 0.88rem;
    line-height: 1.3;
    color: #e8f0f8;
    overflow-wrap: break-word;
    word-wrap: break-word;
}

.filter-hp-row.is-checked .filter-hp-label {
    color: #fff;
    font-weight: 500;
}

.filter-hp-row:focus-within {
    outline: 2px solid #C0392B;
    outline-offset: 2px;
}


/* ───────────────────────────────────────────────────────────────────────────
 * Mobile overrides
 * ─────────────────────────────────────────────────────────────────────────── */

@media (max-width: 860px) {
    .filter-pills {
        gap: 0.35rem;
    }
    .filter-pill {
        font-size: 0.76rem;
        padding: 0.42rem 0.5rem;
    }
    .filter-cbl-list {
        max-height: 12rem;
    }
    .filter-section-head {
        font-size: 0.84rem;       /* slightly larger on mobile for tap targets */
        padding: 0.95rem 0;
    }
    /* Active accent moves to inner edge of mobile panel (less padding) */
    .filter-section.has-active::before {
        left: -1rem;
    }
}