/* ============================================================================
   HIKMA Design System v3 — Class-A polish layer
   ============================================================================
   Loads AFTER hikma-design-system.css (v2). Cascade-only — does not modify v2.
   Trivial rollback: remove the <link> tag in pages.

   Goals:
   - Replace per-page rainbow drawer with a calm, monochrome action bar.
   - Restate accent as emerald (#059669); preserve clinical-blue as alias.
   - Provide a single Lucide-based icon system used by sidebar + drawer + content.
   - Add focus-visible, motion, surface-scale, and text-hierarchy tokens.
   - Give every interactive element four states (default / hover / active /
     focus-visible).
   - Stay 100% additive: pages opt in by adopting the new classes; legacy
     classes keep working until each page is migrated.

   Author: 2026-04-26.  No backend dependencies. Pure presentation.
   ============================================================================ */


/* ── Tokens ────────────────────────────────────────────────────────────────── */

:root {
  /* Brand — emerald accent replaces clinical-blue as primary CTA color */
  --hk-emerald-700:   #047857;
  --hk-emerald-600:   #059669;       /* PRIMARY ACCENT */
  --hk-emerald-500:   #10b981;
  --hk-emerald-100:   #d1fae5;
  --hk-emerald-50:    #ecfdf5;

  /* Reassign the canonical accent token to emerald.
     Keep --hk-accent-blue as an alias so anywhere that genuinely wants the
     clinical blue can keep referencing it. */
  --hk-accent-blue:       #1d6faf;
  --hk-accent-blue-hover: #155f97;
  --hk-accent:            var(--hk-emerald-600);
  --hk-accent-hover:      var(--hk-emerald-700);
  --hk-accent-soft:       var(--hk-emerald-50);
  --hk-accent-on:         #ffffff;

  /* Navy — preserved from v2 for sidebar/header continuity, with deeper tint */
  --hk-navy-900:      #0b1e36;
  --hk-navy-800:      #112849;
  --hk-navy-700:      #1b3a6b;       /* matches existing --hk-navy */
  --hk-navy-600:      #224e8a;
  --hk-navy-100:      #e8eef7;
  --hk-navy-50:       #f4f7fb;

  /* Surface scale (light theme) */
  --hk-surface-0:     #ffffff;       /* cards, modals */
  --hk-surface-1:     #f8fafc;       /* page background */
  --hk-surface-2:     #f1f5f9;       /* inset, table head */
  --hk-surface-3:     #e8eef7;       /* deeper inset */

  /* Borders */
  --hk-border-subtle:  #e2e8f0;
  --hk-border-default: #cbd5e1;
  --hk-border-strong:  #94a3b8;

  /* Text hierarchy */
  --hk-text-primary:   #0f172a;
  --hk-text-secondary: #475569;
  --hk-text-muted:     #64748b;
  --hk-text-faint:     #94a3b8;
  --hk-text-on-dark:   #ffffff;

  /* Status — clinical severity (re-state with light backgrounds for chips) */
  --hk-critical:       #b42318;
  --hk-critical-bg:    #fef2f2;
  --hk-warning:        #b45309;
  --hk-warning-bg:     #fffbeb;
  --hk-success:        #059669;
  --hk-success-bg:     #ecfdf5;
  --hk-info:           #1d4ed8;
  --hk-info-bg:        #eff6ff;
  --hk-neutral:        #475569;
  --hk-neutral-bg:     #f1f5f9;

  /* Spacing scale */
  --hk-s-1:  4px;
  --hk-s-2:  8px;
  --hk-s-3:  12px;
  --hk-s-4:  16px;
  --hk-s-5:  20px;
  --hk-s-6:  24px;
  --hk-s-8:  32px;
  --hk-s-10: 40px;
  --hk-s-12: 48px;

  /* Radius */
  --hk-r-sm:  4px;
  --hk-r-md:  6px;
  --hk-r-lg:  8px;
  --hk-r-xl:  12px;
  --hk-r-2xl: 16px;
  --hk-r-pill: 999px;

  /* Shadow */
  --hk-shadow-1: 0 1px 2px rgba(15, 23, 42, .05);
  --hk-shadow-2: 0 1px 3px rgba(15, 23, 42, .08), 0 1px 2px rgba(15, 23, 42, .04);
  --hk-shadow-3: 0 4px 12px rgba(15, 23, 42, .08), 0 2px 4px rgba(15, 23, 42, .04);
  --hk-shadow-4: 0 12px 32px rgba(15, 23, 42, .12), 0 4px 8px rgba(15, 23, 42, .06);

  /* Motion */
  --hk-motion-fast:  120ms;
  --hk-motion-base:  180ms;
  --hk-motion-slow:  280ms;
  --hk-ease:         cubic-bezier(.2, .8, .3, 1);

  /* Focus ring (consistent across every interactive element) */
  --hk-focus-ring: 0 0 0 2px var(--hk-surface-0), 0 0 0 4px var(--hk-emerald-600);
}

