/* Maximator Dark Mode
   Nach Site.css, Maximator.css und cards.css laden. */

:root {
    --mx-red: #d20a1e;
    --mx-red-bright: #ff233d;
    --mx-bg: #07090c;
    --mx-bg-elevated: #0e1116;
    --mx-surface: #14181e;
    --mx-surface-hover: #1b2027;
    --mx-border: #2c323a;
    --mx-text: #f2f3f5;
    --mx-text-muted: #a9b0b8;
    --mx-shadow: 0 10px 30px rgba(0, 0, 0, .45);
    --mx-red-glow: 0 0 18px rgba(210, 10, 30, .24);
}

body.dark-mode {
    --maximator-color-red: var(--mx-bg);
    background:
        radial-gradient(circle at 78% 18%, rgba(210, 10, 30, .12), transparent 31rem),
        linear-gradient(180deg, #050608 0%, var(--mx-bg) 100%);
    color: var(--mx-text);
    color-scheme: dark;
}

body.dark-mode,
body.dark-mode .body-content,
body.dark-mode .container,
body.dark-mode .container-fluid {
    background-color: transparent;
}

/* Navigation */
body.dark-mode .navbar,
body.dark-mode .navbar-default,
body.dark-mode .navbar-header,
body.dark-mode .navbar-collapse,
body.dark-mode .sidebar,
body.dark-mode .sidebar-custom {
    background-color: #090b0e !important;
    border-color: var(--mx-border) !important;
    box-shadow: 0 1px 0 rgba(255, 255, 255, .03);
}

body.dark-mode .navbar-default .navbar-brand,
body.dark-mode .navbar-default .navbar-nav > li > a,
body.dark-mode .navbar-default .navbar-text,
body.dark-mode .navbar a {
    color: var(--mx-text-muted) !important;
}

body.dark-mode .navbar-default .navbar-brand:hover,
body.dark-mode .navbar-default .navbar-nav > li > a:hover,
body.dark-mode .navbar-default .navbar-nav > .open > a,
body.dark-mode .navbar-default .navbar-nav > .active > a {
    color: #fff !important;
    background-color: rgba(210, 10, 30, .14) !important;
}

body.dark-mode .navbar-toggle {
    background-color: var(--mx-surface) !important;
    border-color: var(--mx-border) !important;
}

body.dark-mode .navbar-toggle .icon-bar,
body.dark-mode .navbar-inverse .navbar-toggle .icon-bar {
    background-color: var(--mx-text) !important;
}

/* Links */
body.dark-mode a {
    color: #ff5368;
}

body.dark-mode a:hover,
body.dark-mode a:focus {
    color: #ff8796;
}

/* Accordion / Bereiche wie Steuern, Information, Performance, Version */
body.dark-mode .accordion2 {
    background: linear-gradient(90deg, #14171b 0%, #101317 100%) !important;
    color: var(--mx-text) !important;
    border-top: 1px solid var(--mx-border) !important;
    border-bottom: 1px solid #08090b !important;
}

body.dark-mode .accordion2:hover,
body.dark-mode .accordion2.active {
    background: linear-gradient(90deg, rgba(210, 10, 30, .26), #171a1f 55%) !important;
    box-shadow: inset 4px 0 0 var(--mx-red), var(--mx-red-glow);
}

body.dark-mode .panel2,
body.dark-mode .panel,
body.dark-mode .panel-default,
body.dark-mode .panel-body,
body.dark-mode .panel-collapse,
body.dark-mode .prozessparameter {
    background-color: var(--mx-bg-elevated) !important;
    color: var(--mx-text) !important;
    border-color: var(--mx-border) !important;
}

/* Karten */
body.dark-mode figure.front,
body.dark-mode figure.frontdetails,
body.dark-mode figure.back,
body.dark-mode figure.formoption,
body.dark-mode .modal-content {
    background: linear-gradient(145deg, #171b21, #0f1216) !important;
    color: var(--mx-text) !important;
    border: 1px solid var(--mx-border);
    box-shadow: var(--mx-shadow), var(--mx-red-glow) !important;
}

body.dark-mode .goal__name,
body.dark-mode .goal--amount,
body.dark-mode .percent,
body.dark-mode .descriptor,
body.dark-mode .smallletter {
    color: var(--mx-text-muted) !important;
}

body.dark-mode .goal--progress,
body.dark-mode .goal--progressEinheit,
body.dark-mode .goal--remain {
    color: var(--mx-text) !important;
}

/* Formulare */
body.dark-mode input,
body.dark-mode select,
body.dark-mode textarea,
body.dark-mode .form-control,
body.dark-mode #myInput {
    background-color: #0c0f13 !important;
    color: var(--mx-text) !important;
    border-color: var(--mx-border) !important;
}

body.dark-mode input:focus,
body.dark-mode select:focus,
body.dark-mode textarea:focus,
body.dark-mode .form-control:focus {
    border-color: var(--mx-red) !important;
    box-shadow: 0 0 0 2px rgba(210, 10, 30, .22) !important;
}

body.dark-mode input::placeholder,
body.dark-mode textarea::placeholder {
    color: #707781;
}

body.dark-mode option {
    background: var(--mx-bg-elevated);
    color: var(--mx-text);
}

body.dark-mode .button,
body.dark-mode .btn-primary {
    background: linear-gradient(180deg, #e1112a, #a80719) !important;
    color: #fff !important;
    border-color: #ef233c !important;
    box-shadow: var(--mx-red-glow);
}

body.dark-mode .button:hover,
body.dark-mode .btn-primary:hover {
    background: linear-gradient(180deg, #ff2942, #c50b22) !important;
}

/* Dropdowns */
body.dark-mode .dropdown-menu {
    background-color: #101318 !important;
    color: var(--mx-text) !important;
    border-color: var(--mx-border) !important;
    box-shadow: var(--mx-shadow);
}

body.dark-mode .dropdown-item,
body.dark-mode .dropdown-menu > li > a {
    color: var(--mx-text-muted) !important;
}

body.dark-mode .dropdown-item:hover,
body.dark-mode .dropdown-menu > li > a:hover {
    color: #fff !important;
    background-color: rgba(210, 10, 30, .18) !important;
}

/* Tabellen */
body.dark-mode table,
body.dark-mode table#foobar-table {
    color: var(--mx-text);
}

body.dark-mode table#foobar-table > thead > tr,
body.dark-mode .fixed {
    background-color: #1b2026 !important;
}

body.dark-mode table#foobar-table > thead > tr > th,
body.dark-mode table#foobar-table > tbody > tr > td,
body.dark-mode table#foobar-table > thead > tr > td {
    color: var(--mx-text) !important;
    border-color: #3a414a !important;
}

body.dark-mode table#foobar-table > tbody > tr:nth-child(even),
body.dark-mode .tableZaehler tr:nth-child(even) {
    background-color: #11151a !important;
}

body.dark-mode table#foobar-table > tbody > tr:nth-child(odd),
body.dark-mode .tableZaehler tr:nth-child(odd) {
    background-color: #181d23 !important;
}

/* Charts / Canvas-Container */
body.dark-mode .chartmx,
body.dark-mode .DVfrontarea .flot-temp-elem {
    background-color: #0c0f13 !important;
    color: var(--mx-text) !important;
}

body.dark-mode .flot-temp-elem {
    background-color: #0c0f13 !important;
    border-color: var(--mx-border) !important;
}

/* Bilder nicht mit multiply abdunkeln */
body.dark-mode img {
    opacity: 1;
    mix-blend-mode: normal;
}

/* Dark-Mode-Schalter */
.dark-mode-toggle {
    display: inline-flex;
    align-items: center;
    gap: 7px;
    margin: 8px 10px;
    padding: 6px 10px;
    border: 1px solid #3a3f46;
    border-radius: 4px;
    background: #12151a;
    color: #e8e9eb;
    cursor: pointer;
    font: inherit;
}

.dark-mode-toggle:hover {
    border-color: var(--mx-red);
    box-shadow: var(--mx-red-glow);
}

.dark-mode-toggle__dot {
    width: 9px;
    height: 9px;
    border-radius: 50%;
    background: #7d858e;
}

body.dark-mode .dark-mode-toggle__dot {
    background: var(--mx-red-bright);
    box-shadow: 0 0 10px rgba(255, 35, 61, .8);
}

@media (prefers-reduced-motion: no-preference) {
    body,
    .navbar,
    .accordion2,
    .panel2,
    figure,
    input,
    select,
    textarea {
        transition: background-color .2s ease, color .2s ease, border-color .2s ease, box-shadow .2s ease;
    }
}

/* Bootstrap-Tabellen im Dark Mode */
body.dark-mode .table {
    color: #e8e8e8;
    background-color: #111317;
}

    body.dark-mode .table > thead > tr > th,
    body.dark-mode .table > tbody > tr > th,
    body.dark-mode .table > tfoot > tr > th,
    body.dark-mode .table > thead > tr > td,
    body.dark-mode .table > tbody > tr > td,
    body.dark-mode .table > tfoot > tr > td {
        border-color: #3a3d42;
    }

/* Ungerade Zeilen */
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) {
    background-color: #15181d;
}

/* Gerade Zeilen deutlich absetzen */
body.dark-mode .table-striped > tbody > tr:nth-of-type(even) {
    background-color: #24282e;
}

/* Hover-Zustand */
body.dark-mode .table-hover > tbody > tr:hover {
    background-color: #3a0f14;
    color: #ffffff;
}

/* Bootstrap kann Hintergründe direkt auf td/th setzen */
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > td,
body.dark-mode .table-striped > tbody > tr:nth-of-type(odd) > th {
    background-color: #15181d;
}

body.dark-mode .table-striped > tbody > tr:nth-of-type(even) > td,
body.dark-mode .table-striped > tbody > tr:nth-of-type(even) > th {
    background-color: #24282e;
}

body.dark-mode .table-hover > tbody > tr:hover > td,
body.dark-mode .table-hover > tbody > tr:hover > th {
    background-color: #3a0f14;
}

/* Permission-Tabelle */
body.dark-mode table.permission-table {
    width: 100%;
    color: #e8e8e8;
    background-color: #101216;
    border-color: #3a3d42;
}

    body.dark-mode table.permission-table > thead > tr {
        background-color: #1b1e24;
    }

        body.dark-mode table.permission-table > thead > tr > th {
            color: #ffffff;
            background-color: #1b1e24;
            border-color: #4a4d53;
        }

    body.dark-mode table.permission-table > tbody > tr {
        color: #e8e8e8;
        background-color: #12151a;
    }

        body.dark-mode table.permission-table > tbody > tr:nth-child(even) {
            background-color: #252930;
        }

        body.dark-mode table.permission-table > tbody > tr > td {
            color: #e8e8e8;
            background-color: inherit;
            border-color: #3a3d42;
        }

    /* Eingabefelder innerhalb der Permission-Tabelle */
    body.dark-mode table.permission-table input[type="text"],
    body.dark-mode table.permission-table input[type="password"],
    body.dark-mode table.permission-table textarea,
    body.dark-mode table.permission-table select {
        color: #f2f2f2;
        background-color: #0c0f13;
        border: 1px solid #555b64;
    }

    /* Checkboxen sichtbar halten */
    body.dark-mode table.permission-table input[type="checkbox"] {
        accent-color: #c51926;
    }

    /* Hover */
    body.dark-mode table.permission-table.table-hover > tbody > tr:hover,
    body.dark-mode table.permission-table.table-hover > tbody > tr:hover > td {
        color: #ffffff;
        background-color: #4b1016;
    }

    /* Links und normaler Text */
    body.dark-mode table.permission-table a {
        color: #ff5964;
    }

    body.dark-mode table.permission-table label,
    body.dark-mode table.permission-table span,
    body.dark-mode table.permission-table div {
        color: inherit;
    }

/* =========================================================
   Grafana TreeView – Dark Mode
   ========================================================= */

body.dark-mode .grafana-tree {
    color: #e6e6e6;
    background-color: #0b0d10;
}

    /* Gesamter Tree-Inhalt */
    body.dark-mode .grafana-tree,
    body.dark-mode .grafana-tree ul,
    body.dark-mode .grafana-tree li,
    body.dark-mode .grafana-tree div {
        color: #e6e6e6;
    }

        /* Standardzeilen */
        body.dark-mode .grafana-tree li {
            background-color: transparent;
        }

            /* Gruppenknoten, z. B. "Anlagen" */
            body.dark-mode .grafana-tree .tree-group,
            body.dark-mode .grafana-tree .tree-header,
            body.dark-mode .grafana-tree .node-group,
            body.dark-mode .grafana-tree .folder,
            body.dark-mode .grafana-tree li.folder {
                color: #ffffff;
                background-color: #20242a;
                border: 1px solid #343941;
                border-radius: 4px;
            }

        /* Links im Tree */
        body.dark-mode .grafana-tree a {
            color: #ff4c59;
            background-color: transparent;
            text-decoration: none;
        }

            body.dark-mode .grafana-tree a:hover,
            body.dark-mode .grafana-tree a:focus {
                color: #ffffff;
                background-color: #541017;
                text-decoration: none;
            }

        /* Markierter / aktiver Knoten */
        body.dark-mode .grafana-tree .active,
        body.dark-mode .grafana-tree .selected,
        body.dark-mode .grafana-tree li.active,
        body.dark-mode .grafana-tree li.selected {
            color: #ffffff;
            background-color: #68131c;
        }

        /* Tree-Zeilen */
        body.dark-mode .grafana-tree .tree-node,
        body.dark-mode .grafana-tree .node,
        body.dark-mode .grafana-tree .tree-item {
            color: #e6e6e6;
            background-color: transparent;
            border-color: #30343a;
        }

        /* Checkbox-Bereich oben */
        body.dark-mode .grafana-tree input[type="checkbox"] {
            accent-color: #c51926;
        }

        body.dark-mode .grafana-tree label {
            color: #e6e6e6;
        }

        /* Eingangsbereich oberhalb der Baumstruktur */
        body.dark-mode .grafana-tree .options,
        body.dark-mode .grafana-tree .tree-options,
        body.dark-mode .grafana-tree .settings {
            color: #e6e6e6;
            background-color: #111419;
            border-color: #30343a;
        }

/* Scrollbereich */
body.dark-mode .grafana-tree {
    scrollbar-color: #555b64 #111419;
}

    body.dark-mode .grafana-tree::-webkit-scrollbar {
        width: 10px;
    }

    body.dark-mode .grafana-tree::-webkit-scrollbar-track {
        background: #111419;
    }

    body.dark-mode .grafana-tree::-webkit-scrollbar-thumb {
        background: #555b64;
        border-radius: 5px;
    }

        body.dark-mode .grafana-tree::-webkit-scrollbar-thumb:hover {
            background: #777e88;
        }

    /* TreeView: Ordnerüberschrift */
    body.dark-mode .grafana-tree .folder-title {
        display: block;
        color: #ffffff !important;
        background-color: #252a31 !important;
        border: 1px solid #3d434c;
        border-left: 3px solid #c71927;
        border-radius: 4px;
        padding: 8px 10px;
        font-weight: 600;
        text-shadow: none;
    }

        /* Inhalte innerhalb des Titels */
        body.dark-mode .grafana-tree .folder-title span,
        body.dark-mode .grafana-tree .folder-title a,
        body.dark-mode .grafana-tree .folder-title label {
            color: #ffffff !important;
        }

        /* Hover */
        body.dark-mode .grafana-tree .folder-title:hover {
            background-color: #313740 !important;
            border-left-color: #ff2535;
        }

        /* Falls der Ordner geöffnet/aktiv ist */
        body.dark-mode .grafana-tree .folder-title.active,
        body.dark-mode .grafana-tree .folder-title.open,
        body.dark-mode .grafana-tree .folder-title.selected {
            color: #ffffff !important;
            background-color: #4b1017 !important;
            border-color: #8d1b25;
        }
/* Inhalt bewusst unsichtbar halten */
body.dark-mode #foobar-table th.hidden-column-text,
body.dark-mode #foobar-table td.hidden-column-text {
    color: transparent !important;
    text-shadow: none !important;
}