/* ============================================================
   DPSGamers User-Portal – Theme-System
   Farben als RGB-Tripel-Variablen; pro Theme via
   html[data-theme="..."] umgeschaltet. Tailwind-Utilities
   (slate/white/indigo) sind in tailwind.config auf diese
   Variablen gemappt -> ein Theme-Wechsel flippt alles.
   Standard = dark. Auswahl wird in localStorage gespeichert.
   ============================================================ */

/* ---- Standard: Dark (Black) ---- */
:root, html[data-theme="dark"] {
    --c-bg:           13 13 15;
    --c-surface:      24 24 27;
    --c-surface2:     32 32 36;
    --c-border:       42 42 48;
    --c-text:         244 244 245;
    --c-muted:        161 161 170;
    --c-accent:       99 102 241;
    --c-accent-hover: 129 140 248;
    --c-on-accent:    255 255 255;
}

/* ---- Light (White) ---- */
html[data-theme="light"] {
    --c-bg:           255 255 255;
    --c-surface:      244 244 245;
    --c-surface2:     228 228 231;
    --c-border:       212 212 216;
    --c-text:         24 24 27;
    --c-muted:        82 82 91;
    --c-accent:       79 70 229;
    --c-accent-hover: 67 56 202;
    --c-on-accent:    255 255 255;
}

/* ---- Dark-Akzent-Varianten (Basis erbt von :root) ---- */
html[data-theme="ocean"]  { --c-accent: 13 148 136;  --c-accent-hover: 20 184 166; --c-on-accent: 255 255 255; }
html[data-theme="emerald"]{ --c-accent: 16 163 74;   --c-accent-hover: 34 197 94;  --c-on-accent: 255 255 255; }
html[data-theme="ember"]  { --c-accent: 212 168 67;  --c-accent-hover: 230 198 107; --c-on-accent: 38 28 12; }
html[data-theme="royal"]  { --c-accent: 147 51 234;  --c-accent-hover: 168 85 247; --c-on-accent: 255 255 255; }
html[data-theme="ruby"]   { --c-accent: 225 75 74;   --c-accent-hover: 240 110 110; --c-on-accent: 255 255 255; }

/* ---- Komponenten ---- */
body {
    background: rgb(var(--c-bg)) !important;
    color: rgb(var(--c-text));
}

.glass-effect {
    background: rgb(var(--c-surface) / 0.72) !important;
    border: 1px solid rgb(var(--c-border)) !important;
}

.gradient-text {
    background: linear-gradient(135deg, rgb(var(--c-accent-hover)) 0%, rgb(var(--c-accent)) 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.nav-item:hover     { background: rgb(var(--c-accent) / 0.10); border-left-color: rgb(var(--c-accent)); }
.nav-item.active    { background: rgb(var(--c-accent) / 0.18); border-left-color: rgb(var(--c-accent)); }

.module-card        { background: rgb(var(--c-surface2)) !important; border: 1px solid rgb(var(--c-border)) !important; }
.module-card:hover  { border-color: rgb(var(--c-accent) / 0.5) !important; box-shadow: 0 10px 40px rgb(var(--c-accent) / 0.10); transform: translateY(-2px); }

.stat-card          { background: rgb(var(--c-surface2)) !important; border: 1px solid rgb(var(--c-border)) !important; }

.btn-primary        { background: linear-gradient(135deg, rgb(var(--c-accent)) 0%, rgb(var(--c-accent-hover)) 100%) !important; color: rgb(var(--c-on-accent)) !important; }
.btn-primary:hover  { box-shadow: 0 10px 30px rgb(var(--c-accent) / 0.35); transform: translateY(-2px); }

.filter-tab.active  { background: linear-gradient(135deg, rgb(var(--c-accent)) 0%, rgb(var(--c-accent-hover)) 100%) !important; color: rgb(var(--c-on-accent)) !important; }

.data-row           { background: rgb(var(--c-surface2) / 0.5) !important; border: 1px solid rgb(var(--c-border)) !important; }

/* Wappen + Akzent-Flächen folgen dem Theme */
.brand-crest        { background: rgb(var(--c-accent)); color: rgb(var(--c-on-accent)); }

/* Theme-Auswahl-Control */
.theme-select {
    background: rgb(var(--c-surface2));
    color: rgb(var(--c-text));
    border: 1px solid rgb(var(--c-border));
    border-radius: 8px;
    padding: 6px 10px;
    font-size: 13px;
    width: 100%;
    cursor: pointer;
}
.theme-select:focus { outline: none; border-color: rgb(var(--c-accent)); }