/* Planning en Start/Stop op de gsm (Arthur 2/11/2026): op de pc zijn beide tabs af; op de iPhone van Bart
   moeten ze vlot bruikbaar zijn. Alles hieronder staat in een media query voor smalle schermen: de pc-weergave
   verandert niet. Geen nieuwe functies: dezelfde knoppen, groter en op de juiste plaats.
   Wat Bart op de gsm het meest doet: de dag bekijken en een dienst aanpassen (Planning), zien wie er is,
   iemand in- of uitklokken en een uur wijzigen (Start/Stop). Tikdoelen 44 px; invoervelden 16 px (de iPhone
   zoomt anders in bij het tikken). */

@media (max-width: 760px) {

  /* ---------- Planning: de werkbalk in twee regels in plaats van vier ----------
     regel 1: datum ‹ › ⋯ (de datum krimpt, de knoppen niet: '⋯' viel op 375 px naar een eigen regel)
     regel 2: Maand · Week · Dag en Tabel naast elkaar (Tabel had een volle regel voor zich alleen) */
  .pl-bar .pl-pick { flex: 1 1 0; }
  .pl-bar .pl-pick > .pop-btn { overflow: hidden; white-space: nowrap; }
  .pl-bar .cal-nav, .pl-bar .pl-meer { flex: none; }
  .pl-bar #pl-seg, .pl-bar #pl-seg-tabel { box-sizing: border-box; height: 44px; }
  .pl-bar #pl-seg { flex: 0 1 calc(75% - 6px); width: auto; min-width: 0; }
  .pl-bar #pl-seg-tabel { flex: 0 1 calc(25% - 2px); width: auto; min-width: 0; margin-left: 0; }
  .pl-bar #pl-seg button, .pl-bar #pl-seg-tabel button { height: 100%; min-height: 0; }

  /* Dag: de balk en de dagkop plakken bovenaan (Arthur 22/10). Op de gsm namen ze samen de helft van het
     scherm in (375 × 667: 290 px van 667). Na wat scrollen verdwijnt de keuze Maand · Week · Dag · Tabel uit de
     plakkende balk; datum en ‹ › blijven. De ondermarge neemt de plaats van die regel in (44 px + 8 px tussenruimte),
     zodat de inhoud eronder niet verspringt. Wie van weergave wil wisselen, scrolt naar boven. */
  .pl-gescrold:has(.pl2-dagscherm) > .pl-bar:not(.meer-open):not(:has(.pop.open)) :is(#pl-seg, #pl-seg-tabel) { display: none; }
  .pl-gescrold:has(.pl2-dagscherm) > .pl-bar:not(.meer-open):not(:has(.pop.open)) { margin-bottom: 52px; }

  /* ---------- Start/Stop ---------- */
  /* de tegels (gepland, geklokt, na te kijken; ook op de andere bladen) naast elkaar in plaats van volle kaarten
     onder elkaar; vier tegels in twee rijen van twee. De loonkost van nu (kl-lk-rij) blijft zoals hij is. */
  .kl-subhost + * .row:not(.kl-lk-rij):has(> .tile) { grid-template-columns: repeat(auto-fit, minmax(96px, 1fr)) !important; gap: 8px; }
  .kl-subhost + * .row:not(.kl-lk-rij):has(> .tile:nth-child(4)) { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
  .kl-subhost + * .row:not(.kl-lk-rij) > .tile { padding: 10px 12px; }
  .kl-subhost + * .row:not(.kl-lk-rij) > .tile .t-label { font-size: var(--t-s); }
  .kl-subhost + * .row:not(.kl-lk-rij) > .tile .v { font-size: var(--t-xl); }

  /* wie er is komt voor de loonkost van nu: de lijst met de klok is waarvoor Bart de tab opent */
  .kl-subhost + *:has(> #kl-bart-host) { display: flex; flex-direction: column; }
  .kl-subhost + *:has(> #kl-bart-host) > #kl-loonkost-host { order: 1; margin-top: 16px; }
  .kl-subhost + *:has(> #kl-bart-host) > .card ~ .card { order: 2; }

  /* de dag kiezen: ‹ dag › over de volle breedte, pijlen van 44 px */
  .kl-balk:has(> .kl-dag) { flex-wrap: nowrap; }
  .kl-balk .kl-dag { flex: 1; min-width: 0; font-size: var(--t-base); }
  .kl-balk .cal-nav { flex: none; width: 44px; min-height: 44px; }
  .kl-balk #kl-vandaag { min-height: 44px; }

  /* De tabellen van de dag als kaarten: per persoon een kaart met de naam bovenaan, daaronder gepland en
     geklokt naast elkaar, de stand en de knoppen over de volle breedte. Vroeger een tabel van acht kolommen
     waarin 'Bekijken' en '+ nu inklokken' rechts buiten beeld stonden. Het label van elk vak staat in data-l. */
  .kl-kaart-tbl, .kl-kaart-tbl > tbody { display: block; width: 100%; }
  .kl-kaart-tbl > thead { display: none; }
  .kl-kaart-tbl > tbody > tr { display: grid; grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px 12px; padding: 14px; border-bottom: 1px solid var(--line); }
  .kl-kaart-tbl > tbody > tr:last-child { border-bottom: 0; }
  .kl-kaart-tbl > tbody > tr > :is(th, td) { grid-column: 1 / -1; display: block; min-width: 0; padding: 0; border: 0; background: none; text-align: left; white-space: normal; overflow-wrap: anywhere; }
  .kl-kaart-tbl > tbody > tr > td.kl-h { grid-column: auto; }
  .kl-kaart-tbl > tbody > tr > td:empty { display: none; }
  .kl-kaart-tbl > tbody > tr > td[data-l]::before { content: attr(data-l); display: block; margin-bottom: 2px; font-size: var(--t-xs); font-weight: 600;
    letter-spacing: .06em; text-transform: uppercase; color: var(--text-3); }
  .kl-kaart-tbl > tbody > tr > th { font-size: var(--t-base); color: var(--text-strong); }
  .kl-kaart-tbl .kl-wie { font-weight: 600; color: var(--text-strong); }

  /* de rij van een persoon */
  .kl-tbl tr.let-op > th { box-shadow: none; }
  .kl-tbl tr.kl-rij.let-op { box-shadow: inset 4px 0 0 var(--p-rood-inkt); }
  .kl-tbl tr.kl-gezocht { background: var(--warn-bg); box-shadow: inset 4px 0 0 var(--brand); }
  .kl-tbl tr.kl-gezocht > :is(th, td) { background: none; box-shadow: none; }
  .kl-kaart-tbl td.kl-c-act { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
  .kl-kaart-tbl td.kl-c-act:empty { display: none; }
  .kl-kaart-tbl td.kl-c-act > button { flex: 1 1 auto; min-height: 44px; justify-content: center; border: 1px solid var(--line-strong); border-radius: 999px; }
  .kl-kaart-tbl td.kl-c-act > .kl-geen-inklok { flex: 1 1 100%; }
  .kl-voorstel .kl-voorstel-uit { min-height: 44px; }

  /* Bekijken: de registraties en 'Registratie toevoegen' onder de kaart, over de volle breedte */
  .kl-tbl tr.kl-detail { display: block; padding: 0; }
  .kl-tbl tr.kl-detail > td { display: block; }
  .kl-detail-in { padding: 12px; }
  .kl-detail .tblwrap { box-shadow: none; }
  .kl-ev-tbl > tbody > tr { padding: 12px; }
  .kl-nieuw { display: grid; grid-template-columns: minmax(0, 1fr); gap: 10px; max-width: none; }
  .kl-nieuw label { display: grid; gap: 4px; }
  .kl-nieuw :is(select, input) { width: 100%; min-height: 44px; font-size: var(--t-base); }
  .kl-nieuw .kl-voegtoe { min-height: 44px; justify-content: center; }

  /* ---------- Kleur per persoon (Arthur 2/11: 'het is heel donker') ----------
     Elke persoon een eigen kaart met een kleurband links en een lichte tint: groen = binnen, oker = in pauze,
     rood = niet ingeklokt, grijs = klaar, geen tint = nog niet begonnen. De tokens hebben een donkere variant. */
  .kl-tbl > tbody { display: grid; gap: 10px; padding: 10px; }
  .kl-tbl > tbody > tr.kl-rij { --kl-k: var(--line-strong); --kl-bg: var(--surface); border: 1px solid var(--line); border-left: 6px solid var(--kl-k);
    border-radius: 14px; background: var(--kl-bg); }
  .kl-tbl > tbody > tr.kl-rij:last-child { border-bottom: 1px solid var(--line); }
  .kl-tbl > tbody > tr.kl-rij.kl-s-in { --kl-k: var(--ok); --kl-bg: var(--ok-bg); }
  .kl-tbl > tbody > tr.kl-rij.kl-s-pauze { --kl-k: var(--warn); --kl-bg: var(--warn-bg); }
  .kl-tbl > tbody > tr.kl-rij.kl-s-mist { --kl-k: var(--err-ink); --kl-bg: var(--err-bg); }
  .kl-tbl > tbody > tr.kl-rij.kl-s-klaar { --kl-k: var(--text-3); --kl-bg: var(--surface-2, var(--surface)); }
  .kl-tbl tr.kl-rij.let-op { box-shadow: none; }
  .kl-tbl tr.kl-gezocht { box-shadow: 0 0 0 2px var(--brand); }
  .kl-tbl tr.kl-rij > th { display: flex; flex-wrap: wrap; align-items: baseline; gap: 4px 8px; font-size: var(--t-l, var(--t-base)); }
  .kl-tbl tr.kl-rij .chip { font-size: var(--t-s); }
  /* Bekijken in de kleur van het merk, nu inklokken groen */
  .kl-tbl td.kl-c-act > .kl-open { border-color: var(--brand); background: var(--surface); color: var(--text-strong); font-weight: 600; }
  .kl-tbl tr.kl-rij .chip { font-weight: 700; }
  .kl-tbl td.kl-c-act > .kl-inklok { border-color: var(--ok); background: var(--ok-bg); color: var(--ok); font-weight: 700; }

  /* ---------- Bekijken: een blad van onder per persoon ---------- */
  .kl-sheet { width: 100vw; max-height: 92dvh; border-top: 6px solid var(--kl-k, var(--line-strong)); }
  .kl-sheet.kl-s-in { --kl-k: var(--ok); } .kl-sheet.kl-s-pauze { --kl-k: var(--warn); } .kl-sheet.kl-s-mist { --kl-k: var(--err-ink); } .kl-sheet.kl-s-klaar { --kl-k: var(--text-3); }
  .kl-sheet.kl-stil, .kl-sheet.kl-stil::backdrop { animation: none; }
  .kl-sheet .ux-sheet-kop h2 { min-width: 0; overflow-wrap: anywhere; }
  .kl-sheet-in { flex: 1; overflow-y: auto; overscroll-behavior: contain; padding: 0 16px 16px; display: grid; gap: 12px; align-content: start; }
  .kl-sheet-uren { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
  .kl-sheet-uren > div { display: grid; gap: 2px; padding: 10px 12px; border-radius: 12px; background: var(--surface-3, var(--surface)); }
  .kl-sheet-uren strong { font-size: var(--t-l, var(--t-base)); color: var(--text-strong); }
  .kl-sheet-uren small { color: var(--text-3); }
  .kl-snel-rij { display: grid; gap: 8px; }
  .kl-snel { display: inline-flex; align-items: center; justify-content: center; gap: 8px; min-height: 52px; border-radius: 14px; border: 2px solid; font: inherit; font-weight: 700; }
  .kl-snel.kl-snel-eerst { min-height: 56px; font-size: var(--t-l, var(--t-base)); }
  .kl-snel svg.ic { width: 22px; height: 22px; fill: currentColor; }
  .kl-snel-ok { background: var(--ok-bg); border-color: var(--ok); color: var(--ok); }
  .kl-snel-warn { background: var(--warn-bg); border-color: var(--warn); color: var(--warn-ink); }
  .kl-snel-err { background: var(--err-bg); border-color: var(--err-ink); color: var(--err-ink); }
  .kl-sheet .kl-detail-in { padding: 0; }
  .kl-sheet .kl-ev-tbl > tbody > tr { border: 1px solid var(--line); border-radius: 12px; margin-bottom: 8px; }
  .kl-sheet .kl-nieuw { padding: 12px; border-radius: 12px; background: var(--surface-3, var(--surface)); }
}