/* =============================================================================
   KTS Uren App · Design System v1  (Fase 1: Foundations)
   =============================================================================
   Productie-CSS met de gedeelde basis voor de hele app (uren, beheer,
   inspecties). Plak dit als <style> blok in index.html, direct NA het
   bestaande <style> blok dat het inspecties-design bevat.

   Conventies:
   - Tokens onder :root · overlapt met inspecties-design (mag, identiek)
   - App-componenten met `.app-` prefix om naast bestaande styles te kunnen
   - Inspecties-componenten houden hun `.insp-` prefix (al geïmplementeerd)
   - Touch-targets ≥ 44px overal
   - Werkt op iOS Safari, Android Chrome, desktop Chrome/Edge

   Belangrijk: de tokens in dit bestand zijn IDENTIEK aan inspecties-design.css.
   Als beide bestanden zijn geladen overschrijft de laatste · geen probleem,
   want de waardes matchen. Wel de Plex font-link in <head> hoeft maar
   één keer geladen te worden.
   ============================================================================= */


/* =============================================================================
   1. DESIGN TOKENS
   =============================================================================
   Dezelfde tokens als inspecties-design.css. Hier voor de zekerheid herhaald
   zodat dit bestand zelfstandig werkt als het voor inspecties wordt geladen.
   ============================================================================= */

:root {
  /* --- KTS Brand (aligned met website KTS_Huisstijl_RevA.pdf) --- */
  --kts-blue: #07567F;          /* primary · PMS 7693 C */
  --kts-blue-700: #043B56;      /* primary-dark · PMS 302 C (donker accent) */
  --kts-blue-900: #0A1628;      /* primary-darker · PMS 5395 C (hero/footer bg) */
  --kts-blue-50: #EAF2F7;
  --kts-blue-100: #D5E5EE;
  --kts-accent-light: #3A9CC5;  /* PMS 2191 C · eyebrows/highlights/links · KEY brand kleur */

  /* --- Surfaces · warm off-white --- */
  --app-bg: #FAFAF7;
  --app-bg-tint: #F4F3EE;
  --app-bg-deep: #EFEDE6;
  --app-surface: #FFFFFF;
  --app-surface-2: #FBFBF8;

  /* --- Tekst hiërarchie --- */
  --app-ink-900: #0F1B2D;
  --app-ink-700: #2A3441;
  --app-ink-500: #5C6675;
  --app-ink-400: #8A93A1;
  --app-ink-300: #B4BCC7;
  --app-ink-200: #DDE2EA;

  /* --- Hairlines & dividers --- */
  --app-line: #E7E4DD;
  --app-line-strong: #D4D0C7;

  /* --- Status (gedempt) --- */
  --app-ok: #2F7D4F;
  --app-ok-soft: #EAF3EE;
  --app-ok-line: #C5DCCB;

  --app-warn: #A56A1F;
  --app-warn-soft: #F5EDDF;
  --app-warn-line: #E1CFAE;

  --app-alert: #A02834;
  --app-alert-soft: #F5E5E5;
  --app-alert-line: #E2C0C2;

  --app-info: #07567F;
  --app-info-soft: #EAF2F7;
  --app-info-line: #C9DCE6;

  --app-idle: #8A93A1;
  --app-idle-soft: #EFEDE7;

  /* --- Schaduwen --- */
  --app-shadow-sm: 0 1px 2px rgba(15, 27, 45, 0.04), 0 0 0 0.5px rgba(15, 27, 45, 0.04);
  --app-shadow:    0 1px 3px rgba(15, 27, 45, 0.06), 0 4px 12px rgba(15, 27, 45, 0.04);
  --app-shadow-lg: 0 4px 8px rgba(15, 27, 45, 0.06), 0 16px 32px rgba(15, 27, 45, 0.06);

  /* --- Geometry --- */
  --app-r-sm: 6px;
  --app-r:    10px;
  --app-r-lg: 14px;
  --app-r-xl: 20px;

  /* --- Type stacks --- */
  --app-font-sans: 'IBM Plex Sans', -apple-system, 'Segoe UI', system-ui, sans-serif;
  --app-font-mono: 'IBM Plex Mono', ui-monospace, 'SF Mono', Menlo, monospace;
}

/* =============================================================================
   1b. DARK MODE TOKENS
   =============================================================================
   Activeert wanneer <html data-theme="dark"> wordt gezet. JS bepaalt dit op
   basis van user-keuze (licht / donker / systeem). Alle componenten die de
   --app-* tokens gebruiken adapteren automatisch.
*/
[data-theme="dark"] {
  /* Vertel de browser om native controls (scrollbar, date-picker,
     spin-buttons, default form widgets) dark te renderen */
  color-scheme: dark;

  /* --- KTS Brand (lichter voor leesbaarheid op dark bg) --- */
  --kts-blue: #4FA8D8;
  --kts-blue-700: #76BBE0;
  --kts-blue-900: #BDDDED;
  --kts-blue-50: #1A2F3D;
  --kts-blue-100: #243D4E;
  --kts-accent-light: #5FB4DC;  /* lichter in dark mode voor contrast op donkere bg */

  /* --- Surfaces · cool dark slate --- */
  --app-bg: #0F1419;
  --app-bg-tint: #171C24;
  --app-bg-deep: #1F242D;
  --app-surface: #1E2632;
  --app-surface-2: #252D3A;

  /* --- Tekst hiërarchie (omgekeerd) --- */
  --app-ink-900: #E8EBF0;
  --app-ink-700: #C9CFD9;
  --app-ink-500: #9AA3B0;
  --app-ink-400: #7A828F;
  --app-ink-300: #5C6675;
  --app-ink-200: #3A424E;

  /* --- Hairlines & dividers (donkerder) --- */
  --app-line: #2D343F;
  --app-line-strong: #3D4450;

  /* --- Status (iets lichter voor contrast) --- */
  --app-ok: #6BC58E;
  --app-ok-soft: #1A3024;
  --app-ok-line: #2E4E3A;

  --app-warn: #E0A45C;
  --app-warn-soft: #2E2419;
  --app-warn-line: #4A3A22;

  --app-alert: #E47481;
  --app-alert-soft: #2E1A1D;
  --app-alert-line: #4A2A2E;

  --app-info: #4FA8D8;
  --app-info-soft: #1A2F3D;
  --app-info-line: #2E4A5E;

  --app-idle: #7A828F;
  --app-idle-soft: #1F242D;

  /* --- Schaduwen (steviger voor dark mode) --- */
  --app-shadow-sm: 0 1px 2px rgba(0, 0, 0, 0.3), 0 0 0 0.5px rgba(0, 0, 0, 0.4);
  --app-shadow:    0 1px 3px rgba(0, 0, 0, 0.4), 0 4px 12px rgba(0, 0, 0, 0.3);
  --app-shadow-lg: 0 4px 8px rgba(0, 0, 0, 0.4), 0 16px 32px rgba(0, 0, 0, 0.4);
}

/* ============================================================================
   SKELETON LOADERS — vervangen 'Laden...' tekst voor pulsende placeholders.
   Voelt visueel sneller dan tekst. Gebruik via class="kts-skeleton".
*/
@keyframes ktsSkeletonPulse {
  0%, 100% { opacity: 0.55; }
  50%      { opacity: 0.85; }
}
.kts-skeleton {
  background: linear-gradient(90deg,
    var(--app-bg-tint) 0%,
    var(--app-line) 50%,
    var(--app-bg-tint) 100%);
  background-size: 200% 100%;
  border-radius: 6px;
  display: inline-block;
  animation: ktsSkeletonPulse 1.4s ease-in-out infinite;
  color: transparent !important;
  user-select: none;
  pointer-events: none;
}
.kts-skeleton-row {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 12px;
}
.kts-skeleton-line {
  height: 14px;
  width: 100%;
  background: var(--app-bg-tint);
  border-radius: 6px;
  animation: ktsSkeletonPulse 1.4s ease-in-out infinite;
}
.kts-skeleton-line.is-short { width: 40%; }
.kts-skeleton-line.is-mid   { width: 70%; }
.kts-skeleton-card {
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: 10px;
  padding: 14px;
  margin-bottom: 8px;
}

/* ============================================================================
   PAGE TRANSITIONS — subtiele fade-in op screen-wissel (geen flikker).
   Werkt op de .screen.active class die door switchScreen() wordt gezet.
*/
@keyframes ktsScreenFadeIn {
  from { opacity: 0; transform: translateY(4px); }
  to   { opacity: 1; transform: translateY(0); }
}
.screen.active {
  animation: ktsScreenFadeIn 220ms ease-out;
}

/* ============================================================================
   ACCESSIBILITY: keyboard focus-visible globaal
   ============================================================================
   Maakt keyboard-navigatie (Tab) zichtbaar zonder muis-klikken te storen.
   :focus-visible werkt alleen na keyboard-input — muis-clicks niet.
*/
button:focus-visible,
input:focus-visible,
select:focus-visible,
textarea:focus-visible,
a:focus-visible,
[role="button"]:focus-visible,
[tabindex]:focus-visible {
  outline: 2px solid var(--kts-accent-light);
  outline-offset: 2px;
  border-radius: 4px;
}
/* Voor inputs die al een focus-border hebben: dubbel outline ziet er
   gek uit. Daar gebruiken we alleen de bestaande focus-styling. */
.app-input:focus-visible,
.app-select:focus-visible,
.app-textarea:focus-visible,
.admin-search-input:focus-visible {
  outline: none;
}

/* Skip-to-content link voor screen reader / keyboard users.
   Verschijnt alleen bij focus, anders verborgen off-screen. */
.kts-skip-link {
  position: absolute;
  left: -9999px;
  top: -9999px;
  z-index: 100000;
  /* Vaste kleur: --kts-blue-900 wordt lichtblauw in dark mode · witte tekst
     zou dan onleesbaar zijn bij keyboard-focus */
  background: #0A1628;
  color: #fff;
  padding: 10px 16px;
  border-radius: 8px;
  text-decoration: none;
  font-weight: 600;
  letter-spacing: 0.02em;
}
.kts-skip-link:focus {
  left: 8px;
  top: 8px;
}


