/* SALESSYNC — TOONZAAL (app/kiosk)
   ================================
   De balk bovenaan, het venster dat openspringt en de wachtrij op het tabblad
   Toonzaal. Laadt ná tokens.css en glas.css en gebruikt alleen wat daar al staat:
   dezelfde glaslagen, dezelfde diepte, dezelfde statuskleur als indicator.

   Drie afspraken uit het huis die hier terugkomen:

     1. HET GLASRECEPT is vier dingen samen (licht óp het vlak, waas eronder,
        binnenranden voor de dikte, schaduw voor het zweven). Laat er één weg en
        het wordt weer een grijs vlak — zie de kop van glas.css.
     2. DE STATUSKLEUR zit in --status en komt terug als linkerrand, als schijn in
        de hover en als gloed. Goud = net aangemeld, oker = eerste herinnering,
        rood = tweede. De kleur schreeuwt nooit over het hele vlak.
     3. BEWEGING HANGT OP html.beweging-aan. Op Windows staat "animaties
        weergeven" standaard uit, dus zonder die voorwaarde zou elke animatie
        hier onzichtbaar afgespeeld worden (gemeten 22-08-2026, B-les in glas.css).
        Zonder de klasse blijft alles staan waar het staat — alleen stil.        */


/* ── De balk bovenaan ───────────────────────────────────────────────────────
   Hij staat in de topbar en dus op elk tabblad. Hij is een KNOP: hij brengt je
   naar de toonzaal. Daarom leest hij als glas met diepte, licht hij op als je
   erover gaat, en zakt hij in als je drukt.                                   */

#toonzaal-balk {
    --status: var(--merk);
    position: relative;
    display: none;                      /* het script zet hem aan */
    align-items: center;
    gap: .5rem;
    max-width: 42vw;
    padding: .46rem 1rem;
    border: 0;
    border-radius: var(--rond-vol);
    font: 700 var(--tekst-s) / 1.1 var(--lettertype);
    letter-spacing: .01em;
    color: var(--tekst);
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    background:
        linear-gradient(152deg,
            rgba(255, 255, 255, .22) 0%,
            rgba(255, 255, 255, .07) 46%,
            rgba(255, 255, 255, .02) 72%,
            rgba(255, 255, 255, .10) 100%),
        radial-gradient(130% 160% at 78% 0%,
            color-mix(in srgb, var(--status) 44%, transparent) 0%,
            color-mix(in srgb, var(--status) 16%, transparent) 55%,
            transparent 100%),
        var(--glas-2);
    backdrop-filter: blur(var(--waas)) saturate(180%) brightness(110%);
    -webkit-backdrop-filter: blur(var(--waas)) saturate(180%) brightness(110%);
    box-shadow:
        var(--diepte-2),
        inset 0 1px 0 rgba(255, 255, 255, .42),
        inset 0 -1px 0 rgba(0, 0, 0, .26),
        inset 0 0 0 1px color-mix(in srgb, var(--status) 34%, var(--lijn-sterk)),
        0 0 26px color-mix(in srgb, var(--status) 22%, transparent);
    transition: var(--vloei);
}

/* Het bolletje vooraan is de hartslag: het ademt zolang er iemand wacht. */
#toonzaal-balk .tz-stip {
    width: .55rem;
    height: .55rem;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--status);
    box-shadow: 0 0 0 0 color-mix(in srgb, var(--status) 60%, transparent);
}

html.beweging-aan #toonzaal-balk .tz-stip {
    animation: tz-wacht-hartslag 2.4s cubic-bezier(.4, 0, .2, 1) infinite;
}

/* Wacht er iemand al langer, dan ademt de hele pil mee — trager dan een
   knipperlicht, want het moet opvallen zonder te jagen. */
html.beweging-aan #toonzaal-balk[data-trap="1"],
html.beweging-aan #toonzaal-balk[data-trap="2"] {
    animation: tz-wacht-gloed 3.2s ease-in-out infinite;
}

