/*
    Weergavemodal - uitsplitsen / vergelijken / verloop.

    Nagebouwd naar design_handoff_vergelijk_filter (DUO-Onderwijs design system).
    Bewuste afwijkingen van de handoff, afgestemd met Yaron op 18-08-2026:

      - de accentkleur is niet de vaste lime #CDFF79 maar var(--portal-accent);
        het groene thema is toevallig exact die lime, het blauwe thema is oranje.
      - iconen zijn bootstrap-icons (bi-*), niet Lucide; die set staat er al.
      - het lettertype is dat van het portaal (Lato), niet Arial/Suisse.
      - de ondergrens n<10 uit het ontwerp bestaat hier niet; dat is
        model.MinRespondents en die is per dashboard en per figuur instelbaar.

    De maten, radii, hoogtes en de opbouw van de rijen komen wel uit de handoff.
*/

.weergave-balk {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .75rem;
    min-height: 2.125rem;
    margin: 0 0 1.25rem;
}

.weergave-balk[hidden] {
    display: none;
}

/* ---- de knop Weergave met de wisknop ertegenaan ---------------------- */

/* De reset stond los aan het eind van de actiebalk, en daar was niet te zien waar hij
   bij hoorde. Nu is het een tweede segment van dezelfde knop: hij verschijnt alleen
   als er iets toegepast is, en wist precies dat. */
.weergave-knopgroep {
    display: inline-flex;
    align-items: stretch;
}

.weergave-knopgroep__knop {
    position: relative;
    z-index: 1;
}

.weergave-knopgroep--met-wissen .weergave-knopgroep__knop {
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}

