/* ── Titillium font ── */
@font-face { font-family:"Titillium"; src:url("../assets/fonts/Titillium-Light.otf") format("opentype"); font-weight:300; font-style:normal; font-display:swap; }
@font-face { font-family:"Titillium"; src:url("../assets/fonts/Titillium-LightItalic.otf") format("opentype"); font-weight:300; font-style:italic; font-display:swap; }
@font-face { font-family:"Titillium"; src:url("../assets/fonts/Titillium-Regular.otf") format("opentype"); font-weight:400; font-style:normal; font-display:swap; }
@font-face { font-family:"Titillium"; src:url("../assets/fonts/Titillium-RegularItalic.otf") format("opentype"); font-weight:400; font-style:italic; font-display:swap; }
@font-face { font-family:"Titillium"; src:url("../assets/fonts/Titillium-Semibold.otf") format("opentype"); font-weight:600; font-style:normal; font-display:swap; }
@font-face { font-family:"Titillium"; src:url("../assets/fonts/Titillium-SemiboldItalic.otf") format("opentype"); font-weight:600; font-style:italic; font-display:swap; }
@font-face { font-family:"Titillium"; src:url("../assets/fonts/Titillium-Bold.otf") format("opentype"); font-weight:700; font-style:normal; font-display:swap; }
@font-face { font-family:"Titillium"; src:url("../assets/fonts/Titillium-BoldItalic.otf") format("opentype"); font-weight:700; font-style:italic; font-display:swap; }

/* ── ALBO Design Tokens ── */
:root {
  --albo-blauw: #007793;
  --albo-bruin: #58463c;
  --albo-lichtblauw: #46bdcf;
  --albo-zand: #b2a192;

  --blauw-900: #003f4f;
  --blauw-800: #005566;
  --blauw-700: #006980;
  --blauw-600: #007793;
  --blauw-500: #1a8aa3;
  --blauw-400: #46bdcf;
  --blauw-200: #bce6ed;
  --blauw-100: #e3f4f7;
  --blauw-50:  #f1fafb;

  --bruin-900: #2e251f;
  --bruin-800: #3d322a;
  --bruin-700: #4a3b32;
  --bruin-600: #58463c;
  --bruin-500: #6f5c50;
  --bruin-400: #8b7a6e;
  --bruin-300: #b2a192;
  --bruin-200: #d2c7bd;
  --bruin-100: #ece5de;
  --bruin-50:  #f6f3ef;

  --white: #ffffff;
  --paper: #faf8f5;
  --sand-tint: #f3efea;
  --line: #e4ddd4;
  --line-strong: #cfc5b9;
  --ink-900: #2e251f;
  --ink-700: #58463c;
  --ink-400: #8b7a6e;

  --text-strong: var(--ink-900);
  --text-body: var(--bruin-600);
  --text-muted: var(--ink-400);
  --text-on-brand: var(--white);
  --text-link: var(--albo-blauw);

  --surface-page: var(--paper);
  --surface-card: var(--white);
  --surface-subtle: var(--sand-tint);
  --surface-brand: var(--albo-blauw);
  --surface-brand-strong: var(--blauw-800);
  --surface-brand-soft: var(--blauw-100);
  --surface-warm: var(--bruin-600);
  --surface-warm-soft: var(--bruin-100);

  --border-subtle: var(--line);
  --border-strong: var(--line-strong);
  --focus-ring: var(--albo-lichtblauw);

  --font-sans: "Titillium", "Titillium Web", "Segoe UI", system-ui, sans-serif;
  --fw-light: 300;
  --fw-regular: 400;
  --fw-semibold: 600;
  --fw-bold: 700;

  --text-xs: 0.75rem;
  --text-sm: 0.875rem;
  --text-base: 1rem;
  --text-md: 1.125rem;
  --text-lg: 1.375rem;

  --leading-tight: 1.05;
  --leading-normal: 1.5;
  --tracking-tight: -0.02em;
  --tracking-wide: 0.08em;

  --space-2: 0.5rem;
  --space-3: 0.75rem;
  --space-4: 1rem;
  --space-5: 1.5rem;
  --space-6: 2rem;

  --radius-sm: 3px;
  --radius-md: 6px;
  --radius-lg: 10px;
  --radius-pill: 999px;

  --shadow-xs: 0 1px 2px rgba(46,37,31,.06);
  --shadow-sm: 0 2px 6px rgba(46,37,31,.08);
  --shadow-md: 0 8px 24px rgba(46,37,31,.10);

  --ease-standard: cubic-bezier(0.4, 0, 0.2, 1);
  --ease-out: cubic-bezier(0.16, 1, 0.3, 1);
  --duration-fast: 140ms;
  --duration-base: 240ms;
}