html.beweging-aan #toonzaal-balk[data-trap="2"] { animation-duration: 2.2s; }

#toonzaal-balk:hover {
    transform: translateY(-2px) scale(1.02);
    background:
        linear-gradient(148deg,
            rgba(255, 255, 255, .40) 0%,
            rgba(255, 255, 255, .14) 30%,
            rgba(255, 255, 255, .04) 58%,
            rgba(255, 255, 255, .24) 100%),
        radial-gradient(130% 170% at 78% 0%,
            color-mix(in srgb, var(--status) 58%, transparent) 0%,
            color-mix(in srgb, var(--status) 20%, transparent) 58%,
            transparent 100%),
        var(--glas-3);
    box-shadow:
        var(--diepte-3),
        inset 0 1px 0 rgba(255, 255, 255, .62),
        inset 0 -1px 0 rgba(0, 0, 0, .30),
        inset 0 0 0 1px color-mix(in srgb, var(--status) 52%, var(--lijn-sterk)),
        0 0 46px color-mix(in srgb, var(--status) 34%, transparent);
}

#toonzaal-balk:active { transform: translateY(0) scale(.99); }

#toonzaal-balk:focus-visible {
    outline: 2px solid color-mix(in srgb, var(--status) 70%, var(--tekst));
    outline-offset: 2px;
}

/* Zonder beweging: geen sprong, wel hetzelfde glas en dezelfde gloed. */
html:not(.beweging-aan) #toonzaal-balk:hover { transform: none; }

@keyframes tz-wacht-hartslag {
    0%, 62%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--status) 55%, transparent); }
    30%           { box-shadow: 0 0 0 .34rem color-mix(in srgb, var(--status) 0%, transparent); }
}

@keyframes tz-wacht-gloed {
    0%, 100% { box-shadow:
        var(--diepte-2),
        inset 0 1px 0 rgba(255, 255, 255, .42),
        inset 0 -1px 0 rgba(0, 0, 0, .26),
        inset 0 0 0 1px color-mix(in srgb, var(--status) 34%, var(--lijn-sterk)),
        0 0 22px color-mix(in srgb, var(--status) 18%, transparent); }
    50%      { box-shadow:
        var(--diepte-3),
        inset 0 1px 0 rgba(255, 255, 255, .52),
        inset 0 -1px 0 rgba(0, 0, 0, .28),
        inset 0 0 0 1px color-mix(in srgb, var(--status) 52%, var(--lijn-sterk)),
        0 0 52px color-mix(in srgb, var(--status) 40%, transparent); }
}

/* Smal scherm: de titel en de periodekiezer hebben voorrang, dus de balk krimpt
   mee. Onder 700px blijft het korte bericht over ("3 wachten"), onder 460px
   alleen het aantal — de kleur en het bolletje vertellen de rest. */
#toonzaal-balk .tz-kort { display: none; }

@media (max-width: 900px) {
    #toonzaal-balk { max-width: 38vw; padding: .42rem .8rem; }
}

@media (max-width: 700px) {
    #toonzaal-balk .tz-lang { display: none; }
    #toonzaal-balk .tz-kort { display: inline; }
}

@media (max-width: 460px) {
    #toonzaal-balk { max-width: none; padding: .4rem .6rem; font-size: var(--tekst-xs); }
}


/* ── Het venster ────────────────────────────────────────────────────────────
   Het springt open midden op het scherm en blijft staan tot er op een knop
   geklikt is. Daarom mag het er goed uitzien: dit is het moment waarop iemand
   in de toonzaal staat te wachten.                                            */

#toonzaalmelding-overlay {
    position: fixed;
    inset: 0;
    z-index: 12000;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 1rem;
    background: radial-gradient(120% 120% at 50% 0%,
        rgba(5, 20, 31, .42) 0%, rgba(5, 20, 31, .68) 100%);
    backdrop-filter: blur(6px) saturate(120%);
    -webkit-backdrop-filter: blur(6px) saturate(120%);
    /* perspectief op de OUDER: zo kantelt de kaart in de ruimte in plaats van
       plat te schalen. Dat is het verschil tussen "groter worden" en "naar je
       toe komen". */
    perspective: 1100px;
}

