/* =====================================================================================
   VerbixtertTV Community Panel - Design "Modern Glass"
   -------------------------------------------------------------------------------------
   Eine zuschaltbare Ebene ueber panel.css. Jede Regel gilt nur, solange
   <html data-design="glass"> gesetzt ist. Ohne dieses Attribut sieht das Panel
   exakt so aus wie vorher ("Klassisch").

   Rueckgaengig machen:
   - pro Person: Profilmenue oben rechts -> "Klassisches Design"
   - fuer alle:  in index.php $defaultDesign auf 'classic' setzen
   - komplett:   diese Datei und den <link> in index.php entfernen
   ===================================================================================== */

/* 1) Tokens ------------------------------------------------------------------------- */
html[data-design="glass"] {
  --accent-soft: color-mix(in srgb, var(--accent) 16%, transparent);
  --accent-line: color-mix(in srgb, var(--accent) 48%, transparent);
  --accent-glow: color-mix(in srgb, var(--accent) 34%, transparent);

  --bg: #0b0e14;
  --bg-deep: #080a10;
  --surface: rgba(24, 29, 40, 0.62);
  --surface-2: rgba(36, 42, 56, 0.58);
  --surface-3: rgba(52, 60, 78, 0.6);
  --surface-solid: #161b25;
  --line: rgba(255, 255, 255, 0.075);
  --line-strong: rgba(255, 255, 255, 0.15);
  --glass-hi: rgba(255, 255, 255, 0.06);

  --text: #eef1f7;
  --text-dim: #b3bccb;
  --text-faint: #838da0;

  --radius: 16px;
  --radius-sm: 10px;
  --shadow: 0 18px 50px rgba(0, 0, 0, 0.42), inset 0 1px 0 var(--glass-hi);
  --blur: blur(18px) saturate(1.35);
}

html[data-design="glass"][data-theme="light"] {
  --bg: #eef1f7;
  --bg-deep: #e3e8f1;
  --surface: rgba(255, 255, 255, 0.72);
  --surface-2: rgba(255, 255, 255, 0.6);
  --surface-3: rgba(231, 236, 245, 0.85);
  --surface-solid: #ffffff;
  --line: rgba(20, 30, 50, 0.09);
  --line-strong: rgba(20, 30, 50, 0.17);
  --glass-hi: rgba(255, 255, 255, 0.85);
  --text: #161d2b;
  --text-dim: #4d5a6e;
  --text-faint: #717d91;
  --shadow: 0 16px 40px rgba(30, 45, 80, 0.12), inset 0 1px 0 var(--glass-hi);
}

/* 2) Hintergrund -------------------------------------------------------------------- */
html[data-design="glass"] body { background: var(--bg); }

html[data-design="glass"] body::before {
  background:
    radial-gradient(900px 600px at 12% -8%, color-mix(in srgb, var(--accent) 30%, transparent), transparent 62%),
    radial-gradient(800px 560px at 100% 8%, rgba(110, 86, 255, 0.16), transparent 60%),
    radial-gradient(900px 700px at 60% 110%, color-mix(in srgb, var(--accent) 14%, transparent), transparent 60%);
}
html[data-design="glass"][data-theme="light"] body::before {
  background:
    radial-gradient(900px 600px at 12% -8%, color-mix(in srgb, var(--accent) 18%, transparent), transparent 62%),
    radial-gradient(800px 560px at 100% 8%, rgba(110, 86, 255, 0.09), transparent 60%);
}

