/**
 * assets/css/theme.css
 * LEO-INVENT
 * Version:  2.1.0
 * Geändert: 2026-05-14
 * Changelog:
 *   2.1.0 – 2026-05-14 – dark-mode Block ans Ende verschoben (CSS-Spezifität Fix)
 *   2.0.0 – 2026-05-14 – NG Design-System
 *
 * © Carsten Boehlke IT Consulting
 */

*, *::before, *::after {
    box-sizing: border-box;
    margin: 0;
    padding: 0;
}

/* ============================================================
   PRESET: LAVENDEL (Standard – Light Mode Default)
   ============================================================ */
:root {
    /* Akzent */
    --accent:         #5b5fc7;
    --accent2:        #8b6fd8;
    --accent-rgb:     91,95,199;
    --accent-light:   rgba(91,95,199,0.08);
    --accent-muted:   rgba(91,95,199,0.15);
    --accent-glow:    rgba(91,95,199,0.3);

    /* Hintergründe */
    --bg:             #ebedf2;
    --surface:        #ffffff;
    --surface-2:      #f6f7fa;
    --glass-bg:       rgba(255,255,255,0.85);
    --glass-border:   rgba(200,205,220,0.8);
    --blur:           20px;

    /* Sidebar */
    --sidebar-bg:     #f0f2f6;
    --sidebar-border: #e2e4ec;

    /* Schrift */
    --ink:            #111318;
    --ink-2:          #1e2540;
    --muted:          #505868;

    /* Rahmen */
    --border:         #e2e4ec;
    --border-2:       #d0d4de;

    /* Semantisch */
    --success:        #1a7a5a;
    --success-bg:     rgba(26,122,90,0.08);
    --warning:        #b45309;
    --warning-bg:     rgba(180,83,9,0.08);
    --danger:         #a03030;
    --danger-bg:      rgba(160,48,48,0.08);
    --info:           #1a4a8a;
    --info-bg:        rgba(26,74,138,0.08);

    /* Navigation */
    --nav-hover:      rgba(91,95,199,0.07);
    --nav-active:     rgba(91,95,199,0.12);

    /* Sonstiges */
    --divider:        #e2e4ec;
    --stat-bg:        rgba(91,95,199,0.05);
    --input-bg:       #ffffff;

    /* Schatten */
    --shadow-sm:      0 1px 3px rgba(0,0,0,0.06), 0 1px 2px rgba(0,0,0,0.04);
    --shadow-md:      0 4px 12px rgba(0,0,0,0.08);

    /* Radius */
    --r-lg:           18px;
    --r-md:           12px;
    --r-sm:           8px;

    /* Sidebar-Breite */
    --sidebar-w:      240px;

    /* Legacy-Aliase (Kompatibilität bestehender Seiten) */
    --tp:             #111318;
    --ts:             #505868;
    --tm:             #8a90a8;
    --glass-shadow:   rgba(0,0,0,0.08);
}

/* ============================================================
   PRESET: HAFEN (Warm, Bernstein)
   ============================================================ */
body.preset-hafen {
    --accent:         #c47c3a;
    --accent2:        #d4956a;
    --accent-rgb:     196,124,58;
    --accent-light:   rgba(196,124,58,0.08);
    --accent-muted:   rgba(196,124,58,0.15);
    --accent-glow:    rgba(196,124,58,0.3);
    --nav-hover:      rgba(196,124,58,0.07);
    --nav-active:     rgba(196,124,58,0.12);
    --stat-bg:        rgba(196,124,58,0.05);
    --bg:             #f0ebe4;
    --surface:        #fffaf6;
    --surface-2:      #f7f2ec;
    --glass-bg:       rgba(255,250,246,0.85);
    --glass-border:   rgba(210,190,170,0.7);
    --sidebar-bg:     #ede8e1;
    --sidebar-border: #ddd5c8;
    --border:         #ddd5c8;
    --border-2:       #cec4b5;
    --tp:             #1a1208;
    --ts:             #4a3828;
    --tm:             #8a7868;
}
body.preset-hafen.dark-mode {
    --accent:         #e09050;
    --accent2:        #f0b080;
    --accent-rgb:     224,144,80;
    --accent-glow:    rgba(224,144,80,0.35);
    --nav-active:     rgba(224,144,80,0.15);
    --tp:             rgba(255,255,255,0.93);
    --ts:             rgba(255,255,255,0.55);
    --tm:             rgba(255,255,255,0.28);
}

