/* ResPro Billing Platform — Design Language
 * Brand: ResPro Health teal (#1a4549) — sidebar + primary buttons
 * Functional: green/amber/red status, blue informational
 * Typography: system sans-serif, 14px base
 * Brand guide: ./docs/design/brand-guide.md
 */

*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }

body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", sans-serif;
  background: #f8fafc;
  color: #1e293b;
  display: flex;
  height: 100vh;
  overflow: hidden;
  font-size: 14px;
}

/* ── Sidebar ───────────────────────────────────────────── */

.sidebar {
  width: 220px;
  min-width: 220px;
  background: #122f32;  /* ResPro teal dark */
  color: #cbd5e1;
  display: flex;
  flex-direction: column;
  padding: 0;
}

.sidebar-logo {
  padding: 20px 20px 16px;
  border-bottom: 1px solid #1a4549;  /* ResPro teal */
}

.app-name {
  font-size: 13px;
  font-weight: 700;
  color: #f1f5f9;
  letter-spacing: 0.02em;
  text-transform: uppercase;
}

.app-sub {
  font-size: 11px;
  color: #64748b;
  margin-top: 2px;
}

.sidebar-nav {
  padding: 12px 0;
  flex: 1;
}

.nav-item {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 20px;
  font-size: 13px;
  color: #94a3b8;
  cursor: pointer;
  border-left: 3px solid transparent;
  transition: all 0.15s;
  text-decoration: none;
}

