/* EcoAegis Sage / Dusk. The shared neutrals complement ThemisIQ; blue is ours. */
:root {
  color-scheme: light;
  --bg: #e9ebe5;
  --surface: #fcfdf9;
  --surface2: #f5f8f2;
  --surface3: #e4ebe2;
  --text: #26352f;
  --text-mid: #43564b;
  --muted: #61736a;
  --dim: #7c8a80;
  --border: rgba(54, 79, 65, .13);
  --border2: rgba(54, 79, 65, .22);
  --glass-bg: rgba(253, 254, 249, .84);
  --glass-border: rgba(255, 255, 255, .88);
  --glass-blur: 12px;
  --shadow-sm: 0 4px 18px rgba(48, 70, 55, .055);
  --shadow-md: 0 18px 52px rgba(48, 70, 55, .09);
  --shadow-lg: 0 25px 68px rgba(48, 70, 55, .14);
  --accent: #285dce;
  --accent-mid: #204da9;
  --accent-light: #7ba5ed;
  --accent-dark: #1e4ca6;
  --accent-pale: rgba(40, 93, 206, .11);
  --accent-bg: rgba(40, 93, 206, .065);
  --accent-shadow: rgba(40, 93, 206, .19);
  --accent-rgb: 40, 93, 206;
  --blue: #285dce;
  --blue-bg: rgba(40, 93, 206, .11);
  --good: #327d68;
  --good-soft: rgba(50, 125, 104, .12);
  --warn: #a9783b;
  --warn-soft: rgba(169, 120, 59, .13);
  --bad: #b96558;
  --bad-soft: rgba(185, 101, 88, .12);
  --sidebar-surface: rgba(250, 253, 247, .94);
  --hero-start: #e0e9df;
  --hero-end: #e5ecea;
  --ambient-blue: rgba(99, 148, 215, .26);
  --ambient-sage: rgba(133, 181, 144, .22);
  --page-grid: rgba(62, 87, 67, .045);
  --panel-rgb: 253, 254, 249;
  --ring-track: rgba(78, 105, 94, .16);
  --ring-core: #f7faf4;
  --action-bg: #285dce;
  --action-hover: #204da9;
  --action-ink: #ffffff;
  --particle-color-rgb: 40, 93, 206;
  --font: "Manrope", "Segoe UI Variable", sans-serif;
  --display: "Newsreader", Georgia, serif;
  --radius: 14px;
  --radius-lg: 20px;
  --radius-xl: 27px;
}

html[data-theme="dark"] {
  color-scheme: dark;
  --bg: #0b1420;
  --surface: #172231;
  --surface2: #1c2b3b;
  --surface3: #233346;
  --text: #eff4f5;
  --text-mid: #d3dfe8;
  --muted: #a6b3bf;
  --dim: #8394a4;
  --border: rgba(224, 240, 255, .11);
  --border2: rgba(224, 240, 255, .20);
  --glass-bg: rgba(23, 34, 49, .82);
  --glass-border: rgba(229, 243, 255, .12);
  --shadow-sm: 0 5px 20px rgba(0, 0, 0, .18);
  --shadow-md: 0 20px 60px rgba(0, 0, 0, .26);
  --shadow-lg: 0 28px 76px rgba(0, 0, 0, .36);
  --accent: #9bc5fc;
  --accent-mid: #c2ddff;
  --accent-light: #b9d7ff;
  --accent-dark: #c2ddff;
  --accent-pale: rgba(155, 197, 252, .15);
  --accent-bg: rgba(155, 197, 252, .085);
  --accent-shadow: rgba(53, 111, 200, .23);
  --accent-rgb: 155, 197, 252;
  --blue: #9bc5fc;
  --blue-bg: rgba(155, 197, 252, .15);
  --good: #79d3b7;
  --good-soft: rgba(121, 211, 183, .14);
  --warn: #e4b176;
  --warn-soft: rgba(228, 177, 118, .14);
  --bad: #f1a094;
  --bad-soft: rgba(241, 160, 148, .14);
  --sidebar-surface: rgba(17, 29, 43, .95);
  --hero-start: #19314c;
  --hero-end: #172936;
  --ambient-blue: rgba(45, 100, 166, .26);
  --ambient-sage: rgba(48, 107, 95, .16);
  --page-grid: rgba(224, 240, 255, .035);
  --panel-rgb: 23, 34, 49;
  --ring-track: rgba(179, 204, 224, .18);
  --ring-core: #1b2a3a;
  --action-bg: #346cc8;
  --action-hover: #477dda;
  --action-ink: #ffffff;
  --particle-color-rgb: 155, 197, 252;
}

