/* ============================================================
   Basys UM Platform — Stylesheet
   Theme: basys.ai — dark navy header + clean light content
   Inter typeface throughout.
   ============================================================ */

@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700;800&display=swap');

/* ---- CSS custom properties ---- */
:root {
  /* Brand colours — basys.ai dark navy palette */
  --basys-navy:    #0B1120;   /* header bg */
  --basys-navy2:   #0F2552;   /* header gradient end */
  --basys-blue:    #1E3A8A;   /* primary CTA / active tab — deep navy blue */
  --basys-blue2:   #1D4ED8;   /* hover — slightly lighter navy */
  --basys-blue3:   #3B82F6;   /* lighter blue accent */
  --basys-teal:    #14B8A6;
  --basys-green:   #10B981;
  --basys-amber:   #F59E0B;
  --basys-red:     #EF4444;
  --basys-slate:   #475569;   /* replaces purple — professional slate */

  /* Layout / surface */
  --bg-page:    #F1F5F9;   /* neutral cool-gray page bg */
  --bg-card:    #FFFFFF;
  --border:     #E2E8F0;   /* slate-200 */
  --border-md:  #CBD5E1;   /* slate-300 */

  /* Typography */
  --text-main:  #0B1D3A;   /* deep navy */
  --text-body:  #334155;   /* slate-700 */
  --text-muted: #64748B;   /* slate-500 */
  --text-faint: #94A3B8;   /* slate-400 */
}

/* ---- Reset / base ---- */
*, *::before, *::after { box-sizing: border-box; }
body {
  font-family: 'Inter', ui-sans-serif, system-ui, sans-serif;
  background: var(--bg-page);
  color: var(--text-body);
  min-height: 100vh;
  margin: 0;
}

/* ============================================================
   JSON Viewer
   ============================================================ */
