/* =============================================================================
 * themes.v2.css — modernized token system for TwinWorX
 *
 * STRUCTURE (3 layers):
 *   1. :root        — tenant brand + fixed semantic/domain colors + fonts.
 *                     Theme-independent. --brand/--brand-2 are the ONLY
 *                     per-customer values; inject them from tenant config.
 *   2. .light-theme / .dark-theme
 *                   — the working palette for each theme, including
 *                     brand derivations (color-mix) tuned per theme.
 *   3. LEGACY ALIASES (inside each theme class)
 *                   — every original --theme-* name, pointed at the new
 *                     tokens. Existing cshtml components keep working
 *                     unchanged; migrate them to the new names over time.
 *
 * BRAND CONFIGURATION (no code changes needed):
 *   The two values at the top of :root below — --brand and --brand-2 —
 *   are the ONLY per-customer colors in the whole system. To rebrand a
 *   deployment, edit those two hex values; every active state, hover
 *   state, header, and chart accent derives from them automatically.
 *
 *   Per-customer without touching this file (recommended once you have
 *   multiple tenants): create a tiny tenant.css loaded AFTER this one,
 *   containing only:
 *       :root { --brand: #0E7A4F; --brand-2: #E8A33D; }
 *   Later, if tenant properties are added to your models, the same two
 *   lines can be emitted from _Layout.cshtml instead — nothing else changes.
 *
 * BROWSER SUPPORT: color-mix() needs Chrome/Edge 111+, Safari 16.2+, FF 113.
 * For older embedded panels, precompute the -ui/-soft values server-side
 * from the tenant hex and inject them the same way.
 * ============================================================================= */

/* =============================================================================
 * LAYER 1 — PRIMITIVES (theme-independent)
 * ============================================================================= */
:root {
    /* =========================================================================
     * EDIT THESE TWO VALUES TO REBRAND A DEPLOYMENT.
     * Everything brand-related in the portal derives from them.
     * ========================================================================= */
    --brand: red; /* primary  -> active / selected states  */
    --brand-2: yellow; /* secondary -> hover states             */
    /* ---- semantic status colors: FIXED, never rebranded ---- */
    --status-ok: #55BF3B; /* was chart-dial-stop1 / arrow-down     */
    --status-alarm: #DF5353; /* was chart-dial-stop2 / arrow-up       */
    --status-warning: #E8A33D;
    --status-info: #4BB3FD;
    /* ---- chart series palette: FIXED domain colors, never rebranded ---- */
    --series-1: #0496FF; /* primary metric (e.g. electricity)     */
    --series-2: #9D8CFF; /* comparison / forecast / baseline      */
    --series-3: #2DD4BF; /* secondary domain (e.g. water)         */
    --series-4: #55BF3B; /* savings / positive                    */
    --series-5: #E8A33D; /* tertiary                              */
    --series-6: #4BB3FD;
    /* ---- typography ---- */
    --font-body: 'Inter', 'Segoe UI', Arial, Helvetica, sans-serif;
    --font-display: 'Space Grotesk', 'Segoe UI', Arial, sans-serif; /* large numbers / headings */
    --font-mono: 'JetBrains Mono', Consolas, monospace; /* point tags, telemetry    */
    /* ---- shape ---- */
    --radius-card: 12px;
    --radius-control: 8px;
}

/* =============================================================================
 * LAYER 2 + 3 — LIGHT THEME
 * ============================================================================= */