body,
html[data-theme="dark"] body {
  background: radial-gradient(circle at 83% 12%, var(--ambient-blue), transparent 35%),
    radial-gradient(circle at 16% 80%, var(--ambient-sage), transparent 38%),
    linear-gradient(var(--page-grid) 1px, transparent 1px),
    linear-gradient(90deg, var(--page-grid) 1px, transparent 1px), var(--bg);
  background-size: auto, auto, 28px 28px, 28px 28px, auto;
}

#bg-noise { opacity: .012; }

body { font-weight: 500; line-height: 1.5; }
input, select, textarea, button { font-weight: 500; }
.data-table th,
.data-table td {
  font-family: var(--font);
  font-variant-numeric: tabular-nums;
}
.data-table th { font-weight: 750; }
.data-table td { color: var(--text-mid); font-weight: 600; line-height: 1.5; }

/* Newsreader is the editorial display voice; controls and navigation stay crisp. */
.brand-name,
.topbar-title,
.sidebar,
.btn,
.data-table,
input,
select,
textarea,
button { font-family: var(--font); }

.topbar {
  background: color-mix(in srgb, var(--sidebar-surface) 94%, transparent);
  border-bottom-color: var(--border);
  backdrop-filter: none;
  box-shadow: 0 3px 18px rgba(25, 43, 50, .045);
}
.topbar::after { background: linear-gradient(90deg, transparent, rgba(var(--accent-rgb), .52), transparent); }
.topbar-context small { color: var(--muted); }
.topbar-user,
.theme-toggle { background: var(--glass-bg); border-color: var(--border); }
.topbar-capture,
.btn-primary {
  border-color: transparent;
  background: var(--action-bg);
  color: var(--action-ink);
  box-shadow: 0 8px 22px var(--accent-shadow);
}
.topbar-capture:hover,
.btn-primary:hover { background: var(--action-hover); color: var(--action-ink); transform: translateY(-2px); }
.topbar-capture,
.btn,
.sidebar-group .side-nav a { transition: background-color .22s ease, border-color .22s ease, color .22s ease, transform .22s ease, box-shadow .22s ease; }

.sidebar {
  background: var(--sidebar-surface);
  border-right: 1px solid var(--border);
  backdrop-filter: none;
  box-shadow: 12px 0 40px rgba(26, 48, 44, .055);
}
.sidebar-header,
.sidebar-bottom { border-color: var(--border); }
.sidebar-bottom { background: transparent; }
.sidebar-context {
  border-color: rgba(var(--accent-rgb), .17);
  background: linear-gradient(145deg, var(--accent-pale), var(--glass-bg));
}
.sidebar-context span,
.sidebar-group[open] summary,
[data-theme="light"] .sidebar-group[open] summary { color: var(--accent-dark); }
.sidebar-context strong,
[data-theme="light"] .sidebar .brand-name,
[data-theme="light"] .sidebar-context strong { color: var(--text); }
.sidebar-context small,
[data-theme="light"] .sidebar .brand-sub,
[data-theme="light"] .sidebar-context small { color: var(--muted); }
.sidebar-group summary,
[data-theme="light"] .sidebar-group summary { color: var(--dim); }
.sidebar-group summary:hover,
[data-theme="light"] .sidebar-group summary:hover { background: var(--accent-pale); color: var(--text); }
.sidebar-group .side-nav a,
[data-theme="light"] .sidebar-group .side-nav a { color: var(--muted); }
.sidebar-group .side-nav a:hover,
[data-theme="light"] .sidebar-group .side-nav a:hover {
  border-color: rgba(var(--accent-rgb), .16);
  background: var(--accent-pale);
  color: var(--text);
  transform: translateX(2px);
}
.sidebar-group .side-nav a.active,
[data-theme="light"] .sidebar-group .side-nav a.active,
[data-theme="dark"] .sidebar-group .side-nav a.active {
  border-color: rgba(var(--accent-rgb), .22);
  background: var(--accent-pale);
  color: var(--accent-dark);
  box-shadow: inset 3px 0 var(--accent), 0 8px 22px rgba(27, 65, 122, .07);
}
[data-theme="light"] .sidebar-signout .btn { color: var(--muted); }

