/* e.emach.pl host-brand UI base
 * v9.8.339: the user no longer selects an application theme.
 * This neutral operational layer is always loaded; the active hostname brand
 * may then tune identity and selected UI tokens through /brands/<id>/brand.css.
 * Semantic warning/alarm/error colours stay independent from branding.
 */

:root {
    /* UI accent becomes deliberately neutral. Brand identity remains available
       through the brand palette and through the actual EMACH logo. */
    --brand-primary: #5f6368;
    --brand-primary-hover: #4f5357;
    --brand-primary-pressed: #3f4347;
    --brand-primary-soft: #eceeef;
    --brand-primary-soft-alt: #e7e9ea;
    --brand-primary-legacy: #5f6368;
    --brand-primary-highlight: #7a7f84;
    --brand-primary-light: #9a9ea2;
    --brand-focus: #686d72;
    --brand-focus-ring: rgba(95,99,104,.18);
    --brand-focus-ring-soft: rgba(95,99,104,.11);
    --brand-shadow: rgba(52,55,58,.16);
    --brand-shadow-soft: rgba(52,55,58,.10);

    /* Brand-owned icon typography. Spacing values are unitless canonical
       24x24-grid units. Runtime overlay CSS maps clearance to px for the
       canonical 24px glyph; static SVG design uses the same numeric rhythm. */
    --brand-icon-stroke: 2;
    --brand-icon-stroke-secondary: 1.3;
    --brand-device-icon-stroke: 2;
    --brand-device-icon-stroke-secondary: 1.9;
    --brand-device-icon-stroke-strong: 2.3;
    --brand-icon-gap: 2;
    --brand-icon-clearance: 1.25;
    --control-selected-bg: #e9eaeb;
    --control-selected-text: #34373a;

    /* Pure neutral LIGHT surfaces. */
    --app-canvas: #f3f3f3;
    --app-canvas-background: #f3f3f3;
    --app-ui-bg: #f3f3f3;
    --app-workspace-bg: #f3f3f3;
    --app-surface: #ffffff;
    --app-surface-soft: #f8f8f8;
    --app-surface-soft-alt: #f5f5f5;
    --app-surface-muted: #efefef;
    --app-surface-hover: #ebebeb;
    --app-surface-info: #f5f5f5;

    --app-text: #222222;
    --app-text-strong: #171717;
    --app-text-heading: #171717;
    --app-text-secondary: #525252;
    --app-text-muted: #747474;
    --app-text-muted-alt: #666666;
    --app-text-subtle: #8c8c8c;

    --app-border: #d7d7d7;
    --app-border-ui: #d7d7d7;
    --app-border-soft: #e5e5e5;
    --app-border-softer: #ededed;
    --app-border-strong: #b8b8b8;
    --app-control-border: #cfcfcf;
    --app-input-border: #cfcfcf;

    --surface-canvas: var(--app-canvas);
    --surface-1: #ffffff;
    --surface-2: #f6f6f6;
    --surface-3: #ececec;
    --surface-hover: #efefef;
    --surface-border: #d5d5d5;
    --surface-border-strong: #adadad;
    --surface-text: #222222;
    --surface-muted: #747474;

    /* Icon language stays neutral. Positive/alarm semantics keep their own
       state colours instead of inheriting the UI accent. */
    --icon-neutral: #666666;
    --icon-muted: #838383;
    --icon-strong: #3f3f3f;
    --icon-surface: #efefef;
    --icon-border: #d3d3d3;
    --icon-raised-fill: #ffffff;
    --device-icon-raised-fill: #ffffff;
    --icon-recessed-fill: #f1f1f1;
    --icon-active: #5f6368;
    --icon-success: var(--state-success);
    --icon-info: #6d7276;

    /* Shell / navigation. */
    --sidebar-bg: #f8f8f8;
    --sidebar-border: #e2e2e2;
    --sidebar-brand-divider: #e1e1e1;
    --sidebar-product-text: #707070;
    --sidebar-brand-muted: #858585;
    --sidebar-nav-text: #575757;
    --sidebar-nav-hover-bg: #eeeeee;
    --sidebar-nav-hover-text: #202020;
    --sidebar-foot-bg: #fafafa;
    --sidebar-foot-text: #747474;

    --topbar-bg: rgba(248,248,248,.98);
    --topbar-border: #e2e2e2;
    --topbar-title: #1b1b1b;
    --topbar-eyebrow: #7c7c7c;
    --topbar-control-bg: #f7f7f7;
    --topbar-control-border: #d1d1d1;
    --topbar-control-text: #525252;
    --topbar-input-bg: #f6f6f6;
    --topbar-input-border: #cfcfcf;
    --topbar-mobile-search-input-bg: #ffffff;
    --topbar-mobile-search-input-focus-bg: #ffffff;
    --topbar-input-text: #222222;
    --topbar-input-placeholder: #848484;
    --topbar-search-icon: #747474;
    --topbar-input-focus-bg: #ffffff;
    --topbar-input-focus-border: #74787c;
    --topbar-input-focus-ring: rgba(95,99,104,.16);
    --topbar-search-clear: #747474;
    --topbar-search-clear-hover-bg: #ececec;
    --topbar-search-clear-hover-text: #333333;
    --topbar-search-toggle-bg: #f7f7f7;
    --topbar-search-toggle-border: #d1d1d1;
    --topbar-search-toggle-text: #5a5a5a;
    --topbar-search-toggle-query-ring: #f7f7f7;
    --topbar-search-shadow: 0 4px 14px rgba(0,0,0,.07);

    --view-switch-bg: #ececec;
    --view-switch-border: #d1d1d1;
    --view-switch-text: #6d6d6d;
    --view-switch-active-bg: #fafafa;
    --view-switch-active-text: #343434;
    --view-switch-shadow: inset 0 0 0 1px rgba(255,255,255,.46);
    --view-switch-active-shadow: 0 1px 5px rgba(0,0,0,.08);

    --account-hover-bg: #f1f1f1;
    --account-hover-border: #e0e0e0;
    --account-avatar-bg: #eeeeee;
    --account-name: #262626;
    --account-meta: #767676;
    --account-chevron: #7b7b7b;
    --account-popover-heading: #858585;
    --sidebar-account-bg: #fafafa;
    --sidebar-account-border: #e1e1e1;
    --sidebar-account-hover-bg: #f1f1f1;
    --sidebar-account-hover-border: #d8d8d8;

    /* Device cards and groups. */
    --device-card-header: #f4f4f4;
    --device-card-header-2: #f1f1f1;
    --device-card-header-text: #222222;
    --device-card-header-muted: #707070;
    --device-card-body: #ffffff;
    --device-card-panel: #ffffff;
    --device-card-panel-border: #d8d8d8;
    --device-card-text: #222222;
    --device-card-muted: #747474;
    --device-card-footer: #f1f1f1;
    --device-card-footer-border: #d4d4d4;
    --device-card-action: #6b6b6b;
    --device-card-action-hover: rgba(0,0,0,.055);
    --device-card-border: #d0d0d0;
    --device-card-border-hover: #b2b2b2;
    --device-card-icon-bg: #e5e5e5;
    --device-card-icon-border: #cecece;
    --device-card-shadow: 0 1px 2px rgba(0,0,0,.025), 0 5px 14px rgba(0,0,0,.035);
    --device-card-shadow-hover: 0 2px 4px rgba(0,0,0,.035), 0 8px 20px rgba(0,0,0,.055);
    --device-card-inset-highlight: rgba(255,255,255,.58);

    --group-card-bg: #ffffff;
    --group-card-border: #d0d0d0;
    --group-card-border-hover: #b2b2b2;
    --group-card-icon-bg: #f0f0f0;
    --group-card-icon-border: #d0d0d0;
    --group-card-shadow: 0 1px 2px rgba(0,0,0,.025), 0 5px 14px rgba(0,0,0,.035);
    --group-card-shadow-hover: 0 2px 4px rgba(0,0,0,.035), 0 8px 20px rgba(0,0,0,.055);

    /* Detail surfaces remain a separate hierarchy, still grayscale. */
    --detail-topbar-bg: #eeeeee;
    --detail-topbar-border: #d0d0d0;
    --detail-topbar-text: #222222;
    --detail-topbar-muted: #6d6d6d;
    --detail-control-bg: rgba(0,0,0,.035);
    --detail-control-bg-hover: rgba(0,0,0,.075);
    --detail-control-border: #cbcbcb;
    --detail-status-bg: rgba(0,0,0,.025);
    --detail-status-border: #d0d0d0;
    --detail-device-state-text: var(--detail-topbar-text);
    --detail-surface: #ffffff;
    --detail-surface-soft: #f6f6f6;
    --detail-surface-panel: #ffffff;
    --detail-surface-alt: #f1f1f1;
    --detail-surface-hover: #ececec;
    --detail-border: #d8d8d8;
    --detail-border-soft: #e5e5e5;
    --detail-border-strong: #c5c5c5;
    --detail-text: #222222;
    --detail-text-strong: #181818;
    --detail-muted: #747474;
    --detail-muted-strong: #565656;
    --detail-kicker: #5f6368;
    --detail-head-bg: linear-gradient(180deg, #fafafa 0%, #f5f5f5 100%);
    --detail-meta-bg: #f2f2f2;
    --detail-meta-border: #dedede;
    --detail-tree-line: #dddddd;
    --detail-placeholder-bg: #f7f7f7;
    --detail-placeholder-border: #d0d0d0;
    --detail-placeholder-text: #777777;
    --detail-shadow: 0 8px 28px rgba(0,0,0,.055);
    --detail-shadow-compact: 0 4px 18px rgba(0,0,0,.04);

    /* Administration is neutral too; permissions/status colours remain semantic. */
    --admin-surface: #ffffff;
    --admin-surface-soft: #f6f6f6;
    --admin-surface-hover: #eeeeee;
    --admin-border: #d7d7d7;
    --admin-border-soft: #e7e7e7;
    --admin-border-strong: #bababa;
    --admin-text: #252525;
    --admin-text-strong: #1b1b1b;
    --admin-text-secondary: #565656;
    --admin-muted: #808080;
    --admin-branch: #c8c8c8;
    --admin-avatar-bg: #e9e9e9;
    --admin-avatar-text: #555555;
    --admin-badge-bg: #f0f0f0;
    --admin-badge-text: #686868;
    --admin-role-bg: #e9e9e9;
    --admin-role-text: #555555;
    --admin-input-bg: #fafafa;
    --admin-input-border: #dddddd;
    --admin-input-text: #252525;
    --admin-input-placeholder: #858585;
    --admin-toggle-bg: #f4f4f4;
    --admin-toggle-hover-bg: #ececec;
    --admin-toggle-border: #d9d9d9;
    --admin-toggle-text: #595959;
    --admin-shadow-hover: 0 4px 14px rgba(0,0,0,.065);

    /* Parameter type is not expressed through decorative colour in this palette. */
    --parameter-icon-neutral: var(--icon-neutral);
    --parameter-icon-neutral-soft: transparent;
    --parameter-icon-temperature: var(--icon-neutral);
    --parameter-icon-temperature-soft: transparent;
    --parameter-icon-temperature-set: var(--icon-neutral);
    --parameter-icon-temperature-set-soft: transparent;
    --parameter-icon-voltage: var(--icon-neutral);
    --parameter-icon-voltage-soft: transparent;
    --parameter-icon-current: var(--icon-neutral);
    --parameter-icon-current-soft: transparent;
    --parameter-icon-time: var(--icon-neutral);
    --parameter-icon-time-soft: transparent;
    --parameter-icon-time-charging: var(--icon-neutral);
    --parameter-icon-time-charging-soft: transparent;
    --parameter-icon-time-charging-border: var(--icon-border);
    --parameter-icon-time-cooling: var(--icon-neutral);
    --parameter-icon-time-cooling-soft: transparent;
    --parameter-icon-time-cooling-border: var(--icon-border);
    --parameter-icon-data: var(--icon-neutral);
    --parameter-icon-data-soft: transparent;
    --parameter-icon-technical: var(--icon-muted);
    --parameter-icon-technical-soft: transparent;
    --parameter-panel-frame: #dfdfdf;

    /* Neutral framework accents; semantic state colours above are untouched. */
    --bootstrap-spinner-head: #666a6e;
    --ui-primary: #5f6368;
    --ui-primary-soft: #e7e9ea;
    --dash-blue: #5f6368;
    --dash-blue-dark: #4f5357;
    --dash-blue-soft: #eceeef;
}

@media (prefers-color-scheme: dark) {
    :root {
        --brand-primary: #a0a4a8;
        --brand-primary-hover: #b5b8bb;
        --brand-primary-pressed: #85898d;
        --brand-primary-soft: #242526;
        --brand-primary-soft-alt: #202122;
        --brand-primary-legacy: #a0a4a8;
        --brand-primary-highlight: #c2c5c8;
        --brand-primary-light: #d1d3d5;
        --brand-focus: #aaadb0;
        --brand-focus-ring: rgba(170,173,176,.18);
        --brand-focus-ring-soft: rgba(170,173,176,.10);
        --brand-shadow: rgba(0,0,0,.24);
        --brand-shadow-soft: rgba(0,0,0,.16);
        --control-selected-bg: #242526;
        --control-selected-text: #e1e2e3;

        --app-canvas: #0f0f0f;
        --app-canvas-background: #0f0f0f;
        --app-ui-bg: #111111;
        --app-workspace-bg: #0f0f0f;
        --app-surface: #171717;
        --app-surface-soft: #141414;
        --app-surface-soft-alt: #121212;
        --app-surface-muted: #1a1a1a;
        --app-surface-hover: #1f1f1f;
        --app-surface-info: #181818;

        --app-text: #eeeeee;
        --app-text-strong: #f5f5f5;
        --app-text-heading: #f4f4f4;
        --app-text-secondary: #b7b7b7;
        --app-text-muted: #929292;
        --app-text-muted-alt: #a0a0a0;
        --app-text-subtle: #777777;

        --app-border: #2b2b2b;
        --app-border-ui: #2b2b2b;
        --app-border-soft: #242424;
        --app-border-softer: #202020;
        --app-border-strong: #474747;
        --app-control-border: #363636;
        --app-input-border: #373737;

        --surface-canvas: var(--app-canvas);
        --surface-1: #171717;
        --surface-2: #1b1b1b;
        --surface-3: #242424;
        --surface-hover: #212121;
        --surface-border: #323232;
        --surface-border-strong: #595959;
        --surface-text: #eeeeee;
        --surface-muted: #969696;

        --icon-neutral: #a0a0a0;
        --icon-muted: #7e7e7e;
        --icon-strong: #c4c4c4;
        --icon-surface: #1b1b1b;
        --icon-border: #393939;
        --icon-raised-fill: #222222;
        --device-icon-raised-fill: #2a2a2a;
        --ui-icon-raised-fill: #2d2d2d;
        --ui-icon-recessed-fill: #202020;
        --b45-cabinet-fill: #353535;
        --b45-lightning-fill: currentColor;
        --icon-recessed-fill: #151515;
        --icon-active: #a0a4a8;
        --icon-success: var(--state-success);
        --icon-info: #9a9a9a;

        --sidebar-bg: #111111;
        --sidebar-border: #292929;
        --sidebar-brand-divider: #303030;
        --sidebar-product-text: #989898;
        --sidebar-brand-muted: #7a7a7a;
        --sidebar-nav-text: #b1b1b1;
        --sidebar-nav-hover-bg: #1d1d1d;
        --sidebar-nav-hover-text: #f1f1f1;
        --sidebar-foot-bg: #151515;
        --sidebar-foot-text: #8f8f8f;

        --topbar-bg: rgba(17,17,17,.97);
        --topbar-border: #2b2b2b;
        --topbar-title: #f1f1f1;
        --topbar-eyebrow: #818181;
        --topbar-control-bg: #181818;
        --topbar-control-border: #363636;
        --topbar-control-text: #b6b6b6;
        --topbar-input-bg: #161616;
        --topbar-input-border: #363636;
        --topbar-mobile-search-input-bg: #282828;
        --topbar-mobile-search-input-focus-bg: #303030;
        --topbar-input-text: #efefef;
        --topbar-input-placeholder: #7b7b7b;
        --topbar-search-icon: #858585;
        --topbar-input-focus-bg: #1a1a1a;
        --topbar-input-focus-border: #9da1a5;
        --topbar-input-focus-ring: rgba(160,164,168,.15);
        --topbar-search-clear: #868686;
        --topbar-search-clear-hover-bg: #222222;
        --topbar-search-clear-hover-text: #dddddd;
        --topbar-search-toggle-bg: #181818;
        --topbar-search-toggle-border: #393939;
        --topbar-search-toggle-text: #b4b4b4;
        --topbar-search-toggle-query-ring: #181818;
        --topbar-search-shadow: 0 4px 16px rgba(0,0,0,.30);

        --view-switch-bg: #171717;
        --view-switch-border: #353535;
        --view-switch-text: #909090;
        --view-switch-active-bg: #242424;
        --view-switch-active-text: #dddddd;
        --view-switch-shadow: inset 0 0 0 1px rgba(255,255,255,.02);
        --view-switch-active-shadow: 0 1px 5px rgba(0,0,0,.30);

        --account-hover-bg: #1a1a1a;
        --account-hover-border: #333333;
        --account-avatar-bg: #242424;
        --account-name: #e8e8e8;
        --account-meta: #898989;
        --account-chevron: #898989;
        --account-popover-heading: #8d8d8d;
        --sidebar-account-bg: #171717;
        --sidebar-account-border: #303030;
        --sidebar-account-hover-bg: #1e1e1e;
        --sidebar-account-hover-border: #464646;

        --device-card-header: #232323;
        --device-card-header-2: #242424;
        --device-card-header-text: #f1f1f1;
        --device-card-header-muted: #a1a1a1;
        --device-card-body: #1b1b1b;
        --device-card-panel: #1d1d1d;
        --device-card-panel-border: #303030;
        --device-card-text: #eeeeee;
        --device-card-muted: #959595;
        --device-card-footer: #151515;
        --device-card-footer-border: #2d2d2d;
        --device-card-action: #aaaaaa;
        --device-card-action-hover: rgba(255,255,255,.055);
        --device-card-border: #343434;
        --device-card-border-hover: #4b4b4b;
        --device-card-icon-bg: #252525;
        --device-card-icon-border: #3a3a3a;
        --device-card-shadow: 0 2px 4px rgba(0,0,0,.20), 0 8px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.018);
        --device-card-shadow-hover: 0 3px 6px rgba(0,0,0,.24), 0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.025);

        --group-card-bg: #1b1b1b;
        --group-card-border: #343434;
        --group-card-border-hover: #4b4b4b;
        --group-card-icon-bg: #232323;
        --group-card-icon-border: #3b3b3b;
        --group-card-shadow: 0 2px 4px rgba(0,0,0,.20), 0 8px 20px rgba(0,0,0,.18), inset 0 1px 0 rgba(255,255,255,.018);
        --group-card-shadow-hover: 0 3px 6px rgba(0,0,0,.24), 0 10px 24px rgba(0,0,0,.22), inset 0 1px 0 rgba(255,255,255,.025);

        --detail-topbar-bg: #191919;
        --detail-topbar-border: #313131;
        --detail-topbar-text: #f0f0f0;
        --detail-topbar-muted: #a5a5a5;
        --detail-control-bg: rgba(255,255,255,.035);
        --detail-control-bg-hover: rgba(255,255,255,.07);
        --detail-control-border: #3d3d3d;
        --detail-status-bg: rgba(255,255,255,.025);
        --detail-status-border: #363636;
        --detail-device-state-text: var(--detail-topbar-text);
        --detail-surface: #171717;
        --detail-surface-soft: #141414;
        --detail-surface-panel: #1a1a1a;
        --detail-surface-alt: #1d1d1d;
        --detail-surface-hover: #222222;
        --detail-border: #323232;
        --detail-border-soft: #292929;
        --detail-border-strong: #4b4b4b;
        --detail-text: #eeeeee;
        --detail-text-strong: #f5f5f5;
        --detail-muted: #969696;
        --detail-muted-strong: #b8b8b8;
        --detail-kicker: #a0a4a8;
        --detail-head-bg: linear-gradient(180deg, #1c1c1c 0%, #181818 100%);
        --detail-meta-bg: #191919;
        --detail-meta-border: #343434;
        --detail-tree-line: #343434;
        --detail-placeholder-bg: #141414;
        --detail-placeholder-border: #3d3d3d;
        --detail-placeholder-text: #989898;
        --detail-shadow: 0 7px 24px rgba(0,0,0,.31);
        --detail-shadow-compact: 0 5px 20px rgba(0,0,0,.25);

        --admin-surface: #171717;
        --admin-surface-soft: #1b1b1b;
        --admin-surface-hover: #222222;
        --admin-border: #323232;
        --admin-border-soft: #292929;
        --admin-border-strong: #4b4b4b;
        --admin-text: #eeeeee;
        --admin-text-strong: #f5f5f5;
        --admin-text-secondary: #b7b7b7;
        --admin-muted: #929292;
        --admin-branch: #444444;
        --admin-avatar-bg: #252525;
        --admin-avatar-text: #c5c5c5;
        --admin-badge-bg: #1d1d1d;
        --admin-badge-text: #a5a5a5;
        --admin-role-bg: #252525;
        --admin-role-text: #c5c5c5;
        --admin-input-bg: #141414;
        --admin-input-border: #353535;
        --admin-input-text: #eeeeee;
        --admin-input-placeholder: #7d7d7d;
        --admin-toggle-bg: #1c1c1c;
        --admin-toggle-hover-bg: #222222;
        --admin-toggle-border: #383838;
        --admin-toggle-text: #b6b6b6;
        --admin-shadow-hover: 0 4px 14px rgba(0,0,0,.24);

        --parameter-icon-neutral: var(--icon-neutral);
        --parameter-icon-neutral-soft: transparent;
        --parameter-icon-temperature: var(--icon-neutral);
        --parameter-icon-temperature-soft: transparent;
        --parameter-icon-temperature-set: var(--icon-neutral);
        --parameter-icon-temperature-set-soft: transparent;
        --parameter-icon-voltage: var(--icon-neutral);
        --parameter-icon-voltage-soft: transparent;
        --parameter-icon-current: var(--icon-neutral);
        --parameter-icon-current-soft: transparent;
        --parameter-icon-time: var(--icon-neutral);
        --parameter-icon-time-soft: transparent;
        --parameter-icon-time-charging: var(--icon-neutral);
        --parameter-icon-time-charging-soft: transparent;
        --parameter-icon-time-charging-border: var(--icon-border);
        --parameter-icon-time-cooling: var(--icon-neutral);
        --parameter-icon-time-cooling-soft: transparent;
        --parameter-icon-time-cooling-border: var(--icon-border);
        --parameter-icon-data: var(--icon-neutral);
        --parameter-icon-data-soft: transparent;
        --parameter-icon-technical: var(--icon-muted);
        --parameter-icon-technical-soft: transparent;
        --parameter-panel-frame: #2b2b2b;

        --bootstrap-spinner-head: #a0a4a8;
        --ui-primary: #a0a4a8;
        --ui-primary-soft: #202122;
        --dash-blue: #a0a4a8;
        --dash-blue-dark: #b5b8bb;
        --dash-blue-soft: #242526;
    }
}