html.beweging-aan #toonzaalmelding-overlay { animation: tz-waas .22s ease-out both; }

.tz-kaart {
    --status: var(--merk);
    position: relative;
    width: min(440px, 100%);
    padding: 1.5rem 1.7rem 1.4rem;
    border-radius: var(--rond);
    border-left: 4px solid var(--status);
    color: var(--tekst);
    transform-style: preserve-3d;
    background:
        linear-gradient(150deg,
            rgba(255, 255, 255, .20) 0%,
            rgba(255, 255, 255, .07) 40%,
            rgba(255, 255, 255, .02) 70%,
            rgba(255, 255, 255, .10) 100%),
        radial-gradient(120% 130% at 85% 0%,
            color-mix(in srgb, var(--status) 20%, transparent) 0%,
            transparent 62%),
        var(--glas-2);
    backdrop-filter: blur(var(--waas-diep)) saturate(190%) brightness(112%);
    -webkit-backdrop-filter: blur(var(--waas-diep)) saturate(190%) brightness(112%);
    box-shadow:
        var(--diepte-3),
        inset 0 1px 0 rgba(255, 255, 255, .48),
        inset 0 0 0 1px rgba(255, 255, 255, .07),
        inset 0 -1px 0 rgba(0, 0, 0, .28),
        0 0 60px color-mix(in srgb, var(--status) 24%, transparent);
}

html.beweging-aan .tz-kaart { animation: tz-binnen .34s cubic-bezier(.16, .84, .32, 1.06) both; }

/* Een lichtstreep over de bovenrand: de dikte van de plaat, zoals bij de
   knoppen in glas.css. */
.tz-kaart::before {
    content: "";
    position: absolute;
    inset: 0 0 auto 0;
    height: 1px;
    border-radius: var(--rond) var(--rond) 0 0;
    background: linear-gradient(90deg,
        transparent 0%,
        color-mix(in srgb, var(--status) 60%, rgba(255, 255, 255, .7)) 30%,
        rgba(255, 255, 255, .75) 55%,
        transparent 100%);
    opacity: .7;
}

.tz-kop {
    font-size: var(--tekst-xs);
    font-weight: 700;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: var(--status);
    display: flex;
    align-items: center;
    gap: .45rem;
}

.tz-kop .tz-stip {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--status);
}

html.beweging-aan .tz-kop .tz-stip {
    animation: tz-wacht-hartslag 2s cubic-bezier(.4, 0, .2, 1) infinite;
}

.tz-naam {
    font-size: 1.55rem;
    font-weight: 700;
    line-height: 1.15;
    margin: .35rem 0 .15rem;
}

.tz-regel { font-size: var(--tekst-m); color: var(--tekst-zacht); }
.tz-vraag { font-size: var(--tekst-m); margin-top: .35rem; }
.tz-tijd  { font-size: var(--tekst-s); color: var(--tekst-uit); margin-top: .3rem; }

.tz-knoppen {
    display: flex;
    gap: .6rem;
    margin-top: 1.25rem;
    flex-wrap: wrap;
}

.tz-knoppen .btn { flex: 1 1 auto; }

/* De afteller van "Ben je nog bezig?" (WQ-074): groot, want het gaat om seconden. */
.tz-afteller {
    margin-top: .8rem;
    font-size: 2.2rem;
    font-weight: 800;
    line-height: 1;
    color: var(--status);
    font-variant-numeric: tabular-nums;
}
.tz-afteller span { font-size: 3rem; }
.tz-kaart .tz-berichttekst { margin: .7rem 0 .3rem; }

