/* =====================================================================
   DVFlow – donker thema
   Werking: <html data-theme="dark"> (gezet door App.razor + theme.js uit de cookie dvflow-theme / Users.Theme).
   1. De kleurvariabelen van app.css/dvflow.css krijgen een donkere waarde: alles wat var(--…) gebruikt volgt vanzelf.
   2. Daaronder gerichte correcties voor plekken met vaste kleuren (#fff e.d.) en voor DevExpress, voor het geval de
      donkere Fluent-variant van DevExpress niet (volledig) actief is.
   Statuskleuren zelf (--st-up enz.) blijven gelijk (herkenbaar); alleen de lichte achtergronden (-50) en tekstkleuren (-ink)
   worden donkere/lichtere varianten zodat ze leesbaar blijven.
   ===================================================================== */

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

    --brand-50: #3a1520;
    --slate-900: #0b1014;
    --slate-800: #dbe2e6;
    --slate-700: #c3ccd2;
    --slate-600: #a9b5bd;
    --slate-500: #8d9aa4;
    --slate-300: #3e4b54;
    --slate-200: #2c3840;
    --slate-100: #222d34;
    --slate-50: #11181d;
    --white: #182127;
    --text: #e3e9ed;
    --text-muted: #8d9aa4;

    --success: #4cc27a;
    --success-50: #12301e;
    --warning: #f2b705;
    --warning-50: #33290a;
    --danger: #ff6b70;
    --danger-50: #3a1416;
    --info: #6aa9e9;
    --info-50: #13283f;

    --shadow-sm: 0 1px 2px rgba(0, 0, 0, .4);
    --shadow: 0 1px 3px rgba(0, 0, 0, .45), 0 4px 12px rgba(0, 0, 0, .3);

    --st-up-50: #12301e;
    --st-up-ink: #6fd08f;
    --st-warning-50: #33290a;
    --st-warning-ink: #f2c94c;
    --st-down-50: #3a1416;
    --st-down-ink: #ff7b80;
    --st-downack-50: #3a1c1f;
    --st-downack-ink: #f0a0a4;
    --st-unusual-50: #3a2410;
    --st-unusual-ink: #ffad5c;
    --st-paused-50: #13283f;
    --st-paused-ink: #8dbbf0;
    --st-unknown-50: #222b31;
    --st-unknown-ink: #a9b5bd;
}

