/* U+CSMA — Unified Dashboard. Shared tokens and components.
Light/Dark theme via [data-theme] on ; default is light (warm white B2B consulting palette),
toggle switches to a dark operations-console palette. All component colors below reference
CSS variables so both themes stay consistent and readable (no low-contrast/washed-out text). */
:root {
color-scheme:light;
/* Base surfaces */
--c-bg:#f7f5f2; --c-bg-warm:#efece7; --c-white:#ffffff; --c-surface-2:#f2f0ec; --c-surface-3:#e9e6e0;
--c-line:#e2ded7; --c-line-strong:#cfc9c0;
/* Text */
--c-charcoal:#1c1c22; --c-dark:#3c3d45; --c-gray:#6b6d78; --c-gray-mid:#7d7f8a;
--c-gray-lighter:#ece9e4;
/* Brand */
--c-magenta:#e6007e; --c-magenta-dark:#b8005f; --c-magenta-strong:#96004c;
--c-magenta-soft:#fbe3ef; --c-magenta-soft2:#f7d5e8;
/* Semantic */
--c-success:#0f9d63; --c-success-bg:#e3f6ec; --c-warn:#a8720b; --c-warn-bg:#fbf0d9; --c-warn-border:#eeddaf;
--c-danger:#d6284f; --c-danger-bg:#fce6ea; --c-info:#1c6fd0; --c-info-bg:#e6f0fc;
--c-high:#b5590a; --c-high-bg:#fbead6;
/* Sidebar */
--c-sidebar-bg:#ffffff; --c-sidebar-border:#e6e2db; --c-sidebar-text:#4a4c55; --c-sidebar-text-strong:#1a1a1f;
--c-sidebar-text-muted:#6f717b; --c-sidebar-text-faint:#8b8d97;
--c-sidebar-hover-bg:#f3eff3; --c-sidebar-hover-text:#1a1a1f;
--c-sidebar-active-bg:#fbe3ef; --c-sidebar-active-text:#b8005f; --c-sidebar-active-icon:#e6007e;
/* Surfaces with purpose */
--c-topbar-bg:#ffffff; --c-input-bg:#ffffff; --c-scrollbar-thumb:#d6d1c8;
--c-chat-user-bg:#efece7; --c-chat-user-text:#1c1c22;
--c-tag-bg:#f0eee9; --c-tag-text:#54565f;
--c-chip-bg:#fbe3ef; --c-chip-border:#f1b6d6;
--c-kpi-tint-border:#f0b7d6; --c-kpi-tint-bg:#fdedf6; --c-kpi-tint-bg2:#fadcec; --c-danger-tint-bg:#fce3e8;
--c-pbar-fill:#e6007e;
--c-chart-blue:#1c6fd0; --c-chart-track:#e2ded7;
--radius-lg:12px; --radius-md:10px; --radius-sm:8px; --radius-pill:999px;
--shadow-card:none;
--font:'Pretendard',-apple-system,BlinkMacSystemFont,'Segoe UI',sans-serif;
--sidebar-width:232px;
}
/* Dark theme — operations-console palette, magenta accent (opt-in via toggle) */
html[data-theme="dark"] {
color-scheme:dark;
--c-bg:#0b0d13; --c-bg-warm:#12161f; --c-white:#171b26; --c-surface-2:#1d2330; --c-surface-3:#232b3b;
--c-line:#2c3547; --c-line-strong:#3a4459;
--c-charcoal:#f4f6fb; --c-dark:#d7dceb; --c-gray:#aab4c9; --c-gray-mid:#94a0b8;
--c-gray-lighter:#232b3b;
--c-magenta:#ff1493; --c-magenta-dark:#ff8fcf; --c-magenta-strong:#d1006f;
--c-magenta-soft:#3a2036; --c-magenta-soft2:#2a1c2c;
--c-success:#3ee6a0; --c-success-bg:#123328; --c-warn:#ffcb66; --c-warn-bg:#3a2c14; --c-warn-border:#5a4623;
--c-danger:#ff7c93; --c-danger-bg:#3a1f2b; --c-info:#7fbcff; --c-info-bg:#1a2c48;
--c-high:#ffb27a; --c-high-bg:#3a2a1c;
--c-sidebar-bg:#0e1119; --c-sidebar-border:#232a38; --c-sidebar-text:#b9c0d1; --c-sidebar-text-strong:#f9fafc;
--c-sidebar-text-muted:#8b93a8; --c-sidebar-text-faint:#767f95;
--c-sidebar-hover-bg:#1c2230; --c-sidebar-hover-text:#ffffff;
--c-sidebar-active-bg:#3d2138; --c-sidebar-active-text:#ff8fcf; --c-sidebar-active-icon:#ff5cad;
--c-topbar-bg:#0e1119; --c-input-bg:#141a26; --c-scrollbar-thumb:#3d4761;
--c-chat-user-bg:#2a2f3d; --c-chat-user-text:#ffffff;
--c-tag-bg:#26304a; --c-tag-text:#b7c3dc;
--c-chip-bg:#33223e; --c-chip-border:#5a3350;
--c-kpi-tint-border:#7a3a63; --c-kpi-tint-bg:#271c2c; --c-kpi-tint-bg2:#4c2340; --c-danger-tint-bg:#402332;
--c-pbar-fill:#ff5cad;
--c-chart-blue:#7fbcff; --c-chart-track:#3a4459;
}
/* Font sizes across this sheet were scaled 1.3x from the original baseline, then reduced 20%
(nav menu — .nav-item / .nav-group-label / .nav-item i — kept as-is, already reduced separately). */
* {box-sizing:border-box}
html,body {margin:0;padding:0}
html {background:var(--c-bg)}
body {background:var(--c-bg);color:var(--c-charcoal);font-family:var(--font);font-size:13.6px;line-height:1.55;-webkit-font-smoothing:antialiased;transition:background-color .2s,color .2s}
button,input {font:inherit}
button {cursor:pointer}
a {color:inherit;text-decoration:none}
ul {margin:0;padding:0;list-style:none}
button:focus-visible,a:focus-visible,[role=button]:focus-visible,input:focus-visible {outline:2px solid var(--c-magenta);outline-offset:4px}
::selection {background:var(--c-magenta);color:#fff}
::-webkit-scrollbar {width:5px;height:5px}
::-webkit-scrollbar-thumb {background:var(--c-scrollbar-thumb);border-radius:5px}
::-webkit-scrollbar-track {background:transparent}
.app-shell {display:flex;min-height:100vh}
/* Persistent navigation */
.sidebar {width:var(--sidebar-width);flex-shrink:0;background:var(--c-sidebar-bg);border-right:1px solid var(--c-sidebar-border);display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:50;color:var(--c-sidebar-text);transition:background-color .2s,border-color .2s}
.brand-block {padding:24px 22px 18px;border-bottom:1px solid var(--c-sidebar-border)}
/* U+CSMA logo: user-supplied raster wordmark (magenta "U+" + gray "CSMA" + subtitle),
rendered as a plain ![]()
. Width capped to the sidebar's content box; height auto to
preserve the source image's aspect ratio. */
.brand-logo {display:block;width:100%;max-width:186px;height:auto}
.brand-tenant {margin-top:18px;padding:10px 11px;display:flex;align-items:center;gap:8px;font-size:12.8px;font-weight:550;color:var(--c-sidebar-text-strong);border:1px solid var(--c-sidebar-border);border-radius:7px;background:var(--c-sidebar-hover-bg)}
.brand-tenant .dot {width:6px;height:6px;flex-shrink:0;background:var(--c-success);border-radius:50%}
/* Multi-tenant selector: replaces the static tenant name with a native