/* Aubade Clinical Console — CSS
   Brand restyle (2026-08-03 audit remediation, item 10): shares the same
   dawn-palette tokens as the patient app (BRANDBOOK.md) so both frontends
   read as one brand family. Fraunces for display type, Inter for body —
   both self-hosted (see fonts.css), no external CDN. */

@import url('./fonts.css');

:root {
  --bg: #141634;           /* Deep Night */
  --surface: #2A2E5C;      /* Pre-dawn Indigo */
  --surface2: #363b78;     /* lighter indigo tint — nested elements/inputs */
  --border: #454b8a;       /* muted indigo-slate */
  --primary: #F2C572;      /* First Light — CTAs, highlights, active nav */
  --primary-dark: #d9ab52; /* First Light, darkened — hover state */
  --primary-ink: #141634;  /* text placed ON a --primary background */
  --accent: #E88C7D;       /* Horizon Rose — warm accent */
  --accent-green: #6FA07A; /* Meadow — signal-safe */
  --accent-red: #EA9186;   /* Ember, lightened for text on dark surfaces (WCAG AA) */
  --accent-amber: #F2C572; /* Aubade's own First Light gold — NOT the parent portfolio's amber */
  --text: #F6F1E7;         /* Bone */
  /* Lightened Slate Mist tints — raw #7B8AA8 is only 3.68:1 against
     --surface, below WCAG AA 4.5:1 (2026-08-03 audit item 11). Verified:
     text-muted 8.46:1 / 6.15:1, text-dim 6.81:1 / 4.95:1 (bg / surface). */
  --text-muted: #A9B4CE;
  --text-dim: #93A1C4;
  --sidebar-w: 220px;
  --radius: 10px;
  --radius-sm: 6px;
  --font-display: 'Fraunces', Georgia, 'Times New Roman', serif;
  --font-body: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
  /* Type-scale unification with the patient app (2026-08-13): clinic was on
     a 14px root vs. patient's 16px — same product, two type scales. 16px
     is the safer/more-accessible default and the console's tabular views
     (data-table, metrics-grid, packet-grid) already size every cell/label
     explicitly in rem off the root, not off this value, so raising it does
     not blow out density — it only affects text that has no explicit
     font-size and was silently inheriting the old 14px. */
  font-size: 16px;
}

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
body { background: var(--bg); color: var(--text); font-family: var(--font-body); line-height: 1.6; }

h1, h2, h3, .logo-text, .metric-value { font-family: var(--font-display); letter-spacing: -0.01em; }

/* Restore visible keyboard focus (2026-08-03 audit item 11) — a blanket
   outline removal on inputs left keyboard/switch users with no focus
   indicator at all (WCAG 2.4.7). */
a:focus-visible, button:focus-visible, input:focus-visible, textarea:focus-visible,
select:focus-visible, [tabindex]:focus-visible, .nav-item:focus-visible,
.thread-item:focus-visible {
  outline: 2px solid var(--primary);
  outline-offset: 2px;
}

/* Generic hidden utility — used all over app.js via classList show()/hide()
   helpers on elements that aren't a .screen/.view (e.g. loading states,
   table wrappers, the Rx-details field). This was previously undefined here
   (only .screen.hidden and .view.hidden existed), so classList.add('hidden')
   on plain elements silently did nothing — a pre-existing, untested bug that
   surfaced while migrating the Rx-details style="display:none" attribute off
   inline styles for CSP hardening. Fixed here since the migration depends on it. */
.hidden { display: none; }

/* Visually-hidden but screen-reader-accessible label text (item 11). */
.sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0,0,0,0); white-space: nowrap; border: 0;
}

.screen.hidden { display: none; }
.screen.active { display: block; }

/* ── Auth ──────────────────────────────────────────────────────────────────── */
#screen-auth { display: flex; align-items: center; justify-content: center; min-height: 100vh; background: radial-gradient(ellipse at 50% 30%, #1c2050 0%, #141634 70%); padding: 1.5rem; }
.auth-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 2.5rem 2rem; width: 380px; max-width: 100%; text-align: center; }
.logo { display: flex; align-items: center; justify-content: center; gap: 0.5rem; margin-bottom: 0.4rem; }
.logo-icon { width: 1.6rem; height: 1.6rem; display: inline-block; vertical-align: middle; flex-shrink: 0; }
.sidebar-logo .logo-icon { width: 1.3rem; height: 1.3rem; }
.logo-text { font-size: 1.5rem; font-weight: 600; color: var(--primary); }
.tagline { color: var(--text-muted); font-size: 0.85rem; margin-bottom: 2rem; }
.field { text-align: left; margin-bottom: 0.9rem; }
.field label { display: block; font-size: 0.8rem; color: var(--text-muted); margin-bottom: 0.3rem; }
.field input, .field textarea, .field select { width: 100%; background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.6rem 0.8rem; color: var(--text); font-size: 0.9rem; transition: border-color 0.2s; }
.field input:focus, .field textarea:focus { border-color: var(--primary); }
.auth-error { color: var(--accent-red); font-size: 0.8rem; min-height: 1.2rem; margin-top: 0.4rem; }

