/* ==========================================================
   HomeBase · Dark Mode
   Wird bewusst als LETZTE CSS-Datei geladen.
   Das bestehende Light-Theme bleibt unverändert.
   ========================================================== */


/* ----------------------------------------------------------
   Grundfarben
   ---------------------------------------------------------- */

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

    --background: #101217;
    --surface: #181b22;
    --surface-hover: #20242d;

    --text: #edf0f5;
    --muted: #9ca6b7;
    --border: #303641;

    --accent: #7184ff;
    --accent-hover: #8293ff;

    --danger: #ef6b6b;
    --success: #45b985;

    --shadow: 0 6px 24px rgba(0, 0, 0, .28);
}


html[data-theme="dark"],
html[data-theme="dark"] body {
    background: var(--background) !important;
    color: var(--text) !important;
}


/* ----------------------------------------------------------
   Hauptbereich
   ---------------------------------------------------------- */

html[data-theme="dark"] .page,
html[data-theme="dark"] .login-page,
html[data-theme="dark"] main {
    background-color: var(--background) !important;
    color: var(--text);
}


/* Verhindert helle großflächige Layer */

html[data-theme="dark"] .page::before,
html[data-theme="dark"] .page::after,
html[data-theme="dark"] main::before,
html[data-theme="dark"] main::after {
    background-color: transparent;
}


/* ----------------------------------------------------------
   Topbar
   ---------------------------------------------------------- */

html[data-theme="dark"] .topbar {
    background: #17191f !important;
    border-color: #292e38 !important;
    color: var(--text);
}

html[data-theme="dark"] .topbar-nav-link {
    color: #aab3c2;
}

html[data-theme="dark"] .topbar-nav-link:hover {
    color: #ffffff;
    background: rgba(255,255,255,.05);
}

html[data-theme="dark"] .topbar-nav-link.active {
    color: #8797ff;
    background: rgba(92, 110, 255, .12);
}


/* ----------------------------------------------------------
   Standardtexte
   ---------------------------------------------------------- */

html[data-theme="dark"] .page h1,
html[data-theme="dark"] .page h2,
html[data-theme="dark"] .page h3,
html[data-theme="dark"] .page h4,
html[data-theme="dark"] .page strong {
    color: var(--text);
}

html[data-theme="dark"] .page-header p,
html[data-theme="dark"] .page small,
html[data-theme="dark"] .muted {
    color: var(--muted);
}


/* ----------------------------------------------------------
   Eingabefelder
   ---------------------------------------------------------- */

html[data-theme="dark"] input,
html[data-theme="dark"] select,
html[data-theme="dark"] textarea {
    background-color: #15181f !important;
    color: var(--text) !important;
    border-color: #353b47 !important;
}

html[data-theme="dark"] input::placeholder,
html[data-theme="dark"] textarea::placeholder {
    color: #778193 !important;
}

html[data-theme="dark"] input:focus,
html[data-theme="dark"] select:focus,
html[data-theme="dark"] textarea:focus {
    background-color: #191d25 !important;
    border-color: #667cff !important;
    box-shadow: 0 0 0 3px rgba(102,124,255,.14) !important;
}


/* ----------------------------------------------------------
   Standard Buttons
   ---------------------------------------------------------- */

html[data-theme="dark"] .button:not(.primary) {
    background-color: #20242c;
    color: #e5e9f0;
    border-color: #353b46;
}

html[data-theme="dark"] .button:not(.primary):hover {
    background-color: #292e38;
    border-color: #444b58;
}


/* ----------------------------------------------------------
   Dashboard
   ---------------------------------------------------------- */

html[data-theme="dark"] .searchbar input {
    background: #191c23 !important;
    color: var(--text) !important;
    border-color: #303641 !important;
}

html[data-theme="dark"] .app-card {
    background-color: #191c23 !important;
    border-color: #2d333e !important;
    color: var(--text);
    box-shadow: 0 8px 26px rgba(0,0,0,.22);
}

html[data-theme="dark"] .app-card:hover {
    background-color: #1e222b !important;
    border-color: #414958 !important;
}

html[data-theme="dark"] .app-card-content strong {
    color: #f0f2f6;
}

html[data-theme="dark"] .app-card-content span,
html[data-theme="dark"] .app-card-content small {
    color: #9aa5b5;
}


/* ----------------------------------------------------------
   Allgemeine Cards / Panels
   Nur background-color überschreiben:
   bestehende Akzent-Verläufe bleiben erhalten.
   ---------------------------------------------------------- */

html[data-theme="dark"] .card,
html[data-theme="dark"] .panel,
html[data-theme="dark"] .task-form-card,
html[data-theme="dark"] .file-toolbar-card,
html[data-theme="dark"] .modal-content {
    background-color: #191c23 !important;
    border-color: #303641 !important;
    color: var(--text);
}


/* ----------------------------------------------------------
   Tabellen allgemein
   ---------------------------------------------------------- */

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

html[data-theme="dark"] th {
    color: #a6b0c0;
    border-color: #303641 !important;
}

html[data-theme="dark"] td {
    border-color: #292f39 !important;
}

