:root{
  --brand-900:#042831;
  --brand-800:#06343f;
  --brand-700:#07414f;
  --brand-600:#0a5567;
  --brand-500:#0f7184;
  --brand-300:#5ba6b4;
  --brand-100:#dceaed;
  --brand-50:#eef5f6;

  --accent:#0f7184;
  --accent-soft:#d7eaee;
  --signal:#d8772e;
  --signal-soft:#f8e7d6;
  --positive:#2f8f5b;
  --negative:#c0492f;

  --ink:#0f1c20;
  --ink-2:#3a4a4f;
  --muted:#64777c;
  --muted-2:#90a0a4;
  --line:#e0e7e9;
  --line-2:#eaeff0;
  --surface:#ffffff;
  --surface-2:#f6f8f9;
  --bg:#eef2f3;

  --radius:14px;
  --radius-sm:9px;
  --radius-lg:20px;
  --shadow-sm:0 1px 2px rgba(15,28,32,.06), 0 1px 1px rgba(15,28,32,.04);
  --shadow:0 4px 16px -4px rgba(15,28,32,.12), 0 2px 6px -2px rgba(15,28,32,.07);
  --shadow-lg:0 24px 60px -18px rgba(8,30,36,.30), 0 8px 24px -10px rgba(8,30,36,.16);

  --font:'Archivo', system-ui, sans-serif;
}

*{box-sizing:border-box;}
html,body{margin:0;padding:0;}
body{
  font-family:var(--font);
  background:var(--bg);
  color:var(--ink);
  -webkit-font-smoothing:antialiased;
  text-rendering:optimizeLegibility;
}
#app{min-height:100vh;}
.tnum{font-variant-numeric:tabular-nums;}
button{font-family:inherit;}
input,select,textarea{font-family:inherit;}
::selection{background:var(--brand-100);}

