/*
 * Offertewacht — centrale stijl (design tokens + gedeelde onderdelen)
 *
 * Stijlreferentie: docs/design/dashboard-mockup.png
 * Gebruik: laad na bootstrap.min.css en zet class="af-theme" op <body>.
 * Gebruikt door de publieke website en de app (app.css en website.css bevatten alleen layout).
 * Alle kleuren, rondingen en schaduwen staan hieronder als variabele.
 * Pas waarden hier aan, niet verspreid in andere bestanden.
 */

/* --- Lettertype (lokaal, geen externe diensten) --------------------------- */
@font-face {
  font-family: "Inter";
  font-style: normal;
  font-weight: 100 900;
  font-display: swap;
  src: url("../vendor/inter/inter-latin-wght-normal.8e433c0592f7.woff2") format("woff2");
}

/* --- Design tokens -------------------------------------------------------- */
:root {
  /* Typografie */
  --af-font: "Inter", system-ui, -apple-system, "Segoe UI", Roboto, "Helvetica Neue", Arial, sans-serif;
  --af-font-size: 1rem;
  --af-line-height: 1.6;
  --af-weight-normal: 400;
  --af-weight-medium: 500;
  --af-weight-semibold: 600;
  --af-weight-bold: 700;
  --af-weight-heavy: 800;

  /* Achtergrond en vlakken */
  --af-bg-start: #eef2fb;
  --af-bg-end: #e6ecfa;
  --af-bg-gradient: linear-gradient(180deg, var(--af-bg-start) 0%, var(--af-bg-end) 100%);
  --af-surface: #ffffff;
  --af-surface-subtle: #f6f8fd;
  --af-line: #e9edf5;

  /* Tekst */
  --af-text: #111827;
  --af-text-soft: #374151;
  --af-text-muted: #5f6878;

  /* Primair (blauw/indigo) */
  --af-primary: #3b5bdb;
  --af-primary-hover: #304bc2;
  --af-primary-active: #2a42ab;
  --af-primary-soft: #e8edfd;
  --af-primary-rgb: 59, 91, 219;

  /* Pastel accenten: zacht vlak + donkere tint voor tekst/icoon */
  --af-blauw-zacht: #e8eeff;   --af-blauw: #3554d1;
  --af-roze-zacht: #fdecf1;    --af-roze: #c2416a;
  --af-groen-zacht: #e4f5ec;   --af-groen: #1f7a4d;
  --af-paars-zacht: #f1eafe;   --af-paars: #6a3fc9;
  --af-amber-zacht: #fdf1d8;   --af-amber: #8a5a0b;
  --af-rood-zacht: #fde8e8;    --af-rood: #a82e2e;

  /* Statussen (pilvorm) */
  --af-status-nieuw-bg: var(--af-blauw-zacht);             --af-status-nieuw: var(--af-blauw);
  --af-status-in_behandeling-bg: var(--af-amber-zacht);    --af-status-in_behandeling: var(--af-amber);
  --af-status-offerte_verstuurd-bg: var(--af-paars-zacht); --af-status-offerte_verstuurd: var(--af-paars);
  --af-status-gewonnen-bg: var(--af-groen-zacht);          --af-status-gewonnen: var(--af-groen);
  --af-status-verloren-bg: var(--af-rood-zacht);           --af-status-verloren: var(--af-rood);

  /* Vorm */
  --af-radius-card: 16px;
  --af-radius: 12px;
  --af-radius-sm: 8px;
  --af-radius-pill: 999px;
  --af-shadow-card: 0 1px 2px rgba(17, 24, 39, 0.04), 0 6px 20px rgba(31, 52, 120, 0.06);
  --af-shadow-raised: 0 2px 4px rgba(17, 24, 39, 0.05), 0 18px 48px rgba(31, 52, 120, 0.12);
  --af-focus-ring: 0 0 0 0.25rem rgba(var(--af-primary-rgb), 0.25);

  /* Ruimte */
  --af-space-1: 0.25rem;
  --af-space-2: 0.5rem;
  --af-space-3: 1rem;
  --af-space-4: 1.5rem;
  --af-space-5: 2.5rem;
  --af-space-6: 4rem;
}