.json-tree    { font-family: 'SF Mono', 'Fira Code', monospace; font-size: 12.5px; line-height: 1.7; }
.json-key     { color: #1E3A8A; }
.json-string  { color: #16a34a; }
.json-number  { color: #0369A1; }
.json-bool    { color: #dc2626; }
.json-null    { color: var(--text-faint); }
.json-toggle  { cursor: pointer; user-select: none; }
.json-toggle:hover { opacity: 0.7; }

/* ============================================================
   Tabs
   ============================================================ */
.tab-active {
  border-bottom: 2.5px solid var(--basys-blue);
  color: var(--basys-blue);
}
.tab-btn {
  border-bottom: 2.5px solid transparent;
  transition: color 0.15s, border-color 0.15s;
  color: var(--text-muted);
}
.tab-btn:hover { color: var(--basys-blue2); }

/* ============================================================
   Spinner
   ============================================================ */
@keyframes spin { to { transform: rotate(360deg); } }
.spinner { animation: spin 0.8s linear infinite; }

/* ============================================================
   Eval async progress bar (indeterminate shimmer)
   ============================================================ */
@keyframes eval-shimmer {
  0%   { transform: translateX(-150%); }
  100% { transform: translateX(500%); }
}
.eval-progress-bar {
  width: 30%;
  animation: eval-shimmer 1.6s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* ============================================================
   Document card (eval tab)
   ============================================================ */
.doc-card {
  background: #F8FAFC;
  border: 1px solid var(--border);
  border-radius: 12px;
  transition: box-shadow 0.15s;
}
.doc-card:hover { box-shadow: 0 0 0 2px rgba(30, 58, 138, 0.18); }

/* ============================================================
   Status badges
   ============================================================ */
.badge-processing { background: #fef3c7; color: #92400e; }
.badge-completed  { background: #d1fae5; color: #065f46; }
.badge-failed     { background: #fee2e2; color: #991b1b; }
.badge-pending    { background: #E2E8F0; color: #334155; }

/* ============================================================
   Dashboard KPI Cards
   ============================================================ */
.kpi-card {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 20px 24px;
  transition: box-shadow 0.2s, transform 0.2s;
}
.kpi-card:hover {
  box-shadow: 0 8px 24px rgba(30, 58, 138, 0.09);
  transform: translateY(-2px);
}
.kpi-icon {
  width: 44px;
  height: 44px;
  border-radius: 12px;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 20px;
}

/* Trend indicators */
.trend-up        { color: var(--basys-green); }
.trend-down      { color: var(--basys-red); }
.trend-good-down { color: var(--basys-green); }

/* ============================================================
   Chart / section cards
   ============================================================ */
.chart-card {
  background: var(--bg-card);
  border-radius: 16px;
  border: 1px solid var(--border);
  padding: 24px;
  transition: box-shadow 0.2s;
}
.chart-card:hover { box-shadow: 0 4px 16px rgba(11, 29, 58, 0.07); }

/* ============================================================
   Cases table row
   ============================================================ */
.case-row { cursor: pointer; transition: background 0.12s; }
.case-row:hover { background: #F1F5F9; }

/* ============================================================
   Determination badges
   ============================================================ */
.det-badge {
  display: inline-flex;
  align-items: center;
  padding: 2px 10px;
  border-radius: 9999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
}
.det-APPROVED                { background: #D1FAE5; color: #065F46; }
.det-DENIED                  { background: #FEE2E2; color: #991B1B; }
.det-ESCALATE_TO_NURSE       { background: #FEF3C7; color: #92400E; }
.det-DISCHARGE_RECOMMENDED   { background: #DBEAFE; color: #1E40AF; }
.det-MEDICALLY_NECESSARY     { background: #D1FAE5; color: #065F46; }
.det-QUESTIONABLE            { background: #FEF3C7; color: #92400E; }
.det-UPCODED                 { background: #FEE2E2; color: #991B1B; }
.det-UNDERCODED              { background: #FEF9C3; color: #713F12; }

/* ============================================================
   BCBS comparison table
   ============================================================ */
.compare-better { color: var(--basys-green); font-weight: 600; }
.compare-worse  { color: var(--basys-red);   font-weight: 600; }

/* ============================================================
   Savings calculator
   ============================================================ */
.savings-input {
  background: #fff;
  border: 1.5px solid var(--border-md);
  border-radius: 10px;
  padding: 10px 14px;
  font-size: 15px;
  font-weight: 500;
  color: var(--text-main);
  width: 100%;
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.savings-input:focus {
  border-color: var(--basys-blue);
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.12);
}
.savings-input::placeholder { color: var(--text-faint); }

/* ============================================================
   Criteria status pills
   ============================================================ */
.crit-met        { background: #D1FAE5; color: #065F46; }
.crit-not_met    { background: #FEE2E2; color: #991B1B; }
.crit-borderline { background: #FEF3C7; color: #92400E; }
.crit-flagged    { background: #FEE2E2; color: #991B1B; }

/* ============================================================
   Case drill-down modal
   ============================================================ */
#drilldown-modal       { display: none; }
#drilldown-modal.open  { display: flex; }

/* ============================================================
   Auto-det gauge centre label
   ============================================================ */
.gauge-label {
  position: absolute;
  bottom: 8px;
  left: 50%;
  transform: translateX(-50%);
  text-align: center;
}

/* ============================================================
   Form inputs (light theme)
   ============================================================ */
input[type="text"],
input[type="number"],
select,
textarea {
  background: #fff;
  color: var(--text-main);
  border-color: var(--border-md);
}
input[type="text"]:focus,
input[type="number"]:focus,
select:focus,
textarea:focus {
  box-shadow: 0 0 0 3px rgba(30, 58, 138, 0.12);
  border-color: var(--basys-blue);
  outline: none;
}

/* ============================================================
   Scrollbar (light)
   ============================================================ */
::-webkit-scrollbar { width: 6px; height: 6px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #CBD5E1; border-radius: 9999px; }
::-webkit-scrollbar-thumb:hover { background: #94A3B8; }

/* ============================================================
   Responsive helpers
   ============================================================ */
@media (max-width: 768px) {
  .kpi-card   { padding: 16px; }
  .chart-card { padding: 16px; }
}