/* ============================================================================
   TOOLTIP-SYSTEEM — CSS-only, gebruik data-tip="tekst" op een element.
   Verschijnt na ~500ms hover; verdwijnt direct bij muis-uit. Mobile-veilig
   (alleen op hover-capable devices). Native title-attr blijft werken als
   fallback maar is traag.

   Gebruik:
     <button data-tip="Verwijderen">🗑️</button>
   Optioneel: data-tip-pos="bottom" (default = top)
*/
@media (hover: hover) {
  [data-tip] { position: relative; }
  [data-tip]::after {
    content: attr(data-tip);
    position: absolute;
    bottom: calc(100% + 8px);
    left: 50%;
    transform: translateX(-50%) translateY(4px);
    /* Vaste kleur: het token keert om in dark mode en maakte tooltips
       lichtblauw met witte tekst */
    background: #0A1628;
    color: #fff;
    padding: 5px 9px;
    border-radius: 6px;
    font-size: 11px;
    font-weight: 500;
    letter-spacing: 0.02em;
    white-space: nowrap;
    opacity: 0;
    pointer-events: none;
    transition: opacity 180ms ease 400ms, transform 180ms ease 400ms;
    z-index: 1000;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.25);
  }
  [data-tip]:hover::after {
    opacity: 1;
    transform: translateX(-50%) translateY(0);
  }
  [data-tip-pos="bottom"]::after {
    bottom: auto;
    top: calc(100% + 8px);
    transform: translateX(-50%) translateY(-4px);
  }
  [data-tip-pos="bottom"]:hover::after {
    transform: translateX(-50%) translateY(0);
  }
}

/* Signature-pad in dark mode: pen blijft zwart in canvas-data (PDF-export
   wil dat) maar wordt visueel ge-invert zodat user een witte handtekening
   ziet op de donkere achtergrond. Filter werkt op gerenderde pixels, niet
   op canvas-achtergrond — die blijft dark via CSS. */
[data-theme="dark"] #sig-canvas-zzp,
[data-theme="dark"] #sig-canvas-client {
  filter: invert(1);
}

/* =============================================================================
   1d. DARK MODE · custom scrollbar
   =============================================================================
   Subtiele scrollbar die past in de dark theme · vermijdt de scherpe witte
   default scrollbar die op donker scherm te helder is. Werkt op Chromium
   en WebKit (Firefox heeft eigen color-scheme support). */
[data-theme="dark"] ::-webkit-scrollbar {
  width: 10px;
  height: 10px;
}
[data-theme="dark"] ::-webkit-scrollbar-track {
  background: var(--app-bg);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: var(--app-line-strong);
  border-radius: 6px;
  border: 2px solid var(--app-bg);
}
[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: var(--kts-accent-light);
}

/* =============================================================================
   1c. DARK MODE · fallback voor form-controls zonder eigen class
   =============================================================================
   Veel inputs/selects/textareas in de app hebben (nog) geen .app-input class
   en kregen daardoor de browser-default witte styling. Onder dark mode geven
   we ze allemaal een dark surface + light text. Type-uitzonderingen
   (checkbox/radio/submit/button) krijgen we via color-scheme automatisch.
*/
[data-theme="dark"] input:not([type=checkbox]):not([type=radio]):not([type=submit]):not([type=button]):not([type=reset]):not([type=file]):not([type=range]):not([type=color]),
[data-theme="dark"] select,
[data-theme="dark"] textarea {
  background-color: var(--app-surface);
  color: var(--app-ink-900);
  border-color: var(--app-line-strong);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--app-ink-400);
  opacity: 1; /* Firefox dimt placeholders extra */
}
/* Select chevron: in light mode is die hardcoded #5C6675 grijs.
   In dark mode lichter (#9AA3B0) zodat 'ie zichtbaar blijft op dark surface. */
[data-theme="dark"] .app-select {
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%239AA3B0' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
}
/* Autofill · Chrome forceert wit. Overschrijf via inset-shadow truc. */
[data-theme="dark"] input:-webkit-autofill,
[data-theme="dark"] input:-webkit-autofill:hover,
[data-theme="dark"] input:-webkit-autofill:focus,
[data-theme="dark"] textarea:-webkit-autofill,
[data-theme="dark"] select:-webkit-autofill {
  -webkit-text-fill-color: var(--app-ink-900);
  -webkit-box-shadow: 0 0 0px 1000px var(--app-surface) inset;
  transition: background-color 5000s ease-in-out 0s;
  caret-color: var(--app-ink-900);
}


/* =============================================================================
   2. SCOPE & RESET
   =============================================================================
   Wikkel de hele app HTML in <div class="app-scope">…</div>. Dit scopt
   typografie en kleuren zonder de huidige login-overlay te raken (die
   stond niet in scope).

   Voor inspecties die al `.insp-module` heeft: die mag binnen
   `.app-scope` zitten · geen conflict.
   ============================================================================= */

.app-scope {
  font-family: var(--app-font-sans);
  color: var(--app-ink-900);
  background: var(--app-bg);
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  font-feature-settings: 'ss01', 'cv11';
}
.app-scope *, .app-scope *::before, .app-scope *::after { box-sizing: border-box; }


/* =============================================================================
   3. BUTTONS
   =============================================================================
   Vier varianten + sm + icon. Alle minimum 44px touch target (sm = 36px,
   alleen voor secundaire desktop-acties).

   <button class="app-btn app-btn-primary">Versturen</button>
   <button class="app-btn app-btn-primary app-btn-sm">Versturen</button>
   <button class="app-btn app-btn-ghost app-btn-icon" aria-label="Bewerken">
     <svg>…</svg>
   </button>
   ============================================================================= */

.app-btn {
  appearance: none;
  border: none;
  font-family: var(--app-font-sans);
  font-size: 14px;
  font-weight: 500;
  padding: 12px 16px;
  border-radius: var(--app-r);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  min-height: 44px;
  letter-spacing: 0.005em;
  transition: all 150ms ease;
  text-decoration: none;
  white-space: nowrap;
}
.app-btn svg { width: 16px; height: 16px; flex-shrink: 0; }
.app-btn:disabled { cursor: not-allowed; opacity: 0.5; }
.app-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(7, 86, 127, 0.25);
}

/* Primary · KTS-blauw, voor de hoofdactie van een scherm */
.app-btn-primary {
  background: var(--kts-blue);
  color: white;
  border: 1px solid var(--kts-blue);
  box-shadow: 0 1px 0 0 rgba(15, 27, 45, 0.1) inset, 0 1px 2px rgba(7, 86, 127, 0.2);
  letter-spacing: 0.4px;          /* website-stijl letter-spacing */
  transition: background 250ms ease, border-color 250ms ease, transform 250ms ease, box-shadow 250ms ease;
}
.app-btn-primary:hover:not(:disabled) {
  background: var(--kts-accent-light);
  border-color: var(--kts-accent-light);
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(7, 86, 127, 0.25);
}
.app-btn-primary:active:not(:disabled) {
  transform: translateY(0);
  box-shadow: 0 1px 0 0 rgba(15, 27, 45, 0.1) inset;
}
.app-btn-primary:disabled {
  background: var(--app-ink-300);
  border-color: var(--app-ink-300);
  box-shadow: none;
  opacity: 1;
}

/* Secondary · donker, voor "doorgaan" of bevestigen niet-finale acties */
.app-btn-secondary {
  background: var(--app-ink-900);
  color: white;
}
.app-btn-secondary:hover:not(:disabled) { background: var(--kts-blue-900); }
/* Dark mode: --app-ink-900 keert om naar bijna-wit (#E8EBF0) · witte tekst
   werd daardoor onleesbaar. Donkere tekst maakt het een nette inverse knop
   (licht op donker thema), hover (--kts-blue-900 = lichtblauw) idem. */
[data-theme="dark"] .app-btn-secondary { color: #0F1B2D; }

/* Ghost · wit met border, voor secundaire acties */
.app-btn-ghost {
  background: var(--app-surface);
  color: var(--app-ink-700);
  border: 1px solid var(--app-line-strong);
}
.app-btn-ghost:hover:not(:disabled) {
  background: var(--app-bg-tint);
  border-color: var(--app-ink-300);
}

/* Danger · voor verwijderen, afkeuren */
.app-btn-danger {
  background: var(--app-surface);
  color: var(--app-alert);
  border: 1px solid var(--app-alert-line);
}
.app-btn-danger:hover:not(:disabled) {
  background: var(--app-alert-soft);
}
/* Solid danger · voor bevestigde delete in confirm-dialogen */
.app-btn-danger.is-solid {
  background: var(--app-alert);
  color: white;
  border-color: var(--app-alert);
}
.app-btn-danger.is-solid:hover:not(:disabled) {
  background: #832029;
}

/* Sizes */
.app-btn-sm {
  font-size: 12.5px;
  padding: 8px 12px;
  min-height: 36px;
}
.app-btn-lg {
  font-size: 15px;
  padding: 14px 20px;
  min-height: 50px;
}

/* Icon-only · vierkant */
.app-btn-icon {
  width: 36px;
  padding: 0;
  min-height: 36px;
}
.app-btn-icon.app-btn-lg {
  width: 50px;
  min-height: 50px;
}

/* Volle breedte (handig op telefoon-CTA's) */
.app-btn-block {
  width: 100%;
}


/* =============================================================================
   4. FORM · INPUTS & LABELS
   =============================================================================
   <div class="app-form-row">
     <div class="app-label-line">
       <label class="app-label">Projectnaam <span class="app-req">*</span></label>
       <span class="app-hint">VERPLICHT</span>
     </div>
     <input type="text" class="app-input">
     <div class="app-error">Dit veld is verplicht</div>  // optioneel
   </div>

   Voor 2-koloms layout binnen één row:
   <div class="app-form-row is-grid">
     <div>…input 1…</div>
     <div>…input 2…</div>
   </div>
   ============================================================================= */

.app-form-row {
  margin-bottom: 14px;
}
.app-form-row:last-child { margin-bottom: 0; }
.app-form-row.is-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
}
.app-form-row.is-grid-3 {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 12px;
}
@media (max-width: 480px) {
  .app-form-row.is-grid,
  .app-form-row.is-grid-3 { grid-template-columns: 1fr; }
}