html[data-theme="dark"] tbody tr:hover {
    background-color: rgba(255,255,255,.025);
}


/* ==========================================================
   HAUSHALT
   ========================================================== */

html[data-theme="dark"] .household-page {
    color: var(--text);
}

html[data-theme="dark"] .household-eyebrow {
    color: #a4adbb;
}

html[data-theme="dark"] .household-page-header h1,
html[data-theme="dark"] .household-page-header h2 {
    color: #f1f3f7;
}

html[data-theme="dark"] .household-page-header p {
    color: #9da7b6;
}


/* ----------------------------------------------------------
   Haushalt Übersicht
   ---------------------------------------------------------- */

html[data-theme="dark"] .household-card {
    background-color: #191c23 !important;
    border-color: #303641 !important;
}


/* ----------------------------------------------------------
   Pelletheizung
   Orange bleibt Akzentfarbe
   ---------------------------------------------------------- */

html[data-theme="dark"] .heating-chart-card,
html[data-theme="dark"] .heating-history {
    background-color: #191c23 !important;
    border-color: rgba(234,88,12,.28) !important;
    box-shadow: 0 8px 28px rgba(0,0,0,.24) !important;
}

html[data-theme="dark"] .heating-chart-heading h2,
html[data-theme="dark"] .heating-history-heading h2 {
    color: #f1f3f7 !important;
}

html[data-theme="dark"] .heating-chart-heading p,
html[data-theme="dark"] .heating-history-heading p {
    color: #9ea8b8 !important;
}

html[data-theme="dark"] .heating-table {
    color: #e7eaf0;
}

html[data-theme="dark"] .heating-table th {
    color: #abb4c2 !important;
    background-color: rgba(255,255,255,.025) !important;
    border-color: #303641 !important;
}

html[data-theme="dark"] .heating-table td {
    color: #e2e6ec;
    border-color: #2c323c !important;
}

html[data-theme="dark"] .heating-table tbody tr:nth-child(even) {
    background-color: rgba(255,255,255,.018) !important;
}

html[data-theme="dark"] .heating-table tbody tr:hover {
    background-color: rgba(234,88,12,.055) !important;
}

html[data-theme="dark"] .heating-date {
    color: #fb923c !important;
}


/* ----------------------------------------------------------
   Wasser
   Blau/Türkis bleibt Akzentfarbe
   ---------------------------------------------------------- */

html[data-theme="dark"] .water-page .heating-history,
html[data-theme="dark"] .water-page .heating-chart-card,
html[data-theme="dark"] .water-table {
    background-color: #191c23 !important;
}

html[data-theme="dark"] .water-page .heating-history {
    border-color: rgba(14,165,233,.28) !important;
}

html[data-theme="dark"] .water-page .heating-table tbody tr:hover {
    background-color: rgba(14,165,233,.06) !important;
}


/* ----------------------------------------------------------
   Strom
   Blau / Grün / Gelb vorhandener Bereiche bleibt erhalten
   ---------------------------------------------------------- */

html[data-theme="dark"] .electricity-page .heating-history,
html[data-theme="dark"] .electricity-page .heating-chart-card,
html[data-theme="dark"] .electricity-monthly-table,
html[data-theme="dark"] .electricity-annual-table {
    background-color: #191c23 !important;
}

html[data-theme="dark"] .electricity-page .heating-table tbody tr:hover {
    background-color: rgba(92,110,255,.055) !important;
}


/* ----------------------------------------------------------
   Pelletlieferungen
   Braun/Orange bleibt Akzentfarbe
   ---------------------------------------------------------- */

html[data-theme="dark"] .pellets-page .heating-history,
html[data-theme="dark"] .pellets-page .heating-chart-card,
html[data-theme="dark"] .pellets-table {
    background-color: #191c23 !important;
}

html[data-theme="dark"] .pellets-page .heating-history {
    border-color: rgba(217,119,6,.30) !important;
}

html[data-theme="dark"] .pellets-page .heating-table tbody tr:hover {
    background-color: rgba(217,119,6,.06) !important;
}


/* ----------------------------------------------------------
   Haushalt Formulare
   ---------------------------------------------------------- */

html[data-theme="dark"] .task-form-card {
    background-color: #191c23 !important;
    border-color: #303641 !important;
}

html[data-theme="dark"] .task-form-card label {
    color: #dfe4eb !important;
}

html[data-theme="dark"] .task-form-card small {
    color: #929cac !important;
}

html[data-theme="dark"] .task-form-card input,
html[data-theme="dark"] .task-form-card select,
html[data-theme="dark"] .task-form-card textarea {
    background: #14171d !important;
    color: #edf0f5 !important;
    border-color: #353c48 !important;
}


/* ----------------------------------------------------------
   Dropdown / Zeilenmenüs
   ---------------------------------------------------------- */

html[data-theme="dark"] .electricity-row-menu-panel {
    background: #20242c !important;
    border-color: #363d48 !important;
    box-shadow: 0 10px 30px rgba(0,0,0,.35) !important;
}

html[data-theme="dark"] .electricity-row-menu-item {
    color: #e8ebf0 !important;
}