/* ── Reset ── */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: var(--font-sans);
  font-weight: var(--fw-regular);
  font-size: var(--text-base);
  line-height: var(--leading-normal);
  color: var(--text-body);
  background: var(--surface-page);
  -webkit-font-smoothing: antialiased;
}

/* ── Header ── */
.header {
  background: var(--surface-brand);
  color: var(--white);
  padding: 0 var(--space-6);
  height: 60px;
  display: flex;
  align-items: center;
  gap: var(--space-4);
  position: sticky;
  top: 0;
  z-index: 100;
  box-shadow: 0 2px 8px rgba(0,0,0,.18);
}

.header-logo img {
  height: 32px;
  display: block;
}

.header-filters {
  display: flex;
  gap: var(--space-2);
  flex: 1;
}

.header-filters select {
  background: rgba(255,255,255,.12);
  border: 1px solid rgba(255,255,255,.2);
  color: var(--white);
  padding: 6px 12px;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
.header-filters select:hover { background: rgba(255,255,255,.2); }
.header-filters select option { background: var(--blauw-800); color: var(--white); }

.header-actions { display: flex; gap: var(--space-2); }

/* ── Buttons ── */
.btn {
  display: inline-flex;
  align-items: center;
  gap: .45em;
  font-family: var(--font-sans);
  font-weight: var(--fw-semibold);
  font-size: var(--text-sm);
  line-height: 1;
  padding: .65em 1.2em;
  border-radius: var(--radius-md);
  border: 1.5px solid transparent;
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
  text-decoration: none;
  white-space: nowrap;
}
.btn:active { transform: translateY(1px); }

.btn-ghost {
  background: rgba(255,255,255,.12);
  color: var(--white);
  border-color: rgba(255,255,255,.2);
}
.btn-ghost:hover { background: rgba(255,255,255,.22); }

.btn-primary {
  background: var(--albo-blauw);
  color: var(--white);
}
.btn-primary:hover { background: var(--blauw-800); }

/* ── KPI blokken ── */
.kpi-grid {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: var(--space-4);
  padding: var(--space-5) var(--space-6) 0;
}

.kpi-card {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  padding: var(--space-5);
  box-shadow: var(--shadow-sm);
  border-top: 3px solid var(--border-subtle);
  transition: box-shadow var(--duration-base) var(--ease-standard);
}

.kpi-card.kpi-totaal   { border-top-color: var(--albo-blauw); }
.kpi-card.kpi-nieuw    { border-top-color: var(--albo-lichtblauw); }
.kpi-card.kpi-actie    { border-top-color: var(--albo-zand); }
.kpi-card.kpi-conversie { border-top-color: var(--albo-bruin); }

.kpi-label {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-2);
}

.kpi-value {
  font-size: 2.5rem;
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  line-height: var(--leading-tight);
  letter-spacing: var(--tracking-tight);
}

.kpi-actie .kpi-value.heeft-actie { color: #c05c00; }

/* ── Alertbalk ── */
.alertbalk {
  margin: var(--space-4) var(--space-6) 0;
  background: #fef3c7;
  border: 1px solid #f0c040;
  border-left: 4px solid #d97706;
  border-radius: var(--radius-md);
  padding: 10px var(--space-4);
  display: flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--text-sm);
  color: #7c4a00;
}
.alertbalk a { color: #7c4a00; font-weight: var(--fw-semibold); }
.alertbalk.hidden { display: none; }

/* ── Tabs ── */
.tabs-bar {
  display: flex;
  padding: var(--space-5) var(--space-6) 0;
  border-bottom: 1.5px solid var(--border-subtle);
  gap: 0;
}

.tab-btn {
  padding: 10px var(--space-5);
  border: none;
  background: none;
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  color: var(--text-muted);
  border-bottom: 2px solid transparent;
  margin-bottom: -1.5px;
  transition: color var(--duration-fast) var(--ease-standard),
              border-color var(--duration-fast) var(--ease-standard);
}

.tab-btn.active {
  color: var(--albo-blauw);
  border-bottom-color: var(--albo-blauw);
}
.tab-btn:hover:not(.active) { color: var(--text-body); }

.tab-content { display: none; padding: var(--space-5) var(--space-6); }
.tab-content.active { display: block; }

/* ── Tabel ── */
.tabel-container {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  overflow: hidden;
}

table { width: 100%; border-collapse: collapse; }

th {
  background: var(--surface-subtle);
  padding: 11px 16px;
  text-align: left;
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--text-muted);
  font-weight: var(--fw-semibold);
  border-bottom: 1px solid var(--border-subtle);
}