@media (prefers-reduced-motion: reduce) {
  :root {
    --hk-motion-fast:  1ms;
    --hk-motion-base:  1ms;
    --hk-motion-slow:  1ms;
  }
}


/* ── Lucide icon utility ────────────────────────────────────────────────────
   Use:  <svg class="hk-i"><use href="/icons/sprite.svg#home"/></svg>
   Sizes: hk-i (20px default), hk-i-sm (16px), hk-i-lg (24px), hk-i-xl (32px).
   Color follows currentColor — set color on a parent. */

.hk-i {
  width: 20px;
  height: 20px;
  flex-shrink: 0;
  stroke-width: 1.75;       /* slightly lighter than Lucide default for clinical calm */
  vertical-align: middle;
  pointer-events: none;
}
.hk-i-sm { width: 16px; height: 16px; }
.hk-i-lg { width: 24px; height: 24px; }
.hk-i-xl { width: 32px; height: 32px; }

/* When inside a navy/dark context, the icon's stroke is white via currentColor */
.hk-on-dark .hk-i,
.hk-sidebar .hk-i { color: inherit; }


/* ── Focus-visible primitive ────────────────────────────────────────────────
   Use .hk-focusable on any interactive element that needs a consistent ring.
   Also auto-applies to standard interactive elements within .hk-scope. */

.hk-focusable:focus-visible,
.hk-scope a:focus-visible,
.hk-scope button:focus-visible,
.hk-scope [role="button"]:focus-visible,
.hk-scope input:focus-visible,
.hk-scope select:focus-visible,
.hk-scope textarea:focus-visible {
  outline: none;
  box-shadow: var(--hk-focus-ring);
  border-radius: var(--hk-r-md);
  z-index: 1;
}


/* ── Action Bar — replaces per-page rainbow drawer ──────────────────────────
   Used on every page header. Container can sit inside an existing
   <header class="topbar"> or stand alone. Buttons are monochrome by default;
   .is-active adds an accent underline. NO inline background overrides.

   Markup pattern:
     <nav class="hk-action-bar" aria-label="Workflows">
       <a class="hk-action-btn" href="/intake.html">
         <svg class="hk-i"><use href="/icons/sprite.svg#hospital"/></svg>
         <span>Patient Intake</span>
       </a>
       ...
     </nav>
*/

.hk-action-bar {
  display: flex;
  align-items: stretch;
  gap: 2px;
  flex-wrap: nowrap;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  font-family: inherit;
}
.hk-action-bar::-webkit-scrollbar { display: none; }

.hk-action-btn {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--hk-s-2);
  padding: 8px 14px;
  height: 36px;
  border-radius: var(--hk-r-md);
  background: transparent;
  color: var(--hk-text-on-dark);                 /* on navy header */
  text-decoration: none;
  font-size: 13px;
  font-weight: 500;
  letter-spacing: .01em;
  white-space: nowrap;
  border: 1px solid transparent;
  transition: background var(--hk-motion-fast) var(--hk-ease),
              border-color var(--hk-motion-fast) var(--hk-ease),
              color var(--hk-motion-fast) var(--hk-ease);
  cursor: pointer;
}
.hk-action-btn .hk-i { color: rgba(255, 255, 255, .82); transition: color var(--hk-motion-fast) var(--hk-ease); }

.hk-action-btn:hover {
  background: rgba(255, 255, 255, .10);
  color: #fff;
}
.hk-action-btn:hover .hk-i { color: #fff; }

.hk-action-btn:active {
  background: rgba(255, 255, 255, .16);
}

.hk-action-btn.is-active {
  background: rgba(255, 255, 255, .14);
  color: #fff;
  font-weight: 600;
  box-shadow: inset 0 -2px 0 0 var(--hk-emerald-500);
}
.hk-action-btn.is-active .hk-i { color: var(--hk-emerald-500); }

.hk-action-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px var(--hk-navy-700), 0 0 0 4px var(--hk-emerald-500);
}