.app-label-line {
  display: flex;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 6px;
  gap: 8px;
}
.app-label {
  font-size: 12.5px;
  font-weight: 500;
  color: var(--app-ink-700);
  letter-spacing: 0;
}
.app-label .app-req {
  color: var(--app-alert);
  margin-left: 2px;
}
.app-hint {
  font-family: var(--app-font-mono);
  font-size: 10.5px;
  color: var(--app-ink-400);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.app-input,
.app-select,
.app-textarea {
  width: 100%;
  border: 1px solid var(--app-line-strong);
  background: var(--app-surface);
  border-radius: 9px;
  padding: 10px 12px;
  font-family: var(--app-font-sans);
  font-size: 13.5px;
  color: var(--app-ink-900);
  line-height: 1.5;
  outline: none;
  transition: border-color 150ms ease, box-shadow 150ms ease;
  min-height: 44px;
}
.app-input:focus,
.app-select:focus,
.app-textarea:focus {
  /* Focus accent · website-stijl met accent-light glow */
  border-color: var(--kts-accent-light);
  box-shadow: 0 0 0 3px rgba(58, 156, 197, 0.18);
}
.app-input::placeholder,
.app-textarea::placeholder {
  color: var(--app-ink-400);
}
.app-input:disabled,
.app-select:disabled,
.app-textarea:disabled {
  background: var(--app-bg-tint);
  color: var(--app-ink-400);
  cursor: not-allowed;
}

/* Mono input · voor codes, bedragen, getallen */
.app-input.is-mono {
  font-family: var(--app-font-mono);
  letter-spacing: 0.02em;
}

.app-textarea {
  resize: vertical;
  min-height: 80px;
}

.app-input.has-error,
.app-select.has-error,
.app-textarea.has-error {
  border-color: var(--app-alert);
  box-shadow: 0 0 0 3px rgba(160, 40, 52, 0.08);
}

.app-error {
  font-size: 12px;
  color: var(--app-alert);
  margin-top: 4px;
}

/* Select · eigen chevron */
.app-select {
  appearance: none;
  -webkit-appearance: none;
  background-image: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%235C6675' stroke-width='2'><path d='M6 9l6 6 6-6'/></svg>");
  background-repeat: no-repeat;
  background-position: right 10px center;
  background-size: 14px;
  padding-right: 32px;
}

/* Input met prefix/suffix (bv. €, of 'u') */
.app-input-group {
  display: flex;
  align-items: stretch;
  border: 1px solid var(--app-line-strong);
  border-radius: 9px;
  overflow: hidden;
  background: var(--app-surface);
  min-height: 44px;
}
.app-input-group:focus-within {
  border-color: var(--kts-accent-light);
  box-shadow: 0 0 0 3px rgba(58, 156, 197, 0.18);
}
.app-input-group input {
  flex: 1;
  border: none;
  outline: none;
  padding: 0 12px;
  font-family: var(--app-font-mono);
  font-size: 14px;
  color: var(--app-ink-900);
  background: transparent;
  letter-spacing: 0.02em;
}
.app-input-group .app-affix {
  display: grid;
  place-items: center;
  padding: 0 14px;
  background: var(--app-bg-tint);
  border-left: 1px solid var(--app-line);
  font-family: var(--app-font-mono);
  font-size: 13px;
  color: var(--app-ink-500);
  letter-spacing: 0.04em;
}
.app-input-group .app-affix.is-prefix {
  border-left: none;
  border-right: 1px solid var(--app-line);
}


/* =============================================================================
   5. FORM · SWITCH & CHECKBOX & RADIO
   =============================================================================
   Switch:
   <div class="app-switch-row">
     <div class="app-switch-text">
       <div class="app-switch-title">Notificaties via e-mail</div>
       <div class="app-switch-desc">Bij goedkeuring of afwijzing</div>
     </div>
     <button class="app-switch is-on" aria-pressed="true" role="switch"></button>
   </div>

   Checkbox:
   <label class="app-check is-checked">
     <span class="app-checkbox"><svg>…check…</svg></span>
     <span>Standaard project</span>
   </label>
   ============================================================================= */

.app-switch-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 14px;
  border: 1px solid var(--app-line);
  border-radius: 10px;
  background: var(--app-surface);
}
.app-switch-text { flex: 1; min-width: 0; }
.app-switch-title {
  font-size: 13.5px;
  font-weight: 500;
  color: var(--app-ink-900);
}
.app-switch-desc {
  font-size: 12px;
  color: var(--app-ink-500);
  margin-top: 1px;
}

.app-switch {
  appearance: none;
  border: none;
  position: relative;
  width: 38px;
  height: 22px;
  background: var(--app-ink-300);
  border-radius: 999px;
  cursor: pointer;
  transition: background 200ms ease;
  flex-shrink: 0;
  padding: 0;
}
.app-switch::after {
  content: '';
  position: absolute;
  top: 2px; left: 2px;
  width: 18px; height: 18px;
  background: var(--app-surface);
  border-radius: 50%;
  transition: transform 200ms ease;
  box-shadow: 0 1px 2px rgba(15, 27, 45, 0.2);
}
.app-switch.is-on,
.app-switch[aria-pressed="true"] { background: var(--kts-blue); }
.app-switch.is-on::after,
.app-switch[aria-pressed="true"]::after { transform: translateX(16px); }
.app-switch:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Checkbox */
.app-check {
  display: flex;
  align-items: center;
  gap: 10px;
  cursor: pointer;
  padding: 8px 0;
  user-select: none;
}
.app-check input[type="checkbox"] { display: none; }
.app-checkbox {
  width: 18px; height: 18px;
  border: 1.5px solid var(--app-line-strong);
  border-radius: 4px;
  background: var(--app-surface);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: all 150ms ease;
}
.app-checkbox svg {
  width: 12px; height: 12px;
  color: white;
  opacity: 0;
}
.app-check.is-checked .app-checkbox,
.app-check input:checked + .app-checkbox {
  background: var(--kts-blue);
  border-color: var(--kts-blue);
}
.app-check.is-checked .app-checkbox svg,
.app-check input:checked + .app-checkbox svg {
  opacity: 1;
}
.app-check span:not(.app-checkbox) {
  font-size: 13.5px;
  color: var(--app-ink-700);
}

/* Radio · zelfde structuur, ronde versie */
.app-radio {
  width: 18px; height: 18px;
  border: 1.5px solid var(--app-line-strong);
  border-radius: 50%;
  background: var(--app-surface);
  display: grid; place-items: center;
  flex-shrink: 0;
  transition: all 150ms ease;
}
.app-radio::after {
  content: '';
  width: 8px; height: 8px;
  border-radius: 50%;
  background: var(--app-surface);
  opacity: 0;
}
.app-check.is-checked .app-radio {
  background: var(--kts-blue);
  border-color: var(--kts-blue);
}
.app-check.is-checked .app-radio::after { opacity: 1; }


/* =============================================================================
   6. STATUS-PILLEN
   =============================================================================
   Compact, voor in lijsten en kaarten.

   <span class="app-pill is-ok"><span class="app-pdot"></span>Goedgekeurd</span>

   Varianten: is-ok / is-warn / is-alert / is-info / is-idle
   ============================================================================= */