*::-webkit-scrollbar{width:10px;height:10px;}
*::-webkit-scrollbar-thumb{background:#cdd8da;border-radius:20px;border:2px solid transparent;background-clip:content-box;}
*::-webkit-scrollbar-thumb:hover{background:#b6c4c7;background-clip:content-box;}

@keyframes fadeUp{from{opacity:0;transform:translateY(8px);}to{opacity:1;transform:none;}}
@keyframes fadeIn{from{opacity:0;}to{opacity:1;}}
@keyframes scaleIn{from{opacity:0;transform:scale(.97) translateY(6px);}to{opacity:1;transform:none;}}
@keyframes growBar{from{transform:scaleY(0);}to{transform:scaleY(1);}}
@keyframes growX{from{transform:scaleX(0);}to{transform:scaleX(1);}}

.bar-grow{transform-origin:bottom;}
.hbar-grow{transform-origin:left;}
@media (prefers-reduced-motion: no-preference){
  .fade-up{animation:fadeUp .4s cubic-bezier(.2,.7,.3,1) both;}
  .fade-in{animation:fadeIn .4s ease both;}
  .scale-in{animation:scaleIn .28s cubic-bezier(.2,.8,.3,1) both;}
  .bar-grow{animation:growBar .6s cubic-bezier(.2,.7,.3,1) both;}
  .hbar-grow{animation:growX .7s cubic-bezier(.2,.7,.3,1) both;}
}

/* ============ App shell (legacy/src/App.tsx regels 239-258) ============ */
.sidebar{width:248px;flex-shrink:0;background:var(--surface);border-right:1px solid var(--line);
  display:flex;flex-direction:column;position:sticky;top:0;height:100vh;}
.drawer{width:262px;height:100vh;background:var(--surface);display:flex;flex-direction:column;box-shadow:var(--shadow-lg);}
.newbtn{width:100%;display:flex;align-items:center;justify-content:center;gap:9px;padding:11px;
  border-radius:var(--radius-sm);border:none;background:var(--brand-700);color:#fff;font-weight:600;
  font-size:14.5px;cursor:pointer;font-family:inherit;transition:background .15s;white-space:nowrap;}
.newbtn:hover{background:var(--brand-800);}
.navitem{width:100%;display:flex;align-items:center;gap:12px;padding:10px 12px;border-radius:var(--radius-sm);
  border:none;cursor:pointer;font-size:14.5px;font-family:inherit;text-align:left;transition:background .14s,color .14s;}
.navitem:hover{background:var(--surface-2);}
.navitem.active{background:var(--brand-50) !important;color:var(--brand-700) !important;font-weight:700 !important;}
.navitem .navdot{display:none;}
.navitem.active .navdot{display:inline-block;}
.hide-sm{display:inline;}
@media(max-width:860px){
  .sidebar{display:none;}
  .hamburger{display:grid !important;}
  .chart-toggle{display:none;}
}
@media(max-width:520px){
  .hide-sm{display:none;}
  .topbar-title{display:none !important;}
}

/* ============ Modal (legacy/src/components/ui.tsx regels 282-318) ============ */
.modal-overlay{
  position:fixed;inset:0;z-index:100;background:rgba(10,22,26,.45);
  backdrop-filter:blur(3px);display:flex;align-items:center;justify-content:center;
  padding:max(16px,env(safe-area-inset-top)) 16px max(16px,env(safe-area-inset-bottom));
  overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.modal-panel{
  background:var(--surface);border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);
  width:100%;max-width:min(var(--modal-max-w,560px),calc(100vw - 32px));
  max-height:min(90dvh,calc(100vh - 32px));overflow:hidden;display:flex;flex-direction:column;
  margin:auto;
}
.modal-header{
  display:flex;align-items:flex-start;justify-content:space-between;gap:16px;
  padding:22px 24px 18px;border-bottom:1px solid var(--line-2);flex-shrink:0;
}
.modal-close{
  border:none;background:var(--surface-2);width:34px;height:34px;border-radius:9px;
  cursor:pointer;display:grid;place-items:center;color:var(--muted);flex-shrink:0;
}
.modal-body{padding:22px 24px;display:flex;flex-direction:column;gap:16px;overflow-y:auto;flex:1;min-height:0;}
.modal-footer{
  display:flex;align-items:center;justify-content:space-between;gap:12px;
  padding:16px 24px;border-top:1px solid var(--line-2);background:var(--surface-2);flex-shrink:0;
}
.modal-footer-actions{display:flex;gap:10px;flex-wrap:wrap;justify-content:flex-end;}
@media(max-width:520px){
  .modal-overlay{align-items:flex-end;padding:0;}
  .modal-panel{
    max-width:100%;max-height:min(92dvh,calc(100vh - env(safe-area-inset-top)));
    border-bottom-left-radius:0;border-bottom-right-radius:0;
  }
  .modal-header,.modal-body,.modal-footer{padding-left:18px;padding-right:18px;}
  .modal-footer{flex-direction:column;align-items:stretch;}
  .modal-footer-actions{width:100%;flex-direction:column-reverse;}
  .modal-footer-actions button{width:100%;}
}

/* ============ Dashboard (legacy/src/screens/Dashboard.tsx regels 194-198) ============ */
.navbtn{width:36px;height:36px;border-radius:9px;border:1px solid var(--line);background:var(--surface);
  display:grid;place-items:center;color:var(--ink-2);cursor:pointer;transition:all .15s;}
.navbtn:hover{background:var(--surface-2);border-color:#cdd8da;}
@media(min-width:1000px){.dash-2col{grid-template-columns:1.5fr 1fr;}
  .dash-2col:last-of-type{grid-template-columns:1fr 1fr;}}

/* ============ Table row hover (Urenlijst.tsx 171-172 / Instellingen.tsx 188-189) ============ */
.row:hover{background:var(--brand-50) !important;}
.row:hover .editbtn{background:var(--surface);color:var(--brand-700);box-shadow:var(--shadow-sm);}

/* ============ KlantenProjecten.tsx regel 118 ============ */
.proj-row:hover{background:var(--surface);}

/* ============ RegistratieModal.tsx 193 / Instellingen.tsx 319 ============ */
@media(max-width:560px){.reg-grid{grid-template-columns:1fr 1fr !important;}}
@media(max-width:520px){.beheer-grid{grid-template-columns:1fr !important;}}

/* ============ Button hover states (vervangt React onMouseEnter, ui.tsx regels 107-111) ============ */
.btn-primary:hover{background:var(--brand-800);}
.btn-accent:hover{background:#0c5e6e;}
.btn-ghost:hover{background:var(--surface-2);border-color:#cdd8da;}
.btn-soft:hover{background:var(--brand-100);}
.btn-subtle:hover{background:var(--surface-2);color:var(--ink-2);}
.btn-danger:hover{background:#fbf0ed;}

/* ============ Input focus + base (inputStyle, ui.tsx regels 189-193) ============ */
.inp{
  width:100%;padding:11px 13px;font-size:14.5px;color:var(--ink);
  background:var(--surface);border:1.5px solid var(--line);border-radius:var(--radius-sm);
  outline:none;transition:border-color .15s, box-shadow .15s;
}
.inp:focus{border-color:var(--brand-500);box-shadow:0 0 0 3px var(--brand-50);}

/* ============ Card hover ============ */
.card-hover:hover{box-shadow:var(--shadow);transform:translateY(-2px);}