.card,
.kpi-card,
.command-metric,
.permit-metric,
.operations-metric,
.command-panel,
.permit-card,
.operations-record-card {
  border-color: var(--glass-border);
  background: var(--glass-bg);
  border-radius: var(--radius-xl);
  box-shadow: var(--shadow-sm), inset 0 1px 0 var(--glass-border);
  backdrop-filter: blur(var(--glass-blur)) saturate(135%);
  transition: transform .28s cubic-bezier(.2, .8, .2, 1), border-color .28s ease, box-shadow .28s ease;
}
.card:hover,
.kpi-card:hover,
.command-metric:hover,
.permit-metric:hover,
.operations-metric:hover,
.command-panel:hover,
.permit-card:hover,
.operations-record-card:hover {
  border-color: rgba(var(--accent-rgb), .24);
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-border);
  transform: translateY(-3px);
}
.card,
.kpi-card,
.command-metric,
.permit-metric,
.operations-metric,
.command-panel,
.permit-card,
.operations-record-card {
  background: linear-gradient(148deg, rgba(var(--panel-rgb), .88), rgba(var(--panel-rgb), .70));
  box-shadow: 0 22px 65px rgba(35, 57, 72, .09), 0 3px 10px rgba(35, 57, 72, .035), inset 0 1px 0 var(--glass-border);
}
html[data-theme="dark"] .card,
html[data-theme="dark"] .kpi-card,
html[data-theme="dark"] .command-metric,
html[data-theme="dark"] .permit-metric,
html[data-theme="dark"] .operations-metric,
html[data-theme="dark"] .command-panel,
html[data-theme="dark"] .permit-card,
html[data-theme="dark"] .operations-record-card {
  box-shadow: 0 22px 70px rgba(0, 0, 0, .28), 0 3px 12px rgba(0, 0, 0, .15), inset 0 1px 0 var(--glass-border);
}
.command-panel { padding: clamp(20px, 2vw, 27px); }
.card > h2 { font-family: var(--display); font-size: clamp(21px, 2vw, 25px); font-weight: 500; letter-spacing: -.035em; line-height: 1.08; }
.panel-heading { align-items: flex-start; margin-bottom: 22px; }
.panel-heading h2 {
  margin-top: 5px;
  font-family: var(--display);
  font-size: clamp(21px, 2vw, 25px);
  font-weight: 500;
  letter-spacing: -.035em;
  line-height: 1.08;
}
.panel-heading a,
.panel-link { color: var(--accent-dark); font-size: 11px; font-weight: 750; }
.panel-heading a:hover,
.panel-link:hover { color: var(--accent); }
.telemetry-label { font-size: 10px; letter-spacing: .075em; }
.command-metric,
.permit-metric,
.operations-metric { min-height: 140px; padding: 21px 23px; }
.command-metric small,
.permit-metric span,
.operations-metric span { font-size: 10px; letter-spacing: .035em; }
.command-metric strong,
.permit-metric strong,
.operations-metric strong { font-weight: 500; font-variant-numeric: tabular-nums; }
.command-metric em,
.permit-metric small,
.operations-metric small { font-size: 10px; line-height: 1.5; }
.permit-metric { gap: 3px; }