html[data-theme="dark"] .electricity-row-menu-item:hover {
    background: rgba(255,255,255,.055) !important;
}


/* ----------------------------------------------------------
   Mobile Household Cards
   ---------------------------------------------------------- */

@media (max-width: 700px) {

    html[data-theme="dark"] .heating-history {
        background: transparent !important;
    }

    html[data-theme="dark"] .heating-table tr {
        background-color: #191c23 !important;
        border-color: #303641 !important;
        box-shadow: 0 6px 20px rgba(0,0,0,.20) !important;
    }

    html[data-theme="dark"] .heating-table td::before {
        color: #949eae !important;
    }
}



/* ==========================================================
   HomeBase Dark Mode · echte dunkle Flächen v3
   ========================================================== */


/* ----------------------------------------------------------
   DASHBOARD APP-KARTEN
   ---------------------------------------------------------- */

html[data-theme="dark"] .app-card {
    --card-bg: #191c23 !important;

    background: #191c23 !important;
    color: #edf0f5 !important;

    border-color: #303641 !important;

    box-shadow:
        0 8px 26px rgba(0, 0, 0, .24) !important;
}

html[data-theme="dark"] .app-card:hover {
    --card-bg: #20242d !important;

    background: #20242d !important;
    border-color: #424a58 !important;
}

html[data-theme="dark"] .app-card-content strong {
    color: #f1f3f7 !important;
}

html[data-theme="dark"] .app-card-content span,
html[data-theme="dark"] .app-card-content small {
    color: #9ca6b6 !important;
}


/* ----------------------------------------------------------
   PELLETHEIZUNG
   ---------------------------------------------------------- */

html[data-theme="dark"]
.heating-page
.heating-chart-card {
    background:
        linear-gradient(
            145deg,
            rgba(78, 36, 15, .30),
            #191c23 42%,
            #191c23 100%
        ) !important;

    border-color: rgba(234, 88, 12, .30) !important;
}


html[data-theme="dark"]
.heating-page
.heating-history {
    background: #191c23 !important;
    border-color: rgba(234, 88, 12, .28) !important;
}


html[data-theme="dark"]
.heating-page
.heating-history-heading {
    background:
        linear-gradient(
            90deg,
            rgba(234, 88, 12, .13),
            rgba(234, 88, 12, .025)
        ) !important;
}


html[data-theme="dark"]
.heating-page
.heating-chart-heading h2,

html[data-theme="dark"]
.heating-page
.heating-history-heading h2 {
    color: #f2f4f7 !important;
}


html[data-theme="dark"]
.heating-page
.heating-chart-heading p,

html[data-theme="dark"]
.heating-page
.heating-history-heading p {
    color: #9da7b6 !important;
}


html[data-theme="dark"]
.heating-page
.heating-table thead th {
    background: rgba(234, 88, 12, .075) !important;
    color: #aeb7c5 !important;
}


html[data-theme="dark"]
.heating-page
.heating-table tbody tr:nth-child(even) {
    background: rgba(234, 88, 12, .025) !important;
}


html[data-theme="dark"]
.heating-page
.heating-table tbody tr:hover {
    background: rgba(234, 88, 12, .075) !important;
}


html[data-theme="dark"]
.heating-page
.heating-date {
    color: #fb923c !important;
}


html[data-theme="dark"]
.heating-page
.heating-delta {
    color: #fdba74 !important;
}



/* ----------------------------------------------------------
   STROM · DIAGRAMM
   ---------------------------------------------------------- */

html[data-theme="dark"]
.electricity-page
.electricity-chart-card {
    background:
        linear-gradient(
            145deg,
            rgba(93, 61, 8, .25),
            #191c23 40%,
            #191c23 100%
        ) !important;

    border-color: rgba(245, 158, 11, .30) !important;
}


html[data-theme="dark"]
.electricity-page
.electricity-chart-card
.electricity-section-heading h2 {
    color: #f2f4f7 !important;
}


html[data-theme="dark"]
.electricity-page
.electricity-chart-card
.electricity-section-heading p {
    color: #9da7b6 !important;
}



/* ----------------------------------------------------------
   STROM · MONATSWERTE
   ---------------------------------------------------------- */

html[data-theme="dark"]
.electricity-page
#monthly-values {
    background: #191c23 !important;
    border-color: rgba(59, 91, 219, .30) !important;
}


html[data-theme="dark"]
.electricity-page
#monthly-values
.electricity-section-heading {
    background:
        linear-gradient(
            90deg,
            rgba(59, 91, 219, .15),
            rgba(59, 91, 219, .025)
        ) !important;
}


html[data-theme="dark"]
.electricity-page
#monthly-values
.heating-table thead th {
    background: rgba(59, 91, 219, .10) !important;
    color: #aeb8cb !important;
}


html[data-theme="dark"]
.electricity-page
#monthly-values
.heating-table tbody tr:nth-child(even) {
    background: rgba(59, 91, 219, .035) !important;
}


html[data-theme="dark"]
.electricity-page
#monthly-values
.heating-table tbody td:nth-child(2) {
    color: #8fa1ff !important;
}


