/* khs-design-fixes.css
   Design-review round-1 fixes. Loaded LAST in every page so it wins specificity.
   Addresses: dark mode, WCAG contrast, focus-visible, active states, transitions,
   reduced-motion, button font, locale switcher position. */

/* ---------- Token contrast fixes (eye-004/005/008/010, arch-003) ---------- */
/* Round 2 follow-ups: amber chip, role-tag BM, KPI '11', footer Status. */
:root {
  --coral: #a8412e;          /* was #c8553d - now 5.4:1 on paper */
  --coral-deep: #8a3324;
  --amber: #6f4f15;          /* was #a87a25/#8a6420 - now 7.3:1 on paper */
  --nav-text-dim: #d4dccd;   /* was #b8c9b1 - now 7.1:1 on sage-deep nav */
  --nav-glyph: #d4dccd;      /* was #a8bca0 - now 7.1:1 on sage-deep nav */
  --nav-badge-text: #f8f1de; /* badge counts on dark nav - 9.0:1 contrast */
  --status-link: #5d6e52;    /* footer Status link - was 1.91, now 5.19 on paper */
}

/* Amber chip text - was 3.84:1 */
.chip.amber, .chip.amber.on,
.kpi.amber, .kpi-link.amber,
[data-tone="amber"] {
  background: #f4e3c4;
  color: #5a3f10 !important;
}

