/* ============================================================
   VILLA OS — Design System
   Huisstijl: Brochure VILLA 2025 / Buitenhuis Villabouw
   Ink #231F20 · Mauve #A16995 · Blush #F3E6E0 · Linnen #F1ECE6
   ============================================================ */

:root {
  --ink: #231F20;
  --ink-zacht: #47403f;
  --ink-mist: #7d7472;
  --accent: #A16995;
  --accent-diep: #83507a;
  --accent-wash: #f4ecf2;
  --blush: #F3E6E0;
  --papier: #FAF8F5;
  --linnen: #F1ECE6;
  --wit: #ffffff;
  --lijn: #e6ded6;
  --lijn-zacht: #efe9e2;
  --donker: #1b1718;
  --donker-2: #262122;
  --ok: #3E7C4F;
  --ok-wash: #e9f2ec;
  --warn: #B07C24;
  --warn-wash: #f7efdf;
  --risico: #A4442E;
  --risico-wash: #f8e9e4;
  --info-wash: #ece9ef;
  --schaduw: 0 1px 2px rgba(35,31,32,.05), 0 4px 16px rgba(35,31,32,.06);
  --schaduw-zwaar: 0 4px 12px rgba(35,31,32,.10), 0 16px 48px rgba(35,31,32,.16);
  --radius: 14px;
  --radius-klein: 9px;
  --font-sans: "Helvetica Neue", "Segoe UI", Inter, Arial, sans-serif;
  --font-serif: "Didot", "Bodoni MT", "Playfair Display", Georgia, serif;
  --sidebar-b: 232px;
}