/* ============================================================
   PRESET: NORDSEE (Kühl, Korporativ)
   ============================================================ */
body.preset-nordsee {
    --accent:         #1a7ab5;
    --accent2:        #2196c4;
    --accent-rgb:     26,122,181;
    --accent-light:   rgba(26,122,181,0.08);
    --accent-muted:   rgba(26,122,181,0.15);
    --accent-glow:    rgba(26,122,181,0.3);
    --nav-hover:      rgba(26,122,181,0.07);
    --nav-active:     rgba(26,122,181,0.12);
    --stat-bg:        rgba(26,122,181,0.05);
    --bg:             #e8eef4;
    --surface:        #ffffff;
    --surface-2:      #f4f7fa;
    --glass-bg:       rgba(255,255,255,0.85);
    --glass-border:   rgba(180,200,220,0.75);
    --sidebar-bg:     #dde4ed;
    --sidebar-border: #c8d3df;
    --border:         #c8d3df;
    --border-2:       #b8c6d4;
}
body.preset-nordsee.dark-mode {
    --accent:         #3a9fd5;
    --accent2:        #50b8e0;
    --accent-rgb:     58,159,213;
    --accent-glow:    rgba(58,159,213,0.35);
    --nav-active:     rgba(58,159,213,0.15);
}

/* ============================================================
   PRESET: NACHT (Dark-Only, Cyan – erzwingt dunklen BG)
   ============================================================ */
body.preset-nacht {
    --accent:         #00c9a7;
    --accent2:        #00e5c0;
    --accent-rgb:     0,201,167;
    --accent-light:   rgba(0,201,167,0.08);
    --accent-muted:   rgba(0,201,167,0.15);
    --accent-glow:    rgba(0,201,167,0.35);
    --nav-hover:      rgba(0,201,167,0.07);
    --nav-active:     rgba(0,201,167,0.15);
    --stat-bg:        rgba(0,201,167,0.05);
    /* Immer dunkel */
    --bg:             #0d1117;
    --surface:        rgba(255,255,255,0.06);
    --surface-2:      rgba(255,255,255,0.03);
    --glass-bg:       rgba(255,255,255,0.07);
    --glass-border:   rgba(255,255,255,0.12);
    --sidebar-bg:     rgba(255,255,255,0.04);
    --sidebar-border: rgba(255,255,255,0.10);
    --ink:            rgba(255,255,255,0.93);
    --ink-2:          rgba(255,255,255,0.70);
    --muted:          rgba(255,255,255,0.40);
    --border:         rgba(255,255,255,0.10);
    --border-2:       rgba(255,255,255,0.16);
    --divider:        rgba(255,255,255,0.06);
    --input-bg:       rgba(255,255,255,0.05);
    --shadow-sm:      0 1px 3px rgba(0,0,0,0.3);
    --shadow-md:      0 4px 12px rgba(0,0,0,0.4);
    --tp:             rgba(255,255,255,0.93);
    --ts:             rgba(255,255,255,0.55);
    --tm:             rgba(255,255,255,0.28);
    --glass-shadow:   rgba(0,0,0,0.3);
}

/* ============================================================
   PRESET: FORST (Dunkelgrün-Sidebar, Gold)
   ============================================================ */
