:root{
  --app-bg:#f5f7fb;
  --app-surface:#ffffff;
  --app-surface-2:#f8fafc;
  --app-text:#101828;
  --app-muted:#667085;
  --app-border:#e4e7ec;
  --app-border-strong:#cfd5df;
  --app-primary:#2563eb;
  --app-primary-dark:#1d4ed8;
  --app-radius:18px;
  --app-radius-sm:12px;
  --app-shadow:0 18px 45px rgba(16,24,40,.08);
  --app-shadow-soft:0 8px 22px rgba(16,24,40,.07);
  --board-metal:#d5dae0;
  --board-metal-dark:#aab2bd;
  --board-slot:#c8ced6;
}
*{box-sizing:border-box}
html{min-height:100%}
body{
  min-height:100vh;
  color:var(--app-text);
  background:
    radial-gradient(circle at top left,rgba(37,99,235,.12),transparent 34rem),
    radial-gradient(circle at 85% 10%,rgba(14,165,233,.10),transparent 32rem),
    linear-gradient(180deg,#fbfdff 0,#f5f7fb 45%,#eef2f7 100%);
  font-feature-settings:"ss01" on,"cv01" on;
}
a{transition:color .16s ease,background-color .16s ease,border-color .16s ease,box-shadow .16s ease,transform .16s ease}
.app-navbar{
  background:rgba(15,23,42,.88);
  backdrop-filter:blur(18px) saturate(150%);
  border-bottom:1px solid rgba(255,255,255,.12);
}
.navbar-brand{letter-spacing:-.025em}.brand-mark{display:inline-block;width:.9rem;height:.9rem;border-radius:999px;background:linear-gradient(135deg,#38bdf8,#2563eb);margin-right:.55rem;box-shadow:0 0 0 .28rem rgba(59,130,246,.18)}
.navbar .nav-link{border-radius:999px;padding:.48rem .8rem!important;margin:.1rem;color:rgba(255,255,255,.78)}
.navbar .nav-link:hover,.navbar .nav-link:focus{background:rgba(255,255,255,.10);color:#fff}.navbar .btn{border-radius:999px}
.app-main{padding:1.35rem clamp(1rem,2vw,2rem) 2rem}.auth-main{min-height:100vh;display:grid;place-items:center;padding:1rem}
.login-card,.panel,.card-soft,.table-card,.calendar-card{
  background:rgba(255,255,255,.86);
  border:1px solid rgba(228,231,236,.9);
  border-radius:var(--app-radius);
  box-shadow:var(--app-shadow);
  backdrop-filter:blur(16px);
}
.login-card{width:min(440px,94vw);padding:1.55rem}.panel{padding:1.2rem;margin-bottom:1rem}.card-soft{overflow:hidden}
.page-head{display:flex;align-items:end;justify-content:space-between;gap:1rem;margin-bottom:1.15rem}.page-head h2{font-weight:800;letter-spacing:-.04em;margin:0}.page-head p{margin:.35rem 0 0;color:var(--app-muted);max-width:78ch}.muted{color:var(--app-muted)}
.btn{--bs-btn-border-radius:999px;font-weight:700;letter-spacing:-.01em}.btn-primary{--bs-btn-bg:var(--app-primary);--bs-btn-border-color:var(--app-primary);--bs-btn-hover-bg:var(--app-primary-dark);--bs-btn-hover-border-color:var(--app-primary-dark);box-shadow:0 10px 22px rgba(37,99,235,.18)}.btn-outline-secondary,.btn-outline-primary,.btn-outline-light{--bs-btn-border-radius:999px}.btn-sm{font-weight:700}.form-control,.form-select{border-radius:12px;border-color:#d0d5dd}.form-control:focus,.form-select:focus{border-color:#93c5fd;box-shadow:0 0 0 .25rem rgba(37,99,235,.12)}
.actions,.form-actions,.search-form{display:flex;gap:.5rem;align-items:center;flex-wrap:wrap}.action-cell{min-width:178px;white-space:nowrap}.action-cell form{display:inline-flex;margin:0}.action-cell .btn{min-width:82px}.table-card .actions{justify-content:flex-start;flex-wrap:nowrap}.table-card tbody td:last-child{background:rgba(248,250,252,.55);border-left:1px solid rgba(228,231,236,.8)}
.row-link{font-weight:800;color:#1d4ed8;text-decoration:none}.row-link:hover{text-decoration:underline}.table-card{overflow:hidden}.table-card table{margin:0}.table{--bs-table-bg:transparent;--bs-table-striped-bg:#f8fafc}.table thead th{font-size:.78rem;text-transform:uppercase;letter-spacing:.06em;color:#667085;background:#f8fafc;border-bottom-color:#e4e7ec}.table td,.table th{vertical-align:middle;padding:.85rem .95rem}
.grid-form{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem}.grid-form label{font-weight:700;color:#344054}.grid-form input,.grid-form select,.grid-form textarea,.search-form input{display:block;width:100%;margin-top:.3rem}.span-2{grid-column:span 2}.form-actions{grid-column:1/-1}.stat-grid{display:grid;grid-template-columns:repeat(5,minmax(150px,1fr));gap:1rem}.stat-card{border:1px solid rgba(228,231,236,.9);border-radius:var(--app-radius);box-shadow:var(--app-shadow-soft);overflow:hidden}.stat-card .display-6{font-weight:850;letter-spacing:-.04em}.pill{display:inline-flex;align-items:center;gap:.45rem;background:#fff;border:1px solid var(--app-border);border-radius:999px;padding:.38rem .72rem;font-weight:700}.pill:before{content:"";width:10px;height:10px;border-radius:50%;background:var(--cat);display:inline-block}.chips{display:flex;gap:.5rem;flex-wrap:wrap}.chips span{background:#fff;border:1px solid var(--app-border);padding:.55rem .8rem;border-radius:999px;font-weight:700}.chips span:before{content:"";display:inline-block;width:10px;height:10px;border-radius:50%;background:var(--cat);margin-right:.45rem}
/* 2026 planbord: strak digitaal, maar herkenbaar als fysiek T-kaartbord */
.board-shell{
  position:relative;
  border-radius:28px;
  padding:1rem;
  background:
    linear-gradient(180deg,rgba(255,255,255,.72),rgba(255,255,255,.20)),
    linear-gradient(135deg,#eef2f7,#cfd8e3 52%,#aeb8c6);
  border:1px solid rgba(148,163,184,.62);
  box-shadow:0 28px 80px rgba(15,23,42,.18),inset 0 1px 0 rgba(255,255,255,.75);
  overflow:hidden;
}
.board-shell:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 14% 0,rgba(255,255,255,.80),transparent 18rem),radial-gradient(circle at 90% 20%,rgba(37,99,235,.10),transparent 24rem);pointer-events:none}.board-top,.board-bottom{position:relative;height:32px;border-radius:16px;background:linear-gradient(180deg,#f8fafc,#cbd5e1 72%,#94a3b8);border:1px solid rgba(100,116,139,.45);box-shadow:inset 0 1px 0 rgba(255,255,255,.85),0 5px 14px rgba(15,23,42,.10)}.board-top{margin:.15rem .15rem .7rem}.board-bottom{margin:.7rem .15rem .15rem}.board{position:relative;display:grid;grid-template-columns:repeat(5,minmax(240px,1fr));gap:.75rem;overflow:auto;padding:.15rem .1rem .25rem;scrollbar-width:thin}.column{position:relative;isolation:isolate;min-height:74vh;padding:.75rem .55rem 5.7rem;border-radius:18px;background:linear-gradient(90deg,rgba(100,116,139,.42) 0 1px,rgba(255,255,255,.26) 1px 8px,rgba(148,163,184,.42) 8px 10px,rgba(255,255,255,.20) 10px),linear-gradient(180deg,rgba(241,245,249,.92),rgba(203,213,225,.62));border:1px solid rgba(100,116,139,.38);box-shadow:inset 0 1px 0 rgba(255,255,255,.65),inset 0 0 0 1px rgba(255,255,255,.16)}.column:before{content:"";position:absolute;z-index:-1;inset:1rem .72rem 5.9rem;background:repeating-linear-gradient(to bottom,rgba(255,255,255,.62) 0 2px,rgba(71,85,105,.22) 2px 3px,transparent 3px 23px);border-radius:12px;box-shadow:inset 0 0 0 1px rgba(100,116,139,.18)}.column header{position:absolute;left:.55rem;right:.55rem;bottom:.55rem;z-index:3;min-height:74px;display:grid;place-items:center;background:linear-gradient(180deg,#fff,#f8fafc);border:1px solid rgba(100,116,139,.36);border-top:12px solid var(--cat);border-radius:16px;box-shadow:0 14px 28px rgba(15,23,42,.17),inset 0 1px 0 rgba(255,255,255,.85);padding:.65rem .6rem;text-align:center}.column header h3{font-size:.98rem;margin:0;font-weight:850;letter-spacing:-.025em}.column header b{display:inline-flex;align-items:center;justify-content:center;min-width:1.75rem;height:1.75rem;margin-top:.35rem;border:1px solid #d0d5dd;border-radius:10px;background:#fff;color:#475467;font-size:.78rem;box-shadow:0 2px 8px rgba(15,23,42,.06)}.dropzone{position:relative;z-index:2;min-height:64vh;display:grid;align-content:start;gap:.36rem;padding:.55rem .1rem}.tcard{position:relative;border:1px solid rgba(15,23,42,.13);border-radius:14px;background:linear-gradient(180deg,color-mix(in srgb,var(--cat) 82%,#fff),color-mix(in srgb,var(--cat) 96%,#111 4%));min-height:70px;padding:.62rem .68rem;color:#0b1220;box-shadow:inset 0 1px 0 rgba(255,255,255,.55),0 10px 18px rgba(15,23,42,.16);cursor:grab;transition:transform .14s ease,box-shadow .14s ease,filter .14s ease}.tcard:before{content:"";position:absolute;inset:0;border-radius:14px;background:linear-gradient(90deg,rgba(255,255,255,.28),transparent 42%);pointer-events:none}.tcard:hover{transform:translateY(-2px) scale(1.006);box-shadow:inset 0 1px 0 rgba(255,255,255,.60),0 18px 28px rgba(15,23,42,.22);filter:saturate(1.04)}.tcard.dragging{opacity:.42;transform:rotate(1deg) scale(.98)}.tcard strong{position:relative;display:block;font-size:.94rem;font-weight:850;line-height:1.12;letter-spacing:-.018em;padding-right:4.55rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.tcard small,.tcard em{position:relative;display:block;font-size:.76rem;color:rgba(15,23,42,.72);font-style:normal}.tcard-meta{position:relative;display:flex;gap:.25rem;flex-wrap:wrap;margin:.35rem 0 .25rem}.tcard-meta span{background:rgba(255,255,255,.68);border:1px solid rgba(255,255,255,.42);border-radius:999px;padding:.12rem .42rem;font-size:.72rem;font-weight:800;box-shadow:0 1px 3px rgba(15,23,42,.06)}.card-edit{position:absolute;z-index:4;top:.45rem;right:.45rem;font-size:.68rem;text-decoration:none;background:rgba(255,255,255,.78);color:#1f2937;border:1px solid rgba(15,23,42,.12);border-radius:999px;padding:.18rem .45rem;opacity:.30;backdrop-filter:blur(8px);font-weight:850}.tcard:hover .card-edit,.card-edit:focus{opacity:1;color:#111827;box-shadow:0 5px 12px rgba(15,23,42,.12)}
/* Kalender */
.calendar-card{overflow:hidden}.calendar-toolbar{display:flex;align-items:center;justify-content:space-between;gap:.75rem;padding:1rem 1.1rem;border-bottom:1px solid var(--app-border);background:rgba(248,250,252,.85)}.calendar-toolbar strong{text-transform:capitalize;font-size:1.08rem;letter-spacing:-.025em}.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);background:#0f172a;color:#fff}.calendar-weekdays div{padding:.78rem;text-align:center;font-weight:800;border-right:1px solid rgba(255,255,255,.12);font-size:.84rem}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);background:var(--app-border);gap:1px}.calendar-cell{background:#fff;min-height:148px;padding:.64rem;display:flex;flex-direction:column;gap:.38rem}.calendar-cell.is-muted{background:#f8fafc;color:#98a2b3}.calendar-cell.is-today{box-shadow:inset 0 0 0 2px #2563eb;background:linear-gradient(180deg,#eff6ff,#fff 40%)}.calendar-date{display:flex;justify-content:space-between;align-items:center;font-weight:850;font-size:.9rem}.calendar-event{display:block;text-decoration:none;background:#fff;border:1px solid #e4e7ec;border-left:5px solid var(--cat,#2563eb);border-radius:12px;padding:.42rem .5rem;color:#111827;font-size:.84rem;box-shadow:0 5px 14px rgba(16,24,40,.06)}.calendar-event:hover{transform:translateY(-1px);box-shadow:0 10px 20px rgba(16,24,40,.09);background:#f8fafc}.calendar-event b{margin-right:.25rem}.calendar-event span{font-weight:850}.calendar-event small{display:block;color:var(--app-muted)}.calendar-shell[data-view="day"] .calendar-weekdays{display:none}.calendar-shell[data-view="day"] .calendar-grid{grid-template-columns:1fr}.calendar-shell[data-view="day"] .calendar-cell{min-height:65vh}.calendar-shell[data-view="week"] .calendar-grid,.calendar-shell[data-view="month"] .calendar-grid{grid-template-columns:repeat(7,1fr)}
@media(max-width:1200px){.stat-grid{grid-template-columns:repeat(2,1fr)}.grid-form{grid-template-columns:repeat(2,1fr)}.board{grid-template-columns:repeat(5,minmax(210px,1fr))}.column{min-height:70vh}}
@media(max-width:768px){.app-main{padding:1rem}.page-head{display:block}.page-head .btn{margin-top:.85rem}.search-form{margin-top:1rem}.grid-form,.stat-grid{grid-template-columns:1fr}.span-2{grid-column:span 1}.calendar-weekdays{display:none}.calendar-shell[data-view="week"] .calendar-grid,.calendar-shell[data-view="month"] .calendar-grid{grid-template-columns:1fr}.calendar-cell{min-height:auto}.board{grid-template-columns:repeat(5,minmax(180px,1fr));gap:.55rem}.column{min-height:65vh;border-radius:16px}.board-shell{padding:.7rem;border-radius:22px}.tcard{min-height:64px}}
/* 2026 update: maandkolommen blijven horizontaal consistent, ook bij 12 categorieën. */
.board{display:flex;grid-template-columns:none;align-items:stretch;gap:.75rem;overflow-x:auto;overflow-y:hidden;padding-bottom:.5rem}.column{flex:0 0 230px}.board::-webkit-scrollbar{height:10px}.board::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:999px}.board::-webkit-scrollbar-track{background:rgba(255,255,255,.55);border-radius:999px}
@media(max-width:768px){.board{display:flex}.column{flex-basis:190px}}