/* Apointly UI 1.2.0 — gegenereerd door `go run ./cmd/bundle`; niet met de hand bewerken. */

/* ---- css/tokens.css ---- */
/* ==========================================================================
   Apointly UI — tokens
   Alle kleuren, afrondingen, schaduwen en lettertypes als CSS-variabelen.
   Regel: component-CSS gebruikt ALLEEN var(--token), nooit een losse
   kleurwaarde — zo werkt elk component automatisch in licht, donker en in
   elk kleurthema.

   Thema-mechaniek (drie standen):
   - geen data-theme op <html>   -> volgt het besturingssysteem
   - <html data-theme="light">   -> altijd licht
   - <html data-theme="dark">    -> altijd donker
   Kleurthema: <html data-kleurthema="blauw|groen|amber|rood|teal">; zonder
   attribuut geldt "paars" (de standaard). Status-tokens zijn semantisch en
   wisselen niet mee met het kleurthema.
   ========================================================================== */

:root {
  --bg-app: #FBFBFE;
  --bg-card: #FFFFFF;
  --bg-subtle: #F3E8FF;
  --bg-hover: #F8F5FF;

  --text-primary: #1E1B4B;
  --text-secondary: #4C1D95;
  --text-muted: #94A3B8;
  --text-on-primary: #FFFFFF;

  --border-color: #E9D5FF;
  --border-focus: #C084FC;

  --primary: #7C3AED;
  --primary-hover: #6D28D9;
  --primary-light: #F3E8FF;

  --status-wachtlijst-text: #6B21A8; --status-wachtlijst-bg: #F3E8FF; --status-wachtlijst-border: #E9D5FF;
  --status-succes-text: #047857; --status-succes-bg: #ECFDF5; --status-succes-border: #A7F3D0;
  --status-warning-text: #B45309; --status-warning-bg: #FFFBEB; --status-warning-border: #FDE68A;
  --status-danger-text: #B91C1C; --status-danger-bg: #FEF2F2; --status-danger-border: #FECACA;

  --radius-card: 12px;
  --radius-input: 8px;
  --radius-full: 9999px;

  --shadow-card: 0 1px 3px 0 rgba(124, 58, 237, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
  --shadow-elevated: 0 10px 15px -3px rgba(124, 58, 237, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);

  --font-sans: 'Inter', system-ui, -apple-system, sans-serif;
  --font-mono: 'JetBrains Mono', ui-monospace, 'SF Mono', monospace;
}

@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg-app: #100B22; --bg-card: #191330; --bg-subtle: #2C2153; --bg-hover: #211A3D;
    --text-primary: #F5F3FF; --text-secondary: #C4B5FD; --text-muted: #8B85A6; --text-on-primary: #100B22;
    --border-color: #34294F; --border-focus: #A78BFA;
    --primary: #8B5CF6; --primary-hover: #A78BFA; --primary-light: #2C2153;
    --status-wachtlijst-text: #D8B4FE; --status-wachtlijst-bg: #2C2153; --status-wachtlijst-border: #4C3B7A;
    --status-succes-text: #6EE7B7; --status-succes-bg: #08251C; --status-succes-border: #115E43;
    --status-warning-text: #FCD34D; --status-warning-bg: #2B2108; --status-warning-border: #7C5710;
    --status-danger-text: #FCA5A5; --status-danger-bg: #2B1212; --status-danger-border: #7F1D1D;
    --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-elevated: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(139, 92, 246, 0.12);
    color-scheme: dark;
  }
}
:root[data-theme="dark"] {
  --bg-app: #100B22; --bg-card: #191330; --bg-subtle: #2C2153; --bg-hover: #211A3D;
  --text-primary: #F5F3FF; --text-secondary: #C4B5FD; --text-muted: #8B85A6; --text-on-primary: #100B22;
  --border-color: #34294F; --border-focus: #A78BFA;
  --primary: #8B5CF6; --primary-hover: #A78BFA; --primary-light: #2C2153;
  --status-wachtlijst-text: #D8B4FE; --status-wachtlijst-bg: #2C2153; --status-wachtlijst-border: #4C3B7A;
  --status-succes-text: #6EE7B7; --status-succes-bg: #08251C; --status-succes-border: #115E43;
  --status-warning-text: #FCD34D; --status-warning-bg: #2B2108; --status-warning-border: #7C5710;
  --status-danger-text: #FCA5A5; --status-danger-bg: #2B1212; --status-danger-border: #7F1D1D;
  --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-elevated: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(139, 92, 246, 0.12);
  color-scheme: dark;
}

/* --- Kleurthema's: elk hieronder is een variant van dezelfde tokens
   hierboven (die zelf "paars", de standaard, blijven), geselecteerd via
   [data-kleurthema] op <html> (zie internal/server.Chrome). Status-tokens
   (succes/warning/danger) zijn semantisch en blijven ongewijzigd — alleen
   de merk-/achtergrondkleuren wisselen per thema. Elk thema heeft dezelfde
   drie blokken als paars hierboven: licht (default), volgt-systeem-donker,
   en expliciet donker. */

