/* ===== Visuele opfrisser (DB Clinic) — enkel uiterlijk, geen gedrag. Verwijder dit blok om terug te gaan. ===== */
:root {
  --r-card: 16px; --r-ctl: 10px;
  --shadow-1: 0 1px 2px rgba(20,50,100,.05), 0 8px 24px -14px rgba(20,50,100,.20);
  --shadow-2: 0 2px 6px rgba(20,50,100,.08), 0 14px 32px -16px rgba(20,50,100,.30);
}
html { -webkit-text-size-adjust: 100%; }
body {
  background:
    radial-gradient(1100px 380px at 50% -140px, rgba(47,123,232,.14), transparent 70%),
    var(--bg);
  -webkit-font-smoothing: antialiased; text-rendering: optimizeLegibility;
}
/* Kaarten: zachter, ronder, rustiger koppen */
.card { border-radius: var(--r-card); box-shadow: var(--shadow-1); border-color: rgba(220,213,198,.8); }
.card h2 { font-size: 20px; letter-spacing: -.005em; color: var(--teal-deep, var(--ink)); }
.card h3 { font-family: var(--font-head); letter-spacing: -.005em; }
.card .sub { line-height: 1.5; }
/* Zachte overgang bij het openen van een scherm */
@media (prefers-reduced-motion: no-preference) {
  section.view.active { animation: dbFade .22s ease both; }
  @keyframes dbFade { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }
}
/* Knoppen */
button.primary {
  background: linear-gradient(180deg, #4C93F0, var(--teal) 55%, #2368D0);
  border-radius: var(--r-ctl); min-height: 42px; letter-spacing: .1px;
  box-shadow: 0 1px 0 rgba(255,255,255,.18) inset, 0 4px 12px -6px rgba(29,79,168,.55);
}
button.primary:hover { background: linear-gradient(180deg, #2F7BE8, var(--teal-deep) 90%); box-shadow: 0 1px 0 rgba(255,255,255,.14) inset, 0 8px 18px -8px rgba(29,79,168,.6); transform: translateY(-1px); }
button.primary:active { transform: translateY(1px); }
button.primary.small { min-height: 34px; padding: 7px 14px; font-size: 13px; }
button.ghost { border-radius: 8px; padding: 6px 12px; background: var(--surface); border-color: var(--border); color: var(--ink); font-weight: 600; }
button.ghost:hover { color: var(--teal-deep); border-color: var(--teal); background: var(--teal-tint); }
button.ghost.armed:hover { color: #fff; background: var(--red); border-color: var(--red); }
button.small, button.ghost.small { min-height: 32px; }
/* Invoervelden */
input, select, textarea { border-radius: var(--r-ctl); border-color: var(--border); transition: border-color .15s ease, box-shadow .15s ease, background .15s ease; }
input, select { min-height: 42px; padding: 9px 12px; }
input[type="checkbox"], input[type="radio"] { min-height: 0; }
textarea { padding: 10px 12px; border: 1px solid var(--border); background: var(--surface); font-family: ui-sans-serif, system-ui, sans-serif; }
input:hover, select:hover, textarea:hover { border-color: var(--sage); }
input:focus, select:focus, textarea:focus { outline: none; border-color: var(--teal); box-shadow: 0 0 0 4px rgba(47,123,232,.18); }
label { letter-spacing: .1px; }
/* Tabellen */
.table-scroll { border-radius: 12px; box-shadow: 0 1px 2px rgba(20,50,100,.05); }
th { background: var(--surface-2); letter-spacing: .5px; }
table.rows tbody tr:nth-child(even) td { background: rgba(234,242,252,.55); }
table.rows tbody tr:hover td { background: var(--teal-tint); }
#planGrid tbody tr:hover td { background: inherit; }
.stat { border-radius: 12px; background: linear-gradient(180deg, #fff, var(--surface-2)); }
.empty, .empty-state { color: var(--ink-soft); }
/* Bovenbalk: naam + status als nette 'pil' */
header.top { border-bottom: none; padding-bottom: 6px; margin-bottom: 16px; }
.sync { background: var(--surface); border: 1px solid var(--border); border-radius: 999px; padding: 6px 8px 6px 14px; box-shadow: var(--shadow-1); gap: 8px; }
.sync button.ghost { border-radius: 999px; min-height: 30px; padding: 4px 12px; font-size: 12px; }
#roleLabel { color: var(--teal-deep); }
.dot { width: 8px; height: 8px; box-shadow: 0 0 0 3px rgba(61,122,82,.18); }
.dot.off { box-shadow: 0 0 0 3px rgba(168,64,47,.18); }
.welcome-banner { border-radius: 14px; border: 1px solid #C9DEF8; background: linear-gradient(135deg, #EAF3FF, #DCEBFF); box-shadow: var(--shadow-1); }
/* Hoofdnavigatie op groot scherm: pillen in plaats van onderstreping */
@media (min-width: 701px) {
  nav.tabs.categories { border-bottom: none; gap: 6px; margin-bottom: 20px; padding: 6px; background: rgba(234,242,252,.8); border: 1px solid var(--border); border-radius: 16px; }
  nav.tabs.categories button { border-bottom: none; border-radius: 10px; padding: 8px 13px; font-size: 13.5px; transition: background .15s ease, color .15s ease, box-shadow .15s ease; }
  nav.tabs.categories button:hover { background: rgba(255,255,255,.75); color: var(--ink); }
  nav.tabs.categories button.active { background: var(--surface); color: var(--teal-deep); box-shadow: 0 1px 2px rgba(20,50,100,.10), 0 4px 10px -6px rgba(20,50,100,.28); }
  .nav-more-toggle.active-parent { border-bottom-color: transparent; background: var(--surface); }
}
nav.tabs.subtabs { border-radius: 12px; padding: 5px; }
nav.tabs.subtabs button { border-radius: 9px; }
.nav-more-menu { border-radius: 12px; box-shadow: var(--shadow-2); }
.nav-menu-btn { border-radius: 14px; box-shadow: var(--shadow-1); }
/* Telefoon: iets grotere tikvlakken, rustiger ritme */
@media (max-width: 700px) {
  .card { border-radius: 14px; }
  button.primary { min-height: 46px; }
  input, select { font-size: 16px; min-height: 46px; }
  .sync { border-radius: 16px; padding: 8px 12px; }
}
/* Scrollbalken zachter (desktop) */
@media (hover: hover) {
  * { scrollbar-width: thin; scrollbar-color: #b7cdea transparent; }
}