/**
 * Projekt: Skool Dimension
 * Datei: css/darktheme/dark.css
 *
 * Zweck:
 * Vollständiges Dark Theme für Frontend, Backend und Dokumentation.
 *
 * Hinweise:
 * - Diese Datei wird zusätzlich zu light.css geladen.
 * - Aktiv wird sie nur, wenn html[data-theme="dark"] gesetzt ist.
 * - Der Wechsel erfolgt über js/theme-switcher.js.
 */

/* ------------------------------------------------------------
   1. Dark-Theme-Variablen
------------------------------------------------------------ */

html[data-theme="dark"] {
    color-scheme: dark;

    --bg: #0d1422;
    --bg-gradient: radial-gradient(circle at top left, rgba(125, 178, 255, 0.12), transparent 32rem),
                   linear-gradient(180deg, #111a2b 0%, #0d1422 45%, #090f1a 100%);

    --surface: #141e31;
    --surface-soft: #1b2840;
    --surface-strong: #22324f;

    --text: #f4f7fb;
    --text-soft: #d7dfeb;
    --muted: #aab6c7;

    --primary: #8ab9ff;
    --primary-hover: #b7d3ff;
    --primary-soft: #182844;
    --primary-ring: rgba(138, 185, 255, 0.25);

    --secondary: #52637a;
    --secondary-hover: #647895;
    --danger: #b93c31;

    --success-bg: #0f2918;
    --success-text: #9ce7aa;
    --success-border: #2d7a3c;

    --error-bg: #2c171a;
    --error-text: #ffb6bd;
    --error-border: #8d4148;

    --info-bg: #172844;
    --info-text: #d6e8ff;
    --info-border: #335f9e;

    --warning-bg: #2d230f;
    --warning-text: #ffe1a3;
    --warning-border: #9a762a;

    --border: #2a3950;
    --border-strong: #3b4d67;

    --shadow-sm: 0 4px 16px rgba(0, 0, 0, 0.26);
    --shadow-md: 0 12px 32px rgba(0, 0, 0, 0.32);
    --shadow-lg: 0 24px 60px rgba(0, 0, 0, 0.45);
}

/* ------------------------------------------------------------
   2. Basis im Dark Theme
------------------------------------------------------------ */

html[data-theme="dark"] body {
    color: var(--text);
    background: var(--bg);
    background-image: var(--bg-gradient);
}

html[data-theme="dark"] a {
    color: var(--primary);
}

html[data-theme="dark"] code {
    color: var(--primary-hover);
    background: var(--primary-soft);
}

html[data-theme="dark"] ::selection {
    color: #0d1422;
    background: var(--primary);
}

/* ------------------------------------------------------------
   3. Header, Navigation und Logos
------------------------------------------------------------ */

html[data-theme="dark"] .site-header {
    background: rgba(20, 30, 49, 0.9);
    border-bottom-color: var(--border);
}

/* Das Logo bleibt auch im Dark Mode als eigene Flaeche gut lesbar. */
html[data-theme="dark"] .logo {
    background: var(--surface-soft);
    border-color: var(--border-strong);
}

html[data-theme="dark"] .site-navigation {
    background: #17345f;
}

/* Aktive oder fokussierte Menüpunkte sollen sich im Dunkelmodus klar abheben. */
html[data-theme="dark"] .site-navigation a[aria-current="page"],
html[data-theme="dark"] .site-navigation a:hover,
html[data-theme="dark"] .site-navigation a:focus-visible {
    background: #244f8f;
}

html[data-theme="dark"] .meta-navigation a {
    color: var(--text-soft);
}

html[data-theme="dark"] .login-status {
    color: var(--muted);
}

/* ------------------------------------------------------------
   4. Buttons, Switch und Formulare
------------------------------------------------------------ */

html[data-theme="dark"] .button,
html[data-theme="dark"] button {
    color: #08111f;
    background: var(--primary);
}

html[data-theme="dark"] .button:hover,
html[data-theme="dark"] .button:focus-visible,
html[data-theme="dark"] button:hover,
html[data-theme="dark"] button:focus-visible {
    color: #08111f;
    background: var(--primary-hover);
}

html[data-theme="dark"] .button-secondary {
    color: #ffffff;
    background: var(--secondary);
}

html[data-theme="dark"] .button-secondary:hover,
html[data-theme="dark"] .button-secondary:focus-visible {
    color: #ffffff;
    background: var(--secondary-hover);
}

html[data-theme="dark"] .button-danger {
    color: #ffffff;
    background: var(--secondary);
}

html[data-theme="dark"] .button-danger:hover,
html[data-theme="dark"] .button-danger:focus-visible {
    color: #ffffff;
    background: var(--danger);
}

/* Formulare bleiben dunkel, aber mit klaren Kontrasten und Fokuszustaenden. */
html[data-theme="dark"] .theme-toggle {
    color: var(--text);
    background: var(--surface-soft);
    border-color: var(--border-strong);
}

html[data-theme="dark"] input,
html[data-theme="dark"] textarea,
html[data-theme="dark"] select {
    color: var(--text);
    background: #101827;
    border-color: var(--border);
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #8794a8;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] textarea:focus,
html[data-theme="dark"] select:focus {
    border-color: var(--primary);
    box-shadow: 0 0 0 3px var(--primary-ring);
}

/* ------------------------------------------------------------
   5. Hero, Karten und Tabellen
------------------------------------------------------------ */

html[data-theme="dark"] .hero {
    background: radial-gradient(circle at top right, rgba(138, 185, 255, 0.14), transparent 24rem), linear-gradient(135deg, #172033, #0d1422);
}

/* Karten, Formulare und Tabellen erhalten einen gemeinsamen Dunkelmodus-Look. */
html[data-theme="dark"] .card,
html[data-theme="dark"] .seminar-card,
html[data-theme="dark"] .detail-card,
html[data-theme="dark"] .contact-form,
html[data-theme="dark"] .login-form,
html[data-theme="dark"] .register-form,
html[data-theme="dark"] .admin-form,
html[data-theme="dark"] .table-wrapper,
html[data-theme="dark"] .doc-figure {
    background: #121b2c;
    border-color: var(--border);
}

html[data-theme="dark"] .hero-image img,
html[data-theme="dark"] .doc-figure img {
    border-color: var(--border-strong);
    box-shadow: var(--shadow-lg);
}

html[data-theme="dark"] .data-table th {
    color: var(--text);
    background: var(--primary-soft);
}

html[data-theme="dark"] .data-table th,
html[data-theme="dark"] .data-table td {
    border-bottom-color: var(--border);
}

html[data-theme="dark"] .data-table tbody tr:hover {
    background: var(--surface-soft);
}

/* ------------------------------------------------------------
   6. Meldungen, Badges und Hilfsflächen
------------------------------------------------------------ */

/* Meldungstypen nutzen dieselbe Semantik wie im Light Theme, nur dunkler abgestimmt. */
html[data-theme="dark"] .flash-success,
html[data-theme="dark"] .message-success {
    background: var(--success-bg);
    color: var(--success-text);
    border-color: var(--success-border);
}

html[data-theme="dark"] .flash-error,
html[data-theme="dark"] .message-error {
    background: var(--error-bg);
    color: var(--error-text);
    border-color: var(--error-border);
}

html[data-theme="dark"] .message-info,
html[data-theme="dark"] .search-result-info,
html[data-theme="dark"] .login-hints,
html[data-theme="dark"] .global-search {
    background: var(--info-bg);
    color: var(--info-text);
    border-color: var(--info-border);
}

html[data-theme="dark"] .message-warning {
    background: var(--warning-bg);
    color: var(--warning-text);
    border-color: var(--warning-border);
}

html[data-theme="dark"] .badge-muted {
    color: var(--text-soft);
    background: #2a3950;
}

html[data-theme="dark"] .message pre {
    color: #f9fafb;
    background: #080d16;
}

/* ------------------------------------------------------------
   7. Footer und Scrollbar
------------------------------------------------------------ */

/* Footer und Scrollbar runden das Theme bis in den Browserrahmen hinein ab. */
html[data-theme="dark"] .site-footer {
    background: var(--surface);
    border-top-color: var(--border);
}

html[data-theme="dark"] {
    scrollbar-color: #3b4d67 #0d1422;
}