body.preset-forst {
    --accent:         #e8a020;
    --accent2:        #f0b840;
    --accent-rgb:     232,160,32;
    --accent-light:   rgba(232,160,32,0.08);
    --accent-muted:   rgba(232,160,32,0.15);
    --accent-glow:    rgba(232,160,32,0.3);
    --nav-hover:      rgba(232,160,32,0.08);
    --nav-active:     rgba(232,160,32,0.15);
    --stat-bg:        rgba(232,160,32,0.05);
    --bg:             #f0f4f0;
    --surface:        #ffffff;
    --surface-2:      #f4f7f4;
    --glass-bg:       rgba(255,255,255,0.85);
    --glass-border:   rgba(180,200,180,0.75);
    --sidebar-bg:     #1e3028;
    --sidebar-border: #2a4035;
    --border:         #cdd8cd;
    --border-2:       #bccabc;
}
/* Forst: Sidebar-Text immer hell (dunkle Sidebar) */
body.preset-forst .sidebar {
    --ink:      rgba(255,255,255,0.90);
    --ink-2:    rgba(255,255,255,0.65);
    --muted:    rgba(255,255,255,0.38);
    --tp:       rgba(255,255,255,0.90);
    --ts:       rgba(255,255,255,0.65);
    --tm:       rgba(255,255,255,0.38);
    --nav-hover:  rgba(255,255,255,0.08);
    --nav-active: rgba(232,160,32,0.22);
    --divider:    rgba(255,255,255,0.08);
}
body.preset-forst.dark-mode {
    --accent:         #f0b840;
    --accent2:        #ffd060;
    --accent-rgb:     240,184,64;
    --accent-glow:    rgba(240,184,64,0.35);
    --nav-active:     rgba(240,184,64,0.15);
    --sidebar-bg:     #141e18;
    --sidebar-border: #1e2e22;
}

/* ============================================================
   DARK MODE – steht nach allen Presets damit es immer gewinnt
   ============================================================ */
body.dark-mode {
    --accent:         #7b7ff0;
    --accent2:        #a78bfa;
    --accent-rgb:     123,127,240;
    --accent-light:   rgba(123,127,240,0.12);
    --accent-muted:   rgba(123,127,240,0.2);
    --accent-glow:    rgba(123,127,240,0.35);

    --bg:             #080c14;
    --surface:        rgba(255,255,255,0.06);
    --surface-2:      rgba(255,255,255,0.03);
    --glass-bg:       rgba(255,255,255,0.07);
    --glass-border:   rgba(255,255,255,0.12);

    --sidebar-bg:     rgba(255,255,255,0.04);
    --sidebar-border: rgba(255,255,255,0.10);

    --ink:            rgba(255,255,255,0.93);
    --ink-2:          rgba(255,255,255,0.70);
    --muted:          rgba(255,255,255,0.40);

    --border:         rgba(255,255,255,0.10);
    --border-2:       rgba(255,255,255,0.16);

    --success:        #34d399;
    --success-bg:     rgba(52,211,153,0.10);
    --warning:        #fbbf24;
    --warning-bg:     rgba(251,191,36,0.10);
    --danger:         #f87171;
    --danger-bg:      rgba(248,113,113,0.10);
    --info:           #60a5fa;
    --info-bg:        rgba(96,165,250,0.10);

    --nav-hover:      rgba(255,255,255,0.06);
    --nav-active:     rgba(123,127,240,0.15);

    --divider:        rgba(255,255,255,0.06);
    --stat-bg:        rgba(255,255,255,0.04);
    --input-bg:       rgba(255,255,255,0.05);

    --shadow-sm:      0 1px 3px rgba(0,0,0,0.3);
    --shadow-md:      0 4px 12px rgba(0,0,0,0.4);

    /* Legacy-Aliase */
    --tp:             rgba(255,255,255,0.93);
    --ts:             rgba(255,255,255,0.55);
    --tm:             rgba(255,255,255,0.28);
    --glass-shadow:   rgba(0,0,0,0.3);
}

/* ============================================================
   BASE
   ============================================================ */
body {
    background: var(--bg);
    font-family: 'DM Sans', sans-serif;
    font-weight: 400;
    font-size: 14px;
    line-height: 1.5;
    color: var(--ink);
    min-height: 100vh;
    transition: background 0.3s, color 0.3s;
}

/* Hintergrund-Gradient via ::before */
body::before {
    content: '';
    position: fixed;
    inset: 0;
    z-index: 0;
    pointer-events: none;
    background:
        radial-gradient(ellipse 70% 50% at 15% 10%, rgba(var(--accent-rgb),0.06) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 85% 85%, rgba(var(--accent-rgb),0.04) 0%, transparent 55%);
}

body.dark-mode::before {
    background:
        radial-gradient(ellipse 70% 50% at 15% 10%, rgba(var(--accent-rgb),0.14) 0%, transparent 60%),
        radial-gradient(ellipse 50% 40% at 85% 85%, rgba(var(--accent-rgb),0.10) 0%, transparent 55%);
}

/* Nacht-Preset: kein extra Gradient nötig */
body.preset-nacht::before { display: none; }