/* ───────────────────────────────────────────
   NMRDA SWCS — HTML/CSS export of the RN app
   Tokens mirror src/theme/*.ts (mobile) and are
   kept name-aligned with swcs-frontend-design/app/globals.css
   ─────────────────────────────────────────── */

:root {
  /* Brand */
  --navy-950: #060d34;
  --navy-900: #0d1b5e;
  --brand: #122184;
  --brand-70: #1a2fa3;
  --brand-40: #4c68d0;
  --brand-15: #dde3f7;
  --brand-08: #edf0fb;
  --brand-04: #f5f7fd;
  --stat-blue: #062D88;
  --icon-muted: #9B9082;

  /* CTA / action orange */
  --cta: #D85429;
  --cta-dk: #b8431e;
  --cta-15: #f9ece7;
  --cta-bd: #f4bba8;

  /* Rust — single-accent chip color used on a few screens */
  --rust: #B23D18;
  --rust-bg: #fbeee8;
  --rust-bd: #eec3b0;

  /* Semantic status */
  --ok: #0f7348;
  --ok-bg: #edf8f3;
  --ok-bd: #b7e4cd;
  --warn: #92400e;
  --warn-bg: #fffbeb;
  --warn-bd: #fde68a;
  --err: #9f1239;
  --err-bg: #fff1f2;
  --err-bd: #fecdd3;
  --info: #1d4ed8;
  --info-bg: #eff6ff;
  --info-bd: #bfdbfe;
  --amber: #f59e0b;

  /* Ink / text scale */
  --ink: #0f1624;
  --ink-2: #1C1C1C;
  --ink-3: #374151;
  --ink-4: #6b7280;
  --ink-5: #9ca3af;
  --ink-6: #d1d5db;
  --ink-7: #f3f4f6;

  /* Surfaces */
  --white: #ffffff;
  --canvas: #f4f6fb;
  --canvas-warm: #FBF8F2;
  --avatar-warm: #F5DDAC;

  /* Radii */
  --r-2: 3px;
  --r-4: 5px;
  --r-8: 8px;
  --r-12: 12px;
  --r-16: 16px;
  --r-24: 24px;
  --r-pill: 999px;
  --r-chip: 4px;

  /* Spacing (8pt grid) */
  --sp-1: 4px;  --sp-2: 8px;  --sp-3: 12px; --sp-4: 16px;
  --sp-5: 20px; --sp-6: 24px; --sp-7: 28px; --sp-8: 32px;

  /* Shadows — brand-tinted, matches src/theme/shadows.ts */
  --e1: 0 1px 2px rgba(18, 33, 132, 0.06);
  --e2: 0 2px 8px rgba(18, 33, 132, 0.07), 0 1px 2px rgba(18, 33, 132, 0.04);
  --e3: 0 4px 16px rgba(18, 33, 132, 0.09), 0 1px 4px rgba(18, 33, 132, 0.04);
  --e4: 0 12px 40px rgba(18, 33, 132, 0.13), 0 2px 8px rgba(18, 33, 132, 0.07);

  --font: 'Noto Sans', 'Segoe UI', Roboto, Helvetica, Arial, sans-serif;

  /* Mobile viewport frame used by every exported screen */
  --shell-w: 430px;
}

* { box-sizing: border-box; }
html, body { margin: 0; padding: 0; }
body {
  background: #E4E7F0;
  color: var(--ink);
  font-family: var(--font);
  font-size: 14px;
  -webkit-font-smoothing: antialiased;
}
h1, h2, h3, p { margin: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; border: none; background: none; cursor: pointer; }
img { max-width: 100%; }
svg { display: block; flex-shrink: 0; }

