/* Glas-laag (10 nov 2026) voor het eigenaarsdashboard en de EDA-console.
   Rustig en premium: een zachte lichtval achter de pagina, doorschijnende vlakken met een fijne lichtrand,
   pagina's die zacht binnenkomen. Geen nieuwe kleuren voor inhoud; alleen materiaal en beweging.
   prefers-reduced-motion: geen beweging. Geen backdrop-filter op elke kaart (performance): alleen op
   balken, zijbalk en vensters; kaarten krijgen het glaseffect via doorschijnendheid + lichtrand. */
:root {
  --glas-vlak: rgba(255,255,255,0.72);
  --glas-rand: rgba(255,255,255,0.9);
  --glas-lijn: rgba(17,24,39,0.07);
  --glas-schaduw: 0 1px 1px rgba(17,24,39,0.03), 0 8px 24px -12px rgba(17,24,39,0.12);
  --glas-schaduw-hover: 0 1px 1px rgba(17,24,39,0.04), 0 16px 36px -14px rgba(17,24,39,0.18);
  --glas-licht-1: rgba(120,150,255,0.10);
  --glas-licht-2: rgba(200,184,154,0.14);
  --glas-ease: cubic-bezier(.22,1,.36,1);
}
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) {
  --glas-vlak: rgba(28,30,34,0.66); --glas-rand: rgba(255,255,255,0.06); --glas-lijn: rgba(255,255,255,0.07);
  --glas-schaduw: 0 1px 0 rgba(255,255,255,0.03) inset, 0 10px 30px -14px rgba(0,0,0,0.6);
  --glas-schaduw-hover: 0 1px 0 rgba(255,255,255,0.05) inset, 0 18px 40px -16px rgba(0,0,0,0.7);
  --glas-licht-1: rgba(90,120,255,0.10); --glas-licht-2: rgba(200,184,154,0.07); } }
:root[data-theme="dark"] {
  --glas-vlak: rgba(28,30,34,0.66); --glas-rand: rgba(255,255,255,0.06); --glas-lijn: rgba(255,255,255,0.07);
  --glas-schaduw: 0 1px 0 rgba(255,255,255,0.03) inset, 0 10px 30px -14px rgba(0,0,0,0.6);
  --glas-schaduw-hover: 0 1px 0 rgba(255,255,255,0.05) inset, 0 18px 40px -16px rgba(0,0,0,0.7);
  --glas-licht-1: rgba(90,120,255,0.10); --glas-licht-2: rgba(200,184,154,0.07);
}

/* Lichtval achter alles: vast, dus geen herberekening bij scrollen */
body::before {
  content: ""; position: fixed; inset: 0; z-index: -1; pointer-events: none;
  background:
    radial-gradient(60vw 50vh at 85% -10%, var(--glas-licht-1), transparent 70%),
    radial-gradient(50vw 45vh at -5% 105%, var(--glas-licht-2), transparent 70%);
}

/* Vlakken: dashboard (.kaart, .kpi-card, .agenda-kaart, .hero) en console (.card, .stat-kaart) */
.kaart, .kpi-card, .agenda-kaart, .card, .stat-kaart {
  background: var(--glas-vlak) !important;
  border: 1px solid var(--glas-lijn) !important;
  box-shadow: inset 0 1px 0 var(--glas-rand), var(--glas-schaduw) !important;
  transition: box-shadow .35s var(--glas-ease), transform .35s var(--glas-ease), border-color .35s var(--glas-ease);
}
.kpi-card:hover, .stat-kaart:hover { transform: translateY(-2px); box-shadow: inset 0 1px 0 var(--glas-rand), var(--glas-schaduw-hover) !important; }

/* Balken, zijbalk en vensters: echt glas */
header, .sidebar, #sidebar, .modal, .modal-inhoud {
  -webkit-backdrop-filter: saturate(1.8) blur(20px); backdrop-filter: saturate(1.8) blur(20px);
}
.sidebar, #sidebar { background: color-mix(in srgb, var(--glas-vlak) 92%, transparent) !important; }

/* Pagina's komen zacht binnen (één beweging per paginawissel) */
.pagina.actief, .tab-inhoud.actief { animation: glas-in .42s var(--glas-ease) both; }
@keyframes glas-in { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: none; } }

/* Balken en meters groeien naar hun waarde */
#occupancy-fill, [class*="balk-vul"], [class*="bar-fill"], [class*="progress-fill"], [class*="voortgang-vul"] {
  transition: width .9s var(--glas-ease) !important;
}

/* Knoppen: zachte druk */
button, .btn { transition: transform .15s var(--glas-ease), background-color .2s, box-shadow .2s; }
button:active:not(:disabled), .btn:active { transform: scale(.98); }

@media (prefers-reduced-motion: reduce) {
  .pagina.actief, .tab-inhoud.actief { animation: none; }
  .kpi-card:hover, .stat-kaart:hover { transform: none; }
  #occupancy-fill, [class*="balk-vul"], [class*="bar-fill"], [class*="progress-fill"], [class*="voortgang-vul"] { transition: none !important; }
}
@supports not (background: color-mix(in srgb, red, blue)) { .sidebar, #sidebar { background: var(--glas-vlak) !important; } }

/* Toegankelijkheid (10 nov 2026): zichtbare focus voor wie met het toetsenbord werkt, niet bij klikken */
:where(button, a, input, select, textarea, [tabindex]):focus-visible {
  outline: 2px solid var(--glas-focus, #2563EB); outline-offset: 2px; border-radius: 8px;
}
:root { --glas-focus: #2563EB; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --glas-focus: #7EA2FF; } }
:root[data-theme="dark"] { --glas-focus: #7EA2FF; }
@media (prefers-contrast: more) {
  .kaart, .kpi-card, .agenda-kaart, .card, .stat-kaart { background: var(--surface, #fff) !important; border-color: currentColor !important; }
}