.tz-voet {
    font-size: var(--tekst-xs);
    color: var(--tekst-uit);
    margin-top: .85rem;
    line-height: 1.35;
}

/* Op een gsm staat de kaart onderaan, waar de duim is, en staan de knoppen
   onder elkaar: groot genoeg om in één beweging te raken. */
@media (max-width: 520px) {
    #toonzaalmelding-overlay { align-items: flex-end; padding: .6rem; }
    .tz-kaart { width: 100%; padding: 1.2rem 1.2rem 1.1rem; }
    .tz-naam { font-size: 1.35rem; }
    .tz-knoppen { flex-direction: column; }
    .tz-knoppen .btn { width: 100%; }
}

@keyframes tz-waas {
    from { opacity: 0; }
    to   { opacity: 1; }
}

@keyframes tz-binnen {
    from { opacity: 0; transform: translateY(14px) scale(.94) rotateX(7deg); }
    to   { opacity: 1; transform: translateY(0)    scale(1)   rotateX(0deg); }
}


/* ── Het tabblad Kiosk ──────────────────────────────────────────────────────
   Eigenaar 25-09-2026: "dit is slordig ... mooie knoppen, professionele opmaak,
   overzicht." Daarom, van boven naar onder:

     1. een KOPBALK met de titel, hoe vers de lijst is, en alle handelingen als
        knop (geen onderstreepte tekstlinks meer);
     2. (tot 25-09-2026 drie tegels met de aantallen; weg, want ze herhaalden de
        kaarten hieronder — eigenaar: "vind je het nodig dat dit dubbel staat?");
     3. per groep een KAART met een teller in de kop; een klant is een rij met
        de statuskleur als linkerrand, de knoppen rechts op één lijn;
     4. wat vandaag afgesloten is als een rustige TABEL;
     5. de uitleg achter "Hoe werkt het?", niet als lange voetnoot.

   Werkscherm = rustig (ontwerpsysteem §12): glas zonder waas op kaarten, status
   alleen als linkerrand of kleine marker, goud alleen op de hoofdknop.       */

.tz-scherm { max-width: 1100px; }

/* Een <a> met de knopstijl (Overeenkomst openen, Openen in het register) is een
   knop, geen link: zonder dit onderstreepte de browser hem. */
.tz-scherm a.btn { text-decoration: none; display: inline-flex; align-items: center; }

/* 1. De kopbalk */
.tz-hoofd {
    display: flex;
    align-items: center;
    gap: 1rem;
    flex-wrap: wrap;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    border-radius: var(--rond);
    background: var(--glas-licht), var(--glas-1);
    box-shadow: var(--diepte-1), var(--binnenrand), inset 0 0 0 1px var(--lijn);
}

.tz-hoofd-tekst { min-width: 0; }
.tz-hoofd h3 { margin: 0; font-size: var(--tekst-l); font-weight: 700; color: var(--tekst); }

.tz-stand {
    display: flex;
    align-items: center;
    gap: .45rem;
    margin-top: .2rem;
    font-size: var(--tekst-s);
    color: var(--tekst-zacht);
}

/* Het groene bolletje zegt: deze lijst leeft (ververst vanzelf). */
.tz-live {
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    flex: 0 0 auto;
    background: var(--ok);
    box-shadow: 0 0 0 3px color-mix(in srgb, var(--ok) 22%, transparent);
}

.tz-acties {
    display: flex;
    gap: .5rem;
    flex-wrap: wrap;
    margin-left: auto;
}

/* 3. De kaarten per groep */
.tz-sectie {
    margin-bottom: 1rem;
    border-radius: var(--rond);
    overflow: hidden;
    background: var(--glas-licht), var(--glas-1);
    box-shadow: var(--diepte-1), var(--binnenrand), inset 0 0 0 1px var(--lijn);
}

.tz-sectie-kop {
    display: flex;
    align-items: center;
    gap: .6rem;
    padding: .8rem 1.1rem;
    border-bottom: 1px solid var(--lijn);
}