/* ── Buttons ───────────────────────────────────────────────────────────────── */
.btn-primary { background: var(--primary); color: var(--primary-ink); border: none; border-radius: var(--radius-sm); padding: 0.65rem 1.2rem; font-size: 0.9rem; font-weight: 600; cursor: pointer; transition: background 0.2s; width: 100%; }
.btn-primary:hover { background: var(--primary-dark); }
.btn-primary:disabled { opacity: 0.6; cursor: not-allowed; }
.btn-secondary { background: transparent; border: 1px solid var(--primary); color: var(--primary); border-radius: var(--radius-sm); padding: 0.5rem 0.9rem; font-size: 0.85rem; cursor: pointer; }
.btn-secondary:hover { background: var(--primary); color: var(--primary-ink); }
.btn-ghost { background: none; border: none; color: var(--text-muted); font-size: 0.85rem; cursor: pointer; padding: 0.2rem 0.4rem; }
.btn-ghost:hover { color: var(--text); }
.btn-sm { padding: 0.3rem 0.65rem; font-size: 0.8rem; min-height: 40px; }
.btn-retry { background: var(--surface2); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 0.45rem 0.9rem; font-size: 0.82rem; cursor: pointer; margin-top: 0.6rem; }
.btn-retry:hover { border-color: var(--primary); }

/* ── Layout ─────────────────────────────────────────────────────────────────── */
#screen-main { display: flex; min-height: 100vh; }
.sidebar { width: var(--sidebar-w); background: var(--surface); border-right: 1px solid var(--border); display: flex; flex-direction: column; position: fixed; top: 0; left: 0; height: 100vh; z-index: 20; transition: transform 0.2s ease; }
.sidebar-logo { display: flex; align-items: center; gap: 0.4rem; padding: 1.2rem 1rem; border-bottom: 1px solid var(--border); }
.sidebar-logo .logo-text { font-size: 1rem; font-weight: 600; color: var(--primary); }
.sidebar-nav { flex: 1; padding: 0.75rem 0; }
.nav-item { width: 100%; background: none; border: none; color: var(--text-muted); text-align: left; padding: 0.65rem 1rem; font-size: 0.875rem; cursor: pointer; transition: color 0.15s, background 0.15s; border-left: 3px solid transparent; }
.nav-item:hover { background: var(--surface2); color: var(--text); }
.nav-item.active { color: var(--primary); border-left-color: var(--primary); background: rgba(242,197,114,0.08); font-weight: 600; }
.sidebar-footer { padding: 1rem; border-top: 1px solid var(--border); display: flex; flex-direction: column; gap: 0.4rem; }
.user-name { font-size: 0.8rem; color: var(--text-muted); }

.main-content { margin-left: var(--sidebar-w); flex: 1; padding: 1.5rem 2rem; overflow-y: auto; }
.view.hidden { display: none; }
.view.active { display: block; }
.view-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.5rem; gap: 1rem; flex-wrap: wrap; }
.view-header h1 { font-size: 1.3rem; font-weight: 600; }
.header-actions { display: flex; gap: 0.75rem; align-items: center; }
.loading { color: var(--text-muted); padding: 2rem 0; }
.error-state { color: var(--accent-red); padding: 1.5rem 0; }
.error-state .btn-retry { display: inline-block; }

/* ── Mobile menu toggle (item 11: responsive < 768px) ────────────────────── */
.mobile-menu-toggle { display: none; background: var(--surface); border: 1px solid var(--border); color: var(--text); border-radius: var(--radius-sm); padding: 0.45rem 0.7rem; font-size: 1rem; cursor: pointer; }
.sidebar-backdrop { display: none; }

/* ── Inputs ─────────────────────────────────────────────────────────────────── */
.select-input { background: var(--surface2); border: 1px solid var(--border); border-radius: var(--radius-sm); padding: 0.5rem 0.75rem; color: var(--text); font-size: 0.85rem; cursor: pointer; }
.input-row { display: flex; gap: 0.5rem; }
.input-row input { flex: 1; }

/* ── Data table ─────────────────────────────────────────────────────────────── */
.data-table-wrap { overflow-x: auto; }
.data-table { width: 100%; border-collapse: collapse; }
.data-table th { text-align: left; font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); padding: 0.6rem 0.75rem; border-bottom: 1px solid var(--border); }
.data-table td { padding: 0.75rem; border-bottom: 1px solid var(--border); font-size: 0.875rem; vertical-align: middle; }
.data-table tr:hover td { background: var(--surface2); }

