* { box-sizing: border-box; margin: 0; padding: 0; }
html { -webkit-text-size-adjust: 100%; }
body {
  font-family: var(--sans);
  background: var(--canvas);
  color: var(--ink);
  font-size: 13.5px;
  line-height: 1.5;
  min-height: 100vh;
  -webkit-font-smoothing: antialiased;
  text-rendering: optimizeLegibility;
  font-feature-settings: 'cv11', 'ss01';
}
::selection { background: var(--rosso-soft); color: var(--ink); }
a { color: inherit; }
button { font-family: inherit; }

#view.view-enter { animation: viewIn 0.32s var(--ease) both; }
@keyframes viewIn { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

:focus-visible { outline: 2px solid var(--rosso); outline-offset: 1px; border-radius: var(--r-xs); }
input:focus-visible, select:focus-visible, textarea:focus-visible { outline: none; }

/* ── Shell ─────────────────────────────────────────────────────────── */
/* Maatvoering overgenomen uit de referentie-app: zijbalk 224 breed met 12
   padding, rijen van 28 hoog, iconen 14 op stroke 1.5. Die krappe maten zijn
   precies wat een app van een website onderscheidt. */
.shell { display: flex; min-height: 100vh; }

.sidebar {
  width: var(--sidebar-w);
  position: fixed; inset: 0 auto 0 0;
  background: var(--sunken);
  border-right: 1px solid var(--line-soft);
  display: flex; flex-direction: column;
  padding: 12px;
  overflow-y: auto;
  z-index: 50;
}

/* Merkregel: het vierkantje met de L, de naam, en rechts twee acties. */
.wordmark {
  display: flex; align-items: center; gap: 8px;
  height: 28px; padding: 0 8px; margin-bottom: 12px;
  font-size: var(--t-emphasis); font-weight: 500; letter-spacing: -0.006em;
  color: var(--ink);
}
.wordmark .mk {
  width: 16px; height: 16px; border-radius: var(--r-xs);
  background: var(--rosso); color: #fff;
  display: flex; align-items: center; justify-content: center;
  font-size: 9px; font-weight: 600; line-height: 1; flex: none;
  font-family: var(--sans); font-style: normal;
}
.wordmark .acts { margin-left: auto; display: flex; align-items: center; gap: 6px; }
.wordmark .acts button {
  background: none; border: 0; padding: 0; cursor: pointer;
  color: var(--faint); display: flex; transition: color 0.12s;
}
.wordmark .acts button:hover { color: var(--ink); }
.wordmark .acts svg { width: 14px; height: 14px; stroke-width: 1.5; }

.nav { display: flex; flex-direction: column; }
.nav-groep {
  font-size: var(--t-micro); font-weight: 500; letter-spacing: 0;
  text-transform: none; color: var(--ghost);
  padding: 0 8px; margin: 16px 0 4px;
}
.nav-groep:first-child { margin-top: 0; }
.nav a {
  display: flex; align-items: center; gap: 8px;
  height: var(--row-h); padding: 0 8px;
  border-radius: var(--r-md);
  text-decoration: none;
  color: var(--mid);
  font-size: var(--t-body); font-weight: 400; letter-spacing: -0.006em;
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  transition: background 0.1s var(--ease), color 0.1s var(--ease);
}
.nav a svg { width: 14px; height: 14px; stroke-width: 1.5; flex: none; color: var(--faint); }
.nav a:hover { background: var(--hover); color: var(--ink); }
.nav a.active { background: var(--rosso-soft); color: var(--ink); font-weight: 450; }
.nav a.active svg { color: var(--rosso-text); }

.sidebar-foot { margin-top: auto; padding-top: 12px; }
.theme-toggle {
  display: flex; align-items: center; gap: 8px; width: 100%;
  height: var(--row-h); padding: 0 8px;
  border: 0; border-radius: var(--r-md);
  background: transparent; color: var(--faint);
  font-size: var(--t-caption); font-weight: 400; cursor: pointer;
  transition: background 0.1s, color 0.1s;
}
.theme-toggle:hover { background: var(--hover); color: var(--ink); }
/* Instellingen staat als link in de voet; die krijgt dezelfde actieve staat
   als de gewone menu-items, anders zie je niet waar je bent. */
.theme-toggle.active { background: var(--rosso-soft); color: var(--ink); }
.theme-toggle.active svg { color: var(--rosso-text); opacity: 1; }
.theme-toggle svg { width: 14px; height: 14px; stroke-width: 1.5; flex: none; }
.sidebar-foot small { display: none; }
.heartbeat { display: none; }

.main { flex: 1; margin-left: var(--sidebar-w); min-width: 0; background: var(--canvas); }

/* Werkbalk: één smalle rij met de paginanaam, zoals in de referentie. */
.topbar {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px;
  padding: 0 20px;
  height: 40px;
  border-bottom: 1px solid var(--line-soft);
  position: sticky; top: 0; z-index: 20;
  background: var(--canvas);
}
.topbar h1 { font-size: var(--t-emphasis); font-weight: 500; letter-spacing: -0.006em; line-height: 1.2; white-space: nowrap; }
.topbar .sub { color: var(--ghost); font-size: var(--t-caption); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.topbar > div:first-of-type { display: flex; align-items: baseline; gap: 10px; min-width: 0; }
.live { display: flex; align-items: center; gap: 6px; font-size: var(--t-caption); color: var(--faint); }
.pulse { width: 6px; height: 6px; border-radius: 50%; background: var(--groen); position: relative; }
.pulse::after {
  content: ''; position: absolute; inset: -3px; border-radius: 50%;
  border: 1.5px solid var(--groen); opacity: 0.4; animation: pulse 2.4s ease-out infinite;
}
@keyframes pulse { 0% { transform: scale(0.5); opacity: 0.7; } 80%, 100% { transform: scale(1.7); opacity: 0; } }

.hamburger { display: none; background: transparent; border: 1px solid var(--line); border-radius: var(--r-sm); padding: 4px; cursor: pointer; color: var(--ink); }
.hamburger svg { width: 16px; height: 16px; display: block; }
.scrim { display: none; position: fixed; inset: 0; background: var(--scrim); z-index: 45; }

.content { max-width: 1280px; margin: 0 auto; padding: 20px 20px 64px; }

/* ── Skeletons ─────────────────────────────────────────────────────── */
.skel {
  border-radius: var(--r-sm);
  background: linear-gradient(100deg, var(--paper-2) 30%, var(--hover) 48%, var(--paper-2) 62%);
  background-size: 220% 100%;
  animation: shimmer 1.4s linear infinite;
  color: transparent !important;
}
@keyframes shimmer { to { background-position: -120% 0; } }

.gate { position: fixed; inset: 0; z-index: 200; background: var(--canvas); display: none; align-items: center; justify-content: center; }
.gate.open { display: flex; }
.gate-box { background: var(--paper); border: 1px solid var(--line); border-radius: var(--r-lg); box-shadow: var(--shadow-lift); padding: 34px 30px; width: 340px; text-align: center; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after { animation-duration: 0.01ms !important; animation-iteration-count: 1 !important; transition-duration: 0.01ms !important; }
}

/* ── Mobiel ────────────────────────────────────────────────────────── */
@media (max-width: 940px) {
  html, body { overflow-x: hidden; }
  .hamburger { display: inline-flex; align-items: center; justify-content: center; order: -1; }
  .sidebar {
    position: fixed; inset: 0 auto 0 0; height: 100%; width: 250px;
    transform: translateX(-100%); transition: transform 0.22s var(--ease);
    z-index: 60;
  }
  body.nav-open .sidebar { transform: translateX(0); box-shadow: var(--shadow-lift); }
  body.nav-open .scrim { display: block; }
  .main { margin-left: 0; max-width: 100vw; overflow-x: hidden; }
  .topbar { padding: 0 14px; gap: 10px; }
  .topbar > div:first-of-type { flex: 1; flex-direction: column; align-items: flex-start; gap: 0; }
  .content { padding: 16px 14px 60px; }
}
@media (max-width: 640px) {
  .kpis { grid-template-columns: 1fr 1fr; gap: 8px; }
  .kpi { padding: 12px 13px 11px; }
  .kpi .val { font-size: 20px; }
  .card { padding: 15px 14px; }
  .card-title { flex-wrap: wrap; gap: 6px; align-items: flex-start; }
  .card-title .actions { flex-wrap: wrap; width: 100%; }
  .pills { flex-wrap: wrap; }
  .modal { padding: 3vh 10px; }
  .modal-box { padding: 20px 16px; }
  .frm-2 { grid-template-columns: 1fr; }
  .tbl { font-size: 12px; }
  .tbl th, .tbl td { padding: 7px 7px; }

  /* Datum- en zoekvelden krijgen in de schermen een vaste breedte mee zodat
     ze op desktop netjes naast elkaar staan. Op een telefoon loopt dat over
     de rand, dus daar mogen ze de volle breedte pakken. */
  input[type="date"], input[type="datetime-local"], input[type="search"] {
    width: 100% !important; min-width: 0 !important;
  }
  .row > input, .row > select { min-width: 0; }
  .card-title .actions input,
  .card-title .actions select { width: 100% !important; }

  /* Beeldroosters: twee naast elkaar leest prettiger dan één hele brede. */
  .grid.g3, .grid.g4 { grid-template-columns: 1fr 1fr; gap: 10px; }

  /* Raakvlakken. Een knop van 24 pixels tik je mis met een duim; 32 is het
     minimum waarbij dat niet meer gebeurt. */
  .btn { min-height: 32px; }
  .btn-sm { min-height: 30px; padding: 6px 10px; }
  .pills button { min-height: 30px; }
  input[type="checkbox"], input[type="radio"] { width: 18px !important; height: 18px; }
  .chip button { min-width: 22px; min-height: 22px; }
  .nav a { height: 34px; }
}

/* Veilige zones op telefoons met een inkeping of een streep onderin, zodat
   niets onder de systeembalken verdwijnt. */
@supports (padding: max(0px)) {
  @media (max-width: 940px) {
    .content {
      padding-left: max(14px, env(safe-area-inset-left));
      padding-right: max(14px, env(safe-area-inset-right));
      padding-bottom: max(60px, calc(env(safe-area-inset-bottom) + 48px));
    }
    .sidebar {
      padding-top: max(12px, env(safe-area-inset-top));
      padding-bottom: max(12px, env(safe-area-inset-bottom));
    }
    .topbar {
      padding-left: max(14px, env(safe-area-inset-left));
      padding-right: max(14px, env(safe-area-inset-right));
    }
    #toasts { bottom: max(18px, calc(env(safe-area-inset-bottom) + 10px)); right: 12px; left: 12px; }
    .toast { max-width: none; }
  }
}