/* --- Thema: Bootstrap koppelen aan de tokens ------------------------------ */
body.af-theme {
  --bs-body-font-family: var(--af-font);
  --bs-body-font-size: var(--af-font-size);
  --bs-body-line-height: var(--af-line-height);
  --bs-body-color: var(--af-text);
  --bs-body-bg: var(--af-bg-start);
  --bs-border-color: var(--af-line);
  --bs-link-color-rgb: var(--af-primary-rgb);
  --bs-link-hover-color-rgb: 48, 75, 194;
  --bs-secondary-color: var(--af-text-muted);
  --bs-border-radius: var(--af-radius-sm);
  --bs-focus-ring-color: rgba(var(--af-primary-rgb), 0.25);
  min-height: 100vh;
  background: var(--af-bg-gradient) fixed;
  background-color: var(--af-bg-start);
  color: var(--af-text);
  -webkit-font-smoothing: antialiased;
}

.af-theme h1, .af-theme h2, .af-theme h3, .af-theme h4 {
  color: var(--af-text);
  font-weight: var(--af-weight-bold);
  letter-spacing: -0.02em;
  line-height: 1.2;
}

.af-theme .btn {
  --bs-btn-font-weight: var(--af-weight-semibold);
  --bs-btn-border-radius: var(--af-radius);
  --bs-btn-padding-x: 1.25rem;
  --bs-btn-padding-y: 0.65rem;
}
.af-theme .btn-lg { --bs-btn-padding-x: 1.6rem; --bs-btn-padding-y: 0.85rem; --bs-btn-font-size: 1.05rem; }

.af-theme .btn-primary {
  --bs-btn-bg: var(--af-primary);
  --bs-btn-border-color: var(--af-primary);
  --bs-btn-hover-bg: var(--af-primary-hover);
  --bs-btn-hover-border-color: var(--af-primary-hover);
  --bs-btn-active-bg: var(--af-primary-active);
  --bs-btn-active-border-color: var(--af-primary-active);
  --bs-btn-focus-shadow-rgb: var(--af-primary-rgb);
  box-shadow: 0 6px 16px rgba(var(--af-primary-rgb), 0.22);
}

/* Secundaire knop: wit met blauwe tekst (er is maar één primaire knop per scherm) */
.af-theme .btn-af-secondary {
  --bs-btn-color: var(--af-primary);
  --bs-btn-bg: var(--af-surface);
  --bs-btn-border-color: #d5ddf3;
  --bs-btn-hover-color: var(--af-primary-hover);
  --bs-btn-hover-bg: var(--af-primary-soft);
  --bs-btn-hover-border-color: #c4d0f2;
  --bs-btn-active-color: var(--af-primary-active);
  --bs-btn-active-bg: var(--af-primary-soft);
  --bs-btn-active-border-color: #c4d0f2;
  --bs-btn-focus-shadow-rgb: var(--af-primary-rgb);
}

.af-theme .form-control,
.af-theme .form-select {
  border-radius: var(--af-radius);
  border-color: #d9dfeb;
  background-color: var(--af-surface);
  padding: 0.7rem 0.9rem;
}
.af-theme .form-control:focus,
.af-theme .form-select:focus {
  border-color: rgba(var(--af-primary-rgb), 0.6);
  box-shadow: var(--af-focus-ring);
}
.af-theme .form-label { font-weight: var(--af-weight-medium); color: var(--af-text-soft); }

.af-theme :focus-visible { outline: 3px solid rgba(var(--af-primary-rgb), 0.45); outline-offset: 2px; }

/* --- Gedeelde onderdelen -------------------------------------------------- */
.af-muted { color: var(--af-text-muted); }

.af-card {
  background: var(--af-surface);
  border-radius: var(--af-radius-card);
  box-shadow: var(--af-shadow-card);
  border: 0;
}