.app-pill {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 8px;
  font-family: var(--app-font-mono);
  font-size: 11px;
  font-weight: 500;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 999px;
  border: 1px solid;
  white-space: nowrap;
}
.app-pill .app-pdot {
  width: 6px; height: 6px;
  border-radius: 50%;
  flex-shrink: 0;
}
.app-pill.is-ok    { background: var(--app-ok-soft);    color: var(--app-ok);     border-color: var(--app-ok-line); }
.app-pill.is-ok    .app-pdot { background: var(--app-ok); }
.app-pill.is-warn  { background: var(--app-warn-soft);  color: var(--app-warn);   border-color: var(--app-warn-line); }
.app-pill.is-warn  .app-pdot { background: var(--app-warn); }
.app-pill.is-alert { background: var(--app-alert-soft); color: var(--app-alert);  border-color: var(--app-alert-line); }
.app-pill.is-alert .app-pdot { background: var(--app-alert); }
.app-pill.is-info  { background: var(--app-info-soft);  color: var(--kts-blue);   border-color: var(--app-info-line); }
.app-pill.is-info  .app-pdot { background: var(--kts-blue); }
.app-pill.is-idle  { background: var(--app-idle-soft);  color: var(--app-ink-500); border-color: var(--app-line-strong); }
.app-pill.is-idle  .app-pdot { background: var(--app-ink-400); }
/* Definitief: donkergroen, zwaarder dan is-ok zodat het visueel "afgerond" leest */
.app-pill.is-final { background: var(--app-ok-soft); color: var(--app-ok); border-color: #86efac; font-weight: 700; }
.app-pill.is-final .app-pdot { background: #16a34a; }


/* =============================================================================
   7. MODAL
   =============================================================================
   Generieke modal-template. Gebruikt voor alle admin-flows
   (project, persoon, gebruiker, tarief, week-defaults, wachtwoord, confirm).

   <div class="app-modal-backdrop">
     <div class="app-modal" role="dialog" aria-modal="true" aria-labelledby="modal-title">
       <div class="app-modal-header">
         <div>
           <div class="app-modal-subtitle">Beheer  /  Projecten</div>
           <h3 class="app-modal-title" id="modal-title">Project bewerken</h3>
         </div>
         <button class="app-modal-close" aria-label="Sluiten">
           <svg>…X…</svg>
         </button>
       </div>
       <div class="app-modal-body">
         …form rows…
       </div>
       <div class="app-modal-footer">
         <button class="app-btn app-btn-ghost app-btn-sm">Annuleren</button>
         <button class="app-btn app-btn-primary app-btn-sm">Opslaan</button>
       </div>
     </div>
   </div>
   ============================================================================= */

.app-modal-backdrop {
  position: fixed;
  inset: 0;
  background: rgba(15, 27, 45, 0.45);
  backdrop-filter: blur(2px);
  z-index: 100;
  display: none;
  place-items: center;
  padding: 16px;
}
.app-modal-backdrop.is-open {
  display: grid;
  animation: app-modal-fade-in 180ms ease;
}
@keyframes app-modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}

.app-modal {
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: var(--app-r-lg);
  box-shadow: var(--app-shadow-lg);
  width: 100%;
  max-width: 560px;
  max-height: calc(100vh - 32px);
  display: flex;
  flex-direction: column;
  overflow: hidden;
  animation: app-modal-slide-in 220ms cubic-bezier(.4,0,.2,1);
}
@keyframes app-modal-slide-in {
  from { opacity: 0; transform: translateY(8px) scale(0.99); }
  to   { opacity: 1; transform: translateY(0) scale(1); }
}

/* Variant: smal · voor confirm-dialogen */
.app-modal.is-narrow { max-width: 420px; }
/* Variant: breed · voor lange forms (bv. project met veel velden) */
.app-modal.is-wide { max-width: 720px; }

.app-modal-header {
  padding: 18px 22px 14px;
  border-bottom: 1px solid var(--app-line);
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  flex-shrink: 0;
}
.app-modal-title {
  /* Hero-titel stijl voor modals · iets groter en steviger dan voorheen */
  font-family: var(--app-font-sans);
  font-size: 1.15rem;
  font-weight: 800;
  letter-spacing: -0.005em;
  margin: 0;
  color: var(--app-ink-900);
  line-height: 1.25;
}
.app-modal-subtitle {
  /* Eyebrow above modal title · accent-light, ls 0.04em, website-stijl */
  font-family: var(--app-font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--kts-accent-light);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.app-modal-close {
  appearance: none;
  width: 32px; height: 32px;
  border-radius: 8px;
  border: 1px solid var(--app-line);
  background: var(--app-surface);
  color: var(--app-ink-500);
  cursor: pointer;
  display: grid; place-items: center;
  flex-shrink: 0;
}
.app-modal-close:hover {
  background: var(--app-bg-tint);
  color: var(--app-ink-900);
}
.app-modal-close svg { width: 14px; height: 14px; }

.app-modal-body {
  padding: 18px 22px;
  overflow-y: auto;
  flex: 1;
}

.app-modal-footer {
  padding: 14px 22px;
  border-top: 1px solid var(--app-line);
  background: var(--app-surface-2);
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  flex-shrink: 0;
}

/* Body-scroll-lock indien vereist (op de <body>): */
.app-no-scroll { overflow: hidden; }


/* =============================================================================
   8. TOAST
   =============================================================================
   Dark-on-light toast met gekleurde icon-bullet. Stack rechtsonder.

   <div class="app-toast-stack">
     <div class="app-toast is-ok">
       <div class="app-toast-icon"><svg>…check…</svg></div>
       <div class="app-toast-text">
         <span class="app-toast-strong">Weekstaat goedgekeurd</span>
         <span class="app-toast-desc">Jan Pieterse · WK 17 · 40,5 u</span>
       </div>
       <button class="app-toast-close" aria-label="Sluiten"><svg>…X…</svg></button>
     </div>
   </div>
   ============================================================================= */

.app-toast-stack {
  position: fixed;
  bottom: 16px;
  right: 16px;
  z-index: 200;
  display: flex;
  flex-direction: column;
  gap: 8px;
  max-width: calc(100% - 32px);
  pointer-events: none;
}
.app-toast {
  background: var(--app-ink-900);
  color: white;
  padding: 12px 14px;
  border-radius: var(--app-r);
  display: flex;
  align-items: center;
  gap: 10px;
  box-shadow: var(--app-shadow-lg);
  max-width: 380px;
  font-size: 13px;
  pointer-events: auto;
  animation: app-toast-in 240ms cubic-bezier(.4,0,.2,1);
}
@keyframes app-toast-in {
  from { opacity: 0; transform: translateX(20px); }
  to   { opacity: 1; transform: translateX(0); }
}
.app-toast.is-leaving {
  animation: app-toast-out 200ms cubic-bezier(.4,0,.2,1) forwards;
}
@keyframes app-toast-out {
  to { opacity: 0; transform: translateX(20px); }
}

.app-toast-icon {
  width: 22px; height: 22px;
  border-radius: 50%;
  display: grid; place-items: center;
  flex-shrink: 0;
  color: white;
}
.app-toast-icon svg { width: 12px; height: 12px; }
.app-toast.is-ok    .app-toast-icon { background: var(--app-ok); }
.app-toast.is-warn  .app-toast-icon { background: var(--app-warn); }
.app-toast.is-alert .app-toast-icon { background: var(--app-alert); }
.app-toast.is-info  .app-toast-icon { background: var(--kts-blue); }

.app-toast-text { flex: 1; min-width: 0; }
.app-toast-strong {
  font-weight: 600;
  display: block;
  margin-bottom: 1px;
  line-height: 1.3;
}
.app-toast-desc {
  color: rgba(255, 255, 255, 0.7);
  font-size: 12px;
  display: block;
  line-height: 1.4;
}
.app-toast-close {
  appearance: none;
  border: none;
  background: transparent;
  color: rgba(255, 255, 255, 0.5);
  cursor: pointer;
  width: 22px; height: 22px;
  display: grid; place-items: center;
  flex-shrink: 0;
  border-radius: 4px;
  transition: color 150ms ease, background 150ms ease;
}
.app-toast-close:hover {
  color: white;
  background: rgba(255, 255, 255, 0.1);
}
.app-toast-close svg { width: 12px; height: 12px; }

/* Op telefoon: toast vol breedte onderaan */
@media (max-width: 480px) {
  .app-toast-stack {
    left: 16px;
    right: 16px;
    bottom: 16px;
  }
  .app-toast { max-width: none; }
}


/* =============================================================================
   9. EMPTY STATE
   =============================================================================
   Voor lege lijsten ("nog geen projecten", "geen weekstaten gevonden").

   <div class="app-empty">
     <div class="app-empty-icon"><svg>…icon…</svg></div>
     <h3 class="app-empty-title">Nog geen weekstaten</h3>
     <p class="app-empty-desc">Begin met het invullen van je eerste week.</p>
     <button class="app-btn app-btn-primary app-btn-sm">Nieuwe weekstaat</button>
   </div>
   ============================================================================= */

.app-empty {
  text-align: center;
  padding: 48px 24px;
  background: var(--app-surface);
  border: 1px dashed var(--app-line-strong);
  border-radius: var(--app-r-lg);
}
.app-empty-icon {
  width: 56px; height: 56px;
  border-radius: 50%;
  background: var(--app-bg-tint);
  border: 1px solid var(--app-line);
  display: grid; place-items: center;
  margin: 0 auto 16px;
  color: var(--app-ink-400);
}
.app-empty-icon svg { width: 24px; height: 24px; }
.app-empty-title {
  font-size: 16px;
  font-weight: 600;
  color: var(--app-ink-900);
  margin: 0 0 4px 0;
  letter-spacing: -0.005em;
}
.app-empty-desc {
  font-size: 13.5px;
  color: var(--app-ink-500);
  margin: 0 auto 20px;
  max-width: 340px;
  line-height: 1.5;
}


/* =============================================================================
   10. CONFIRM-DIALOG (variant van modal)
   =============================================================================
   Voor "weet je het zeker"-vragen. Gebruikt .app-modal.is-narrow met deze
   body-styling.

   <div class="app-confirm-body">
     <div class="app-confirm-icon is-alert"><svg>…!…</svg></div>
     <h3 class="app-confirm-title">Project verwijderen?</h3>
     <p class="app-confirm-desc">Deze actie kan niet ongedaan gemaakt worden.</p>
   </div>
   ============================================================================= */

.app-confirm-body {
  text-align: center;
  padding: 24px 22px 8px;
}
.app-confirm-icon {
  width: 48px; height: 48px;
  border-radius: 50%;
  display: grid; place-items: center;
  margin: 0 auto 14px;
}
.app-confirm-icon svg { width: 22px; height: 22px; }
.app-confirm-icon.is-alert {
  background: var(--app-alert-soft);
  color: var(--app-alert);
  border: 1px solid var(--app-alert-line);
}
.app-confirm-icon.is-warn {
  background: var(--app-warn-soft);
  color: var(--app-warn);
  border: 1px solid var(--app-warn-line);
}
.app-confirm-icon.is-info {
  background: var(--app-info-soft);
  color: var(--kts-blue);
  border: 1px solid var(--app-info-line);
}
.app-confirm-title {
  font-size: 16px;
  font-weight: 600;
  margin: 0 0 6px 0;
  letter-spacing: -0.005em;
}
.app-confirm-desc {
  font-size: 13.5px;
  color: var(--app-ink-500);
  margin: 0;
  line-height: 1.5;
}


/* =============================================================================
   11. UTILITIES (klein, alleen wat we nodig hebben)
   ============================================================================= */

.app-mono {
  font-family: var(--app-font-mono);
  letter-spacing: 0.02em;
}
.app-meta {
  font-family: var(--app-font-mono);
  font-size: 11px;
  color: var(--app-ink-400);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.app-divider {
  height: 1px;
  background: var(--app-line);
  margin: 16px 0;
}
.app-divider-dashed {
  height: 1px;
  border-top: 1px dashed var(--app-line-strong);
  margin: 16px 0;
}


/* =============================================================================
   12. SVG-ICONEN · copy-paste inventaris
   =============================================================================
   Alle iconen 24x24 viewBox, stroke="currentColor", stroke-width="2".
   Pas stroke-width aan naar 2.5 of 3 voor kleinere iconen of meer nadruk.

   X / SLUITEN:
   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
     <path d="M18 6L6 18M6 6l12 12"/>
   </svg>

   VINKJE:
   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="3">
     <path d="M5 12l5 5L20 7"/>
   </svg>

   WAARSCHUWING (driehoek):
   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2.5">
     <path d="M12 9v4M12 17h.01"/>
     <path d="M12 3l10 18H2L12 3z"/>
   </svg>

   INFO (cirkel + i):
   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
     <circle cx="12" cy="12" r="9"/>
     <path d="M12 8v4M12 16h.01"/>
   </svg>

   POTLOOD (bewerken):
   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
     <path d="M11 4H4a2 2 0 00-2 2v14a2 2 0 002 2h14a2 2 0 002-2v-7"/>
     <path d="M18.5 2.5a2.121 2.121 0 013 3L12 15l-4 1 1-4 9.5-9.5z"/>
   </svg>

   PRULLENBAK:
   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
     <path d="M3 6h18M8 6V4a2 2 0 012-2h4a2 2 0 012 2v2m3 0v14a2 2 0 01-2 2H7a2 2 0 01-2-2V6"/>
     <path d="M10 11v6M14 11v6"/>
   </svg>

   OOG (bekijken):
   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
     <path d="M1 12s4-8 11-8 11 8 11 8-4 8-11 8-11-8-11-8z"/>
     <circle cx="12" cy="12" r="3"/>
   </svg>

   DOCUMENT (PDF):
   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
     <path d="M14 2H6a2 2 0 00-2 2v16a2 2 0 002 2h12a2 2 0 002-2V8l-6-6z"/>
     <path d="M14 2v6h6"/>
   </svg>

   DOWNLOAD:
   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
     <path d="M21 15v4a2 2 0 01-2 2H5a2 2 0 01-2-2v-4"/>
     <path d="M7 10l5 5 5-5M12 15V3"/>
   </svg>

   ZOEKEN:
   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
     <circle cx="11" cy="11" r="7"/>
     <path d="M21 21l-4.35-4.35"/>
   </svg>

   PLUS:
   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
     <line x1="12" y1="5" x2="12" y2="19"/>
     <line x1="5" y1="12" x2="19" y2="12"/>
   </svg>

   PIJL LINKS / RECHTS / OMHOOG / OMLAAG:
   <path d="M15 18l-6-6 6-6"/>   ← chevron links
   <path d="M9 18l6-6-6-6"/>     ← chevron rechts
   <path d="M18 15l-6-6-6 6"/>   ← chevron omhoog
   <path d="M6 9l6 6 6-6"/>      ← chevron omlaag

   GEAR (instellingen):
   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
     <circle cx="12" cy="12" r="3"/>
     <path d="M19.4 15a1.65 1.65 0 00.33 1.82l.06.06a2 2 0 01-2.83 2.83l-.06-.06a1.65 1.65 0 00-1.82-.33 1.65 1.65 0 00-1 1.51V21a2 2 0 01-4 0v-.09A1.65 1.65 0 009 19.4a1.65 1.65 0 00-1.82.33l-.06.06a2 2 0 01-2.83-2.83l.06-.06a1.65 1.65 0 00.33-1.82 1.65 1.65 0 00-1.51-1H3a2 2 0 010-4h.09A1.65 1.65 0 004.6 9a1.65 1.65 0 00-.33-1.82l-.06-.06a2 2 0 012.83-2.83l.06.06a1.65 1.65 0 001.82.33H9a1.65 1.65 0 001-1.51V3a2 2 0 014 0v.09a1.65 1.65 0 001 1.51 1.65 1.65 0 001.82-.33l.06-.06a2 2 0 012.83 2.83l-.06.06a1.65 1.65 0 00-.33 1.82V9a1.65 1.65 0 001.51 1H21a2 2 0 010 4h-.09a1.65 1.65 0 00-1.51 1z"/>
   </svg>

   USER (avatar fallback):
   <svg viewBox="0 0 24 24" fill="none" stroke="currentColor" stroke-width="2">
     <circle cx="12" cy="8" r="4"/>
     <path d="M4 21c0-4.4 3.6-8 8-8s8 3.6 8 8"/>
   </svg>
   ============================================================================= */


/* =============================================================================
   FASE 2 · APP-CHROME & HOOFD-FLOWS
   =============================================================================
   Header, bottom-nav, project-selector, week-nav, week-summary, day-cards,
   status-banner, beheer-grid (tiles) en weekstaten-lijst (admin-toolbar +
   list-rows). Allemaal mobile-first, desktop schaalt mee.
   ============================================================================= */


/* ---------- 9. HEADER ------------------------------------------------------ */

.app-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding: 12px 16px;
  background: var(--app-surface);
  color: var(--app-ink-900);
  border-bottom: 1px solid var(--app-line);
  position: sticky;
  top: 0;
  z-index: 50;
}
/* Korte accent-light strook links onder de header · herinnert aan de
   website .hero-tag border zonder de hele balk te overheersen. */
.app-header::after {
  content: '';
  position: absolute;
  left: 16px;
  bottom: -1px;
  width: 40px;
  height: 2px;
  background: var(--kts-accent-light);
  opacity: 0.7;
}
.app-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.app-gear-sm {
  width: 26px;
  height: 26px;
  border-radius: 6px;
  background: var(--kts-blue);
  color: #fff;
  font-family: var(--app-font-mono);
  font-weight: 700;
  font-size: 12px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  letter-spacing: 0;
}
.app-brand-name {
  font-size: 13.5px;
  color: var(--app-ink-700);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-brand-name strong {
  font-weight: 600;
  color: var(--app-ink-900);
}
.app-user-pill {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 4px 10px 4px 4px;
  border: 1px solid var(--app-line);
  border-radius: 999px;
  background: var(--app-surface);
  cursor: pointer;
  transition: border-color 200ms ease, background 200ms ease, box-shadow 200ms ease, transform 200ms ease;
}
.app-user-pill:hover {
  border-color: var(--kts-accent-light);
  background: var(--app-bg-tint);
  box-shadow: 0 4px 12px rgba(58, 156, 197, 0.15);
  transform: translateY(-1px);
}
.app-avatar {
  width: 22px;
  height: 22px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--kts-blue) 0%, var(--kts-blue-700) 100%);
  color: #fff;
  font-family: var(--app-font-sans);
  font-weight: 800;
  font-size: 10px;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 1.5px var(--app-surface), 0 0 0 2.5px rgba(58, 156, 197, 0.45);
}
.app-avatar.is-lg {
  width: 32px;
  height: 32px;
  font-size: 12px;
}
.app-uname {
  font-size: 12px;
  font-weight: 500;
  color: var(--app-ink-700);
  letter-spacing: -0.005em;
}


/* ---------- 10. BOTTOM-NAV ------------------------------------------------- */

.app-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  background: var(--app-surface);
  border-top: 1px solid var(--app-line);
  padding: 4px 4px env(safe-area-inset-bottom, 4px);
  z-index: 100;
  max-width: 480px;
  margin: 0 auto;
}
.app-navitem {
  position: relative;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 3px;
  padding: 8px 4px 6px;
  min-height: 56px;
  background: none;
  border: 0;
  font-family: var(--app-font-sans);
  color: var(--app-ink-400);
  cursor: pointer;
  transition: color 120ms;
}
.app-navitem svg { width: 22px; height: 22px; }
.app-navitem .app-nav-label {
  font-size: 10.5px;
  font-weight: 500;
  letter-spacing: 0.01em;
}
.app-navitem.is-active,
.app-navitem.active {
  color: var(--kts-accent-light);
  font-weight: 600;
}
/* Bar wordt website-accent-light + groeit subtiel breder bij active */
.app-navitem.is-active::after,
.app-navitem.active::after {
  content: "";
  position: absolute;
  top: auto;
  bottom: 2px;
  left: 50%;
  transform: translateX(-50%);
  width: 28px;
  height: 3px;
  border-radius: 999px;
  background: var(--kts-accent-light);
  box-shadow: 0 0 8px rgba(58, 156, 197, 0.4);
}
.app-navitem:hover:not(.is-active):not(.active) { color: var(--app-ink-700); }
.app-nav-badge {
  position: absolute;
  top: 6px;
  right: calc(50% - 18px);
  min-width: 16px;
  height: 16px;
  padding: 0 4px;
  border-radius: 999px;
  background: var(--app-alert);
  color: #fff;
  font-family: var(--app-font-mono);
  font-size: 10px;
  font-weight: 700;
  display: grid;
  place-items: center;
  border: 2px solid var(--app-surface);
}


