/* THEMA */
:root{
  --bg:#0b0d10; --panel:#12161c; --muted:#596273; --text:#e8edf3;
  --accent:#66d9a3; --bad:#ff6b6b; --good:#60d394; --line:#1e2430;
  --input-bg:#0f1319; --btn-bg:#1b222d; --btn-border:#2a3342; --thead:#151a22;
}
html[data-theme="light"]{
  --bg:#f5f7fb; --panel:#ffffff; --muted:#5e6b7f; --text:#101418;
  --accent:#0f9d6a; --bad:#d62828; --good:#22863a; --line:#e3e8f0;
  --input-bg:#f7f9fc; --btn-bg:#ffffff; --btn-border:#d9e1ec; --thead:#eef3f9;
}

*{box-sizing:border-box}
body{margin:0;background:var(--bg);color:var(--text);font:14px/1.5 "Inter",system-ui,Segoe UI,Roboto,Arial}
.container{max-width:1000px;margin:24px auto;padding:0 16px}

/* Koppen / kaarten */
h1{font-size:22px;margin:20px 0 12px;display:flex;align-items:center;gap:10px;flex-wrap:wrap}
h2{font-size:16px;margin:18px 0 8px;color:var(--muted)}
.summary{display:grid;grid-template-columns:repeat(3,1fr);gap:12px;margin:14px 0 18px}
.card{background:var(--panel);border:1px solid var(--line);border-radius:14px;padding:14px}
.card .label{color:var(--muted);font-size:12px}
.card .value{font-size:20px;font-weight:600;margin-top:4px}
.card.in .value{color:var(--good)} 
.card.out .value{color:var(--bad)} 
.card.saldo .value{color:var(--accent)}

/* Altijd één kolom */
.grid{display:grid;grid-template-columns:1fr;gap:24px}

/* Tabellen */
.table{width:100%;border-collapse:separate;border-spacing:0 8px}
th,td{padding:10px;border-top:1px solid var(--line);border-bottom:1px solid var(--line);background:var(--panel);vertical-align:middle}
th:first-child, td:first-child{border-left:1px solid var(--line);border-top-left-radius:12px;border-bottom-left-radius:12px}
th:last-child, td:last-child{border-right:1px solid var(--line);border-top-right-radius:12px;border-bottom-right-radius:12px}
th{font-weight:600;color:var(--muted);text-align:left;background:var(--thead);padding:12px 10px}

td .small{font-size:12px;color:var(--muted)}
input[type="text"], input[type="number"], select{
  width:100%;padding:10px;border:1px solid var(--line);border-radius:10px;background:var(--input-bg);color:var(--text);outline:none
}
input[type="number"]::-webkit-outer-spin-button,input[type="number"]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}
input[type="number"]{appearance:textfield}

/* Acties */
.actions{display:flex;gap:8px;flex-wrap:wrap;justify-content:flex-end}
button{background:var(--btn-bg);border:1px solid var(--btn-border);color:var(--text);padding:10px 14px;border-radius:10px;cursor:pointer}
button.primary{background:linear-gradient(180deg, rgba(46,150,110,.9), rgba(26,98,74,.95));border-color:#1a4d3b;color:#fff}
button.danger{background:#3a1f23;border-color:#5a2b31;color:#fff}
tfoot td{font-weight:600}
.badge{display:inline-block;padding:2px 8px;border-radius:999px;background:var(--input-bg);color:var(--muted);border:1px solid var(--line);font-size:12px}
.row-total{white-space:nowrap;font-variant-numeric:tabular-nums}
footer{margin:18px 0 8px;color:var(--muted);font-size:12px}
.note{color:#9ab; font-size:12px}

/* Topbar */
.topbar {
  position: sticky; top: 0; z-index: 100;
  background: color-mix(in srgb, var(--bg) 92%, transparent);
  backdrop-filter: saturate(1.1) blur(6px);
  border-bottom: 1px solid var(--line);
  padding: 10px 0;
}
.topbar-inner {
  max-width: 1000px;
  margin: 0 auto;
  padding: 0 16px;
  display: grid;
  grid-template-columns: auto 1fr auto;
  align-items: center;
  gap: 12px;
}
.brand { font-weight:600; }
.topnav {display:flex;justify-content:center;gap:8px}
.top-actions {display:flex;align-items:center;gap:10px}
.top-actions .primary {padding:8px 16px}
.theme-toggle{display:inline-flex;align-items:center;gap:6px;padding:8px 12px;border-radius:999px}
.theme-toggle .emoji{font-size:16px}

/* Tabs */
.tab-btn{padding:8px 14px;border-radius:10px;border:1px solid var(--line);background:var(--panel);color:var(--text);cursor:pointer}
.tab-btn.active{outline:2px solid var(--accent);border-color:transparent}
.tab-panel{display:none}
.tab-panel.active{display:block}

/* Desktop kolommen */
.table th:nth-child(1), .table td:nth-child(1){ width:26% }
.table th:nth-child(2), .table td:nth-child(2){ width:14% }
.table th:nth-child(3), .table td:nth-child(3){ width:18% }
.table th:nth-child(4), .table td:nth-child(4){ width:12% }
.table th:nth-child(5), .table td:nth-child(5){ width:13% }
.table th:nth-child(6), .table td:nth-child(6){ width:13% }
.table th:nth-child(7), .table td:nth-child(7){ width:4%  }
.table td input[type="text"], .table td input[type="number"], .table td select{ min-height:44px; font-size:14px }

/* --- MOBIEL (<= 900px) --- */
@media (max-width:900px){
  .summary{grid-template-columns:1fr;gap:8px}
  input[type="text"],input[type="number"],select{padding:12px}
  button{padding:12px 14px}
  .badge{font-size:11px}
  thead{display:none}
  .table{border-spacing:0}
  .row-card{
    display:grid;
    grid-template-columns:1fr 1fr;
    grid-template-areas:
      "title   title"
      "amount  period"
      "xweeks  paydom"
      "monthly actions";
    gap:12px;
    background:var(--panel);
    border:1px solid var(--line);
    border-radius:12px;
    padding:12px;
  }
  .row-card td{background:transparent;border:0;padding:0}
  .row-card td[data-th]::before{
    content:attr(data-th); font-size:11px; color:var(--muted); margin:0 0 4px; display:block;
  }
  .row-card td:nth-child(1){ grid-area:title; }
  .row-card td:nth-child(2){ grid-area:amount; }
  .row-card td:nth-child(3){ grid-area:period; }
  .row-card td:nth-child(4){ grid-area:xweeks; }
  .row-card td:nth-child(5){ grid-area:paydom; }
  .row-card td:nth-child(6){ grid-area:monthly; font-weight:600; }
  .row-card td:nth-child(7){ grid-area:actions; display:flex; justify-content:flex-end; align-items:end; }
  .savebar{position:sticky;bottom:10px;display:flex;justify-content:flex-end;z-index:30}
  .savebar .btn-save{box-shadow:0 6px 18px rgba(0,0,0,.25)}
}