/* Glass-effect — Panel (#225). Werkt voor light/dark/brand; classic_*
   blijft pre-glass omdat geen selector hieronder op classic_* matched.
   Vereist: tokens.css en admin.css eerder geladen. */

/* Glass-bg variabelen per modus. */
[data-theme="light"] {
  --panel-glass-bg-1: rgba(255, 255, 255, 0.55);
  --panel-glass-bg-2: rgba(255, 255, 255, 0.72);
  --panel-glass-bg-3: rgba(255, 255, 255, 0.88);
  --panel-glass-border: rgba(0, 0, 0, 0.06);
  --panel-glass-spec:   rgba(255, 255, 255, 0.45);
  --panel-glass-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.18);
}
[data-theme="dark"] {
  --panel-glass-bg-1: rgba(30, 34, 44, 0.55);
  --panel-glass-bg-2: rgba(36, 40, 52, 0.72);
  --panel-glass-bg-3: rgba(42, 48, 60, 0.88);
  --panel-glass-border: rgba(255, 255, 255, 0.06);
  --panel-glass-spec:   rgba(255, 255, 255, 0.06);
  --panel-glass-shadow: 0 24px 60px -24px rgba(0, 0, 0, 0.55);
}
[data-theme="brand"] {
  --panel-glass-bg-1: rgba(251, 250, 246, 0.55);
  --panel-glass-bg-2: rgba(251, 250, 246, 0.72);
  --panel-glass-bg-3: rgba(251, 250, 246, 0.92);
  --panel-glass-border: rgba(15, 20, 48, 0.08);
  --panel-glass-spec:   rgba(255, 255, 255, 0.40);
  --panel-glass-shadow: 0 24px 60px -24px rgba(15, 20, 48, 0.18);
}

/* Body-gradient alleen voor brand-modus. Light/dark blijven flat (warm-wit
   en donker zoals BOSS day/night) zodat het glass-effect rustig blijft. */