.tz-sectie-kop h4 { margin: 0; font-size: var(--tekst-m); font-weight: 700; color: var(--tekst); }

.tz-teller {
    min-width: 1.6rem;
    padding: .08rem .5rem;
    border-radius: var(--rond-vol);
    text-align: center;
    font-size: var(--tekst-xs);
    font-weight: 700;
    color: var(--tekst-zacht);
    background: var(--glas-2);
    box-shadow: inset 0 0 0 1px var(--lijn-sterk);
    font-variant-numeric: tabular-nums;
}

.tz-sectie-lijf { padding: .8rem; display: flex; flex-direction: column; gap: .6rem; }

/* Een lege groep is een smalle regel: titel, teller 0 en een korte zin. */
.tz-sectie--leeg .tz-sectie-kop { border-bottom: 0; padding-top: .6rem; padding-bottom: .6rem; }
.tz-sectie--leeg .tz-sectie-kop h4 { color: var(--tekst-zacht); }
.tz-sectie-leeg { font-size: var(--tekst-s); color: var(--tekst-uit); }

.tz-leeg-blok {
    padding: 1.1rem;
    text-align: center;
    font-size: var(--tekst-s);
    color: var(--tekst-zacht);
}

/* Een klant = een rij: wie links, de klok in het midden, de knoppen rechts. */
.tz-rij {
    --status: var(--merk);
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: .6rem 1.25rem;
    padding: .9rem 1.1rem;
    border-radius: var(--rond-klein);
    border-left: 3px solid var(--status);
    background: var(--glas-1);
    box-shadow: inset 0 0 0 1px var(--lijn);
    transition: var(--vloei);
}

.tz-rij:hover {
    background: var(--glas-2);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--status) 30%, var(--lijn));
}

.tz-rij .tz-wie { min-width: 0; }
.tz-rij .tz-naam { font-size: 1.05rem; font-weight: 700; margin: 0; line-height: 1.25; }

.tz-kenmerken { display: flex; flex-wrap: wrap; gap: .35rem; margin-top: .4rem; }

.tz-chip {
    display: inline-block;
    padding: .12rem .5rem;
    border-radius: 6px;
    font-size: var(--tekst-xs);
    font-weight: 600;
    color: var(--tekst-zacht);
    background: var(--glas-2);
    box-shadow: inset 0 0 0 1px var(--lijn);
    white-space: nowrap;
}

.tz-chip--soort { color: var(--tekst); box-shadow: inset 0 0 0 1px var(--lijn-sterk); }

.tz-rij .tz-vraag { font-size: var(--tekst-s); margin-top: .4rem; color: var(--tekst-zacht); }
.tz-rij .tz-vraag b { color: var(--tekst); }
.tz-hint { font-size: var(--tekst-xs); color: var(--tekst-uit); margin-top: .4rem; }

.tz-rij .tz-klok { text-align: right; white-space: nowrap; }
.tz-rij .tz-wacht { font-weight: 700; font-size: var(--tekst-m); color: var(--status); }
.tz-rij .tz-bij { font-weight: 600; font-size: var(--tekst-s); color: var(--tekst); }
.tz-rij .tz-tijd { font-size: var(--tekst-xs); color: var(--tekst-uit); margin-top: .15rem; }

.tz-rij-acties { display: flex; gap: .5rem; flex-wrap: wrap; justify-content: flex-end; }

/* Het testritpaneel van een klant hangt onder zijn rij, over de volle breedte. */
.tz-rij .tz-testrit { grid-column: 1 / -1; }

/* 4. De tabel (vandaag afgesloten, en het register) */
.tz-tabel-wrap { overflow-x: auto; }

.tz-tabel { width: 100%; border-collapse: collapse; font-size: var(--tekst-s); }

.tz-tabel th {
    text-align: left;
    padding: .6rem 1.1rem;
    font-size: var(--tekst-xs);
    font-weight: 700;
    letter-spacing: .05em;
    text-transform: uppercase;
    color: var(--tekst-uit);
    border-bottom: 1px solid var(--lijn);
    white-space: nowrap;
}