.command-empty {
  justify-items: start;
  text-align: left;
  gap: 8px;
  padding: 22px;
}
.command-empty span {
  width: 39px;
  height: 39px;
  border: 1px solid rgba(var(--accent-rgb), .2);
  border-radius: 12px;
  background: var(--accent-pale);
  color: var(--accent-dark);
  font-size: 17px;
}
.command-empty strong { color: var(--text); font-family: var(--display); font-size: 21px; font-weight: 500; line-height: 1.05; }
.command-empty p { max-width: 44ch; color: var(--muted); font-size: 12px; line-height: 1.55; }
.permit-priority-panel { display: flex; flex-direction: column; min-height: 310px; }
#permit-priority { display: grid; flex: 1; min-height: 228px; }
#permit-priority > .command-empty {
  min-height: 228px;
  align-content: center;
  border: 1px solid var(--border);
  border-radius: 18px;
  background: linear-gradient(128deg, var(--accent-bg), transparent 64%), rgba(var(--panel-rgb), .35);
}
#permit-card-grid:has(> .command-empty) { grid-template-columns: 1fr; }
#permit-card-grid > .command-empty { min-height: 130px; border-top: 1px solid var(--border); }
.permit-card h3 { font-size: 23px; font-weight: 500; line-height: 1.12; }
.permit-card > p { font-size: 12px; line-height: 1.6; }

.permit-status-visual,
.operations-status-visual { gap: 20px; padding: 2px 0 0; }
.permit-status-donut,
.operations-status-donut,
.asset-health-donut {
  width: 156px;
  height: 156px;
  box-shadow: 0 10px 28px rgba(30, 54, 77, .12), inset 0 0 0 1px var(--glass-border);
}
.permit-status-donut > span,
.operations-status-donut > span {
  width: 126px;
  height: 126px;
  background: var(--ring-core);
  border: 1px solid var(--glass-border);
  box-shadow: 0 3px 16px rgba(21, 43, 59, .09);
}
.permit-status-donut > span,
.operations-status-donut > span,
.asset-health-donut > span { align-content: center; gap: 0; text-align: center; }
.permit-status-donut strong,
.operations-status-donut strong { color: var(--text); font-size: 38px; font-weight: 500; line-height: 1; }
.permit-status-donut small,
.operations-status-donut small,
.asset-health-donut small { font-size: 9px; font-weight: 750; letter-spacing: .09em; }
.asset-health-donut::before { inset: 15px; background: var(--ring-core); border-color: var(--glass-border); box-shadow: 0 3px 16px rgba(21, 43, 59, .09); }
.asset-health-donut strong { font-size: 31px; font-weight: 500; }
.permit-status-legend,
.operations-status-legend { gap: 0; }
.permit-status-legend span,
.operations-status-legend span {
  min-height: 31px;
  border-top: 1px solid var(--border);
  font-size: 11px;
  font-weight: 600;
}
.permit-status-legend i,
.operations-status-legend i { width: 8px; height: 8px; box-shadow: none; }
.permit-status-legend strong,
.operations-status-legend strong { font-variant-numeric: tabular-nums; }
.premium-hover::before,
.kpi-card::before,
.command-panel::before,
.permit-card::before {
  background: radial-gradient(360px circle at var(--mx) var(--my), rgba(var(--accent-rgb), .13), transparent 66%);
}
.page-kicker,
.telemetry-label { color: var(--accent-dark); }
.data-table th { background: color-mix(in srgb, var(--surface2) 84%, transparent); }
:focus-visible { outline-color: var(--accent); }

