/* =========================================================================
   Credit Facility Detail — Client overlay tokens.
   Resolves the brand decisions surfaced in the design prompt, Section 11.
   Each addition is annotated with the spec reference.
   ========================================================================= */

:root {
  /* ---- Decision 1 · Mono typeface --------------------------------------
     Recommendation: JetBrains Mono Regular, 13px. Loaded from Google
     Fonts in the host HTML. Overrides the DS --font-mono (which fell back
     to ui-monospace) so addresses are typographically distinct.
     -------------------------------------------------------------------- */
  --font-mono: "JetBrains Mono", ui-monospace, "SF Mono", "Menlo", monospace;

  /* ---- Decision 2 · Success ramp ---------------------------------------
     New green added at 10 / 60 / 80 stops to match the existing 10→80
     pattern of Yellow. Pulls in `--success` away from the DS typo on
     Blue 60 and aligns with the suggested `#1F7A4B` / `#E8F4EE`.
     -------------------------------------------------------------------- */
  --green-10: #E8F4EE;
  --green-60: #1F7A4B;
  --green-80: #135E37;
  --success: var(--green-60);

  /* ---- Decision 3 · Danger ramp ----------------------------------------
     New red added at 10 / 60 / 80, replacing the DS `--danger` literal
     (#8A1919) with a more readable institutional red that pairs with the
     blue + gold palette.
     -------------------------------------------------------------------- */
  --red-10: #FBEBEC;
  --red-60: #A4262C;
  --red-80: #7A1D22;
  --danger: var(--red-60);

  /* ---- Decision 5 · Radius scale ---------------------------------------
     DS already exposes --radius-sm/md/lg/xl. Aliased here for the prompt:
     - card     = --radius-lg (12)
     - button   = --radius-md (8)
     - pill     = 999
     -------------------------------------------------------------------- */
  --radius-pill: 999px;

  /* ---- Decision 6 · Motion timing --------------------------------------
     150ms ease-out on all interactive transitions. No spring, no bounce.
     -------------------------------------------------------------------- */
  --motion-fast: 150ms ease-out;
  --motion-base: 200ms ease-out;

  /* Tabular numerals utility everywhere numbers appear */
}

/* Tabular numerals on every numeric primitive class */
.tnum { font-variant-numeric: tabular-nums; }

/* Address mono treatment */
.addr {
  font-family: var(--font-mono);
  font-feature-settings: "ss01" on, "tnum" on;
  letter-spacing: 0;
}

/* Focus ring — single rule for the whole prototype */
*:focus-visible {
  outline: 2px solid var(--focus-ring);
  outline-offset: 2px;
  border-radius: 2px;
}

/* App-wide layout primitives */
.app-shell {
  height: 100vh;
  display: flex;
  background: var(--bg);
}
.app-main {
  flex: 1;
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
}
.workspace {
  flex: 1;
  overflow: auto;
  background: var(--bg-alt);              /* #F2F2F2 — DS section banding */
  position: relative;
}
.workspace-grid {
  display: grid;
  grid-template-columns: minmax(0, 880px) 320px;
  gap: 24px;
  padding: 24px 36px 80px;
  max-width: 1280px;
  margin: 0 auto;
}
@media (max-width: 1279px) {
  .workspace-grid { grid-template-columns: 1fr; max-width: 880px; padding: 24px; }
  .workspace-grid > .policy-rail { order: 99; }
}
@media (max-width: 767px) {
  .workspace-grid { padding: 12px 12px 88px; gap: 16px; }
}

/* Card primitive — flat hairline, no shadow */
.card {
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: 12px;
  padding: 24px;
}

/* Section header inside cards */
.card-eyebrow {
  font-family: var(--font-body);
  font-size: 11px;
  line-height: 16px;
  font-weight: 500;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  color: var(--fg-subtle);
  margin-bottom: 4px;
}
.card-heading {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 20px;
  line-height: 26px;
  letter-spacing: -0.005em;
  color: var(--fg);
  margin: 0;
}
.card-subtitle {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 20px;
  color: var(--fg-subtle);
  margin-top: 4px;
}

