/* Werf 6 · prikklok/nachtwacht (prikklok) · v1 · geldig vanaf 30 okt 2026 · laatste wijziging: eerste versie (Joeri "go sos groot")
   Huisstijl A (werf 3, Joeri 30 okt "A aub") voor de werknemersapp: alleen het kleed, de logica blijft. Geldt op pagina's met
   <html class="a"> (index, p, welkom); het dashboard en de alarmschermen houden stijl.css. Bron: C:\ALCOM\dashboard\_huisstijl\
   prikklok_A_bouwstenen\prikklok_A.css (tokens + componenten, hier met voorvoegsel a- waar een naam al in stijl.css bestond).
   Comfortaa voor koppen, cijfers en het woordmerk; Inter voor lopende tekst (= de site); één accent (bordeaux); donker volgt het toestel. */

@font-face { font-family: 'Inter'; src: url('/fonts/inter.woff2') format('woff2'); font-weight: 100 900; font-display: swap; }

/* ── 1 tokens (licht + donker); de namen van stijl.css wijzen naar die van A, zodat ook de oudere schermdelen meekleuren ── */
html.a {
  color-scheme: light dark;
  --a-ink: #2e2d2c; --a-grey: #5c5b59; --a-soft: #6b6a67; --a-line: #e7e5e2; --a-bg: #f7f6f4; --a-kaart: #fff;
  --a-accent: #8B1A1A; --a-acc-zacht: #f6e9e9; --a-ok: #2e7d4f; --a-ok-zacht: #e6f4ec;
  --wit: var(--a-kaart); --papier: var(--a-bg); --inkt: var(--a-ink); --grijs: var(--a-grey); --zacht: var(--a-soft); --lijn: var(--a-line);
  --accent: var(--a-accent); --accent-tint: var(--a-acc-zacht);
  --a-kop: 'Comfortaa', system-ui, sans-serif; --a-tekst: 'Inter', system-ui, sans-serif;
  background: var(--a-bg);
}
@media (prefers-color-scheme: dark) {
  html.a { --a-ink: #ece9e4; --a-grey: #b9b5ae; --a-soft: #a29e98; --a-line: #363433; --a-bg: #181716; --a-kaart: #262524;
    --a-accent: #c4473c; --a-acc-zacht: #3a1f1c; --a-ok: #5fb37f; --a-ok-zacht: #1f3327; }
}

/* ── 2 basis ── */
.a body { background: var(--a-bg); color: var(--a-ink); font-family: var(--a-tekst); }
.a .blad { padding-left: 12px; padding-right: 12px; }
.a .woordmerk, .a h1, .a .welkom-kop h1, .a .groot, .a .cijfers b, .a .saldo b, .a .prik .groet, .a .prik .uur { font-family: var(--a-kop); }
.a .ic { width: 24px; height: 24px; flex: none; }
.a .klein { font-size: 13px; color: var(--a-soft); }

/* kop: woordmerk · voornaam · SOS klein (op elk scherm) */
.a .kop { position: sticky; top: 0; z-index: 4; background: var(--a-bg); margin: 0 -12px; padding: max(10px, env(safe-area-inset-top)) 16px 8px; gap: 10px; }
.a #kop-rechts { display: flex; align-items: center; gap: 12px; margin-left: auto; }
.a .kop .wie { font-size: 14px; color: var(--a-grey); }
.a .kop .rechts { font-size: 14px; color: var(--a-grey); }
.a-sos { border: 1.5px solid var(--a-accent); color: var(--a-accent); background: none; border-radius: 999px; font: inherit; font-weight: 700;
  font-size: 13px; letter-spacing: .08em; min-width: 56px; min-height: 44px; cursor: pointer; }
/* SOS groot op Vandaag (Joeri 18 okt + 30 okt "go sos groot"): volle breedte onder de statuskaart, zonder te scrollen zichtbaar */
.a-sos-groot { display: flex; align-items: center; justify-content: center; gap: 10px; width: 100%; min-height: 58px; margin: 10px 0 0;
  border: 2px solid var(--a-accent); background: var(--a-acc-zacht); color: var(--a-accent); border-radius: 16px; font: inherit;
  font-weight: 800; letter-spacing: .08em; font-size: 17px; cursor: pointer; }
.a-sos-groot small { font-weight: 500; letter-spacing: 0; font-size: 13.5px; }

/* ── 3 Vandaag: statuskaart, dagbalk, tellerstrook, kaarten ── */
.a-status { background: var(--a-kaart); border: 1px solid var(--a-line); border-radius: 20px; padding: 18px 18px 16px; margin-top: 4px; }
.a-status .groet { font-family: var(--a-kop); font-size: 22px; margin: 0 0 10px; }
.a-status .groot { font-family: var(--a-kop); font-weight: 300; font-size: 46px; line-height: 1; margin: 0; letter-spacing: 0; }
.a-status .groot small { font-size: 18px; color: var(--a-grey); margin: 0 6px 0 0; }
.a-status .sub { color: var(--a-grey); font-size: 14px; margin-top: 6px; }
.a-status .sub.groter { font-size: 16px; color: var(--a-ink); }
.a-status .groot.nog { font-size: 26px; }
.a-dagbalk { position: relative; height: 10px; border-radius: 5px; background: var(--a-line); margin: 16px 0 6px; overflow: hidden; }
.a-dagbalk i { position: absolute; left: 0; top: 0; bottom: 0; background: var(--a-accent); border-radius: 5px; }
.a-dagbalk .p { position: absolute; top: 0; bottom: 0; background: var(--a-soft); opacity: .45; }
.a-daguren { display: flex; justify-content: space-between; font-size: 12px; color: var(--a-soft); }
.a-strook { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 6px; margin: 10px 0; }
.a-strook.drie { grid-template-columns: repeat(3, minmax(0, 1fr)); }
.a-strook > div { background: var(--a-kaart); border: 1px solid var(--a-line); border-radius: 14px; padding: 10px 4px; text-align: center; }
.a-strook b { display: block; font-family: var(--a-kop); font-weight: 400; font-size: 19px; line-height: 1.15; }
.a-strook span { font-size: clamp(10px, 2.9vw, 11.5px); color: var(--a-grey); white-space: nowrap; }
.a-kaart { display: flex; gap: 12px; align-items: center; background: var(--a-kaart); border: 1px solid var(--a-line); border-radius: 16px;
  padding: 14px; margin-bottom: 8px; min-height: 64px; color: var(--a-ink); text-decoration: none; }
.a-kaart .ic { color: var(--a-soft); }
.a-kaart.nieuw .ic { color: var(--a-accent); }
.a-kaart .t { flex: 1; min-width: 0; }
.a-kaart .t b { display: block; font-weight: 600; }
.a-kaart .t span { font-size: 13.5px; color: var(--a-grey); }
a.t, .a-kaart a.t { color: inherit; text-decoration: none; }
.a-noot { margin: 10px 6px; }
.a-kaart .pijl { color: var(--a-soft); }
.a-kaart .mini { border: 1.5px solid var(--a-ink); background: none; color: var(--a-ink); border-radius: 999px; font: inherit; font-weight: 600;
  font-size: 14px; min-height: 44px; min-width: 56px; padding: 0 14px; cursor: pointer; }
.a-chip { display: inline-block; border-radius: 999px; padding: 3px 10px; font-size: 12.5px; font-weight: 600; background: var(--a-bg); color: var(--a-grey); }
.a-chip.wacht { background: var(--a-acc-zacht); color: var(--a-accent); }
.a-chip.ok { background: var(--a-ok); color: #fff; }

/* brede knop onderaan (boven de tabbalk): op Vandaag/Uren "prikken" (uitleg: de sticker doet de prik) */
.a-prikknop { position: fixed; left: 12px; right: 12px; bottom: calc(76px + env(safe-area-inset-bottom)); display: flex; align-items: center;
  justify-content: center; gap: 10px; min-height: 64px; max-width: 496px; margin: 0 auto; border: 0; border-radius: 999px; background: var(--a-accent);
  color: #fff; font: inherit; font-weight: 700; font-size: 18px; box-shadow: 0 14px 34px -14px rgba(139, 26, 26, .7); z-index: 5; cursor: pointer; text-decoration: none; }
.a-prikknop small { font-weight: 400; font-size: 13px; opacity: .85; }
.a-uitleg { position: fixed; inset: 0; z-index: 20; background: rgba(0, 0, 0, .35); display: flex; align-items: flex-end; }
.a-uitleg > div { background: var(--a-kaart); color: var(--a-ink); width: 100%; border-radius: 22px 22px 0 0; padding: 22px 20px calc(22px + env(safe-area-inset-bottom)); }
.a-uitleg h2 { font-family: var(--a-kop); text-transform: none; letter-spacing: 0; font-weight: 400; font-size: 22px; color: var(--a-ink); margin: 0 0 8px; }

/* tabbalk: vandaag · uren · verlof · loon · melden */
.a .nav { background: var(--a-kaart); border-top: 1px solid var(--a-line); grid-template-columns: repeat(var(--tabs, 5), 1fr); }
.a .nav button { color: var(--a-soft); font-family: var(--a-tekst); font-size: 11.5px; }
.a .nav button .ic { width: 24px; height: 24px; }
.a .nav button[aria-current="page"] { color: var(--a-accent); font-weight: 600; }
.a body.met-nav .blad { padding-bottom: calc(96px + env(safe-area-inset-bottom)); }
.a body.met-knop .blad { padding-bottom: calc(176px + env(safe-area-inset-bottom)); }

/* ── 4 de oudere schermdelen (uren, verlof, melden, loon) in dezelfde vorm ── */
.a h2 { font-family: var(--a-kop); font-weight: 400; font-size: 20px; letter-spacing: 0; text-transform: none; color: var(--a-ink); margin: 18px 6px 10px; }
.a .welkom-kop { margin: 10px 6px 14px; }
.a .welkom-kop h1 { font-size: 24px; }
.a .kaart { background: var(--a-kaart); border: 1px solid var(--a-line); border-radius: 16px; padding: 14px; }
.a .kaart + .kaart { margin-top: 8px; }
.a .link-kaart { display: block; text-decoration: none; }
.a .tip { background: var(--a-kaart); border: 1px dashed var(--a-soft); border-radius: 16px; }
.a .cijfers { gap: 6px; background: none; border-radius: 0; overflow: visible; }
.a .cijfers > div { background: var(--a-kaart); border: 1px solid var(--a-line); border-radius: 14px; text-align: center; padding: 10px 6px; }
.a .cijfers b { font-size: 19px; }
.a .knop { border-radius: 999px; min-height: 52px; }
.a .knop:not(.licht):not(.amber) { background: var(--a-accent); border-color: var(--a-accent); color: #fff; }
.a .knop.licht { background: var(--a-kaart); color: var(--a-ink); border-color: var(--a-line); }
.a .mini-knop, .a .week-kop button, .a .keuzes button { background: var(--a-kaart); color: var(--a-ink); border-color: var(--a-line); }
.a .keuzes button[aria-pressed="true"], .a .mini-knop.ja { background: var(--a-ink); color: var(--a-bg); border-color: var(--a-ink); }
.a .dag-rij.vandaag { background: var(--a-bg); box-shadow: inset 0 0 0 1.5px var(--a-accent); }
.a .meld-raster button { background: var(--a-kaart); border: 1px solid var(--a-line); border-radius: 18px; color: var(--a-ink); min-height: 104px; }
.a .meld-raster button svg { stroke: var(--a-accent); }
.a .status-chip.goedgekeurd, .a .status-chip.gemeld, .a .vlag.goed { background: var(--a-ok); color: #fff; }
.a .status-chip.aangevraagd { background: var(--a-acc-zacht); color: var(--a-accent); }
.a .vlag { background: var(--a-acc-zacht); color: var(--a-accent); }
.a input, .a select, .a textarea { background: var(--a-kaart); color: var(--a-ink); border-color: var(--a-line); }
.a .voet { color: var(--a-soft); }

/* ── 5 bevestiging na de tik (p.html): groot en eenvoudig ── */
.a .prik { text-align: center; }
.a .prik .groet { font-size: 26px; margin: 18px 0 18px; }
.a .prik .richting { font-size: 18px; color: var(--a-grey); }
.a .prik .uur { font-weight: 300; font-size: clamp(80px, 26vw, 112px); color: var(--a-accent); line-height: 1; }
.a .prik .uur small { color: var(--a-grey); }
.a .prik .waar { color: var(--a-grey); margin-top: 6px; }
.a .vinkje { width: 52px; height: 52px; margin-bottom: 4px; }

/* ── 6 welkom (koppelen) ── */
.a-stap { display: flex; gap: 14px; background: var(--a-kaart); border: 1px solid var(--a-line); border-radius: 18px; padding: 16px; margin: 10px 0; }
.a-stap .n { flex: none; width: 34px; height: 34px; border-radius: 50%; background: var(--a-accent); color: #fff; display: grid; place-items: center;
  font-family: var(--a-kop); font-weight: 700; }
.a-stap b { display: block; }