html[data-design="glass"] ::selection { background: var(--accent); color: #fff; }
html[data-design="glass"] ::-webkit-scrollbar-thumb { background-color: var(--line-strong); }

/* 3) Grundgeruest ------------------------------------------------------------------- */
html[data-design="glass"] .rail {
  background: color-mix(in srgb, var(--bg-deep) 70%, transparent);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-right-color: var(--line);
}
html[data-design="glass"] .rail-brand {
  border-radius: 14px;
  box-shadow: 0 8px 24px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
html[data-design="glass"] .rail-btn { border-radius: 13px; }
html[data-design="glass"] .rail-btn:hover { background: var(--surface-2); transform: translateY(-1px); }
html[data-design="glass"] .rail-btn.is-active {
  color: #fff;
  background: linear-gradient(145deg, var(--accent), color-mix(in srgb, var(--accent) 62%, #6e56ff));
  border-color: transparent;
  box-shadow: 0 8px 22px var(--accent-glow);
}
html[data-design="glass"][data-theme="light"] .rail-btn.is-active { color: #fff; }
html[data-design="glass"] .rail-btn.is-active::after { display: none; }

html[data-design="glass"] .sub {
  background: color-mix(in srgb, var(--surface-solid) 55%, transparent);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-right-color: var(--line);
}
html[data-design="glass"] .sub-head h2 { font-size: 18px; letter-spacing: -0.02em; }
html[data-design="glass"] .sub-link { border-radius: 11px; transition: background .15s, color .15s, transform .15s; }
html[data-design="glass"] .sub-link:hover { transform: translateX(2px); }
html[data-design="glass"] .sub-link.is-active {
  background: linear-gradient(90deg, var(--accent-soft), transparent);
  border-color: var(--accent-line);
  box-shadow: inset 3px 0 0 var(--accent);
}
html[data-design="glass"] .sub-link.is-active svg { color: var(--accent); }
html[data-design="glass"] .sub-note { border: 1px solid var(--line); border-radius: 12px; }

html[data-design="glass"] .topbar {
  background: color-mix(in srgb, var(--bg) 62%, transparent);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-bottom-color: var(--line);
}
html[data-design="glass"] .topbar-title h1 { font-size: 19px; letter-spacing: -0.02em; }
html[data-design="glass"] .topbar-search,
html[data-design="glass"] .icon-btn,
html[data-design="glass"] .me-btn {
  background: var(--surface);
  border-color: var(--line);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
html[data-design="glass"] .topbar-search { border-radius: 999px; padding-inline: 16px; }
html[data-design="glass"] .icon-btn { border-radius: 12px; }
html[data-design="glass"] .icon-btn:hover,
html[data-design="glass"] .me-btn:hover,
html[data-design="glass"] .topbar-search:hover { border-color: var(--accent-line); }

/* 4) Bausteine ---------------------------------------------------------------------- */
html[data-design="glass"] .card,
html[data-design="glass"] .stat,
html[data-design="glass"] .post,
html[data-design="glass"] .dashboard-card,
html[data-design="glass"] .dashboard-stat {
  background: var(--surface);
  border-color: var(--line);
  border-radius: var(--radius);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow);
}
html[data-design="glass"] .stat[data-target]:hover,
html[data-design="glass"] .dashboard-stat.is-action:hover,
html[data-design="glass"] .post:hover {
  border-color: var(--accent-line);
  background: var(--surface-2);
  transform: translateY(-2px);
}
html[data-design="glass"] .stat,
html[data-design="glass"] .dashboard-stat { transition: border-color .18s, transform .18s, background .18s; }
html[data-design="glass"] .stat-icon {
  border-radius: 12px;
  background: linear-gradient(145deg, var(--accent-soft), transparent);
  box-shadow: inset 0 0 0 1px var(--accent-line);
}
html[data-design="glass"] .stat-value { font-size: 24px; }

html[data-design="glass"] .dashboard-hero {
  border-radius: 20px;
  border-color: var(--accent-line);
  background:
    linear-gradient(115deg, color-mix(in srgb, var(--accent) 22%, transparent), transparent 60%),
    var(--surface);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: var(--shadow);
}

/* Knoepfe */
html[data-design="glass"] .btn {
  border-radius: 10px;
  background: var(--surface-2);
  border-color: var(--line-strong);
  box-shadow: inset 0 1px 0 var(--glass-hi);
}
html[data-design="glass"] .btn:hover { background: var(--surface-3); }
html[data-design="glass"] .btn.primary {
  border-color: transparent;
  color: #fff;
  background: linear-gradient(145deg, color-mix(in srgb, var(--accent) 88%, #fff), var(--accent) 45%, color-mix(in srgb, var(--accent) 70%, #6e56ff));
  box-shadow: 0 8px 22px var(--accent-glow), inset 0 1px 0 rgba(255, 255, 255, 0.25);
}
html[data-design="glass"] .btn.primary:hover { filter: brightness(1.08); transform: translateY(-1px); }
html[data-design="glass"] .btn.ghost { background: transparent; border-color: transparent; box-shadow: none; }
html[data-design="glass"] .btn.ghost:hover { background: var(--surface-2); }
html[data-design="glass"] .btn.danger { background: rgba(255, 93, 122, 0.06); box-shadow: none; }
html[data-design="glass"] .btn.small { border-radius: 9px; }

/* Formulare */
html[data-design="glass"] input[type="text"],
html[data-design="glass"] input[type="password"],
html[data-design="glass"] input[type="number"],
html[data-design="glass"] input[type="date"],
html[data-design="glass"] input[type="search"],
html[data-design="glass"] select,
html[data-design="glass"] textarea {
  border-radius: 10px;
  background: color-mix(in srgb, var(--bg) 55%, transparent);
  border-color: var(--line-strong);
}
html[data-design="glass"] input:focus,
html[data-design="glass"] select:focus,
html[data-design="glass"] textarea:focus {
  border-color: var(--accent);
  background: color-mix(in srgb, var(--bg) 40%, transparent);
  box-shadow: 0 0 0 4px var(--accent-soft);
}
html[data-design="glass"] select option { background: var(--surface-solid); }
html[data-design="glass"] .switch input:checked + .track { background: var(--accent); border-color: var(--accent); }
html[data-design="glass"] .switch input:checked + .track::after { background: #fff; }

html[data-design="glass"] .tab { border-radius: 999px; }
html[data-design="glass"] .tab.is-active { background: var(--accent); border-color: var(--accent); color: #fff; }
html[data-design="glass"] .pill { background: var(--surface-3); }

html[data-design="glass"] .table-wrap { border-radius: 12px; border-color: var(--line); }

/* Ueberlagerungen: Modal, Popover, Palette, Toast brauchen festen Untergrund */
html[data-design="glass"] .modal-backdrop,
html[data-design="glass"] .palette-backdrop {
  background: rgba(4, 6, 12, 0.55);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}
html[data-design="glass"] .modal,
html[data-design="glass"] .palette,
html[data-design="glass"] .pop,
html[data-design="glass"] .toast {
  background: color-mix(in srgb, var(--surface-solid) 90%, transparent);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  border-color: var(--line-strong);
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5), inset 0 1px 0 var(--glass-hi);
}
html[data-design="glass"] .modal { border-radius: 20px; }
html[data-design="glass"] .palette { border-radius: 18px; }
html[data-design="glass"] .pop { border-radius: 14px; }
html[data-design="glass"] .toast { border-radius: 14px; }
html[data-design="glass"] .pop-item { border-radius: 9px; }
html[data-design="glass"] .palette-item { border-radius: 10px; }

/* 5) Anmeldung ---------------------------------------------------------------------- */
html[data-design="glass"] .gate { background: transparent; }
html[data-design="glass"] .gate-form-inner {
  border-radius: 22px;
  border-color: var(--line-strong);
  background: var(--surface);
  backdrop-filter: var(--blur);
  -webkit-backdrop-filter: var(--blur);
  box-shadow: 0 30px 80px rgba(0, 0, 0, 0.5), 0 0 0 1px var(--glass-hi) inset;
}
html[data-design="glass"] .gate-logo {
  border-radius: 14px;
  box-shadow: 0 10px 28px var(--accent-glow);
}

/* 6) Bewegung ----------------------------------------------------------------------- */
@media (prefers-reduced-motion: reduce) {
  html[data-design="glass"] * { transition: none !important; }
}

/* Browser ohne backdrop-filter bekommen deckende Flaechen statt durchsichtiger. */
@supports not ((backdrop-filter: blur(1px)) or (-webkit-backdrop-filter: blur(1px))) {
  html[data-design="glass"] {
    --surface: #171c26;
    --surface-2: #1e2430;
    --surface-3: #283040;
  }
}

/* 7) Handy ------------------------------------------------------------------------- */
@media (max-width: 560px) {
  /* Schlankere Bereichsleiste: mehr Platz für den Inhalt. */
  html[data-design="glass"] { --rail: 60px; }
  html[data-design="glass"] .rail { padding: 10px 0 14px; gap: 4px; }
  html[data-design="glass"] .rail-btn { width: 44px; height: 44px; border-radius: 12px; }
  html[data-design="glass"] .rail-brand { width: 40px; height: 40px; margin-bottom: 8px; }
  html[data-design="glass"] .content { padding: 14px 12px; }
  html[data-design="glass"] .topbar { padding: 10px 12px; gap: 8px; }
  /* Kennzahlen der Startseite als 2er-Raster statt vier großer Zeilen. */
  html[data-design="glass"] .dashboard-stats { grid-template-columns: repeat(2, minmax(0, 1fr)); gap: 10px; }
  html[data-design="glass"] .dashboard-stat { grid-template-columns: 1fr; gap: 8px; padding: 13px; }
  html[data-design="glass"] .dashboard-stat-icon { width: 34px; height: 34px; }
  html[data-design="glass"] .dashboard-stat strong { font-size: 22px; }
  html[data-design="glass"] .dashboard-hero { min-height: 0; padding: 22px 18px; }
  html[data-design="glass"] .dashboard-hero-actions { display: flex; flex-wrap: wrap; gap: 8px; }
  html[data-design="glass"] .dashboard-hero-actions .btn { flex: 1 1 auto; }
}