.nav-item:hover { background: #1a4549;  /* ResPro teal */ color: #e2e8f0; }

.nav-item.active {
  background: #1d4ed8;
  color: #fff;
  border-left-color: #60a5fa;
  font-weight: 500;
}

.nav-icon { font-size: 15px; width: 18px; text-align: center; }

.nav-divider { height: 1px; background: #1a4549;  /* ResPro teal */ margin: 8px 0; }

/* Nav group header label, e.g. "Rules & Config" — sits below a nav-divider
   to scaffold sections, matches the simulator's grouped sidebar (per
   ux-advocate simulator-parity audit 2026-04-24 §2.5). */
.nav-group-label {
  padding: 6px 14px 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  color: #94a3b8;
}

/* ===================================================================
   Exception Queue — master-detail layout
   Lifted from docs/design/harness/simulator.html lines 196–264 per
   ux-advocate simulator-parity audit 2026-04-24 §2.1 (SHOWSTOPPER).
   Erica is the daily power user; at 50+ exceptions per session the
   prior flattened accordion added 20+ minutes of scrolling per cycle.
   =================================================================== */

/* Master-detail two-column layout. Sized by its parent — when the parent
   uses .content--full-bleed (see below), body-split becomes flex:1 inside
   a column-flex parent and takes whatever vertical space is left after
   breadcrumb + review-actions + kbd-hint. Inner exc-list + detail-body
   then scroll independently while the action bar stays pinned at the
   visible bottom of the detail panel. Mark walkthrough 2026-04-30. */
.body-split { display: flex; overflow: hidden; min-height: 500px; }
.exc-list { width: 360px; min-width: 360px; background: #fff; border-right: 1px solid #e2e8f0; display: flex; flex-direction: column; overflow: hidden; }
.exc-list-header { padding: 14px 16px 10px; border-bottom: 1px solid #e2e8f0; display: flex; align-items: center; justify-content: space-between; flex-shrink: 0; }
.exc-list-title { font-size: 13px; font-weight: 600; color: #374151; }
.exc-list-sub { font-size: 11px; color: #94a3b8; margin-top: 2px; }
.exc-groups { flex: 1; overflow-y: auto; }
.group-header { display: flex; align-items: center; justify-content: space-between; padding: 10px 16px 8px; }
.group-name { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; }
.group-count { font-size: 11px; font-weight: 600; background: #f1f5f9; color: #64748b; border-radius: 10px; padding: 1px 8px; }
.group-count.amber { background: #fef3c7; color: #92400e; }
.group-count.red   { background: #fee2e2; color: #991b1b; }
.group-count.blue  { background: #dbeafe; color: #1e40af; }
.exc-item { display: flex; align-items: flex-start; gap: 10px; padding: 10px 16px; cursor: pointer; border-left: 3px solid transparent; border-bottom: 1px solid #f8fafc; transition: background 0.1s; }
.exc-item:hover { background: #f8fafc; }
.exc-item.selected { background: #eff6ff; border-left-color: #3b82f6; }
.exc-item.resolved { opacity: 0.5; }
.exc-item.auto-dismissed { opacity: 0.5; background: #fafafa; }
.exc-type-dot { width: 8px; height: 8px; border-radius: 50%; flex-shrink: 0; margin-top: 5px; }
.dot-amber  { background: #f59e0b; }
.dot-red    { background: #ef4444; }
.dot-blue   { background: #3b82f6; }
.dot-slate  { background: #94a3b8; }
.dot-purple { background: #8b5cf6; }
.exc-item-body { flex: 1; min-width: 0; }
.exc-patient { font-size: 13px; font-weight: 500; color: #1e293b; display: flex; align-items: center; gap: 6px; }
.exc-mrn { font-size: 11px; font-family: monospace; color: #94a3b8; }
.exc-summary { font-size: 12px; color: #64748b; margin-top: 2px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.exc-tag { font-size: 10px; font-weight: 600; border-radius: 4px; padding: 1px 6px; flex-shrink: 0; margin-top: 2px; }
.tag-amber  { background: #fef3c7; color: #92400e; }
.tag-red    { background: #fee2e2; color: #991b1b; }
.tag-blue   { background: #dbeafe; color: #1e40af; }
.tag-slate  { background: #f1f5f9; color: #64748b; }
.tag-purple { background: #ede9fe; color: #5b21b6; }
.tag-green  { background: #dcfce7; color: #166534; }

.detail-panel { flex: 1; display: flex; flex-direction: column; overflow: hidden; background: #f8fafc; }
.detail-empty { flex: 1; display: flex; align-items: center; justify-content: center; flex-direction: column; gap: 12px; color: #94a3b8; padding: 40px; }
.detail-empty .de-icon { font-size: 40px; }
.detail-empty .de-text { font-size: 14px; }
.detail-header { background: #fff; border-bottom: 1px solid #e2e8f0; padding: 16px 24px; flex-shrink: 0; }
.detail-patient { font-size: 18px; font-weight: 700; color: #1e293b; display: flex; align-items: center; gap: 10px; }
.detail-mrn { font-size: 13px; font-family: monospace; color: #64748b; font-weight: 400; }
.detail-meta { display: flex; gap: 20px; margin-top: 8px; font-size: 12px; color: #64748b; flex-wrap: wrap; }
.detail-body { flex: 1; overflow-y: auto; padding: 20px 24px; display: flex; flex-direction: column; gap: 16px; }
.detail-card { background: #fff; border: 1px solid #e2e8f0; border-radius: 10px; overflow: hidden; }
.detail-card-header { padding: 12px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; border-bottom: 1px solid #f1f5f9; background: #f8fafc; }
.detail-card-body { padding: 14px 16px; }
.finding-box { background: #fef3c7; border: 1px solid #fde68a; border-radius: 8px; padding: 12px 14px; font-size: 13px; color: #78350f; display: flex; gap: 10px; align-items: flex-start; }
.finding-icon { font-size: 16px; flex-shrink: 0; }
.finding-text { line-height: 1.5; }
.suggestion-box { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 12px 14px; font-size: 13px; color: #166534; display: flex; gap: 10px; align-items: flex-start; margin-top: 10px; }
.suggestion-icon { font-size: 16px; flex-shrink: 0; }

.action-bar { background: #fff; border-top: 1px solid #e2e8f0; padding: 14px 24px; display: flex; align-items: center; gap: 10px; flex-shrink: 0; flex-wrap: wrap; }
.action-label { font-size: 11px; font-weight: 600; text-transform: uppercase; letter-spacing: 0.06em; color: #94a3b8; margin-right: 4px; }
.btn-action { padding: 7px 14px; border-radius: 6px; font-size: 13px; font-weight: 600; border: none; cursor: pointer; display: inline-flex; align-items: center; gap: 6px; }
.btn-action.btn-green  { background: #16a34a; color: #fff; }
.btn-action.btn-blue   { background: #2563eb; color: #fff; }
.btn-action.btn-amber  { background: #d97706; color: #fff; }
.btn-action.btn-red    { background: #dc2626; color: #fff; }
.btn-action.btn-slate  { background: #475569; color: #fff; }
.btn-action.btn-ghost  { background: #fff; color: #475569; border: 1px solid #cbd5e1; }
.btn-action[disabled]  { opacity: 0.5; cursor: not-allowed; }
.btn-action .kbd { display: inline-block; background: rgba(255,255,255,0.25); color: inherit; border-radius: 3px; padding: 1px 5px; font-family: monospace; font-size: 10px; font-weight: 700; }
.btn-action.btn-ghost .kbd { background: #e2e8f0; color: #475569; }

.kbd-hint { background: #f8fafc; border-top: 1px solid #e2e8f0; padding: 7px 24px; display: flex; gap: 18px; font-size: 11px; color: #94a3b8; flex-shrink: 0; flex-wrap: wrap; }
.kbd-hint .kbd { display: inline-block; background: #e2e8f0; color: #475569; border-radius: 3px; padding: 1px 5px; font-family: monospace; font-size: 10px; margin-right: 4px; }
.resolved-banner { background: #f0fdf4; border: 1px solid #bbf7d0; border-radius: 8px; padding: 10px 14px; display: flex; align-items: center; gap: 8px; font-size: 13px; color: #166534; font-weight: 600; }
.resolved-meta { font-size: 12px; color: #64748b; margin-top: 8px; }
.resolved-reason { font-size: 12px; color: #334155; padding: 8px 10px; background: #f1f5f9; border-left: 2px solid #cbd5e1; border-radius: 3px; margin-top: 6px; white-space: pre-wrap; word-break: break-word; }

@media (max-width: 1024px) {
  .body-split { flex-direction: column; min-height: 0; }
  .exc-list { width: 100%; min-width: 0; border-right: none; border-bottom: 1px solid #e2e8f0; max-height: 360px; }
}

.sidebar-footer {
  padding: 12px 20px;
  border-top: 1px solid #334155;
  font-size: 12px;
  color: #475569;
}

/* ── Main layout ──────────────────────────────────────── */

.main {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden;
}

.topbar {
  background: #fff;
  border-bottom: 1px solid #e2e8f0;
  padding: 0 28px;
  height: 52px;
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
}

.topbar-title {
  font-size: 15px;
  font-weight: 600;
  color: #1e293b;
}

.topbar-right {
  display: flex;
  align-items: center;
  gap: 16px;
  font-size: 13px;
  color: #64748b;
}

.avatar {
  width: 30px; height: 30px;
  background: #dbeafe;
  border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 600; color: #1d4ed8;
}

.content {
  flex: 1;
  overflow-y: auto;
  padding: 28px;
}

/* Full-bleed mode for pages that want to fit inside the viewport with
   their own internal scroll regions (e.g., the exception triage queue,
   where the action bar must stay visible at the bottom regardless of
   how long the exception list is). The page itself becomes a flex
   column, body-split becomes flex:1 + min-height:0, and inner panels
   scroll independently. Mark walkthrough 2026-04-30 — without this the
   page-level overflow scrolled the action bar off-screen. */
.content.content--full-bleed {
  overflow: hidden;
  display: flex;
  flex-direction: column;
  padding: 24px 28px 0;
  min-height: 0;
}
.content.content--full-bleed > * {
  flex-shrink: 0;
}
.content.content--full-bleed > .body-split {
  flex: 1;
  min-height: 0;
}

/* ── Tabs ─────────────────────────────────────────────── */

.tab-row {
  display: flex;
  gap: 0;
  border-bottom: 2px solid #e2e8f0;
  margin-bottom: 28px;
}

.tab {
  padding: 10px 22px;
  font-size: 13px;
  font-weight: 500;
  color: #64748b;
  cursor: pointer;
  border-bottom: 2px solid transparent;
  margin-bottom: -2px;
}

.tab.active {
  color: #1d4ed8;
  border-bottom-color: #1d4ed8;
}

.tab-badge {
  display: inline-block;
  background: #dbeafe;
  color: #1d4ed8;
  font-size: 11px;
  font-weight: 600;
  border-radius: 10px;
  padding: 1px 7px;
  margin-left: 6px;
}

/* ── Upload page ──────────────────────────────────────── */

.upload-context {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 20px;
}

.client-badge {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  border-radius: 8px;
  padding: 8px 14px;
  font-size: 13px;
  color: #166534;
  font-weight: 500;
}

.client-badge-icon { font-size: 15px; }

.drop-zone {
  border: 2px dashed #cbd5e1;
  border-radius: 12px;
  background: #fff;
  padding: 60px 40px;
  text-align: center;
  cursor: pointer;
  transition: all 0.2s;
  margin-bottom: 24px;
  max-width: 640px;
}

.drop-zone:hover,
.drop-zone-active {
  border-color: #3b82f6;
  background: #f0f7ff;
}

.drop-icon { font-size: 40px; margin-bottom: 14px; }

.drop-primary {
  font-size: 16px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 6px;
}

.drop-secondary {
  font-size: 13px;
  color: #64748b;
  margin-bottom: 14px;
}

.browse-link {
  color: #1d4ed8;
  text-decoration: underline;
  cursor: pointer;
}

.file-types {
  display: inline-flex;
  gap: 8px;
  font-size: 11px;
}

.file-chip {
  background: #f1f5f9;
  color: #64748b;
  border-radius: 4px;
  padding: 2px 8px;
  font-family: monospace;
}

.section-label {
  font-size: 12px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.06em;
  color: #94a3b8;
  margin-bottom: 10px;
}

/* Upload result feedback */
.upload-result {
  display: flex;
  align-items: flex-start;
  gap: 12px;
  padding: 14px 16px;
  border-radius: 8px;
  margin-top: 16px;
  max-width: 640px;
  font-size: 13px;
}

.upload-result-success {
  background: #f0fdf4;
  border: 1px solid #bbf7d0;
  color: #166534;
}

.upload-result-error {
  background: #fef2f2;
  border: 1px solid #fecaca;
  color: #991b1b;
}

.upload-result-icon { font-size: 16px; margin-top: 1px; }

/* ── Tables ───────────────────────────────────────────── */

.recent-table {
  width: 100%;
  max-width: 640px;
  border-collapse: collapse;
  background: #fff;
  border-radius: 8px;
  overflow: hidden;
  border: 1px solid #e2e8f0;
}

.recent-table th {
  padding: 10px 16px;
  text-align: left;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.recent-table td {
  padding: 11px 16px;
  font-size: 13px;
  color: #374151;
  border-bottom: 1px solid #f1f5f9;
}

.recent-table tr:last-child td { border-bottom: none; }

/* ── Status badges ─────────────────────────────────────── */

.status-badge {
  display: inline-flex;
  align-items: center;
  gap: 5px;
  padding: 3px 9px;
  border-radius: 20px;
  font-size: 11px;
  font-weight: 600;
}

.status-complete { background: #dcfce7; color: #166534; }
.status-review   { background: #fef3c7; color: #92400e; }
.status-proc     { background: #dbeafe; color: #1e40af; }
.status-failed   { background: #fee2e2; color: #991b1b; }
.status-inactive { background: #e2e8f0; color: #475569; }

/* ── Dashboard cards ──────────────────────────────────── */

.hero-card {
  background: linear-gradient(135deg, #1d4ed8 0%, #1e40af 100%);
  border-radius: 12px;
  padding: 24px 28px;
  color: #fff;
  max-width: 680px;
  margin-bottom: 20px;
}

.hero-label {
  font-size: 12px;
  font-weight: 600;
  opacity: 0.75;
  text-transform: uppercase;
  letter-spacing: 0.08em;
  margin-bottom: 6px;
}

.hero-title { font-size: 22px; font-weight: 700; margin-bottom: 4px; }
.hero-sub { font-size: 13px; opacity: 0.8; }

.stats-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 14px;
  max-width: 680px;
  margin-bottom: 20px;
}

.stat-card {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 10px;
  padding: 18px 20px;
}

.stat-value {
  font-size: 28px;
  font-weight: 700;
  color: #1e293b;
  font-variant-numeric: tabular-nums;
}

.stat-value.green { color: #16a34a; }
.stat-value.amber { color: #d97706; }
.stat-label { font-size: 12px; color: #64748b; margin-top: 4px; }

/* ── Buttons ──────────────────────────────────────────── */

.btn-primary {
  background: #1d4ed8;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: background 0.15s;
}

.btn-primary:hover { background: #1e40af; }

.btn-secondary {
  background: #fff;
  color: #374151;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  transition: border-color 0.15s;
}

.btn-secondary:hover { border-color: #9ca3af; }

.btn-amber {
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
  border-radius: 8px;
  padding: 10px 20px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 8px;
}

.btn-full { width: 100%; justify-content: center; }

.btn-posted {
  background: #ecfdf5;
  color: #065f46;
  border: 1px solid #a7f3d0;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 12px;
  font-weight: 600;
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  gap: 6px;
  transition: background 0.15s, border-color 0.15s;
}

.btn-posted:hover { background: #d1fae5; border-color: #6ee7b7; }

/* ── Forms ────────────────────────────────────────────── */

.form-group { margin-bottom: 16px; }

.form-label {
  display: block;
  font-size: 13px;
  font-weight: 500;
  color: #374151;
  margin-bottom: 6px;
}

.form-input {
  width: 100%;
  padding: 9px 12px;
  border: 1px solid #d1d5db;
  border-radius: 8px;
  font-size: 14px;
  color: #1e293b;
  background: #fff;
  transition: border-color 0.15s;
}

.form-input:focus {
  outline: none;
  border-color: #3b82f6;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1);
}

.form-input-mono { font-family: monospace; letter-spacing: 0.15em; font-size: 18px; text-align: center; }

/* ── Login page ───────────────────────────────────────── */

body.login-body {
  display: block;
  background: #f1f5f9;
  height: 100vh;
  overflow: auto;
}

.login-container {
  display: flex;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 24px;
}

.login-card {
  background: #fff;
  border-radius: 16px;
  padding: 40px;
  width: 100%;
  max-width: 400px;
  box-shadow: 0 4px 24px rgba(0,0,0,0.08);
}

.login-logo {
  text-align: center;
  margin-bottom: 28px;
}

.login-heading {
  font-size: 18px;
  font-weight: 600;
  color: #1e293b;
  margin-bottom: 24px;
  text-align: center;
}

.login-message {
  background: #fff7ed;
  border: 1px solid #fed7aa;
  color: #9a3412;
  border-radius: 8px;
  padding: 10px 14px;
  font-size: 13px;
  margin-bottom: 16px;
}

.login-mfa-hint {
  font-size: 13px;
  color: #64748b;
  text-align: center;
  margin-bottom: 16px;
}

.form-divider {
  display: flex;
  align-items: center;
  margin: 20px 0;
  gap: 12px;
  color: #94a3b8;
  font-size: 12px;
}

.form-divider::before,
.form-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: #e2e8f0;
}

.login-recovery-link {
  display: block;
  text-align: center;
  margin-top: 12px;
  font-size: 12px;
  color: #64748b;
  text-decoration: underline;
}

.login-hipaa-note {
  margin-top: 24px;
  text-align: center;
  font-size: 11px;
  color: #94a3b8;
  line-height: 1.6;
}

/* ── Dashboard widgets (W-BL-1 through W-BL-5) ─────── */
/* WO-S12b-polish: all widget-* / sla-* / activity-* / reason-* classes */

.widget {
  background: #fff;
  border: 1px solid #e2e8f0;
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 20px;
  /* Mark 2026-04-26: grid items default to min-width:auto which lets
     intrinsic table-content width force the widget WIDER than its
     grid cell — table columns dangle outside the card. min-width:0
     lets the grid track size win; overflow-x:auto adds a horizontal
     scrollbar if a table is still too wide for the cell.
     Surfaced on Owner W-O-5 rule-change-governance trail (5 cols + a
     reason-code-truncate cell up to 240px) inside dashv2-grid 380px
     min-width tracks. */
  min-width: 0;
  overflow-x: auto;
}

.widget-header {
  display: flex;
  flex-direction: row;
  justify-content: space-between;
  align-items: baseline;
  margin-bottom: 12px;
}

.widget-title {
  font-size: 14px;
  font-weight: 600;
  color: #334155;
}

.widget-count {
  display: inline-block;
  background: #f1f5f9;
  color: #475569;
  font-size: 12px;
  font-weight: 600;
  border-radius: 20px;
  padding: 2px 9px;
}

.widget-count-alert {
  display: inline-block;
  background: #fee2e2;
  color: #991b1b;
  font-size: 12px;
  font-weight: 700;
  border-radius: 20px;
  padding: 2px 9px;
}

.widget-empty {
  font-style: italic;
  color: #64748b;
  font-size: 13px;
  padding: 8px 0;
}

.widget-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 13px;
  font-variant-numeric: tabular-nums;
}

.widget-table th {
  text-align: left;
  padding: 6px 8px;
  font-size: 11px;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.05em;
  color: #94a3b8;
  background: #f8fafc;
  border-bottom: 1px solid #e2e8f0;
}

.widget-table td {
  padding: 6px 8px;
  color: #374151;
  border-bottom: 1px solid #f1f5f9;
}

.widget-table tr:last-child td { border-bottom: none; }

.row-at-risk {
  background: #fef2f2;
  border-left: 3px solid #dc2626;
}

.sla-clock-summary {
  display: flex;
  flex-direction: row;
  gap: 24px;
  margin-bottom: 12px;
}

.sla-clock-day {
  font-size: 20px;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
}

.sla-ok    { color: #16a34a; }
.sla-warning { color: #d97706; }
.sla-overdue { color: #dc2626; }

.activity-list {
  list-style: none;
  padding-left: 0;
}

.activity-item {
  display: flex;
  flex-direction: row;
  gap: 8px;
  padding: 8px 0;
  border-bottom: 1px solid #f1f5f9;
}

.activity-item:last-child { border-bottom: none; }

.activity-time {
  color: #64748b;
  font-size: 12px;
  font-variant-numeric: tabular-nums;
  margin-left: auto;
}

.reason-code {
  display: inline;
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
  font-size: 11px;
  background: #f1f5f9;
  padding: 1px 5px;
  border-radius: 3px;
}

.reason-text {
  color: #475569;
  font-size: 13px;
}

.truncate-cell {
  cursor: help;
}

.monospace {
  font-family: ui-monospace, 'SF Mono', Menlo, monospace;
}

.widget-overflow {
  color: #64748b;
  font-size: 12px;
  padding-top: 6px;
}

/* Cycle status badges — map W-BL-1 cycle states to color families */
.status-needs_review       { background: #fef3c7; color: #92400e; }
.status-review_in_progress { background: #fef3c7; color: #92400e; }
.status-approved           { background: #dcfce7; color: #166534; }
.status-exported           { background: #dcfce7; color: #166534; }
/* Post-approval cycle states — treat as green (terminal success). */
.status-posted             { background: #dcfce7; color: #166534; }
.status-reconciled         { background: #dcfce7; color: #166534; }
.status-closed             { background: #dcfce7; color: #166534; }
.status-pending            { background: #f1f5f9; color: #475569; }
.status-uploaded           { background: #f1f5f9; color: #475569; }
.status-processing         { background: #dbeafe; color: #1e40af; }

/* D-10: flag_key column truncation — prevents overflow on long dotted keys */
.reason-code-truncate {
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  display: inline-block;
  vertical-align: bottom;
  white-space: nowrap;
}

/* Mark 2026-04-26: tighter truncation inside dashboard widget tables —
   grid cells are 380px min so a 240px reason-code chip alone consumes
   63% of the row width, forcing the other 4 columns to overflow. 140px
   keeps the chip readable while leaving room for the rest. Falls back
   to widget overflow-x:auto if a flag_key still doesn't fit. */
.widget-table .reason-code-truncate {
  max-width: 140px;
}

/* ── HTMX loading indicator ──────────────────────────── */

.htmx-indicator { display: none; }
.htmx-request .htmx-indicator { display: inline; }
.htmx-request.htmx-indicator { display: inline; }

/* ── Alpine cloak ─────────────────────────────────────── */
[x-cloak] { display: none !important; }

/* ── Disabled Approve button — F-7 a11y contrast fix ─── */
/* Disabled btn-primary must meet WCAG AA 4.5:1 against white bg.
   Ratio of #475569 on #e2e8f0 ≈ 4.6:1 — passes. */
.btn-primary[disabled] {
  background: #e2e8f0;
  color: #475569;
  border: 1px solid #cbd5e1;
  opacity: 1;       /* override any inline opacity so contrast calc applies */
  cursor: not-allowed;
}
.btn-primary[disabled]:focus-visible {
  outline: 2px solid #1d4ed8;
  outline-offset: 2px;
}

/* ── Screen-reader only utility ──────────────────────── */
.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;
}

/* ── Toast notifications — F-8 ───────────────────────── */
#toast-container {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 9999;
  display: flex;
  flex-direction: column;
  gap: 8px;
  pointer-events: none;
}
.toast {
  padding: 10px 16px;
  border-radius: 8px;
  font-size: 13px;
  font-weight: 500;
  max-width: 360px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.12);
  opacity: 0;
  transform: translateX(20px);
  transition: opacity 0.2s ease, transform 0.2s ease;
  pointer-events: auto;
}
.toast.toast-visible {
  opacity: 1;
  transform: translateX(0);
}
.toast-success {
  background: #dcfce7;
  color: #166534;
  border: 1px solid #bbf7d0;
}
.toast-error {
  background: #fee2e2;
  color: #991b1b;
  border: 1px solid #fecaca;
}