html[data-theme="dark"]
.electricity-page
.electricity-month-page-info {
    background: rgba(59, 91, 219, .16) !important;
    color: #b4c0ff !important;
}



/* ----------------------------------------------------------
   STROM · JAHRESABRECHNUNGEN
   ---------------------------------------------------------- */

html[data-theme="dark"]
.electricity-page
.electricity-section:has(.electricity-annual-table) {
    background: #191c23 !important;
    border-color: rgba(16, 185, 129, .28) !important;
}


html[data-theme="dark"]
.electricity-page
.electricity-section:has(.electricity-annual-table)
.electricity-section-heading {
    background:
        linear-gradient(
            90deg,
            rgba(16, 185, 129, .13),
            rgba(16, 185, 129, .02)
        ) !important;
}


html[data-theme="dark"]
.electricity-page
.electricity-annual-table thead th {
    background: rgba(16, 185, 129, .075) !important;
    color: #adb8c7 !important;
}


html[data-theme="dark"]
.electricity-page
.electricity-annual-table tbody tr:nth-child(even) {
    background: rgba(16, 185, 129, .025) !important;
}



/* ----------------------------------------------------------
   WASSER
   ---------------------------------------------------------- */

html[data-theme="dark"]
.water-page
.water-chart-card {
    background:
        linear-gradient(
            145deg,
            rgba(7, 72, 107, .30),
            #191c23 42%,
            #191c23 100%
        ) !important;

    border-color: rgba(14, 165, 233, .30) !important;
}


html[data-theme="dark"]
.water-page
.water-values-section {
    background: #191c23 !important;
    border-color: rgba(14, 165, 233, .28) !important;
}


html[data-theme="dark"]
.water-page
.water-values-section
.electricity-section-heading {
    background:
        linear-gradient(
            90deg,
            rgba(14, 165, 233, .14),
            rgba(14, 165, 233, .02)
        ) !important;
}


html[data-theme="dark"]
.water-page
.electricity-section-heading h2 {
    color: #f2f4f7 !important;
}


html[data-theme="dark"]
.water-page
.electricity-section-heading p {
    color: #9da7b6 !important;
}


html[data-theme="dark"]
.water-table thead th {
    background: rgba(14, 165, 233, .085) !important;
    color: #aeb8c7 !important;
}


html[data-theme="dark"]
.water-table tbody tr:nth-child(even) {
    background: rgba(14, 165, 233, .025) !important;
}


html[data-theme="dark"]
.water-table tbody td:nth-child(2) {
    color: #38bdf8 !important;
}



/* ----------------------------------------------------------
   PELLETLIEFERUNGEN
   ---------------------------------------------------------- */

html[data-theme="dark"]
.pellets-page
.pellets-chart-card {
    background:
        linear-gradient(
            145deg,
            rgba(103, 49, 8, .30),
            #191c23 42%,
            #191c23 100%
        ) !important;

    border-color: rgba(217, 119, 6, .32) !important;
}


html[data-theme="dark"]
.pellets-page
.pellets-values-section {
    background: #191c23 !important;
    border-color: rgba(217, 119, 6, .28) !important;
}


html[data-theme="dark"]
.pellets-page
.pellets-values-section
.electricity-section-heading {
    background:
        linear-gradient(
            90deg,
            rgba(180, 83, 9, .15),
            rgba(180, 83, 9, .02)
        ) !important;
}


html[data-theme="dark"]
.pellets-page
.electricity-section-heading h2 {
    color: #f2f4f7 !important;
}


html[data-theme="dark"]
.pellets-page
.electricity-section-heading p {
    color: #9da7b6 !important;
}


html[data-theme="dark"]
.pellets-table thead th {
    background: rgba(180, 83, 9, .085) !important;
    color: #aeb8c7 !important;
}


html[data-theme="dark"]
.pellets-table tbody tr:nth-child(even) {
    background: rgba(180, 83, 9, .025) !important;
}


html[data-theme="dark"]
.pellets-amount {
    color: #fb923c !important;
}



/* ----------------------------------------------------------
   SVG CHARTS · dunkles Raster / lesbare Achsen
   ---------------------------------------------------------- */

html[data-theme="dark"] .water-chart-grid,
html[data-theme="dark"] .pellets-chart-grid {
    stroke: rgba(160, 174, 192, .18) !important;
}


html[data-theme="dark"]
.water-page svg text,

html[data-theme="dark"]
.pellets-page svg text,

html[data-theme="dark"]
.electricity-page svg text,

html[data-theme="dark"]
.heating-page svg text {
    opacity: 1;
}



/* ----------------------------------------------------------
   Gemeinsame Household Sections
   ---------------------------------------------------------- */

html[data-theme="dark"]
.electricity-section {
    background-color: #191c23;
    color: #e8ecf2;
}


html[data-theme="dark"]
.household-page
.heating-table {
    background: transparent !important;
}


html[data-theme="dark"]
.household-page
.heating-table td {
    color: #e3e7ed;
}


html[data-theme="dark"]
.household-page
.heating-table th {
    color: #aab4c3;
}



/* ==========================================================
   HomeBase Dark Mode v4
   Finale Flächen / Dashboard / Dateien / Haushalt
   ========================================================== */


