/* Spits PIM — huisstijl, gelijk aan het CRM.
 *
 * De kleuren, het lettertype en de maatvoering komen letterlijk uit
 * spits-dashboard.html. Het CRM kent twee thema's: donker als standaard en
 * een licht thema op body.light. Het PIM was altijd licht, dus hier staat het
 * lichte thema als standaard en schakel je met body.donker naar donker.
 * De zijbalk is in allebei de thema's zwart, net als in het CRM.
 *
 * Alles staat op één plek: een volgende kleurwijziging is dit bestand, niet
 * twintig pagina's.
 */

:root{
  --bg:       #F5F2EC;   /* warme achtergrond van het werkvlak */
  --bg2:      #EDEAE2;   /* iets dieper, voor balken en vlakken */
  --bg3:      #FFFFFF;   /* kaarten, tabellen, invoervelden */
  --bg4:      #E4E0D6;
  --bg5:      #DAD6CC;
  --border:   rgba(0,0,0,0.07);
  --border2:  rgba(0,0,0,0.13);
  --text:     #1A1A1A;
  --muted:    rgba(26,26,26,0.45);
  --muted2:   rgba(26,26,26,0.65);
  --accent:   #9B1C1C;   /* bordeaux */
  --accent2:  #C02626;
  --accent-zacht: rgba(155,28,28,0.10);
  --green:    #0F6E56;
  --red:      #B91C1C;
  --amber:    #92400E;
  --teal:     #0F6E56;
  --sidebar-bg: #0d0d0d;
  --sans:     'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --mono:     'Hanken Grotesk',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
  --radius:    14px;
  --radius-sm:  9px;
  --radius-lg: 18px;
}

body.donker{
  --bg:      #0C0C0F;
  --bg2:     #111115;
  --bg3:     #18181D;
  --bg4:     #1F1F26;
  --bg5:     #26262F;
  --border:  rgba(255,255,255,0.07);
  --border2: rgba(255,255,255,0.13);
  --text:    #F0EDE8;
  --muted:   rgba(240,237,232,0.45);
  --muted2:  rgba(240,237,232,0.70);
  --green:   #1D9E75;
  --red:     #DC2626;
  --amber:   #D97706;
}

/* ── Basis ───────────────────────────────────────────────────────────── */
body{
  background:var(--bg);
  color:var(--text);
  font-family:var(--sans);
}

/* ── Zijbalk ─────────────────────────────────────────────────────────── */
#sidebar{
  background:var(--sidebar-bg);
  border-right:1px solid rgba(255,255,255,0.07);
  /* Zonder dit worden de onderste menu-items op een laag scherm afgekapt
     zonder dat je erbij kunt. Het CRM laat de zijbalk om dezelfde reden
     scrollen. */
  overflow-y:auto;
  overscroll-behavior:contain;
}
/* Smalle, onopvallende schuifbalk, zoals in het CRM. */
#sidebar::-webkit-scrollbar{width:6px}
#sidebar::-webkit-scrollbar-thumb{background:rgba(255,255,255,0.14);border-radius:3px}
#sidebar::-webkit-scrollbar-track{background:transparent}
/* Uitloggen blijft onderaan staan, maar mag nooit de menu-items wegdrukken. */
.sb-bottom{flex-shrink:0}
#sidebar > a.sb-item, #sidebar > .sb-sect{flex-shrink:0}
.sb-logo{border-bottom:1px solid rgba(255,255,255,0.07)}
.sb-sect{
  font-family:var(--mono);
  font-size:10px;
  letter-spacing:0.1em;
  color:rgba(255,255,255,0.3);
}
.sb-item{
  color:rgba(255,255,255,0.5);
  border-left:2px solid transparent;
  border-radius:0;
  margin:1px 0;
  padding:8px 18px;
}
.sb-item:hover{background:rgba(255,255,255,0.05);color:rgba(255,255,255,0.8)}
.sb-item.active{
  background:rgba(155,28,28,0.15);
  color:#f0ede8;
  border-left-color:var(--accent);
  font-weight:500;
}
.sb-item .cnt{
  background:var(--accent);
  color:#fff;
  font-weight:700;
  border-radius:9px;
}
.sb-bottom{border-top:1px solid rgba(255,255,255,0.07)}

/* ── Bovenbalk en werkvlak ───────────────────────────────────────────── */
.topbar{
  background:var(--bg);
  border-bottom:1px solid var(--border);
  color:var(--text);
}
.topbar .bc, .fi{color:var(--muted)}

/* ── Kaarten, tegels, tabellen ───────────────────────────────────────── */
.card, .stat, .kpi-card, .paneel{
  background:var(--bg3);
  border:1px solid var(--border);
  border-radius:var(--radius);
}
.card-hd{border-bottom:1px solid var(--border)}
.filterbar{border-bottom:1px solid var(--border)}
.stat .lbl, .stat .sub{color:var(--muted)}
.stat .val{color:var(--text)}

th{
  color:var(--muted);
  border-bottom:1px solid var(--border);
  font-family:var(--mono);
  letter-spacing:0.08em;
}
td{border-bottom:1px solid var(--border)}
tbody tr:hover td{background:var(--accent-zacht)}

/* ── Knoppen en invoer ───────────────────────────────────────────────── */
.btn{
  background:var(--bg3);
  border:1px solid var(--border2);
  color:var(--text);
  border-radius:var(--radius-sm);
  font-family:var(--sans);
}
.btn:hover{background:var(--bg4)}
.btn.primary{background:var(--accent);border-color:var(--accent);color:#fff}
.btn.primary:hover{background:var(--accent2)}

input, select, textarea{
  font-family:var(--sans);
  color:var(--text);
  background:var(--bg3);
  border-color:var(--border2);
  border-radius:var(--radius-sm);
}
input:focus, select:focus, textarea:focus{outline:none;border-color:var(--accent)}
.sw input, select.flt{background:var(--bg3);border-color:var(--border2);color:var(--text)}
.sw svg{stroke:var(--muted)}

/* ── Statuslabels ────────────────────────────────────────────────────── */
.badge{border-radius:20px;font-weight:500}
.badge.actief   {background:rgba(15,110,86,0.14); color:var(--green)}
.badge.inactief {background:rgba(185,28,28,0.14); color:var(--red)}
.badge.concept  {background:rgba(146,64,14,0.14); color:var(--amber)}
.badge.aflopend {background:rgba(146,64,14,0.14); color:var(--amber)}

/* ── Thema-knop ──────────────────────────────────────────────────────── */
.thema-knop{
  display:inline-flex;align-items:center;justify-content:center;
  width:30px;height:30px;padding:0;
  background:none;border:1px solid var(--border2);border-radius:var(--radius-sm);
  color:var(--muted2);cursor:pointer;
}
.thema-knop:hover{background:var(--bg4);color:var(--text)}
.thema-knop svg{width:15px;height:15px;stroke:currentColor;fill:none;stroke-width:2}