/* Light-context variant — used when action bar sits on a white surface */
.hk-action-bar--light .hk-action-btn {
  color: var(--hk-text-secondary);
}
.hk-action-bar--light .hk-action-btn .hk-i { color: var(--hk-text-muted); }
.hk-action-bar--light .hk-action-btn:hover {
  background: var(--hk-navy-50);
  color: var(--hk-text-primary);
}
.hk-action-bar--light .hk-action-btn:hover .hk-i { color: var(--hk-text-primary); }
.hk-action-bar--light .hk-action-btn.is-active {
  background: var(--hk-emerald-50);
  color: var(--hk-emerald-700);
  box-shadow: inset 0 -2px 0 0 var(--hk-emerald-600);
}
.hk-action-bar--light .hk-action-btn.is-active .hk-i { color: var(--hk-emerald-600); }

/* Right-cluster separator — wrap utility-actions (LIVE / Refresh / AR / Logout) */
.hk-action-bar-divider {
  align-self: center;
  width: 1px;
  height: 22px;
  margin: 0 var(--hk-s-3);
  background: rgba(255, 255, 255, .18);
  flex-shrink: 0;
}
.hk-action-bar--light .hk-action-bar-divider { background: var(--hk-border-subtle); }


/* ── HUMAIN AI brand chip — preserves SA wordmark, normalizes shape ─────── */

.hk-humain-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 18px;
  border-radius: var(--hk-r-sm);
  background: linear-gradient(135deg, var(--hk-emerald-600), var(--hk-emerald-700));
  color: #fff;
  font-size: 10px;
  font-weight: 800;
  letter-spacing: .04em;
  margin-inline-end: 2px;
  flex-shrink: 0;
}
.hk-action-bar--light .hk-humain-chip {
  background: linear-gradient(135deg, var(--hk-emerald-500), var(--hk-emerald-600));
}


/* ── Tabs v2 — replaces .tabs/.tab pattern ─────────────────────────────────
   Underline-driven active state, status-aware alert chip, sticky on scroll.
   Drop-in alongside legacy .tabs — pages migrate one at a time. */

.hk-tabs-bar {
  display: flex;
  align-items: stretch;
  gap: 0;
  padding: 0 var(--hk-s-6);
  background: var(--hk-surface-0);
  border-bottom: 1px solid var(--hk-border-subtle);
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  scrollbar-width: none;
  flex-shrink: 0;
  position: relative;
  z-index: 1;
}
.hk-tabs-bar::-webkit-scrollbar { display: none; }

.hk-tab {
  position: relative;
  display: inline-flex;
  align-items: center;
  gap: var(--hk-s-2);
  padding: 12px var(--hk-s-4);
  font-size: 13.5px;
  font-weight: 500;
  color: var(--hk-text-secondary);
  background: transparent;
  border: none;
  cursor: pointer;
  white-space: nowrap;
  font-family: inherit;
  transition: color var(--hk-motion-fast) var(--hk-ease);
  text-decoration: none;
}
.hk-tab .hk-i { color: var(--hk-text-muted); }
.hk-tab:hover { color: var(--hk-text-primary); }
.hk-tab:hover .hk-i { color: var(--hk-text-primary); }

.hk-tab.is-active {
  color: var(--hk-text-primary);
  font-weight: 600;
}
.hk-tab.is-active::after {
  content: "";
  position: absolute;
  inset-inline: var(--hk-s-3);
  bottom: -1px;
  height: 2px;
  background: var(--hk-emerald-600);
  border-radius: 1px;
}
.hk-tab.is-active .hk-i { color: var(--hk-emerald-600); }

.hk-tab:focus-visible {
  outline: none;
  box-shadow: var(--hk-focus-ring);
  border-radius: var(--hk-r-sm);
}