/* ---------- basis */
[data-theme="dark"] body { background: var(--slate-50); color: var(--text); }
[data-theme="dark"] a { color: #ff6f8a; }
[data-theme="dark"] hr { border-color: var(--slate-200); }
[data-theme="dark"] .muted, [data-theme="dark"] .form-help { color: var(--text-muted); }

/* zijbalk is al donker; iets dieper zodat hij afsteekt tegen de pagina */
[data-theme="dark"] .sidebar { background: #0b1014; border-right: 1px solid #1d272e; }
[data-theme="dark"] .topbar { background: #141c21; border-bottom-color: var(--slate-200); }

/* avatars/knoppen die --slate-600/700 als ACHTERGROND gebruiken (in donker zijn die licht) */
[data-theme="dark"] .avatar { background: #34424c; color: #e3e9ed; }
[data-theme="dark"] .donut-card { background: #1d272e; }

/* ---------- vaste witte vlakken uit app.css/dvflow.css/lists.css */
[data-theme="dark"] .usermenu__panel,
[data-theme="dark"] .ctx-menu,
[data-theme="dark"] .ctx-sub,
[data-theme="dark"] .card,
[data-theme="dark"] .md-palette,
[data-theme="dark"] .md-props,
[data-theme="dark"] .rm-preview__body,
[data-theme="dark"] .pj-subtable,
[data-theme="dark"] .ra-input,
[data-theme="dark"] .usermenu__sim select { background: var(--white); color: var(--text); border-color: var(--slate-200); }
html[data-theme="dark"] body .card .card__header-actions .dxbl-btn,
html[data-theme="dark"] body .datalist--joined > .filterbar .dxbl-btn-outline-secondary,
html[data-theme="dark"] body .datalist--joined > .filterbar .dxbl-btn-outline-danger { background: transparent; }

/* Sensor Tree (PRTG-stijl met vaste kleuren) */
[data-theme="dark"] .stree__toggle { background: #1d272e; border-color: #4a5862; color: #a9b5bd; }
[data-theme="dark"] .stree__name { color: #d5dde2; }
[data-theme="dark"] .stree__icon { color: #8d9aa4; }
[data-theme="dark"] .stree__children { border-left-color: #2c3840; }
[data-theme="dark"] .stree > .stree__node--probe + .stree__node--probe { border-top-color: #34424b; }
[data-theme="dark"] .stile { background: #1d272e; border-color: #2f3c45; color: #c3ccd2; }
[data-theme="dark"] .stile.st-up,
[data-theme="dark"] .stile.st-warning,
[data-theme="dark"] .stile.st-paused { background: #1d272e; }
[data-theme="dark"] .stile__name { color: #c3ccd2; }
[data-theme="dark"] .stile__value { color: #e3e9ed; }
[data-theme="dark"] .stile.st-down .stile__name, [data-theme="dark"] .stile.st-down .stile__value { color: #fff; }
[data-theme="dark"] .stile--add { background: #182127; }

/* grafieken (SVG): lijnen en assen subtiel op donker */
[data-theme="dark"] .lc-svg .grid, [data-theme="dark"] .linechart .grid { stroke: #26323a; }
[data-theme="dark"] .lc-svg .grid--base, [data-theme="dark"] .lc-svg .tick { stroke: #34424c; }
[data-theme="dark"] .lc-svg .limit-label--warn { fill: var(--st-warning-ink); }
[data-theme="dark"] .lc-svg .lc-empty { fill: #4a5862; }

/* maps-designer (de map zelf heeft een eigen licht/donker thema; alleen de omlijsting) */
[data-theme="dark"] .map-host--design { background: #0f1519; border-color: var(--slate-200); }
[data-theme="dark"] .md-add { color: var(--text); }
[data-theme="dark"] .md-add:hover { background: var(--slate-100); color: #8dbbf0; }

/* login */
[data-theme="dark"] .auth { background: var(--slate-50); }
[data-theme="dark"] .auth__panel { background: var(--white); }
[data-theme="dark"] .auth .field input { background: #11181d; color: var(--text); border-color: var(--slate-300); }

/* ---------- DevExpress (vangnet als de donkere Fluent-variant niet geladen is) */
[data-theme="dark"] .dxbl-grid,
[data-theme="dark"] .dxbl-grid-table,
[data-theme="dark"] .dxbl-grid .dxbl-grid-header-row,
[data-theme="dark"] .dxbl-grid .dxbl-grid-filter-row { background-color: var(--white); color: var(--text); border-color: var(--slate-200); }
[data-theme="dark"] .dxbl-grid .dxbl-grid-header { background-color: #1d272e; color: var(--text); }
[data-theme="dark"] .dxbl-grid-table > tbody > tr:hover > td { background-color: #1f2a31; }
[data-theme="dark"] .dxbl-text-edit,
[data-theme="dark"] .dxbl-edit-input,
[data-theme="dark"] .dxbl-memo,
[data-theme="dark"] .dxbl-combobox,
[data-theme="dark"] .dxbl-date-edit,
[data-theme="dark"] .dxbl-spin-edit { background-color: #11181d; color: var(--text); border-color: var(--slate-300); }
[data-theme="dark"] .dxbl-popup,
[data-theme="dark"] .dxbl-modal-content,
[data-theme="dark"] .dxbl-popup-content,
[data-theme="dark"] .dxbl-dropdown-dialog,
[data-theme="dark"] .dxbl-listbox { background-color: var(--white); color: var(--text); border-color: var(--slate-200); }
[data-theme="dark"] .dxbl-popup-header, [data-theme="dark"] .dxbl-popup-footer { background-color: #1d272e; border-color: var(--slate-200); }
[data-theme="dark"] .dxbl-tabs, [data-theme="dark"] .dxbl-tabs-tablist { background-color: transparent; border-color: var(--slate-200); }
[data-theme="dark"] .dxbl-btn-outline-secondary { color: var(--text); border-color: var(--slate-300); }

/* ---------- schakelaar in het gebruikersmenu (beide thema's) */
.themeswitch { padding: 8px 12px 10px; border-bottom: 1px solid var(--slate-100); margin-bottom: 4px; }
.themeswitch__label { display: block; font-size: 11px; font-weight: 600; letter-spacing: .05em; text-transform: uppercase; color: var(--text-muted); margin-bottom: 6px; }
.themeswitch__opts { display: flex; gap: 4px; }
.themeswitch__btn { flex: 1; display: inline-flex; align-items: center; justify-content: center; gap: 5px; padding: 6px 4px; font: inherit; font-size: 12px;
    border: 1px solid var(--slate-200); border-radius: var(--radius-sm); background: transparent; color: var(--text); cursor: pointer; }
.themeswitch__btn:hover { background: var(--slate-100); }
.themeswitch__btn.is-active { border-color: var(--info); color: var(--info); font-weight: 600; background: var(--info-50); }

/* ---------- lege schermen (EmptyState) */
.empty { display: flex; flex-direction: column; align-items: center; justify-content: center; text-align: center; gap: 10px;
    padding: 40px 20px; color: var(--text-muted); min-height: 220px; }
.empty__icon { width: 56px; height: 56px; border-radius: 50%; display: grid; place-items: center; background: var(--slate-100); color: var(--slate-500); }
.empty--positive .empty__icon { background: var(--st-up-50); color: var(--st-up-ink); }
.empty__title { font-size: 16px; font-weight: 600; color: var(--text); margin: 4px 0 0; }
.empty__text { max-width: 520px; font-size: 13.5px; line-height: 1.5; margin: 0; }
.empty__steps { margin: 4px 0 0; padding: 0; list-style: none; counter-reset: step; text-align: left; font-size: 13px; display: grid; gap: 6px; }
.empty__steps li { counter-increment: step; display: flex; gap: 10px; align-items: baseline; }
.empty__steps li::before { content: counter(step); flex: none; width: 20px; height: 20px; border-radius: 50%; background: var(--info-50); color: var(--info);
    font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.empty__actions { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; margin-top: 8px; }
.empty-btn { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; border-radius: var(--radius-sm); font-size: 13px; font-weight: 600;
    border: 1px solid var(--slate-300); color: var(--text); background: transparent; text-decoration: none !important; }
.empty-btn:hover { background: var(--slate-100); }
.empty-btn--primary { background: var(--brand); border-color: var(--brand); color: #fff !important; }
.empty-btn--primary:hover { background: var(--brand-600); }
[data-theme="dark"] .geomap { background: #1a242a; }
[data-theme="dark"] .geomap__legend, [data-theme="dark"] .geomap__hint { background: rgba(24, 33, 39, .92); color: var(--text); }