/* ── Typography — matches src/theme/typography.ts textStyles ── */
.t-h1        { font-size: 19px; font-weight: 800; letter-spacing: -0.38px; line-height: 24px; }
.t-h2        { font-size: 16px; font-weight: 700; letter-spacing: -0.16px; line-height: 22px; }
.t-h3        { font-size: 14px; font-weight: 700; letter-spacing: -0.14px; line-height: 20px; }
.t-card-title    { font-size: 13.5px; font-weight: 700; letter-spacing: -0.14px; line-height: 18px; }
.t-card-subtitle { font-size: 11.5px; font-weight: 400; line-height: 16px; color: var(--ink-4); }
.t-label     { font-size: 11.5px; font-weight: 700; line-height: 16px; }
.t-eyebrow   { font-size: 10px; font-weight: 700; letter-spacing: 1px; text-transform: uppercase; }
.t-body      { font-size: 13.5px; font-weight: 400; line-height: 20px; }
.t-body-md   { font-size: 13.5px; font-weight: 500; line-height: 20px; }
.t-body-sm   { font-size: 12px; font-weight: 400; line-height: 17px; }
.t-hint      { font-size: 11.5px; font-weight: 400; line-height: 16px; color: var(--ink-5); }
.t-btn       { font-size: 14px; font-weight: 700; line-height: 20px; }
.t-btn-sm    { font-size: 12px; font-weight: 700; line-height: 17px; }
.t-mono      { font-family: var(--font); font-size: 13px; letter-spacing: 1.04px; text-transform: uppercase; }
.t-step-label{ font-size: 12px; font-weight: 700; line-height: 16px; }

/* ── App shell — a phone-sized viewport every screen renders in ──
   Desktop: a centered, rounded device frame capped to the window height.
   Real mobile (<480px): full-bleed, edge to edge. */
.app-shell {
  width: 100%;
  max-width: var(--shell-w);
  height: 844px;
  max-height: 100vh;
  margin: 0 auto;
  background: var(--canvas);
  display: flex;
  flex-direction: column;
  position: relative;
  overflow: hidden;
  box-shadow: 0 0 0 1px rgba(15,22,36,0.06), 0 24px 60px -20px rgba(6,13,52,0.35);
}
@media (min-width: 480px) {
  body { min-height: 100vh; display: flex; align-items: center; justify-content: center; padding: 24px; }
  .app-shell { max-height: calc(100vh - 48px); border-radius: 28px; }
}
@media (max-width: 480px) {
  body { padding: 0; }
  .app-shell { height: 100vh; height: 100dvh; max-height: none; border-radius: 0; box-shadow: none; }
}

/* ── App-shell view system (per-portal bundles) ──
   One .app-shell holds many .view sections; only .view.active is shown.
   Header scrolls with content but the tab bar is pinned. Standalone
   single-screen pages (no .view) are unaffected — they still work. */
.view-container { flex: 1; position: relative; overflow: hidden; }
.view { position: absolute; inset: 0; overflow-y: auto; -webkit-overflow-scrolling: touch; display: none; flex-direction: column; }
.view.active { display: flex; }
/* Inside a view, the view itself is the scroll container. Any inner region that
   was a full-height scroller as a standalone page (.screen-body) must NOT stay
   flex:1 with its own overflow — nested inside the flex-column view it would
   flex-shrink its children, and cards with overflow:hidden then clip their
   content. Let such regions grow to content height; the view scrolls. */
.view .screen-body { flex: 0 0 auto; overflow: visible; }
/* Direct children of a view never shrink (prevents fixed-height clipping of any
   overflow:hidden card/section when the column runs taller than the frame). */
.view > * { flex-shrink: 0; }
/* Pin app-bar-style headers to the top of their scrolling view so only the
   body scrolls under them (matches native app chrome). */
.view > .appbar,
.view > .adm-header,
.view > .pg-header,
.view > .home-header,
.view > .ca-header { position: sticky; top: 0; z-index: 5; }

