/* dashboard-leicht.css — NEUER Baustein (UNIVERSAL §21 Regel 2/4), NICHT in die App eingebunden.
   „Leichteres Dashboard": der schwere Teal-Hintergrund (#469ea0, fest in premium-dashboard.css und combined-all.css
   verdrahtet) wird zum Seitengrund der aktiven Farbwelt; Kennzahlen-Karten, Filter und Listen verlieren ihre dicken
   Rahmen und Vollflächen; die gelben Hinweisleisten werden leise.
   Wirkt NUR mit <html data-dashboard="leicht">. Als LETZTES Stylesheet laden (nach theme-*.css, navbar-offen.css).
   Farben nur aus Tokens der aktiven Farbwelt (--bg-base, --bg-surface, --bg-subtle, --border-default, --accent, --text-*):
   gilt darum für Original-Farben und Kirschrot gleichermaßen.
   Gesehen im Mockup: mockups/design-kirsch/lehrer-dashboard.html, schueler-dashboard.html */

/* 0 — Rahmenstärke: das Token --border-thin ist projektweit 3 px (premium-design-tokens.css); hier 1 px.
       Dadurch werden Eingabefelder, Knöpfe, Listenkarten, Status-Marken und Avatare im Dashboard auf einmal leichter. */
:root[data-dashboard="leicht"] { --border-thin: 1px; }

/* 1 — Seitengrund */
:root[data-dashboard="leicht"] .dashboard-page,
:root[data-dashboard="leicht"] body.page-app { background: var(--bg-base); }

/* 2 — Kennzahlen: weiß, Haarlinie, kleinere Zahl */
:root[data-dashboard="leicht"] .dashboard-stat {
    background: var(--neutral-0);   /* nicht --bg-surface: das ist in den Original-Farben Hellblau (theme.css) */
    border: 1px solid var(--border-default);
    box-shadow: none;
    padding: var(--space-4);
}
:root[data-dashboard="leicht"] .dashboard-stat-label { color: var(--text-muted); font-weight: 600; }
:root[data-dashboard="leicht"] .dashboard-stat-value { font-size: 2rem; font-weight: 600; line-height: 1.15; }
:root[data-dashboard="leicht"] .dashboard-stat-change { color: var(--text-muted); }

/* 3 — Filterleiste und Liste: keine Vollfläche, keine dicken Linien */
:root[data-dashboard="leicht"] #filter-sidebar {
    background: transparent;
    border: 0;
    border-right: 1px solid var(--border-default);
    box-shadow: none;
}
:root[data-dashboard="leicht"] .filter-section-header {
    background: transparent;
    border: 0;
    border-bottom: 1px solid var(--border-default);
    border-radius: 0;
    box-shadow: none;
}
:root[data-dashboard="leicht"] .lessons-container {
    background: transparent;
    border: 0;
    box-shadow: none;
}
:root[data-dashboard="leicht"] .dashboard-card {
    background: var(--neutral-0);
    border: 1px solid var(--border-default);
    box-shadow: none;
}

/* 4 — Hinweisleisten leise: Haarlinie und helle Fläche statt Gelb/Orange */
:root[data-dashboard="leicht"] .banner,
:root[data-dashboard="leicht"] .banner--warn,
:root[data-dashboard="leicht"] #fair-use-banner {
    background: var(--bg-subtle);
    border: 0;
    border-bottom: 1px solid var(--border-default);
    border-radius: 0;
    color: var(--text-secondary);
}
:root[data-dashboard="leicht"] #fair-use-banner button,
:root[data-dashboard="leicht"] #fair-use-banner .btn {
    background: transparent;
    color: var(--accent);
    border: 0;
    font-weight: 600;
}

/* 5 — Detail-Kasten in der Stundenkarte: weiß (nicht --bg-surface, das ist in den Original-Farben Hellblau) */
:root[data-dashboard="leicht"] .lesson-item-body {
    background: var(--neutral-0);
    border: 1px solid var(--border-default);
}

/* 6 — Kalender: Seitenleiste ohne Teal-Vollfläche (#469ea0 in week-view-layout.css), Bedienknöpfe leise */
:root[data-dashboard="leicht"] #sidebar.wk-sidebar,
:root[data-dashboard="leicht"] .wk-sidebar,
:root[data-dashboard="leicht"] .cal-week-nav,
:root[data-dashboard="leicht"] .cal-view-mode-bar {
    background: var(--neutral-0);
    border-color: var(--border-default);
    box-shadow: none;
}
:root[data-dashboard="leicht"] .wk-sidebar {
    border-right: 1px solid var(--border-default);
}
:root[data-dashboard="leicht"] .cal-week-nav button,
:root[data-dashboard="leicht"] .cal-view-mode-bar button,
:root[data-dashboard="leicht"] .wk-sidebar .btn {
    background: var(--bg-subtle);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    box-shadow: none;
}
:root[data-dashboard="leicht"] .cal-view-mode-bar button[aria-pressed="true"],
:root[data-dashboard="leicht"] .cal-view-mode-bar button.active,
:root[data-dashboard="leicht"] .cal-view-mode-bar button.is-active {
    background: var(--accent);
    border-color: var(--accent);
    color: var(--text-on-accent);
}

/* 6b — Kalender: week-view-layout.css setzt Hintergrund und rechte Linie der Seitenleiste mit !important (3 px, Akzent) */
:root[data-dashboard="leicht"] #sidebar.wk-sidebar {
    background: var(--neutral-0) !important;
    border-right: 1px solid var(--border-default) !important;
}
:root[data-dashboard="leicht"] .cal-nav-btn {
    background: var(--bg-subtle);
    border: 1px solid var(--border-default);
    color: var(--text-primary);
    box-shadow: none;
}

/* 6c — Kalender-Bedienknöpfe: Hintergrund wird an anderer Stelle fest gesetzt; hier mit Vorrang */
:root[data-dashboard="leicht"] #sidebar .cal-nav-btn,
:root[data-dashboard="leicht"] #sidebar .cal-view-mode-bar button:not([aria-pressed="true"]):not(.active):not(.is-active) {
    background: var(--bg-subtle) !important;
    border: 1px solid var(--border-default) !important;
}