.tz-tabel td {
    padding: .65rem 1.1rem;
    border-bottom: 1px solid var(--lijn);
    color: var(--tekst);
    vertical-align: top;
}

.tz-tabel tbody tr:last-child td { border-bottom: 0; }
.tz-tabel tbody tr:hover td { background: var(--glas-1); }

/* De uitkomst: een klein bolletje in de statuskleur, de tekst zelf blijft rustig. */
.tz-uitkomst { display: inline-flex; align-items: center; gap: .45rem; white-space: nowrap; }
.tz-uitkomst::before {
    content: "";
    width: .5rem;
    height: .5rem;
    border-radius: 50%;
    background: var(--status);
    flex: 0 0 auto;
}

.tz-zacht { font-size: var(--tekst-xs); color: var(--tekst-uit); }

/* 5. De uitleg, dichtgeklapt */
.tz-uitleg {
    margin-top: .4rem;
    padding: .7rem 1.1rem;
    border-radius: var(--rond);
    background: var(--glas-1);
    box-shadow: inset 0 0 0 1px var(--lijn);
    font-size: var(--tekst-s);
    color: var(--tekst-zacht);
}

.tz-uitleg summary { cursor: pointer; font-weight: 600; color: var(--tekst); }
.tz-uitleg ul { margin: .6rem 0 .2rem 1.1rem; padding: 0; line-height: 1.55; }
.tz-uitleg li { margin-bottom: .3rem; }

/* Een melding boven de tabel van het register (wie maar een deel ziet). */
.tz-melding {
    margin-bottom: 1rem;
    padding: .7rem 1rem;
    border-radius: var(--rond-klein);
    border-left: 3px solid var(--info);
    background: var(--glas-1);
    font-size: var(--tekst-s);
    color: var(--tekst-zacht);
}

/* De zoekbalk van het register: velden met een label erboven, de knop ernaast. */
.tz-zoekbalk {
    display: flex;
    flex-wrap: wrap;
    align-items: flex-end;
    gap: .6rem;
    padding: .9rem 1.1rem;
    border-bottom: 1px solid var(--lijn);
}

.tz-veld { display: flex; flex-direction: column; gap: .25rem; }
.tz-veld span { font-size: var(--tekst-xs); font-weight: 600; color: var(--tekst-zacht); }

/* ── WQ-074 (eigenaar 25-09-2026) ───────────────────────────────────────── */

/* De kaart waar een melding of een getal naartoe sprong, licht even op. */
html.beweging-aan .tz-sectie--licht { animation: tz-oplichten 1.4s cubic-bezier(.22, 1, .36, 1) 1; }

@keyframes tz-oplichten {
    0%   { box-shadow: var(--diepte-1), var(--binnenrand), inset 0 0 0 2px var(--merk); }
    100% { box-shadow: var(--diepte-1), var(--binnenrand), inset 0 0 0 1px var(--lijn); }
}

.tz-sectie { scroll-margin-top: 1rem; }

/* "Geholpen door": groot wie, en sinds wanneer. */
.tz-helper { text-align: right; white-space: nowrap; }
.tz-helper-label { font-size: var(--tekst-xs); font-weight: 700; letter-spacing: .05em;
                   text-transform: uppercase; color: var(--tekst-uit); }
.tz-helper-naam { font-size: var(--tekst-l); font-weight: 700; color: var(--tekst); line-height: 1.25; }
.tz-rij .tz-helper .tz-tijd { font-size: var(--tekst-s); color: var(--tekst-zacht); }

/* De vraag "Ben je nog bezig?" op de eigen rij. */
.tz-vraagbalk {
    grid-column: 1 / -1;
    padding: .55rem .8rem;
    border-radius: var(--rond-klein);
    border-left: 3px solid var(--let-op);
    background: var(--glas-2);
    font-size: var(--tekst-s);
    color: var(--tekst-zacht);
}