/* ---------- 11. PROJECT-SELECTOR BAR --------------------------------------- */

.app-proj-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--app-surface-2);
  border-bottom: 1px solid var(--app-line);
  border-radius: 0;
  cursor: pointer;
  transition: background 120ms;
  width: 100%;
  text-align: left;
  font-family: var(--app-font-sans);
  border-left: 0;
  border-right: 0;
  border-top: 0;
}
.app-proj-bar:hover { background: var(--app-bg-tint); }
.app-proj-icon {
  width: 32px;
  height: 32px;
  border-radius: 8px;
  background: linear-gradient(135deg, var(--kts-blue) 0%, var(--kts-blue-700) 100%);
  color: white;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  box-shadow: 0 0 0 2px var(--app-surface), 0 0 0 3px rgba(58, 156, 197, 0.5);
}
.app-proj-icon svg { width: 16px; height: 16px; }
.app-proj-meta {
  flex: 1;
  min-width: 0;
}
.app-pcode {
  font-family: var(--app-font-sans);
  font-size: 0.7rem;
  font-weight: 700;
  color: var(--kts-accent-light);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 1px;
  margin-top: 0;
  opacity: 1;
}
.app-pname {
  font-size: 13.5px;
  font-weight: 600;
  color: var(--app-ink-900);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  letter-spacing: -0.005em;
}
.app-proj-chevron {
  color: var(--app-ink-400);
  flex-shrink: 0;
  display: grid;
  place-items: center;
  width: 24px;
  height: 24px;
}
.app-proj-chevron svg { width: 16px; height: 16px; }


/* ---------- 12. WEEK NAV --------------------------------------------------- */

