/* ═══════════════════════════════════════════════════════════════════════════
   UHI OS — NAVY DESIGN SYSTEM (v1)
   One enterprise theme for the whole console (owner-approved palette, in the
   style of IBM Maximo / SAP EAM / ServiceNow):

     Primary Navy   #0F2747      Navy Hover    #183A63
     Page BG        #F5F7FA      Card BG       #FFFFFF
     Border         #D9E2EC      Text          #1F2937 / #6B7280
     Success        #16A34A      Warning       #D97706      Error #DC2626

   HOW IT WORKS — token override, not a rewrite. The console is already
   variable-driven (ui-system.css --color-* tokens; styles.css --uhi-red family;
   wo2 --wo2-* vars). This file loads LAST and re-points those tokens, then adds
   the component rules tokens can't reach (navy-filled card headers in Service,
   fixed stage colors, unified status pills). Removing this file restores the
   previous red theme untouched.
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
  /* ui-system.css token remap */
  --color-brand: #0F2747;
  --color-brand-hover: #183A63;
  --color-bg-subtle: #F5F7FA;
  --color-bg-hover: #EDF1F6;
  --color-border: #D9E2EC;
  --color-border-strong: #C4D2E0;
  --color-border-soft: #E7EDF4;
  --color-text: #1F2937;
  --color-text-secondary: #6B7280;
  --color-text-tertiary: #8A94A3;
  --color-success: #16A34A; --color-success-soft: #E9F7EE;
  --color-warning: #D97706; --color-warning-soft: #FCF3E4;
  --color-danger:  #DC2626; --color-danger-soft:  #FCECEC;
  --color-info:    #0F2747; --color-info-soft:    #E8EEF6;
  --focus-ring: 0 0 0 3px rgba(15, 39, 71, .18);

  /* legacy red family → navy (30+ usages across styles.css pick this up) */
  --uhi-red: #0F2747;
  --uhi-red-soft: #E8EEF6;
  --uhi-red-line: #C9D6E8;

  /* Navy DS named tokens for new work */
  --navy: #0F2747;
  --navy-hover: #183A63;
  --navy-soft: #E8EEF6;
  --navy-line: #C9D6E8;
}

/* page ground */
body { background: #F5F7FA; }

/* ── Chrome: light bar, navy identity ─────────────────────────────────────── */
.crm-tab.active { background: var(--navy-soft); color: var(--navy); }
.crm-tab.active .crm-tab-emoji { filter: grayscale(1) brightness(.4); }
.uhi-side-link.active,
.uhi-side-link.active:hover { background: var(--navy-soft); color: var(--navy); }

/* ── Buttons (rule 5): primary navy · secondary white/navy border · danger red ── */
.ui-btn--primary { background: var(--navy); border-color: var(--navy); color: #fff; }
.ui-btn--primary:hover { background: var(--navy-hover); border-color: var(--navy-hover); }
.svc-wf-primary { background: var(--navy); }
.svc-wf-primary:hover { background: var(--navy-hover); }
.ui-btn:not(.ui-btn--primary):not(.ui-btn--danger) { border-color: var(--navy-line); }

/* ── Service detail (WO2): navy-filled section headers, white text (rule 3) ── */
.wo2-page {
  --wo2-brand: #0F2747;
  --wo2-brand-soft: #E8EEF6;
  --wo2-line: #D9E2EC;
  --wo2-ink: #1F2937;
  --wo2-muted: #6B7280;
  --wo2-faint: #8A94A3;
  --wo2-ok: #16A34A; --wo2-ok-bg: #E9F7EE;
  --wo2-info: #0F2747; --wo2-info-bg: #E8EEF6;
  --wo2-warn: #D97706; --wo2-warn-bg: #FCF3E4;
}
.wo2-sh { background: var(--navy); border-bottom-color: var(--navy); border-radius: 10px 10px 0 0; }
.wo2-sh h2 { color: #fff; }
.wo2-sh .wo2-hint { color: rgba(255,255,255,.72); }
.wo2-step { background: rgba(255,255,255,.16); color: #fff; }
.wo2-state { background: rgba(255,255,255,.14); color: #fff; }
.wo2-state--done { background: rgba(255,255,255,.92); color: var(--wo2-ok); }
.wo2-state--active { background: rgba(255,255,255,.92); color: var(--navy); }
.wo2-pill { background: rgba(255,255,255,.92); color: var(--wo2-warn); margin-left: auto; }

/* stage strip (rule 2): navy = current · green = done · grey = pending */
.wo2-stage.is-active { border-color: var(--navy); box-shadow: 0 0 0 1px var(--navy); }
.wo2-stage.is-active .wo2-stage__dot { background: var(--navy); border-color: var(--navy); }

/* AI Service Advisor (rule 8): the most recognizable card — navy identity bar */
.wo2-advisor { border-color: var(--navy-line); }
.wo2-advisor__head { background: var(--navy); border-bottom-color: var(--navy); color: #fff; }
.wo2-advisor__head b { color: #fff; letter-spacing: .04em; text-transform: uppercase; font-size: 11.5px; }
.wo2-advisor__spark { background: #fff; }
.wo2-advisor__badge { background: rgba(255,255,255,.14); border-color: rgba(255,255,255,.3); color: #fff; }

/* modals inherit the same header language */
.ui-modal__head { background: var(--navy); border-radius: var(--radius-md) var(--radius-md) 0 0; }
.ui-modal__head h3, .ui-modal__head p { color: #fff; }
.ui-modal__head .ui-btn--icon { color: #fff; border-color: rgba(255,255,255,.35); background: transparent; }

/* legacy service workflow accents still on screen elsewhere (PDI, hero, bars) */
.svc-wf-hero { background: var(--navy); }
.svc-wf-step.is-current { border-color: var(--navy); color: var(--navy); }
.svc-wf-step.is-current span { background: var(--navy); color: #fff; }

/* focus visibility on navy surfaces */
.wo2-sh :focus-visible, .wo2-advisor__head :focus-visible, .ui-modal__head :focus-visible { outline: 2px solid #fff; outline-offset: 2px; }