/* ==========================================================
   DASHBOARD
   ========================================================== */

html[data-theme="dark"] .dashboard-searchbar input {
    background: #191c23 !important;
    color: #edf0f5 !important;
    border-color: #303641 !important;
    box-shadow:
        0 2px 8px rgba(0,0,0,.18) !important;
}

html[data-theme="dark"] .dashboard-searchbar input:hover {
    background: #1e222a !important;
    border-color: #414958 !important;
}

html[data-theme="dark"] .dashboard-searchbar input:focus {
    background: #1b1f27 !important;
    border-color: #667cff !important;
    box-shadow:
        0 0 0 4px rgba(102,124,255,.12) !important;
}


html[data-theme="dark"]
.dashboard-app-section
.app-card {
    background: #191c23 !important;
    color: #edf0f5 !important;

    border-color: #303641 !important;

    box-shadow:
        0 2px 4px rgba(0,0,0,.14),
        0 8px 24px rgba(0,0,0,.22) !important;
}


html[data-theme="dark"]
.dashboard-app-section
.app-card:hover {
    background: #20242d !important;

    border-color:
        rgba(var(--app-accent), .38) !important;

    box-shadow:
        0 4px 10px rgba(0,0,0,.20),
        0 14px 32px rgba(0,0,0,.27),
        0 7px 24px rgba(var(--app-accent), .10) !important;
}


html[data-theme="dark"]
.dashboard-app-section
.app-icon {
    background:
        rgba(var(--app-accent), .13) !important;

    border-color:
        rgba(var(--app-accent), .18) !important;

    box-shadow:
        inset 0 1px 0
        rgba(255,255,255,.06) !important;
}


html[data-theme="dark"]
.dashboard-app-section
.app-card:hover
.app-icon {
    background:
        rgba(var(--app-accent), .18) !important;
}


html[data-theme="dark"] .availability-pill {
    background: rgba(91,110,255,.14) !important;
    border-color: rgba(91,110,255,.24) !important;
    color: #9eacff !important;
}



/* ==========================================================
   DATEIEN · Grundfläche
   ========================================================== */

html[data-theme="dark"]
.page.file-manager-page,

html[data-theme="dark"]
.file-explorer-home,

html[data-theme="dark"]
.file-explorer-layout,

html[data-theme="dark"]
.file-explorer-content,

html[data-theme="dark"]
.file-browser {
    background: #101217 !important;
    color: #edf0f5 !important;
}


/* Falls der Home-Container selbst als Card gestaltet ist */

html[data-theme="dark"]
.file-explorer-home {
    border-color: #303641 !important;
}


/* ----------------------------------------------------------
   Speicherorte
   ---------------------------------------------------------- */

html[data-theme="dark"]
.file-location-card {
    background: #191c23 !important;

    color: #edf0f5 !important;

    border-color: #303641 !important;

    box-shadow:
        0 3px 12px rgba(0,0,0,.18) !important;
}


html[data-theme="dark"]
.file-location-card:hover {
    background: #20242d !important;

    border-color: #465064 !important;

    box-shadow:
        0 7px 20px rgba(0,0,0,.25) !important;
}


html[data-theme="dark"]
.file-location-card strong {
    color: #edf0f5 !important;
}


html[data-theme="dark"]
.file-location-card span,

html[data-theme="dark"]
.file-location-card small {
    color: #9ca6b7 !important;
}



/* ----------------------------------------------------------
   Dateisuche
   ---------------------------------------------------------- */

html[data-theme="dark"]
.file-browser
.file-search-input {
    background: #191c23 !important;

    color: #edf0f5 !important;

    border-color: #303641 !important;

    box-shadow:
        0 2px 8px rgba(0,0,0,.16) !important;
}


html[data-theme="dark"]
.file-browser
.file-search-input:hover {
    background: #20242d !important;

    border-color: #414958 !important;
}


html[data-theme="dark"]
.file-browser
.file-search-input:focus {
    background: #1b1f27 !important;

    border-color: #667cff !important;

    box-shadow:
        0 0 0 4px rgba(102,124,255,.12) !important;
}


html[data-theme="dark"]
.file-browser
.file-search-icon {
    color: #8e98aa !important;
}



/* ----------------------------------------------------------
   Zurück / Vorwärts
   ---------------------------------------------------------- */

html[data-theme="dark"]
.file-history-button {
    background: #191c23 !important;

    color: #dfe4eb !important;

    border-color: #303641 !important;
}


html[data-theme="dark"]
.file-history-button:hover {
    background: #252a34 !important;

    border-color: #485163 !important;
}



/* ----------------------------------------------------------
   Dateiliste
   ---------------------------------------------------------- */

html[data-theme="dark"]
.file-explorer-content
.file-table-card {
    background: #191c23 !important;

    border-color: #303641 !important;
}


html[data-theme="dark"]
.file-explorer-content
.file-table-head {
    background: #20242c !important;

    color: #a8b2c2 !important;

    border-color: #343a46 !important;
}


html[data-theme="dark"]
.file-explorer-content
.file-row {
    background: #191c23 !important;

    color: #e4e8ef !important;

    border-color: #2b313b !important;
}