.app-week-nav {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
  padding: 12px 16px;
  background: var(--app-surface);
}
.app-week-arrow {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  border: 1px solid var(--kts-blue);
  background: var(--kts-blue);
  color: #fff;
  display: grid;
  place-items: center;
  cursor: pointer;
  /* Website-stijl: hover → accent-light + subtiele lift */
  transition: background 250ms ease, border-color 250ms ease, transform 200ms ease, box-shadow 250ms ease;
  flex-shrink: 0;
}
.app-week-arrow:hover {
  background: var(--kts-accent-light);
  border-color: var(--kts-accent-light);
  transform: translateY(-1px);
  box-shadow: 0 6px 14px rgba(58, 156, 197, 0.25);
}
.app-week-arrow:active { transform: translateY(0); box-shadow: none; }
.app-week-arrow:disabled {
  opacity: 0.4;
  cursor: not-allowed;
}
.app-week-arrow svg { width: 16px; height: 16px; stroke-width: 2.5; }
.app-week-info {
  text-align: center;
  flex: 1;
  min-width: 0;
}
.app-week-num {
  font-family: var(--app-font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--app-ink-400);
  letter-spacing: 0.06em;
  text-transform: uppercase;
}
.app-week-range {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--app-ink-900);
  letter-spacing: -0.005em;
  margin-top: 1px;
}
.app-week-total {
  font-family: var(--app-font-mono);
  font-size: 11px;
  font-weight: 400;
  color: var(--app-ink-500);
  letter-spacing: 0;
  margin-top: 3px;
}


/* ---------- 13. WEEK SUMMARY ----------------------------------------------- */

.app-week-summary {
  background: linear-gradient(135deg, var(--app-surface) 0%, var(--app-bg-tint) 100%);
  border: 1px solid var(--app-line);
  border-radius: var(--app-r-lg);
  padding: 18px;
  margin: 0 16px 12px;
}
.app-ws-row {
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: 16px;
  margin-bottom: 14px;
}
.app-label-tiny {
  font-family: var(--app-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--app-ink-400);
  letter-spacing: 0.06em;
  text-transform: uppercase;
  margin-bottom: 4px;
}
.app-ws-total {
  font-family: var(--app-font-mono);
  font-size: 32px;
  font-weight: 700;
  color: var(--app-ink-900);
  line-height: 1;
  letter-spacing: -0.02em;
  font-feature-settings: 'tnum';
}
.app-ws-total .app-unit {
  font-size: 16px;
  font-weight: 400;
  color: var(--app-ink-500);
  margin-left: 2px;
}
.app-ws-ratio {
  font-family: var(--app-font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--app-ink-400);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  text-align: right;
}
.app-ws-ratio strong {
  color: var(--app-ink-900);
  font-weight: 700;
  font-size: 14px;
}
.app-ws-progress {
  height: 6px;
  background: var(--app-ink-200);
  border-radius: 999px;
  overflow: hidden;
}
.app-ws-fill {
  height: 100%;
  background: var(--kts-blue);
  border-radius: 999px;
  transition: width 240ms ease;
}
.app-ws-fill.is-over { background: var(--app-warn); }
.app-ws-fill.is-complete { background: var(--app-ok); }


/* ---------- 14. DAY CARDS -------------------------------------------------- */

.app-days {
  display: flex;
  flex-direction: column;
  gap: 8px;
  padding: 0 16px 16px;
}
.app-day-card {
  position: relative;
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: var(--app-r);
  padding: 12px 14px 12px 18px;
  cursor: pointer;
  transition: border-color 140ms, box-shadow 140ms, transform 80ms;
  min-height: 56px;
  overflow: hidden;
}
.app-day-card::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
  transition: background 140ms;
}
.app-day-card:hover:not(.is-locked) {
  border-color: var(--app-line-strong);
  box-shadow: var(--app-shadow-sm);
}
.app-day-card:active:not(.is-locked) { transform: translateY(1px); }

.app-day-top {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 10px;
}
.app-day-info {
  display: flex;
  align-items: baseline;
  gap: 10px;
  min-width: 0;
}
.app-dnum {
  font-family: var(--app-font-mono);
  font-size: 11px;
  font-weight: 500;
  color: var(--app-ink-400);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.app-dname {
  font-size: 14px;
  font-weight: 600;
  color: var(--app-ink-900);
  letter-spacing: -0.005em;
}
.app-dhrs {
  font-family: var(--app-font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--app-ink-900);
  letter-spacing: -0.005em;
  font-feature-settings: 'tnum';
  flex-shrink: 0;
}
.app-dhrs .app-unit {
  font-weight: 400;
  color: var(--app-ink-500);
  margin-left: 2px;
}
.app-day-times {
  margin-top: 4px;
  font-family: var(--app-font-mono);
  font-size: 11.5px;
  color: var(--app-ink-500);
  letter-spacing: 0.01em;
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
}
.app-day-pause { color: var(--app-ink-400); }
.app-day-work {
  margin-top: 4px;
  font-size: 12.5px;
  color: var(--app-ink-700);
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  line-height: 1.4;
}
.app-dev-tag {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 7px;
  border-radius: 999px;
  background: var(--app-warn-soft);
  color: var(--app-warn);
  border: 1px solid var(--app-warn-line);
  font-family: var(--app-font-mono);
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-left: 8px;
  flex-shrink: 0;
}

/* states */
.app-day-card.is-empty {
  background: var(--app-surface-2);
  border-style: dashed;
  border-color: var(--app-ink-200);
}
.app-day-card.is-empty .app-dname { color: var(--app-ink-500); font-weight: 500; }
.app-day-card.is-empty .app-dhrs { color: var(--app-ink-300); font-weight: 500; }

.app-day-card.is-filled::before { background: var(--app-ok); }
.app-day-card.is-deviation::before { background: var(--app-warn); }
.app-day-card.is-off {
  background: var(--app-surface-2);
  border-style: dashed;
  border-color: var(--app-ink-200);
}
.app-day-card.is-off::before { background: var(--app-ink-200); }
.app-day-card.is-off .app-dname { color: var(--app-ink-400); font-weight: 500; }
.app-day-card.is-off .app-dhrs { color: var(--app-ink-300); }

.app-day-card.is-locked {
  background: var(--app-bg-tint);
  cursor: default;
  opacity: 0.85;
}

/* Bij dual-class .day-card.app-day-card (productie): geen container-padding,
   children hebben elk hun eigen padding voor consistente edge-spacing. */
.day-card.app-day-card { padding: 0; }
.day-card.app-day-card .app-day-top { padding: 14px 16px; }
.day-card.app-day-card .app-day-times,
.day-card.app-day-card .app-day-work,
.day-card.app-day-card .day-badges { padding-left: 18px; padding-right: 16px; }
.day-card.app-day-card .app-day-times { padding-bottom: 4px; }
.day-card.app-day-card .day-badges { padding-bottom: 12px; }


/* ---------- 15. STATUS BANNER ---------------------------------------------- */

.app-status-banner {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 11px 14px;
  border-radius: var(--app-r);
  font-size: 12.5px;
  line-height: 1.45;
  margin: 0 16px 12px;
  border: 1px solid;
}
.app-status-banner svg {
  width: 16px;
  height: 16px;
  flex-shrink: 0;
  margin-top: 1px;
}
.app-status-banner strong { font-weight: 600; }
.app-status-banner.is-info {
  background: var(--app-info-soft);
  color: var(--app-info);
  border-color: var(--app-info-line);
}
.app-status-banner.is-warn {
  background: var(--app-warn-soft);
  color: var(--app-warn);
  border-color: var(--app-warn-line);
}
.app-status-banner.is-ok {
  background: var(--app-ok-soft);
  color: var(--app-ok);
  border-color: var(--app-ok-line);
}
.app-status-banner.is-alert {
  background: var(--app-alert-soft);
  color: var(--app-alert);
  border-color: var(--app-alert-line);
}


/* ---------- 16. BEHEER-GRID (TILES) ---------------------------------------- */

.app-admin-section-label {
  /* Eyebrow-stijl aligned met website (.section-tag) · accent-light + sans bold */
  font-family: var(--app-font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--kts-accent-light);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 16px 16px 8px;
}
.app-admin-grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 10px;
  padding: 0 16px 16px;
}
@media (min-width: 720px) {
  .app-admin-grid { grid-template-columns: repeat(4, 1fr); gap: 12px; }
}
.app-tile {
  position: relative;
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: var(--app-r);
  padding: 16px 14px;
  min-height: 112px;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 8px;
  cursor: pointer;
  transition: border-color 140ms, box-shadow 140ms, transform 80ms;
  text-align: left;
  font-family: var(--app-font-sans);
  color: inherit;
}
.app-tile:hover {
  border-color: var(--app-line-strong);
  box-shadow: var(--app-shadow);
  transform: translateY(-1px);
}
.app-tile:active { transform: translateY(0); }
.app-tile-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--app-bg-tint);
  color: var(--kts-blue);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.app-tile-icon svg { width: 18px; height: 18px; }
.app-tile-title {
  font-size: 14.5px;
  font-weight: 600;
  color: var(--app-ink-900);
  letter-spacing: -0.005em;
}
.app-tile-meta {
  font-family: var(--app-font-mono);
  font-size: 11px;
  color: var(--app-ink-400);
  letter-spacing: 0.02em;
  line-height: 1.4;
  margin-top: auto;
}
.app-tile-meta strong {
  font-weight: 500;
  color: var(--app-ink-700);
}
.app-tile-badge {
  position: absolute;
  top: 10px;
  right: 10px;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  border-radius: 999px;
  background: var(--app-alert);
  color: #fff;
  font-family: var(--app-font-mono);
  font-size: 10.5px;
  font-weight: 700;
  display: grid;
  place-items: center;
}
.app-tile-badge.is-warn { background: var(--app-warn); }
.app-tile-badge.is-info { background: var(--app-info); }
.app-tile-badge.is-ok { background: var(--app-ok); }


/* ---------- 17. ADMIN TOOLBAR + LIST --------------------------------------- */