/* Een bericht van een klant: zijn eigen woorden, rustig in beeld. */
.tz-berichttekst {
    margin: .55rem 0 0;
    padding: .55rem .8rem;
    border-left: 3px solid var(--lijn-sterk);
    border-radius: var(--rond-klein);
    background: var(--glas-2);
    font-size: var(--tekst-m);
    color: var(--tekst);
    white-space: normal;
    word-break: break-word;
}

/* Een getal in een tabel is een knop naar de rijen erachter. */
.tz-getal-knop { min-width: 2.6rem; font-variant-numeric: tabular-nums; font-weight: 700; }
.tz-getal-nul { color: var(--tekst-uit); padding-left: .9rem; }

/* De statistieken (WQ-074, eigenaar 25-09-2026: "statistieken met mooie 3D grafieken en
   telkaarten zoals op het dashboard. Netjes geanimeerd en hoover effecten."). De kaart is de
   datacard van het dashboard, de telkaarten zijn dash-kpi-tile (glans + hover), de grafieken
   krijgen hun 2.5D-diepte en animatie uit ssGrafiekTaal (core.js). */
.tz-stats { padding: 1.1rem 1.25rem; margin: 0 0 1rem; }
.tz-stats-kop { display: flex; align-items: center; gap: .8rem; flex-wrap: wrap; margin-bottom: 1rem; }
.tz-stats-kop h4 { margin: 0; font-size: var(--tekst-l); font-weight: 700; color: var(--tekst); }
.tz-periodes { margin-left: auto; display: flex; gap: .4rem; flex-wrap: wrap; }
.tz-kpis { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.tz-kpi { font: inherit; width: 100%; min-width: 0; }
button.tz-kpi { cursor: pointer; }
.tz-kpi--stil { cursor: default; }
.tz-grafieken { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: .8rem; margin-bottom: 1rem; }
.tz-grafiek-titel { font-size: var(--tekst-s); font-weight: 700; color: var(--tekst-zacht); margin-bottom: .4rem; }
.tz-grafiek-vak { position: relative; height: 240px; }
.tz-stats .tz-tabel-wrap { border-radius: var(--rond-klein); box-shadow: inset 0 0 0 1px var(--lijn); }

/* Gsm en smalle tablet: de rij wordt een kolom en de knoppen worden groot genoeg
   voor een duim. */
@media (max-width: 760px) {
    .tz-acties { margin-left: 0; width: 100%; }
    .tz-acties .btn { flex: 1 1 auto; }
    .tz-rij { grid-template-columns: 1fr; }
    .tz-rij .tz-klok, .tz-helper { text-align: left; }
    .tz-sectie--leeg .tz-sectie-kop { flex-wrap: wrap; }
    .tz-kpis, .tz-grafieken { grid-template-columns: 1fr; }
    .tz-periodes { margin-left: 0; }
    .tz-rij-acties { justify-content: stretch; }
    .tz-rij-acties .btn { flex: 1 1 auto; }
}


/* ── De balk en de rest van de kopbalk ──────────────────────────────────────
   GEMETEN 22-09-2026 op het scherm van de eigenaar (venster ±1270px): de balk
   kroop tegen de paginatitel aan en brak over twee regels. Twee oorzaken, allebei
   hier opgelost zonder de kopbalk zelf te herschrijven:

     1. de titel gaf geen ruimte prijs. Een titel die niet mag krimpen, duwt
        alles wat erna komt de ruimte uit. Hij krijgt nu een afkapping met
        puntjes — "Retail – Bestelling" blijft leesbaar, maar hij houdt de balk
        niet meer gegijzeld.
     2. bij een middelgroot venster past de volle zin niet meer naast de
        maand- en jaarkeuze. Daar schakelt hij nu al over op het korte bericht,
        in plaats van pas op een gsm.                                          */

.topbar > div:first-child { min-width: 0; }

.topbar h2#page-title {
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

#toonzaal-balk { margin-left: .9rem; flex: 0 0 auto; }

@media (max-width: 1280px) {
    #toonzaal-balk .tz-lang { display: none; }
    #toonzaal-balk .tz-kort { display: inline; }
}

/* Het testritpaneel op het verkoperscherm (WQ-052). Rustig: het klapt alleen open wanneer
   de verkoper erom vraagt, en het toont per stap alleen wat hij nu moet doen. Sinds 25-09-2026
   met kleine groepstitels (Bestuurder, Wagen, Nummerplaat) zodat je ziet waar je bent. */
.tz-testrit:empty { display: none; }
.tz-testrit { margin-top: .2rem; padding: .8rem 1rem; border-radius: var(--rond-klein);
              background: var(--glas-2); box-shadow: inset 0 0 0 1px var(--lijn);
              border-left: 3px solid var(--merk); }
.tz-rit-kop { font-size: var(--tekst-s); margin-bottom: .6rem; color: var(--tekst-zacht); }
.tz-rit-kop b { color: var(--tekst); }
.tz-rit-velden { display: flex; gap: .5rem; flex-wrap: wrap; align-items: center; margin-bottom: .5rem; }
.tz-groep-titel { font-size: var(--tekst-xs); font-weight: 700; letter-spacing: .05em;
                  text-transform: uppercase; color: var(--tekst-uit); margin: .7rem 0 .35rem; }
.tz-invoer { padding: .45rem .65rem; border: 1px solid var(--lijn-sterk); border-radius: var(--rond-klein);
             background: var(--card); color: var(--tekst); min-width: 9rem; font-size: var(--tekst-s); }
.tz-noot { font-size: var(--tekst-s); color: var(--tekst-zacht); margin: .35rem 0 0; }
.tz-plaat { display: inline-block; padding: .2rem .55rem; border-radius: 6px; font-weight: 700;
            letter-spacing: .03em; font-size: var(--tekst-s); color: var(--tekst);
            background: var(--glas-2); box-shadow: inset 0 0 0 1px var(--lijn-sterk); white-space: nowrap; }
.tz-telaat { color: var(--let-op); box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--let-op) 45%, transparent); }