/* ── Badges ─────────────────────────────────────────────────────────────────── */
.badge { display: inline-block; padding: 0.2rem 0.55rem; border-radius: 999px; font-size: 0.72rem; font-weight: 600; text-transform: capitalize; }
.badge-green { background: rgba(111,160,122,0.18); color: var(--accent-green); }
.badge-amber { background: rgba(242,197,114,0.18); color: var(--accent-amber); }
.badge-red { background: rgba(234,145,134,0.18); color: var(--accent-red); }
.badge-blue { background: rgba(242,197,114,0.14); color: var(--primary); }
.badge-gray { background: rgba(169,180,206,0.15); color: var(--text-muted); }

/* ── Case packet ────────────────────────────────────────────────────────────── */
.case-packet { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.5rem; }
.case-packet h2 { font-size: 1rem; font-weight: 600; margin-bottom: 1rem; }
.packet-section { margin-bottom: 1rem; }
.packet-section h3 { font-size: 0.78rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.5rem; }
.packet-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 0.75rem; }
.packet-item { background: var(--surface2); border-radius: var(--radius-sm); padding: 0.65rem 0.75rem; }
.packet-key { font-size: 0.75rem; color: var(--text-muted); }
.packet-val { font-size: 0.9rem; font-weight: 600; color: var(--text); }
.flag-item { display: inline-flex; align-items: center; gap: 0.4rem; background: var(--surface2); border-radius: var(--radius-sm); padding: 0.3rem 0.6rem; margin: 0.2rem; font-size: 0.8rem; }

/* ── Tumor board ────────────────────────────────────────────────────────────── */
.tb-select { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; margin-bottom: 1.5rem; }
.tb-reviews { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.5rem; margin-bottom: 1.5rem; }
.tb-reviews h2 { font-size: 0.9rem; font-weight: 600; margin-bottom: 1rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); }
.existing-reviews { display: flex; flex-direction: column; gap: 0.75rem; }
.review-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.review-card h3 { font-size: 0.85rem; font-weight: 600; color: var(--primary); margin-bottom: 0.75rem; }
.checkbox-label { display: flex; align-items: center; gap: 0.5rem; cursor: pointer; font-size: 0.875rem; }
.field-row { margin-bottom: 0.9rem; }
.alert { border-radius: var(--radius-sm); padding: 0.75rem 1rem; font-size: 0.875rem; margin-top: 0.75rem; }
.alert.success { background: rgba(111,160,122,0.14); border: 1px solid var(--accent-green); color: var(--accent-green); }
.alert.error { background: rgba(234,145,134,0.14); border: 1px solid var(--accent-red); color: var(--accent-red); }

/* ── Escalations ────────────────────────────────────────────────────────────── */
.card-list { display: flex; flex-direction: column; gap: 0.75rem; }
.esc-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.1rem; display: flex; justify-content: space-between; align-items: flex-start; gap: 1rem; flex-wrap: wrap; }
.esc-info h3 { font-size: 0.9rem; font-weight: 600; }
.esc-info p { font-size: 0.8rem; color: var(--text-muted); margin-top: 0.2rem; }
.esc-actions { display: flex; gap: 0.5rem; flex-shrink: 0; }

/* ── Metrics grid ───────────────────────────────────────────────────────────── */
.metrics-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 1rem; }
.metric-card { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 1.25rem; }
.metric-label { font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.05em; color: var(--text-muted); margin-bottom: 0.4rem; }
.metric-value { font-size: 2rem; font-weight: 600; color: var(--primary); }

/* ── Inline-style migration utilities (CSP: no style="" attributes) ───────────── */
.text-muted { color: var(--text-muted); }
.text-red { color: var(--accent-red); }
.text-amber { color: var(--accent-amber); }
.text-green { color: var(--accent-green); }
.border-green { border-color: var(--accent-green); }
.text-center { text-align: center; }
.mt-sm { margin-top: 0.4rem; }
.mt-md { margin-top: 0.5rem; }

/* ── Responsive (item 11): collapsible/stacking sidebar below 768px ────────── */
@media (max-width: 768px) {
  .mobile-menu-toggle { display: inline-flex; align-items: center; justify-content: center; }
  .sidebar {
    transform: translateX(-100%);
    width: min(var(--sidebar-w), 80vw);
  }
  .sidebar.open { transform: translateX(0); box-shadow: 2px 0 16px rgba(0,0,0,0.4); }
  .sidebar-backdrop.open {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,0.5); z-index: 15;
  }
  .main-content { margin-left: 0; padding: 1.25rem 1rem 2rem; }
  .view-header { flex-direction: column; align-items: flex-start; }
  .header-actions { width: 100%; }
  .select-input { width: 100%; }
  .metrics-grid { grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); }
  .esc-card { flex-direction: column; }
}
@media (max-width: 480px) {
  .auth-card { padding: 2rem 1.25rem; }
}