/* Buttons */
.btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  height: 36px;
  padding: 0 14px;
  border-radius: 8px;
  border: 1px solid transparent;
  background: transparent;
  font-family: var(--font-body);
  font-size: 13px;
  font-weight: 500;
  line-height: 16px;
  color: var(--fg);
  cursor: pointer;
  transition: background var(--motion-fast), border-color var(--motion-fast), color var(--motion-fast);
  white-space: nowrap;
}
.btn--sm { height: 28px; padding: 0 10px; font-size: 12px; }
.btn--primary {
  background: var(--accent);
  color: var(--white-100);
}
.btn--primary:hover { background: var(--accent-hover); }
.btn--primary:active { background: var(--accent-press); }
.btn--secondary {
  background: var(--surface);
  border-color: var(--border-strong);
}
.btn--secondary:hover { border-color: var(--fg); }
.btn--ghost { color: var(--fg-muted); }
.btn--ghost:hover { color: var(--accent); }
.btn--text {
  color: var(--accent);
  height: auto;
  padding: 0;
  background: transparent;
}
.btn--text:hover { color: var(--accent-hover); }
.btn[disabled] { opacity: 0.45; cursor: not-allowed; }

/* Status pill */
.pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 10px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
  white-space: nowrap;
}
.pill-dot {
  width: 6px; height: 6px; border-radius: 50%;
  background: currentColor;
}
.pill--active, .pill--healthy, .pill--eligible {
  background: var(--green-10);
  color: var(--green-80);
}
.pill--paused, .pill--at-risk {
  background: var(--gold-10);
  color: var(--gold-80);
}
.pill--frozen, .pill--shutdown, .pill--default, .pill--not-eligible {
  background: var(--red-10);
  color: var(--red-80);
}
.pill--neutral {
  background: var(--black-10);
  color: var(--black-80);
}
.pill--blue {
  background: var(--blue-10);
  color: var(--blue-80);
}

/* Chip — square corners 2px (claims classification, token chips) */
.chip {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 2px 8px;
  border-radius: var(--radius-pill);
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  font-weight: 500;
}
.chip--neutral { background: var(--black-10); color: var(--black-80); }
.chip--info    { background: var(--blue-10); color: var(--blue-80); }
.chip--gold    { background: var(--gold-10); color: var(--gold-80); }