.app-admin-toolbar {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  padding: 12px 16px;
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-line);
}
.app-search {
  position: relative;
  display: flex;
  align-items: center;
  flex: 1;
  min-width: 200px;
}
.app-search svg {
  position: absolute;
  left: 12px;
  width: 16px;
  height: 16px;
  color: var(--app-ink-400);
  pointer-events: none;
}
.app-search input {
  width: 100%;
  height: 38px;
  padding: 0 12px 0 36px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface-2);
  font-family: var(--app-font-sans);
  font-size: 13px;
  color: var(--app-ink-900);
  outline: none;
  transition: border-color 120ms, background 120ms;
}
.app-search input::placeholder { color: var(--app-ink-400); }
.app-search input:focus {
  border-color: var(--kts-blue);
  background: var(--app-surface);
  box-shadow: 0 0 0 3px var(--app-info-soft);
}
.app-filter-select {
  height: 38px;
  padding: 0 32px 0 12px;
  border: 1px solid var(--app-line);
  border-radius: 8px;
  background: var(--app-surface) url("data:image/svg+xml;charset=UTF-8,%3Csvg viewBox='0 0 24 24' xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%235C6675' stroke-width='2'%3E%3Cpath d='M6 9l6 6 6-6'/%3E%3C/svg%3E") no-repeat right 8px center / 16px;
  font-family: var(--app-font-sans);
  font-size: 13px;
  color: var(--app-ink-900);
  appearance: none;
  cursor: pointer;
  outline: none;
  transition: border-color 120ms;
  min-width: 140px;
}
.app-filter-select:focus { border-color: var(--kts-blue); }

.app-list-card {
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: var(--app-r);
  overflow: hidden;
  margin: 0 16px 16px;
}
.app-list-row {
  position: relative;
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px 12px;
  padding: 14px 14px 14px 18px;
  border-bottom: 1px solid var(--app-line);
  transition: background 120ms;
}
.app-list-row:last-child { border-bottom: 0; }
.app-list-row:hover { background: var(--app-surface-2); }
.app-list-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
}
.app-list-row.is-ok::before { background: var(--app-ok); }
.app-list-row.is-warn::before { background: var(--app-warn); }
.app-list-row.is-alert::before { background: var(--app-alert); }
.app-list-row.is-info::before { background: var(--app-info); }
.app-list-row.is-idle::before { background: var(--app-ink-200); }

.app-list-person {
  display: flex;
  align-items: center;
  gap: 10px;
  min-width: 0;
}
.app-list-person-text { min-width: 0; }
.app-list-pname {
  font-size: 14px;
  font-weight: 600;
  color: var(--app-ink-900);
  letter-spacing: -0.005em;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-list-prole {
  font-family: var(--app-font-mono);
  font-size: 10.5px;
  color: var(--app-ink-400);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.app-list-text {
  grid-column: 1 / -1;
  font-size: 13px;
  color: var(--app-ink-700);
  line-height: 1.4;
}
.app-list-code {
  display: block;
  font-family: var(--app-font-mono);
  font-size: 10.5px;
  font-weight: 500;
  color: var(--app-ink-400);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 2px;
}
.app-list-hrs {
  font-family: var(--app-font-mono);
  font-size: 14px;
  font-weight: 700;
  color: var(--app-ink-900);
  letter-spacing: -0.005em;
  font-feature-settings: 'tnum';
  text-align: right;
}
.app-list-hrs .app-unit { font-weight: 400; color: var(--app-ink-500); }
.app-list-time {
  font-family: var(--app-font-mono);
  font-size: 10.5px;
  color: var(--app-ink-400);
  letter-spacing: 0.04em;
  text-transform: uppercase;
}
.app-list-actions {
  display: flex;
  gap: 4px;
  align-items: center;
  flex-shrink: 0;
}
.app-iconbtn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--app-line);
  background: var(--app-surface);
  color: var(--app-ink-500);
  display: grid;
  place-items: center;
  cursor: pointer;
  transition: background 120ms, border-color 120ms, color 120ms;
}
.app-iconbtn:hover {
  background: var(--app-bg-tint);
  border-color: var(--app-line-strong);
  color: var(--app-ink-900);
}
.app-iconbtn.is-danger:hover {
  background: var(--app-alert-soft);
  border-color: var(--app-alert-line);
  color: var(--app-alert);
}
.app-iconbtn svg { width: 16px; height: 16px; }

@media (min-width: 720px) {
  .app-list-row {
    grid-template-columns: 220px 1fr 90px 110px 130px auto;
    align-items: center;
    gap: 12px;
  }
  .app-list-text { grid-column: auto; }
}


/* ---------- 18. PROFILE HEADER + ACTION LIST ------------------------------- */