html[data-theme="dark"]
.file-explorer-content
.file-row:nth-child(even) {
    background: #1b1f26 !important;
}


html[data-theme="dark"]
.file-explorer-content
.file-row:hover,

html[data-theme="dark"]
.file-explorer-content
.file-row-directory:hover,

html[data-theme="dark"]
.file-explorer-content
.file-row-previewable:hover {
    background: #222935 !important;

    box-shadow:
        inset 3px 0 0 #6487f7 !important;
}



/* ==========================================================
   PELLETHEIZUNG
   ========================================================== */

html[data-theme="dark"]
.heating-page
.heating-chart-card {
    background:
        linear-gradient(
            145deg,
            rgba(108,44,12,.28) 0%,
            #1b1d23 34%,
            #191c23 100%
        ) !important;

    color: #edf0f5 !important;
}


html[data-theme="dark"]
.heating-page
.heating-history {
    background: #191c23 !important;
}


html[data-theme="dark"]
.heating-page
.heating-history-heading {
    background:
        linear-gradient(
            90deg,
            rgba(234,88,12,.14),
            rgba(234,88,12,.02)
        ) !important;
}



/* ==========================================================
   STROM
   ========================================================== */

html[data-theme="dark"]
.electricity-page
.electricity-chart-card {
    background:
        linear-gradient(
            145deg,
            rgba(110,72,7,.28) 0%,
            #1b1d23 34%,
            #191c23 100%
        ) !important;

    color: #edf0f5 !important;
}


html[data-theme="dark"]
.electricity-page
#monthly-values,

html[data-theme="dark"]
.electricity-page
.electricity-section {
    background: #191c23 !important;
}


html[data-theme="dark"]
.electricity-page
#monthly-values
.electricity-section-heading {
    background:
        linear-gradient(
            90deg,
            rgba(59,91,219,.15),
            transparent
        ) !important;
}


html[data-theme="dark"]
.electricity-page
.electricity-section:has(.electricity-annual-table)
.electricity-section-heading {
    background:
        linear-gradient(
            90deg,
            rgba(16,185,129,.13),
            transparent
        ) !important;
}



/* ==========================================================
   WASSER
   ========================================================== */

html[data-theme="dark"]
.water-page
.water-chart-card {
    background:
        linear-gradient(
            145deg,
            rgba(5,76,112,.30) 0%,
            #1b1d23 34%,
            #191c23 100%
        ) !important;

    color: #edf0f5 !important;
}


html[data-theme="dark"]
.water-page
.water-values-section {
    background: #191c23 !important;
}


html[data-theme="dark"]
.water-page
.water-values-section
.electricity-section-heading {
    background:
        linear-gradient(
            90deg,
            rgba(14,165,233,.14),
            transparent
        ) !important;
}



/* ==========================================================
   PELLETLIEFERUNGEN
   ========================================================== */

html[data-theme="dark"]
.pellets-page
.pellets-chart-card {
    background:
        linear-gradient(
            145deg,
            rgba(105,50,7,.30) 0%,
            #1b1d23 34%,
            #191c23 100%
        ) !important;

    color: #edf0f5 !important;
}


html[data-theme="dark"]
.pellets-page
.pellets-values-section {
    background: #191c23 !important;
}


html[data-theme="dark"]
.pellets-page
.pellets-values-section
.electricity-section-heading {
    background:
        linear-gradient(
            90deg,
            rgba(180,83,9,.15),
            transparent
        ) !important;
}



/* ==========================================================
   HOUSEHOLD · Überschriften und Chart-Beschriftungen
   ========================================================== */

html[data-theme="dark"]
.household-page
.electricity-section-heading h2,

html[data-theme="dark"]
.household-page
.heating-chart-heading h2,

html[data-theme="dark"]
.household-page
.heating-history-heading h2 {
    color: #f2f4f7 !important;
}


html[data-theme="dark"]
.household-page
.electricity-section-heading p,

html[data-theme="dark"]
.household-page
.heating-chart-heading p,

html[data-theme="dark"]
.household-page
.heating-history-heading p {
    color: #9ca6b7 !important;
}


/* SVG-Grids etwas sichtbarer */

html[data-theme="dark"]
.water-chart-grid,

html[data-theme="dark"]
.pellets-chart-grid {
    stroke: rgba(174,185,201,.20) !important;
}


/* Allgemeine SVG-Achsentexte */

html[data-theme="dark"]
.household-page svg text:not(.water-chart-value):not(.pellets-chart-value) {
    fill: #96a2b5;
}



/* ==========================================================
   HomeBase Dark Mode v5
   Buttons + Dokumente + Dateimanager
   ========================================================== */


/* ==========================================================
   BUTTONS
   ========================================================== */

/*
   Normale Secondary-Buttons.
   Primary bleibt weiterhin blau.
*/

html[data-theme="dark"]
.button:not(.primary) {
    background: #20242c !important;
    border-color: #353c48 !important;
    color: #e8ebf0 !important;
    box-shadow: none !important;
}