td {
  padding: 14px 16px;
  border-bottom: 1px solid var(--surface-subtle);
  vertical-align: top;
  font-size: var(--text-sm);
  color: var(--text-body);
}

tr:last-child td { border-bottom: none; }
tr:hover td { background: var(--blauw-50); cursor: pointer; }

.datum-cel { white-space: nowrap; }
.datum-dgn { font-size: var(--text-xs); color: var(--text-muted); margin-top: 2px; }

.nieuw-dot {
  display: inline-block;
  width: 7px; height: 7px;
  background: var(--albo-blauw);
  border-radius: 50%;
  margin-right: 6px;
  vertical-align: middle;
}

.gewijzigd-ok   { color: var(--text-muted); }
.gewijzigd-warn { color: #c05c00; font-weight: var(--fw-semibold); }
.gewijzigd-over { color: #b91c1c; font-weight: var(--fw-bold); }

.naam-email small { display: block; color: var(--text-muted); font-size: var(--text-xs); margin-top: 2px; }

/* ── Status badges ── */
.badge {
  display: inline-flex;
  align-items: center;
  gap: .4em;
  padding: .4em .75em;
  border-radius: var(--radius-sm);
  font-family: var(--font-sans);
  font-size: var(--text-xs);
  font-weight: var(--fw-semibold);
  letter-spacing: .01em;
  white-space: nowrap;
  line-height: 1;
}

.badge-nieuw             { background: var(--blauw-100); color: var(--blauw-800); }
.badge-in_behandeling    { background: #fde8d0; color: #7c3200; }
.badge-offerte_verstuurd { background: #d1fae5; color: #065f46; }
.badge-verlopen          { background: #fee2e2; color: #991b1b; }
.badge-afgesloten        { background: var(--bruin-100); color: var(--bruin-800); }

/* ── Actieknoppen in tabel ── */
.actie-btns { display: flex; gap: 6px; white-space: nowrap; }

.btn-icon {
  background: var(--surface-subtle);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  padding: 5px 10px;
  cursor: pointer;
  font-size: var(--text-xs);
  color: var(--text-body);
  font-family: var(--font-sans);
  transition: background var(--duration-fast) var(--ease-standard);
}
.btn-icon:hover { background: var(--bruin-100); border-color: var(--border-strong); }

.btn-icon--blauw {
  color: var(--albo-blauw);
  border-color: var(--blauw-200);
  background: var(--blauw-50);
}
.btn-icon--blauw:hover { background: var(--blauw-100); border-color: var(--albo-blauw); }

.btn-icon--bruin {
  color: var(--albo-bruin);
  border-color: var(--bruin-200);
  background: var(--bruin-50);
}
.btn-icon--bruin:hover { background: var(--bruin-100); border-color: var(--albo-bruin); }

.btn-icon svg { display: block; }

/* ── Per dealer tab ── */
.dealer-accordion { margin-bottom: var(--space-3); }

.dealer-kaart {
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-xs);
  padding: var(--space-4) var(--space-5);
  margin-bottom: var(--space-3);
  display: flex;
  align-items: center;
  gap: var(--space-4);
}

.dealer-kaart--klikbaar {
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard),
              box-shadow var(--duration-fast) var(--ease-standard);
  margin-bottom: 0;
  border-radius: var(--radius-lg);
}
.dealer-kaart--klikbaar:hover { background: var(--blauw-50); box-shadow: var(--shadow-sm); }

.dealer-chevron {
  color: var(--ink-400);
  flex-shrink: 0;
  transition: transform var(--duration-base) var(--ease-out);
}
.dealer-chevron--open { transform: rotate(90deg); }

.dealer-aanvragen {
  display: none;
  background: var(--surface-card);
  border: 1px solid var(--border-subtle);
  border-top: none;
  border-radius: 0 0 var(--radius-lg) var(--radius-lg);
  overflow: hidden;
}
.dealer-aanvragen--open { display: block; }

.dealer-accordion .dealer-kaart--klikbaar:has(+ .dealer-aanvragen--open) {
  border-radius: var(--radius-lg) var(--radius-lg) 0 0;
  border-bottom-color: var(--albo-blauw);
}

.dealer-naam { font-weight: var(--fw-semibold); flex: 1; color: var(--text-strong); }
.dealer-stats { display: flex; gap: var(--space-6); }
.dealer-stat { text-align: center; }
.dealer-stat-val { font-size: 1.5rem; font-weight: var(--fw-bold); color: var(--albo-blauw); letter-spacing: var(--tracking-tight); }
.dealer-stat-lbl { font-size: var(--text-xs); color: var(--text-muted); text-transform: uppercase; letter-spacing: var(--tracking-wide); }

/* ── Detail panel ── */
.overlay {
  position: fixed; inset: 0;
  background: rgba(46,37,31,.35);
  z-index: 200;
  display: none;
}
.overlay.open { display: block; }

.detail-panel {
  position: fixed;
  right: 0; top: 0; bottom: 0;
  width: min(520px, 100vw);
  background: var(--surface-card);
  z-index: 201;
  display: flex;
  flex-direction: column;
  transform: translateX(100%);
  transition: transform var(--duration-base) var(--ease-out);
  box-shadow: var(--shadow-md);
}

.detail-panel.open { transform: translateX(0); }

.panel-header {
  background: var(--surface-brand);
  color: var(--white);
  padding: var(--space-4) var(--space-5);
  display: flex;
  align-items: center;
  justify-content: space-between;
}

.panel-title { font-weight: var(--fw-bold); font-size: var(--text-md); }
.panel-close {
  background: rgba(255,255,255,.15);
  border: 1px solid rgba(255,255,255,.2);
  border-radius: var(--radius-md);
  color: var(--white);
  width: 32px; height: 32px;
  display: flex; align-items: center; justify-content: center;
  font-size: 18px;
  cursor: pointer;
  line-height: 1;
  transition: background var(--duration-fast) var(--ease-standard);
}
.panel-close:hover { background: rgba(255,255,255,.25); }

.panel-body { flex: 1; overflow-y: auto; padding: var(--space-5); }

.panel-sectie { margin-bottom: var(--space-5); }
.panel-sectie-titel {
  font-size: var(--text-xs);
  text-transform: uppercase;
  letter-spacing: var(--tracking-wide);
  color: var(--albo-blauw);
  font-weight: var(--fw-semibold);
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-2);
  border-bottom: 1px solid var(--border-subtle);
}

.info-grid { display: grid; grid-template-columns: 1fr 1fr; gap: var(--space-3); }
.info-item label { font-size: var(--text-xs); color: var(--text-muted); display: block; margin-bottom: 2px; text-transform: uppercase; letter-spacing: .04em; }
.info-item span { font-weight: var(--fw-semibold); color: var(--text-strong); font-size: var(--text-sm); }

/* ── Tijdlijn ── */
.tijdlijn { position: relative; padding-left: 20px; }
.tijdlijn::before {
  content: '';
  position: absolute;
  left: 6px; top: 6px; bottom: 0;
  width: 1.5px;
  background: var(--border-subtle);
}

.tijdlijn-item { position: relative; padding-bottom: var(--space-4); }
.tijdlijn-item::before {
  content: '';
  position: absolute;
  left: -17px; top: 5px;
  width: 10px; height: 10px;
  border-radius: 50%;
  background: var(--albo-blauw);
  border: 2px solid var(--white);
  box-shadow: 0 0 0 2px var(--border-subtle);
}
.tijdlijn-datum { font-size: var(--text-xs); color: var(--text-muted); }
.tijdlijn-notitie { font-size: var(--text-sm); margin-top: 3px; color: var(--text-body); }

/* ── Status formulier ── */
.status-form select,
.status-form textarea {
  width: 100%;
  padding: 8px 12px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  color: var(--text-body);
  background: var(--surface-card);
  margin-bottom: var(--space-3);
  transition: border-color var(--duration-fast) var(--ease-standard);
}
.status-form select:focus,
.status-form textarea:focus {
  outline: none;
  border-color: var(--albo-blauw);
  box-shadow: 0 0 0 3px var(--blauw-100);
}
.status-form textarea { height: 80px; resize: vertical; }

.btn-opslaan {
  background: var(--albo-blauw);
  color: var(--white);
  padding: .7em 1.4em;
  border: none;
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  cursor: pointer;
  transition: background var(--duration-fast) var(--ease-standard);
}
.btn-opslaan:hover { background: var(--blauw-800); }

/* ── Instellingen Modal ── */
.modal-overlay {
  position: fixed; inset: 0;
  background: rgba(46,37,31,.4);
  z-index: 300;
  align-items: center;
  justify-content: center;
  display: none;
}
.modal-overlay.open { display: flex; }

.modal {
  background: var(--surface-card);
  border-radius: var(--radius-lg);
  padding: var(--space-6);
  width: 400px;
  box-shadow: var(--shadow-md);
  border: 1px solid var(--border-subtle);
}

.modal-titel {
  font-size: var(--text-lg);
  font-weight: var(--fw-bold);
  color: var(--text-strong);
  letter-spacing: var(--tracking-tight);
  margin-bottom: var(--space-5);
}

.limiet-rij {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: var(--space-3);
  padding-bottom: var(--space-3);
  border-bottom: 1px solid var(--border-subtle);
}
.limiet-rij:last-of-type { border-bottom: none; }

.limiet-rij label { font-size: var(--text-sm); color: var(--text-body); font-weight: var(--fw-semibold); }
.limiet-rij input {
  width: 75px;
  padding: 6px 10px;
  border: 1px solid var(--border-strong);
  border-radius: var(--radius-md);
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  text-align: center;
  color: var(--text-strong);
}
.limiet-rij input:focus { outline: none; border-color: var(--albo-blauw); box-shadow: 0 0 0 3px var(--blauw-100); }

.modal-footer { margin-top: var(--space-5); display: flex; gap: var(--space-2); justify-content: flex-end; }
.btn-annuleer {
  background: var(--surface-subtle);
  color: var(--text-body);
  padding: .7em 1.2em;
  border: 1px solid var(--border-subtle);
  border-radius: var(--radius-md);
  cursor: pointer;
  font-family: var(--font-sans);
  font-size: var(--text-sm);
  font-weight: var(--fw-semibold);
  transition: background var(--duration-fast) var(--ease-standard);
}
.btn-annuleer:hover { background: var(--bruin-100); }

/* ── Lege staat ── */
.leeg-staat { text-align: center; padding: 56px var(--space-6); color: var(--text-muted); }
.leeg-staat-icoon { font-size: 3rem; margin-bottom: var(--space-3); opacity: .5; }
.leeg-staat p { font-size: var(--text-sm); }

/* ── Loading ── */
.loading { text-align: center; padding: 56px; color: var(--text-muted); }
.spinner {
  display: inline-block;
  width: 24px; height: 24px;
  border: 2.5px solid var(--border-subtle);
  border-top-color: var(--albo-blauw);
  border-radius: 50%;
  animation: spin .8s linear infinite;
  margin-bottom: var(--space-3);
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Foutbalk ── */
#fout-balk {
  margin: var(--space-3) var(--space-6);
  background: #fee2e2;
  border: 1px solid #fca5a5;
  border-left: 4px solid #dc2626;
  color: #991b1b;
  padding: 10px var(--space-4);
  border-radius: var(--radius-md);
  font-size: var(--text-sm);
}

/* ── Responsive ── */
@media (max-width: 900px) {
  .kpi-grid { grid-template-columns: repeat(2, 1fr); }
  .header-filters { display: none; }
}

@media (max-width: 640px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; gap: var(--space-3); padding: var(--space-3) var(--space-4) 0; }
  .tab-content { padding: var(--space-3) var(--space-4); }
  .tabs-bar { padding: var(--space-3) var(--space-4) 0; }
}