/* ── App bar ── */
.appbar { padding: 22px var(--sp-4) var(--sp-3); flex-shrink: 0; }
.appbar.brand { background: var(--navy-900); box-shadow: 0 2px 10px rgba(6,13,52,0.45); }
.appbar.white { background: var(--white); border-bottom: 1px solid var(--ink-7); }
.appbar .row { display: flex; align-items: flex-start; justify-content: space-between; gap: var(--sp-2); min-height: 36px; }
.appbar .left { display: flex; align-items: center; gap: var(--sp-2); }
.appbar .title { font-size: 14px; font-weight: 700; letter-spacing: -0.14px; }
.appbar.brand .title { color: var(--white); }
.appbar.white .title { color: var(--ink); }
.appbar .subtitle { font-size: 12px; margin-top: 1px; }
.appbar.brand .subtitle { color: rgba(255,255,255,0.6); }
.appbar.white .subtitle { color: var(--ink-4); }
.appbar .logo { height: 28px; }
.back-btn {
  width: 36px; height: 36px; border-radius: var(--r-pill);
  display: flex; align-items: center; justify-content: center; flex-shrink: 0;
  color: var(--ink);
}
.appbar.brand .back-btn { color: var(--white); }
.back-btn:hover { background: var(--ink-7); }
.appbar.brand .back-btn:hover { background: rgba(255,255,255,0.1); }
.icon-btn {
  width: 36px; height: 36px; border-radius: var(--r-8);
  background: rgba(255,255,255,0.1); border: 1px solid rgba(255,255,255,0.16);
  display: flex; align-items: center; justify-content: center; position: relative; flex-shrink: 0; color: var(--white);
}
.icon-btn.on-white { background: var(--ink-7); border-color: var(--ink-6); color: var(--ink-3); }
.icon-btn .dot { position: absolute; top: 6px; right: 6px; width: 7px; height: 7px; border-radius: 50%; background: var(--cta); border: 1.5px solid var(--navy-900); }
.icon-btn.on-white .dot { border-color: var(--white); }

/* ── Screen body ── */
.screen-body { flex: 1; padding: var(--sp-4); display: flex; flex-direction: column; gap: var(--sp-4); overflow-y: auto; }
.screen-body.no-pad { padding: 0; }
.screen-body.gap-sm { gap: var(--sp-3); }

/* ── Bottom tab bar ── */
.tabbar {
  display: flex; background: var(--navy-900); border-top: 1px solid rgba(255,255,255,0.12);
  padding: 8px 4px 12px; flex-shrink: 0; margin-top: auto;
}
.tabbar .tab {
  flex: 1; display: flex; flex-direction: column; align-items: center; gap: 3px;
  padding: 4px 2px; color: rgba(255,255,255,0.55);
}
.tabbar .tab.active { color: var(--white); }
.tabbar .tab .lbl { font-size: 10px; font-weight: 600; }

/* ── Card ── */
.card { background: var(--white); border: 1.5px solid var(--ink-6); border-radius: var(--r-16); overflow: hidden; box-shadow: var(--e2); }
.card.pad { padding: var(--sp-3); }
.card-header { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3); border-bottom: 1px solid var(--ink-7); }
.card-header .chip { width: 36px; height: 36px; border-radius: var(--r-8); border: 1px solid; display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.card-header .chip.blue   { background: var(--brand-08); border-color: var(--brand-15); color: var(--brand); }
.card-header .chip.green  { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok); }
.card-header .chip.amber  { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn); }
.card-header .chip.orange { background: var(--cta-15); border-color: var(--cta-bd); color: var(--cta); }
.card-header .chip.rust   { background: var(--rust-bg); border-color: var(--rust-bd); color: var(--rust); }
.card-header .text { flex: 1; min-width: 0; }
.card-header .text .title { font-size: 14px; font-weight: 700; letter-spacing: -0.14px; }
.card-header .text .sub { font-size: 12px; color: var(--ink-4); margin-top: 1px; }

/* ── Badge ── */
.badge { display: inline-flex; align-items: center; gap: 5px; font-size: 12px; font-weight: 700; padding: 2px 8px; border-radius: var(--r-chip); border: 1px solid; white-space: nowrap; }
.badge.sm { font-size: 10px; }
.badge .dot { width: 6px; height: 6px; border-radius: 3px; }
.badge.ok      { background: var(--ok-bg); border-color: var(--ok-bd); color: var(--ok); }
.badge.warn, .badge.pending { background: var(--warn-bg); border-color: var(--warn-bd); color: var(--warn); }
.badge.err     { background: var(--err-bg); border-color: var(--err-bd); color: var(--err); }
.badge.info    { background: var(--info-bg); border-color: var(--info-bd); color: var(--info); }
.badge.neutral { background: var(--ink-7); border-color: var(--ink-6); color: var(--ink-4); }
.badge.brand   { background: var(--brand-04); border-color: var(--brand-15); color: var(--brand); }