html[data-theme="dark"]
.button:not(.primary):hover {
    background: #292e38 !important;
    border-color: #485161 !important;
    color: #ffffff !important;
}


/*
   Haushalt Zurück-Button bekommt wegen household.css
   eine bewusst spezifischere Regel.
*/

html[data-theme="dark"]
.household-page
.household-back-row
.button,

html[data-theme="dark"]
.household-page
.household-back-row
a.button {
    background: #20242c !important;
    border-color: #353c48 !important;
    color: #dfe4eb !important;
}


html[data-theme="dark"]
.household-page
.household-back-row
.button:hover,

html[data-theme="dark"]
.household-page
.household-back-row
a.button:hover {
    background: #292e38 !important;
    border-color: #485161 !important;
    color: #ffffff !important;
}


/*
   Primary bleibt ausdrücklich farbig.
*/

html[data-theme="dark"]
.button.primary {
    background: var(--accent) !important;
    border-color: var(--accent) !important;
    color: #ffffff !important;
}


html[data-theme="dark"]
.button.primary:hover {
    background: var(--accent-hover) !important;
    border-color: var(--accent-hover) !important;
}



/* ==========================================================
   DASHBOARD · DOKUMENTE SHORTCUT
   ========================================================== */

html[data-theme="dark"]
.dashboard-document-shortcut
.section-heading {
    background:
        linear-gradient(
            135deg,
            rgba(64, 92, 245, .13) 0%,
            #1b1e26 42%,
            #191c23 100%
        ) !important;

    border-color:
        rgba(91, 111, 214, .27) !important;

    box-shadow:
        0 7px 24px
        rgba(0, 0, 0, .22) !important;
}


html[data-theme="dark"]
.dashboard-document-shortcut
.section-heading h2 {
    color: #f0f2f6 !important;
}


html[data-theme="dark"]
.dashboard-document-shortcut
.section-heading p {
    color: #9da7b6 !important;
}


html[data-theme="dark"]
.dashboard-document-shortcut
.button {
    background:
        rgba(91, 111, 214, .14) !important;

    border-color:
        rgba(91, 111, 214, .26) !important;

    color: #b5c0ff !important;
}


html[data-theme="dark"]
.dashboard-document-shortcut
.button:hover {
    background:
        rgba(91, 111, 214, .22) !important;

    border-color:
        rgba(91, 111, 214, .40) !important;

    color: #d8deff !important;
}



/* ==========================================================
   DATEIMANAGER · SHELL
   ========================================================== */

html[data-theme="dark"]
.file-explorer-home,

html[data-theme="dark"]
.file-explorer-layout {
    background: #16191f !important;

    border-color:
        #303641 !important;

    box-shadow:
        0 10px 35px
        rgba(0, 0, 0, .24) !important;
}


/*
   Die eigentliche große Innenfläche.
   Genau diese war bisher noch hellgrau.
*/

html[data-theme="dark"]
.file-explorer-main,

html[data-theme="dark"]
.file-explorer-content {
    background: #16191f !important;
    color: #edf0f5 !important;
}


/* Überschrift */

html[data-theme="dark"]
.file-explorer-main-header h1 {
    color: #f0f2f6 !important;
}


html[data-theme="dark"]
.file-explorer-main-header p {
    color: #98a3b4 !important;
}


html[data-theme="dark"]
.file-location-title {
    color: #8f9aac !important;
}



/* ==========================================================
   DATEIMANAGER · SPEICHERORTE
   ========================================================== */

html[data-theme="dark"]
.file-location-card {
    background: #1c2027 !important;

    border-color:
        #323944 !important;

    color: #edf0f5 !important;

    box-shadow:
        0 3px 12px
        rgba(0, 0, 0, .20) !important;
}


html[data-theme="dark"]
.file-location-card:hover {
    background:
        linear-gradient(
            135deg,
            rgba(64, 92, 245, .10),
            #222731 55%
        ) !important;

    border-color:
        rgba(100, 135, 247, .42) !important;

    box-shadow:
        0 10px 26px
        rgba(0, 0, 0, .28) !important;
}


html[data-theme="dark"]
.file-location-card strong {
    color: #f0f2f6 !important;
}


html[data-theme="dark"]
.file-location-card span,

html[data-theme="dark"]
.file-location-card small {
    color: #9ca6b7 !important;
}



/* ==========================================================
   DATEIMANAGER · HEADER BUTTON
   z.B. "Zugriffe verwalten"
   ========================================================== */

html[data-theme="dark"]
.file-explorer-main-header
.button {
    background: #20242c !important;
    border-color: #353c48 !important;
    color: #e7eaf0 !important;
}


html[data-theme="dark"]
.file-explorer-main-header
.button:hover {
    background: #292e38 !important;
    border-color: #485161 !important;
}



/* ==========================================================
   DATEIMANAGER · LISTENANSICHT
   ========================================================== */

html[data-theme="dark"]
.file-explorer-content
.file-table-card {
    background: #1a1e25 !important;
    border-color: #303641 !important;
}


html[data-theme="dark"]
.file-explorer-content
.file-table-head {
    background: #20242c !important;
    color: #a5afbf !important;
}


