/* Aryvor V4 — theme layer. Loaded after styles.css; overrides tokens only. */

@font-face {
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("vendor/fonts/chakra-petch-400.woff2") format("woff2");
}
@font-face {
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("vendor/fonts/chakra-petch-500.woff2") format("woff2");
}
@font-face {
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("vendor/fonts/chakra-petch-600.woff2") format("woff2");
}
@font-face {
  font-family: "Chakra Petch";
  font-style: normal;
  font-weight: 700;
  font-display: swap;
  src: url("vendor/fonts/chakra-petch-700.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 400;
  font-display: swap;
  src: url("vendor/fonts/ibm-plex-mono-400.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 500;
  font-display: swap;
  src: url("vendor/fonts/ibm-plex-mono-500.woff2") format("woff2");
}
@font-face {
  font-family: "IBM Plex Mono";
  font-style: normal;
  font-weight: 600;
  font-display: swap;
  src: url("vendor/fonts/ibm-plex-mono-600.woff2") format("woff2");
}

:root, html[data-theme="dark"] {
  --aryvor-bg:#050505;
  --aryvor-canvas:#050505;
  --aryvor-elevated:#0D0D0C;
  --aryvor-surface:#141413;
  --aryvor-surface-2:#1C1C1A;
  --aryvor-row-selected:#141B2A;
  --aryvor-row-error:#17100F;
  --aryvor-border:#2A2A26;
  --aryvor-border-strong:#3E3E39;
  --aryvor-primary:#5C6C96;
  --aryvor-primary-hi:#8496C2;
  --aryvor-primary-deep:#33405E;
  --aryvor-secondary:#C6C2B4;
  --aryvor-text:#EDEBE4;
  --aryvor-muted:#A3A29B;
  --aryvor-dim:#8C8B84;
  --aryvor-faint:#6E6D66;
  --aryvor-mono-hi:#C6C2B4;
  --aryvor-success:#6E8F6B;
  --aryvor-success-text:#92B58F;
  --aryvor-warning:#B99B57;
  --aryvor-warning-text:#D6BB80;
  --aryvor-danger:#9B5F57;
  --aryvor-danger-text:#E0B0AB;
  --aryvor-info:#5C6C96;
  --aryvor-info-text:#A9B6D6;

  --bg:#050505;
  --surface:#0D0D0C;
  --surface-2:#141413;
  --soft:#1C1C1A;
  --panel:#0D0D0C;
  --line:#2A2A26;
  --border:#2A2A26;
  --ink:#EDEBE4;
  --text:#EDEBE4;
  --muted:#A3A29B;
  --hot:#8496C2;
  --hot-soft:rgba(132,150,194,.14);
  --accent:#8496C2;
  --violet:#5C6C96;
  --ok:#6E8F6B;
  --warn:#B99B57;
  --critical:#9B5F57;
  --blue:#8496C2;
  --shadow:none;

  --atlas-bg:#050505;
  --atlas-canvas:#050505;
  --atlas-panel:#0D0D0C;
  --atlas-line:#2A2A26;
  --atlas-line-strong:#3E3E39;
  --atlas-text:#EDEBE4;
  --atlas-muted:#A3A29B;
  --atlas-amber:#B99B57;
  --atlas-cyan:#8496C2;
  --atlas-red:#9B5F57;

  --radius-panel:0px;
  --radius-control:0px;
  --radius-modal:0px;
}

html[data-theme="light"] {
  --aryvor-bg:#E9E7DC;
  --aryvor-canvas:#E9E7DC;
  --aryvor-elevated:#F7F6F1;
  --aryvor-surface:#F7F6F1;
  --aryvor-surface-2:#E3E0D5;
  --aryvor-border:#C3BFB1;
  --aryvor-border-strong:#ABA694;
  --aryvor-primary:#4A5878;
  --aryvor-primary-hi:#33405E;
  --aryvor-secondary:#6B6960;
  --aryvor-text:#16150F;
  --aryvor-muted:#6B6960;
  --aryvor-dim:#8A887E;
  --aryvor-success:#4C6B49;
  --aryvor-warning:#8A6A20;
  --aryvor-danger:#8C3F39;
  --aryvor-info:#4A5878;

  --bg:#E9E7DC;
  --surface:#F7F6F1;
  --surface-2:#F7F6F1;
  --soft:#E3E0D5;
  --panel:#F7F6F1;
  --line:#C3BFB1;
  --border:#C3BFB1;
  --ink:#16150F;
  --text:#16150F;
  --muted:#6B6960;
  --hot:#4A5878;
  --hot-soft:#DDE1EB;
  --accent:#4A5878;
  --violet:#4A5878;
  --ok:#4C6B49;
  --warn:#8A6A20;
  --critical:#8C3F39;
  --blue:#4A5878;
  --shadow:none;

  --atlas-bg:#E9E7DC;
  --atlas-canvas:#E9E7DC;
  --atlas-panel:#F7F6F1;
  --atlas-line:#C3BFB1;
  --atlas-line-strong:#ABA694;
  --atlas-text:#16150F;
  --atlas-muted:#6B6960;
  --atlas-amber:#8A6A20;
  --atlas-cyan:#4A5878;
  --atlas-red:#8C3F39;
}

html, body, .workspace {
  background: var(--aryvor-canvas) !important;
  color: var(--aryvor-text);
}

.topbar {
  background: var(--aryvor-elevated);
  border-bottom: 1px solid var(--aryvor-border);
}

/* Entry overlays stay fully opaque above the workspace chrome. */
.login-overlay, .commessa-overlay, .cadm-overlay {
  background: var(--aryvor-canvas) !important;
  color: var(--aryvor-text);
  isolation: isolate;
}

body, button, input, select, textarea {
  font-family: "Chakra Petch", "Helvetica Neue", Helvetica, sans-serif;
  font-weight: 400;
}

h1, h2, h3, h4, h5, h6, strong, b,
.hero-copy h1, .hero-grid.compact h1, .module-header h2, .module h2 {
  font-weight: 500 !important;
  letter-spacing: -0.02em;
}

/* Monospace, all-caps, spaced: labels, meta, tags, table headers, numerals. */
.kpi-label, .stat-label, .card-label, .meta, .eyebrow, .tag, .chip, .badge, .pill,
th, thead td, .table-head, .col-head, .section-label,
.nav-label, .breadcrumb, .kicker, .status, .status-pill {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-size: 10px;
  letter-spacing: 0.16em;
  text-transform: uppercase;
}

/* Numerals: squared-technical face, per the reference board. */
.kpi-value, .stat-value, .metric-value, .big-number, .num, td.num,
.hero-copy h1, .v3-kpi-value, .gantt-pct, .ig-bar-label {
  font-family: "Chakra Petch", "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
  font-weight: 500;
  letter-spacing: 0.005em;
}

.mono, code, pre {
  font-family: "IBM Plex Mono", ui-monospace, monospace;
  font-variant-numeric: tabular-nums;
}

/* Squared geometry: the v4 system has no rounded containers. */
.panel, .card, .module, .modal, .overlay-card, .sheet, .tile,
button, input, select, textarea, .chip, .tag, .badge, .pill, .btn {
  border-radius: 0 !important;
}

.panel, .card, .module, .tile {
  background: var(--aryvor-elevated);
  border: 1px solid var(--aryvor-border);
  box-shadow: none !important;
}

a { color: var(--aryvor-primary-hi); text-decoration: none; }
a:hover { color: var(--aryvor-secondary); }
::selection { background: var(--aryvor-primary-deep); color: var(--aryvor-text); }

/* ───────── Component layer: buttons, pills, inputs, checkboxes ─────────
   Mirrors "Controls" in the UI Kit mockup. Loaded after styles.css, so
   !important is needed only where styles.css already asserts one. */

.primary-action, .cadm-btn-primary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 10px 16px !important;
  border: 0 !important;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  transition: none !important;
}
/* Colour needs !important: styles.css has several older-era rules on
   these exact classes that are themselves !important (a legacy "ghost /
   underline" skin, dark-theme patches, ...) and would otherwise still win
   by source position even though this file loads last. Known modifier
   collisions this creates (an .active state, a .plan-* variant) get an
   explicit, equally-!important, higher-specificity exception just below
   instead of trying to out-clever the cascade generically. */
.primary-action, .cadm-btn-primary {
  background: var(--aryvor-primary) !important;
  color: #0A0A09 !important;
}
.primary-action:hover, .cadm-btn-primary:hover {
  background: var(--aryvor-primary-hi) !important;
  filter: none !important;
  transform: none !important;
  opacity: 1 !important;
}
.primary-action:disabled, .primary-action[disabled],
.cadm-btn-primary:disabled, .cadm-btn-primary[disabled] {
  background: var(--aryvor-border-strong) !important;
  color: var(--aryvor-dim) !important;
  opacity: 1 !important;
}
.primary-action.small, .primary-action.compact-action {
  padding: 0 10px !important;
  min-height: 30px;
  font-size: 9px;
}

.primary-action.ghost, .filter-btn, .cadm-btn-secondary {
  padding: 9px 13px !important;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  background: transparent !important;
  border: 1px solid var(--aryvor-border-strong) !important;
  color: var(--aryvor-muted) !important;
}
.primary-action.ghost:hover, .filter-btn:hover, .cadm-btn-secondary:hover {
  border-color: var(--aryvor-primary-hi) !important;
  color: var(--aryvor-text) !important;
  background: var(--aryvor-surface-2) !important;
  transform: none !important;
}
/* Known modifier exception: an active filter/view toggle must still read
   as active over the plain secondary-button skin above. */
.filter-btn.active, .commessa-toggle-btn.active {
  background: var(--aryvor-primary) !important;
  border-color: var(--aryvor-primary) !important;
  color: #0A0A09 !important;
}

.cadm-btn-danger {
  background: transparent !important;
  border: 1px solid var(--aryvor-danger) !important;
  color: var(--aryvor-danger-text) !important;
  padding: 9px 13px !important;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  font-weight: 600;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cadm-btn-danger:hover { background: rgba(155,95,87,.16) !important; }

/* Status pills — colour needs !important for the same reason as the
   buttons above (older !important rules on these exact classes exist
   elsewhere). Known modifier exception (.plan-*) follows immediately. */
.status, .chip, .commessa-chip, .quality-status, .calibration-status, .risk-pill {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px !important;
  letter-spacing: 0.08em;
  font-weight: 600;
  text-transform: uppercase;
  padding: 4px 8px !important;
  min-height: 0 !important;
  border: 1px solid var(--aryvor-border) !important;
  background: var(--aryvor-surface-2) !important;
  color: var(--aryvor-muted) !important;
}
.commessa-chip.plan-lite, .commessa-chip.plan-pro {
  border-color: var(--aryvor-primary-hi) !important;
  background: rgba(132,150,194,.14) !important;
  color: var(--aryvor-primary-hi) !important;
}
.commessa-chip.plan-ultra {
  border-color: var(--aryvor-danger) !important;
  background: rgba(155,95,87,.16) !important;
  color: var(--aryvor-danger-text) !important;
}
.status.done, .status.ok, .status-ok, .status.yes {
  border-color: var(--aryvor-success) !important;
  color: var(--aryvor-success-text) !important;
  background: rgba(110,143,107,.16) !important;
}
.status.progress, .status.warn, .status.delayed {
  border-color: var(--aryvor-warning) !important;
  color: var(--aryvor-warning-text) !important;
  background: rgba(185,155,87,.16) !important;
}
.status.critical, .status-critical, .status.no {
  border-color: var(--aryvor-danger) !important;
  color: var(--aryvor-danger-text) !important;
  background: rgba(155,95,87,.16) !important;
}

/* Inputs — excludes checkbox/radio, which are unrelated toggle controls
   with their own styling below; matching them here too would let this
   rule's !important background hide their checked-state colour. */
input:not([type="checkbox"], [type="radio"]), select, textarea, .settings-select, .cadm-input {
  background: var(--aryvor-surface) !important;
  border: 1px solid var(--aryvor-border) !important;
  color: var(--aryvor-text) !important;
  padding: 0 11px;
  font-family: "IBM Plex Mono", monospace;
  font-size: 13px;
}
input:not([type="checkbox"], [type="radio"]):focus, select:focus, textarea:focus, .settings-select:focus, .cadm-input:focus {
  border-color: var(--aryvor-primary-hi) !important;
  outline: 0;
}
input::placeholder, textarea::placeholder { color: var(--aryvor-faint); }

/* Checkboxes — bare, unstyled inputs only.
   Sizing/layout stay on :where() (zero specificity) so a rule that hides
   the native control for a custom toggle switch (e.g. ".toggle input {
   display: none }") always wins and isn't fought back to visible.
   Background/border are real (specificity + !important) because the
   generic text-input rule above is itself !important and — being a bare
   "input" selector — matches checkboxes too; without matching weight here
   the checked-state fill would be silently discarded, and every checkbox
   would look identically "off" whether checked or not. Any bespoke
   checkbox skin elsewhere in the app already pairs a class with
   input[type="checkbox"] (higher specificity) and its own !important on
   these same properties, so it still overrides this correctly. */
:where(input[type="checkbox"]) {
  appearance: none;
  -webkit-appearance: none;
  width: 15px;
  height: 15px;
  min-width: 15px;
  min-height: 15px;
  padding: 0;
  display: inline-grid;
  place-content: center;
  cursor: pointer;
}
input[type="checkbox"] {
  background: transparent !important;
  border: 1px solid var(--aryvor-border-strong) !important;
}
input[type="checkbox"]:checked {
  background: var(--aryvor-success) !important;
  border-color: var(--aryvor-success) !important;
}
input[type="checkbox"]:checked::after {
  content: "✓";
  font-size: 10px;
  font-weight: 700;
  line-height: 1;
  color: #0A0A09;
}

/* ───────── Login overlay ───────── */

.login-overlay {
  background:
    linear-gradient(var(--aryvor-elevated) 1px, transparent 1px) 0 0 / 64px 64px,
    linear-gradient(90deg, var(--aryvor-elevated) 1px, transparent 1px) 0 0 / 64px 64px,
    var(--aryvor-canvas) !important;
  background-color: var(--aryvor-canvas) !important;
  backdrop-filter: none !important;
}

.login-global-controls select,
.login-global-controls .theme-toggle {
  min-height: 28px !important;
  padding: 0 9px !important;
  border: 1px solid var(--aryvor-border) !important;
  background: transparent !important;
  color: var(--aryvor-muted) !important;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.1em;
}

.login-card {
  width: 372px !important;
  padding: 30px 32px !important;
  gap: 20px !important;
  background: var(--aryvor-elevated) !important;
  border: 1px solid var(--aryvor-border) !important;
}

.login-brand { gap: 10px; font-size: 17px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }
.login-brand-icon { width: 26px !important; height: 26px !important; background: transparent !important; }
.login-brand-icon img { width: 100%; height: 100%; }

.login-card h2 {
  font-size: 22px !important;
  font-weight: 600 !important;
  letter-spacing: 0.06em;
  text-transform: uppercase;
}

.login-card label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px !important;
  letter-spacing: 0.14em;
  color: var(--aryvor-muted) !important;
  gap: 5px !important;
}

.login-card input[type="email"],
.login-card input[type="password"] {
  min-height: 40px !important;
  padding: 0 12px !important;
  font-size: 12px !important;
  font-family: "IBM Plex Mono", monospace;
}

.login-card .primary-action {
  min-height: 42px !important;
  width: 100%;
  font-size: 13px !important;
  letter-spacing: 0.14em !important;
}

.login-error {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px !important;
  border: 1px solid var(--aryvor-danger) !important;
  background: rgba(155,95,87,.16) !important;
  color: var(--aryvor-danger-text) !important;
}

.login-hint {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px !important;
  letter-spacing: 0.02em;
  line-height: 1.75 !important;
  color: var(--aryvor-faint) !important;
}

/* ───────── Select-project overlay ───────── */

.commessa-overlay { background: var(--aryvor-canvas) !important; }
.commessa-page { max-width: 1180px !important; }

.commessa-page-header {
  height: 60px;
  padding: 0 !important;
  border-bottom: 1px solid var(--aryvor-border) !important;
  margin-bottom: 26px !important;
}

.commessa-brand { gap: 10px; font-size: 15px; font-weight: 700; letter-spacing: 0.14em; text-transform: uppercase; }

.commessa-page-title {
  font-size: 26px !important;
  font-weight: 600 !important;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  margin-bottom: 18px !important;
}

.commessa-view-toggle { border: 1px solid var(--aryvor-border) !important; background: transparent !important; padding: 0 !important; gap: 0 !important; }
.commessa-toggle-btn { width: 26px; height: 26px; font-size: 12px !important; color: var(--aryvor-muted) !important; }
.commessa-toggle-btn.active { background: var(--aryvor-text) !important; color: #0A0A09 !important; }

.commessa-language-select {
  border: 1px solid var(--aryvor-border) !important;
  background: transparent !important;
  color: var(--aryvor-muted) !important;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
}

.commessa-grid { gap: 10px !important; }

.commessa-card {
  background: var(--aryvor-elevated) !important;
  border: 1px solid var(--aryvor-border) !important;
  border-top: 2px solid var(--aryvor-border) !important;
  padding: 16px !important;
}
.commessa-card:hover { border-color: var(--aryvor-border); border-top-color: var(--aryvor-primary-hi) !important; }

.commessa-card-logo, .commessa-list-logo {
  background: var(--aryvor-primary) !important;
  color: #0A0A09 !important;
  font-family: "IBM Plex Mono", monospace;
}

.commessa-card-job {
  font-family: "IBM Plex Mono", monospace;
  color: var(--aryvor-faint) !important;
}

.commessa-card-body h3 { font-size: 14px !important; font-weight: 600; letter-spacing: 0.02em; }
.commessa-card-desc { color: var(--aryvor-muted) !important; }

.commessa-card-progress { display: flex; flex-direction: column; gap: 6px; margin-top: 12px; }
.commessa-card-progress-label {
  display: flex;
  justify-content: space-between;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.06em;
  color: var(--aryvor-faint);
}
.commessa-card-progress-label span:last-child { color: var(--aryvor-text); }
.commessa-card-progress-track { display: block; height: 4px; background: var(--aryvor-surface-2); }
.commessa-card-progress-fill { display: block; height: 100%; }

.commessa-list-row {
  background: var(--aryvor-elevated) !important;
  border: 1px solid var(--aryvor-border) !important;
}
.commessa-list-row:hover { border-color: var(--aryvor-primary-hi) !important; }

/* ───────── Sidebar nav — active item accent per mockup spec ───────── */
.tree a.selected {
  border-left: 2px solid var(--aryvor-primary-hi) !important;
  background: var(--aryvor-surface-2) !important;
}
.tree a.selected .nav-svg { color: var(--aryvor-primary-hi) !important; }

.project-switch-logo { background: var(--aryvor-primary) !important; color: #0A0A09 !important; }
.avatar { background: var(--aryvor-secondary) !important; color: #0A0A09 !important; font-weight: 700; }

/* ───────── Dashboard — "1A Console" mockup ───────── */

.dash-forecast-panel {
  background: var(--aryvor-primary) !important;
  border: 0 !important;
  color: #0A0A09 !important;
}
.dash-forecast-panel .dash-panel-title { color: #0A0A09 !important; }
.dash-forecast-date { color: #0A0A09; }
.dash-forecast-pill { border-color: rgba(10,10,9,.4) !important; color: #0A0A09 !important; }
.dash-forecast-stats div { color: rgba(10,10,9,.7) !important; }
.dash-forecast-stats b { color: #0A0A09 !important; }

.dash-card, .dash-scurve-panel, .dash-forecast-panel {
  background: var(--aryvor-elevated);
  border: 1px solid var(--aryvor-border);
  padding: 18px 20px;
}
.dash-panel-title {
  font-family: "Chakra Petch", sans-serif;
  font-size: 12px !important;
  font-weight: 600;
  letter-spacing: 0.14em;
  text-transform: uppercase;
  color: var(--aryvor-mono-hi);
}
.dash-panel-sub {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px !important;
  letter-spacing: 0.08em;
  color: var(--aryvor-faint) !important;
}

.act-bar-list { display: flex; flex-direction: column; gap: 13px; margin-top: 14px; }
.act-bar-row {
  display: grid;
  grid-template-columns: 1fr 46px minmax(80px, 200px) 56px;
  align-items: center;
  gap: 12px;
}
.act-bar-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--aryvor-muted);
  text-transform: uppercase;
}
.act-bar-value { font-size: 17px; font-weight: 600; font-variant-numeric: tabular-nums; text-align: right; }
.act-bar-track { height: 8px; background: var(--aryvor-surface-2); position: relative; display: block; }
.act-bar-fill { position: absolute; left: 0; top: 0; bottom: 0; }
.act-bar-tick { position: absolute; top: -3px; bottom: -3px; width: 1px; background: var(--aryvor-text); }
.act-bar-delta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  text-align: right;
}

.area-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; margin-top: 14px; }
.area-tile { border: 1px solid var(--aryvor-border); padding: 12px 14px; display: flex; flex-direction: column; justify-content: space-between; gap: 14px; min-height: 76px; }
.area-tile-label {
  font-family: "IBM Plex Mono", monospace;
  font-size: 11px;
  letter-spacing: 0.06em;
  color: var(--aryvor-muted);
  text-transform: uppercase;
}
.area-tile-row { display: flex; align-items: flex-end; justify-content: space-between; }
.area-tile-pct { font-size: 28px; font-weight: 600; line-height: 1; font-variant-numeric: tabular-nums; }
.area-tile-delta { font-family: "IBM Plex Mono", monospace; font-size: 11px; }

/* ───────── Sticky module/table headers and filter bars ─────────
   These rely on `background: inherit` from their parent .module in
   styles.css, which only works if every element between them and .module
   also passes the background through — one plain wrapper div anywhere in
   that chain (default transparent) breaks it silently. Setting the
   background directly here removes that fragility: scrolled content no
   longer shows through a sticky header/filter bar. */
.module-header, .ops-filters, .workflow-rule-banner, .topology-legend {
  background: var(--aryvor-elevated) !important;
}

/* ───────── Tables (.ops-table and friends) — shared across most operational views ───────── */

.workflow-table thead th, table thead th {
  /* Opaque, not transparent: these headers are position:sticky, so a
     transparent background lets scrolled-under rows show through and
     overlap the header text once the table scrolls. */
  background: var(--aryvor-elevated) !important;
  border-bottom: 1px solid var(--aryvor-border-strong) !important;
  color: var(--aryvor-dim) !important;
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px !important;
  letter-spacing: 0.12em;
  text-transform: uppercase;
  padding: 10px 9px !important;
}
.workflow-table tbody td, table tbody td, .ops-table td {
  border-bottom: 1px solid var(--aryvor-surface-2);
}
/* The light-theme leftover pink selected-row was never given a dark
   counterpart — falls back to the mockup's selection blue (#141B2A) now. */
.equipment-row.is-selected td, .workflow-row.is-selected td {
  background: var(--aryvor-row-selected) !important;
  box-shadow: none !important;
}

.cland-enter-btn {
  background: var(--aryvor-primary) !important;
  color: #0A0A09 !important;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px !important;
  font-weight: 700;
  letter-spacing: 0.1em;
  text-transform: uppercase;
  padding: 9px 13px !important;
}
.cland-enter-btn:hover { background: var(--aryvor-primary-hi) !important; opacity: 1 !important; }

.cland-admin-toggle {
  border: 1px solid var(--aryvor-border-strong) !important;
  background: transparent !important;
  color: var(--aryvor-muted) !important;
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px !important;
  letter-spacing: 0.1em;
  text-transform: uppercase;
}
.cland-admin-toggle:hover { border-color: var(--aryvor-primary-hi) !important; color: var(--aryvor-text) !important; background: var(--aryvor-surface-2) !important; }

/* ───────── Modals / popups (#appModal and its domain-specific bodies) ───────── */

.modal {
  border: 1px solid var(--aryvor-border-strong) !important;
  background: var(--aryvor-elevated) !important;
  color: var(--aryvor-text) !important;
}
.modal::backdrop { background: rgba(5,5,5,.76) !important; }

.modal-head {
  padding-bottom: 14px;
  margin-bottom: 16px !important;
  border-bottom: 1px solid var(--aryvor-border);
}
.modal-head h2 {
  font-size: 14px !important;
  font-weight: 600 !important;
  letter-spacing: 0.04em;
  text-transform: uppercase;
}

.icon-btn {
  border: 1px solid var(--aryvor-border);
  background: transparent;
  color: var(--aryvor-muted);
}
.icon-btn:hover {
  border-color: var(--aryvor-primary-hi);
  color: var(--aryvor-text);
  background: var(--aryvor-surface-2);
}

/* Footer action rows across the many modal bodies (operational-record-actions,
   operational-edit-actions, import-editor-actions, qhse-form > .modal-actions,
   ...) already share this same border-top + flex-end pattern — buttons inside
   inherit the primary/secondary styling fixed above. */
.operational-record-actions, .operational-edit-actions, .import-editor-actions,
.modal-actions, .qc-modal-actions {
  border-top: 1px solid var(--aryvor-border) !important;
}

/* ───────── Operational data views (Equipment, Trays, Pulling, Terminations, Testing, Grounding) ───────── */

.hero-copy .eyebrow, #viewEyebrow {
  font-family: "IBM Plex Mono", monospace;
  color: var(--aryvor-primary-hi);
}
.hero-copy h1, #viewTitle {
  font-size: 18px !important;
  font-weight: 600 !important;
  text-transform: none;
  letter-spacing: 0.01em;
}
.hero-copy p, #viewSubtitle {
  color: var(--aryvor-muted);
  font-size: 12px;
}

.ops-filters, .panel-toolbar {
  border-bottom: 1px solid var(--aryvor-border);
}
.ops-filters select, .ops-filters input, .panel-toolbar select, .panel-toolbar input {
  font-size: 12px;
}

.readonly-banner {
  background: rgba(185,155,87,.12) !important;
  border: 1px solid var(--aryvor-warning) !important;
  color: var(--aryvor-warning-text) !important;
}

/* ───────── Quality & Energization ─────────
   Most of this area (.qc-execution-intro, .energization-blocker-row,
   .sld-wire, .sld-toolbar, ...) already reads var(--accent)/var(--ok)/
   var(--warn)/var(--critical)/var(--line) directly, so it already
   inherited the new palette from the root token update — only the couple
   of stray hard-coded values below needed a direct fix. */
.sld-viewport { border-radius: 0 !important; }

.sld-tool-group > label, .sld-zoom {
  font-family: "IBM Plex Mono", monospace;
}
.energization-blocker-main strong, .energization-blocker-main small {
  font-family: "IBM Plex Mono", monospace;
}
.qc-plan-ref, .qc-acceptance, .qc-step-meta {
  font-family: "IBM Plex Mono", monospace;
  font-size: 9px !important;
  letter-spacing: 0.06em;
}

/* ───────── Planning (Control Tower, Constraints, Weekly Commitments) ─────────
   Already mostly var(--ink)/var(--muted)/var(--line)-driven, so it already
   inherited the new palette. Fixes here are the few remaining hard-coded
   accent/border hex values and the missing mono typography on labels. */
.v3-version {
  color: var(--aryvor-primary-hi) !important;
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.14em;
}
.v3-kpi > span { font-family: "IBM Plex Mono", monospace; letter-spacing: 0.1em; }
.v3-kpi strong { font-family: "Chakra Petch", sans-serif; font-variant-numeric: tabular-nums; }
.v3-kpi small { font-family: "IBM Plex Mono", monospace; }
.v3-kpi.success { border-color: var(--aryvor-success) !important; background: rgba(110,143,107,.1) !important; }
.v3-kpi.danger { border-color: var(--aryvor-danger) !important; background: rgba(155,95,87,.1) !important; }

.v3-info-banner > span { background: var(--aryvor-primary) !important; color: #0A0A09 !important; }

.v3-tabs { background: var(--aryvor-surface-2) !important; border-color: var(--aryvor-border) !important; }
.v3-tabs button {
  font-family: "IBM Plex Mono", monospace;
  font-size: 10px;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.v3-tabs button.active { background: var(--aryvor-primary) !important; color: #0A0A09 !important; }

.v3-table th {
  font-family: "IBM Plex Mono", monospace;
  background: transparent !important;
  border-bottom: 1px solid var(--aryvor-border-strong) !important;
}

.v3-system-card > header > b { font-family: "Chakra Petch", sans-serif; font-variant-numeric: tabular-nums; }
.v3-system-card > .readiness-meter { background: var(--aryvor-surface-2); }

/* border-left carries the impact colour (.impact-critical/-high/-low) —
   only touch the other three sides plus background here. */
.constraint-card {
  border-top: 1px solid var(--aryvor-border) !important;
  border-right: 1px solid var(--aryvor-border) !important;
  border-bottom: 1px solid var(--aryvor-border) !important;
  background: var(--aryvor-elevated) !important;
}
.constraint-score { font-family: "IBM Plex Mono", monospace; }
.quick-filter { font-family: "IBM Plex Mono", monospace; font-size: 10px; letter-spacing: 0.08em; text-transform: uppercase; }
.quick-filter.active { background: var(--aryvor-primary) !important; color: #0A0A09 !important; border-color: var(--aryvor-primary) !important; }

/* ───────── Work queue / Quick plan ─────────
   .wq-plan-status and .wq-confidence were never given a dark-theme
   variant (a pre-existing gap, not something introduced by this pass) —
   both hard-code a pale-yellow/cream light-mode palette with no override
   anywhere, so they'd render as bright light pills against the dark app. */
.wq-day-kicker { color: var(--aryvor-primary-hi) !important; font-family: "IBM Plex Mono", monospace; }
.wq-crew-dot { background: var(--aryvor-primary-hi) !important; }

.wq-plan-status {
  font-family: "IBM Plex Mono", monospace;
  color: var(--aryvor-warning-text) !important;
  background: rgba(185,155,87,.16) !important;
  border: 1px solid var(--aryvor-warning);
}
.wq-plan-status.published {
  color: var(--aryvor-success-text) !important;
  background: rgba(110,143,107,.16) !important;
  border: 1px solid var(--aryvor-success);
}

.wq-confidence {
  font-family: "IBM Plex Mono", monospace;
  color: var(--aryvor-danger-text) !important;
  background: rgba(155,95,87,.16) !important;
}
.wq-confidence.medium {
  color: var(--aryvor-warning-text) !important;
  background: rgba(185,155,87,.16) !important;
}
.wq-confidence.high {
  color: var(--aryvor-success-text) !important;
  background: rgba(110,143,107,.16) !important;
}

.workflow-kpis span { font-family: "IBM Plex Mono", monospace; letter-spacing: 0.08em; }
.workflow-kpis strong { font-family: "Chakra Petch", sans-serif; font-variant-numeric: tabular-nums; }

/* ───────── Materials / Logistics ─────────
   Same pre-existing gap as .wq-plan-status: .mat-alert-badge hard-codes a
   pale light-mode background per status, with only .open/.ack patched to
   transparent by an earlier dark pass — .resolved was missed entirely.
   .mat-warn/.mat-critical also share the exact same red, so "warning"
   never reads as distinct from "critical". */
.mat-alert-count { background: var(--aryvor-danger) !important; color: #0A0A09 !important; }
.mat-alert-badge {
  font-family: "IBM Plex Mono", monospace;
  border: 1px solid currentColor;
  background: transparent !important;
}
.mat-alert-badge.open     { color: var(--aryvor-danger-text) !important; }
.mat-alert-badge.ack      { color: var(--aryvor-warning-text) !important; }
.mat-alert-badge.resolved { color: var(--aryvor-success-text) !important; }

.mat-ok       { color: var(--aryvor-success-text) !important; }
.mat-warn     { color: var(--aryvor-warning-text) !important; }
.mat-critical { color: var(--aryvor-danger-text) !important; font-weight: 600; }

/* ───────── Reports (Daily / Weekly) ─────────
   Already has a full dark-mode pass (correct hover states, distinct
   warn/critical tones) from an earlier era — only typography was left on
   the system default instead of the new type pair. */
.rpt-tab, .rpt-section-num, .rpt-kpi span, .rpt-date-label small {
  font-family: "IBM Plex Mono", monospace;
}
.rpt-kpi strong { font-family: "Chakra Petch", sans-serif; font-variant-numeric: tabular-nums; }
.rpt-table th { font-family: "IBM Plex Mono", monospace; font-size: 9px !important; letter-spacing: 0.08em; text-transform: uppercase; }
.rpt-num { font-family: "IBM Plex Mono", monospace; font-variant-numeric: tabular-nums; }

/* ───────── Admin (Project management, Users & roles, Plants & areas,
   Supervisor mapping, Collaboration, Import XLSX/CSV) ─────────
   Mostly already var(--ink)/var(--muted)/var(--line)-driven and so already
   inherited the palette; a couple of unscoped light-only leftovers and
   missing typography needed a direct fix. */
.cadm-project-logo {
  background: var(--aryvor-secondary) !important;
  color: #0A0A09 !important;
}
.cadm-card-header h3 small, .ctr-detail-label, .cadm-section > strong {
  font-family: "IBM Plex Mono", monospace;
  letter-spacing: 0.08em;
}
.cadm-user-toggle small { font-family: "IBM Plex Mono", monospace; }
.ctr-dot-lg { border: 1px solid var(--aryvor-border); }