[data-kleurthema="blauw"] {
  --bg-app: #FBFDFE; --bg-card: #FFFFFF; --bg-subtle: #DBEAFE; --bg-hover: #EFF6FF;
  --text-primary: #172554; --text-secondary: #1E3A8A; --text-muted: #94A3B8; --text-on-primary: #FFFFFF;
  --border-color: #BFDBFE; --border-focus: #60A5FA;
  --primary: #2563EB; --primary-hover: #1D4ED8; --primary-light: #DBEAFE;
  --shadow-card: 0 1px 3px 0 rgba(37, 99, 235, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
  --shadow-elevated: 0 10px 15px -3px rgba(37, 99, 235, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
}
@media (prefers-color-scheme: dark) {
  [data-kleurthema="blauw"]:not([data-theme="light"]) {
    --bg-app: #0A1220; --bg-card: #131E33; --bg-subtle: #1E3358; --bg-hover: #16233F;
    --text-primary: #EFF6FF; --text-secondary: #93C5FD; --text-muted: #7F8FAE; --text-on-primary: #0A1220;
    --border-color: #24365A; --border-focus: #60A5FA;
    --primary: #3B82F6; --primary-hover: #60A5FA; --primary-light: #1E3358;
    --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-elevated: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(59, 130, 246, 0.12);
  }
}
[data-kleurthema="blauw"][data-theme="dark"] {
  --bg-app: #0A1220; --bg-card: #131E33; --bg-subtle: #1E3358; --bg-hover: #16233F;
  --text-primary: #EFF6FF; --text-secondary: #93C5FD; --text-muted: #7F8FAE; --text-on-primary: #0A1220;
  --border-color: #24365A; --border-focus: #60A5FA;
  --primary: #3B82F6; --primary-hover: #60A5FA; --primary-light: #1E3358;
  --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-elevated: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(59, 130, 246, 0.12);
}

[data-kleurthema="groen"] {
  --bg-app: #FBFEFC; --bg-card: #FFFFFF; --bg-subtle: #D1FAE5; --bg-hover: #ECFDF5;
  --text-primary: #022C22; --text-secondary: #065F46; --text-muted: #94A3B8; --text-on-primary: #FFFFFF;
  --border-color: #A7F3D0; --border-focus: #34D399;
  --primary: #059669; --primary-hover: #047857; --primary-light: #D1FAE5;
  --shadow-card: 0 1px 3px 0 rgba(5, 150, 105, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
  --shadow-elevated: 0 10px 15px -3px rgba(5, 150, 105, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
}
@media (prefers-color-scheme: dark) {
  [data-kleurthema="groen"]:not([data-theme="light"]) {
    --bg-app: #08170F; --bg-card: #0F2A1B; --bg-subtle: #123B26; --bg-hover: #0D2115;
    --text-primary: #ECFDF5; --text-secondary: #6EE7B7; --text-muted: #7FA396; --text-on-primary: #08170F;
    --border-color: #1B4230; --border-focus: #34D399;
    --primary: #10B981; --primary-hover: #34D399; --primary-light: #123B26;
    --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-elevated: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(16, 185, 129, 0.12);
  }
}
[data-kleurthema="groen"][data-theme="dark"] {
  --bg-app: #08170F; --bg-card: #0F2A1B; --bg-subtle: #123B26; --bg-hover: #0D2115;
  --text-primary: #ECFDF5; --text-secondary: #6EE7B7; --text-muted: #7FA396; --text-on-primary: #08170F;
  --border-color: #1B4230; --border-focus: #34D399;
  --primary: #10B981; --primary-hover: #34D399; --primary-light: #123B26;
  --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-elevated: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(16, 185, 129, 0.12);
}

[data-kleurthema="amber"] {
  --bg-app: #FFFDFA; --bg-card: #FFFFFF; --bg-subtle: #FEF3C7; --bg-hover: #FFFBEB;
  --text-primary: #451A03; --text-secondary: #92400E; --text-muted: #9C9284; --text-on-primary: #FFFFFF;
  --border-color: #FDE68A; --border-focus: #FBBF24;
  --primary: #D97706; --primary-hover: #B45309; --primary-light: #FEF3C7;
  --shadow-card: 0 1px 3px 0 rgba(217, 119, 6, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
  --shadow-elevated: 0 10px 15px -3px rgba(217, 119, 6, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
}
@media (prefers-color-scheme: dark) {
  [data-kleurthema="amber"]:not([data-theme="light"]) {
    --bg-app: #1A1206; --bg-card: #2B1F0D; --bg-subtle: #3D2C0F; --bg-hover: #241A09;
    --text-primary: #FFFBEB; --text-secondary: #FCD34D; --text-muted: #A99A7E; --text-on-primary: #1A1206;
    --border-color: #4A3717; --border-focus: #FBBF24;
    --primary: #F59E0B; --primary-hover: #FBBF24; --primary-light: #3D2C0F;
    --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-elevated: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(245, 158, 11, 0.12);
  }
}
[data-kleurthema="amber"][data-theme="dark"] {
  --bg-app: #1A1206; --bg-card: #2B1F0D; --bg-subtle: #3D2C0F; --bg-hover: #241A09;
  --text-primary: #FFFBEB; --text-secondary: #FCD34D; --text-muted: #A99A7E; --text-on-primary: #1A1206;
  --border-color: #4A3717; --border-focus: #FBBF24;
  --primary: #F59E0B; --primary-hover: #FBBF24; --primary-light: #3D2C0F;
  --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-elevated: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(245, 158, 11, 0.12);
}

[data-kleurthema="rood"] {
  --bg-app: #FFFDFD; --bg-card: #FFFFFF; --bg-subtle: #FFE4E6; --bg-hover: #FFF1F2;
  --text-primary: #4C0519; --text-secondary: #9F1239; --text-muted: #9C939A; --text-on-primary: #FFFFFF;
  --border-color: #FECDD3; --border-focus: #FB7185;
  --primary: #E11D48; --primary-hover: #BE123C; --primary-light: #FFE4E6;
  --shadow-card: 0 1px 3px 0 rgba(225, 29, 72, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
  --shadow-elevated: 0 10px 15px -3px rgba(225, 29, 72, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
}
@media (prefers-color-scheme: dark) {
  [data-kleurthema="rood"]:not([data-theme="light"]) {
    --bg-app: #1B0910; --bg-card: #2C1119; --bg-subtle: #3D1A25; --bg-hover: #241014;
    --text-primary: #FFF1F2; --text-secondary: #FDA4AF; --text-muted: #A98D95; --text-on-primary: #1B0910;
    --border-color: #4A1F2A; --border-focus: #FB7185;
    --primary: #F43F5E; --primary-hover: #FB7185; --primary-light: #3D1A25;
    --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-elevated: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(244, 63, 94, 0.12);
  }
}
[data-kleurthema="rood"][data-theme="dark"] {
  --bg-app: #1B0910; --bg-card: #2C1119; --bg-subtle: #3D1A25; --bg-hover: #241014;
  --text-primary: #FFF1F2; --text-secondary: #FDA4AF; --text-muted: #A98D95; --text-on-primary: #1B0910;
  --border-color: #4A1F2A; --border-focus: #FB7185;
  --primary: #F43F5E; --primary-hover: #FB7185; --primary-light: #3D1A25;
  --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-elevated: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(244, 63, 94, 0.12);
}

[data-kleurthema="teal"] {
  --bg-app: #FAFEFE; --bg-card: #FFFFFF; --bg-subtle: #CCFBF1; --bg-hover: #F0FDFA;
  --text-primary: #042F2E; --text-secondary: #115E59; --text-muted: #94A3B8; --text-on-primary: #FFFFFF;
  --border-color: #99F6E4; --border-focus: #2DD4BF;
  --primary: #0D9488; --primary-hover: #0F766E; --primary-light: #CCFBF1;
  --shadow-card: 0 1px 3px 0 rgba(13, 148, 136, 0.05), 0 1px 2px -1px rgba(0, 0, 0, 0.05);
  --shadow-elevated: 0 10px 15px -3px rgba(13, 148, 136, 0.1), 0 4px 6px -4px rgba(0, 0, 0, 0.05);
}
@media (prefers-color-scheme: dark) {
  [data-kleurthema="teal"]:not([data-theme="light"]) {
    --bg-app: #071716; --bg-card: #0E2624; --bg-subtle: #123A36; --bg-hover: #0B1E1C;
    --text-primary: #F0FDFA; --text-secondary: #5EEAD4; --text-muted: #7FA3A0; --text-on-primary: #071716;
    --border-color: #1B4440; --border-focus: #2DD4BF;
    --primary: #14B8A6; --primary-hover: #2DD4BF; --primary-light: #123A36;
    --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
    --shadow-elevated: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(20, 184, 166, 0.12);
  }
}
[data-kleurthema="teal"][data-theme="dark"] {
  --bg-app: #071716; --bg-card: #0E2624; --bg-subtle: #123A36; --bg-hover: #0B1E1C;
  --text-primary: #F0FDFA; --text-secondary: #5EEAD4; --text-muted: #7FA3A0; --text-on-primary: #071716;
  --border-color: #1B4440; --border-focus: #2DD4BF;
  --primary: #14B8A6; --primary-hover: #2DD4BF; --primary-light: #123A36;
  --shadow-card: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
  --shadow-elevated: 0 12px 24px -6px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(20, 184, 166, 0.12);
}

/* --- Maten & typografie (gedeeld door alle kleurthema's) --- */
:root {
  /* Type-schaal — zie docs/richtlijnen.md §3 */
  --text-2xs: 0.68rem;   /* eyebrows in samenvattingen */
  --text-xs: 0.72rem;    /* badges, tabelkoppen, eyebrow */
  --text-sm: 0.8rem;     /* hints, meta */
  --text-base: 0.86rem;  /* invoer, knoppen, tabelinhoud */
  --text-md: 0.95rem;    /* lopende tekst, dek */
  --text-lg: 1.1rem;     /* kaart-/samenvattingstitels */
  --text-xl: 1.9rem;     /* paginatitel (h1) */

  /* Ruimte — veelvouden van 0.2rem, de stappen die de componenten gebruiken */
  --space-1: 0.4rem;
  --space-2: 0.6rem;
  --space-3: 0.8rem;
  --space-4: 1.1rem;
  --space-5: 1.4rem;
  --space-6: 1.8rem;

  --overlay: rgba(16, 11, 34, 0.45);
  color-scheme: light;
}

/* ---- css/base.css ---- */
/* ==========================================================================
   Apointly UI — base
   Reset, body, typografie en toegankelijkheid. Laadt na tokens.css.
   ========================================================================== */

*, *::before, *::after { box-sizing: border-box; }
::selection { background: var(--primary-light); color: var(--text-primary); }

/* Reserveert altijd ruimte voor de verticale scrollbalk, zodat gecentreerde
   inhoud niet verspringt als een pagina lang genoeg wordt om te scrollen. */
html { overflow-y: scroll; scrollbar-gutter: stable; }

body {
  background: var(--bg-app);
  color: var(--text-primary);
  font-family: var(--font-sans);
  font-size: 16px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  margin: 0;
}

a { color: var(--primary); }
a:hover { color: var(--primary-hover); }

h1 { font-size: var(--text-xl); font-weight: 800; letter-spacing: -0.015em; margin: 0 0 0.5rem; text-wrap: balance; }
h2 { font-size: 1.3rem; font-weight: 700; letter-spacing: -0.01em; margin: 0 0 0.8rem; text-wrap: balance; }
h3 { font-size: 1rem; font-weight: 700; margin: 0 0 1rem; }
h4 { font-size: var(--text-sm); font-weight: 600; margin: 0 0 0.6rem; }
p { margin: 0 0 1rem; }

/* Kleine label-regel boven een titel (merk · versie · gebruiker · tenant). */
.eyebrow {
  font-family: var(--font-mono); font-size: var(--text-xs); letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--primary); margin: 0 0 0.55rem;
}
/* Korte inleiding onder een paginatitel. */
.dek { color: var(--text-secondary); font-size: var(--text-md); max-width: 52ch; margin: 0; }
.hint { font-size: var(--text-sm); color: var(--text-muted); margin: 0.5rem 0 0; }
.mono { font-family: var(--font-mono); }
.num { font-variant-numeric: tabular-nums; }

:focus-visible { outline: 2px solid var(--border-focus); outline-offset: 2px; border-radius: 4px; }
@media (prefers-reduced-motion: reduce) { * { transition: none !important; animation: none !important; } }

.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden;
  clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}
[hidden] { display: none !important; }

/* ---- css/layout.css ---- */
/* ==========================================================================
   Apointly UI — layout
   Paginaskelet: app-shell, kop (hero), twee-koloms formulierindeling,
   actiebalk, tegelmenu en login-scherm.
   ========================================================================== */

/* --- Paginaskelet ------------------------------------------------------- */
.app-shell { max-width: 1360px; margin: 0 auto; padding: clamp(1.25rem, 4vw, 2.5rem) clamp(1rem, 3vw, 2rem) 2rem; }

/* Kop van elke pagina: titel links, gereedschap (help, profiel, thema, taal)
   rechts. Blijft zichtbaar tijdens het scrollen (sticky binnen .app-shell). */
header.hero {
  display: flex; justify-content: space-between; align-items: flex-end; gap: 2rem; flex-wrap: wrap;
  border-bottom: 1px solid var(--border-color); padding-bottom: 1.6rem; margin-bottom: var(--space-6);
  position: sticky; top: 0; z-index: 5; background: var(--bg-app);
  padding-top: clamp(1.25rem, 4vw, 2.5rem);
  margin-top: calc(-1 * clamp(1.25rem, 4vw, 2.5rem));
}
.hero-meta {
  font-family: var(--font-mono); font-size: 0.75rem; color: var(--text-muted); text-align: right; line-height: 1.7;
  display: flex; flex-direction: column; align-items: flex-end; gap: var(--space-2);
}
.hero-toolbar { display: flex; align-items: center; gap: 0.5rem; }
.hero-titel-rij { display: flex; align-items: center; gap: 1rem; flex-wrap: wrap; }

/* --- Formulierpagina: hoofdkolom + samenvatting rechts ------------------- */
.layout { display: grid; grid-template-columns: minmax(0, 1fr) 320px; gap: var(--space-5); align-items: start; }
.main-col { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
.summary-col { position: sticky; top: 20px; display: flex; flex-direction: column; gap: 1rem; }
@media (max-width: 900px) {
  .layout { grid-template-columns: minmax(0, 1fr); }
  .summary-col { position: static; }
}

/* Twee gelijkwaardige kolommen (bijv. lijst links, detail rechts). */
.two-col { display: grid; grid-template-columns: minmax(0, 1.1fr) minmax(0, 1fr); gap: var(--space-5); align-items: start; }
.two-col > * { display: flex; flex-direction: column; gap: 1.2rem; min-width: 0; }
@media (max-width: 900px) { .two-col { grid-template-columns: minmax(0, 1fr); } }

/* Onderaan een formulier: Annuleren / Opslaan, blijft in beeld. */
.action-bar {
  position: sticky; bottom: 0; display: flex; justify-content: flex-end; align-items: center; gap: 0.7rem;
  background: var(--bg-app); border-top: 1px solid var(--border-color); padding: 1rem 0 0.2rem; margin-top: var(--space-6);
}

/* --- Startscherm: tegelmenu --------------------------------------------- */
.menu-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 1rem; }

/* --- Login-scherm: merkpaneel links, kaart rechts ------------------------ */
.login-shell { min-height: 100vh; display: flex; }
.login-panel {
  position: relative; flex: 1 1 42%; min-width: 280px; background: var(--primary);
  display: flex; align-items: center; justify-content: center; padding: 2rem;
}
.login-logo { display: flex; flex-direction: column; align-items: center; gap: 0.35rem; text-align: center; }
.login-logo-naam { color: var(--text-on-primary); font-size: 2rem; font-weight: 800; letter-spacing: -0.02em; line-height: 1.15; text-wrap: balance; }
.login-logo-sub { color: var(--text-on-primary); opacity: 0.85; font-size: 1rem; font-weight: 500; letter-spacing: 0.01em; }
.login-side { flex: 1 1 58%; display: flex; align-items: center; justify-content: center; background: var(--bg-app); padding: 2rem; }
.login-side-inner { width: min(400px, 100%); display: flex; flex-direction: column; gap: 0.75rem; }
.login-card {
  width: min(400px, 100%); background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-card); box-shadow: var(--shadow-elevated); overflow: hidden;
}
.login-card-head { padding: 1.3rem; text-align: center; background: var(--bg-subtle); border-bottom: 1px solid var(--border-color); }
.login-card-head h1 { margin: 0; font-size: 1.3rem; font-weight: 700; }
.login-card-body { padding: 1.6rem; display: flex; flex-direction: column; gap: 1rem; }
/* Knop over de volle breedte, links eronder gecentreerd: past ook bij
   langere teksten (bijv. Spaans) zonder af te breken. */
.login-actions { display: flex; flex-direction: column; align-items: stretch; gap: 0.75rem; margin-top: var(--space-2); }
.login-actions .btn { width: 100%; padding-block: 0.7rem; }
.login-actions a:not(.btn) { align-self: center; text-align: center; }
@media (max-width: 720px) {
  .login-shell { flex-direction: column; }
  .login-panel { flex: 0 0 auto; padding: 2.5rem 1.5rem; }
}

/* ---- css/components.css ---- */
/* ==========================================================================
   Apointly UI — components
   Elk component gebruikt alleen tokens (zie tokens.css). Volgorde:
   kaarten · tegels · knoppen · formulieren · keuzekaarten · badges ·
   lijsten · tabs · tabellen · dropdown · meldingen · overlays · gereedschap.
   ========================================================================== */

/* --- Kaart ---------------------------------------------------------------- */
.card {
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: var(--space-5) 1.5rem;
}
.card-title { font-size: 1rem; font-weight: 700; margin: 0 0 1rem; }
.card-title-row { display: flex; justify-content: space-between; align-items: center; gap: var(--space-3); margin-bottom: 0.3rem; }
/* Scheiding binnen één kaart (bijv. "Bedrijfsgegevens" onder "Klantgegevens"). */
.card-section { margin-top: 1.6rem; padding-top: 1.3rem; border-top: 1px solid var(--border-color); }

/* Inklapbare kaart: <button class="card-collapse-toggle" data-collapse-toggle="x">
   + <div data-collapse-body="x" hidden> (zie js/collapse.js). */
.card-collapse-toggle {
  display: flex; align-items: center; gap: 0.5rem; width: 100%; background: none; border: none; padding: 0;
  margin: 0 0 1rem; font-size: 1rem; font-weight: 700; font-family: var(--font-sans); color: var(--text-primary);
  cursor: pointer; text-align: left;
}
.card-collapse-toggle:hover { opacity: 0.8; }
.card-collapse-toggle [data-collapse-chevron] { flex-shrink: 0; color: var(--text-muted); transition: transform 150ms ease; }

/* --- Tegel (startscherm) -------------------------------------------------- */
.menu-tile {
  display: flex; flex-direction: column; align-items: center; gap: var(--space-3); text-align: center; text-decoration: none;
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card);
  box-shadow: var(--shadow-card); padding: 1.7rem 1rem; font-family: var(--font-sans); color: var(--text-primary);
  cursor: pointer; position: relative; transition: transform 150ms ease, box-shadow 150ms ease, border-color 150ms ease;
}
.menu-tile:hover { border-color: var(--border-focus); box-shadow: var(--shadow-elevated); transform: translateY(-2px); }
.menu-tile-icon {
  width: 52px; height: 52px; border-radius: var(--radius-full); background: var(--primary-light);
  color: var(--primary); display: flex; align-items: center; justify-content: center; flex-shrink: 0;
}
.menu-tile-label { font-size: 0.88rem; font-weight: 600; }
.menu-tile-badge {
  position: absolute; top: var(--space-2); right: var(--space-2); font-size: 0.62rem; font-weight: 700; letter-spacing: 0.03em;
  text-transform: uppercase; padding: 0.15rem 0.45rem; border-radius: var(--radius-full);
  background: var(--primary-light); color: var(--primary); border: 1px solid var(--primary);
}
.menu-tile.is-locked { opacity: 0.5; cursor: not-allowed; }
.menu-tile.is-locked:hover { border-color: var(--border-color); box-shadow: var(--shadow-card); transform: none; }

/* --- Knoppen -------------------------------------------------------------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 0.4rem; text-decoration: none;
  font-family: var(--font-sans); font-weight: 500; font-size: var(--text-base); padding: 0.55rem 1.05rem; white-space: nowrap;
  border-radius: var(--radius-input); border: 1px solid transparent; cursor: pointer;
  transition: background-color 150ms, border-color 150ms, color 150ms;
}
.btn:disabled { opacity: 0.6; cursor: not-allowed; }
.btn--sm { font-size: 0.78rem; padding: 0.42rem 0.8rem; }
.btn--primary { background: var(--primary); color: var(--text-on-primary); box-shadow: var(--shadow-card); }
.btn--primary:hover { background: var(--primary-hover); color: var(--text-on-primary); }
.btn--outline { background: var(--bg-card); color: var(--text-primary); border-color: var(--border-color); }
.btn--outline:hover { background: var(--bg-hover); border-color: var(--border-focus); color: var(--text-primary); }
.btn--ghost { background: transparent; color: var(--text-secondary); }
.btn--ghost:hover { background: var(--bg-subtle); color: var(--text-secondary); }
.btn--danger { background: var(--status-danger-bg); color: var(--status-danger-text); border-color: var(--status-danger-border); }
.btn--danger:hover { border-color: var(--status-danger-text); }

/* Ronde icoonknop in de kop (help, profiel, thema). */
.icon-btn {
  display: inline-flex; align-items: center; justify-content: center;
  width: 2rem; height: 2rem; padding: 0; text-decoration: none;
  background: var(--bg-subtle); color: var(--text-secondary);
  border: none; border-radius: var(--radius-full); cursor: pointer;
}
.icon-btn:hover { color: var(--primary); }

/* Taalwissel: <div class="lang-switch"><button class="lang-pill is-active">NL</button>… */
.lang-switch { display: inline-flex; gap: 0.2rem; padding: 0.2rem; background: var(--bg-subtle); border-radius: var(--radius-full); }
.lang-pill {
  display: inline-flex; align-items: center; gap: 0.35rem; font-family: var(--font-sans); font-size: var(--text-xs); font-weight: 600;
  letter-spacing: 0.02em; color: var(--text-secondary); background: none; border: none; border-radius: var(--radius-full);
  padding: 0.3rem 0.65rem; cursor: pointer;
}
.lang-pill:hover { color: var(--text-primary); }
.lang-pill.is-active { background: var(--bg-card); color: var(--primary); box-shadow: var(--shadow-card); cursor: default; }
a.lang-pill { text-decoration: none; }
/* Vlaggetje in een taalknop: <img class="lang-pill-flag" src="/ui/vlaggen/nl.svg" alt="">NL
   (vlaggen: nl, gb voor Engels, es — in dist/vlaggen/). */
.lang-pill-flag { display: block; width: 16px; height: 16px; border-radius: 3px; flex: none; object-fit: cover; }

/* --- Formulieren ---------------------------------------------------------- */
/* Velden in een raster dat zelf doorloopt (min. 200px per veld). Voor vaste
   rijen: .field-grid--2 / --3, of een eigen grid-template-columns. */
.field-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: var(--space-4); }
.field-grid + .field-grid { margin-top: var(--space-4); }
@media (min-width: 760px) {
  .field-grid--2 { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .field-grid--3 { grid-template-columns: repeat(3, minmax(0, 1fr)); }
}
.field label, .field-label { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); margin-bottom: var(--space-1); }
.field-label-standalone { display: block; font-size: 0.78rem; font-weight: 600; color: var(--text-secondary); margin: 0.3rem 0 var(--space-2); }

.input, .select, textarea.input {
  width: 100%; background: var(--bg-card); border: 1px solid var(--border-color); color: var(--text-primary);
  font-family: var(--font-sans); font-size: var(--text-base); border-radius: var(--radius-input); padding: 0.55rem 0.75rem;
}
textarea.input { resize: vertical; }
.input::placeholder { color: var(--text-muted); }
.input:focus, .select:focus { outline: none; border-color: var(--primary); box-shadow: 0 0 0 3px var(--primary-light); }
.input:disabled, .select:disabled { background: var(--bg-subtle); color: var(--text-muted); cursor: not-allowed; }
.input.is-invalid { border-color: var(--status-danger-text); }
.static-value { font-size: var(--text-base); color: var(--text-primary); padding: 0.55rem 0; }

/* Invoer met een vast voorvoegsel (valuta, landcode): <div class="input-group"><select>…</select><input class="input"></div> */
.input-group { display: flex; gap: 0.5rem; }
.input-group > .select { flex: 0 0 auto; width: 84px; }
.input-group > .input { flex: 1 1 auto; min-width: 0; }

/* Invoer met een knop erin (bijv. wachtwoord tonen). */
.input-wrap { position: relative; }
.input-wrap .input { padding-right: 2.5rem; }
.input-wrap .input-icon-btn {
  position: absolute; top: 50%; right: 0.5rem; transform: translateY(-50%);
  display: flex; align-items: center; justify-content: center;
  width: 1.8rem; height: 1.8rem; padding: 0; border: none; border-radius: 6px;
  background: none; color: var(--text-muted); cursor: pointer;
}
.input-wrap .input-icon-btn:hover { color: var(--text-primary); background: var(--bg-hover); }

.check-row { display: flex; align-items: center; gap: 0.55rem; font-size: 0.85rem; cursor: pointer; }
.check-row input { accent-color: var(--primary); width: 15px; height: 15px; }
.check-row--sm { gap: var(--space-1); font-size: 0.78rem; white-space: nowrap; }
.check-row--sm input { width: 13px; height: 13px; }

/* --- Keuzekaarten (één keuze uit een paar, met uitleg) -------------------- */
.opt-row { display: flex; flex-wrap: wrap; gap: 0.85rem; }
.opt-card {
  flex: 1 1 190px; text-align: left; background: var(--bg-card); border: 1px solid var(--border-color);
  border-radius: var(--radius-card); padding: 0.95rem 1.05rem; cursor: pointer; font-family: var(--font-sans);
  display: flex; flex-direction: column; gap: 0.3rem; transition: border-color 150ms, background-color 150ms, box-shadow 150ms;
}
.opt-card:hover { border-color: var(--border-focus); }
.opt-card.is-selected { border-color: var(--primary); background: var(--primary-light); box-shadow: 0 0 0 1px var(--primary); }
.opt-title { font-weight: 600; font-size: 0.9rem; color: var(--text-primary); }
.opt-desc { font-size: 0.78rem; color: var(--text-muted); }

/* --- Badges --------------------------------------------------------------- */
.badge {
  display: inline-flex; align-items: center; gap: var(--space-1); padding: 0.28rem 0.7rem; border-radius: var(--radius-full);
  font-size: var(--text-xs); font-weight: 600; border: 1px solid; white-space: nowrap;
}
.badge--neutral { color: var(--text-secondary); background: var(--bg-subtle); border-color: var(--border-color); }
.badge--wachtlijst { color: var(--status-wachtlijst-text); background: var(--status-wachtlijst-bg); border-color: var(--status-wachtlijst-border); }
.badge--succes { color: var(--status-succes-text); background: var(--status-succes-bg); border-color: var(--status-succes-border); }
.badge--warning { color: var(--status-warning-text); background: var(--status-warning-bg); border-color: var(--status-warning-border); }
.badge--danger { color: var(--status-danger-text); background: var(--status-danger-bg); border-color: var(--status-danger-border); font-weight: 700; }
.badge-dot { width: 6px; height: 6px; border-radius: var(--radius-full); background: currentColor; }

/* --- Lijsten -------------------------------------------------------------- */
/* Omkaderde lijst met rijen (filialen, gebruikers, categorieën…). */
.list { display: flex; flex-direction: column; border: 1px solid var(--border-color); border-radius: var(--radius-input); overflow: hidden; }
.list-row {
  display: flex; align-items: center; justify-content: space-between; gap: var(--space-3);
  padding: 0.7rem 0.9rem; border-bottom: 1px solid var(--border-color); background: var(--bg-card);
}
.list-row:last-child { border-bottom: none; }
.list-row-title { font-size: 0.88rem; font-weight: 600; }
.list-row-meta { font-size: 0.78rem; color: var(--text-muted); }

/* Herhaalbare, direct bewerkbare rijen (contactpersonen, afgenomen producten). */
.repeat-row {
  display: flex; flex-direction: column; gap: var(--space-2); padding: 0.9rem;
  border: 1px solid var(--border-color); border-radius: var(--radius-input); background: var(--bg-card);
}
.repeat-row + .repeat-row { margin-top: var(--space-2); }

.empty-state {
  font-size: 0.85rem; color: var(--text-muted); border: 1px dashed var(--border-color);
  border-radius: var(--radius-input); padding: 1rem; text-align: center;
}

/* Label/waarde-paren. */
.detail-list { display: grid; grid-template-columns: auto 1fr; gap: 0.3rem var(--space-3); margin: 0; font-size: 0.88rem; }
.detail-list dt { color: var(--text-muted); }
.detail-list dd { margin: 0; color: var(--text-primary); }

/* Samenvattingskaart naast een formulier. */
.summary-eyebrow { font-family: var(--font-mono); font-size: var(--text-2xs); letter-spacing: 0.1em; text-transform: uppercase; color: var(--primary); margin: 0 0 var(--space-1); }
.summary-name { font-size: var(--text-lg); font-weight: 700; margin: 0 0 0.7rem; text-wrap: balance; }
.summary-badges { display: flex; flex-wrap: wrap; gap: var(--space-1); margin-bottom: 1rem; }
.summary-rows { display: flex; flex-direction: column; gap: 0.55rem; border-top: 1px solid var(--border-color); padding-top: var(--space-3); }
.summary-row { display: flex; justify-content: space-between; gap: var(--space-3); font-size: 0.82rem; }
.summary-row > :first-child { color: var(--text-muted); }
.summary-row > :last-child { color: var(--text-primary); font-weight: 500; text-align: right; }

/* --- Tabs ----------------------------------------------------------------- */
/* <div class="tabs" role="tablist"><button class="tab" data-tab="a" aria-selected="true">…
   + <div class="tab-panel" data-panel="a"> (zie js/tabs.js). */
.tabs { display: flex; gap: 0.3rem; border-bottom: 1px solid var(--border-color); margin-bottom: 1.2rem; overflow-x: auto; overflow-y: hidden; }
.tab {
  font-family: var(--font-sans); font-size: 0.85rem; font-weight: 500; color: var(--text-muted); background: none; border: none;
  border-bottom: 2px solid transparent; padding: var(--space-2) 0.9rem; cursor: pointer; margin-bottom: -1px; white-space: nowrap;
}
.tab:hover { color: var(--text-primary); }
.tab[aria-selected="true"] { color: var(--primary); border-color: var(--primary); font-weight: 600; }
.tab-panel { display: flex; flex-direction: column; gap: 1.2rem; }

/* --- Tabellen ------------------------------------------------------------- */
.table-wrap {
  overflow-x: auto; border: 1px solid var(--border-color); border-radius: var(--radius-card); background: var(--bg-card);
  scrollbar-width: none;
}
.table-wrap::-webkit-scrollbar { display: none; }
table.data { width: 100%; border-collapse: collapse; font-size: 0.85rem; }
table.data th, table.data td { padding: 0.75rem 1rem; text-align: left; border-bottom: 1px solid var(--border-color); }
table.data thead th { font-size: 0.7rem; letter-spacing: 0.05em; text-transform: uppercase; color: var(--text-muted); background: var(--bg-subtle); }
table.data tbody tr:last-child td { border-bottom: none; }
table.data tbody tr:hover { background: var(--bg-hover); }
table.data td.num { font-variant-numeric: tabular-nums; color: var(--text-muted); }
table.data td.mono { font-family: var(--font-mono); font-size: 0.82rem; }
/* Sorteerbare koppen (js/sort-table.js). */
table.data th[data-sort-kolom] { cursor: pointer; user-select: none; white-space: nowrap; }
table.data th[data-sort-kolom]:hover { color: var(--text-secondary); }
table.data th[data-sort-kolom] .sort-arrow { display: inline-block; margin-left: 0.3rem; font-size: 0.7em; color: var(--primary); }
/* Laatste kolom (actiemenu) blijft zichtbaar bij horizontaal scrollen. */
table.data.has-actions th:last-child, table.data.has-actions td:last-child { position: sticky; right: 0; z-index: 1; border-left: 1px solid var(--border-color); }
table.data.has-actions td:last-child { background: var(--bg-card); }
table.data.has-actions tbody tr:hover td:last-child { background: var(--bg-hover); }
.row-quick-link { display: inline-flex; vertical-align: middle; margin-left: 0.35rem; color: var(--text-muted); }
.row-quick-link:hover { color: var(--primary); }

/* --- Dropdown (actiemenu) -------------------------------------------------- */
/* <div class="dropdown" data-dropdown><button data-dropdown-toggle>…</button>
   <div class="dropdown-menu"><a class="dropdown-item">…</a></div></div> (js/dropdown.js) */
.dropdown { position: relative; display: inline-block; }
.dropdown [data-dropdown-toggle] { display: inline-flex; align-items: center; justify-content: center; }
.dropdown-menu {
  position: absolute; right: 0; top: calc(100% + 6px); min-width: 160px; background: var(--bg-card);
  border: 1px solid var(--border-color); border-radius: var(--radius-input); box-shadow: var(--shadow-elevated);
  padding: 0.35rem; z-index: 10;
}
.dropdown:not(.is-open) .dropdown-menu { display: none; }
.dropdown-item {
  display: block; width: 100%; text-align: left; text-decoration: none; background: none; border: none;
  font-family: var(--font-sans); font-size: 0.83rem; color: var(--text-primary); padding: 0.5rem var(--space-2);
  border-radius: 6px; cursor: pointer;
}
.dropdown-item:hover { background: var(--bg-hover); }
.dropdown-item.is-danger { color: var(--status-danger-text); }
.dropdown-item.is-danger:hover { background: var(--status-danger-bg); }

/* --- Meldingen ------------------------------------------------------------ */
.alert { display: flex; gap: 0.7rem; align-items: flex-start; border: 1px solid; border-radius: var(--radius-input); padding: 0.85rem 1rem; font-size: 0.85rem; }
.alert--info { color: var(--text-secondary); background: var(--bg-subtle); border-color: var(--border-color); }
.alert--succes { color: var(--status-succes-text); background: var(--status-succes-bg); border-color: var(--status-succes-border); }
.alert--warning { color: var(--status-warning-text); background: var(--status-warning-bg); border-color: var(--status-warning-border); }
.alert--danger { color: var(--status-danger-text); background: var(--status-danger-bg); border-color: var(--status-danger-border); }

/* Balk bovenaan de pagina (bijv. "nieuwe versie beschikbaar"). */
.top-banner {
  display: flex; align-items: center; justify-content: center; gap: 1rem; flex-wrap: wrap;
  background: var(--status-warning-bg); color: var(--status-warning-text); border-bottom: 1px solid var(--status-warning-border);
  padding: 0.65rem 1rem; font-size: 0.85rem; font-weight: 500; text-align: center;
}
.top-banner-btn {
  background: var(--status-warning-text); color: var(--status-warning-bg); border: none; border-radius: var(--radius-full);
  padding: 0.35rem 0.9rem; font-size: 0.78rem; font-weight: 700; cursor: pointer; font-family: var(--font-sans);
}

/* Toast onderin beeld (js/toast.js: ApointlyUI.toast("Opgeslagen")). */
.toast {
  position: fixed; left: 50%; bottom: 1.5rem; transform: translateX(-50%) translateY(150%);
  background: var(--text-primary); color: var(--bg-card); font-size: 0.85rem; font-weight: 500;
  padding: 0.7rem 1.1rem; border-radius: var(--radius-input); box-shadow: var(--shadow-elevated);
  transition: transform 220ms ease; z-index: 50; max-width: calc(100vw - 2rem);
}
.toast.is-visible { transform: translateX(-50%) translateY(0); }

/* --- Overlays ------------------------------------------------------------- */
.modal-overlay { position: fixed; inset: 0; background: var(--overlay); display: flex; align-items: center; justify-content: center; z-index: 100; padding: 1rem; }
.modal-box {
  background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-card);
  box-shadow: var(--shadow-elevated); padding: 1.6rem 1.8rem; width: min(520px, 100%);
  display: flex; flex-direction: column; gap: var(--space-4);
}
.modal-box h3 { margin: 0; }
.modal-actions { display: flex; justify-content: flex-end; gap: var(--space-2); }

/* Laadindicator: 8 punten in een cirkel. Markup: <div class="spinner-ring"> + 8× <span>. */
.spinner-ring { position: relative; width: 40px; height: 40px; }
.spinner-ring span {
  position: absolute; top: 50%; left: 50%; width: 6px; height: 6px; margin: -3px;
  border-radius: 50%; background: var(--primary); animation: ui-spinner-dot 1.1s linear infinite;
}
.spinner-ring span:nth-child(1) { transform: rotate(0deg) translate(17px); animation-delay: -0.963s; }
.spinner-ring span:nth-child(2) { transform: rotate(45deg) translate(17px); animation-delay: -0.825s; }
.spinner-ring span:nth-child(3) { transform: rotate(90deg) translate(17px); animation-delay: -0.688s; }
.spinner-ring span:nth-child(4) { transform: rotate(135deg) translate(17px); animation-delay: -0.55s; }
.spinner-ring span:nth-child(5) { transform: rotate(180deg) translate(17px); animation-delay: -0.413s; }
.spinner-ring span:nth-child(6) { transform: rotate(225deg) translate(17px); animation-delay: -0.275s; }
.spinner-ring span:nth-child(7) { transform: rotate(270deg) translate(17px); animation-delay: -0.138s; }
.spinner-ring span:nth-child(8) { transform: rotate(315deg) translate(17px); animation-delay: 0s; }
@keyframes ui-spinner-dot { 0%, 100% { opacity: 0.15; } 50% { opacity: 1; } }

/* --- Kleurkeuze ------------------------------------------------------------ */
.swatches { display: flex; flex-wrap: wrap; gap: 0.5rem; }
.swatch {
  width: 32px; height: 32px; border-radius: var(--radius-full); border: 2px solid transparent;
  cursor: pointer; padding: 0; box-shadow: 0 0 0 1px var(--border-color) inset;
}
.swatch:hover { transform: scale(1.08); }
.swatch.is-selected { border-color: var(--text-primary); box-shadow: 0 0 0 2px var(--bg-card), 0 0 0 4px var(--text-primary); }
.dot { display: inline-block; width: 10px; height: 10px; border-radius: var(--radius-full); vertical-align: middle; }