.command-hero,
.permit-hero,
.operations-hero,
.incident-case-hero,
.incident-hero,
.capa-hero {
  border-color: rgba(var(--accent-rgb), .17);
  background-image: linear-gradient(90deg, rgba(8, 15, 24, .96) 0%, rgba(11, 23, 38, .86) 51%, rgba(28, 64, 130, .52) 100%),
    url("/static/ui_foundation/assets/earth-horizon-clean.png");
  background-position: center, center 54%;
  background-size: cover, cover;
  background-repeat: no-repeat;
  box-shadow: var(--shadow-md), inset 0 1px 0 var(--glass-border);
  border-radius: var(--radius-xl);
  color: #f5f7ff;
}
.command-hero h2,
.permit-hero h2,
.operations-hero h2,
.incident-case-hero h2,
.command-hero-signal strong,
.permit-hero-stat strong,
.operations-hero-stat strong { color: #f5f7ff; }
.command-hero p,
.permit-hero p,
.operations-hero p,
.incident-case-hero p,
.command-hero-signal span,
.permit-hero-stat span,
.operations-hero-stat span,
.command-hero-signal small { color: #c4d0de; }
.command-hero-signal,
.permit-hero-stat,
.operations-hero-stat {
  border-color: rgba(229, 243, 255, .16);
  background: rgba(43, 79, 126, .22);
}
.command-hero .btn-secondary {
  border-color: rgba(229, 243, 255, .2);
  background: rgba(13, 27, 44, .56);
  color: #f5f7ff;
}

/* Chart compositions have their own geometry instead of relying on canvas layout guesses. */
.severity-visual { display: grid; justify-items: center; align-content: start; gap: 19px; padding: 4px 0 1px; }
.severity-donut-stage { position: relative; width: 172px; height: 172px; }
.severity-donut-stage canvas { display: block; width: 100% !important; height: 100% !important; }
.severity-donut-stage.is-empty canvas { display: none; }
.severity-donut-stage.is-empty::before { content: ""; position: absolute; inset: 0; border: 15px solid var(--ring-track); border-radius: 50%; box-shadow: 0 10px 28px rgba(30, 54, 77, .09), inset 0 1px 0 var(--glass-border); }
.severity-donut-center {
  position: absolute;
  inset: 0;
  display: grid;
  place-content: center;
  text-align: center;
  pointer-events: none;
}
.severity-donut-center strong { font: 500 39px/1 var(--display); letter-spacing: -.055em; color: var(--text); }
.severity-donut-center span { color: var(--muted); font-size: 9px; font-weight: 750; letter-spacing: .09em; text-transform: uppercase; }
.severity-legend { display: grid; width: 100%; }
.severity-legend > span { display: grid; grid-template-columns: 8px minmax(0, 1fr) auto; align-items: center; gap: 10px; min-height: 32px; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; font-weight: 600; text-transform: capitalize; }
.severity-legend i { width: 8px; height: 8px; border-radius: 50%; background: var(--legend-color); }
.severity-legend strong { color: var(--text); font-variant-numeric: tabular-nums; }
.severity-legend-empty { margin: 0; padding: 14px 0 0; border-top: 1px solid var(--border); color: var(--muted); font-size: 11px; text-align: center; }

.risk-heatmap { display: grid; grid-template-columns: 38px minmax(0, 1fr); gap: 7px; width: 100%; margin-top: 5px; }
.risk-heatmap-y { display: grid; grid-template-columns: 15px 16px; gap: 4px; padding-bottom: 40px; min-height: 0; }
.risk-heatmap-y-title { align-self: center; color: var(--dim); font-size: 9px; font-weight: 750; letter-spacing: .04em; writing-mode: vertical-rl; transform: rotate(180deg); }
.risk-heatmap-y-ticks { display: grid; grid-template-rows: repeat(5, 1fr); align-items: center; justify-items: center; color: var(--muted); font-size: 10px; font-weight: 700; }
.risk-heatmap-main { display: grid; min-width: 0; gap: 7px; }
.risk-heatmap-grid { display: grid; grid-template-columns: repeat(5, minmax(0, 1fr)); gap: 6px; min-width: 0; }
.risk-heatmap-cell { display: grid; place-items: center; min-width: 0; height: clamp(34px, 4vw, 58px); border: 1px solid var(--border); border-radius: 9px; background: color-mix(in srgb, var(--surface3) 63%, transparent); color: var(--text); font-size: 13px; font-weight: 800; font-variant-numeric: tabular-nums; box-shadow: inset 0 1px 0 var(--glass-border); transition: transform .2s ease, box-shadow .2s ease; }
.risk-heatmap-cell[data-level="low"] { border-color: rgba(67, 119, 196, .25); background: rgba(75, 129, 208, .24); }
.risk-heatmap-cell[data-level="elevated"] { border-color: rgba(178, 125, 61, .28); background: rgba(209, 151, 75, .35); }
.risk-heatmap-cell[data-level="critical"] { border-color: rgba(185, 96, 86, .3); background: rgba(204, 105, 96, .43); }
.risk-heatmap-cell:not([data-level="empty"]):hover { transform: translateY(-2px); box-shadow: 0 8px 18px rgba(35, 57, 72, .13), inset 0 1px 0 var(--glass-border); }
.risk-heatmap-x-ticks { display: grid; grid-template-columns: repeat(5, 1fr); justify-items: center; color: var(--muted); font-size: 10px; font-weight: 700; }
.risk-heatmap-x-title { color: var(--dim); font-size: 9px; font-weight: 750; letter-spacing: .04em; text-align: center; }
.risk-heatmap-footer { display: flex; justify-content: space-between; align-items: center; flex-wrap: wrap; gap: 12px; margin-top: 17px; padding-top: 15px; border-top: 1px solid var(--border); color: var(--muted); font-size: 10px; font-weight: 650; }
.risk-heatmap-footer strong { color: var(--text); font-variant-numeric: tabular-nums; }
.risk-heatmap-legend { display: flex; flex-wrap: wrap; gap: 10px; }
.risk-heatmap-legend span { display: inline-flex; align-items: center; gap: 5px; }
.risk-heatmap-legend i { width: 8px; height: 8px; border-radius: 3px; }
.heatmap-low { background: #6b9cdb; }
.heatmap-elevated { background: #d9a15a; }
.heatmap-critical { background: #cd746d; }

/* Motion is local to interaction, never a delayed page-wide reveal. */
.command-hero-signal strong,
.permit-hero-stat strong,
.operations-hero-stat strong { animation: eco-number-settle .55s cubic-bezier(.2, .8, .2, 1) both; }
@keyframes eco-number-settle {
  from { transform: translateY(4px) scale(.98); }
  to { transform: translateY(0) scale(1); }
}

/* Authentication remains dark, with the same Dusk surfaces as the workspace. */
body.login-page,
body.login-page[data-theme="light"] {
  color-scheme: dark;
  --bg: #0b1420;
  --surface: #172231;
  --surface2: #1c2b3b;
  --text: #eff4f5;
  --text-mid: #d3dfe8;
  --muted: #a6b3bf;
  --border: rgba(224, 240, 255, .11);
  --border2: rgba(224, 240, 255, .20);
  background: #0b1420;
}
.login-page .login-background-overlay {
  background: linear-gradient(90deg, rgba(8, 18, 31, .98), rgba(8, 18, 31, .78) 43%, rgba(12, 30, 51, .22) 70%, rgba(8, 18, 31, .81)),
    linear-gradient(180deg, rgba(8, 18, 31, .25), transparent 46%, rgba(8, 18, 31, .93));
}
.login-page .login-card {
  border-color: rgba(224, 240, 255, .15);
  background: rgba(19, 33, 49, .93);
  box-shadow: 0 34px 92px rgba(0, 0, 0, .45);
}
.login-page .login-card input {
  border-color: rgba(224, 240, 255, .17);
  background: rgba(8, 18, 31, .78);
}

@media (max-width: 768px) {
  .card,
  .kpi-card,
  .command-metric,
  .permit-metric,
  .operations-metric,
  .command-panel,
  .permit-card,
  .operations-record-card { backdrop-filter: none; }
  .risk-heatmap-cell { border-radius: 6px; }
}

@media (prefers-reduced-motion: reduce) {
  .card,
  .kpi-card,
  .command-metric,
  .permit-metric,
  .operations-metric,
  .command-panel,
  .permit-card,
  .operations-record-card,
  .btn,
  .sidebar-group .side-nav a { transition: none; }
  .card:hover,
  .kpi-card:hover,
  .command-metric:hover,
  .permit-metric:hover,
  .operations-metric:hover,
  .command-panel:hover,
  .permit-card:hover,
  .operations-record-card:hover,
  .sidebar-group .side-nav a:hover,
  .btn:hover { transform: none; }
  .command-hero-signal strong,
  .permit-hero-stat strong,
  .operations-hero-stat strong { animation: none; }
  .risk-heatmap-cell { transition: none; }
  .risk-heatmap-cell:not([data-level="empty"]):hover { transform: none; }
}