/* UX fase 1 (19/10/2026): de quick wins uit de UX-audit, als laatste laag bovenop theo.css,
   theo-plus.css en theo-fase2.css. Deze file en haar <link> eruit = de look van voor fase 1
   (de wijzigingen in app.js en de tabs blijven dan wel). Elke regel zegt bij welk punt ze hoort. */

/* ---- 2. Eén zwevende knop (assets/js/zweefknop.js) ----
   Pc en tablet: rechtsonder, zoals vroeger de '+', in de veilige zone.
   Gsm (≤ 760 px): in de kopband rechtsboven. Daar bedekt hij nooit inhoud, de onderbalk van het
   personeel ook niet, en hij staat in het bereik van de duim van wie de gsm rechts vasthoudt. */
.tk-fab.zweef { right: calc(22px + env(safe-area-inset-right)); bottom: calc(22px + env(safe-area-inset-bottom)); }
.tk-fab.zweef svg.ic { width: 28px; height: 28px; fill: none; }
.tk-fab.zweef[hidden] { display: none; }
body.zweef-aan main { padding-bottom: 110px; }
.zweef-menu { position: fixed; z-index: 75; right: calc(22px + env(safe-area-inset-right)); bottom: calc(22px + 58px + 10px + env(safe-area-inset-bottom));
  min-width: 230px; padding: 6px; display: grid; gap: 2px;
  background: var(--bg); border: 1px solid var(--line-strong); border-radius: 16px; box-shadow: var(--shadow-pop); }
.zweef-keuze { display: flex; align-items: center; gap: 12px; min-height: 48px; padding: 6px 14px 6px 8px; width: 100%;
  border: 0; border-radius: 10px; background: transparent; color: var(--text-strong); font-weight: 600; text-align: left; position: relative; }
.zweef-keuze:hover, .zweef-keuze:focus-visible { background: var(--surface-3); }
.zweef-ic { width: 36px; height: 36px; flex: none; border-radius: 50%; display: grid; place-items: center;
  background: var(--chrome); color: var(--brand); }
.zweef-ic svg.ic { width: 22px; height: 22px; fill: none; }
.zweef-ic .tk-plus { font-size:var(--t-2xl); line-height: 1; font-weight: 600; transform: translateY(-1px); }
.zweef-tekst { flex: 1; }
.zweef-n { position: static !important; box-shadow: none !important; }
@media (max-width: 760px) {
  body .tk-fab.zweef, body.plus-has-tabbar .tk-fab.zweef, body:has(#pl-bar) .tk-fab.zweef {
    top: calc((var(--header-h) - 44px) / 2 + env(safe-area-inset-top)); bottom: auto !important;
    right: calc(10px + env(safe-area-inset-right)); width: 44px; height: 44px; z-index: 55;
    box-shadow: none; border-color: rgba(212, 175, 55, .55); }
  .tk-fab.zweef svg.ic { width: 24px; height: 24px; }
  .tk-fab.zweef .tk-plus { font-size:var(--t-3xl); }
  .tk-fab.zweef .tk-badge { top: -6px; right: -6px; }
  body.zweef-aan main, body.ok-aan main { padding-bottom: 50px; }
  body.zweef-aan.plus-has-tabbar main, body.ok-aan.plus-has-tabbar main { padding-bottom: calc(86px + env(safe-area-inset-bottom)); }
  .zweef-menu { top: calc(var(--header-h) + 6px + env(safe-area-inset-top)); bottom: auto; right: calc(10px + env(safe-area-inset-right));
    max-width: calc(100vw - 20px); }
  /* de zijbalk open op de gsm: de knop wijkt (de lade ligt erover) */
  body.nav-open-phone .tk-fab.zweef, body.nav-open-phone .zweef-menu { display: none; }
}
@media print { .tk-fab.zweef, .zweef-menu { display: none !important; } }

/* ---- 3. Contrast (WCAG AA: 4,5:1 voor tekst, 3:1 voor grote tekst en vlakken), gemeten op de 14 schermen
   uit de audit. Regel: tekst op messing is inkt, nooit wit of crème. ---- */