/* Alert chip on a tab (e.g., "Alerts 67") */
.hk-tab-chip {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--hk-r-pill);
  background: var(--hk-neutral-bg);
  color: var(--hk-neutral);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-inline-start: 4px;
}
.hk-tab-chip.is-critical { background: var(--hk-critical-bg);  color: var(--hk-critical); }
.hk-tab-chip.is-warning  { background: var(--hk-warning-bg);   color: var(--hk-warning); }
.hk-tab-chip.is-success  { background: var(--hk-success-bg);   color: var(--hk-success); }
.hk-tab-chip.is-info     { background: var(--hk-info-bg);      color: var(--hk-info); }


/* ── Status chip — neutral surface, colored dot ─────────────────────────────
   Replaces saturated-background pills (e.g., "Deterioration"). The chip
   itself is neutral; severity is communicated by a 8px colored dot. */

.hk-chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px 3px 8px;
  border-radius: var(--hk-r-pill);
  background: var(--hk-neutral-bg);
  color: var(--hk-text-primary);
  font-size: 11.5px;
  font-weight: 600;
  letter-spacing: .01em;
  white-space: nowrap;
  border: 1px solid var(--hk-border-subtle);
}
.hk-chip-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hk-neutral);
  flex-shrink: 0;
}
.hk-chip.is-critical .hk-chip-dot { background: var(--hk-critical); }
.hk-chip.is-warning  .hk-chip-dot { background: var(--hk-warning); }
.hk-chip.is-success  .hk-chip-dot { background: var(--hk-success); }
.hk-chip.is-info     .hk-chip-dot { background: var(--hk-info); }

/* Solid variant — for in-cell flags where dot would be too quiet */
.hk-chip--solid.is-critical { background: var(--hk-critical-bg); color: var(--hk-critical); border-color: transparent; }
.hk-chip--solid.is-warning  { background: var(--hk-warning-bg);  color: var(--hk-warning);  border-color: transparent; }
.hk-chip--solid.is-success  { background: var(--hk-success-bg);  color: var(--hk-success);  border-color: transparent; }
.hk-chip--solid.is-info     { background: var(--hk-info-bg);     color: var(--hk-info);     border-color: transparent; }


/* ── Buttons v3 — primary / secondary / ghost / destructive ─────────────── */

.hk-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: var(--hk-s-2);
  padding: 8px 14px;
  height: 36px;
  border-radius: var(--hk-r-lg);
  font-family: inherit;
  font-size: 13.5px;
  font-weight: 600;
  letter-spacing: .01em;
  border: 1px solid transparent;
  cursor: pointer;
  white-space: nowrap;
  text-decoration: none;
  transition: background var(--hk-motion-fast) var(--hk-ease),
              border-color var(--hk-motion-fast) var(--hk-ease),
              color var(--hk-motion-fast) var(--hk-ease),
              box-shadow var(--hk-motion-fast) var(--hk-ease);
}
.hk-btn:focus-visible {
  outline: none;
  box-shadow: var(--hk-focus-ring);
}
.hk-btn[disabled],
.hk-btn.is-disabled {
  opacity: .55;
  cursor: not-allowed;
  pointer-events: none;
}

.hk-btn--primary {
  background: var(--hk-emerald-600);
  color: var(--hk-accent-on);
  border-color: var(--hk-emerald-600);
}
.hk-btn--primary:hover { background: var(--hk-emerald-700); border-color: var(--hk-emerald-700); }

.hk-btn--secondary {
  background: var(--hk-surface-0);
  color: var(--hk-text-primary);
  border-color: var(--hk-border-default);
}
.hk-btn--secondary:hover { background: var(--hk-navy-50); border-color: var(--hk-border-strong); }

.hk-btn--ghost {
  background: transparent;
  color: var(--hk-text-primary);
  border-color: transparent;
}
.hk-btn--ghost:hover { background: var(--hk-navy-100); }