.app-profile-header {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 22px 16px;
  background: var(--app-surface);
  border-bottom: 1px solid var(--app-line);
  position: relative;
}
/* Subtiele accent-light onderlijn · herinnert aan de website hero-tag border */
.app-profile-header::after {
  content: '';
  position: absolute;
  left: 16px;
  bottom: -1px;
  width: 40px;
  height: 2px;
  background: var(--kts-accent-light);
  opacity: 0.6;
}
.app-profile-avatar {
  width: 60px;
  height: 60px;
  border-radius: 50%;
  background: linear-gradient(135deg, var(--kts-blue) 0%, var(--kts-blue-700) 100%);
  color: #fff;
  font-family: var(--app-font-sans);
  font-weight: 800;
  font-size: 1.1rem;
  letter-spacing: -0.005em;
  display: grid;
  place-items: center;
  flex-shrink: 0;
  /* Accent-light ring eromheen · website-stijl glow */
  box-shadow: 0 0 0 2px var(--app-surface), 0 0 0 4px var(--kts-accent-light);
  position: relative;
}
.app-profile-info { flex: 1; min-width: 0; }
.app-profile-name {
  font-family: var(--app-font-sans);
  font-size: 1.1rem;
  font-weight: 800;
  color: var(--app-ink-900);
  letter-spacing: -0.005em;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-profile-meta {
  font-size: 12.5px;
  color: var(--app-ink-500);
  margin-top: 2px;
}
.app-profile-code {
  font-family: var(--app-font-mono);
  font-size: 10.5px;
  color: var(--app-ink-400);
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-top: 4px;
}

.app-action-list {
  background: var(--app-surface);
  border-top: 1px solid var(--app-line);
  border-bottom: 1px solid var(--app-line);
  margin-bottom: 12px;
}
.app-action-section-label {
  /* Aligned met website .section-tag / .kts-eyebrow stijl —
     accent-light kleur, sans-serif bold, ls 0.04em (PDF p.32) */
  font-family: var(--app-font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  color: var(--kts-accent-light);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  padding: 16px 16px 6px;
}
.app-action-row {
  display: flex;
  align-items: center;
  gap: 14px;
  width: 100%;
  padding: 12px 16px;
  border: 0;
  border-bottom: 1px solid var(--app-line);
  background: var(--app-surface);
  font-family: var(--app-font-sans);
  text-align: left;
  cursor: pointer;
  transition: background 200ms ease, padding-left 200ms ease;
  color: inherit;
  min-height: 56px;
  position: relative;
}
.app-action-row:last-child { border-bottom: 0; }
/* Accent-light strook links bij hover · past bij website-stijl */
.app-action-row::before {
  content: '';
  position: absolute;
  left: 0;
  top: 50%;
  transform: translateY(-50%);
  width: 2px;
  height: 0;
  background: var(--kts-accent-light);
  transition: height 250ms ease;
}
.app-action-row:hover { background: var(--app-bg-tint); padding-left: 20px; }
.app-action-row:hover::before { height: 60%; }
.app-action-row:active { background: var(--app-bg-deep); }
.app-action-row-icon {
  width: 36px;
  height: 36px;
  border-radius: 8px;
  background: var(--app-bg-tint);
  color: var(--kts-blue);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.app-action-row-icon svg { width: 18px; height: 18px; }
.app-action-row-text { flex: 1; min-width: 0; }
.app-action-row-title {
  font-size: 14px;
  font-weight: 500;
  color: var(--app-ink-900);
  letter-spacing: -0.005em;
}
.app-action-row-desc {
  font-size: 12px;
  color: var(--app-ink-500);
  margin-top: 1px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-action-row-chevron {
  color: var(--app-ink-300);
  flex-shrink: 0;
  display: grid;
  place-items: center;
}
.app-action-row-chevron svg { width: 16px; height: 16px; }

.app-action-row.is-danger .app-action-row-icon {
  background: var(--app-alert-soft);
  color: var(--app-alert);
}
.app-action-row.is-danger .app-action-row-title { color: var(--app-alert); }

.app-zoom-control {
  display: flex;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}
.app-zoom-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--app-line);
  background: var(--app-surface);
  color: var(--app-ink-700);
  font-family: var(--app-font-sans);
  font-weight: 700;
  cursor: pointer;
  transition: background 200ms ease, color 200ms ease, border-color 200ms ease, transform 200ms ease, box-shadow 200ms ease;
  display: grid;
  place-items: center;
  position: relative;
}
.app-zoom-btn:hover {
  background: var(--app-bg-tint);
  border-color: rgba(58, 156, 197, 0.4);
  color: var(--kts-accent-light);
  transform: translateY(-1px);
}
.app-zoom-btn.is-active {
  border-color: var(--kts-accent-light);
  background: rgba(58, 156, 197, 0.12);
  color: var(--kts-blue);
}
.app-zoom-btn-sm  { font-size: 10px; }
.app-zoom-btn-md  { font-size: 13px; }
.app-zoom-btn-lg  { font-size: 16px; }

/* ============================================================================
   17z. KTS WEBSITE-STYLE COMPONENTEN
   ============================================================================
   Aligned met kuijpers-ts.nl design system (KTS_Huisstijl_RevA.pdf).
   Doel: app krijgt dezelfde "vetheid" als de marketing website.
   - Eyebrow labels boven schermtitels (uppercase, ls 0.04em, accent-light)
   - Hero-stijl headline met accent-span
   - Hero gradient + 60px grid-pattern overlay
   - Buttons in website-stijl (accent bg → transparent hover + lift)
   - Cards met 2px accent-strook die groeit op hover (PDF p.73)
*/

/* ----- EYEBROW (kleine uppercase label boven heading) ---------------------- */
.kts-eyebrow {
  display: inline-block;
  color: var(--kts-accent-light);
  font-family: var(--app-font-sans);
  font-size: 0.72rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  text-transform: uppercase;
  margin-bottom: 0.5rem;
}

/* ----- HERO HEADING (grote bold met accent-span) ---------------------------- */
.kts-hero-title {
  font-family: var(--app-font-sans);
  font-weight: 800;
  font-size: clamp(1.5rem, 4vw, 2.5rem);
  line-height: 1.1;
  letter-spacing: -0.01em;
  color: var(--app-ink-900);
  margin-bottom: 0.5rem;
}
.kts-hero-title .accent { color: var(--kts-accent-light); }

/* ----- HERO GRADIENT BG + GRID PATTERN -------------------------------------- */
.kts-hero-bg {
  /* VASTE merk-kleuren, bewust GEEN tokens: de --kts-blue-* tokens worden in
     donkere modus juist LICHTER gemaakt (voor tekstcontrast op donkere
     vlakken), waardoor de hero-gradient in dark mode lichtblauw werd terwijl
     alle content erop (welkomstgids, login-footer) wit is. De hero hoort
     altijd donker navy te zijn · identiek aan de website en 404-pagina. */
  background: linear-gradient(135deg,
    #0A1628 0%,
    #043B56 40%,
    #07567F 100%);
  position: relative;
  overflow: hidden;
}
.kts-hero-bg::before {
  content: '';
  position: absolute;
  inset: 0;
  background:
    repeating-linear-gradient(0deg, transparent, transparent 60px,
      rgba(255, 255, 255, 0.04) 60px, rgba(255, 255, 255, 0.04) 61px),
    repeating-linear-gradient(90deg, transparent, transparent 60px,
      rgba(255, 255, 255, 0.04) 60px, rgba(255, 255, 255, 0.04) 61px);
  opacity: 0.6;
  pointer-events: none;
  z-index: 0;
}

/* ----- WEBSITE BUTTONS (accent-light bg → transparent on hover + lift) ------ */
.kts-btn {
  display: inline-flex;
  align-items: center;
  gap: 0.5rem;
  padding: 0.9rem 2rem;
  background: var(--kts-accent-light);
  color: var(--white, #ffffff);
  text-decoration: none;
  font-family: var(--app-font-sans);
  font-weight: 600;
  font-size: 0.95rem;
  border: 1px solid var(--kts-accent-light);
  border-radius: 8px;
  cursor: pointer;
  transition: all 250ms ease;
  letter-spacing: 0.5px;
  font-feature-settings: 'kern';
}
.kts-btn:hover {
  background: transparent;
  border-color: #ffffff;
  color: #ffffff;
  transform: translateY(-2px);
  box-shadow: 0 8px 20px rgba(7, 86, 127, 0.25);
}
.kts-btn:active { transform: translateY(0); }
.kts-btn-ghost {
  background: transparent;
  color: var(--kts-accent-light);
}
.kts-btn-ghost:hover {
  background: var(--kts-accent-light);
  color: #ffffff;
  border-color: var(--kts-accent-light);
}

/* ----- CARDS MET ACCENT-STROOK (PDF p.73 · subtieler dan dikke borders) ----- */
.kts-card {
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: 10px;
  padding: 1.5rem;
  position: relative;
  overflow: hidden;
  transition: transform 250ms ease, box-shadow 250ms ease;
}
.kts-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  width: 2px;
  height: 0;
  background: var(--kts-accent-light);
  transition: height 350ms ease;
}
.kts-card:hover {
  transform: translateY(-3px);
  box-shadow: 0 12px 28px rgba(7, 86, 127, 0.10);
}
.kts-card:hover::before { height: 100%; }


/* ---------- 17b. ARCHIEF FILTER BAR (admin lijsten) ------------------------ */
.archief-filter-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 12px;
  padding: 8px;
  background: var(--app-bg-tint);
  border: 1px solid var(--app-line);
  border-radius: 10px;
}
.archief-tabs {
  display: flex;
  background: var(--app-surface);
  border: 1px solid var(--app-line);
  border-radius: 8px;
  padding: 3px;
  gap: 2px;
}
.archief-tab {
  padding: 6px 12px;
  border: none;
  background: transparent;
  cursor: pointer;
  border-radius: 6px;
  font-family: var(--app-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: var(--app-ink-500);
  transition: all 140ms ease;
}
.archief-tab:hover { color: var(--app-ink-700); }
.archief-tab.active {
  background: var(--kts-blue);
  color: white;
}
.archief-year {
  margin-left: auto;
  padding: 6px 10px;
  border: 1px solid var(--app-line-strong);
  border-radius: 8px;
  background: var(--app-surface);
  font-family: var(--app-font-sans);
  font-size: 12.5px;
  color: var(--app-ink-900);
  cursor: pointer;
}
.archief-year:focus { outline: none; border-color: var(--kts-blue); }
.archief-paid-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 2px 6px;
  background: var(--app-ok-soft);
  color: var(--app-ok);
  border: 1px solid var(--app-ok-line);
  border-radius: 4px;
  font-size: 0.65rem;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

/* ---------- 18a. LOGIN APP TOGGLE (KTS Uren / KTS Inspectie) ---------------- */
.login-app-toggle {
  display: flex;
  background: var(--app-bg-tint);
  border: 1px solid var(--app-line);
  border-radius: 12px;
  padding: 4px;
  margin-bottom: 22px;
}
.login-app-toggle button {
  flex: 1;
  padding: 9px 10px;
  border: 1px solid transparent;
  background: transparent;
  cursor: pointer;
  border-radius: 8px;
  font-family: var(--app-font-mono);
  font-size: 10.5px;
  font-weight: 600;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--app-ink-500);
  /* Geen 'all' · voorkomt witte flikker tijdens transition van native styles
     (browser-defaults zoals focus-ring kunnen kort doorslaan met transition:all) */
  transition: color 160ms ease, background-color 160ms ease, border-color 160ms ease, box-shadow 160ms ease;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 7px;
  /* Onderdruk mobile tap-highlight die op donker scherm wit oplicht */
  -webkit-tap-highlight-color: transparent;
  outline: none;
}
.login-app-toggle button svg { width: 14px; height: 14px; flex-shrink: 0; }
.login-app-toggle button:hover { color: var(--app-ink-700); }
/* Custom focus-ring (i.p.v. browser default die wit/zwart is en flikkert) */
.login-app-toggle button:focus-visible {
  outline: 2px solid var(--kts-blue);
  outline-offset: 2px;
}
.login-app-toggle button.active {
  background: var(--app-surface);
  color: var(--kts-blue);
  border-color: var(--kts-blue-100);
  box-shadow: 0 1px 2px rgba(7, 86, 127, 0.08), 0 2px 6px rgba(7, 86, 127, 0.06);
}

/* Forgot-password link: subtiele website-stijl underline-grow animatie */
.kts-forgot-link::after {
  content: '';
  position: absolute;
  bottom: 0;
  left: 0;
  width: 0;
  height: 1px;
  background: var(--kts-accent-light);
  transition: width 250ms ease;
}
.kts-forgot-link:hover { color: var(--kts-blue); }
.kts-forgot-link:hover::after { width: 100%; }

/* ---------- 18b. THEME CONTROL (segmented Licht/Auto/Donker) ----------------- */
.app-theme-control {
  display: flex;
  gap: 4px;
  margin-left: auto;
  flex-shrink: 0;
}
.app-theme-btn {
  width: 32px;
  height: 32px;
  border-radius: 6px;
  border: 1px solid var(--app-line);
  background: var(--app-surface);
  color: var(--app-ink-500);
  cursor: pointer;
  transition: all 120ms;
  display: grid;
  place-items: center;
}
.app-theme-btn:hover { background: var(--app-bg-tint); color: var(--app-ink-700); }
.app-theme-btn.is-active {
  border-color: var(--kts-blue);
  background: var(--app-info-soft);
  color: var(--kts-blue);
}


/* ---------- 19. WEEK-ROW (overzicht-tab) ----------------------------------- */

.app-week-row {
  position: relative;
  display: flex;
  align-items: center;
  gap: 10px;
  width: 100%;
  padding: 12px 14px 12px 18px;
  background: var(--app-surface);
  border: 0;
  border-bottom: 1px solid var(--app-line);
  font-family: var(--app-font-sans);
  text-align: left;
  cursor: pointer;
  color: inherit;
  transition: background 120ms;
}
.app-week-row-range { flex: 1; min-width: 0; }
.app-week-row:last-child { border-bottom: 0; }
.app-week-row:hover { background: var(--app-bg-tint); }
.app-week-row::before {
  content: "";
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 3px;
  background: transparent;
}
.app-week-row.is-ok::before     { background: var(--app-ok); }
.app-week-row.is-warn::before   { background: var(--app-warn); }
.app-week-row.is-info::before   { background: var(--app-info); }
.app-week-row.is-alert::before  { background: var(--app-alert); }
.app-week-row.is-idle::before   { background: var(--app-ink-200); }
.app-week-row.is-final::before  { background: #16a34a; }
.app-week-row.is-final         { background: var(--app-ok-soft); }
.app-week-row.is-current        { background: var(--app-info-soft); }
.app-week-row.is-current::before { background: var(--kts-blue); }

.app-week-row-code {
  font-family: var(--app-font-mono);
  font-size: 11px;
  font-weight: 600;
  color: var(--app-ink-700);
  letter-spacing: 0.05em;
  text-transform: uppercase;
}
.app-week-row.is-current .app-week-row-code { color: var(--kts-blue); }
.app-week-row-range {
  font-size: 13px;
  font-weight: 500;
  color: var(--app-ink-700);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.app-week-row.is-current .app-week-row-range { font-weight: 600; color: var(--app-ink-900); }
.app-week-row-hours {
  font-family: var(--app-font-mono);
  font-size: 13px;
  font-weight: 700;
  color: var(--app-ink-900);
  font-feature-settings: 'tnum';
  white-space: nowrap;
}
.app-week-row-hours.is-empty { color: var(--app-ink-300); font-weight: 400; }
.app-week-row-chevron {
  color: var(--app-ink-300);
  display: grid;
  place-items: center;
  flex-shrink: 0;
}
.app-week-row-chevron svg { width: 14px; height: 14px; }
.app-week-row-pdf {
  display: grid;
  place-items: center;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  /* Vaste kleuren: de tokens keren om in dark mode (lichtblauw) waardoor
     het witte PDF-icoon wegviel */
  background: #07567F;
  color: #fff;
  border: 0;
  cursor: pointer;
  transition: background 120ms;
}
.app-week-row-pdf:hover { background: #043B56; }
.app-week-row-pdf svg { width: 14px; height: 14px; }
