/* MedLogica - gedeelde huisstijl (Kennisbank-look) op alle app-paginas.
   Gelinkt NA de inline <style> van elke pagina, dus wint via bron-volgorde.
   Een bron = nooit meer uit elkaar lopen. Verwijder de <link>-regels of dit
   bestand om alles in een keer terug te draaien. */
body {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%2317A39A' stroke-width='0.6' opacity='0.08'><path d='M0 40 L80 40'/><path d='M40 0 L40 80'/><path d='M0 0 L80 80'/><path d='M80 0 L0 80'/><circle cx='40' cy='40' r='8'/></g></svg>"),
    linear-gradient(135deg, #f1faf8 0%, #ecf3fa 60%, #f0f4fb 100%);
  background-repeat: repeat, no-repeat;
  background-size: 80px 80px, cover;
  min-height: 100vh;
}
[data-theme="dark"] body {
  background-image:
    url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' width='80' height='80' viewBox='0 0 80 80'><g fill='none' stroke='%235B8DEF' stroke-width='0.6' opacity='0.12'><path d='M0 40 L80 40'/><path d='M40 0 L40 80'/><path d='M0 0 L80 80'/><path d='M80 0 L0 80'/><circle cx='40' cy='40' r='8'/></g></svg>"),
    linear-gradient(135deg, #0f1f2c 0%, #131a2e 60%, #161d33 100%);
  background-repeat: repeat, no-repeat;
  background-size: 80px 80px, cover;
}
.card, .panel, .section, .group {
  box-shadow: 0 12px 32px rgba(31,58,95,0.07), 0 3px 10px rgba(31,58,95,0.04);
  border: 1px solid rgba(23,163,154,0.14);
}
[data-theme="dark"] .card, [data-theme="dark"] .panel, [data-theme="dark"] .section, [data-theme="dark"] .group {
  border-color: rgba(94,234,212,0.16);
  box-shadow: 0 12px 32px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.06);
}

/* ===================================================================
   v287 — rijke huisstijl (stijlbron: Absentie Risico-preview / medlogica.nl).
   Additief en component-gericht; paginavariabelen blijven ongemoeid zodat
   de dark-mode van elke pagina intact blijft.
   =================================================================== */

/* Kaarten en KPI-tegels: zachtere hoeken, teal-getinte rand, zweef-schaduw */
.card, .panel, .kpi-card, .kpi-grid .kpi {
  border-radius: 16px;
}
.kpi-card, .kpi-grid .kpi {
  border: 1px solid rgba(23,163,154,0.14);
  box-shadow: 0 12px 32px rgba(31,58,95,0.07), 0 3px 10px rgba(31,58,95,0.04);
}
html[data-theme="dark"] .kpi-card, html[data-theme="dark"] .kpi-grid .kpi {
  border: 1px solid rgba(94,234,212,0.16);
  box-shadow: 0 12px 32px rgba(15,23,42,.10), 0 4px 12px rgba(15,23,42,.06);
}

/* Primaire knoppen: blauw→teal gradient met zachte glow (gelijk aan de site) */
.btn.primary {
  background: linear-gradient(120deg, #2E5EAA, #17A39A);
  border: 1px solid transparent;
  color: #fff;
  box-shadow: 0 6px 16px rgba(23,163,154,0.28);
}
.btn.primary:hover {
  background: linear-gradient(120deg, #2E5EAA, #17A39A);
  filter: brightness(1.07);
  color: #fff;
  border-color: transparent;
  box-shadow: 0 9px 22px rgba(23,163,154,0.38);
}

/* Topbar: glas-effect op de mesh-achtergrond */
.topbar {
  background: rgba(255,255,255,0.82);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid #e3eaf1;
}
[data-theme="dark"] .topbar {
  background: rgba(15,20,36,0.82);
  border-bottom-color: rgba(255,255,255,0.08);
}

/* Paginakoppen: navy i.p.v. blauw (dark mode volgt de paginavariabele) */
.page-header h2, .topbar h1 { color: #1F3A5F; }
[data-theme="dark"] .page-header h2, [data-theme="dark"] .topbar h1 { color: var(--text, #e7ebf6); }

/* Formulier-focus: consistente teal focusring */
input:focus-visible, select:focus-visible, textarea:focus-visible {
  outline: 2px solid rgba(23,163,154,0.55);
  outline-offset: 1px;
}