.hk-btn--danger {
  background: var(--hk-critical);
  color: #fff;
  border-color: var(--hk-critical);
}
.hk-btn--danger:hover { background: #931c12; border-color: #931c12; }

.hk-btn--sm { height: 30px; padding: 6px 10px; font-size: 12.5px; }
.hk-btn--lg { height: 44px; padding: 10px 18px; font-size: 14.5px; }


/* ── Card v3 — clean polish, no decorative top stripes ────────────────────
   Use .hk-card-v3 to opt in (existing .kpi-card stays untouched until the
   page is migrated). Color is reserved for value text via .is-critical etc. */

.hk-card-v3 {
  background: var(--hk-surface-0);
  border: 1px solid var(--hk-border-subtle);
  border-radius: var(--hk-r-xl);
  padding: var(--hk-s-5);
  box-shadow: var(--hk-shadow-1);
  transition: box-shadow var(--hk-motion-base) var(--hk-ease),
              border-color var(--hk-motion-base) var(--hk-ease),
              transform var(--hk-motion-base) var(--hk-ease);
}
.hk-card-v3.is-clickable { cursor: pointer; }
.hk-card-v3.is-clickable:hover {
  box-shadow: var(--hk-shadow-3);
  border-color: var(--hk-border-default);
  transform: translateY(-1px);
}

.hk-card-v3 .hk-card-label {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  color: var(--hk-text-muted);
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: var(--hk-s-2);
}
.hk-card-v3 .hk-card-value {
  font-size: 30px;
  font-weight: 700;
  line-height: 1.1;
  font-variant-numeric: tabular-nums lining-nums;
  color: var(--hk-text-primary);
  margin: 2px 0 4px;
}
.hk-card-v3.is-critical .hk-card-value { color: var(--hk-critical); }
.hk-card-v3.is-warning  .hk-card-value { color: var(--hk-warning); }
.hk-card-v3.is-success  .hk-card-value { color: var(--hk-success); }
.hk-card-v3 .hk-card-sub {
  font-size: 12.5px;
  color: var(--hk-text-secondary);
  line-height: 1.4;
}


/* ── Empty state primitive ──────────────────────────────────────────────── */

.hk-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  text-align: center;
  padding: var(--hk-s-12) var(--hk-s-6);
  color: var(--hk-text-secondary);
}
.hk-empty .hk-i { color: var(--hk-text-faint); margin-bottom: var(--hk-s-3); }
.hk-empty .hk-empty-title {
  font-size: 15px;
  font-weight: 600;
  color: var(--hk-text-primary);
  margin-bottom: 4px;
}
.hk-empty .hk-empty-sub {
  font-size: 13px;
  max-width: 320px;
  line-height: 1.5;
}


/* ── Skeleton loader (replaces spinners on content blocks) ─────────────── */