/* uitgeschakelde knoppen (Pas toe, Bewaren, Voorstel maken, Verstuur naar UwPayroll): #9a8f72 haalde 3,2:1.
   Nu de gedempte inkt (5,8:1); dat ze uit staan, zegt de stippelrand en de cursor */
button:disabled, button:disabled:hover, button.primary:disabled, button.primary:disabled:hover {
  color: var(--text-3); border-style: dashed; border-color: var(--line-strong); background: var(--surface); box-shadow: none; cursor: not-allowed; }
/* kalenderdagen buiten de maand (Planner, Sociale media: 1,6:1) en voorbije dagen (Mijn beschikbaarheid: 3,2:1) */
.cal-cell.out .dn, .cal-cell.out { color: var(--text-3); }
.mp-cel.voorbij .dn, .mp-cel.voorbij { color: var(--text-3); }
/* het soortlabel in Meldingen ('📅 Rooster': wit op messing 2,9:1) */
.mc-s-rooster .mc-soort, .mc-s-besch .mc-soort, .mc-s-overig .mc-soort { color: var(--text-strong); }
.mc-s-post, .mc-s-social { --mc-k: var(--p-petrol-donker); }   /* blauwgroen iets dieper: wit haalt 5,9:1 (was 4,4) */
/* soort van een aanvraag in Hulp (3,3:1) en de links naar een scherm in de briefing, het rapport en het
   maandoverzicht (4,0:1): olijfinkt (7:1) */
.tk-rij .soort, a.bf-naar { color: var(--text-2); }
/* groen als tekst ('beste dag', tijdwinst: 4,0:1): bladinkt (5,2:1) */
.mo-tijd strong, .bf-tabel tr.bf-beste td { color: var(--ok-ink); }
/* Kasboek: tekst op Barts kolomkleuren (xls.js: xkVars rekent de leesbare kleur uit) */
.xl-tabel th.xk, .xl-tabel th.xk.xl-wit, .xl-tabel tr.xl-tot td.xk { color: var(--xk-t, var(--text-strong)); }
.xl-tabel .xk .xl-klbl, .xl-tabel tr.xl-tot td.xk strong { background: var(--xk-chip, transparent); border-radius: 3px;
  padding: 0 var(--xk-chip-pad, 0); }
.xl-tabel [style*="--xk-chip"] .xl-klbl, .xl-tabel tr.xl-tot td.xk[style*="--xk-chip"] strong { padding: 0 3px; }

/* ---- 4. Theo team op de gsm: de namen braken per letter ----
   Een lang label rechts (jeugdloon, 'onder het laagste barema') maakte de rechterkolom zo breed als
   zijn hele tekst, en de naamkolom kromp tot één letter. De rechterkolom heeft nu een grens en de
   labels lopen er over meer regels; de naam houdt minstens ±9 tekens en breekt alleen tussen woorden. */
@media (max-width: 760px) {
  .plg-kaart { grid-template-columns: auto minmax(8.5rem, 1fr) minmax(0, max-content); }
  .plg-k-rechts { max-width: 9.5rem; min-width: 0; }
  .plg-k-rechts .chip.plg-jl { white-space: normal; text-align: right; max-width: 100%; }
  .plg-k-naam { overflow-wrap: break-word; word-break: normal; hyphens: auto; }
  .plg-k-labels .plg-lab { white-space: normal; }
}

/* Gebruik (beheerder): met de vierde keuze 'Tablets' (punt 4) loopt de rij op de gsm over meer regels */
.gb-wie { max-width: 100%; }
.gb-wie .seg { flex-wrap: wrap; max-width: 100%; }

/* ---- 6. Offline-balk en "bijgewerkt om" (app.js: offlineBalk, bijgewerkt) ---- */
.offline-balk { position: fixed; z-index: 31; top: var(--header-h); left: var(--sidebar-w); right: 0;
  display: flex; align-items: center; justify-content: center; gap: 8px; padding: 8px 16px;
  background: var(--warn-bg); color: var(--messing-nacht); border-bottom: 1px solid var(--line-3); font-size:var(--t-m); font-weight: 600; text-align: center; }