* { margin: 0; padding: 0; box-sizing: border-box; }
html { -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility; }
body {
  font-family: var(--font-sans);
  font-size: 14px; line-height: 1.55;
  color: var(--ink);
  background: var(--papier);
}
::selection { background: var(--accent); color: #fff; }
a { color: var(--accent-diep); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }
button { font: inherit; cursor: pointer; }
h1,h2,h3,h4 { font-weight: 600; line-height: 1.25; }

::-webkit-scrollbar { width: 10px; height: 10px; }
::-webkit-scrollbar-thumb { background: #d8cfc6; border-radius: 6px; border: 2px solid var(--papier); }
::-webkit-scrollbar-track { background: transparent; }

/* ---------- Typografie ---------- */
.display {
  font-family: var(--font-sans);
  font-weight: 200; letter-spacing: .14em; text-transform: uppercase;
}
.serif-accent { font-family: var(--font-serif); font-style: italic; font-weight: 400; color: var(--accent); letter-spacing: .01em; }
.klein { font-size: 12px; color: var(--ink-mist); }
.mono { font-variant-numeric: tabular-nums; }
.kop-label {
  font-size: 11px; font-weight: 700; letter-spacing: .12em; text-transform: uppercase;
  color: var(--ink-mist);
}

/* ---------- Shell ---------- */
.shell { display: flex; min-height: 100vh; }

.zijbalk {
  width: var(--sidebar-b); flex: 0 0 var(--sidebar-b);
  background: var(--donker) url("img/textuur-linnen.jpg") center/cover;
  background-blend-mode: multiply;
  color: #cfc6c0;
  display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.zijbalk-merk { padding: 28px 24px 20px; }
.zijbalk-merk .villa-woordmerk {
  font-weight: 100; font-size: 34px; letter-spacing: .32em; color: var(--blush);
  text-transform: uppercase; line-height: 1; margin-left: 2px;
}
.zijbalk-merk .villa-sub {
  font-family: var(--font-serif); font-style: italic; font-size: 13px;
  color: var(--accent); margin-top: 7px;
}
.zijbalk-os {
  display: inline-block; margin-top: 12px; padding: 3px 9px; border: 1px solid rgba(243,230,224,.28);
  border-radius: 99px; font-size: 10px; letter-spacing: .22em; color: var(--blush); text-transform: uppercase;
}
.zijbalk nav { flex: 1; padding: 10px 12px; overflow-y: auto; }
.zijbalk nav::-webkit-scrollbar-thumb { border-color: var(--donker); background:#4a4243; }
.nav-groep { margin: 14px 12px 6px; font-size: 10px; letter-spacing: .18em; text-transform: uppercase; color: #857a76; }
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 9px 12px; border-radius: 10px; color: #cfc6c0;
  font-size: 13.5px; cursor: pointer; border: none; background: none; width: 100%; text-align: left;
  transition: background .15s, color .15s;
}
.nav-item svg { width: 17px; height: 17px; flex: none; opacity: .75; }
.nav-item:hover { background: rgba(243,230,224,.08); color: #fff; text-decoration: none; }
.nav-item.actief { background: rgba(161,105,149,.28); color: #fff; }
.nav-item.actief svg { opacity: 1; }
.nav-item .nav-tel {
  margin-left: auto; background: rgba(243,230,224,.14); border-radius: 99px;
  font-size: 10.5px; padding: 1px 7px; color: var(--blush);
}
.zijbalk-voet { padding: 16px 24px 20px; border-top: 1px solid rgba(243,230,224,.12); }
.zijbalk-voet img { height: 40px; width: auto; opacity: .85; }

.hoofd { flex: 1; min-width: 0; display: flex; flex-direction: column; }

.topbalk {
  display: flex; align-items: center; gap: 18px;
  padding: 14px 32px; background: rgba(250,248,245,.92); backdrop-filter: blur(8px);
  border-bottom: 1px solid var(--lijn-zacht);
  position: sticky; top: 0; z-index: 40;
}
.topbalk h1 { font-size: 19px; font-weight: 600; letter-spacing: -.01em; }
.topbalk .breadcrumb { font-size: 12.5px; color: var(--ink-mist); }
.topbalk-rechts { margin-left: auto; display: flex; align-items: center; gap: 12px; }

.zoekveld { position: relative; }
.zoekveld input {
  width: 260px; padding: 8px 12px 8px 34px; border: 1px solid var(--lijn);
  border-radius: 99px; background: var(--wit); font: inherit; font-size: 13px; color: var(--ink);
  outline: none; transition: border .15s, box-shadow .15s;
}
.zoekveld input:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
.zoekveld svg { position: absolute; left: 12px; top: 9px; width: 15px; height: 15px; color: var(--ink-mist); }
.zoek-resultaten {
  position: absolute; top: 42px; left: 0; right: 0; background: var(--wit);
  border: 1px solid var(--lijn); border-radius: var(--radius-klein); box-shadow: var(--schaduw-zwaar);
  overflow: hidden; z-index: 60;
}
.zoek-resultaten button {
  display: block; width: 100%; text-align: left; padding: 9px 14px; border: 0; background: none; font-size: 13px;
}
.zoek-resultaten button:hover { background: var(--linnen); }

.ai-pil {
  display: inline-flex; align-items: center; gap: 7px; padding: 6px 13px;
  border-radius: 99px; font-size: 12px; font-weight: 600; border: 1px solid var(--lijn);
  background: var(--wit); color: var(--ink-zacht); cursor: pointer;
}
.ai-pil .stip { width: 7px; height: 7px; border-radius: 99px; background: var(--warn); }
.ai-pil.live .stip { background: var(--ok); }
.ai-pil:hover { border-color: var(--accent); }

.inhoud { flex: 1; padding: 28px 32px 60px; max-width: 1560px; width: 100%; }

/* ---------- Kaarten & layout ---------- */
.kaart {
  background: var(--wit); border: 1px solid var(--lijn-zacht);
  border-radius: var(--radius); box-shadow: var(--schaduw);
}
.kaart-kop {
  display: flex; align-items: center; gap: 10px;
  padding: 16px 20px 0;
}
.kaart-kop h3 { font-size: 15px; }
.kaart-kop .rechts { margin-left: auto; display: flex; gap: 8px; align-items: center; }
.kaart-body { padding: 16px 20px 20px; }
.kaart-donker {
  background: var(--donker) url("img/textuur-linnen.jpg") center/cover;
  background-blend-mode: multiply; color: var(--blush); border: none;
}
.rooster { display: grid; gap: 18px; }
.rooster-2 { grid-template-columns: 1fr 1fr; }
.rooster-3 { grid-template-columns: repeat(3, 1fr); }
.rooster-4 { grid-template-columns: repeat(4, 1fr); }
.kolommen { display: flex; gap: 18px; align-items: flex-start; }
.flex { display: flex; align-items: center; gap: 10px; }
.spacer { flex: 1; }

/* KPI / statistiek */
.stat { padding: 18px 20px; }
.stat .stat-label { font-size: 11.5px; font-weight: 700; letter-spacing: .1em; text-transform: uppercase; color: var(--ink-mist); }
.stat .stat-waarde { font-size: 30px; font-weight: 250; letter-spacing: -.01em; margin-top: 4px; font-variant-numeric: tabular-nums; }
.stat .stat-sub { font-size: 12px; color: var(--ink-mist); margin-top: 2px; }
.stat .stat-waarde .eenheid { font-size: 15px; color: var(--ink-mist); font-weight: 400; }

/* ---------- Knoppen ---------- */
.knop {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 9px 16px; border-radius: 10px; border: 1px solid var(--lijn);
  background: var(--wit); color: var(--ink); font-size: 13px; font-weight: 600;
  transition: all .15s; text-decoration: none !important; white-space: nowrap;
}
.knop svg { width: 15px; height: 15px; }
.knop:hover { border-color: var(--ink-mist); box-shadow: var(--schaduw); }
.knop-primair { background: var(--ink); border-color: var(--ink); color: #fff; }
.knop-primair:hover { background: #000; border-color: #000; }
.knop-accent { background: var(--accent); border-color: var(--accent); color: #fff; }
.knop-accent:hover { background: var(--accent-diep); border-color: var(--accent-diep); }
.knop-ghost { background: transparent; border-color: transparent; color: var(--ink-zacht); }
.knop-ghost:hover { background: var(--linnen); box-shadow: none; border-color: transparent; }
.knop-klein { padding: 5px 11px; font-size: 12px; border-radius: 8px; }
.knop[disabled] { opacity: .45; pointer-events: none; }

/* ---------- Badges & chips ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 6px; padding: 3px 10px;
  border-radius: 99px; font-size: 11.5px; font-weight: 600; white-space: nowrap;
}
.badge .stip { width: 6px; height: 6px; border-radius: 99px; background: currentColor; }
.badge-ok { background: var(--ok-wash); color: var(--ok); }
.badge-warn { background: var(--warn-wash); color: var(--warn); }
.badge-risico { background: var(--risico-wash); color: var(--risico); }
.badge-info { background: var(--info-wash); color: var(--ink-zacht); }
.badge-accent { background: var(--accent-wash); color: var(--accent-diep); }
.badge-neutraal { background: var(--linnen); color: var(--ink-mist); }

.fase-chip {
  display: inline-flex; align-items: center; gap: 7px; padding: 3px 11px 3px 5px;
  border-radius: 99px; background: var(--linnen); font-size: 11.5px; font-weight: 600; color: var(--ink-zacht);
}
.fase-chip .fase-nr {
  width: 18px; height: 18px; border-radius: 99px; background: var(--ink); color: var(--blush);
  display: inline-flex; align-items: center; justify-content: center; font-size: 10px; font-weight: 700;
}
.fase-chip.accent .fase-nr { background: var(--accent); color: #fff; }

.avatar {
  width: 28px; height: 28px; border-radius: 99px; background: var(--accent-wash); color: var(--accent-diep);
  display: inline-flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700;
  letter-spacing: .03em; flex: none;
}
.avatar.donker { background: var(--ink); color: var(--blush); }

.tag { display: inline-block; padding: 2px 9px; border-radius: 6px; background: var(--linnen); font-size: 11px; font-weight: 600; color: var(--ink-zacht); }

/* ---------- AI-paneel ---------- */
.ai-paneel {
  position: relative; border-radius: var(--radius);
  background: linear-gradient(#fff, #fff) padding-box,
              linear-gradient(120deg, var(--accent), #d9b8d0 45%, var(--ink)) border-box;
  border: 1.5px solid transparent; box-shadow: var(--schaduw);
}
.ai-paneel-kop { display: flex; align-items: center; gap: 10px; padding: 15px 18px 0; }
.ai-paneel-kop h4 { font-size: 14px; }
.ai-badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 2px 9px; border-radius: 99px;
  background: linear-gradient(120deg, var(--accent), var(--accent-diep)); color: #fff;
  font-size: 10px; font-weight: 800; letter-spacing: .1em;
}
.ai-badge svg { width: 11px; height: 11px; }
.ai-paneel-body { padding: 12px 18px 18px; }
.ai-paneel textarea, .ai-paneel .ai-invoer { width: 100%; }
.ai-resultaat {
  background: var(--papier); border: 1px solid var(--lijn-zacht); border-radius: var(--radius-klein);
  padding: 14px 16px; font-size: 13.5px; margin-top: 12px;
  white-space: normal; overflow-wrap: break-word;
}
.ai-resultaat h1,.ai-resultaat h2,.ai-resultaat h3 { font-size: 13.5px; margin: 12px 0 4px; }
.ai-resultaat h1:first-child,.ai-resultaat h2:first-child,.ai-resultaat h3:first-child { margin-top: 0; }
.ai-resultaat p { margin: 6px 0; }
.ai-resultaat ul, .ai-resultaat ol { margin: 6px 0 6px 18px; }
.ai-resultaat li { margin: 3px 0; }
.ai-resultaat table { border-collapse: collapse; width: 100%; margin: 8px 0; }
.ai-resultaat th, .ai-resultaat td { border: 1px solid var(--lijn); padding: 5px 9px; font-size: 12.5px; text-align: left; }
.ai-resultaat th { background: var(--linnen); }
.ai-demo-melding { font-size: 11px; color: var(--ink-mist); margin-top: 8px; display: flex; align-items: center; gap: 6px; }
.ai-demo-melding svg { width: 12px; height: 12px; }

@keyframes shimmer { 0% { background-position: -400px 0; } 100% { background-position: 400px 0; } }
.ai-laden { padding: 6px 0; }
.ai-laden .regel {
  height: 11px; border-radius: 6px; margin: 9px 0;
  background: linear-gradient(90deg, var(--linnen) 25%, #fdf9f5 50%, var(--linnen) 75%);
  background-size: 800px 100%; animation: shimmer 1.3s infinite linear;
}
.ai-laden .regel:nth-child(2) { width: 82%; } .ai-laden .regel:nth-child(3) { width: 64%; }
.ai-denkt { display: flex; align-items: center; gap: 9px; font-size: 12.5px; color: var(--accent-diep); font-weight: 600; margin-top: 10px; }
@keyframes pulse { 0%,100% { opacity: .35; transform: scale(.9);} 50% { opacity: 1; transform: scale(1.15);} }
.ai-denkt .p1,.ai-denkt .p2,.ai-denkt .p3 { width: 6px; height: 6px; border-radius: 99px; background: var(--accent); animation: pulse 1.2s infinite; }
.ai-denkt .p2 { animation-delay: .2s; } .ai-denkt .p3 { animation-delay: .4s; }

/* ---------- Tabellen & lijsten ---------- */
.tabel { width: 100%; border-collapse: collapse; }
.tabel th {
  text-align: left; font-size: 11px; font-weight: 700; letter-spacing: .09em; text-transform: uppercase;
  color: var(--ink-mist); padding: 8px 14px; border-bottom: 1px solid var(--lijn);
}
.tabel td { padding: 11px 14px; border-bottom: 1px solid var(--lijn-zacht); font-size: 13.5px; vertical-align: middle; }
.tabel tr:last-child td { border-bottom: none; }
.tabel tbody tr { transition: background .12s; }
.tabel tbody tr:hover { background: #fdfbf8; }
.tabel .num { text-align: right; font-variant-numeric: tabular-nums; }
.rij-klik { cursor: pointer; }

.lijst-rij {
  display: flex; align-items: center; gap: 12px; padding: 11px 4px;
  border-bottom: 1px solid var(--lijn-zacht);
}
.lijst-rij:last-child { border-bottom: none; }

/* ---------- Taken ---------- */
.taak-rij { display: flex; align-items: flex-start; gap: 11px; padding: 10px 4px; border-bottom: 1px solid var(--lijn-zacht); }
.taak-rij:last-child { border-bottom: none; }
.taak-check {
  width: 19px; height: 19px; border-radius: 6px; border: 1.5px solid #cfc5bb; background: var(--wit);
  flex: none; margin-top: 1px; cursor: pointer; display: inline-flex; align-items: center; justify-content: center;
  transition: all .15s; color: transparent;
}
.taak-check svg { width: 12px; height: 12px; }
.taak-check:hover { border-color: var(--accent); }
.taak-check.af { background: var(--ok); border-color: var(--ok); color: #fff; }
.taak-rij.af .taak-titel { text-decoration: line-through; color: var(--ink-mist); }
.taak-titel { font-weight: 550; font-size: 13.5px; }
.taak-meta { font-size: 12px; color: var(--ink-mist); display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin-top: 2px; }
.deadline-risico { color: var(--risico); font-weight: 650; }
.deadline-warn { color: var(--warn); font-weight: 650; }

/* ---------- Kanban / pipeline ---------- */
.kanban { display: flex; gap: 14px; overflow-x: auto; padding-bottom: 14px; align-items: flex-start; }
.kanban-kolom { flex: 0 0 272px; background: var(--linnen); border-radius: var(--radius); padding: 12px; }
.kanban-kop { display: flex; align-items: center; gap: 8px; padding: 2px 6px 10px; }
.kanban-kop h4 { font-size: 12.5px; letter-spacing: .06em; text-transform: uppercase; color: var(--ink-zacht); }
.kanban-kop .aantal { margin-left: auto; font-size: 11px; background: var(--wit); border-radius: 99px; padding: 1px 8px; color: var(--ink-mist); font-weight: 700; }
.kanban-kaart {
  background: var(--wit); border-radius: var(--radius-klein); padding: 13px 14px; margin-bottom: 10px;
  box-shadow: var(--schaduw); cursor: pointer; border: 1px solid transparent; transition: all .15s;
}
.kanban-kaart:hover { border-color: var(--accent); transform: translateY(-1px); }
.kanban-kaart h5 { font-size: 13.5px; font-weight: 650; }
.kanban-kaart .kk-meta { font-size: 12px; color: var(--ink-mist); margin-top: 3px; }
.kanban-kaart .kk-voet { display: flex; align-items: center; gap: 8px; margin-top: 10px; }

/* ---------- Fase-stepper ---------- */
.stepper { display: flex; align-items: flex-start; gap: 0; overflow-x: auto; padding: 6px 0 2px; }
.stap { flex: 1; min-width: 86px; text-align: center; position: relative; }
.stap::before {
  content: ""; position: absolute; top: 14px; left: -50%; right: 50%; height: 2px; background: var(--lijn);
}
.stap:first-child::before { display: none; }
.stap.af::before, .stap.actief::before { background: var(--accent); }
.stap-bol {
  width: 28px; height: 28px; border-radius: 99px; margin: 0 auto; position: relative; z-index: 1;
  background: var(--wit); border: 2px solid var(--lijn); color: var(--ink-mist);
  display: flex; align-items: center; justify-content: center; font-size: 11.5px; font-weight: 700;
}
.stap.af .stap-bol { background: var(--accent); border-color: var(--accent); color: #fff; }
.stap.actief .stap-bol { border-color: var(--accent); color: var(--accent-diep); box-shadow: 0 0 0 4px var(--accent-wash); }
.stap-naam { font-size: 10.5px; font-weight: 650; margin-top: 7px; color: var(--ink-mist); letter-spacing: .02em; }
.stap.actief .stap-naam { color: var(--accent-diep); }
.stap.af .stap-naam { color: var(--ink-zacht); }

/* ---------- Voortgang ---------- */
.voortgang { height: 7px; border-radius: 99px; background: var(--linnen); overflow: hidden; }
.voortgang > div { height: 100%; border-radius: 99px; background: linear-gradient(90deg, var(--accent), var(--accent-diep)); transition: width .4s; }

/* ---------- Tijdlijn ---------- */
.tijdlijn { position: relative; padding-left: 24px; }
.tijdlijn::before { content: ""; position: absolute; left: 7px; top: 6px; bottom: 6px; width: 2px; background: var(--lijn); }
.tijdlijn-item { position: relative; padding: 0 0 18px; }
.tijdlijn-item::before {
  content: ""; position: absolute; left: -23px; top: 4px; width: 12px; height: 12px; border-radius: 99px;
  background: var(--wit); border: 2.5px solid var(--accent);
}
.tijdlijn-item.gedempt::before { border-color: #cfc5bb; }
.tijdlijn-item .tl-datum { font-size: 11.5px; color: var(--ink-mist); font-weight: 600; }
.tijdlijn-item .tl-titel { font-weight: 600; font-size: 13.5px; margin-top: 1px; }
.tijdlijn-item .tl-tekst { font-size: 13px; color: var(--ink-zacht); margin-top: 2px; }

/* ---------- Formulieren ---------- */
label.veld { display: block; margin-bottom: 14px; }
label.veld > span { display: block; font-size: 12px; font-weight: 700; color: var(--ink-zacht); margin-bottom: 5px; letter-spacing: .02em; }
input[type=text], input[type=email], input[type=tel], input[type=number], input[type=date], select, textarea {
  width: 100%; padding: 9px 12px; border: 1px solid var(--lijn); border-radius: var(--radius-klein);
  font: inherit; font-size: 13.5px; color: var(--ink); background: var(--wit); outline: none;
  transition: border .15s, box-shadow .15s;
}
input:focus, select:focus, textarea:focus { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash); }
textarea { resize: vertical; min-height: 88px; }
.veld-rij { display: flex; gap: 12px; } .veld-rij > * { flex: 1; }

.schakel { display: inline-flex; background: var(--linnen); border-radius: 99px; padding: 3px; gap: 2px; }
.schakel button { border: 0; background: none; padding: 6px 15px; border-radius: 99px; font-size: 12.5px; font-weight: 600; color: var(--ink-mist); }
.schakel button.actief { background: var(--wit); color: var(--ink); box-shadow: var(--schaduw); }

/* ---------- Tabs ---------- */
.tabs { display: flex; gap: 2px; border-bottom: 1px solid var(--lijn); margin-bottom: 20px; overflow-x: auto; }
.tabs button {
  border: 0; background: none; padding: 10px 15px; font-size: 13.5px; font-weight: 600; color: var(--ink-mist);
  border-bottom: 2px solid transparent; margin-bottom: -1px; white-space: nowrap;
}
.tabs button:hover { color: var(--ink); }
.tabs button.actief { color: var(--accent-diep); border-bottom-color: var(--accent); }
.tabs button .tab-tel { background: var(--linnen); border-radius: 99px; padding: 1px 7px; font-size: 10.5px; margin-left: 5px; }

/* ---------- Modal & toast ---------- */
.modal-achtergrond {
  position: fixed; inset: 0; background: rgba(27,23,24,.5); backdrop-filter: blur(3px);
  display: flex; align-items: flex-start; justify-content: center; padding: 7vh 20px 20px; z-index: 100;
  animation: fadein .18s;
}
@keyframes fadein { from { opacity: 0; } to { opacity: 1; } }
@keyframes omhoog { from { opacity: 0; transform: translateY(14px); } to { opacity: 1; transform: none; } }
.modal {
  background: var(--wit); border-radius: 18px; box-shadow: var(--schaduw-zwaar);
  width: 100%; max-width: 560px; max-height: 84vh; overflow-y: auto; animation: omhoog .22s;
}
.modal.breed { max-width: 860px; }
.modal-kop { display: flex; align-items: center; gap: 10px; padding: 20px 24px 0; }
.modal-kop h3 { font-size: 17px; }
.modal-kop .sluit { margin-left: auto; }
.modal-body { padding: 16px 24px 24px; }
.modal-voet { display: flex; justify-content: flex-end; gap: 10px; padding: 0 24px 22px; }

.toasts { position: fixed; bottom: 24px; right: 24px; z-index: 200; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--donker); color: var(--blush); padding: 12px 18px; border-radius: 12px;
  box-shadow: var(--schaduw-zwaar); font-size: 13px; font-weight: 550; display: flex; align-items: center; gap: 10px;
  animation: omhoog .25s; max-width: 380px;
}
.toast svg { width: 15px; height: 15px; flex: none; }
.toast.ok svg { color: #8fc79e; } .toast.fout svg { color: #e0937e; }

/* ---------- Leeg / signalering ---------- */
.leeg { text-align: center; padding: 42px 20px; color: var(--ink-mist); }
.leeg svg { width: 34px; height: 34px; margin: 0 auto 10px; opacity: .5; }
.leeg h4 { color: var(--ink-zacht); font-size: 14px; margin-bottom: 3px; }
.leeg p { font-size: 12.5px; max-width: 340px; margin: 0 auto; }

.signaal {
  display: flex; gap: 12px; padding: 13px 16px; border-radius: var(--radius-klein);
  font-size: 13px; align-items: flex-start; margin-bottom: 10px;
}
.signaal svg { width: 16px; height: 16px; flex: none; margin-top: 1px; }
.signaal-risico { background: var(--risico-wash); color: #7c3322; }
.signaal-warn { background: var(--warn-wash); color: #7c5717; }
.signaal-info { background: var(--info-wash); color: var(--ink-zacht); }
.signaal-ok { background: var(--ok-wash); color: #2c5b3a; }
.signaal b { font-weight: 700; }

/* ---------- Villakaarten (configurator) ---------- */
.villa-kaart {
  border-radius: var(--radius); overflow: hidden; background: var(--wit); border: 1.5px solid var(--lijn-zacht);
  cursor: pointer; transition: all .18s; position: relative;
}
.villa-kaart:hover { transform: translateY(-2px); box-shadow: var(--schaduw-zwaar); }
.villa-kaart.gekozen { border-color: var(--accent); box-shadow: 0 0 0 3px var(--accent-wash), var(--schaduw); }
.villa-kaart img { height: 150px; width: 100%; object-fit: cover; }
.villa-kaart .vk-body { padding: 13px 15px 15px; }
.villa-kaart .vk-naam { font-weight: 200; font-size: 19px; letter-spacing: .16em; text-transform: uppercase; }
.villa-kaart .vk-stijl { font-family: var(--font-serif); font-style: italic; color: var(--accent); font-size: 13px; margin-top: 1px; }
.villa-kaart .vk-specs { display: flex; gap: 12px; margin-top: 9px; font-size: 11.5px; color: var(--ink-mist); flex-wrap: wrap; }
.villa-kaart .vk-prijs { margin-top: 9px; font-size: 15px; font-weight: 650; }
.villa-kaart .vk-vink {
  position: absolute; top: 10px; right: 10px; width: 26px; height: 26px; border-radius: 99px;
  background: var(--accent); color: #fff; display: none; align-items: center; justify-content: center;
}
.villa-kaart .vk-vink svg { width: 14px; height: 14px; }
.villa-kaart.gekozen .vk-vink { display: flex; }

/* Optieregels */
.optie-rij {
  display: flex; align-items: center; gap: 12px; padding: 11px 14px; border: 1px solid var(--lijn);
  border-radius: var(--radius-klein); margin-bottom: 9px; cursor: pointer; background: var(--wit); transition: all .14s;
}
.optie-rij:hover { border-color: var(--ink-mist); }
.optie-rij.gekozen { border-color: var(--accent); background: #fdf9fc; }
.optie-rij .optie-prijs { margin-left: auto; font-weight: 650; font-variant-numeric: tabular-nums; white-space: nowrap; }

/* ---------- Cockpit & werkstroom ---------- */
.cockpit-rooster { grid-template-columns: 3fr 2fr; align-items: start; }
@media (max-width: 1180px) { .cockpit-rooster { grid-template-columns: 1fr; } }

.actie-kaart {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 14px; margin-bottom: 9px; cursor: pointer;
  background: var(--papier); border: 1px solid var(--lijn-zacht); border-left: 3px solid var(--lijn);
  border-radius: var(--radius-klein); transition: all .15s;
}
.actie-kaart:hover { border-color: var(--accent); box-shadow: var(--schaduw); transform: translateY(-1px); }
.actie-kaart .actie-titel { font-weight: 600; font-size: 13.5px; }
.actie-kaart .actie-icoon {
  width: 32px; height: 32px; border-radius: 9px; background: var(--linnen); color: var(--ink-zacht);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.actie-kaart.urgentie-0 { border-left-color: var(--risico); }
.actie-kaart.urgentie-0 .actie-icoon { background: var(--risico-wash); color: var(--risico); }
.actie-kaart.urgentie-1 { border-left-color: var(--warn); }
.actie-kaart.urgentie-1 .actie-icoon { background: var(--warn-wash); color: var(--warn); }
.actie-kaart.urgentie-2 { border-left-color: var(--accent); }
.actie-kaart.urgentie-2 .actie-icoon { background: var(--accent-wash); color: var(--accent-diep); }
.actie-kaart.urgentie-3 { border-left-color: var(--lijn); }
.actie-kaart .ai-badge { flex: none; }

.project-mini { padding: 11px 4px; border-bottom: 1px solid var(--lijn-zacht); cursor: pointer; }
.project-mini:last-child { border-bottom: none; }
.project-mini:hover b { color: var(--accent-diep); }
.project-mini-actie {
  display: flex; align-items: center; gap: 7px; margin-top: 7px; margin-left: 38px;
  font-size: 12px; color: var(--ink-mist);
}
.project-mini-actie svg { flex: none; }
.project-mini-actie span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.project-mini-actie.urgent { color: var(--warn); font-weight: 600; }
.project-mini-actie.kritiek { color: var(--risico); font-weight: 650; }
.project-mini-actie.ok { color: var(--ok); }

.nu-aan-zet {
  display: flex; align-items: center; gap: 14px; padding: 14px 18px;
  border-radius: var(--radius);
  background: linear-gradient(120deg, #fdf7fb, var(--wit) 60%);
  border: 1.5px solid var(--accent); box-shadow: var(--schaduw);
}
.nu-aan-zet > svg { width: 20px; height: 20px; color: var(--accent-diep); flex: none; }
.nu-aan-zet .naz-label { font-size: 10.5px; font-weight: 800; letter-spacing: .14em; text-transform: uppercase; color: var(--accent-diep); }
.nu-aan-zet .naz-titel { font-weight: 650; font-size: 14.5px; margin: 1px 0; }
.nu-aan-zet.urgentie-0 { border-color: var(--risico); background: linear-gradient(120deg, var(--risico-wash), var(--wit) 60%); }
.nu-aan-zet.urgentie-0 > svg, .nu-aan-zet.urgentie-0 .naz-label { color: var(--risico); }
.nu-aan-zet.klaar { border-color: var(--ok); background: linear-gradient(120deg, var(--ok-wash), var(--wit) 60%); }
.nu-aan-zet.klaar > svg { color: var(--ok); }

.ws-kop { display: flex; align-items: center; gap: 14px; margin-bottom: 14px; padding-bottom: 12px; border-bottom: 1px solid var(--lijn-zacht); }

/* ---------- Gantt: gemeten werkelijkheid naast de planning ---------- */
/* De spookbalk toont de oorspronkelijke planning; de volle balk wat er echt gebeurde. */
.gantt-balk.baseline {
  height: 5px; background: var(--lijn); border-radius: 99px;
  top: calc(50% + 11px); opacity: .9; z-index: 0;
}
.gantt-balk.gereed { background: var(--ok); }
.gantt-balk.lopend {
  background: var(--accent);
  box-shadow: 0 0 0 2px var(--wit), 0 0 0 4px var(--accent-wash);
}
.gantt-naam .meting { display: inline-flex; vertical-align: middle; margin-left: 5px; }
.gantt-actie { width: 92px; flex: none; display: flex; justify-content: flex-end; }
.gantt-actie .knop { padding: 3px 9px; font-size: 11.5px; }

/* ---------- Kengetallen (grafieken) ---------- */
.kg-legenda {
  display: flex; gap: 18px; flex-wrap: wrap; align-items: center;
  margin-top: 12px; font-size: 11.5px; color: var(--ink-zacht);
}
.kg-legenda span { display: inline-flex; align-items: center; gap: 7px; }
.kg-legenda i { width: 14px; height: 9px; border-radius: 3px; display: inline-block; flex: none; }
.kg-legenda i.kg-lijn { height: 2px; border-radius: 0; background: var(--ink); opacity: .55; }
.kg-legenda .klein { color: var(--ink-mist); }

/* ---------- Documenten & tekeningen ---------- */
.doc-icoon {
  width: 36px; height: 36px; border-radius: 9px; background: var(--linnen); color: var(--ink-zacht);
  display: inline-flex; align-items: center; justify-content: center; flex: none;
}
.doc-icoon svg { width: 17px; height: 17px; }
.versie-tag { font-size: 10.5px; font-weight: 800; background: var(--ink); color: var(--blush); padding: 2px 7px; border-radius: 6px; letter-spacing: .05em; }

/* ---------- Foto's ---------- */
.foto-rooster { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.foto-rooster img { border-radius: 10px; aspect-ratio: 4/3; object-fit: cover; width: 100%; }

/* ---------- Bouwplanning gantt ---------- */
.gantt { position: relative; overflow-x: auto; }
.gantt-kop { position: sticky; top: 0; z-index: 3; height: 22px; }
.gantt-maand { position: absolute; font-size: 10.5px; text-transform: uppercase; letter-spacing: .06em; color: var(--ink-mist); }
.gantt-rij { display: flex; align-items: center; gap: 14px; padding: 7px 0; border-bottom: 1px solid var(--lijn-zacht); }
.gantt-rij:hover { background: #fdfbf8; }
.gantt-naam { width: 250px; flex: none; min-width: 0; font-size: 13px; }
.gantt-naam.kritiek { color: var(--ink); font-weight: 650; }
.gantt-naam .gantt-sub { color: var(--ink-mist); font-size: 11px; display: flex; gap: 6px; align-items: center; }
.gantt-spoor { flex: 1; position: relative; height: 26px; }
.gantt-balk { position: absolute; top: 50%; transform: translateY(-50%); height: 13px; border-radius: 99px; background: var(--accent); min-width: 4px; cursor: default; transition: all .2s; }
.gantt-balk:hover { filter: brightness(.92); }
.gantt-balk.kritiek { background: var(--ink); }
.gantt-balk.risico { background: var(--risico); box-shadow: 0 0 0 2px var(--risico-wash); }
.gantt-balk.geblokkeerd { background: repeating-linear-gradient(45deg, var(--warn) 0 5px, #e8c88a 5px 10px); }
.gantt-balk.mijlpaal { width: 13px !important; height: 13px; border-radius: 3px; transform: translateY(-50%) rotate(45deg); background: var(--ink); }
/* Gemeten werkelijkheid — wint van de prognosekleuren */
.gantt-balk.gereed { background: var(--ok); }
.gantt-balk.mijlpaal.gereed { background: var(--ok); }
.gantt-balk.lopend { background: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash); animation: gantt-puls 1.8s ease-in-out infinite; }
.gantt-balk.mijlpaal.lopend { background: var(--accent); }
/* Spookbalk — de oorspronkelijke (ongestoorde) planning */
.gantt-balk.baseline { background: transparent; border: 1.5px dashed var(--ink-mist); opacity: .5; z-index: 0; }
@keyframes gantt-puls { 0%, 100% { box-shadow: 0 0 0 2px var(--accent-wash); } 50% { box-shadow: 0 0 0 4px var(--accent-wash); } }
.gantt-legenda i.baseline { background: transparent; border: 1.5px dashed var(--ink-mist); }
.gantt-legenda i.lopend { background: var(--accent); box-shadow: 0 0 0 2px var(--accent-wash); }
.gantt-vandaag { position: absolute; top: -6px; bottom: -6px; width: 2px; background: var(--accent); opacity: .55; z-index: 2; }
.gantt-vandaag::before { content: "vandaag"; position: absolute; top: -12px; left: 0; font-size: 9px; color: var(--accent-diep); transform: translateX(-50%); background: #fff; padding: 0 3px; }
.gantt-maandlijn { position: absolute; top: 0; bottom: 0; width: 1px; background: var(--lijn-zacht); }
.gantt-legenda { display: flex; gap: 16px; margin-top: 12px; font-size: 11.5px; color: var(--ink-mist); flex-wrap: wrap; }
.gantt-legenda span { display: inline-flex; align-items: center; gap: 6px; }
.gantt-legenda i { width: 12px; height: 8px; border-radius: 99px; display: inline-block; }
.bp-mijlpaal { font-family: var(--font-serif); font-style: italic; color: var(--accent-diep); font-size: 14.5px; }
.weer-icoon { width: 12px; height: 12px; color: var(--ink-mist); vertical-align: middle; }
.actie-kaart .actie-icoon svg { width: 16px; height: 16px; }
@media (max-width: 900px) { .gantt-naam { width: 150px; } }

/* ---------- Print (offertes e.d.) ---------- */
@media print {
  .zijbalk, .topbalk, .knop, .tabs, .toasts, .geen-print { display: none !important; }
  .inhoud { padding: 0; }
  body { background: #fff; }
  .kaart { border: none; box-shadow: none; }
}

/* ---------- Responsief ---------- */
@media (max-width: 1180px) {
  .rooster-4 { grid-template-columns: 1fr 1fr; }
  .rooster-3 { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 900px) {
  .zijbalk { width: 66px; flex-basis: 66px; }
  .zijbalk-merk { padding: 18px 10px; text-align: center; }
  .zijbalk-merk .villa-woordmerk { font-size: 15px; letter-spacing: .18em; }
  .zijbalk-merk .villa-sub, .zijbalk-os, .nav-groep, .nav-item span, .zijbalk-voet { display: none; }
  .nav-item { justify-content: center; }
  .inhoud { padding: 20px 16px 40px; }
  .topbalk { padding: 12px 16px; }
  .zoekveld input { width: 150px; }
  .rooster-2, .rooster-3, .rooster-4 { grid-template-columns: 1fr; }
  .kolommen { flex-direction: column; }
}

/* ---------- Oplevermodule ---------- */
.opl-nr {
  flex: none; display: inline-flex; align-items: center; justify-content: center;
  min-width: 34px; height: 24px; padding: 0 7px; border-radius: 7px;
  background: var(--ink); color: var(--blush); font-size: 12px; font-weight: 700;
  letter-spacing: .04em;
}
.opl-thumb {
  flex: none; width: 52px; height: 52px; object-fit: cover; border-radius: 9px;
  border: 1px solid var(--lijn); cursor: zoom-in;
}

/* ---------- Teamomgeving: inlogscherm (servermodus) ---------- */
.server-login {
  position: fixed; inset: 0; z-index: 400; display: flex; align-items: center; justify-content: center;
  background: radial-gradient(ellipse at 30% 20%, #3a3134, var(--ink) 70%);
}
.server-login-kaart {
  width: min(400px, 92vw); background: var(--papier); border-radius: 18px;
  padding: 40px 38px; box-shadow: 0 30px 80px rgba(0,0,0,.45);
}
.server-login-kaart .villa-woordmerk { color: var(--ink) !important; }
.server-login-kaart .veld { margin-bottom: 14px; }
.server-login-fout { min-height: 20px; color: var(--risico); font-size: 13.5px; margin: 2px 0 10px; }
.server-wie, button.server-wie {
  font-size: 12.5px; color: var(--ink-mist); background: var(--linnen);
  border-radius: 99px; padding: 6px 13px; white-space: nowrap;
  border: 0; cursor: pointer; font-family: inherit;
}
button.server-wie:hover { color: var(--ink); }