/* Brand-decision annotation marker — shows where we made a recommendation */
.annot {
  position: relative;
}
[data-annot]::after {
  content: attr(data-annot);
  display: inline-block;
  margin-left: 6px;
  padding: 1px 5px;
  border: 1px dashed var(--gold-60);
  color: var(--gold-80);
  background: var(--gold-10);
  font: 500 9px/12px var(--font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 3px;
  vertical-align: middle;
}

/* ============================ Type roles (hierarchy pass) ===============
   Renée C-4: KPI cards, section headers, and lists sit at similar weight.
   Fix: section headings stay Figtree Bold (brand voice) at the H3 size;
   stat values drop to Inter 600 — observing the DS rule "Figtree is never
   used for tabular data". This restores a clear two-step hierarchy:
   section heading > stat value.
   ====================================================================== */
.section-heading {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 26px;
  line-height: 32px;
  letter-spacing: -0.012em;
  color: var(--fg);
  margin: 0;
}
.stat-label {
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  font-weight: 400;
  letter-spacing: 0.02em;
  color: var(--fg-subtle);
}
.stat-value {
  font-family: var(--font-body);
  font-weight: 600;
  font-size: 22px;
  line-height: 28px;
  letter-spacing: -0.01em;
  color: var(--fg);
  font-variant-numeric: tabular-nums;
  margin-top: 4px;
}
.stat-hint {
  font-family: var(--font-serif);
  font-size: 12px;
  line-height: 16px;
  font-style: italic;
  font-weight: 300;
  color: var(--fg-faint);
  margin-top: 4px;
}

/* ============================ State patterns ============================
   Renée C-3: ship a loading/empty/error system, client-first.
   ====================================================================== */

/* Skeleton — shimmer placeholder bars. Used during eligibility recompute,
   facility-term load, etc. Section 6 of the prompt: "show a skeleton state
   during the recompute, not a full page reload". */
@keyframes skeleton-pulse {
  0%, 100% { opacity: 0.7; }
  50%      { opacity: 0.35; }
}
.sk {
  display: inline-block;
  background: var(--black-20);
  border-radius: 4px;
  animation: skeleton-pulse 1.4s ease-in-out infinite;
  vertical-align: middle;
}
[data-theme="dark"] .sk { background: rgba(255,255,255,0.08); }

/* Empty / error illustration container */
.state-frame {
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  padding: 32px 24px;
  gap: 12px;
}
.state-icon {
  width: 48px; height: 48px;
  border-radius: 12px;
  display: grid; place-items: center;
  background: var(--bg-alt);
  color: var(--fg-muted);
}
.state-icon--danger { color: var(--danger); background: var(--red-10); }
.state-icon--warning { color: var(--gold-70); background: var(--gold-10); }
.state-heading {
  font-family: var(--font-sans);
  font-weight: 700;
  font-size: 18px;
  line-height: 24px;
  color: var(--fg);
}
.state-body {
  font-family: var(--font-body);
  font-size: 13px;
  line-height: 20px;
  color: var(--fg-subtle);
  max-width: 360px;
}

/* Toast */
.toast-stack {
  position: fixed;
  right: 24px;
  bottom: 36px;
  z-index: 1000;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  pointer-events: auto;
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 12px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-left: 3px solid var(--accent);
  border-radius: 10px;
  box-shadow: var(--shadow-1);
  min-width: 320px;
  max-width: 420px;
  font: 500 13px/18px var(--font-body);
  color: var(--fg);
  animation: toast-in 200ms ease-out;
}
.toast--success { border-left-color: var(--success); }
.toast--error   { border-left-color: var(--danger);  }
.toast--warning { border-left-color: var(--gold-60); }
.toast-icon { color: var(--accent); flex-shrink: 0; }
.toast--success .toast-icon { color: var(--success); }
.toast--error   .toast-icon { color: var(--danger);  }
.toast--warning .toast-icon { color: var(--gold-60); }
.toast-body  { flex: 1; }
.toast-title { font-weight: 500; }
.toast-sub   { font: 400 12px/16px var(--font-body); color: var(--fg-subtle); margin-top: 1px; }
.toast-close { all: unset; cursor: pointer; color: var(--fg-faint); }
@keyframes toast-in {
  from { opacity: 0; transform: translateY(8px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================ Renée annotation overlay =================
   Toggleable pins that map each region of the design to the corresponding
   note in Renée's review (C-1, C-4, C-5, etc.). Visible only when
   `[data-annotations="on"]` is set on the app shell.
   ====================================================================== */
[data-annotations="on"] [data-annot-note] {
  position: relative;
  outline: 1px dashed var(--gold-60);
  outline-offset: 4px;
  border-radius: 4px;
  transition: outline-color var(--motion-fast);
}
[data-annot-note]::before {
  content: attr(data-annot-note);
  display: none;
}
[data-annotations="on"] [data-annot-note]::before {
  display: block;
  position: absolute;
  top: -10px;
  left: 8px;
  z-index: 5;
  padding: 2px 8px;
  background: var(--gold-60);
  color: var(--white-100);
  font: 600 10px/14px var(--font-body);
  letter-spacing: 0.04em;
  text-transform: uppercase;
  border-radius: 4px;
  white-space: nowrap;
  pointer-events: none;
}

/* The thin mock-data strip at the bottom of the page */
.mock-strip {
  position: sticky;
  bottom: 0;
  left: 0;
  right: 0;
  padding: 6px 24px;
  text-align: center;
  font-family: var(--font-body);
  font-size: 12px;
  line-height: 16px;
  color: var(--black-40);
  background: var(--surface);
  border-top: 1px solid var(--border);
  z-index: 2;
}

/* ============================ Dark mode =================================
   Decision 7: provisional mapping from Section 8.7.
   ====================================================================== */
[data-theme="dark"] {
  --bg: var(--black-100);
  --bg-alt: #0B0B0B;
  --bg-inset: #090909;           /* nav rail — darkest surface, sits behind content */
  --surface: var(--black-90);
  --fg: var(--black-10);
  --fg-muted: var(--black-30);
  --fg-subtle: var(--black-30);       /* bumped from Black 40 — better AA contrast on dark card surfaces */
  --fg-faint:  var(--black-40);       /* bumped from #5E5E5E — was ~2.5:1, now ~4:1 */
  --border: rgba(255,255,255,0.10);   /* bumped from 0.08 — hairline row dividers now visible */
  --border-strong: rgba(255,255,255,0.18);
  --accent: var(--blue-40);
  --accent-hover: var(--blue-30);
  --accent-press: var(--blue-50);

  --blue-10: rgba(98, 158, 222, 0.20);  /* stronger active-nav tint in dark mode */
  --gold-10: rgba(183, 132, 40, 0.16);
  --green-10: rgba(31, 122, 75, 0.18);
  --red-10: rgba(164, 38, 44, 0.18);

  --gold-80: #E6C387;
  --green-80: #7DD3A6;
  --red-80: #F4A6AA;
  --blue-80: #A8CCF0;
  --black-80: var(--black-30);

  color-scheme: dark;
}
[data-theme="dark"] body { background: var(--bg); }

/* KPI support strips — responsive grid with hairline dividers (gap trick).
   Cells go 4-up → 2-up → 2-up; long sub-lines clamp to 2 lines with a
   tooltip carrying the full text, so the Min-health-factor context never
   balloons into a cramped multi-line clip. */
.kpi-strip {
  display: grid !important;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 1px;
  background: var(--border);
  overflow: hidden;
}
.kpi-strip > .support-kpi { background: var(--surface); }
/* Base padding so support cells share the hero box's 24px top baseline.
   (Client SupportKPI sets this inline; admin SupportKPI relies on the class —
   without this rule the admin cells had ~0 top padding and sat 24px above the
   hero box's eyebrow, which read as the "left box is misaligned" bug.) */
.support-kpi { padding: 24px 24px; }
.kpi-sub {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
  overflow-wrap: anywhere;
}
@media (max-width: 1180px) {
  .kpi-strip { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* =========================================================================
   Responsive — mobile & tablet pass
   Three breakpoints: 1100 (declutter chrome) · 900 (off-canvas nav) ·
   767 (full mobile reflow). Inline grid styles are overridden with
   !important where React sets them directly.
   ========================================================================= */

.nav-scrim { display: none; }
.nav-burger { display: none; }

/* Off-canvas nav drawer ≤900px */
@media (max-width: 900px) {
  .app-sidenav {
    position: fixed; top: 0; left: 0; bottom: 0;
    z-index: 60;
    transform: translateX(-100%);
    transition: transform var(--motion-base);
    box-shadow: var(--shadow-1);
  }
  .app-sidenav.open { transform: translateX(0); }
  .nav-scrim {
    display: block; position: fixed; inset: 0;
    background: rgba(17,17,17,0.45);
    opacity: 0; pointer-events: none;
    transition: opacity var(--motion-base);
    z-index: 55;
  }
  .nav-scrim.open { opacity: 1; pointer-events: auto; }
  .nav-burger { display: grid !important; }
  .app-main { width: 100%; min-width: 0; }
}

/* Topbar declutter */
@media (max-width: 1279px) {
  /* On the facility route, drop the policy rail below the main column */
  .workspace-grid { grid-template-columns: 1fr !important; }
  .workspace-grid > .policy-rail { order: 99; position: static !important; }
}
@media (max-width: 1100px) {
  .topbar-search { display: none !important; }
}
@media (max-width: 820px) {
  .topbar-env { display: none !important; }
}
@media (max-width: 767px) {
  .app-topbar { padding: 0 12px !important; gap: 10px !important; }
  .topbar-wallet { display: none !important; }
  .workspace-grid--wide { padding-left: 12px !important; padding-right: 12px !important; }
  .workspace-main { gap: 20px !important; }
  .mock-strip { padding-left: 12px; padding-right: 12px; }
}

/* KPI support strips wrap 2-up */
@media (max-width: 767px) {
  .kpi-strip { grid-template-columns: 1fr 1fr !important; }
  .support-kpi {
    padding: 16px 18px !important;
  }
}

/* Horizontal-scroll financial tables */
@media (max-width: 767px) {
  .fac-scroll, .tok-scroll { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .fac-head, .fac-row { min-width: 620px; }
  .tok-head, .tok-row  { min-width: 460px; }
}

/* Eligibility rows stack: icon + name on row 1, chips row 2, action row 3 */
@media (max-width: 767px) {
  .elig-row {
    grid-template-columns: 24px 1fr !important;
    row-gap: 12px !important;
    padding: 16px !important;
  }
  .elig-row > :nth-child(3),
  .elig-row > :nth-child(4) { grid-column: 1 / -1; }
  .elig-row > :nth-child(4) { justify-self: start; }
}

/* Identity hero + info strips stack */
@media (max-width: 767px) {
  .hero-3col {
    grid-template-columns: auto 1fr !important;
    row-gap: 16px !important;
  }
  .hero-3col > :last-child { grid-column: 1 / -1; }
  .info-3col { grid-template-columns: 1fr !important; }
}

/* Page titles ease down a notch on mobile */
@media (max-width: 767px) {
  .section-heading { font-size: 22px !important; line-height: 28px !important; }
  .acct-stats { grid-template-columns: 1fr 1fr !important; row-gap: 14px !important; }
  .acct-actions { flex-direction: column; align-items: stretch !important; }
  .acct-actions > div:last-child { width: 100%; }

  /* Transaction rows: icon spans, main/amount/status stack in column 2 */
  .tx-row {
    grid-template-columns: 40px 1fr 20px !important;
    row-gap: 8px !important;
  }
  .tx-row > :nth-child(1) { grid-column: 1; grid-row: 1 / span 3; align-self: start; }
  .tx-main   { grid-column: 2; grid-row: 1; }
  .tx-amount { grid-column: 2; grid-row: 2; text-align: left !important; }
  .tx-status { grid-column: 2; grid-row: 3; justify-self: start; }
  .tx-row > :nth-child(5) { grid-column: 3; grid-row: 1; }
}