.offline-balk svg.ic { width: 18px; height: 18px; flex: none; fill: currentColor; }
.offline-balk[hidden] { display: none; }
body.nav-closed .offline-balk { left: 0; }
@media (max-width: 1200px) { .offline-balk { left: 0; } }
body.is-offline #main > .view { margin-top: 40px; }
.page-head .bijgewerkt { display: inline-flex; align-items: center; gap: 5px; min-height: 32px; padding: 2px 8px 2px 4px; margin: 4px 0 0 -4px;
  border: 0; border-radius: 999px; background: transparent; color: var(--text-3); font-size:var(--t-s); font-weight: 500;
  font-variant-numeric: tabular-nums; cursor: pointer; }
.page-head .bijgewerkt svg.ic { width: 15px; height: 15px; fill: currentColor; }
.page-head .bijgewerkt:hover { background: var(--surface-3); color: var(--text-strong); }
@media (pointer: coarse) { .page-head .bijgewerkt { min-height: 44px; } }
@media print { .offline-balk, .page-head .bijgewerkt { display: none !important; } }

/* ---- 8. Cijfers, lettergrootte en tikdoelen ----
   Tabulaire cijfers voor bedragen en uren: kolommen staan recht onder elkaar en een cijfer dat verandert,
   verspringt niet. Minimum 12 px: de vaste waarden in de stylesheets staan nu op .75rem (zie de commit);
   hier nog wat relatief is (small, legend). Tikdoelen 44 px op een aanraakscherm; de cellen van het
   rekenblad (Kasboek) en de planner-kalender zijn de bewuste uitzondering (een pc-scherm, en een cel
   is daar een raster, geen knop). */
table, .num, .r, td, th, .tile .v, .metric .v, input[inputmode="decimal"], input[inputmode="numeric"], input[type="number"],
.plg-k-loon, .plg-pu, .bijgewerkt, .na-n, .plus-tab-n, .tk-badge { font-variant-numeric: tabular-nums; }
#main small, #main legend, #main sub, #main sup { font-size: max(.75rem, .85em); }
@media (pointer: coarse) {
  /* uitzonderingen: de cellen van het rekenblad en de kalenders (een raster, geen knop), het actiescherm
     (eigen knoppen van 56 px) en de compacte statusbalk van de planner (twee regels) */
  #main :is(button, a.btn, .btn, select, summary, .pop-btn):not(.xl-cel, .xl-rmenu, .xl-dagknop, .cal-cell, .mp-cel, .theo-tip, .plg-acc, .ma-knop, .pl-sbalk *),
  #main input:not([type="checkbox"], [type="radio"], [type="range"], [type="color"], .xl-cel, .xl-n) { min-height: 44px; }
  #main :is(input[type="checkbox"], input[type="radio"]) { min-width: 22px; min-height: 22px; }
  /* de ⓘ: een grotere tikzone rond het kleine teken, zonder dat de regel hoger wordt */
  #main .theo-tip { position: relative; }
  #main .theo-tip::after { content: ""; position: absolute; inset: -12px; }
  .plus-tabbar a, .plus-tabbar .plus-tab-meer { min-height: 54px; }
}

/* de planner op de gsm: een halve dagcel is ±23 px breed; met 12 px past '−11 u' niet meer op één regel
   (het minteken viel weg). Het uur breekt nu onder het getal. */
@media (max-width: 760px) {
  .pl-maand .cal-cell.pl-split .pl-hv { white-space: normal; line-height: 1.05; text-align: center; letter-spacing: -.02em; }
  .pl-maand .cal-cell.pl-split .pl-h { padding-left: 0; padding-right: 0; }
}

/* ---- 7. Onderbalk van het personeel: 'Meer' is een knop (opent de zijbalk met alle schermen) ---- */
@media (max-width: 760px) {
  .plus-tabbar .plus-tab-meer {
    display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 2px;
    min-height: 54px; border: 0; border-radius: 13px; background: transparent; padding: 0;
    color: var(--on-chrome-2); font: inherit; font-size:var(--t-xs); font-weight: 600; }
  .plus-tabbar .plus-tab-meer svg.ic { width: 22px; height: 22px; }
  .plus-tabbar .plus-tab-meer:hover { background: rgba(251, 248, 234, .08); color: var(--on-chrome); }
  .plus-tabbar a { font-size:var(--t-xs); }
}