[data-theme="brand"] body::before {
  content: "";
  position: fixed; inset: 0; z-index: -3;
  pointer-events: none;
  background:
    radial-gradient(circle at 15% 10%, #C8F0D8 0%, transparent 45%),
    radial-gradient(circle at 85% 25%, #BCDCFB 0%, transparent 50%),
    radial-gradient(circle at 20% 75%, #D8D4F5 0%, transparent 48%),
    radial-gradient(circle at 85% 90%, #BCDCFB 0%, transparent 45%),
    linear-gradient(135deg, #C8F0D8 0%, #BCDCFB 45%, #D8D4F5 100%);
  background-size: 200% 200%;
  animation: panelGradientShift 40s ease-in-out infinite alternate;
}
[data-theme="brand"] body::after {
  content: "";
  position: fixed; inset: 0; z-index: -1; pointer-events: none;
  opacity: 0.32; mix-blend-mode: overlay;
  background-image: url("data:image/svg+xml;utf8,<svg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'><filter id='n'><feTurbulence type='fractalNoise' baseFrequency='0.85' numOctaves='2' stitchTiles='stitch'/><feColorMatrix values='0 0 0 0 0.06 0 0 0 0 0.08 0 0 0 0 0.18 0 0 0 0.6 0'/></filter><rect width='100%25' height='100%25' filter='url(%23n)'/></svg>");
}

@keyframes panelGradientShift {
  0%   { background-position: 0% 0%, 100% 0%, 0% 100%, 100% 100%, 0% 0%; }
  100% { background-position: 20% 10%, 80% 20%, 10% 90%, 90% 80%, 100% 100%; }
}
@media (prefers-reduced-motion: reduce) {
  [data-theme="brand"] body::before { animation: none; }
}

/* Surface-overrides — expliciet per modus zodat classic_light/classic_dark
   de admin.css opaque styling behouden. */

[data-theme="light"] .admin-sidebar,
[data-theme="dark"]  .admin-sidebar,
[data-theme="brand"] .admin-sidebar {
  background: var(--panel-glass-bg-2);
  border-right: 1px solid var(--panel-glass-border);
  backdrop-filter: saturate(1.4) blur(28px);
  -webkit-backdrop-filter: saturate(1.4) blur(28px);
  box-shadow: inset -1px 0 0 var(--panel-glass-spec);
}

[data-theme="light"] .admin-topbar,
[data-theme="dark"]  .admin-topbar,
[data-theme="brand"] .admin-topbar {
  background: var(--panel-glass-bg-2);
  border-bottom: 1px solid var(--panel-glass-border);
  backdrop-filter: saturate(1.4) blur(28px);
  -webkit-backdrop-filter: saturate(1.4) blur(28px);
  box-shadow: inset 0 -1px 0 var(--panel-glass-border), inset 0 1px 0 var(--panel-glass-spec);
}

[data-theme="light"] .admin-card,
[data-theme="dark"]  .admin-card,
[data-theme="brand"] .admin-card,
[data-theme="light"] .stat-card,
[data-theme="dark"]  .stat-card,
[data-theme="brand"] .stat-card {
  background: var(--panel-glass-bg-1);
  border: 1px solid var(--panel-glass-border);
  backdrop-filter: saturate(1.4) blur(20px);
  -webkit-backdrop-filter: saturate(1.4) blur(20px);
  box-shadow: var(--panel-glass-shadow), inset 0 1px 0 var(--panel-glass-spec);
}

[data-theme="light"] .admin-modal,
[data-theme="dark"]  .admin-modal,
[data-theme="brand"] .admin-modal {
  background: var(--panel-glass-bg-3);
  border: 1px solid var(--panel-glass-border);
  backdrop-filter: saturate(1.4) blur(36px);
  -webkit-backdrop-filter: saturate(1.4) blur(36px);
  box-shadow: var(--panel-glass-shadow), inset 0 1px 0 var(--panel-glass-spec);
}

[data-theme="light"] .admin-input,
[data-theme="dark"]  .admin-input,
[data-theme="brand"] .admin-input,
[data-theme="light"] .admin-select,
[data-theme="dark"]  .admin-select,
[data-theme="brand"] .admin-select,
[data-theme="light"] .admin-input-wrap input,
[data-theme="dark"]  .admin-input-wrap input,
[data-theme="brand"] .admin-input-wrap input,
[data-theme="light"] textarea.admin-input,
[data-theme="dark"]  textarea.admin-input,
[data-theme="brand"] textarea.admin-input {
  background: var(--panel-glass-bg-1);
  border: 1px solid var(--panel-glass-border);
  backdrop-filter: saturate(1.3) blur(10px);
  -webkit-backdrop-filter: saturate(1.3) blur(10px);
}

[data-theme="light"] .admin-btn,
[data-theme="dark"]  .admin-btn,
[data-theme="brand"] .admin-btn {
  background: var(--panel-glass-bg-1);
  border: 1px solid var(--panel-glass-border);
  backdrop-filter: saturate(1.3) blur(14px);
  -webkit-backdrop-filter: saturate(1.3) blur(14px);
}

/* Performance: blur is GPU-zwaar op mobiel. Halveer onder 560px. */
@media (max-width: 560px) {
  [data-theme="light"] .admin-sidebar,
  [data-theme="dark"]  .admin-sidebar,
  [data-theme="brand"] .admin-sidebar,
  [data-theme="light"] .admin-topbar,
  [data-theme="dark"]  .admin-topbar,
  [data-theme="brand"] .admin-topbar    { backdrop-filter: saturate(1.3) blur(18px); -webkit-backdrop-filter: saturate(1.3) blur(18px); }
  [data-theme="light"] .admin-card,
  [data-theme="dark"]  .admin-card,
  [data-theme="brand"] .admin-card,
  [data-theme="light"] .stat-card,
  [data-theme="dark"]  .stat-card,
  [data-theme="brand"] .stat-card        { backdrop-filter: saturate(1.3) blur(14px); -webkit-backdrop-filter: saturate(1.3) blur(14px); }
  [data-theme="light"] .admin-modal,
  [data-theme="dark"]  .admin-modal,
  [data-theme="brand"] .admin-modal      { backdrop-filter: saturate(1.3) blur(24px); -webkit-backdrop-filter: saturate(1.3) blur(24px); }
  [data-theme="light"] .admin-input,
  [data-theme="dark"]  .admin-input,
  [data-theme="brand"] .admin-input,
  [data-theme="light"] .admin-select,
  [data-theme="dark"]  .admin-select,
  [data-theme="brand"] .admin-select,
  [data-theme="light"] .admin-input-wrap input,
  [data-theme="dark"]  .admin-input-wrap input,
  [data-theme="brand"] .admin-input-wrap input,
  [data-theme="light"] textarea.admin-input,
  [data-theme="dark"]  textarea.admin-input,
  [data-theme="brand"] textarea.admin-input { backdrop-filter: saturate(1.2) blur(6px); -webkit-backdrop-filter: saturate(1.2) blur(6px); }
  [data-theme="light"] .admin-btn,
  [data-theme="dark"]  .admin-btn,
  [data-theme="brand"] .admin-btn        { backdrop-filter: saturate(1.2) blur(8px); -webkit-backdrop-filter: saturate(1.2) blur(8px); }
}

/* Opt-in utility-classes — los van theme-mode toepasbaar. */
.glass-1,
.glass-2,
.glass-3 {
  border: 1px solid var(--border-glass, var(--panel-glass-border, rgba(255,255,255,.1)));
  box-shadow: var(--shadow-md, var(--panel-glass-shadow, 0 24px 60px -24px rgba(0,0,0,.3))),
              inset 0 1px 0 var(--inner-spec, var(--panel-glass-spec, rgba(255,255,255,.06)));
}
.glass-1 {
  background: var(--bg-elev-1, var(--panel-glass-bg-1, rgba(255,255,255,.55)));
  backdrop-filter: saturate(1.4) blur(20px);
  -webkit-backdrop-filter: saturate(1.4) blur(20px);
}
.glass-2 {
  background: var(--bg-elev-2, var(--panel-glass-bg-2, rgba(255,255,255,.72)));
  backdrop-filter: saturate(1.4) blur(28px);
  -webkit-backdrop-filter: saturate(1.4) blur(28px);
}
.glass-3 {
  background: var(--bg-elev-3, var(--panel-glass-bg-3, rgba(255,255,255,.88)));
  backdrop-filter: saturate(1.4) blur(36px);
  -webkit-backdrop-filter: saturate(1.4) blur(36px);
}

/* Brand-X — italic 200-weight, voor wordmarks zoals "PROJEXT". */
.brand-x {
  font-style: italic;
  font-weight: 200;
  color: var(--powder, var(--accent, currentColor));
}
footer .brand-x,
.meta .brand-x,
.footer-bottom .brand-x {
  color: inherit !important;
  font-weight: inherit !important;
}