/* Merk: blauw "A"-icoon met woordmerk */
.af-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.6rem;
  font-weight: var(--af-weight-heavy);
  font-size: 1.25rem;
  letter-spacing: -0.02em;
  color: var(--af-text);
  text-decoration: none;
}
.af-brand:hover { color: var(--af-text); }
.af-brand-logo {
  display: inline-grid;
  place-items: center;
  width: 2rem;
  height: 2rem;
  border-radius: 10px;
  background: linear-gradient(135deg, #5b7cf5 0%, var(--af-primary) 60%, #2f3fb0 100%);
  color: #fff;
  font-size: 1.05rem;
  font-weight: var(--af-weight-heavy);
}
/* Logo-icoon: schildje met vinkje (templates/_logo_icoon.html), wit op de blauwe tegel */
.af-logo-icoon { display: block; width: 66%; height: 66%; }

/* Icoon in pastelkleurig vierkant */
.af-icon-tile {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 3rem;
  height: 3rem;
  border-radius: var(--af-radius);
  font-size: 1.35rem;
  background: var(--af-blauw-zacht);
  color: var(--af-blauw);
}
.af-icon-tile-sm { width: 2.25rem; height: 2.25rem; font-size: 1rem; border-radius: 10px; }
.af-tone-blauw { background: var(--af-blauw-zacht); color: var(--af-blauw); }
.af-tone-roze  { background: var(--af-roze-zacht);  color: var(--af-roze); }
.af-tone-groen { background: var(--af-groen-zacht); color: var(--af-groen); }
.af-tone-paars { background: var(--af-paars-zacht); color: var(--af-paars); }
.af-tone-amber { background: var(--af-amber-zacht); color: var(--af-amber); }
.af-tone-rood  { background: var(--af-rood-zacht);  color: var(--af-rood); }

/* KPI-kaart */
.af-kpi {
  display: flex;
  align-items: center;
  gap: 0.9rem;
  padding: 1.1rem 1.1rem;
}
.af-kpi-label { font-size: 0.85rem; font-weight: var(--af-weight-semibold); color: var(--af-text); }
.af-kpi-value { font-size: 1.6rem; font-weight: var(--af-weight-bold); line-height: 1.1; color: var(--af-text); }
.af-kpi-note { font-size: 0.75rem; color: var(--af-text-muted); }

/* Statusbadge (pilvorm) */
.af-badge {
  display: inline-block;
  padding: 0.2rem 0.65rem;
  border-radius: var(--af-radius-pill);
  font-size: 0.75rem;
  font-weight: var(--af-weight-semibold);
  white-space: nowrap;
  background: var(--af-status-nieuw-bg);
  color: var(--af-status-nieuw);
}
.af-badge.status-nieuw             { background: var(--af-status-nieuw-bg);             color: var(--af-status-nieuw); }
.af-badge.status-in_behandeling    { background: var(--af-status-in_behandeling-bg);    color: var(--af-status-in_behandeling); }
.af-badge.status-offerte_verstuurd { background: var(--af-status-offerte_verstuurd-bg); color: var(--af-status-offerte_verstuurd); }
.af-badge.status-gewonnen          { background: var(--af-status-gewonnen-bg);          color: var(--af-status-gewonnen); }
.af-badge.status-verloren          { background: var(--af-status-verloren-bg);          color: var(--af-status-verloren); }

/* Avatar met initialen */
.af-avatar {
  display: inline-grid;
  place-items: center;
  flex: none;
  width: 2rem;
  height: 2rem;
  border-radius: 50%;
  font-size: 0.7rem;
  font-weight: var(--af-weight-bold);
}

/* Tabel in mockup-stijl */
.af-table { margin: 0; --bs-table-bg: transparent; }
.af-table > :not(caption) > * > * { padding: 0.7rem 0.6rem; border-bottom-color: var(--af-line); }
.af-table thead th {
  font-size: 0.68rem;
  font-weight: var(--af-weight-semibold);
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: var(--af-text-muted);
  background: transparent;
}

/* Zichtbare plaatshouder voor nog onbekende gegevens */
.af-placeholder {
  display: inline-block;
  padding: 0 0.35rem;
  border-radius: 4px;
  background: var(--af-amber-zacht);
  color: var(--af-amber);
  font-weight: var(--af-weight-semibold);
  font-size: 0.9em;
}

/* Label "Voorbeeld" bij rekenvoorbeelden en fictieve gegevens */
.af-label-voorbeeld {
  display: inline-flex;
  align-items: center;
  gap: 0.35rem;
  padding: 0.2rem 0.7rem;
  border-radius: var(--af-radius-pill);
  background: var(--af-amber-zacht);
  color: var(--af-amber);
  font-size: 0.78rem;
  font-weight: var(--af-weight-semibold);
}

/* Toegankelijk verbergen (honeypot, schermlezer-tekst) */
.af-visually-hidden {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0);
  white-space: nowrap; border: 0;
}

@media (prefers-reduced-motion: reduce) {
  .af-theme * { transition: none !important; scroll-behavior: auto !important; }
}