.hk-skel {
  display: block;
  background: linear-gradient(90deg,
    var(--hk-surface-2)  0%,
    var(--hk-surface-3) 50%,
    var(--hk-surface-2) 100%);
  background-size: 200% 100%;
  animation: hk-skel-shimmer 1.4s linear infinite;
  border-radius: var(--hk-r-md);
  height: 14px;
  width: 100%;
}
@keyframes hk-skel-shimmer {
  0%   { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}
.hk-skel-block { height: 80px; border-radius: var(--hk-r-xl); }
.hk-skel-line  { height: 12px; }
.hk-skel-line + .hk-skel-line { margin-top: 8px; }


/* ── Sidebar refinements (additive — uses existing .hk-sidebar-* classes) ── */

/* Replace emoji-rendered icon spans in nav items with consistent stroke icons.
   The sidebar already has `.hk-sidebar-link .icon` — we keep it as the carrier
   but neutralize text-rendered emoji and let inline <svg.hk-i> take over. */
.hk-sidebar-link .icon { font-size: 0; }    /* neutralize old emoji glyph */
.hk-sidebar-link .icon .hk-i { font-size: 14px; color: rgba(255, 255, 255, .75); }
.hk-sidebar-link:hover .icon .hk-i { color: #fff; }
.hk-sidebar-link.active .icon .hk-i { color: #fff; }

/* Active item gets an accent-color indicator bar instead of the white border */
.hk-sidebar-link.active {
  border-left-color: var(--hk-emerald-500) !important;
}
[dir="rtl"] .hk-sidebar-link.active {
  border-left: none !important;
  border-right: 3px solid var(--hk-emerald-500) !important;
}

/* Sidebar brand — mark uses emerald accent ring on hover */
.hk-sidebar-brand:hover .hk-sidebar-logo {
  border-color: var(--hk-emerald-500);
  background: rgba(16, 185, 129, .15);
}

/* Logout button — match new btn shape */
.hk-logout-btn {
  border-radius: var(--hk-r-md) !important;
  letter-spacing: .04em;
}


/* ── Topbar refinements ───────────────────────────────────────────────────
   The legacy .topbar / header in pages stays as the structural container.
   These rules tighten typography and spacing without rewriting the markup. */

.topbar,
header.hk-topbar {
  background: var(--hk-navy-800) !important;
  box-shadow: 0 1px 0 rgba(255, 255, 255, .04), 0 2px 6px rgba(0, 0, 0, .25);
}
.topbar .topbar-name,
header.hk-topbar .logo-text {
  letter-spacing: .12em;
}

/* Keep the LIVE indicator legible on the new darker navy */
.live-dot, .hk-live-dot { box-shadow: 0 0 8px rgba(16, 185, 129, .9); background: var(--hk-emerald-500) !important; }
.live-label { color: var(--hk-emerald-500) !important; }


/* ── Override legacy inline-styled drawer buttons ─────────────────────────
   Pages still ship hardcoded `<a class="refresh-btn" style="background:#16a34a">`.
   Until each page is migrated, this rule overrides ALL such inline backgrounds
   with the calm action-btn appearance. The result: if a user loads a not-yet-
   migrated page, they still see the new chrome — no rainbow buttons.

   Note: !important is necessary because the inline style is on the element. */

.refresh-btn[style*="background:#16a34a"],
.refresh-btn[style*="background:#7c3aed"],
.refresh-btn[style*="background:#0e7490"],
.refresh-btn[style*="background:#0891b2"],
.refresh-btn[style*="background:#c2410c"],
.refresh-btn[style*="background:#a16207"],
.refresh-btn[style*="background:#be123c"],
.refresh-btn[style*="background:#7e22ce"],
.refresh-btn[style*="background:#0f766e"],
.refresh-btn[style*="background:#ca8a04"],
.refresh-btn[style*="background:#0369a1"],
.refresh-btn[style*="background:#15803d"],
.refresh-btn[style*="background:#c62828"],
.refresh-btn[style*="background:#1d6faf"] {
  background: rgba(255, 255, 255, .10) !important;
  border-color: rgba(255, 255, 255, .18) !important;
  color: #fff !important;
  font-weight: 500 !important;
  letter-spacing: .01em !important;
  transition: background var(--hk-motion-fast) var(--hk-ease) !important;
}
.refresh-btn[style*="background:"]:hover {
  background: rgba(255, 255, 255, .18) !important;
  border-color: rgba(255, 255, 255, .28) !important;
}

/* Drop the emoji from inline buttons by tightening line-height — the icon
   will be re-introduced as a Lucide <use> when the page is migrated. */


/* ── Critical/Compliance accents — re-tune existing red banners ──────────
   Existing v2 values stay; we just refine the gradient toward the new red. */

:root {
  --hk-cb-red:      var(--hk-critical);
  --hk-cb-red-deep: #7f1d1d;
}


/* ── Tabular numerics scope (additional opt-ins) ────────────────────────── */

.hk-tabular,
.hk-tabular * {
  font-variant-numeric: tabular-nums slashed-zero;
}


/* ── Logical-property guards (RTL-friendly margins) ─────────────────────── */

/* Helper utility classes pages can adopt to drop directional margins.
   Pages still using margin-left/right keep working until migrated. */

.hk-mis-1 { margin-inline-start: var(--hk-s-1); }
.hk-mis-2 { margin-inline-start: var(--hk-s-2); }
.hk-mis-3 { margin-inline-start: var(--hk-s-3); }
.hk-mis-4 { margin-inline-start: var(--hk-s-4); }
.hk-mie-1 { margin-inline-end: var(--hk-s-1); }
.hk-mie-2 { margin-inline-end: var(--hk-s-2); }
.hk-mie-3 { margin-inline-end: var(--hk-s-3); }
.hk-mie-4 { margin-inline-end: var(--hk-s-4); }
.hk-pis-2 { padding-inline-start: var(--hk-s-2); }
.hk-pie-2 { padding-inline-end: var(--hk-s-2); }


/* ── Print: hide all chrome additions ───────────────────────────────────── */

@media print {
  .hk-action-bar,
  .hk-tabs-bar,
  .hk-action-bar-divider { display: none !important; }
}


/* ── Accessibility — high contrast preference ──────────────────────────── */

@media (prefers-contrast: more) {
  :root {
    --hk-border-subtle:  #94a3b8;
    --hk-border-default: #64748b;
    --hk-text-secondary: #1e293b;
    --hk-text-muted:     #334155;
  }
}

/* ── Legacy-class overrides (Phase 2) ────────────────────────────────────
   The pages still ship the original class names (.tabs, .tab, .kpi-card,
   .badge-*, .stage). To avoid rewriting markup across 18 files, we restyle
   those classes here to match the v3 visual language. Specificity is bumped
   one notch (e.g., body .tabs) so this cascade-layer wins against the per-
   page inline <style> blocks. !important is used only where the page sets
   inline values directly on the element. */

/* ─ Tab nav v2 (legacy .tabs/.tab) ──────────────────────────────────── */
body .tabs {
  background: var(--hk-surface-0) !important;
  border-bottom: 1px solid var(--hk-border-subtle) !important;
  box-shadow: none !important;
  padding: 0 var(--hk-s-6);
  gap: 0;
}

body .tabs .tab {
  position: relative;
  color: var(--hk-text-secondary);
  border-bottom: none !important;
  margin-bottom: 0 !important;
  font-weight: 500;
  font-size: 13.5px;
  padding: 12px var(--hk-s-4);
  letter-spacing: .005em;
}
body .tabs .tab:hover {
  color: var(--hk-text-primary);
  background: transparent !important;
}
body .tabs .tab.active {
  color: var(--hk-text-primary) !important;
  border-bottom: none !important;
  font-weight: 600 !important;
}
body .tabs .tab.active::after {
  content: "";
  position: absolute;
  inset-inline: var(--hk-s-3);
  bottom: -1px;
  height: 2px;
  background: var(--hk-emerald-600);
  border-radius: 1px;
  z-index: 1;
}

/* Alert chip on a tab — convert the legacy red pill to a calm tab-chip */
body .tabs .tab #alert-badge,
body .tabs .tab span[id$="-badge"] {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 22px;
  height: 18px;
  padding: 0 6px;
  border-radius: var(--hk-r-pill);
  background: var(--hk-critical-bg);
  color: var(--hk-critical);
  font-size: 11px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  margin-inline-start: 6px;
  border: none;
}
/* If badge is empty, hide it */
body .tabs .tab span[id$="-badge"]:empty { display: none; }


/* ─ KPI card legacy — drop colored top stripe; keep semantic value color ─ */
body .kpi-card {
  border-top: 1px solid var(--hk-border-subtle) !important;
  border: 1px solid var(--hk-border-subtle) !important;
  border-radius: var(--hk-r-xl) !important;
  background: var(--hk-surface-0) !important;
  box-shadow: var(--hk-shadow-1) !important;
  padding: var(--hk-s-4) var(--hk-s-5) !important;
  transition: box-shadow var(--hk-motion-base) var(--hk-ease),
              border-color var(--hk-motion-base) var(--hk-ease);
}
body .kpi-card:hover {
  box-shadow: var(--hk-shadow-2) !important;
  border-color: var(--hk-border-default) !important;
}

/* Status modifiers — colored dot on the corner instead of full top stripe */
body .kpi-card.critical,
body .kpi-card.warning,
body .kpi-card.ok,
body .kpi-card.accent {
  position: relative;
}
body .kpi-card.critical::before,
body .kpi-card.warning::before,
body .kpi-card.ok::before,
body .kpi-card.accent::before {
  content: "";
  position: absolute;
  top: 12px;
  inset-inline-end: 12px;
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--hk-text-faint);
}
body .kpi-card.critical::before { background: var(--hk-critical); }
body .kpi-card.warning::before  { background: var(--hk-warning); }
body .kpi-card.ok::before       { background: var(--hk-success); }
body .kpi-card.accent::before   { background: var(--hk-emerald-500); }

/* Label — calmer */
body .kpi-card .kpi-label {
  font-size: 10.5px;
  letter-spacing: .09em;
  font-weight: 600;
  color: var(--hk-text-muted);
  text-transform: uppercase;
}

/* Value — keep semantic color but ensure tabular-nums + tighter weight */
body .kpi-card .kpi-value {
  font-variant-numeric: tabular-nums lining-nums;
  font-weight: 700;
  letter-spacing: -0.01em;
  color: var(--hk-text-primary);
}
body .kpi-card.critical .kpi-value { color: var(--hk-critical); }
body .kpi-card.warning  .kpi-value { color: var(--hk-warning); }
body .kpi-card.ok       .kpi-value { color: var(--hk-success); }
body .kpi-card.accent   .kpi-value { color: var(--hk-emerald-700); }

body .kpi-card .kpi-sub {
  color: var(--hk-text-secondary);
  font-size: 12px;
}


/* ─ Alert card legacy — reuse the new chip vocabulary ─────────────────── */
body .alert-card {
  border: 1px solid var(--hk-border-subtle) !important;
  border-radius: var(--hk-r-xl) !important;
  box-shadow: var(--hk-shadow-1) !important;
  background: var(--hk-surface-0) !important;
}
body .alert-card.CRITICAL {
  border-inline-start: 3px solid var(--hk-critical) !important;
  background: linear-gradient(90deg, var(--hk-critical-bg) 0%, var(--hk-surface-0) 18%) !important;
}
body .alert-card.WARNING {
  border-inline-start: 3px solid var(--hk-warning) !important;
  background: linear-gradient(90deg, var(--hk-warning-bg) 0%, var(--hk-surface-0) 18%) !important;
}


/* ─ Badge legacy — drop saturated solid backgrounds; use chip+dot vocab ── */
body .badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 3px 10px 3px 8px !important;
  border-radius: var(--hk-r-pill) !important;
  background: var(--hk-neutral-bg) !important;
  color: var(--hk-text-primary) !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: .01em !important;
  text-transform: none !important;
  border: 1px solid var(--hk-border-subtle) !important;
}
body .badge::before {
  content: "";
  width: 7px;
  height: 7px;
  border-radius: 50%;
  background: var(--hk-neutral);
  flex-shrink: 0;
}
body .badge-ok::before       { background: var(--hk-success); }
body .badge-warn::before,
body .badge-warning::before  { background: var(--hk-warning); }
body .badge-breach::before,
body .badge-critical::before { background: var(--hk-critical); }
body .badge-info::before     { background: var(--hk-info); }
body .badge-purple::before   { background: #7c3aed; }
body .badge-muted::before    { background: var(--hk-text-muted); }
body .badge-ok       { color: var(--hk-success) !important; }
body .badge-warn,
body .badge-warning  { color: var(--hk-warning) !important; }
body .badge-breach,
body .badge-critical { color: var(--hk-critical) !important; }
body .badge-info     { color: var(--hk-info) !important; }


/* ─ Stage pipeline (.stage.IN_ENCOUNTER etc.) — drop top stripe ─────── */
body .stage {
  border-top: 1px solid var(--hk-border-subtle) !important;
  background: var(--hk-surface-0) !important;
  border-radius: var(--hk-r-xl) !important;
  box-shadow: var(--hk-shadow-1);
}
body .stage .stage-count { font-variant-numeric: tabular-nums; }


/* ─ Run Now / ack-all / primary buttons polish — emerald accent ─────── */
body .ack-all-btn,
body .ack-all-btn:hover {
  background: var(--hk-emerald-600) !important;
  border-color: var(--hk-emerald-600) !important;
  border-radius: var(--hk-r-lg) !important;
  letter-spacing: .01em !important;
  font-weight: 600 !important;
}
body .ack-all-btn:hover {
  background: var(--hk-emerald-700) !important;
  border-color: var(--hk-emerald-700) !important;
}


/* ─ Workspace card top stripes (home.html) — keep but soften ─────────── */
body .workspace-card::before {
  height: 3px !important;
  border-radius: var(--hk-r-xl) var(--hk-r-xl) 0 0 !important;
  opacity: .85;
}
body .workspace-card {
  border-radius: var(--hk-r-xl) !important;
  border-color: var(--hk-border-subtle) !important;
  box-shadow: var(--hk-shadow-1) !important;
}
body .workspace-card:hover:not(.locked) {
  box-shadow: var(--hk-shadow-3) !important;
  border-color: var(--hk-emerald-500) !important;
}


/* ─ Section title — restate spacing/weight ──────────────────────────── */
body .section-title {
  color: var(--hk-text-muted) !important;
  letter-spacing: .08em !important;
}


/* ─ Welcome heading on home — emerald accent ────────────────────────── */
body .welcome-title {
  color: var(--hk-text-primary) !important;
  letter-spacing: -0.01em;
}


/* ─ Drawer button: when text starts with emoji left over (rare path) ── */
body .refresh-btn .hk-i { vertical-align: -3px; margin-inline-end: 4px; }


/* ── End v3 ─────────────────────────────────────────────────────────────── */