/* ============================================================
   NOVA — huisstijl van HOITINGA IT
   Concept: de rijzende zon. Nova opent met "Vandaag"; het beeldmerk
   is een nieuwe ster aan de horizon. Warm terracotta-oranje op
   warm antraciet, zandtinten voor rust, geen koude kleuren.
   ============================================================ */
:root{
  /* inkt */
  --no-ink: #241E17;          /* warm antraciet */
  --no-ink-soft: #5B4F42;
  --no-muted: #8C7B69;
  --no-faint: #B3A593;
  /* papier en vlakken */
  --no-paper: #FAF5EE;
  --no-surface: #FFFFFF;
  --no-surface-warm: #F4EDE2;
  --no-line: #E8DECE;
  --no-line-soft: #F1E9DC;
  /* merkkleur */
  --no-flame: #C2560E;       /* terracotta-oranje */
  --no-flame-deep: #A34409;
  --no-flame-soft: #FBE9DB;
  /* secundair warm */
  --no-ember: #8A5B33;       /* koffiebruin */
  --no-ember-soft: #F1E4D4;
  --no-sand: #D9C6A8;
  /* betekenis */
  --no-success: #5C7A4B;
  --no-success-soft: #EEF2E6;
  --no-danger: #B23A26;
  --no-danger-soft: #F9E7E2;
  --no-amber: #B45309;
  --no-amber-soft: #FBEFDB;
  /* rail (donker) */
  --no-rail: #241E17;
  --no-rail-line: #3A312A;
  --no-rail-text: #C6B5A0;
  --no-rail-text-soft: #8D7E6C;
  /* schaduw */
  --shadow: 0 12px 40px rgba(60,45,25,.14);
  --r:10px;
}
*{box-sizing:border-box;margin:0;padding:0}
body{background:var(--no-paper);color:var(--no-ink);
  font:15px/1.45 -apple-system,BlinkMacSystemFont,"Avenir Next","Segoe UI",Inter,Roboto,sans-serif;
  -webkit-font-smoothing:antialiased}
a{color:inherit;text-decoration:none}
::selection{background:var(--no-flame-soft);color:var(--no-flame-deep)}
h1{letter-spacing:-.02em}
.app{display:flex;min-height:100vh}

/* ---------- rail: donker antraciet, het merk draagt hier ---------- */
.rail{width:216px;background:var(--no-rail);border-right:1px solid var(--no-rail-line);
  display:flex;flex-direction:column;flex-shrink:0;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:11px;padding:18px 16px 15px;border-bottom:1px solid var(--no-rail-line)}