/* Een overeenkomst die de verkoper zelf opmaakt: hetzelfde paneel, maar met een vak waarin
   de klant tekent. Wit, want een handtekening hoort zwart op wit te staan -- ook wanneer de
   rest van SalesSync donker is. */
#tz-zelf:empty { display: none; }
#tz-zelf { margin: 0 0 1rem; padding: 1rem 1.2rem; border-radius: var(--rond);
          background: var(--glas-licht), var(--glas-1);
          box-shadow: var(--diepte-1), var(--binnenrand), inset 0 0 0 1px var(--lijn);
          border-left: 3px solid var(--merk); }
.tz-paneel-kop { display: flex; align-items: flex-start; justify-content: space-between; gap: 1rem;
                 padding-bottom: .6rem; border-bottom: 1px solid var(--lijn); }
.tz-paneel-kop b { color: var(--tekst); }
.tz-vink { display: flex; align-items: flex-start; gap: .5rem; margin: .7rem 0 .2rem; font-size: var(--tekst-s); }
.tz-vink input { margin-top: .2rem; }
.tz-teken { display: flex; flex-direction: column; gap: .3rem; margin-bottom: .6rem; }
.tz-teken canvas { width: 100%; max-width: 26rem; height: 8rem; background: #fff;
                   border: 1px solid var(--lijn-sterk); border-radius: var(--rond-klein); touch-action: none; cursor: crosshair; }

/* Het register: dezelfde rustige tabel als "Vandaag afgesloten". Geen kleurtjes -- dit wordt
   gelezen wanneer er een boete binnenkomt, niet de hele dag bekeken. */
.tz-register td .tz-chip { text-transform: lowercase; }