/* BM/GM role-tag chips - was 3.88:1 cream-on-mid */
.role-tag, .role-tag.bm, .role-tag.gm, .role-tag.dsw, .role-tag.sup {
  color: #1c2420 !important;
  background: #e6dfcf !important;
  font-weight: 600;
}
.role-tag.bm { background: #d9e6df !important; color: #1c2420 !important; }
.role-tag.gm { background: #e6d9d3 !important; color: #1c2420 !important; }

/* KPI badge counts in dark sidebar - was 1.13 cream-on-cream */
aside.nav .badge, nav[aria-label="Primary"] .badge,
aside.nav span[style*="font-family"], nav[aria-label="Primary"] span[style*="font-family"] {
  color: var(--nav-badge-text, #f8f1de) !important;
  background: rgba(255, 255, 255, 0.12);
  padding: 1px 6px;
  border-radius: 8px;
  font-weight: 600;
}

/* Footer Status link - was 1.91 */
.legal a, .login-footer a, footer a, .footer a {
  color: var(--status-link, #5d6e52) !important;
}
.legal a:hover, .login-footer a:hover, footer a:hover {
  color: var(--ink, #1c2420) !important;
  text-decoration: underline;
}

/* HIPAA stamp - was 3.42 */
.legal span:first-child, .compliance-stamp {
  color: #5d6e52 !important;
  font-weight: 500;
}

/* Profile badge fix (eye-008) - cream-on-white invisible bug */
.role-tag, .role-chip, .topbar a[href*="profile"],
.topbar .profile, .topbar .av {
  color: var(--ocean, #2a5d6e) !important;
  background: var(--ocean-soft, #d8e5e8) !important;
}

/* ---------- Global focus-visible (eye-002, arch-008) ---------- */
:focus-visible {
  outline: 2px solid var(--ink, #1c2420);
  outline-offset: 2px;
  border-radius: inherit;
}
/* Inputs already have a sage box-shadow - extend to interactive controls */
button:focus-visible, .btn:focus-visible, a:focus-visible,
.chip:focus-visible, .kpi-link:focus-visible, .qp:focus-visible,
[role="button"]:focus-visible, [tabindex="0"]:focus-visible {
  outline: 2px solid var(--sage-deep, #5d6e52);
  outline-offset: 2px;
  box-shadow: 0 0 0 4px rgba(93, 110, 82, 0.18);
}
/* Sidebar nav focus needs lighter ring on dark green bg */
aside.nav a:focus-visible, nav[aria-label] a:focus-visible {
  outline: 2px solid var(--paper, #fbf8f1);
  outline-offset: 2px;
}

/* ---------- Active states (eye-012) ---------- */
.btn:not(:disabled):active,
button:not(:disabled):active,
.chip:active, .kpi-link:active, .qp:active {
  transform: translateY(1px);
  filter: brightness(0.96);
}

/* ---------- Transitions (eye-015) ---------- */
.btn, button, .chip, .kpi-link, .qp,
aside.nav a, nav[aria-label] a, .role-chip .seg,
input, select, textarea {
  transition: background-color .15s ease, color .15s ease,
              border-color .15s ease, box-shadow .15s ease,
              transform .12s ease, filter .15s ease;
}

/* ---------- Button font fix (eye-011) ---------- */
.btn, button {
  font-family: inherit;
}

/* ---------- Hover affordance on inactive nav items (eye-007) ---------- */
aside.nav a:not(.active):hover,
nav[aria-label] a:not(.active):hover {
  background: rgba(255, 255, 255, 0.06);
  border-left: 2px solid var(--sage-tint, #b8c9b1);
  padding-left: calc(var(--nav-pad-l, 16px) - 2px);
}

/* ---------- Locale switcher mobile fix (eye-013) ---------- */
@media (max-width: 768px) {
  .khs-locale-switcher {
    position: static !important;
    z-index: 50 !important;
    top: auto !important;
    right: auto !important;
    margin: 8px 12px;
    display: inline-flex;
  }
}

/* ---------- Reduced motion (arch-008) ---------- */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
    scroll-behavior: auto !important;
  }
}

/* ---------- Dark mode (eye-001, arch-005) ---------- */
@media (prefers-color-scheme: dark) {
  :root {
    --paper: #14181a;
    --surface: #1b2024;
    --surface-2: #232a30;
    --ink: #e8ece9;
    --ink-2: #b9c2bd;
    --ink-3: #8d978f;
    --rule: #2c343a;
    --sage-deep: #4a6a55;
    --sage-tint: #2d3a32;
    --sage: #7d9f88;
    --coral: #d97a64;          /* lighter for dark bg, ~5:1 */
    --coral-soft: #3a2624;
    --amber: #d8a85a;
    --ocean: #5fa8b8;
    --ocean-soft: #1f3338;
    --plum: #b9a8c2;
    --nav-text-dim: #c8d4c4;
    --nav-glyph: #d8e0d4;
    --nav-badge-text: #f0eadf;
  }
  body {
    background: var(--paper);
    color: var(--ink);
  }
  /* Sidebar already dark green - keeps its own gradient, just adjust text */
  aside.nav, nav[aria-label] {
    background: linear-gradient(180deg, #2a3a30 0%, #14181a 100%);
  }
  /* Cards lift to surface */
  .card, .kpi, .kpi-link, section.card {
    background: var(--surface);
    border-color: var(--rule);
  }
  /* Inputs */
  input, select, textarea {
    background: var(--surface-2);
    color: var(--ink);
    border-color: var(--rule);
  }
  /* Tables */
  th, td { border-color: var(--rule); }
  /* Logo darken-on-light fix */
  img[src*="khs-logo"] {
    filter: brightness(1.1) contrast(0.95);
  }
}

/* ---------- Skip link for keyboard users (arch-008) ---------- */
.skip-link {
  position: absolute;
  left: -10000px;
  top: auto;
  width: 1px;
  height: 1px;
  overflow: hidden;
}
.skip-link:focus {
  position: fixed;
  left: 12px;
  top: 12px;
  width: auto;
  height: auto;
  padding: 8px 14px;
  background: var(--ink);
  color: var(--paper);
  z-index: 10000;
  border-radius: 6px;
  text-decoration: none;
  outline: 2px solid var(--paper);
  outline-offset: 2px;
}

/* ---------- Disabled state contrast (soul-012) ---------- */
.btn:disabled, button:disabled {
  opacity: 0.45;
  cursor: not-allowed;
  filter: grayscale(0.4);
}

/* ---------- Screen-reader-only helper (arch-009) ---------- */
.sr-only {
  position: absolute !important;
  width: 1px; height: 1px;
  padding: 0; margin: -1px;
  overflow: hidden;
  clip: rect(0,0,0,0);
  white-space: nowrap;
  border: 0;
}

/* ---------- KPI participant code-chip text fix (eye-005) ---------- */
/* Mid-tone bg + dark text was 2.69-3.65:1. Flip to white text on the
   coloured chip so chip stays vivid AND text passes AA. */
td .chip.code,
td.chip-cell,
.case td[style*="background"] {
  color: #ffffff !important;
  font-weight: 600;
}

/* ---------- Round-2 contrast fixes (eye-004, eye-005, eye-006) ---------- */
/* eye-004: '.pill.ok' AND '.pct.ok' were 3.48:1 (sage-deep #5d6e52 on
   sage-tint #e6ecdb / white). Darken the text to near-ink for 7+:1;
   keep the dot vivid. The Participants List per-row status uses .pct.ok;
   the dashboard greeting pills use .pill.ok. */
.pill.ok,
.pct.ok,
.pct {
  color: #2a3a30 !important;
  font-weight: 600;
}
.pill.ok .dot {
  background: var(--sage-deep, #5d6e52) !important;
}
/* Same fix for any "Active" / status row text on Participants List */
.flag-dot.ok ~ span,
.list-item .status.ok,
.row .status.ok,
[data-status="active"],
.status-active {
  color: #2a3a30 !important;
}
/* eye-005: code chips on light background */
.code-chip, .mono.code, span.code {
  color: #1c2420 !important;
}
.code-chip.alt {
  background: #e6ecdb !important;
  color: #2a3a30 !important;
}
.code-chip.ocean {
  background: #d4e1ea !important;
  color: #1f435a !important;
}
.code-chip.plum {
  background: #ece1ed !important;
  color: #4a3650 !important;
}
/* eye-006: dashboard alert pills crit/info contrast bump */
.pill.crit {
  color: #7a2d1c !important;
  font-weight: 600;
}
.pill.info {
  color: #1f4d68 !important;
  font-weight: 600;
}
/* Demo banner readability */
.demo-banner { color: #6f4f15 !important; }
.demo-banner strong { color: #4a3208 !important; }

/* ---------- Logo size cap (eye-006) ---------- */
img[src*="khs-logo"] {
  max-width: 64px;
  max-height: 64px;
  width: auto;
  height: auto;
}

/* ---------- Mobile responsive collapse (eye-003, arch-016) ---------- */
@media (max-width: 900px) {
  .app {
    grid-template-columns: 1fr !important;
  }
  .nav, aside.nav, nav[aria-label="Primary"] {
    position: relative;
    width: 100%;
    max-height: 56px;
    overflow: hidden;
    transition: max-height .25s ease;
  }
  .nav.is-open, aside.nav.is-open, nav[aria-label="Primary"].is-open {
    max-height: 1200px;
  }
  .nav .group, aside.nav .group, nav[aria-label="Primary"] .group {
    display: none;
  }
  .nav.is-open .group, aside.nav.is-open .group,
  nav[aria-label="Primary"].is-open .group {
    display: block;
  }
  /* Topbar wraps and search shrinks */
  .topbar {
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px 12px !important;
  }
  .topbar .search {
    width: 100% !important;
    margin: 4px 0 !important;
  }
  .topbar .cap {
    font-size: 11px;
  }
  /* KPI rows stack 2-up */
  .kpi-row, .kpi-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }
  /* Caseload table: convert to card list visually */
  .case table {
    font-size: 13px;
  }
  .case table thead {
    display: none;
  }
  .case table tr {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px 12px;
    padding: 12px 0;
    border-bottom: 1px solid var(--rule);
  }
  .case table td {
    padding: 2px 6px;
    border: 0;
  }
  .case table td:first-child {
    grid-column: 1 / -1;
    font-weight: 600;
  }
  /* Hide topbar sign-out + variance buttons in cramped mobile */
  .topbar .btn.ghost { padding: 6px 10px; font-size: 12px; }
}

/* ---------- Mobile-form empty state (soul-003) ---------- */
.empty-fallback {
  padding: 24px;
  text-align: center;
  color: var(--ink-3, #6c736e);
  border: 1px dashed var(--rule, #e6dfcf);
  border-radius: 12px;
  margin: 16px 0;
}
.empty-fallback .retry-btn {
  margin-top: 12px;
  padding: 10px 18px;
  border-radius: 8px;
  background: var(--sage-deep, #5d6e52);
  color: #fff;
  border: 0;
  cursor: pointer;
  font: inherit;
}