/* ── Buttons ── */
.btn { display: inline-flex; align-items: center; justify-content: center; gap: 6px; min-height: 44px; padding: 10px 20px; border-radius: var(--r-8); font-size: 14px; font-weight: 700; letter-spacing: 0.1px; }
.btn.full { width: 100%; }
.btn.sm { min-height: auto; padding: 6px 12px; font-size: 12px; }
.btn.lg { padding: 14px 28px; font-size: 16px; }
.btn.primary, .btn.cta { background: var(--cta); color: var(--white); }
.btn.primary:hover, .btn.cta:hover { background: var(--cta-dk); }
.btn.outline { background: transparent; color: var(--cta); border: 1.5px solid var(--cta); }
.btn.ghost { background: transparent; color: var(--ink-3); border: 1.5px solid var(--ink-6); }
.btn.danger { background: transparent; color: var(--err); border: 1.5px solid var(--err); }
.btn:disabled, .btn.disabled { opacity: 0.5; pointer-events: none; }

/* ── Form field / input ── */
.field { display: flex; flex-direction: column; gap: 5px; }
.field .label { font-size: 12px; font-weight: 700; color: var(--ink-3); }
.field .label .req { color: var(--cta); }
.field .hint { font-size: 12px; color: var(--ink-5); }
.field .error { font-size: 12px; color: var(--err); }
.input-box { display: flex; align-items: center; gap: 8px; border: 1.5px solid var(--ink-6); border-radius: var(--r-8); background: var(--white); min-height: 44px; padding: 0 12px; }
.input-box:focus-within { border-color: var(--cta); box-shadow: 0 0 0 3px var(--cta-15); }
.input-box.error { border-color: var(--err); }
.input-box input, .input-box select { flex: 1; border: none; outline: none; background: transparent; font-family: var(--font); font-size: 14px; color: var(--ink); padding: 10px 0; min-width: 0; }
.input-box input::placeholder { color: var(--ink-5); }

/* ── Stat tile ── */
.stat-tile { flex: 1; min-width: 45%; background: var(--canvas-warm); border: 1.5px solid var(--ink-6); border-radius: var(--r-8); padding: var(--sp-3); display: flex; flex-direction: column; gap: 6px; box-shadow: var(--e1); }
.stat-tile .top { display: flex; align-items: center; gap: 6px; color: var(--ink-4); }
.stat-tile .lbl { font-size: 12px; font-weight: 700; letter-spacing: 0.6px; text-transform: uppercase; color: var(--ink-4); }
.stat-tile .val { font-size: 24px; font-weight: 800; letter-spacing: -0.5px; color: var(--stat-blue); }
.stat-tile .val.danger  { color: var(--err); }
.stat-tile .val.warning { color: var(--warn); }
.stat-tile .val.success { color: var(--ok); }
.stat-row { display: flex; gap: var(--sp-3); flex-wrap: wrap; }
.stat-grid2 { display: grid; grid-template-columns: 1fr 1fr; gap: var(--sp-3); }

/* ── Progress bar ── */
.progress-track { width: 100%; height: 5px; border-radius: 10px; background: var(--ink-7); overflow: hidden; }
.progress-fill { height: 100%; border-radius: 10px; background: var(--brand); }

/* ── Avatar ── */
.avatar { width: 32px; height: 32px; border-radius: 50%; background: var(--avatar-warm); color: var(--ink-2); display: flex; align-items: center; justify-content: center; font-size: 12px; font-weight: 700; flex-shrink: 0; }

/* ── Rows / lists ── */
.row-list .row-item { display: flex; align-items: center; gap: var(--sp-3); padding: var(--sp-3) 0; border-bottom: 1px solid var(--ink-7); }
.row-list .row-item:last-child { border-bottom: none; }
.eyebrow-label { font-size: 10.5px; font-weight: 700; letter-spacing: 1.1px; text-transform: uppercase; color: var(--ink-4); }

/* ── Filter / tab chips ── */
.chip-row { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 2px; }
.filter-chip { font-size: 11.5px; font-weight: 600; padding: 7px 12px; border-radius: var(--r-pill); border: 1.5px solid var(--ink-6); color: var(--ink-3); white-space: nowrap; flex-shrink: 0; }
.filter-chip.active { background: var(--cta); border-color: var(--cta); color: var(--white); }

