/* ========================================================================== 
   e.emach.pl — MATRIX / calm industrial dark theme
   Compatible with UI foundation v9.8.209

   Drop-in replacement for: css/theme.css

   Założenia:
   - branding i neutralny UI: prawie neutralny grafit / subtelny green cast / oszczędny zielony akcent,
   - dark mode zachowuje techniczny Matrix DNA bez neonowego/gamingowego charakteru,
   - light mode pozostaje czytelny, ale zachowuje zielony charakter,
   - kolory funkcjonalne WARNING / DANGER / OFFLINE pozostają semantyczne,
   - czysta biel/czerń nie są używane jako zwykłe powierzchnie UI;
   - bateria / mapa / BQS nie są automatycznie przepinane na branding.
   ========================================================================== */

:root {
    color-scheme: light;

    /* ---------- BRAND ---------- */
    --brand-primary: #16a34a;
    --brand-primary-hover: #15803d;
    --brand-primary-pressed: #166534;
    --brand-primary-soft: #e8f8ed;
    --brand-primary-soft-alt: #e3f6e9;
    --brand-primary-legacy: #16a34a;
    --brand-primary-highlight: #4ade80;
    --brand-primary-light: #86efac;
    --brand-focus: #22c55e;
    --brand-focus-ring: rgba(22, 163, 74, .14);
    --brand-focus-ring-soft: rgba(22, 163, 74, .10);
    --brand-shadow: rgba(22, 163, 74, .22);
    --brand-shadow-soft: rgba(22, 163, 74, .16);
    --control-selected-bg: var(--brand-primary-soft);
    --control-selected-text: #166534;

    /* ---------- APP CANVAS / SURFACES ---------- */
    --app-canvas: #f2f8f3;
    --app-canvas-background:
        radial-gradient(circle at 55% 0%, rgba(22,163,74,.08) 0, transparent 38%),
        #f2f8f3;
    --app-ui-bg: #f0f7f2;
    --app-surface: #fbfdfb;
    --app-surface-soft: #f7fbf8;
    --app-surface-soft-alt: #f5faf6;
    --app-surface-muted: #f1f7f3;
    --app-surface-hover: #eef8f1;
    --app-surface-info: #e9f8ee;

    /* ---------- TEXT ---------- */
    --app-text: #13251a;
    --app-text-strong: #102116;
    --app-text-heading: #0f2115;
    --app-text-secondary: #415849;
    --app-text-muted: #657b6b;
    --app-text-muted-alt: #5c7463;
    --app-text-subtle: #849689;
    --app-text-inverse: #f7fbf8;
    --text-on-dark: #f4fbf6;


    /* ---------- ICONOGRAPHY ---------- */
    --icon-neutral: #5f7265;
    --icon-muted: #7d8e83;
    --icon-strong: #30483a;
    --icon-surface: #eef4ef;
    --icon-border: #d5e1d8;
    /* Raised/recessed fills for closed icon surfaces. Unlike currentColor +
       opacity, these values really lighten the interior in LIGHT mode. */
    --icon-raised-fill: #ffffff;
    --device-icon-raised-fill: #ffffff;
    --ui-icon-raised-fill: var(--icon-raised-fill);
    --ui-icon-recessed-fill: var(--icon-recessed-fill);
    --b45-cabinet-fill: var(--device-icon-raised-fill);
    --b45-lightning-fill: #b9bcba;
    --icon-recessed-fill: #f1f4f1;
    --icon-active: var(--brand-primary);
    --icon-success: var(--brand-primary);
    --icon-warning: var(--state-warning);
    --icon-alarm: var(--state-alarm);
    --icon-error: var(--state-error);
    --icon-info: #5f7f70;
    --icon-offline: var(--state-offline);
    --icon-unknown: var(--state-unknown);

    /* Global dimming level for offline tiles/cards. */
    --offline-card-opacity: .40;

    /* Battery: base stays neutral; only the state glyph may carry an accent. */
    --battery-outline-light: #5f7265;
    --battery-inner-light: #eef4ef;
    --battery-status-inner-light: #263a2f;
    --battery-status-neutral-light: #5f7265;
    --battery-status-accent-light: #16a34a;
    --battery-status-alarm-light: #d92d20;
    --battery-outline-dark: #91a29a;
    --battery-inner-dark: #0e1815;
    --battery-status-inner-dark: #d0d9d4;
    --battery-status-neutral-dark: #91a29a;
    --battery-status-accent-dark: #32d37d;
    --battery-status-alarm-dark: #f05a5a;
    --battery-outline: var(--battery-outline-light);
    --battery-inner: var(--battery-inner-light);
    --battery-segment: var(--battery-outline);
    --battery-status-inner: var(--battery-status-inner-light);
    --battery-status-neutral: var(--battery-status-neutral-light);
    --battery-status-accent: var(--battery-status-accent-light);
    --battery-status-alarm: var(--battery-status-alarm-light);

    /* ---------- BORDERS ---------- */
    --app-border: #dbe8de;
    --app-border-ui: #dbe8de;
    --app-border-soft: #e7f0e9;
    --app-border-softer: #eaf2ec;
    --app-border-strong: #cbdccd;
    --app-control-border: #d0dfd3;
    --app-input-border: #d5e4d8;

    /* ---------- SHELL ---------- */
    --sidebar-bg: #f9fcfa;
    --sidebar-border: #dbe8de;
    --sidebar-brand-divider: #cfdfd2;
    --sidebar-product-text: #677c6d;
    --sidebar-brand-muted: #809187;
    --sidebar-nav-text: #53695a;
    --sidebar-nav-hover-bg: #eef8f1;
    --sidebar-nav-hover-text: #173520;
    --sidebar-foot-bg: #f2f7f3;
    --sidebar-foot-text: #708177;

    --topbar-bg: rgba(255,255,255,.96);
    --topbar-border: #dbe8de;
    --topbar-title: #102116;
    --topbar-eyebrow: #809187;
    --topbar-control-bg: #f8fbf9;
    --topbar-control-border: #d0dfd3;
    --topbar-control-text: #415849;
    --topbar-input-bg: #f4f9f5;
    --topbar-input-border: #d5e4d8;
    --topbar-mobile-search-input-bg: #ffffff;
    --topbar-mobile-search-input-focus-bg: #ffffff;
    --topbar-input-text: #13251a;
    --topbar-input-placeholder: #7d9183;
    --topbar-search-icon: #718676;
    --topbar-input-focus-bg: #fcfefc;
    --topbar-input-focus-border: #57a36d;
    --topbar-input-focus-ring: rgba(22,163,74,.12);
    --topbar-search-clear: #708177;
    --topbar-search-clear-hover-bg: #e9f4ec;
    --topbar-search-clear-hover-text: #1e4b2b;
    --topbar-search-toggle-bg: #f8fbf9;
    --topbar-search-toggle-border: #d0dfd3;
    --topbar-search-toggle-text: #53695a;
    --topbar-search-toggle-query-ring: #f7faf8;
    --topbar-search-shadow: 0 4px 14px rgba(25,70,39,.08);

    --view-switch-bg: #edf4ef;
    --view-switch-border: #d2dfd6;
    --view-switch-text: #667a6d;
    --view-switch-active-bg: #fafcfb;
    --view-switch-active-text: #176b38;
    --view-switch-shadow: inset 0 0 0 1px rgba(255,255,255,.42);
    --view-switch-active-shadow: 0 1px 5px rgba(31,75,45,.11);

    --account-hover-bg: #f5faf6;
    --account-hover-border: #dce9df;
    --account-avatar-bg: #e4f7ea;
    --account-name: #18321f;
    --account-meta: #738578;
    --account-chevron: #7d9082;
    --account-popover-heading: #829388;

    --detail-topbar-bg: #17472a;
    --detail-topbar-border: #245d37;
    --detail-topbar-text: #effff4;
    --detail-topbar-muted: rgba(232,255,239,.84);
    --detail-control-bg: rgba(74,222,128,.10);
    --detail-control-bg-hover: rgba(74,222,128,.18);
    --detail-control-border: rgba(134,239,172,.28);
    --detail-status-bg: rgba(74,222,128,.09);
    --detail-status-border: rgba(134,239,172,.25);
    /* Existing light-mode topbar semantics preserved independently. */
    --detail-semantic-bg: rgba(7,23,38,.13);
    --detail-semantic-border: rgba(255,255,255,.20);
    --detail-semantic-success-bg: rgba(24,103,57,.16);
    --detail-semantic-success-border: rgba(98,220,132,.35);
    --detail-semantic-danger-bg: rgba(137,30,49,.18);
    --detail-semantic-danger-border: rgba(251,113,133,.42);
    --detail-warning-bg: #fb7185;
    --detail-warning-text: var(--state-danger-contrast);
    --detail-device-state-text: #f7fbff;

    --sidebar-account-bg: #f2f7f3;
    --sidebar-account-border: #d6e4d8;
    --sidebar-account-hover-bg: #eaf5ed;
    --sidebar-account-hover-border: #c8daca;


    /* ---------- SURFACE SYSTEM: osobna kompozycja LIGHT ---------- */
    --surface-canvas: var(--app-canvas);
    --surface-1: #fbfdfb;
    --surface-2: #f4f7f4;
    --surface-3: #e9efeb;
    --surface-hover: #edf4ef;
    --surface-border: #cfdad2;
    --surface-border-strong: #aebfb4;
    --surface-text: #1b3026;
    --surface-muted: #697b70;

    /* Akcent dopełniający: tylko elementy specjalne / developerskie. */
    --accent-tertiary: #7157b7;
    --accent-tertiary-hover: #654aa9;
    --accent-tertiary-soft: #f0ebfa;
    --accent-tertiary-border: #d3c7ed;

    /* Kafle urządzeń — neutralny sage/teal zamiast koloru brandu. */
    --device-card-header: #36534a;
    --device-card-header-2: #3e5d53;
    --device-card-header-text: #f8fcf9;
    --device-card-header-muted: #d8e6dd;
    --device-card-body: #eef3ef;
    --device-card-panel: #fbfcfb;
    --device-card-panel-border: #d0dbd4;
    --device-card-text: #1b3026;
    --device-card-muted: #65786c;
    --device-card-footer: #e4ebe6;
    --device-card-footer-border: #cbd7cf;
    --device-card-action: #e4efe8;
    --device-card-action-hover: rgba(255,255,255,.12);
    --device-card-border: #c7d3cb;
    --device-card-border-hover: #9eb4a6;
    --device-card-icon-bg: rgba(11,35,24,.18);
    --device-card-icon-border: rgba(255,255,255,.17);
    --device-card-shadow: 0 7px 22px rgba(31,55,41,.08);
    --device-card-shadow-hover: 0 10px 28px rgba(31,55,41,.13);
    --device-card-inset-highlight: rgba(255,255,255,.34);
    --device-card-empty-bg: rgba(255,255,255,.30);

    /* Widok listy urządzeń. */
    --device-list-row-bg: #fafcfb;
    --device-list-row-alt: #f8faf8;
    --device-list-row-hover: #f0f6f2;
    --device-list-row-border: #d8e2db;
    --device-list-row-border-hover: #b8c8be;
    --device-list-row-shadow: 0 1px 3px rgba(31,55,41,.045);
    --device-list-row-shadow-hover: 0 3px 10px rgba(31,55,41,.09);
    --device-list-title: #1a3025;
    --device-list-description: #6b7f72;
    --device-list-meta: #596d60;
    --device-list-muted: #7c8e82;
    --device-list-divider: #dde6e0;
    --device-list-control-bg: #f8fbf9;
    --device-list-control-border: #d5dfd8;
    --device-list-control-text: #5d7164;
    --device-list-control-hover-bg: #edf4ef;
    --device-list-control-hover-border: #aec5b6;
    --device-list-control-hover-text: #243b2f;

    /* ---------- ADMIN: osobna warstwa powierzchni ---------- */
    --admin-page-bg: transparent;
    --admin-page-border: transparent;
    --admin-surface: #fbfdfb;
    --admin-surface-soft: #f5f9f6;
    --admin-surface-hover: #eef6f1;
    --admin-border: #d6e2da;
    --admin-border-soft: #e6eee8;
    --admin-border-strong: #b9cbbf;
    --admin-text: #1d3026;
    --admin-text-strong: #17291f;
    --admin-text-secondary: #52685a;
    --admin-muted: #7c8f83;
    --admin-branch: #c5d3ca;
    --admin-avatar-bg: #e3f4e8;
    --admin-avatar-text: #237944;
    --admin-badge-bg: #eef5f0;
    --admin-badge-text: #5c7263;
    --admin-role-bg: #e6f5eb;
    --admin-role-text: #237944;
    --admin-input-bg: #f8fbf9;
    --admin-input-border: #d9e4dc;
    --admin-input-text: #1d3026;
    --admin-input-placeholder: #809087;
    --admin-toggle-bg: #f4f8f5;
    --admin-toggle-hover-bg: #eaf3ed;
    --admin-toggle-border: #d8e3db;
    --admin-toggle-text: #4f6657;
    --admin-shadow-hover: 0 4px 14px rgba(31,75,45,.07);

    /* ---------- DEVICE DETAIL: osobna kompozycja LIGHT ---------- */
    --detail-surface: #fbfdfb;
    --detail-surface-soft: #f5f9f6;
    --detail-surface-panel: #fbfdfb;
    --detail-surface-alt: #f1f6f2;
    --detail-surface-hover: #eaf4ed;
    --detail-border: #d8e4dc;
    --detail-border-soft: #e5ede7;
    --detail-border-strong: #c5d6ca;
    --detail-text: #1b3026;
    --detail-text-strong: #13271d;
    --detail-muted: #6d8074;
    --detail-muted-strong: #52675a;
    --detail-kicker: #237944;
    --detail-head-bg:
        radial-gradient(circle at 90% 10%, rgba(22,163,74,.08), transparent 31%),
        linear-gradient(180deg, #fbfdfb 0%, #f6faf7 100%);
    --detail-meta-bg: #f2f7f3;
    --detail-meta-border: #dce7df;
    --detail-tree-line: #d9e5dc;
    --detail-placeholder-bg: #f7faf8;
    --detail-placeholder-border: #cfded3;
    --detail-placeholder-text: #73867a;
    --detail-shadow: 0 8px 28px rgba(31,55,41,.06);
    --detail-shadow-compact: 0 4px 18px rgba(31,55,41,.045);

    /* ---------- AUTH / PUBLIC BRAND SURFACES ---------- */
    --auth-brand-bg:
        radial-gradient(circle at 18% 12%, rgba(74,222,128,.30), transparent 30%),
        radial-gradient(circle at 86% 72%, rgba(22,163,74,.24), transparent 34%),
        linear-gradient(145deg, #071c0d 0%, #0b2b15 48%, #06170b 100%);
    --auth-brand-text: #f0fff4;
    --auth-brand-muted: rgba(217,255,228,.74);
    --auth-brand-subtle: rgba(190,242,205,.57);
    --auth-brand-footer: rgba(198,245,212,.60);
    --auth-body-bg: var(--app-canvas);
    --auth-main-bg: #f6faf7;
    --auth-text: var(--app-text);
    --auth-heading: #102116;
    --auth-input-bg: #fafcfb;
    --auth-input-border: #d3e1d6;
    --auth-input-text: var(--app-text);
    --auth-input-placeholder: #7f9185;
    --auth-label: #4b6252;
    --auth-muted: #708278;
    --auth-focus-border: #22c55e;
    --auth-focus-bg: #fdfefd;
    --auth-focus-ring: rgba(22,163,74,.12);
    --auth-divider: #dfeae1;
    --auth-info-border: #cde7d4;
    --auth-info-bg: #eaf8ee;
    --auth-info-icon-bg: #d8f3df;

    --public-bg:
        radial-gradient(circle at 72% 24%, rgba(22,163,74,.10), transparent 28%),
        #f3f8f4;
    --public-header-bg: rgba(255,255,255,.84);

    /* ---------- STATE: znaczenie, nie branding ---------- */
    --state-success: #16a34a;
    --state-success-strong: #15803d;
    --state-success-soft: #f1fbf5;
    --state-success-border: #cdebd8;
    --state-success-text: #29985a;

    --state-warning: #dc8c00;
    --state-warning-soft: #fff8e8;
    --state-warning-border: #efd9a8;
    --state-warning-text: #a96a00;
    --state-warning-contrast: #3b2a00;

    --state-alarm: #d92d20;
    --state-alarm-soft: #fff3f2;
    --state-alarm-border: #efcac6;
    --state-alarm-text: #b42318;

    --state-error: #d92d20;
    --state-error-soft: #fff6f6;
    --state-error-border: #f0d9d9;
    --state-error-text: #c35d5d;

    --state-info: #2876c7;
    --state-info-soft: #eef6ff;
    --state-info-border: #c9def4;
    --state-info-text: #2869aa;

    --state-offline: #64748b;
    --state-offline-soft: #f1f4f6;
    --state-offline-border: #d8dfe4;
    --state-offline-text: #65727c;
    --state-offline-overlay: rgba(100,116,139,.18);

    --state-unknown: #7a8790;
    --state-unknown-soft: #f3f5f6;
    --state-unknown-border: #dde2e5;
    --state-unknown-text: #6f7b83;

    /* Legacy danger alias: error-like UI keeps one semantic source. */
    --state-danger: var(--state-error);
    --state-danger-soft: var(--state-error-soft);
    --state-danger-border: var(--state-error-border);
    --state-danger-text: var(--state-error-text);
    --state-danger-contrast: #fff7f7;
    --danger-action-bg: #fff7f7;
    --danger-action-bg-hover: #fff0f0;
    --danger-action-border: #f1caca;
    --danger-action-border-hover: #e6a8a8;
    --danger-action-text: #b23a3a;
    --control-knob-bg: #f7fbf8;
    --control-knob-shadow: 0 1px 3px rgba(18,38,58,.18);

    /* ---------- PARAMETER VISUAL SEMANTICS ----------
       Color differentiates information type only where it adds meaning. */
    --parameter-icon-neutral: #536b83;
    --parameter-icon-neutral-soft: #eef3f7;
    --parameter-icon-temperature: #16885a;
    --parameter-icon-temperature-soft: transparent; /* v9.8.271: parameter type must not paint an icon tile background */
    --parameter-icon-temperature-set: #b56b12;
    --parameter-icon-temperature-set-soft: #fff3df;
    --parameter-icon-voltage: #c88300;
    --parameter-icon-voltage-soft: #fff5dd;
    --parameter-icon-current: #7550ba;
    --parameter-icon-current-soft: #f2edfb;
    --parameter-icon-time: #c13d7c;
    --parameter-icon-time-soft: #faedf4;
    --parameter-icon-time-charging: #dc3f45;
    --parameter-icon-time-charging-soft: rgba(220,63,69,.10);
    --parameter-icon-time-charging-border: rgba(220,63,69,.22);
    --parameter-icon-time-cooling: #2f82d7;
    --parameter-icon-time-cooling-soft: rgba(47,130,215,.10);
    --parameter-icon-time-cooling-border: rgba(47,130,215,.22);
    --parameter-icon-data: #2876c7;
    --parameter-icon-data-soft: #eaf3fc;
    --parameter-icon-technical: #536b83;
    --parameter-icon-technical-soft: transparent;
    --parameter-panel-frame: #dfe7e1;

    /* ---------- SHADOW ---------- */
    --app-shadow: 0 6px 22px rgba(18, 64, 32, .07);
    --app-shadow-hover: 0 10px 28px rgba(18, 64, 32, .12);
    --app-shadow-dashboard: 0 8px 28px rgba(18, 64, 32, .08);

    /* ---------- BOOTSTRAP ---------- */
    --bootstrap-spinner-track: rgba(19, 37, 26, .16);
    --bootstrap-spinner-head: #16a34a;
    --bootstrap-error-border: rgba(19, 37, 26, .14);
    --bootstrap-error-bg: rgba(255,255,255,.74);
    --bootstrap-action-border: rgba(19, 37, 26, .18);

    /* ---------- KOMPATYBILNOŚĆ ZE STARSZYM CSS ---------- */
    --ui-bg: var(--app-ui-bg);
    --ui-surface: var(--app-surface);
    --ui-surface-soft: var(--app-surface-soft);
    --ui-surface-muted: var(--app-surface-muted);
    --ui-border: var(--app-border-ui);
    --ui-border-strong: var(--app-border-strong);
    --ui-text: var(--app-text);
    --ui-muted: var(--app-text-muted-alt);
    --ui-primary: var(--brand-primary-legacy);
    --ui-primary-soft: var(--brand-primary-soft-alt);
    --ui-success: var(--state-success-strong);
    --ui-danger: var(--state-danger);
    --ui-warning: var(--state-warning);
    --ui-shadow: var(--app-shadow);
    --ui-shadow-hover: var(--app-shadow-hover);

    --dash-bg: var(--app-canvas);
    --dash-surface: var(--app-surface);
    --dash-surface-2: var(--app-surface-soft-alt);
    --dash-border: var(--app-border);
    --dash-text: var(--app-text);
    --dash-muted: var(--app-text-muted);
    --dash-blue: var(--brand-primary);
    --dash-blue-dark: var(--brand-primary-hover);
    --dash-blue-soft: var(--brand-primary-soft);
    --dash-green: var(--state-success);
    --dash-shadow: var(--app-shadow-dashboard);
}

@media (prefers-color-scheme: dark) {
    :root {
        color-scheme: dark;

        /* ---------- BRAND: restrained green accent ---------- */
        --brand-primary: #32d37d;
        --brand-primary-hover: #43df8b;
        --brand-primary-pressed: #27b96b;
        --brand-primary-soft: #0d261a;
        --brand-primary-soft-alt: #0b2117;
        --brand-primary-legacy: #32d37d;
        --brand-primary-highlight: #59e39a;
        --brand-primary-light: #69e9a5;
        --brand-focus: #3cdb84;
        --brand-focus-ring: rgba(50,211,125,.18);
        --brand-focus-ring-soft: rgba(50,211,125,.10);
        --brand-shadow: rgba(50,211,125,.18);
        --brand-shadow-soft: rgba(50,211,125,.12);
        --control-selected-bg: #10291d;
        --control-selected-text: #78e6a9;

        /* ---------- MATRIX CANVAS: neutral graphite with minimal green cast ---------- */
        --app-canvas: #050807;
        --app-canvas-background:
            radial-gradient(circle at 52% -8%, rgba(50,211,125,.025) 0, transparent 38%),
            linear-gradient(180deg, #060908 0%, #050807 58%, #040706 100%);
        --app-ui-bg: #050807;
        --app-surface: #0b1310;
        --app-surface-soft: #0e1815;
        --app-surface-soft-alt: #0c1613;
        --app-surface-muted: #09110e;
        --app-surface-hover: #14241e;
        --app-surface-info: #0f1d1b;

        /* ---------- TEXT ---------- */
        --app-text: #edf4f0;
        --app-text-strong: #f3f7f5;
        --app-text-heading: #f3f7f5;
        --app-text-secondary: #a8bab2;
        --app-text-muted: #70857b;
        --app-text-muted-alt: #70857b;
        --app-text-subtle: #596c63;
        --app-text-inverse: #07100c;
        --text-on-dark: #edf4f0;

        /* ---------- BORDERS ---------- */
        --app-border: #1b2d26;
        --app-border-ui: #1b2d26;
        --app-border-soft: #13231d;
        --app-border-softer: #101c18;
        --app-border-strong: #29493d;
        --app-control-border: #223c32;
        --app-input-border: #223c32;

        /* ---------- SHELL ---------- */
        --sidebar-bg: #070c0a;
        --sidebar-border: #16261f;
        --sidebar-brand-divider: #20372e;
        --sidebar-product-text: #8a9d94;
        --sidebar-brand-muted: #62766d;
        --sidebar-nav-text: #9aaba3;
        --sidebar-nav-hover-bg: #101a17;
        --sidebar-nav-hover-text: #dce7e2;
        --sidebar-foot-bg: #080e0c;
        --sidebar-foot-text: #687c72;

        --topbar-bg: rgba(7,12,10,.96);
        --topbar-border: #172821;
        --topbar-title: #edf4f0;
        --topbar-eyebrow: #657970;
        --topbar-control-bg: #0a110f;
        --topbar-control-border: #223a31;
        --topbar-control-text: #a8bab2;
        --topbar-input-bg: #090f0d;
        --topbar-input-border: #223a31;
        --topbar-mobile-search-input-bg: #202622;
        --topbar-mobile-search-input-focus-bg: #272e29;
        --topbar-input-text: #edf4f0;
        --topbar-input-placeholder: #657a70;
        --topbar-search-icon: #70857b;
        --topbar-input-focus-bg: #0d1713;
        --topbar-input-focus-border: #32d37d;
        --topbar-input-focus-ring: rgba(50,211,125,.14);
        --topbar-search-clear: #71857c;
        --topbar-search-clear-hover-bg: #14241e;
        --topbar-search-clear-hover-text: #d8e5df;
        --topbar-search-toggle-bg: #0c1512;
        --topbar-search-toggle-border: #253e34;
        --topbar-search-toggle-text: #a5b7af;
        --topbar-search-toggle-query-ring: #0c1512;
        --topbar-search-shadow: 0 4px 16px rgba(0,0,0,.30);

        --view-switch-bg: #0b1411;
        --view-switch-border: #21392f;
        --view-switch-text: #83978d;
        --view-switch-active-bg: #14241e;
        --view-switch-active-text: #8fe4b4;
        --view-switch-shadow: inset 0 0 0 1px rgba(237,244,240,.018);
        --view-switch-active-shadow: 0 1px 5px rgba(0,0,0,.30);

        --account-hover-bg: #0d1713;
        --account-hover-border: #20372e;
        --account-avatar-bg: #10291d;
        --account-name: #e4ece8;
        --account-meta: #6f8379;
        --account-chevron: #6f8379;
        --account-popover-heading: #71867b;

        /* detal urządzenia: ciemny terminalowy pasek */
        --detail-topbar-bg: #0e1815;
        --detail-topbar-border: #1d332a;
        --detail-topbar-text: #edf4f0;
        --detail-topbar-muted: rgba(168,186,178,.86);
        --detail-control-bg: rgba(50,211,125,.055);
        --detail-control-bg-hover: rgba(50,211,125,.11);
        --detail-control-border: rgba(50,211,125,.18);
        --detail-status-bg: rgba(50,211,125,.045);
        --detail-status-border: rgba(50,211,125,.16);
        --detail-semantic-bg: var(--detail-status-bg);
        --detail-semantic-border: var(--detail-status-border);
        --detail-semantic-success-bg: var(--state-success-soft);
        --detail-semantic-success-border: var(--state-success-border);
        --detail-semantic-danger-bg: var(--state-error-soft);
        --detail-semantic-danger-border: var(--state-error-border);
        --detail-warning-bg: var(--state-warning);
        --detail-warning-text: var(--state-warning-contrast);
        --detail-device-state-text: var(--detail-topbar-text);

        --sidebar-account-bg: #0a110f;
        --sidebar-account-border: #1c3028;
        --sidebar-account-hover-bg: #101b17;
        --sidebar-account-hover-border: #29483c;


        /* ---------- SURFACE SYSTEM: osobna kompozycja DARK ---------- */
        --surface-canvas: var(--app-canvas);
        --surface-1: #0b1310;
        --surface-2: #0e1815;
        --surface-3: #101c18;
        --surface-hover: #14241e;
        --surface-border: #1b332a;
        --surface-border-strong: #315345;
        --surface-text: #edf4f0;
        --surface-muted: #81968c;


        /* ---------- ICONOGRAPHY: DARK ---------- */
        --icon-neutral: #91a29a;
        --icon-muted: #708279;
        --icon-strong: #b4c2bb;
        --icon-surface: #0e1815;
        --icon-border: #233a31;
        /* DARK keeps the same relief direction without introducing white tiles. */
        --icon-raised-fill: #16231d;
        --device-icon-raised-fill: #22362c;
        --ui-icon-raised-fill: var(--icon-raised-fill);
        --ui-icon-recessed-fill: var(--icon-recessed-fill);
        --b45-cabinet-fill: var(--device-icon-raised-fill);
        --b45-lightning-fill: #111a16;
        --icon-recessed-fill: #111a16;
        --icon-active: var(--brand-primary);
        --icon-success: var(--brand-primary);
        --icon-warning: var(--state-warning);
        --icon-alarm: var(--state-alarm);
        --icon-error: var(--state-error);
        --icon-info: #88a59a;
        --icon-offline: var(--state-offline);
        --icon-unknown: var(--state-unknown);

        --battery-outline: var(--battery-outline-dark);
        --battery-inner: var(--battery-inner-dark);
        --battery-segment: var(--battery-outline);
        --battery-status-inner: var(--battery-status-inner-dark);
        --battery-status-neutral: var(--battery-status-neutral-dark);
        --battery-status-accent: var(--battery-status-accent-dark);
        --battery-status-alarm: var(--battery-status-alarm-dark);

        /* Akcent dopełniający do zieleni: zgaszony fiolet. */
        --accent-tertiary: #9b91ad;
        --accent-tertiary-hover: #aaa0bd;
        --accent-tertiary-soft: #1a181e;
        --accent-tertiary-border: #3d3847;

        /* Destructive actions use the semantic error family. */
        --state-danger-contrast: #fff2f3;
        --danger-action-bg: #211416;
        --danger-action-bg-hover: #2b171a;
        --danger-action-border: #5e3035;
        --danger-action-border-hover: #7a3d44;
        --danger-action-text: #ed858c;

        --control-knob-bg: #edf4f0;
        --control-knob-shadow: 0 1px 3px rgba(0,0,0,.34);

        /* Parameter type colors: restrained; time uses one INFO/CYAN family. */
        --parameter-icon-neutral: var(--icon-neutral);
        --parameter-icon-neutral-soft: var(--icon-surface);
        --parameter-icon-temperature: var(--icon-neutral);
        --parameter-icon-temperature-soft: transparent; /* v9.8.271: keep temperature marker background neutral */
        --parameter-icon-temperature-set: var(--icon-neutral);
        --parameter-icon-temperature-set-soft: var(--icon-surface);
        --parameter-icon-voltage: var(--icon-neutral);
        --parameter-icon-voltage-soft: var(--icon-surface);
        --parameter-icon-current: var(--icon-neutral);
        --parameter-icon-current-soft: var(--icon-surface);
        --parameter-icon-time: var(--icon-neutral);
        --parameter-icon-time-soft: var(--icon-surface);
        --parameter-icon-time-charging: var(--icon-active);
        --parameter-icon-time-charging-soft: var(--brand-primary-soft);
        --parameter-icon-time-charging-border: var(--brand-primary);
        --parameter-icon-time-cooling: var(--icon-neutral);
        --parameter-icon-time-cooling-soft: var(--icon-surface);
        --parameter-icon-time-cooling-border: var(--icon-border);
        --parameter-icon-data: var(--icon-neutral);
        --parameter-icon-data-soft: var(--icon-surface);
        --parameter-icon-technical: var(--icon-muted);
        --parameter-icon-technical-soft: transparent;
        --parameter-panel-frame: #192b24;

        /* Kafle: mostly neutral graphite; only a subtle green-teal cast. */
        --device-card-header: #101c18;
        --device-card-header-2: #111f1a;
        --device-card-header-text: #edf4f0;
        --device-card-header-muted: #9bada4;
        --device-card-body: #0b1310;
        --device-card-panel: #0e1815;
        --device-card-panel-border: #182b23;
        --device-card-text: #edf4f0;
        --device-card-muted: #778b81;
        --device-card-footer: #090f0d;
        --device-card-footer-border: #172820;
        --device-card-action: #9eafa7;
        --device-card-action-hover: rgba(50,211,125,.055);
        --device-card-border: #192a23;
        --device-card-border-hover: #315345;
        --device-card-icon-bg: #101a17;
        --device-card-icon-border: #263c33;
        --device-card-shadow: 0 8px 24px rgba(0,0,0,.34);
        --device-card-shadow-hover: 0 11px 30px rgba(0,0,0,.44);
        --device-card-inset-highlight: rgba(237,244,240,.018);
        --device-card-empty-bg: rgba(237,244,240,.018);

        /* Lista urządzeń — ta sama rodzina surface, trochę spokojniejsza. */
        --device-list-row-bg: #0a1210;
        --device-list-row-alt: #0b1411;
        --device-list-row-hover: #111d19;
        --device-list-row-border: #172820;
        --device-list-row-border-hover: #2b493e;
        --device-list-row-shadow: 0 2px 5px rgba(0,0,0,.18);
        --device-list-row-shadow-hover: 0 4px 12px rgba(0,0,0,.28);
        --device-list-title: #edf4f0;
        --device-list-description: #98aaa1;
        --device-list-meta: #a7b8b0;
        --device-list-muted: #74887e;
        --device-list-divider: #182922;
        --device-list-control-bg: #0c1512;
        --device-list-control-border: #20372e;
        --device-list-control-text: #9fb1a8;
        --device-list-control-hover-bg: #14241e;
        --device-list-control-hover-border: #315345;
        --device-list-control-hover-text: #e5eeea;

        /* ---------- ADMIN: osobna kompozycja DARK ---------- */
        --admin-page-bg: transparent;
        --admin-page-border: transparent;
        --admin-surface: var(--surface-1);
        --admin-surface-soft: var(--surface-2);
        --admin-surface-hover: var(--surface-hover);
        --admin-border: var(--surface-border);
        --admin-border-soft: #172820;
        --admin-border-strong: var(--surface-border-strong);
        --admin-text: var(--app-text);
        --admin-text-strong: var(--app-text-strong);
        --admin-text-secondary: var(--app-text-secondary);
        --admin-muted: var(--app-text-muted);
        --admin-branch: #29463b;
        --admin-avatar-bg: #10291d;
        --admin-avatar-text: #75dda6;
        --admin-badge-bg: #111d19;
        --admin-badge-text: #94a79e;
        --admin-role-bg: #10291d;
        --admin-role-text: #7fe2ab;
        --admin-input-bg: #09110e;
        --admin-input-border: #21392f;
        --admin-input-text: var(--app-text);
        --admin-input-placeholder: #657a70;
        --admin-toggle-bg: #101a17;
        --admin-toggle-hover-bg: #14241e;
        --admin-toggle-border: #223a31;
        --admin-toggle-text: #a8bab2;
        --admin-shadow-hover: 0 4px 14px rgba(0,0,0,.24);

        /* ---------- DEVICE DETAIL: osobna kompozycja DARK ---------- */
        --detail-surface: #0b1310;
        --detail-surface-soft: #0a1210;
        --detail-surface-panel: #0e1815;
        --detail-surface-alt: #101c18;
        --detail-surface-hover: #14241e;
        --detail-border: #1b332a;
        --detail-border-soft: #172820;
        --detail-border-strong: #315345;
        --detail-text: #edf4f0;
        --detail-text-strong: #f3f7f5;
        --detail-muted: #7b8f85;
        --detail-muted-strong: #a8bab2;
        --detail-kicker: #69d99d;
        --detail-head-bg:
            linear-gradient(180deg, #101c18 0%, #0d1714 100%);
        --detail-meta-bg: #0d1713;
        --detail-meta-border: #1e352c;
        --detail-tree-line: #1e352c;
        --detail-placeholder-bg: #0a1210;
        --detail-placeholder-border: #253f35;
        --detail-placeholder-text: #81968c;
        --detail-shadow: 0 7px 24px rgba(0,0,0,.31);
        --detail-shadow-compact: 0 5px 20px rgba(0,0,0,.25);

        /* ---------- AUTH / PUBLIC ---------- */
        --auth-brand-bg:
            radial-gradient(circle at 18% 12%, rgba(57,255,136,.18), transparent 29%),
            radial-gradient(circle at 84% 74%, rgba(22,163,74,.16), transparent 34%),
            linear-gradient(145deg, #010503 0%, #06150a 47%, #020704 100%);
        --auth-brand-text: #eafff0;
        --auth-brand-muted: rgba(196,255,214,.70);
        --auth-brand-subtle: rgba(154,224,175,.52);
        --auth-brand-footer: rgba(164,230,184,.55);
        --auth-body-bg: #020704;
        --auth-main-bg: #040b06;
        --auth-text: #dcffe7;
        --auth-heading: #effff4;
        --auth-input-bg: #071109;
        --auth-input-border: #204b30;
        --auth-input-text: #e9fff0;
        --auth-input-placeholder: #587762;
        --auth-label: #a0c8ac;
        --auth-muted: #769982;
        --auth-focus-border: #39ff88;
        --auth-focus-bg: #0a170d;
        --auth-focus-ring: rgba(57,255,136,.14);
        --auth-divider: #153620;
        --auth-info-border: #1c4a2d;
        --auth-info-bg: #092214;
        --auth-info-icon-bg: #0d301b;
        --public-bg: var(--app-canvas-background);
        --public-header-bg: rgba(2,7,4,.92);

        /* ---------- STATE: znaczenie, nie branding ---------- */
        --state-success: #48e88b;
        --state-success-strong: #32d37d;
        --state-success-soft: rgba(72,232,139,.10);
        --state-success-border: rgba(72,232,139,.28);
        --state-success-text: #79eaa7;

        --state-warning: #f2b84b;
        --state-warning-soft: rgba(242,184,75,.10);
        --state-warning-border: rgba(242,184,75,.26);
        --state-warning-text: #f0c66f;
        --state-warning-contrast: #12140f;

        --state-alarm: #f05a5a;
        --state-alarm-soft: rgba(240,90,90,.11);
        --state-alarm-border: rgba(240,90,90,.28);
        --state-alarm-text: #f27b7b;

        --state-error: #e56b73;
        --state-error-soft: rgba(229,107,115,.10);
        --state-error-border: rgba(229,107,115,.26);
        --state-error-text: #ed858c;

        --state-info: #55b8e8;
        --state-info-soft: rgba(85,184,232,.09);
        --state-info-border: rgba(85,184,232,.24);
        --state-info-text: #78c5eb;

        --state-offline: #718078;
        --state-offline-soft: rgba(113,128,120,.10);
        --state-offline-border: rgba(113,128,120,.24);
        --state-offline-text: #91a098;
        --state-offline-overlay: rgba(113,128,120,.24);

        --state-unknown: #7c8882;
        --state-unknown-soft: rgba(124,136,130,.09);
        --state-unknown-border: rgba(124,136,130,.22);
        --state-unknown-text: #99a59f;

        --state-danger: var(--state-error);
        --state-danger-soft: var(--state-error-soft);
        --state-danger-border: var(--state-error-border);
        --state-danger-text: var(--state-error-text);

        /* ---------- SHADOW / GLOW ---------- */
        --app-shadow: 0 6px 22px rgba(0,0,0,.40);
        --app-shadow-hover: 0 10px 30px rgba(0,0,0,.50);
        --app-shadow-dashboard: 0 8px 28px rgba(0,0,0,.44);

        /* ---------- BOOTSTRAP ---------- */
        --bootstrap-spinner-track: rgba(168,186,178,.15);
        --bootstrap-spinner-head: #32d37d;
        --bootstrap-error-border: rgba(168,186,178,.18);
        --bootstrap-error-bg: rgba(7,12,10,.78);
        --bootstrap-action-border: rgba(168,186,178,.24);
    }
}

/* ========================================================================== 
   v9.8.219 — neutral core / grayscale-first design system

   Zasada: interfejs ma pozostać czytelny bez koloru. Branding jest akcentem
   interakcji, a kolory warning/alarm/error zachowują znaczenie semantyczne.
   Kolor topbara urządzenia nadal jest osobnym tokenem (--device-card-header),
   więc specjalizacja może go nadpisać bez zmiany struktury komponentu.
   ========================================================================== */
:root {
    /* Neutral canvas and surfaces. */
    /* v9.8.310 — LIGHT surface hierarchy corrected after visual testing.
       The real canvas and workspace now share the same restrained shell tone,
       instead of darkening only body while leaving :root on the old canvas. */
    --app-canvas: #eaede9;
    --app-canvas-background: #eaede9;
    --app-ui-bg: #f5f6f4;
    --app-workspace-bg: #eaede9;
    --app-surface: #ffffff;
    --app-surface-soft: #f8f8f6;
    --app-surface-soft-alt: #f6f7f5;
    --app-surface-muted: #f0f1ef;
    --app-surface-hover: #eceeeb;
    --app-surface-info: #f5f6f4;

    --app-text: #202320;
    --app-text-strong: #171a18;
    --app-text-heading: #171a18;
    --app-text-secondary: #4e544f;
    --app-text-muted: #707671;
    --app-text-muted-alt: #656b66;
    --app-text-subtle: #8c918d;

    --app-border: #d8dbd8;
    --app-border-ui: #d8dbd8;
    --app-border-soft: #e5e7e4;
    --app-border-softer: #eceeeb;
    --app-border-strong: #b9bebb;
    --app-control-border: #cfd3cf;
    --app-input-border: #cfd3cf;

    --surface-canvas: var(--app-canvas);
    --surface-1: #ffffff;
    --surface-2: #f6f7f5;
    --surface-3: #eceeeb;
    --surface-hover: #eff1ee;
    --surface-border: #d5d9d5;
    --surface-border-strong: #aeb4af;
    --surface-text: #202320;
    --surface-muted: #707671;

    /* Shell belongs to the same quiet LIGHT layer as the workspace.
       It is only slightly darker than the central canvas so it no longer
       dominates the device content. */
    --sidebar-bg: #e7eae7;
    --sidebar-border: #d9dcda;
    --sidebar-brand-divider: #d2d5d2;
    --sidebar-product-text: #6f7570;
    --sidebar-brand-muted: #848985;
    --sidebar-nav-text: #545a55;
    --sidebar-nav-hover-bg: #f0f1ef;
    --sidebar-nav-hover-text: #1f2420;
    --sidebar-foot-bg: #f4f5f3;
    --sidebar-foot-text: #727873;

    --topbar-bg: rgba(231,234,231,.98);
    --topbar-border: #d8dbd8;
    --topbar-title: #1b1f1c;
    --topbar-eyebrow: #7a807b;
    --topbar-control-bg: #f7f8f6;
    --topbar-control-border: #d1d5d1;
    --topbar-control-text: #505651;
    --topbar-input-bg: #f6f7f5;
    --topbar-input-border: #cfd3cf;
    --topbar-input-text: #202320;
    --topbar-input-placeholder: #838884;

    /* Device cards are the foreground LIGHT surfaces: header remains gently
       tinted for structure, while body is neutral white. */
    --device-card-header: #f5f7f4;
    --device-card-header-2: #f2f4f1;
    --device-card-header-text: #202420;
    --device-card-header-muted: #6d746e;
    --device-card-body: #ffffff;
    --device-card-panel: #ffffff;
    --device-card-panel-border: #d8dcd8;
    --device-card-text: #202420;
    --device-card-muted: #707771;
    --device-card-footer: #f1f2f0;
    --device-card-footer-border: #d4d8d4;
    --device-card-action: #68706a;
    --device-card-action-hover: rgba(32,36,32,.07);
    --device-card-border: #aeb5af;
    --device-card-border-hover: #737d75;
    --device-card-icon-bg: #e4e7e4;
    --device-card-icon-border: #cdd2ce;
    --device-card-shadow: 0 3px 12px rgba(24,28,25,.045);
    --device-card-shadow-hover: 0 6px 18px rgba(24,28,25,.08);
    --device-card-inset-highlight: rgba(255,255,255,.55);
    /* Empty/live-loading state is not a separate surface. Keeping it transparent
       prevents a theme-colour flash before broker data hydrates the card. */
    --device-card-empty-bg: transparent;

    /* Detail header follows the same calm hierarchy, but keeps independent tokens. */
    --detail-topbar-bg: #eef0ed;
    --detail-topbar-border: #d0d5d0;
    --detail-topbar-text: #202420;
    --detail-topbar-muted: #69706a;
    --detail-control-bg: rgba(32,36,32,.035);
    --detail-control-bg-hover: rgba(32,36,32,.075);
    --detail-control-border: #cbd0cc;
    --detail-status-bg: rgba(32,36,32,.025);
    --detail-status-border: #d0d4d1;
    --detail-device-state-text: var(--detail-topbar-text);

    /* Group cards intentionally have a clearer frame than ordinary surfaces. */
    --group-card-bg: #ffffff;
    --group-card-border: #aeb5af;
    --group-card-border-hover: #737d75;
    --group-card-icon-bg: #f0f1ef;
    --group-card-icon-border: #d0d4d0;
    --group-card-shadow: 0 3px 12px rgba(24,28,25,.045);
    --group-card-shadow-hover: 0 6px 18px rgba(24,28,25,.08);
}

@media (prefers-color-scheme: dark) {
    :root {
        --app-canvas: #0e0f0e;
        --app-canvas-background: #0e0f0e;
        --app-ui-bg: #101210;
        --app-workspace-bg: var(--app-ui-bg);
        --app-surface: #161816;
        --app-surface-soft: #141614;
        --app-surface-soft-alt: #121412;
        --app-surface-muted: #191b19;
        --app-surface-hover: #1d201d;
        --app-surface-info: #171917;

        --app-text: #eceeec;
        --app-text-strong: #f4f5f4;
        --app-text-heading: #f3f4f3;
        --app-text-secondary: #b4b9b5;
        --app-text-muted: #8d938e;
        --app-text-muted-alt: #9da29e;
        --app-text-subtle: #737874;

        --app-border: #2a2e2b;
        --app-border-ui: #2a2e2b;
        --app-border-soft: #232623;
        --app-border-softer: #1e211e;
        --app-border-strong: #454a46;
        --app-control-border: #343834;
        --app-input-border: #353a36;

        --surface-canvas: var(--app-canvas);
        --surface-1: #161816;
        --surface-2: #1b1d1b;
        --surface-3: #232623;
        --surface-hover: #202320;
        --surface-border: #303431;
        --surface-border-strong: #555b56;
        --surface-text: #eceeec;
        --surface-muted: #929893;

        --sidebar-bg: #111311;
        --sidebar-border: #292c29;
        --sidebar-brand-divider: #303430;
        --sidebar-product-text: #969b97;
        --sidebar-brand-muted: #777d78;
        --sidebar-nav-text: #afb4b0;
        --sidebar-nav-hover-bg: #1c1f1c;
        --sidebar-nav-hover-text: #f0f2f0;
        --sidebar-foot-bg: #151715;
        --sidebar-foot-text: #8c928d;

        --topbar-bg: rgba(16,18,16,.97);
        --topbar-border: #2a2e2b;
        --topbar-title: #f0f2f0;
        --topbar-eyebrow: #7e847f;
        --topbar-control-bg: #171917;
        --topbar-control-border: #343834;
        --topbar-control-text: #b3b8b4;
        --topbar-input-bg: #151715;
        --topbar-input-border: #343834;
        --topbar-input-text: #eeeeec;
        --topbar-input-placeholder: #777d78;

        --device-card-header: #1a1d1a;
        --device-card-header-2: #1d201d;
        --device-card-header-text: #f0f2f0;
        --device-card-header-muted: #9da39e;
        --device-card-body: #121412;
        --device-card-panel: #171917;
        --device-card-panel-border: #2b2f2c;
        --device-card-text: #eceeec;
        --device-card-muted: #909691;
        --device-card-footer: #101210;
        --device-card-footer-border: #292d2a;
        --device-card-action: #a7aca8;
        --device-card-action-hover: rgba(255,255,255,.055);
        --device-card-border: #505651;
        --device-card-border-hover: #777f79;
        --device-card-icon-bg: #242724;
        --device-card-icon-border: #383c39;
        --device-card-shadow: 0 6px 20px rgba(0,0,0,.26);
        --device-card-shadow-hover: 0 9px 26px rgba(0,0,0,.36);
        /* Canonical dark counterparts of the card transient-state tokens.
           These must live here, next to the final dark card palette. */
        --device-card-inset-highlight: rgba(255,255,255,.025);
        --device-card-empty-bg: transparent;

        --detail-topbar-bg: #181b18;
        --detail-topbar-border: #303430;
        --detail-topbar-text: #eff1ef;
        --detail-topbar-muted: #a1a6a2;
        --detail-control-bg: rgba(255,255,255,.035);
        --detail-control-bg-hover: rgba(255,255,255,.07);
        --detail-control-border: #3b403c;
        --detail-status-bg: rgba(255,255,255,.025);
        --detail-status-border: #343835;
        --detail-device-state-text: var(--detail-topbar-text);

        --group-card-bg: #171917;
        --group-card-border: #505651;
        --group-card-border-hover: #777f79;
        --group-card-icon-bg: #222522;
        --group-card-icon-border: #3a3f3b;
        --group-card-shadow: 0 4px 16px rgba(0,0,0,.22);
        --group-card-shadow-hover: 0 7px 22px rgba(0,0,0,.32);
    }
}