.weergave-knopgroep__wissen {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 2.4rem;
    min-height: 2.7rem;
    margin-left: -1px;
    border: 1px solid var(--portal-border, #E9E9E9);
    border-radius: 0 .4rem .4rem 0;
    background: var(--portal-surface, #fff);
    box-shadow: 0 4px 14px rgba(25, 25, 25, .08);
    color: var(--portal-ink, #191919);
    font-size: .75rem;
    text-decoration: none;
    transition: background-color 120ms linear;
}

.weergave-knopgroep__wissen:hover {
    background: var(--portal-nav-active-bg, #F6F6F1);
    color: var(--portal-ink, #191919);
}

/* ---- de samenvatting van wat er is toegepast ------------------------- */

.weergave-samenvatting {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
    min-width: 0;
}

.weergave-samenvatting__modus {
    font-size: .875rem;
    color: var(--portal-muted, #6D6D6D);
}

.weergave-samenvatting__telling {
    font-size: .75rem;
    color: var(--portal-muted, #6D6D6D);
}

.weergave-scheiding {
    display: inline-block;
    width: 1px;
    height: 1.125rem;
    background: var(--portal-border, #E9E9E9);
}

/* Platte chip in de samenvattingsregel: dit is weergave, geen besturing. */
.weergave-chip-plat {
    display: inline-flex;
    align-items: center;
    height: 1.75rem;
    padding: 0 .625rem;
    border-radius: 999px;
    background: var(--portal-accent, #CDFF79);
    color: var(--portal-ink, #191919);
    font-size: .75rem;
    line-height: 1;
    white-space: nowrap;
}

.weergave-chip-plat__dimensie {
    opacity: .55;
    margin-right: .25rem;
}

/* ---- het paneel (een gewone Bootstrap-modal) -------------------------- */

/* De handoff tekent 704px. In de praktijk staat er in een reeksrij een label, drie
   standen, een waarde en een aantal naast elkaar, en heeft een unit een naam als
   "Haarlemmermeer Lyceum Dalton". Op 704px brak dat af; 832px geeft die regel lucht. */
.weergave-modal .modal-dialog {
    max-width: 52rem;
}

.weergave-paneel {
    border: 0;
    border-radius: 8px;
    background: var(--portal-surface, #fff);
    box-shadow: inset 0 0 0 1px var(--portal-border, #E9E9E9), 0 16px 48px rgba(0, 0, 0, .16);
}

.weergave-paneel__kop {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 1rem 1.1875rem;
    border-bottom: 1px solid var(--portal-border, #E9E9E9);
}

.weergave-paneel__titel {
    margin: 0;
    font-size: 1.4375rem;
    line-height: 1.2;
    letter-spacing: -.03em;
}

.weergave-icoonknop {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 1.75rem;
    height: 1.75rem;
    padding: 0;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--portal-ink, #191919);
    font-size: .75rem;
    transition: background-color 120ms linear;
}

.weergave-icoonknop:hover {
    background: var(--portal-nav-active-bg, #F6F6F1);
}

/* ---- rijen in de popout ---------------------------------------------- */

.weergave-rij {
    display: flex;
    align-items: flex-start;
    gap: .75rem;
    padding: .875rem 1.1875rem;
    border-bottom: 1px solid var(--portal-border, #E9E9E9);
}

/* display:flex op de klasse wint van het [hidden] van de browser; zonder deze regel
   blijft de derde rij als lege strook met een rand staan zodra hij verborgen is. */
.weergave-rij[hidden] {
    display: none;
}

.weergave-rij__label {
    flex: 0 0 5rem;
    padding-top: .5rem;
    font-size: .6875rem;
    letter-spacing: .02em;
    color: var(--portal-muted, #6D6D6D);
}

.weergave-rij__inhoud {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .5rem;
}

.weergave-rij__inhoud--kolom {
    display: block;
}

.weergave-rij__aantal {
    flex: 0 0 auto;
    align-self: center;
    font-size: .75rem;
    color: var(--portal-muted, #6D6D6D);
    white-space: nowrap;
}

.weergave-leeg {
    font-size: .875rem;
    color: var(--portal-muted, #6D6D6D);
}

/* ---- basis-chip met keuzelijst --------------------------------------- */

.weergave-chip {
    display: inline-flex;
    align-items: center;
    min-width: 0;
    max-width: 100%;
    gap: .25rem;
    height: 1.75rem;
    padding: 0 .5rem 0 .625rem;
    border-radius: 999px;
    background: var(--portal-accent, #CDFF79);
    color: var(--portal-ink, #191919);
    font-size: .75rem;
    line-height: 1;
}

.weergave-chip__dimensie {
    opacity: .55;
}

.weergave-chip__select {
    max-width: 100%;
    min-width: 0;
    padding: 0 1rem 0 0;
    border: 0;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23191919'%3E%3Cpath d='M8 11L3 5.5h10z'/%3E%3C/svg%3E") no-repeat right center/.7rem;
    color: inherit;
    font-size: .75rem;
    font-family: inherit;
    line-height: 1;
    appearance: none;
    -webkit-appearance: none;
}

.weergave-chip__select:focus-visible {
    outline: 2px solid var(--portal-ink, #191919);
    outline-offset: 2px;
}

.weergave-chip__weg {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0;
    border: 0;
    background: transparent;
    color: inherit;
    font-size: .75rem;
    opacity: .55;
    transition: opacity 120ms linear;
}

.weergave-chip__weg:hover {
    opacity: 1;
}

/* Benchmark en meting zijn geen respondentfilter, dus geen lime chip maar een
   rustige menuknop - zoals in de handoff. */
.weergave-keuze {
    height: 2.125rem;
    max-width: 16rem;
    padding: 0 1.75rem 0 .75rem;
    border: 0;
    border-radius: 3px;
    background: transparent url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16' fill='%23191919'%3E%3Cpath d='M8 11L3 5.5h10z'/%3E%3C/svg%3E") no-repeat right .625rem center/.7rem;
    box-shadow: inset 0 0 0 1px var(--portal-border, #E9E9E9);
    color: var(--portal-ink, #191919);
    font-family: inherit;
    font-size: .875rem;
    appearance: none;
    -webkit-appearance: none;
    transition: background-color 120ms linear;
}

.weergave-keuze:hover {
    background-color: var(--portal-nav-active-bg, #F6F6F1);
}

/* ---- rustige knop (+ Kenmerk, + Reeks, Annuleren) -------------------- */

.weergave-knop {
    display: inline-flex;
    align-items: center;
    gap: .375rem;
    height: 2.125rem;
    padding: 0 .75rem;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--portal-ink, #191919);
    box-shadow: inset 0 0 0 1px var(--portal-border, #E9E9E9);
    font-size: .875rem;
    line-height: 1;
    transition: background-color 120ms linear;
}

.weergave-knop:hover {
    background: var(--portal-nav-active-bg, #F6F6F1);
}

.weergave-knop[disabled] {
    opacity: .3;
    pointer-events: none;
}

.weergave-knop--klein {
    height: 1.625rem;
    padding: 0 .5rem;
    font-size: .75rem;
}

.weergave-knop--gevuld {
    padding: 0 1.125rem;
    background: var(--portal-ink, #191919);
    color: #fff;
    box-shadow: none;
    transition: opacity 120ms linear;
}

.weergave-knop--gevuld:hover {
    opacity: .9;
}

.weergave-knop--stil {
    box-shadow: none;
    color: var(--portal-muted, #6D6D6D);
}

/* ---- segmented control ----------------------------------------------- */

.weergave-schakelaar {
    display: inline-flex;
    gap: 0;
    padding: 3px;
    border-radius: 5px;
    background: var(--portal-page-bg, #F4F4ED);
}

.weergave-schakelaar__knop {
    display: inline-flex;
    align-items: baseline;
    gap: .375rem;
    height: 2.125rem;
    padding: 0 .875rem;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--portal-ink, #191919);
    font-size: .875rem;
    line-height: 2.125rem;
    white-space: nowrap;
    transition: background-color 120ms linear;
}

.weergave-schakelaar__knop[aria-pressed="true"] {
    background: var(--portal-surface, #fff);
    box-shadow: inset 0 0 0 1px var(--portal-border, #E9E9E9);
}

.weergave-schakelaar__knop[disabled] {
    opacity: .3;
    pointer-events: none;
}

.weergave-schakelaar--klein .weergave-schakelaar__knop {
    height: 1.625rem;
    padding: 0 .625rem;
    font-size: .75rem;
    line-height: 1.625rem;
}

.weergave-uitleg {
    font-size: .75rem;
    color: var(--portal-muted, #6D6D6D);
}

/* ---- reeksrijen ------------------------------------------------------- */

.weergave-reeksen {
    display: flex;
    flex-direction: column;
    gap: .5rem;
    width: 100%;
}

.weergave-reeks {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .625rem;
    min-height: 3.25rem;
    padding: .5625rem .875rem;
    border-radius: 5px;
    background: var(--portal-surface, #fff);
    box-shadow: inset 0 0 0 1px var(--portal-border, #E9E9E9);
}

/* De reeksidentiteit: geen eigen kleur, maar een streepje in aflopende dekking.
   Een reeks inkleuren zou de vijfpuntslegenda onbetrouwbaar maken. */
.weergave-reeks__streep {
    flex: 0 0 auto;
    width: 3px;
    height: 22px;
    border-radius: 2px;
    background: var(--portal-ink, #191919);
}

.weergave-reeks__label {
    flex: 0 0 5rem;
    font-size: .75rem;
    line-height: 1.3;
    overflow-wrap: anywhere;
}

/* min-width: 0 is hier dragend. Zonder die regel krimpt een flex-item niet onder zijn
   inhoud, en schoof een lange waarde als "Avantis College" over de n= heen. */
.weergave-reeks__waarde {
    flex: 1 1 0;
    min-width: 0;
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: .375rem;
    overflow: hidden;
}

.weergave-reeks__aantal {
    flex: 0 0 auto;
    min-width: 3.5rem;
    font-size: .75rem;
    color: var(--portal-muted, #6D6D6D);
    text-align: right;
    white-space: nowrap;
}

.weergave-reeks__aantal--laag,
.weergave-waarschuwing {
    color: #FE4342;
}

.weergave-teller {
    font-size: .75rem;
    color: var(--portal-muted, #6D6D6D);
}

.weergave-toevoegrij {
    display: flex;
    align-items: center;
    gap: .625rem;
    padding-left: 5.75rem;
    margin-top: .5rem;
}

/* "Alle opties" als een regel in plaats van een chip per waarde: met twintig waarden
   rekt een badge per optie het paneel met vier regels op. */
.weergave-alle {
    display: block;
    width: 100%;
    font-size: .75rem;
    color: var(--portal-muted, #6D6D6D);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.weergave-alle__aantal {
    color: var(--portal-ink, #191919);
}

/* ---- de waardenkiezer bij een selectie -------------------------------- */

/* Net als het kenmerkmenu: in de stroom, niet als zwevend laagje. Hij hoort bij een
   reeksrij, dus hij staat erin en duwt die rij langer. */
.weergave-kiezer {
    width: 100%;
    margin-top: .5rem;
    border-radius: 5px;
    background: var(--portal-page-bg, #F4F4ED);
}

.weergave-kiezer__kop {
    display: flex;
    align-items: center;
    gap: .5rem;
    padding: .5rem .625rem;
}

.weergave-kiezer__titel {
    flex: 1 1 auto;
    font-size: .6875rem;
    letter-spacing: .02em;
    color: var(--portal-muted, #6D6D6D);
}

.weergave-kiezer__snel {
    padding: 0 .375rem;
    border: 0;
    background: transparent;
    color: var(--portal-ink, #191919);
    font-size: .75rem;
    text-decoration: underline;
}

.weergave-kiezer__zoek {
    flex: 1 1 auto;
    min-width: 0;
    height: 1.75rem;
    padding: 0 .5rem;
    border: 0;
    border-radius: 3px;
    background: var(--portal-surface, #fff);
    box-shadow: inset 0 0 0 1px var(--portal-border, #E9E9E9);
    color: var(--portal-ink, #191919);
    font-size: .8125rem;
}

.weergave-kiezer__lijst {
    max-height: 12rem;
    overflow-y: auto;
    padding: 0 .375rem .375rem;
}

.weergave-kiezer__optie {
    display: flex;
    align-items: center;
    gap: .5rem;
    width: 100%;
    padding: .375rem .625rem;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--portal-ink, #191919);
    font-size: .8125rem;
    text-align: left;
    transition: background-color 120ms linear;
}

.weergave-kiezer__optie:hover {
    background: var(--portal-nav-active-bg, #F6F6F1);
}

/* Een vierkantje in plaats van een echte checkbox: die is in elke browser anders van
   maat en kleur, en trekt de rijhoogte scheef. */
.weergave-kiezer__vink {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: .875rem;
    height: .875rem;
    border-radius: 2px;
    box-shadow: inset 0 0 0 1px var(--portal-ink, #191919);
    font-size: .5rem;
    color: var(--portal-ink, #191919);
}

.weergave-kiezer__optie[aria-pressed="true"] .weergave-kiezer__vink {
    background: var(--portal-accent, #CDFF79);
}

.weergave-kiezer__optie[aria-pressed="false"] .weergave-kiezer__vink i {
    visibility: hidden;
}

.weergave-kiezer__aantal {
    margin-left: auto;
    font-size: .6875rem;
    color: var(--portal-muted, #6D6D6D);
}

/* De gekozen waarden samengevat naast de knop Kies: nooit meer dan een regel. */
.weergave-selectie {
    min-width: 0;
    font-size: .75rem;
    color: var(--portal-muted, #6D6D6D);
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.weergave-selectie__aantal {
    color: var(--portal-ink, #191919);
}

/* ---- metingen (verloop) ---------------------------------------------- */

.weergave-meting {
    display: inline-flex;
    align-items: center;
    height: 1.75rem;
    padding: 0 .75rem;
    border: 0;
    border-radius: 999px;
    background: var(--portal-page-bg, #F4F4ED);
    box-shadow: inset 0 0 0 1px var(--portal-border, #E9E9E9);
    color: var(--portal-ink, #191919);
    font-size: .75rem;
    line-height: 1;
    transition: background-color 120ms linear;
}

.weergave-meting[aria-pressed="true"] {
    background: var(--portal-accent, #CDFF79);
    box-shadow: none;
}

.weergave-meting[disabled] {
    opacity: .55;
    pointer-events: none;
}

/* ---- voet ------------------------------------------------------------- */

.weergave-paneel__voet {
    display: flex;
    align-items: center;
    gap: .75rem;
    padding: .75rem 1.1875rem;
    border-top: 1px solid var(--portal-border, #E9E9E9);
    border-radius: 0 0 8px 8px;
    background: var(--portal-page-bg, #F4F4ED);
}

.weergave-paneel__voet-midden {
    flex: 1 1 auto;
    display: flex;
    align-items: center;
    justify-content: center;
    gap: .375rem;
}

.weergave-stip {
    width: 10px;
    height: 10px;
    border-radius: 50%;
    background: var(--portal-accent, #CDFF79);
}

/* ---- het tweetraps kenmerkmenu --------------------------------------- */

/* Staat bewust in de stroom en niet als zwevend laagje: als overlay viel de lijst
   buiten de modal en groeide het venster niet mee. Nu duwt het menu het paneel
   langer, en scrollt de modal als het niet meer past. */
.weergave-menu {
    width: 100%;
    margin-top: .5rem;
    padding: .375rem;
    border-radius: 5px;
    background: var(--portal-surface, #fff);
    box-shadow: inset 0 0 0 1px var(--portal-border, #E9E9E9);
}

.weergave-menu[hidden] {
    display: none;
}

.weergave-menu__regel {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: .5rem;
    width: 100%;
    padding: .5rem .625rem;
    border: 0;
    border-radius: 3px;
    background: transparent;
    color: var(--portal-ink, #191919);
    font-size: .875rem;
    text-align: left;
    transition: background-color 120ms linear;
}

.weergave-menu__regel:hover {
    background: var(--portal-nav-active-bg, #F6F6F1);
}

.weergave-menu__regel[disabled] {
    opacity: .3;
    pointer-events: none;
}

.weergave-menu__aantal {
    font-size: .6875rem;
    color: var(--portal-muted, #6D6D6D);
}

.weergave-menu__kop {
    display: flex;
    align-items: center;
    gap: .375rem;
    padding: .25rem;
}

.weergave-menu__zoek {
    flex: 1 1 auto;
    height: 1.875rem;
    padding: 0 .5rem;
    border: 0;
    border-radius: 3px;
    background: var(--portal-page-bg, #F4F4ED);
    color: var(--portal-ink, #191919);
    font-size: .8125rem;
}

.weergave-menu__lijst {
    max-height: 16.5rem;
    overflow-y: auto;
}

.weergave-menu__groep {
    padding: .5rem .625rem .25rem;
    font-size: .6875rem;
    letter-spacing: .02em;
    color: var(--portal-muted, #6D6D6D);
}

/* ---- focus, beweging -------------------------------------------------- */

.weergave-balk :focus-visible,
.weergave-paneel :focus-visible,
.weergave-menu :focus-visible {
    outline: 2px solid var(--portal-ink, #191919);
    outline-offset: 2px;
}

@media (max-width: 62rem) {
    .weergave-toevoegrij {
        padding-left: 0;
    }
}

@media print {
    .weergave-balk {
        display: none;
    }
}