/* ============================================================
   publiek/filters.css - de zijkant met het zoekvak en de
   filtergroepen, en de indeling zijkant + uitslag.
   Hoort bij templates/public/delen/_filters.html.
   ============================================================ */

/* zijkant links, uitslag rechts */
.indeling {
    display: grid;
    grid-template-columns: 278px minmax(0, 1fr);
    gap: 24px;
    align-items: start;
}

/* Op een breed scherm staan de filters altijd open; de regel
   'Search and filters' om ze open te klappen is er alleen op een
   smal scherm. */
.filters > summary { display: none; }

.paneel {
    margin-bottom: 10px;
    padding: 6px 8px 8px;
    border: 1px solid var(--rand);
    border-radius: var(--rond);
    background: linear-gradient(180deg, var(--vlak) 0%, var(--vlak-diep) 100%);
}

.paneel-titel {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 6px 6px 8px;
    font-size: 14px;
    font-weight: 700;
}
.paneel-titel .icoon { color: #b9a4ff; }

/* ------------------------------------------------- het zoekvak */
.zoekvak { display: flex; }
.zoekvak input {
    flex: 1;
    min-width: 0;
    height: 34px;
    padding: 0 10px;
    border: 1px solid var(--rand);
    border-right: 0;
    border-radius: var(--rond-klein) 0 0 var(--rond-klein);
    background: var(--vlak-diep);
    color: var(--tekst);
    font: inherit;
    font-size: 13px;
    outline: 0;
}
.zoekvak input::placeholder { color: var(--tekst-zacht); }
.zoekvak input:focus { border-color: var(--paars-licht); }
.zoekvak button {
    display: grid;
    place-items: center;
    width: 40px; height: 34px;
    border: 0;
    border-radius: 0 var(--rond-klein) var(--rond-klein) 0;
    background: linear-gradient(180deg, #8b3dff, #6d28d9);
    color: #fff;
    cursor: pointer;
}
.zoekvak button:hover { background: linear-gradient(180deg, #a366ff, #7c3aed); }

/* --------------------------------------------- de filterregels */
.filterlijst { margin: 0; padding: 0; list-style: none; }

/* Een lange lijst (de consoles) schuift in zijn eigen vak: ongeveer
   twaalf regels in beeld, de rest met het wieltje, een veeg of de
   schuifbalk. De bovenste regel ('All consoles') blijft staan. Een
   korte lijst merkt hier niets van. De zijmarge is er alleen om de
   gloed van de paarse balk niet af te snijden. */
.filterlijst {
    max-height: 306px;
    margin: 0 -6px;
    padding: 0 6px;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: thin;
    scrollbar-color: #6d4df2 transparent;
}
.filterlijst::-webkit-scrollbar { width: 8px; }
.filterlijst::-webkit-scrollbar-track { background: transparent; }
.filterlijst::-webkit-scrollbar-thumb { background: #6d4df2; border-radius: 4px; }
.filterlijst::-webkit-scrollbar-thumb:hover { background: #8b6dff; }
.filterlijst > li:first-child {
    position: sticky;
    top: 0;
    z-index: 1;
    padding-bottom: 2px;
    background: var(--vlak);
}

.filterregel {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 1px 8px;
    min-height: 23px;
    border: 1px solid transparent;
    border-radius: 6px;
    color: var(--tekst);
    font-size: 13px;
    text-decoration: none;
}
.filterregel:hover { background: rgba(124, 58, 237, .16); }
.filterregel .naam { flex: 1; min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.filterregel .aantal { color: var(--tekst-zacht); font-variant-numeric: tabular-nums; }

.vakje {
    display: grid;
    place-items: center;
    width: 14px; height: 14px;
    flex: none;
    border: 1.5px solid #8087b8;
    border-radius: 3px;
    color: var(--nacht);
}
.filterregel.aan .vakje { background: #fff; border-color: #fff; }
.filterregel.aan .vakje .icoon { stroke-width: 3.5; }

/* de bovenste regel ('All consoles') als die aan staat: de paarse balk */
.filterregel.alles { margin-bottom: 2px; min-height: 25px; }
.filterregel.alles.aan {
    border-color: #6d4df2;
    background: linear-gradient(90deg, #3a1fb5 0%, #2a1a86 100%);
    box-shadow: 0 0 12px rgba(109, 77, 242, .35);
}
.filterregel.aan:not(.alles) { background: rgba(124, 58, 237, .22); }

/* een keuze die nu niets oplevert */
.filterregel.nul { color: var(--tekst-dof); }
.filterregel.nul .aantal { color: var(--tekst-dof); }

/* ---------------------------------------------- smal scherm */
@media (max-width: 900px) {
    .indeling { grid-template-columns: minmax(0, 1fr); gap: 12px; }

    .filters > summary {
        display: flex;
        align-items: center;
        gap: 10px;
        padding: 10px 14px;
        margin-bottom: 10px;
        border: 1px solid var(--rand-neon);
        border-radius: var(--rond);
        background: var(--vlak);
        font-weight: 700;
        cursor: pointer;
        list-style: none;
    }
    .filters > summary::-webkit-details-marker { display: none; }
    .filters > summary::after { content: "+"; margin-left: auto; font-size: 20px; line-height: 1; color: var(--paars-licht); }
    .filters[open] > summary::after { content: "\2212"; }

    .filterregel { min-height: 34px; font-size: 14px; }   /* groter om op te tikken */
    .filterlijst { max-height: 334px; }                    /* negen regels van 36 hoog */
}