.brand__mark{width:36px;height:36px;border-radius:10px;flex-shrink:0;box-shadow:0 2px 8px rgba(0,0,0,.35)}
.brand__sub{font-size:.62rem;color:var(--no-rail-text-soft);letter-spacing:.22em;text-transform:uppercase;font-weight:700}
.brand__name{font-weight:800;font-size:1.06rem;line-height:1.05;color:#FAF5EE;letter-spacing:-.01em;margin-top:2px}
nav{padding:12px 10px;display:flex;flex-direction:column;gap:2px}
.nav__item{display:flex;align-items:center;gap:10px;padding:8px 10px;border-radius:9px;
  color:var(--no-rail-text);font-size:.88rem;font-weight:600;transition:background .14s ease,color .14s ease}
.nav__item:hover{background:rgba(250,245,238,.06);color:#FAF5EE}
.nav__item.active{background:rgba(194,86,14,.18);color:#F0A468;box-shadow:inset 3px 0 0 var(--no-flame)}
.nav__count{margin-left:auto;background:rgba(194,86,14,.22);color:#F0A468;font-size:.7rem;
  font-weight:750;padding:1px 7px;border-radius:99px}
.rail__foot{margin-top:auto;padding:14px 16px;border-top:1px solid var(--no-rail-line);
  font-size:.68rem;color:var(--no-rail-text-soft);line-height:1.6}
.rail__foot b{color:var(--no-rail-text);font-weight:700;letter-spacing:.08em}

/* ---------- topbar ---------- */
main{flex:1;min-width:0}
.topbar{display:flex;align-items:center;gap:14px;padding:14px 22px;border-bottom:1px solid var(--no-line);background:var(--no-surface)}
.topbar h1{font-size:1.05rem;font-weight:800;white-space:nowrap;color:var(--no-ink)}
.searchbar{flex:1;max-width:440px;display:flex;align-items:center;gap:8px;background:var(--no-paper);
  border:1px solid var(--no-line);border-radius:9px;padding:7px 12px;color:var(--no-muted);font-size:.84rem;cursor:pointer}
.searchbar:hover{border-color:var(--no-sand)}
.searchbar kbd{margin-left:auto;background:var(--no-surface);border:1px solid var(--no-line);border-radius:5px;font-size:.68rem;padding:1px 6px;color:var(--no-faint)}
.btn{border:1px solid var(--no-line);background:var(--no-surface);border-radius:9px;padding:8px 14px;
  font-size:.85rem;font-weight:650;color:var(--no-ink-soft);cursor:pointer;white-space:nowrap;transition:border-color .14s ease,background .14s ease}
.btn:hover{border-color:var(--no-flame);color:var(--no-flame-deep)}
.btn.primary{background:var(--no-flame);border-color:var(--no-flame);color:#FFF9F2}
.btn.primary:hover{background:var(--no-flame-deep);border-color:var(--no-flame-deep);color:#FFF9F2}
.view{padding:18px 22px 40px;max-width:1200px}
.greet{font-size:.84rem;color:var(--no-muted);margin-bottom:14px}
.greet strong{color:var(--no-ink)}

/* ---------- vastleggen: het hart, warm benadrukt ---------- */
.capture{background:var(--no-surface);border:1px solid var(--no-line);border-radius:13px;padding:12px 14px;margin-bottom:16px;
  transition:border-color .15s ease,box-shadow .15s ease}
.capture:focus-within{border-color:var(--no-flame);box-shadow:0 0 0 3px var(--no-flame-soft)}
.capture__label{font-size:.68rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--no-ember);margin-bottom:8px}
.capture__input{width:100%;border:none;outline:none;font-size:.95rem;background:transparent;color:var(--no-ink)}
.capture__input::placeholder{color:var(--no-faint)}
.capture__chips{display:flex;flex-wrap:wrap;gap:6px;margin-top:9px;min-height:20px}
.capture__hint{margin-top:8px;font-size:.72rem;color:var(--no-faint)}
.capture__hint b{color:var(--no-muted);font-weight:650}

/* ---------- chips ---------- */
.chip{display:inline-flex;align-items:center;gap:5px;font-size:.74rem;font-weight:650;padding:2px 9px;border-radius:99px;border:1px solid transparent;white-space:nowrap}
.chip.t{background:var(--no-flame-soft);color:var(--no-flame-deep);border-color:#F2CDAF}
.chip.p{background:var(--no-surface-warm);color:var(--no-ink-soft);border-color:var(--no-line)}
.chip.r{background:var(--no-ember-soft);color:var(--no-ember);border-color:#E4D0B8}
.chip.f{background:var(--no-amber-soft);color:var(--no-amber);border-color:#F2DDBB}

/* ---------- grid ---------- */
.todaygrid{display:grid;grid-template-columns:1fr 300px;gap:18px;align-items:start}
.two-col{display:grid;grid-template-columns:1.5fr 1fr;gap:16px;align-items:start}
.side .panel{background:var(--no-surface);border:1px solid var(--no-line);border-radius:13px;padding:13px 14px;margin-bottom:14px}
.panel{background:var(--no-surface);border:1px solid var(--no-line);border-radius:13px;padding:13px 14px;margin-bottom:14px}
.panel__title{font-size:.68rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--no-ember);margin-bottom:10px}

/* ---------- wachtrij ---------- */
.qcard{background:var(--no-surface);border:1px solid var(--no-line);border-radius:13px;margin-bottom:14px;overflow:hidden}
.qcard__head{display:flex;align-items:center;gap:8px;padding:10px 14px;border-bottom:1px solid var(--no-line);
  font-size:.72rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--no-muted)}
.qcard__head .count{margin-left:auto;font-size:.7rem;color:var(--no-faint);font-weight:650;letter-spacing:0;text-transform:none}
.dot{width:7px;height:7px;border-radius:99px;display:inline-block}
.dot.amber{background:var(--no-amber)} .dot.red{background:var(--no-danger)} .dot.teal{background:var(--no-flame)} .dot.green{background:var(--no-success)}
.row{display:flex;align-items:center;gap:11px;padding:10px 14px;border-top:1px solid var(--no-line-soft);cursor:pointer}
.row:hover{background:var(--no-paper)}
.row__icon{width:28px;height:28px;border-radius:8px;background:var(--no-surface-warm);border:1px solid var(--no-line);
  display:flex;align-items:center;justify-content:center;font-size:.75rem;font-weight:700;flex-shrink:0;color:var(--no-ink-soft)}
.row__icon.org{background:var(--no-flame-soft);color:var(--no-flame-deep);border-color:#F2CDAF}
.row__body{min-width:0;flex:1}
.row__title{font-size:.88rem;font-weight:650;line-height:1.25;color:var(--no-ink)}
.row__meta{display:flex;align-items:center;gap:7px;margin-top:3px;flex-wrap:wrap;color:var(--no-muted)}
.age{font-size:.72rem;font-weight:650;color:var(--no-muted)}
.age.amber{color:var(--no-amber)} .age.red{color:var(--no-danger)}
.row__actions{display:flex;gap:6px;opacity:0;transition:opacity .12s}
.row:hover .row__actions{opacity:1}
.minibtn{width:26px;height:26px;border-radius:7px;border:1px solid var(--no-line);background:var(--no-surface);cursor:pointer;
  font-size:.72rem;color:var(--no-muted);display:flex;align-items:center;justify-content:center;padding:0}
.minibtn:hover{border-color:var(--no-flame);color:var(--no-flame-deep)}

/* ---------- week ---------- */
.weekbars{display:flex;align-items:flex-end;gap:8px;height:64px}
.wb{flex:1;display:flex;flex-direction:column;align-items:center;gap:3px;justify-content:flex-end;height:100%}
.wb__bar{width:100%;border-radius:5px 5px 2px 2px;background:var(--no-flame)}
.wb__bar.off{background:var(--no-line)}
.wb__d{font-size:.64rem;color:var(--no-faint);font-weight:650}
.wb__v{font-size:.66rem;color:var(--no-muted);font-weight:650;font-variant-numeric:tabular-nums}

/* ---------- zijpanelen ---------- */
.prow{display:flex;align-items:center;gap:9px;padding:7px 0;border-top:1px solid var(--no-line-soft);cursor:pointer}
.prow:first-of-type{border-top:none}
.prow__icon{width:26px;height:26px;border-radius:7px;background:var(--no-flame-soft);color:var(--no-flame-deep);
  display:flex;align-items:center;justify-content:center;font-size:.68rem;font-weight:750;flex-shrink:0}
.prow__icon.amber{background:var(--no-amber-soft);color:var(--no-amber)}
.prow__icon.teal{background:var(--no-flame-soft);color:var(--no-flame-deep)}
.prow__t{font-size:.8rem;font-weight:600;line-height:1.25;color:var(--no-ink)}
.prow__m{font-size:.7rem;color:var(--no-muted)}
.prow__age{margin-left:auto;font-size:.7rem;font-weight:650;color:var(--no-amber)}

/* ---------- pijplijn ---------- */
.pipe{display:flex;flex-direction:column;gap:12px}
.tcard{background:var(--no-surface);border:1px solid var(--no-line);border-radius:13px;padding:14px 16px;display:flex;gap:16px;align-items:center}
.tcard__icon{width:40px;height:40px;border-radius:11px;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;
  background:var(--no-surface-warm);color:var(--no-ink-soft)}
.tcard__icon.offerte{background:var(--no-flame-soft);color:var(--no-flame-deep)}
.tcard__icon.opdracht,.tcard__icon.sollicitatie{background:var(--no-ember-soft);color:var(--no-ember)}
.tcard__body{flex:1;min-width:0}
.tcard__title{font-size:.92rem;font-weight:700;color:var(--no-ink)}
.tcard__sub{display:flex;gap:8px;margin-top:4px;align-items:center;flex-wrap:wrap}
.tcard__meta{font-size:.75rem;color:var(--no-muted)}
.steps{display:flex;gap:4px;align-items:center;margin-top:8px}
.step{width:24px;height:5px;border-radius:99px;background:var(--no-line)}
.step.done{background:var(--no-flame)} .step.cur{background:var(--no-amber)}
.tcard__next{flex-shrink:0;text-align:right;max-width:190px}
.tcard__next .l{font-size:.62rem;letter-spacing:.1em;text-transform:uppercase;color:var(--no-faint);font-weight:750}
.tcard__next .v{font-size:.78rem;color:var(--no-ink-soft);font-weight:600}
.tcard__acties{display:flex;gap:6px;margin-top:8px;justify-content:flex-end}
.none-chip{font-size:.7rem;color:var(--no-danger);background:var(--no-danger-soft);border:1px solid #EFC7BB;padding:2px 8px;border-radius:99px;font-weight:650}

/* ---------- relatie ---------- */
.sheet-head{background:var(--no-surface);border:1px solid var(--no-line);border-radius:13px;padding:16px 18px;margin-bottom:14px;display:flex;gap:14px;align-items:center}
.avatar{width:52px;height:52px;border-radius:13px;background:var(--no-ink);color:#FAF5EE;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.05rem;flex-shrink:0}
.avatar.org{background:var(--no-flame);color:#FFF9F2;font-size:1.3rem}
.sheet-head__name{font-size:1.15rem;font-weight:800;letter-spacing:-.01em}
.sheet-head__meta{display:flex;gap:8px;margin-top:5px;flex-wrap:wrap;align-items:center}
.sheet-head__actions{margin-left:auto;display:flex;gap:8px}
.tl{background:var(--no-surface);border:1px solid var(--no-line);border-radius:13px;overflow:hidden}
.tl__head{padding:10px 14px;font-size:.72rem;font-weight:750;letter-spacing:.1em;text-transform:uppercase;color:var(--no-muted);border-bottom:1px solid var(--no-line)}
.tl__item{display:flex;gap:11px;padding:10px 14px;border-top:1px solid var(--no-line-soft)}
.tl__item:first-of-type{border-top:none}
.tl__date{width:44px;flex-shrink:0;font-size:.68rem;color:var(--no-faint);font-weight:650;padding-top:2px;font-variant-numeric:tabular-nums}
.tl__t{font-size:.84rem;font-weight:600;line-height:1.3;color:var(--no-ink)}
.tl__m{margin-top:2px;font-size:.72rem;color:var(--no-muted)}
.kv{display:flex;justify-content:space-between;gap:10px;padding:7px 0;border-top:1px solid var(--no-line-soft);font-size:.8rem}
.kv:first-of-type{border-top:none}
.kv span:first-child{color:var(--no-muted)}
.kv span:last-child{font-weight:650;text-align:right}

/* ---------- project ---------- */
.faseblok{border-top:1px solid var(--no-line)}
.faseblok__head{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:10px 14px 2px;font-size:.88rem}
.faseblok__doel{padding:0 14px 4px;font-size:.76rem;color:var(--no-muted)}
.faseblok select{border:1px solid var(--no-line);border-radius:6px;padding:2px 6px;font-size:.78rem;background:var(--no-surface);color:var(--no-ink-soft)}
.ck{display:flex;align-items:center;gap:9px;padding:6px 14px;border-top:1px solid var(--no-line-soft);font-size:.84rem;color:var(--no-ink-soft)}
.ck .box{width:16px;height:16px;border-radius:5px;border:1.5px solid var(--no-line);flex-shrink:0}
.ck.done{color:var(--no-faint);text-decoration:line-through}
.ck.done .box{background:var(--no-success);border-color:var(--no-success)}
.ck.act .box{border-color:var(--no-amber);background:var(--no-amber-soft)}
.ck .tag{font-size:.62rem;font-weight:750;letter-spacing:.05em;text-transform:uppercase;color:var(--no-amber);margin-left:auto}
.ck form{margin-left:6px}
.inlineform{display:inline}

/* ---------- formulieren ---------- */
.stack{display:flex;flex-direction:column;gap:10px}
.field label{display:block;font-size:.7rem;font-weight:750;letter-spacing:.07em;text-transform:uppercase;color:var(--no-ember);margin-bottom:5px}
.field input,.field textarea,.field select{width:100%;background:var(--no-surface);border:1px solid var(--no-line);border-radius:9px;
  padding:8px 10px;font-size:.86rem;color:var(--no-ink);font-family:inherit;transition:border-color .14s ease,box-shadow .14s ease}
.field input:focus,.field textarea:focus{outline:none;border-color:var(--no-flame);box-shadow:0 0 0 3px var(--no-flame-soft)}
.inp{background:var(--no-surface);border:1px solid var(--no-line);border-radius:9px;padding:9px 11px;font-size:.88rem;color:var(--no-ink)}
.inp.soft{color:var(--no-muted)}
.note{font-size:.72rem;color:var(--no-faint);margin-top:10px;line-height:1.5}
.pd-empty-state{color:var(--no-faint);font-size:.78rem;padding:14px;text-align:center}
.gearchiveerd{color:var(--no-faint)}
.qcard--ingeklapt .qcard__head{border-bottom:none}
.kbd-hints{margin-top:6px;padding:12px 14px;background:var(--no-surface);border:1px solid var(--no-line);border-radius:13px;
  display:flex;gap:16px;font-size:.72rem;color:var(--no-muted);flex-wrap:wrap}
.kbd-hints kbd{background:var(--no-paper);border:1px solid var(--no-line);border-radius:5px;padding:1px 6px;font-size:.68rem;color:var(--no-ink-soft)}

/* ---------- overlays ---------- */
.overlay{position:fixed;inset:0;background:rgba(36,30,23,.4);display:none;align-items:flex-start;justify-content:flex-end;z-index:50}
.overlay.open{display:flex}
.panel-sl{background:var(--no-paper);width:480px;max-width:94vw;height:100%;box-shadow:var(--shadow);
  border-left:1px solid var(--no-line);display:flex;flex-direction:column;animation:slidein .16s ease}
@keyframes slidein{from{transform:translateX(24px);opacity:.5}to{transform:none;opacity:1}}
.panel-sl__head{display:flex;align-items:center;gap:10px;padding:16px 18px;border-bottom:1px solid var(--no-line);background:var(--no-surface)}
.panel-sl__head .t{font-size:.95rem;font-weight:750;color:var(--no-ink)}
.panel-sl__head .x{margin-left:auto;cursor:pointer;color:var(--no-muted);font-size:1.1rem;border:none;background:none}
.panel-sl__body{padding:16px 18px;overflow-y:auto}
.panel-sl__foot{margin-top:auto;padding:14px 18px;border-top:1px solid var(--no-line);background:var(--no-surface);display:flex;gap:8px}
.panel-zoek{background:var(--no-paper);width:560px;max-width:94vw;margin-top:12vh;height:auto;border-radius:14px;
  border:1px solid var(--no-line);box-shadow:var(--shadow);overflow:hidden}
.panel-zoek input{flex:1;border:none;outline:none;font-size:.95rem;background:transparent;padding:4px 0;color:var(--no-ink)}
.zoek-resultaat{max-height:50vh;overflow-y:auto;padding:8px}
.zoek-groep{font-size:.66rem;font-weight:750;letter-spacing:.12em;text-transform:uppercase;color:var(--no-faint);padding:8px 12px 2px}
.zoek-rij{display:flex;gap:9px;align-items:center;padding:7px 12px;border-radius:8px;cursor:pointer;font-size:.86rem}
.zoek-rij:hover{background:var(--no-surface-warm)}
.zoek-rij small{color:var(--no-muted)}

/* ---------- aanmelden ---------- */
.login-body{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-shell{width:340px;max-width:92vw;background:var(--no-surface);border:1px solid var(--no-line);
  border-radius:16px;padding:30px 28px 24px;box-shadow:var(--shadow);text-align:center}
.login-mark{width:48px;height:48px;border-radius:13px;box-shadow:0 4px 14px rgba(60,45,25,.25)}
.login-merk__sub{font-size:.64rem;color:var(--no-faint);letter-spacing:.24em;text-transform:uppercase;font-weight:750;margin-top:12px}
.login-merk__naam{font-size:1.5rem;font-weight:800;color:var(--no-ink);letter-spacing:-.02em;line-height:1.1;margin-top:2px}
.login-form{margin-top:22px;text-align:left}
.login-form .field{margin-bottom:14px}
.login-knop{width:100%;padding:10px 14px;font-size:.9rem}
.login-melding{margin-top:18px;background:var(--no-amber-soft);border:1px solid #F2DDBB;color:var(--no-amber);
  border-radius:9px;padding:9px 12px;font-size:.8rem;text-align:left}
.login-melding.fout{background:var(--no-danger-soft);border-color:#EFC7BB;color:var(--no-danger)}
.login-voet{margin-top:18px;font-size:.68rem;color:var(--no-faint)}
.rail-uitloggen{margin:0 10px 10px;display:block;width:calc(100% - 20px);padding:7px 10px;border-radius:8px;
  border:1px solid var(--no-rail-line);background:transparent;color:var(--no-rail-text-soft);
  font-size:.78rem;font-weight:650;cursor:pointer}
.rail-uitloggen:hover{border-color:var(--no-flame);color:#F0A468}