/* =========================================================================
   Recruiter search — filter panel styles.
   Split out of search.css and injected via the filter_panel fragment's <link>.
   (If you had filter rules left in search.css, remove them to avoid overlap;
   everything the panel needs now lives here.)
   ========================================================================= */

.filter-panel {
    position: sticky;
    top: 76px;
    display: flex;
    flex-direction: column;
    gap: 0;
    background-color: var(--color-darkest);
    border: 1px solid #ffffff14;
    border-left:0px;
    border-top-right-radius: 10px;
    border-bottom-right-radius: 10px;
    padding: 6px 18px 18px;
}

.filter-panel .fp-title {
    font-size: 13px;
    letter-spacing: .12em;
    text-transform: uppercase;
    color: var(--color-info);
    padding: 12px 0 10px;
}

/* ---------- Sections + separators ---------- */
.filter-section {
    display: flex;
    flex-direction: column;
    gap: 10px;
    padding: 14px 0;
    border-top: 1px solid #ffffff14;   /* separator, matches panel border */
}

.fs-head {
    display: flex;
    align-items: center;
    gap: 9px;
    cursor: pointer;
    user-select: none;
}
.fs-name { font-size: 13px; letter-spacing: .03em; color: #e6e6e6; }
.fs-sub { font-size: 11px; color: #8a8a8a; }

.fs-body { display: flex; flex-direction: column; gap: 10px; }

/* A section that is toggled off dims and stops accepting input.
   Pure CSS via :has() — the controller just reads .fs-toggle to decide
   whether to apply the section. */
.filter-section:has(.fs-toggle:not(:checked)) .fs-body {
    opacity: .4;
    pointer-events: none;
    filter: grayscale(.35);
}

/* ---------- Form controls (base inputs render light; force dark) ---------- */
.filter-panel select,
.filter-panel input[type="number"],
.filter-panel input[type="text"] {
    background: #00000045;
    border: 1px solid #ffffff20;
    border-radius: 6px;
    color: #eee;
    padding: 8px 10px;
    font-size: 13px;
    font-family: inherit;
    width: 100%;
}
.filter-panel select:focus,
.filter-panel input:focus {
    outline: none;
    border-color: var(--color-info);
    box-shadow: 0 0 0 2px rgba(52, 152, 219, .22);
}
.filter-panel select option { background: #1a1a1c; color: #eee; }

/* Checkboxes (reset base input padding, tint) */
.filter-panel input[type="checkbox"] {
    width: 16px;
    height: 16px;
    padding: 0;
    margin: 0;
    accent-color: var(--color-info);
    cursor: pointer;
    flex: 0 0 auto;
}

.filter-panel .hint { font-size: 11px; color: #7d7d7d; }

/* Skill picker sits on its own full-width row (column layout) */
.filter-panel .skillpicker-field { width: 100%; }

/* Years as a labelled row */
.fs-row {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
.fs-row > label { font-size: 12px; color: #cfcfcf; white-space: nowrap; }
.fs-row > input[type="number"] { width: 90px; flex: 0 0 auto; }

/* Add-style row: a select/input that grows + a compact add button */
.fs-row-add { display: flex; gap: 8px; align-items: stretch; }
.fs-row-add select { flex: 1 1 auto; }
.fs-row-add .btn { flex: 0 0 auto; }

/* ---------- Multi-select checkbox rows (arrangement) ---------- */
.fs-checks { display: flex; flex-direction: column; gap: 6px; }
.check-row {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: #cfcfcf;
    cursor: pointer;
    padding: 3px 4px;
    border-radius: 6px;
}
.check-row:hover { background: rgba(255, 255, 255, .03); }

/* ---------- Active chips (skills + roles share this) ---------- */
.active-filters { display: flex; flex-direction: column; gap: 6px; }
.active-filters .empty-hint { font-size: 12px; color: #6f6f6f; font-style: italic; }

.filter-chip,
.skill-chip {
    display: flex;
    align-items: center;
    gap: 8px;
    background: var(--color-darker);
    border: 1px solid #ffffff20;
    border-radius: 6px;
    padding: 6px 8px;
    font-size: 13px;
    color: var(--color-lighter);
}
.filter-chip .chip-name,
.skill-chip .chip-name { flex: 1 1 auto; }
.filter-chip .chip-yrs,
.skill-chip .chip-yrs { color: var(--color-info); font-size: 12px; white-space: nowrap; }
.filter-chip .chip-remove,
.skill-chip .chip-remove {
    cursor: pointer;
    color: #888;
    border: none;
    background: none;
    font-size: 13px;
    padding: 0 2px;
}
.filter-chip .chip-remove:hover,
.skill-chip .chip-remove:hover { color: var(--color-danger); }

@media (max-width: 820px) {
    .filter-panel { position: static; }
}

/* Role chips carry no trailing meta — hide the empty slot */
.filter-chip .chip-yrs:empty,
.skill-chip .chip-yrs:empty { display: none; }