html[data-theme="dark"]
.file-explorer-content
.file-row {
    background: #1a1e25 !important;
    color: #e5e9ef !important;
}


html[data-theme="dark"]
.file-explorer-content
.file-row:nth-child(even) {
    background: #1c2027 !important;
}


html[data-theme="dark"]
.file-explorer-content
.file-row:hover,

html[data-theme="dark"]
.file-explorer-content
.file-row-directory:hover,

html[data-theme="dark"]
.file-explorer-content
.file-row-previewable:hover {
    background: #242b36 !important;

    box-shadow:
        inset 3px 0 0
        #6487f7 !important;
}



/* ==========================================================
   DATEIMANAGER · NAVIGATION
   ========================================================== */

html[data-theme="dark"]
.file-history-button {
    background: #20242c !important;
    color: #dce2eb !important;
    border-color: #353c48 !important;
}


html[data-theme="dark"]
.file-history-button:hover {
    background: #292e38 !important;
    border-color: #485161 !important;
}



/* ==========================================================
   HomeBase Dark Mode v6
   Viewer + Household Back Button
   ========================================================== */


/* ==========================================================
   HOUSEHOLD · Zurück
   ========================================================== */

html[data-theme="dark"]
.household-page
.household-back-link {
    background: #20242c !important;
    border-color: #353c48 !important;
    color: #e5e9ef !important;

    box-shadow:
        0 4px 14px
        rgba(0, 0, 0, .18) !important;
}


html[data-theme="dark"]
.household-page
.household-back-link:hover {
    background: #292e38 !important;
    border-color: #485161 !important;
    color: #ffffff !important;
}



/* ==========================================================
   PDF VIEWER
   ========================================================== */

html[data-theme="dark"]
.homebase-pdf-viewer {
    background: #15181e !important;
    border-color: #303641 !important;
}


html[data-theme="dark"]
.pdf-toolbar {
    background: #1b1f26 !important;
    border-color: #303641 !important;
}


html[data-theme="dark"]
.pdf-canvas-scroll {
    background: #11141a !important;
}


html[data-theme="dark"]
.pdf-canvas-stage {
    background: #11141a !important;
}


/* PDF selbst bleibt bewusst weiß */

html[data-theme="dark"]
#pdf-canvas {
    background: #ffffff !important;

    box-shadow:
        0 6px 26px
        rgba(0, 0, 0, .45) !important;
}



/* ==========================================================
   IMAGE / FILE PREVIEW
   ========================================================== */

html[data-theme="dark"]
.file-preview-dialog {
    background: #171a20 !important;
    border-color: #303641 !important;
}


html[data-theme="dark"]
.file-preview-body {
    background: #11141a !important;
}


html[data-theme="dark"]
.file-preview-content {
    background: #11141a !important;
}


/*
   Header/Toolbar des Preview-Fensters,
   falls diese über Dialog-Hintergrund läuft.
*/

html[data-theme="dark"]
.file-preview-dialog
.file-preview-header {
    background: #1b1f26 !important;
    border-color: #303641 !important;
}


html[data-theme="dark"]
.file-preview-dialog
.file-preview-title {
    color: #e8ecf2 !important;
}



/* Navigation links / rechts */

html[data-theme="dark"]
.file-preview-navigation {
    background:
        rgba(24, 28, 35, .82) !important;

    border-color:
        rgba(255, 255, 255, .12) !important;

    color: #ffffff !important;
}


html[data-theme="dark"]
.file-preview-navigation:hover {
    background:
        rgba(36, 42, 52, .92) !important;
}



/* Counter unten */

html[data-theme="dark"]
.file-preview-counter {
    background:
        rgba(20, 24, 31, .84) !important;

    color: #ffffff !important;
}



/* ==========================================================
   HomeBase Dark Mode · Mobile App Shell
   ========================================================== */

@media (max-width: 700px) {

    html[data-theme="dark"]
    .mobile-bottom-nav {
        background:
            rgba(24, 27, 34, .94) !important;

        border-color:
            #303641 !important;

        box-shadow:
            0 -8px 30px
            rgba(0, 0, 0, .30) !important;
    }


    html[data-theme="dark"]
    .mobile-nav-item {
        color: #8f99a9;
    }


    html[data-theme="dark"]
    .mobile-nav-item.active {
        color: #92a0ff;
    }


    html[data-theme="dark"]
    .mobile-nav-item.active
    .mobile-nav-icon {
        background:
            rgba(111, 130, 255, .15);

        color: #92a0ff;
    }


    html[data-theme="dark"]
    .mobile-more-panel {
        background: #1b1e25 !important;

        border-color:
            #353b47 !important;

        box-shadow:
            0 20px 60px
            rgba(0, 0, 0, .46) !important;
    }


    html[data-theme="dark"]
    .mobile-more-handle {
        background:
            rgba(180, 190, 205, .28);
    }


    html[data-theme="dark"]
    .mobile-more-row {
        color: #e8ecf2;
    }


    html[data-theme="dark"]
    .mobile-more-row:hover,

    html[data-theme="dark"]
    .mobile-more-row:active {
        background:
            rgba(255, 255, 255, .055);
    }

}