/* =========================================================
   SPECTRAL UI — gemeinsame Interaktions-Schicht für Dashboard und alle Portal-Seiten
   (Schiedsrichter, Caster, Player, Leaderboard, Bewerbungen, Formulare, Turniere).

   Farben/Flächen legt jede Seite selbst fest (style.css-Tokens bzw. Seiten-Tokens).
   Diese Datei vereinheitlicht nur das Verhalten in Logo-Farben: leuchtende Active-States,
   Hover mit Glow, deutliche Tastatur-Fokus-Ringe, Tabellen-Hover, Scrollbar.
   Greift über die gemeinsamen Klassenmuster (*-btn, *-tab, *-card) — kein Seiten-Markup nötig.
   ========================================================= */
:root { --sx-violet: #a855f7; --sx-magenta: #d946ef; --sx-cyan: #22d3ee; --sx-emerald: #22c55e;
    --sx-glass: linear-gradient(160deg, rgba(255,255,255,.055), rgba(255,255,255,.015));
    --sx-glass-border: rgba(168, 85, 247, .22); --sx-radius: 16px; }

/* Buttons: sanft anheben, violetter Schein, Druck-Feedback. */
button[class*="-btn"], a[class*="-btn"] {
    transition: transform .15s ease, box-shadow .2s ease, border-color .2s ease, background-color .2s ease, color .2s ease;
}
button[class*="-btn"]:hover:not(:disabled), a[class*="-btn"]:hover {
    transform: translateY(-1px);
    border-color: rgba(168, 85, 247, .65);
    box-shadow: 0 6px 18px rgba(168, 85, 247, .24);
}
button[class*="-btn"]:active:not(:disabled) { transform: translateY(0) scale(.98); }
button[class*="-btn"]:disabled { opacity: .55; cursor: not-allowed; }

/* Aktive Zustände (Tabs, Filter, Presets, Umschalter) leuchten in Magenta/Violett. */
:where([class*="-tab"], [class*="-subtab"], [class*="-btn"]).active,
:where([class*="-tab"], [class*="-btn"]).aktiv,
:where([class*="-btn"]).on,
[aria-pressed="true"] {
    border-color: rgba(217, 70, 239, .7) !important;
    box-shadow: 0 0 0 1px rgba(217, 70, 239, .45), 0 0 18px rgba(168, 85, 247, .45) !important;
}

/* Tastatur-Fokus: klar sichtbar (Barrierefreiheit), Maus-Klicks bleiben ohne Ring. */
:where(button, a, input, select, textarea, summary, [tabindex]):focus-visible {
    outline: 2px solid var(--sx-cyan);
    outline-offset: 2px;
    box-shadow: 0 0 0 4px rgba(34, 211, 238, .22);
}

/* Formularfelder: Hover-Hinweis in Markenfarbe. */
:where(input, select, textarea):not(:disabled):hover { border-color: rgba(168, 85, 247, .5) !important; }

/* Tabellen: Zeilen-Hover. */
table tbody tr { transition: background-color .15s ease; }
table tbody tr:hover > td { background-color: rgba(168, 85, 247, .08); }

/* Links in Fließtext: Cyan mit leuchtendem Hover. */
:where(p, li, td, [class*="-sub"], [class*="-meta"]) a:hover { text-shadow: 0 0 10px rgba(34, 211, 238, .45); }

/* Markierung und Scrollbar in Logo-Farben. */
::selection { background: rgba(168, 85, 247, .38); color: #fff; }
* { scrollbar-color: rgba(168, 85, 247, .55) transparent; scrollbar-width: thin; }
::-webkit-scrollbar { width: 9px; height: 9px; }
::-webkit-scrollbar-thumb { background: linear-gradient(180deg, var(--sx-violet), var(--sx-magenta)); border-radius: 10px; }
::-webkit-scrollbar-track { background: transparent; }

/* Badges/Chips etwas lebendiger. */
:where([class*="-badge"], .badge) { letter-spacing: .02em; }

@media (prefers-reduced-motion: reduce) {
    button[class*="-btn"], a[class*="-btn"] { transition: none; }
    button[class*="-btn"]:hover:not(:disabled), a[class*="-btn"]:hover, button[class*="-btn"]:active:not(:disabled) { transform: none; }
}

/* =========================================================
   PREMIUM DARK-GLASS — einheitliche Karten/Panels auf allen Seiten (nur dunkles Theme).
   Greift über die Karten-Klassen der Seiten: Dashboard (con-panel/con-stat/con-mod-card),
   Player (mp-card), Schiedsrichter (rf-card), Caster (cp-card), Leaderboard (lb-card),
   Formulare (fo-card), Proteste (pt-card), Team-/Turnier-Anmeldung (ta-card), Server-Wahl (server-card).
   Bewusst KEIN backdrop-filter/transform auf großen Containern: beides macht sie zum Bezugsrahmen
   für position:fixed-Kinder (Dropdowns, Mini-Player) — nur kleine Kacheln heben sich beim Hover an.
   ========================================================= */
html:not([data-theme="light"]) :where(.con-panel, .mp-card, .rf-card, .cp-card, .lb-card, .fo-card, .pt-card, .ta-card) {
    background-image: var(--sx-glass);
    border-color: var(--sx-glass-border);
    border-radius: var(--sx-radius);
    box-shadow: 0 10px 30px rgba(0, 0, 0, .28), inset 0 1px 0 rgba(255, 255, 255, .06);
    transition: border-color .25s ease, box-shadow .25s ease;
}
html:not([data-theme="light"]) :where(.con-panel, .mp-card, .rf-card, .cp-card, .lb-card, .fo-card, .pt-card, .ta-card):hover {
    border-color: rgba(168, 85, 247, .42);
    box-shadow: 0 14px 36px rgba(0, 0, 0, .32), 0 0 22px rgba(168, 85, 247, .12), inset 0 1px 0 rgba(255, 255, 255, .08);
}
/* Kleine Kacheln: sanftes Anheben mit Cyan-Glow. */
:where(.con-stat, .con-mod-card, .server-card, .st-card) { transition: transform .2s ease, border-color .2s ease, box-shadow .2s ease; }
:where(.con-stat, .con-mod-card, .server-card):hover {
    transform: translateY(-2px);
    border-color: rgba(34, 211, 238, .45);
    box-shadow: 0 10px 24px rgba(0, 0, 0, .28), 0 0 16px rgba(34, 211, 238, .14);
}
/* Klare Überschriften-Hierarchie: Seitentitel mit Markenverlauf, Panel-Titel mit Akzentstrich. */
html:not([data-theme="light"]) :where(.con-head h3, .mp-title, .rf-title, .cp-title, .lb-title) { letter-spacing: -.01em; }
:where(.con-panel > h4, .con-panel-head > h4) { position: relative; padding-left: 12px; }
:where(.con-panel > h4, .con-panel-head > h4)::before {
    content: ''; position: absolute; left: 0; top: .2em; bottom: .2em; width: 3px; border-radius: 3px;
    background: linear-gradient(180deg, var(--sx-violet), var(--sx-cyan));
}
/* Status-Farben einheitlich: Emerald = aktiv/ok, Amber = wartet, Rot = Fehler. */
:where(.st-on, .con-item-tag.active, .con-mod-card-status.on) { color: #4ade80; }
:where(.con-mod-card-status.on) { box-shadow: 0 0 10px rgba(34, 197, 94, .25); }
@media (prefers-reduced-motion: reduce) {
    :where(.con-stat, .con-mod-card, .server-card, .st-card):hover { transform: none; }
}