.light-theme {
    color-scheme: light;
    /* ---------- core palette ---------- */
    --surface-page: #EEF2F8;
    --surface-card: #FFFFFF;
    --surface-raised: #F7F9FC; /* table headers, panel strips      */
    --surface-sunken: #E4E9F1; /* wells, inactive areas            */
    --text-primary: #13213B;
    --text-secondary: #566782;
    --text-faint: #8694AC;
    --border-default: rgba(20, 40, 75, .10);
    --border-strong: rgba(20, 40, 75, .22);
    --shadow-card: 0 1px 3px rgba(16,32,60,.06), 0 4px 14px rgba(16,32,60,.05);
    /* ---------- brand derivations (per-theme contrast tuning) ---------- */
    --brand-ui: color-mix(in oklab, var(--brand) 88%, #13213B); /* deepened for white   */
    --brand-soft: color-mix(in srgb, var(--brand) 11%, transparent);
    --brand2-ui: color-mix(in oklab, var(--brand-2) 80%, #13213B);
    --brand2-soft: color-mix(in srgb, var(--brand-2) 9%, transparent);
    /* ---------- interactive states (derived, use everywhere) ---------- */
    --state-active-bg: var(--brand-soft);
    --state-active-fg: var(--brand-ui);
    --state-hover-bg: var(--brand2-soft);
    --state-hover-fg: var(--brand2-ui);
    /* ---------- chart chrome ---------- */
    --chart-bg: transparent;
    --chart-grid: rgba(20, 40, 75, .08);
    --chart-axis-label: #8694AC;
    --chart-gauge-track: rgba(20, 40, 75, .09);
    --chart-tooltip-bg: #FFFFFF;
    --chart-nodata-text: #B9C2D2;
    --chart-gradient-top: color-mix(in srgb, var(--series-1) 28%, transparent);
    --chart-gradient-bottom: color-mix(in srgb, var(--series-1) 0%, transparent);
    /* =========================================================================
     * LEGACY ALIASES — original names, new values. DO NOT add new usages;
     * migrate component CSS to the tokens above over time.
     * ========================================================================= */
    --theme-logo-color: #f1f1f1;
    --theme-default-font-family: var(--font-body);
    --theme-bg-color: var(--surface-page);
    --theme-text-color: var(--text-primary);
    --theme-scrollbar: var(--surface-page);
    --theme-scrollbar-thumb: #B9C2D2;
    --theme-scrollbar-hover: var(--brand2-ui); /* was dark navy on light — bug */
    --theme-header-color: var(--brand-ui); /* header carries the brand     */
    --theme-border-color: var(--border-default); /* was #000000 — far too harsh  */
    --theme-left-menu-color: var(--surface-card);
    --theme-left-menu-active: var(--state-active-bg);
    --theme-right-panel-color: var(--surface-card);
    --theme-footer-bg-color: var(--surface-card);
    --theme-title-bg-color: var(--surface-raised); /* was #b2b09c (khaki) — off-palette */
    --theme-sidebar-color: var(--surface-raised);
    --theme-main-content-menu-color: var(--surface-sunken);
    --theme-main-content-menu-hover: var(--state-hover-bg);
    --theme-table-bg-color: var(--surface-card);
    --theme-table-border-color: var(--border-default);
    --theme-table-row-header: var(--surface-raised);
    --theme-table-column-header: var(--surface-raised);
    --theme-table-active-column: var(--state-active-bg);
    --theme-alternate-row-color: #F4F7FB; /* was MISSING in light theme   */
    --theme-elevator-table-text: var(--text-primary); /* was #fff on light — illegible */
    --theme-elevator-grid-active-column: var(--state-active-bg);
    --theme-elevator-grid-active-cell: var(--state-active-fg);
    --theme-elevator-grid-other-cell: var(--surface-sunken);
    --theme-icon-bg-color: var(--text-primary);
    --theme-asset-model-bgcolor: var(--surface-sunken); /* was MISSING in light theme   */
    --theme-pds-table-info-text: var(--text-primary);
    /* chart legacy names -> new chart tokens */
    --theme-chart-bg-color: var(--surface-card);
    --theme-chart-semi-transparent-tooltip: rgba(255,255,255,.85); /* was MISSING in light */
    --theme-chart-stop1-color: var(--series-1);
    --theme-chart-stop2-color: var(--series-6);
    --theme-chart-stop3-color: var(--series-2);
    --theme-chart-stop4-color: var(--series-3);
    --theme-chart-dial-stop1-color: var(--status-ok);
    --theme-chart-dial-stop2-color: var(--status-alarm);
    --theme-chart-arrow-down-color: var(--status-ok);
    --theme-chart-arrow-up-color: var(--status-alarm);
    --theme-chart-dial-needle-color: var(--text-primary);
    --theme-chart-XYaxis-label-color: var(--chart-axis-label);
    --theme-chart-compared-text-color: var(--text-secondary);
    --theme-chart-text-color: var(--text-primary);
    --theme-chart-legend-text-color: var(--text-secondary);
    --theme-chart-legend-hover-color: var(--state-hover-fg);
    --theme-chart-nodata-text-color: var(--chart-nodata-text);
    --theme-chart-header-menu-color: var(--surface-raised);
    --theme-chart-header-menu-text-color: var(--text-primary);
    /* icon URLs — unchanged for now; see mask-based replacement note below */
    --theme-file-menu: url("/uploads/images/LT - ICON - FILE MGMT(VertNav_ICONS (20px)).svg") no-repeat;
    --theme-home-menu: url("/uploads/images/LT - ICON - HOME(VertNav_ICONS (20px)).svg") no-repeat;
    --theme-dashboards-menu: var(--theme-home-menu); /* was missing in v2 port; reuses the home icon like legacy themes.css */
    --theme-building-menu: url("/uploads/images/LT - ICON - BLDG SYS(VertNav_ICONS (20px)).svg") no-repeat;
    --theme-aseets-menu: url("/uploads/images/LT - ICON - ASSETS(VertNav_ICONS (20px)).svg") no-repeat;
    --theme-spaces-menu: url("/uploads/images/LT - ICON - SPACES(VertNav_ICONS (20px)).svg") no-repeat;
    --theme-trending-menu: url("/uploads/images/LT - ICON - TRENDING(VertNav_ICONS (20px)).svg") no-repeat;
    --theme-energy-menu: url("/uploads/images/LT - ICON - E-MGMT(VertNav_ICONS (20px)).svg") no-repeat;
    --theme-alarming-menu: url("/uploads/images/LT - ICON - ALARMING(VertNav_ICONS (20px)).svg") no-repeat;
    --theme-scheduling-menu: url("/uploads/images/LT - ICON - SCHEDULING(VertNav_ICONS (20px)).svg") no-repeat;
    --theme-reports-menu: url("/uploads/images/LT - ICON - REPORTS(VertNav_ICONS (20px)).svg") no-repeat;
    --theme-customreports-menu: url("/uploads/images/LT - ICON - WORK ORDERS(VertNav_ICONS (20px)).svg") no-repeat;
    --theme-reportrepository-menu: url("/uploads/images/LT - ICON - WORK ORDERS(VertNav_ICONS (20px)).svg") no-repeat;
    --theme-docrepo-menu: url("/uploads/images/LT - ICON - DOCREPO(VertNav_ICONS (20px)).svg") no-repeat;
    --theme-occupants-menu: url("/uploads/images/LT - ICON - E-MGMT(VertNav_ICONS (20px)).svg") no-repeat;
    --theme-nms-switch: url("/images/lt-network-switch.svg") no-repeat;
    --theme-portfolio-menu: url("/images/globe.svg") no-repeat;
    --theme-login-background: url("/images/login-background.jpg") no-repeat;
}

/* =============================================================================
 * LAYER 2 + 3 — DARK THEME
 * ============================================================================= */
.dark-theme {
    color-scheme: dark;
    /* ---------- core palette ---------- */
    --surface-page: #0B1220;
    --surface-card: #101A2D;
    --surface-raised: #152138;
    --surface-sunken: #0D1626;
    --text-primary: #E7EEF8;
    --text-secondary: #8B98AD;
    --text-faint: #5B6880;
    --border-default: rgba(148, 163, 184, .12);
    --border-strong: rgba(148, 163, 184, .22);
    --shadow-card: none;
    /* ---------- brand derivations ---------- */
    --brand-ui: color-mix(in oklab, var(--brand) 78%, white); /* lifted for dark */
    --brand-soft: color-mix(in srgb, var(--brand-ui) 15%, transparent);
    --brand2-ui: color-mix(in oklab, var(--brand-2) 80%, white);
    --brand2-soft: color-mix(in srgb, var(--brand2-ui) 10%, transparent);
    /* ---------- interactive states ---------- */
    --state-active-bg: var(--brand-soft);
    --state-active-fg: var(--brand-ui);
    --state-hover-bg: var(--brand2-soft);
    --state-hover-fg: var(--brand2-ui);
    /* ---------- chart chrome ---------- */
    --chart-bg: transparent;
    --chart-grid: rgba(148, 163, 184, .10);
    --chart-axis-label: #5B6880;
    --chart-gauge-track: rgba(148, 163, 184, .14);
    --chart-tooltip-bg: #101A2D;
    --chart-nodata-text: #5B6880;
    --chart-gradient-top: color-mix(in srgb, var(--series-1) 28%, transparent);
    --chart-gradient-bottom: color-mix(in srgb, var(--series-1) 0%, transparent);
    /* =========================================================================
     * LEGACY ALIASES
     * ========================================================================= */
    --theme-logo-color: #f1f1f1;
    --theme-default-font-family: var(--font-body);
    --theme-bg-color: var(--surface-page);
    --theme-text-color: var(--text-primary);
    --theme-scrollbar: var(--surface-page);
    --theme-scrollbar-thumb: #38465E;
    --theme-scrollbar-hover: var(--brand2-ui);
    --theme-header-color: var(--brand-ui);
    --theme-border-color: var(--border-default);
    --theme-left-menu-color: var(--surface-card);
    --theme-left-menu-active: var(--state-active-bg);
    --theme-right-panel-color: var(--surface-card);
    --theme-footer-bg-color: var(--surface-card);
    --theme-title-bg-color: var(--surface-raised);
    --theme-sidebar-color: var(--surface-raised);
    --theme-main-content-menu-color: var(--surface-sunken);
    --theme-main-content-menu-hover: var(--state-hover-bg);
    --theme-table-bg-color: var(--surface-card);
    --theme-table-border-color: var(--border-default);
    --theme-table-row-header: var(--surface-raised);
    --theme-table-column-header: var(--surface-raised);
    --theme-table-active-column: var(--state-active-bg);
    --theme-alternate-row-color: #0D1626;
    --theme-elevator-table-text: var(--text-secondary);
    --theme-elevator-grid-active-column: var(--state-active-fg);
    --theme-elevator-grid-active-cell: var(--state-active-fg);
    --theme-elevator-grid-other-cell: var(--surface-raised);
    --theme-icon-bg-color: var(--text-primary);
    --theme-asset-model-bgcolor: #000000;
    --theme-pds-table-info-text: var(--status-warning); /* was `yellow` */

    --theme-chart-bg-color: var(--surface-card);
    --theme-chart-semi-transparent-tooltip: rgba(16, 26, 45, .85);
    --theme-chart-stop1-color: var(--series-1);
    --theme-chart-stop2-color: var(--series-6);
    --theme-chart-stop3-color: var(--series-2);
    --theme-chart-stop4-color: var(--series-3);
    --theme-chart-dial-stop1-color: var(--status-ok);
    --theme-chart-dial-stop2-color: var(--status-alarm);
    --theme-chart-arrow-down-color: var(--status-ok);
    --theme-chart-arrow-up-color: var(--status-alarm);
    --theme-chart-dial-needle-color: var(--text-primary);
    --theme-chart-XYaxis-label-color: var(--chart-axis-label);
    --theme-chart-compared-text-color: var(--text-secondary);
    --theme-chart-text-color: var(--text-primary);
    --theme-chart-legend-text-color: var(--text-secondary);
    --theme-chart-legend-hover-color: var(--state-hover-fg);
    --theme-chart-nodata-text-color: var(--chart-nodata-text);
    --theme-chart-header-menu-color: var(--surface-raised);
    --theme-chart-header-menu-text-color: var(--text-primary);
    --theme-file-menu: url("/uploads/images/ICON - FILE MGMT(VertNav_ICONS (20px)).svg") no-repeat;
    --theme-home-menu: url("/uploads/images/ICON - HOME(VertNav_ICONS (20px)).svg") no-repeat;
    --theme-dashboards-menu: var(--theme-home-menu); /* was missing in v2 port; reuses the home icon like legacy themes.css */
    --theme-building-menu: url("/uploads/images/ICON - BLDG SYS(VertNav_ICONS (20px)).svg") no-repeat;
    --theme-aseets-menu: url("/uploads/images/ICON - ASSETS(VertNav_ICONS (20px)).svg") no-repeat;
    --theme-spaces-menu: url("/uploads/images/ICON - SPACES(VertNav_ICONS (20px)).svg") no-repeat;
    --theme-trending-menu: url("/uploads/images/ICON - TRENDING(VertNav_ICONS (20px)).svg") no-repeat;
    --theme-energy-menu: url("/uploads/images/ICON - E-MGMT(VertNav_ICONS (20px)).svg") no-repeat;
    --theme-alarming-menu: url("/uploads/images/ICON - ALARMING(VertNav_ICONS (20px)).svg") no-repeat;
    --theme-scheduling-menu: url("/uploads/images/ICON - SCHEDULING(VertNav_ICONS (20px)).svg") no-repeat;
    --theme-reports-menu: url("/uploads/images/ICON - REPORTS(VertNav_ICONS (20px)).svg") no-repeat;
    --theme-customreports-menu: url("/uploads/images/ICON - WORK ORDERS(VertNav_ICONS (20px)).svg") no-repeat;
    --theme-reportrepository-menu: url("/uploads/images/ICON - WORK ORDERS(VertNav_ICONS (20px)).svg") no-repeat;
    --theme-docrepo-menu: url("/uploads/images/ICON - DOCREPO(VertNav_ICONS (20px)).svg") no-repeat;
    --theme-occupants-menu: url("/uploads/images/ICON - E-MGMT(VertNav_ICONS (20px)).svg") no-repeat;
    --theme-nms-switch: url("/images/network-switch.svg") no-repeat;
    --theme-portfolio-menu: url("/images/globe.svg") no-repeat;
    --theme-login-background: url("/images/login-background.jpg") no-repeat;
}

/* =============================================================================
 * OPTIONAL: single-icon-set replacement (eliminates the LT- duplicate assets).
 * Use ONE set of SVGs as masks and tint with any token. Migrate menu items to:
 *
 *   .menu-icon {
 *       width: 20px; height: 20px;
 *       background-color: var(--text-secondary);      <- color from theme
 *       -webkit-mask: var(--icon-url) center / contain no-repeat;
 *       mask: var(--icon-url) center / contain no-repeat;
 *   }
 *   .menu-item:hover  .menu-icon { background-color: var(--state-hover-fg); }
 *   .menu-item.active .menu-icon { background-color: var(--state-active-fg); }
 *
 * Then each item only sets --icon-url: url("/uploads/images/ICON - HOME.svg");
 * One asset set, themed AND branded automatically.
 * ============================================================================= */