.tabs-underline { display: flex; gap: 18px; border-bottom: 1.5px solid var(--ink-6); }
.tabs-underline .tab-u { padding: 0 0 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-4); border-bottom: 2px solid transparent; margin-bottom: -1.5px; }
.tabs-underline .tab-u.active { color: var(--cta); border-bottom-color: var(--cta); font-weight: 700; }

/* ── FAB ── */
.fab { position: absolute; right: 16px; bottom: 20px; background: var(--cta); color: var(--white); border-radius: var(--r-pill); padding: 12px 18px; font-size: 12.5px; font-weight: 700; display: flex; align-items: center; gap: 6px; box-shadow: 0 10px 24px -6px rgba(216,84,41,0.5); }

/* ── Bottom sheet ── */
.sheet-scrim { position: fixed; inset: 0; background: rgba(6,13,52,0.4); display: flex; align-items: flex-end; justify-content: center; z-index: 50; }
.sheet { width: 100%; max-width: var(--shell-w); background: var(--white); border-radius: 22px 22px 0 0; padding: 10px 16px 24px; box-shadow: var(--e4); }
.sheet-handle { width: 34px; height: 4px; border-radius: 2px; background: var(--ink-6); margin: 0 auto 14px; }
.sheet-actions { display: flex; gap: 10px; margin-top: var(--sp-4); }
.sheet-actions .btn { flex: 1; }

/* ── Stepper ── */
.stepper { display: flex; }
.step { flex: 1; display: flex; flex-direction: column; align-items: center; gap: 6px; position: relative; }
.step:not(:last-child)::after { content: ''; position: absolute; top: 11px; left: 50%; width: 100%; height: 2px; background: var(--ink-6); z-index: 0; }
.step.done:not(:last-child)::after { background: var(--cta); }
.step .dot { width: 23px; height: 23px; border-radius: 50%; z-index: 1; display: flex; align-items: center; justify-content: center; font-size: 10.5px; font-weight: 700; background: var(--white); border: 2px solid var(--ink-6); color: var(--ink-4); }
.step.done .dot { background: var(--cta); border-color: var(--cta); color: var(--white); }
.step.active .dot { background: var(--white); border-color: var(--cta); color: var(--cta); }
.step .lbl { font-size: 9px; font-weight: 600; color: var(--ink-4); text-align: center; line-height: 1.25; max-width: 58px; }
.step.active .lbl { color: var(--cta); }
.step.done .lbl { color: var(--ink-2); }

/* ── Portal switcher segmented control ── */
.switcher { display: flex; background: rgba(255,255,255,0.08); border: 1px solid rgba(255,255,255,0.16); border-radius: var(--r-pill); padding: 3px; margin-top: 12px; }
.switcher .seg { flex: 1; text-align: center; font-size: 10.5px; font-weight: 700; padding: 6px 4px; border-radius: var(--r-pill); color: rgba(255,255,255,0.6); }
.switcher .seg.active { background: var(--white); color: var(--navy-900); }

.toggle2 { display: flex; border-bottom: 1.5px solid var(--ink-6); }
.toggle2 .seg { flex: 1; text-align: center; padding-bottom: 10px; font-size: 12.5px; font-weight: 600; color: var(--ink-4); border-bottom: 2px solid transparent; margin-bottom: -1.5px; }
.toggle2 .seg.active { color: var(--cta); border-bottom-color: var(--cta); font-weight: 700; }

/* ── Chat FAB — global floating AI-assistant button (hidden on Admin portal, matches app/_layout.tsx) ── */
.chat-fab {
  position: absolute;
  right: 16px;
  bottom: 78px;
  width: 56px;
  height: 56px;
  border-radius: 50%;
  background: var(--brand);
  color: var(--white);
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 6px 24px rgba(18,33,132,0.32);
  z-index: 40;
}
.chat-fab.no-tabbar { bottom: 16px; }

/* ── Utility ── */
.flex-1 { flex: 1; min-width: 0; }
.row { display: flex; align-items: center; }
.gap-1 { gap: 4px; } .gap-2 { gap: 8px; } .gap-3 { gap: 12px; } .gap-4 { gap: 16px; }
.ink-4 { color: var(--ink-4); }
.icon { color: var(--ink-4); }