/* ── Niles.ai Design System ─────────────────────────────────────────────────
   Brand tokens from CLAUDE.md §11. All component styles are utility-first
   via Tailwind; this file adds:
     1. CSS custom properties (design tokens)
     2. Font imports
     3. Base resets and component classes that can't be done inline
   ─────────────────────────────────────────────────────────────────────── */

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

/* ── Design tokens ─────────────────────────────────────────────────────── */

:root {
  --color-bg:            #f0f2f8;
  --color-surface:       #ffffff;
  --color-primary:       #6366f1;
  --color-primary-dark:  #4f46e5;
  --color-primary-light: #eef2ff;
  --color-danger:        #f43f5e;
  --color-success:       #14b8a6;
  --color-warning:       #f59e0b;
  --color-info:          #0ea5e9;
  --color-text:          #111827;
  --color-text-muted:    #6b7280;
  --color-border:        #e5e7eb;
  --font-body:           'Inter', sans-serif;
  --font-mono:           'JetBrains Mono', monospace;
}

/* ── Base ──────────────────────────────────────────────────────────────── */

/* Hide Alpine-controlled elements before Alpine initializes (prevents flash) */
[x-cloak] { display: none !important; }

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

html { height: 100%; }

body {
  font-family: var(--font-body);
  background-color: var(--color-bg);
  color: var(--color-text);
  min-height: 100%;
  margin: 0;
  -webkit-font-smoothing: antialiased;
}

/* ── Mono elements (CPT codes, amounts, IDs, NPI) ─────────────────────── */

.mono, code, .cpt-code, .amount, .npi, .uuid {
  font-family: var(--font-mono);
}

/* ── Card ──────────────────────────────────────────────────────────────── */

.card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 1.5rem;
}

/* ── Button variants ───────────────────────────────────────────────────── */

.btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  padding: 0.5rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background-color 0.15s, opacity 0.15s;
  text-decoration: none;
}

.btn:disabled { opacity: 0.5; cursor: not-allowed; }

.btn-primary {
  background: var(--color-primary);
  color: #fff;
}
.btn-primary:hover:not(:disabled) { background: var(--color-primary-dark); }

.btn-secondary {
  background: var(--color-primary-light);
  color: var(--color-primary);
}
.btn-secondary:hover:not(:disabled) { background: #e0e7ff; }

.btn-ghost {
  background: transparent;
  color: var(--color-text-muted);
  border: 1px solid var(--color-border);
}
.btn-ghost:hover:not(:disabled) { background: var(--color-bg); }

.btn-danger {
  background: var(--color-danger);
  color: #fff;
}
.btn-danger:hover:not(:disabled) { background: #e11d48; }

/* ── Badge / pill severity colors ──────────────────────────────────────── */

.badge {
  display: inline-flex;
  align-items: center;
  padding: 0.2rem 0.6rem;
  border-radius: 9999px;
  font-size: 0.75rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.badge-high    { background: #fff1f2; color: var(--color-danger); }
.badge-medium  { background: #fffbeb; color: #b45309; }
.badge-low     { background: #f0fdfa; color: #0f766e; }
.badge-info    { background: #f0f9ff; color: #0369a1; }

/* ── Parse status badges ───────────────────────────────────────────────── */

.badge-pending    { background: #f3f4f6; color: var(--color-text-muted); }
.badge-extracting,
.badge-scanning,
.badge-explaining { background: var(--color-primary-light); color: var(--color-primary); }
.badge-complete   { background: #f0fdfa; color: #0f766e; }
.badge-error      { background: #fff1f2; color: var(--color-danger); }

/* ── Form elements ─────────────────────────────────────────────────────── */

.input {
  width: 100%;
  padding: 0.5rem 0.75rem;
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: var(--color-text);
  background: var(--color-surface);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.input:focus {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.15);
}

.select { appearance: none; background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3E%3Cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='M6 8l4 4 4-4'/%3E%3C/svg%3E"); background-repeat: no-repeat; background-position: right 0.5rem center; background-size: 1.25rem; padding-right: 2rem; }

label { display: block; font-size: 0.875rem; font-weight: 500; margin-bottom: 0.375rem; }

/* ── Nav ───────────────────────────────────────────────────────────────── */

.nav {
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  padding: 0 2rem;
  height: 3.5rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  position: sticky;
  top: 0;
  z-index: 50;
}

.nav-brand {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-primary);
  text-decoration: none;
}

/* ── Table ─────────────────────────────────────────────────────────────── */

.table { width: 100%; border-collapse: collapse; font-size: 0.875rem; }
.table th { text-align: left; padding: 0.625rem 0.75rem; font-weight: 600; color: var(--color-text-muted); border-bottom: 1px solid var(--color-border); }
.table td { padding: 0.75rem; border-bottom: 1px solid var(--color-border); vertical-align: top; }
.table tr:last-child td { border-bottom: none; }
.table tr:hover td { background: var(--color-bg); }

/* ── Progress / pulse animation for pending states ─────────────────────── */

@keyframes pulse {
  0%, 100% { opacity: 1; }
  50%       { opacity: 0.5; }
}
.animate-pulse { animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite; }

/* ── Upload drop zone ──────────────────────────────────────────────────── */

.dropzone {
  border: 2px dashed var(--color-border);
  border-radius: 0.75rem;
  padding: 2.5rem;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.15s, background 0.15s;
}
.dropzone.dragover,
.dropzone:hover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

/* ── SSE status progress bar ───────────────────────────────────────────── */

.progress-bar { height: 0.375rem; background: var(--color-border); border-radius: 9999px; overflow: hidden; }
.progress-fill { height: 100%; background: var(--color-primary); border-radius: 9999px; transition: width 0.6s cubic-bezier(0.4, 0, 0.2, 1); }

/* ── Pipeline step animation ──────────────────────────────────────── */

.pipeline-step { display: flex; align-items: center; gap: 0.5rem; transition: color 0.3s ease; }
.pipeline-step-done { color: var(--color-success); }
.pipeline-step-active { color: var(--color-primary); font-weight: 500; }
.pipeline-step-active .step-dot { animation: step-pulse 1.5s ease-in-out infinite; }
@keyframes step-pulse {
  0%, 100% { opacity: 1; }
  50% { opacity: 0.4; }
}

/* ── Alert ─────────────────────────────────────────────────────────────── */

.alert { padding: 0.75rem 1rem; border-radius: 0.5rem; font-size: 0.875rem; display: flex; gap: 0.5rem; align-items: flex-start; }
.alert-error   { background: #fff1f2; color: #9f1239; border: 1px solid #fecdd3; }
.alert-success { background: #f0fdfa; color: #134e4a; border: 1px solid #99f6e4; }
.alert-info    { background: #f0f9ff; color: #075985; border: 1px solid #bae6fd; }
.alert-warning { background: #fffbeb; color: #92400e; border: 1px solid #fde68a; }

/* ── Modal overlay ─────────────────────────────────────────────────────── */

.modal-backdrop {
  position: fixed; inset: 0;
  background: rgba(0,0,0,0.4);
  z-index: 100;
  display: flex; align-items: center; justify-content: center;
}
.modal {
  background: var(--color-surface);
  border-radius: 0.75rem;
  padding: 1.5rem;
  width: 100%;
  max-width: 28rem;
  box-shadow: 0 20px 60px rgba(0,0,0,0.15);
}

/* ── Spinner ───────────────────────────────────────────────────────────── */

.spinner {
  width: 1.25rem; height: 1.25rem;
  border: 2px solid var(--color-border);
  border-top-color: var(--color-primary);
  border-radius: 50%;
  animation: spin 0.6s linear infinite;
  display: inline-block;
}
@keyframes spin { to { transform: rotate(360deg); } }

/* ── Empty state ───────────────────────────────────────────────────────── */

.empty-state {
  text-align: center;
  padding: 3rem 1.5rem;
  color: var(--color-text-muted);
}
.empty-state svg { margin: 0 auto 1rem; opacity: 0.4; }

/* ── Utility: truncate long text ───────────────────────────────────────── */

.truncate { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }

.hamburger-btn { display: none; }

@media (max-width: 768px) { .hide-mobile { display: none !important; } .nav-links { display: none !important; } .nav-links-simple { display: flex !important; } .hamburger-btn { display: flex !important; align-items: center; } .app-footer > .container { flex-direction: column; text-align: center; } }

/* ── Max layout width ──────────────────────────────────────────────────── */

.container { max-width: 72rem; margin: 0 auto; padding: 0 2rem; }

/* ── Reviewer feedback buttons ────────────────────────────────────── */

.feedback-btn {
  padding: 0.25rem 0.625rem;
  border-radius: 9999px;
  font-size: 0.6875rem;
  font-weight: 600;
  cursor: pointer;
  border: 1px solid var(--color-border);
  background: var(--color-surface);
  color: var(--color-text-muted);
  transition: all 0.15s;
}
.feedback-confirm.active { background: #f0fdfa; color: #0f766e; border-color: #14b8a6; }
.feedback-dismiss.active { background: #f3f4f6; color: #374151; border-color: #9ca3af; }
.feedback-review.active  { background: #fffbeb; color: #92400e; border-color: #f59e0b; }

/* ── Feedback badges (read-only display in flag header) ───────────── */

.feedback-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-left: 0.5rem;
  vertical-align: middle;
}
.feedback-badge-confirmed { background: #f0fdfa; color: #0f766e; }
.feedback-badge-dismissed { background: #f3f4f6; color: #374151; }
.feedback-badge-review    { background: #fffbeb; color: #92400e; }

/* ── Flag card overbilling amount — prominent when > 0 ────────────── */

.flag-overbilling-amount {
  font-size: 1.125rem;
  font-weight: 700;
  color: var(--color-danger);
}

/* ── Dashboard stat bar ───────────────────────────────────────────── */

.stat-bar {
  display: grid;
  grid-template-columns: repeat(4, 1fr);
  gap: 1rem;
  margin-bottom: 1.5rem;
}
@media (max-width: 640px) { .stat-bar { grid-template-columns: repeat(2, 1fr); } .stat-card { padding: 0.75rem; overflow: hidden; } .stat-card-value { font-size: clamp(1rem, 4vw, 1.5rem); word-break: break-word; } .summary-card .value { font-size: clamp(1rem, 4vw, 1.5rem); word-break: break-word; } }

.stat-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  box-shadow: 0 1px 3px rgba(0,0,0,0.06);
}

.stat-card-label {
  font-size: 0.75rem;
  font-weight: 500;
  color: var(--color-text-muted);
  text-transform: uppercase;
  letter-spacing: 0.04em;
  margin-bottom: 0.25rem;
}

.stat-card-value {
  font-size: 1.5rem;
  font-weight: 700;
  color: var(--color-text);
}

.stat-card-value.mono {
  font-family: var(--font-mono);
}

/* ── Skeleton loading cards ───────────────────────────────────────── */

.skeleton-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 1.25rem;
}

.skeleton-line {
  background: var(--color-border);
  border-radius: 0.375rem;
  animation: pulse 1.5s ease-in-out infinite;
}

/* ── Mobile responsive (Sprint 22) ──────────────────────────────────── */

/* Nav mobile: stack brand + user on small screens */
@media (max-width: 768px) {
  .nav {
    padding: 0 1rem;
    height: auto;
    min-height: 3rem;
    flex-wrap: wrap;
    gap: 0.25rem;
    padding-top: 0.5rem;
    padding-bottom: 0.5rem;
  }
  .nav-brand { font-size: 1rem; }
  .nav .nav-right { font-size: 0.75rem; gap: 0.5rem; }
}

/* Container: tighter padding on mobile */
@media (max-width: 768px) {
  .container { padding: 0 1rem; }
}

/* Touch targets: 44px min for interactive elements */
@media (max-width: 768px) {
  .btn { min-height: 2.75rem; padding: 0.625rem 1rem; }
  .feedback-btn { min-height: 2.75rem; padding: 0.5rem 0.75rem; font-size: 0.75rem; }
  .filter-btn { min-height: 2.75rem; padding: 0.5rem 0.875rem; }
}

/* Dashboard: card layout on mobile instead of table */
.case-card-mobile {
  display: none;
}

@media (max-width: 768px) {
  .case-table-wrap .table { display: none; }
  .case-card-mobile { display: block; }
  .case-card-mobile .case-card-item {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 0.75rem;
    padding: 1rem;
    margin-bottom: 0.75rem;
    cursor: pointer;
    transition: box-shadow 0.15s;
  }
  .case-card-mobile .case-card-item:active {
    box-shadow: 0 0 0 2px var(--color-primary);
  }
  .case-card-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 0.5rem;
  }
  .case-card-row + .case-card-row { margin-top: 0.375rem; }
  .case-card-subject {
    font-weight: 600;
    font-family: var(--font-mono);
    font-size: 0.9375rem;
  }
  .case-card-meta {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
  }
}

/* Case page: stack two-col on mobile */
@media (max-width: 768px) {
  .two-col { grid-template-columns: 1fr; gap: 1rem; }
}

/* Case page: compact header on mobile */
@media (max-width: 640px) {
  .case-header .case-title { font-size: 1.125rem; }
  .case-meta { font-size: 0.8125rem; gap: 0.5rem; }
  .summary-bar { grid-template-columns: repeat(2, 1fr); gap: 0.75rem; }
  .summary-card .value { font-size: 1.25rem; }
  .dropzone { padding: 1.5rem 1rem; }
}

/* Report page: responsive summary cards */
@media (max-width: 640px) {
  .report-header .report-title { font-size: 1.125rem; }
  .report-meta { font-size: 0.8125rem; gap: 0.5rem; }
  .defense-risk { padding: 1rem; }
  .defense-risk-title { font-size: 0.875rem; }
  .defense-risk-text { font-size: 0.8125rem; }
}

/* Flag cards: tighter on mobile */
@media (max-width: 640px) {
  .flag-card { padding: 0.875rem; }
  .flag-header { flex-direction: column; gap: 0.375rem; }
  .flag-amounts { gap: 1rem; }
  .flag-amount-item { font-size: 0.8125rem; }
  .feedback-buttons { flex-wrap: wrap; }
}

/* Modal: full-width on mobile */
@media (max-width: 640px) {
  .modal { max-width: calc(100vw - 2rem); padding: 1.25rem; }
  .modal-overlay { padding: 0.5rem; }
}

/* Login hero: mobile sizing */
@media (max-width: 640px) {
  .hero { padding: 1.5rem; }
  .hero-logo { font-size: 1.5rem; }
  .hero-tagline { font-size: 1rem; margin-bottom: 2rem; }
  .feature-grid { grid-template-columns: 1fr; gap: 1rem; margin-top: 2rem; }
}

/* Parse method badge */
.badge-method {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 600;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.badge-method-pdfplumber { background: #f0fdfa; color: #0f766e; }
.badge-method-llm { background: #fffbeb; color: #92400e; }
.badge-method-stub { background: #f3f4f6; color: var(--color-text-muted); }
.badge-method-vision { background: #ede9fe; color: #7c3aed; }

/* Confidence indicator */
.confidence-indicator {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
  font-size: 0.6875rem;
  color: var(--color-text-muted);
}
.confidence-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  display: inline-block;
}
.confidence-high { background: var(--color-success); }
.confidence-medium { background: var(--color-warning); }
.confidence-low { background: var(--color-danger); }
.human-review-badge {
  display: inline-flex;
  align-items: center;
  padding: 0.125rem 0.5rem;
  border-radius: 9999px;
  font-size: 0.625rem;
  font-weight: 600;
  background: #fffbeb;
  color: #92400e;
  border: 1px solid #fde68a;
}

/* (Sprint 24 mobile block removed — consolidated into Sprint 29 below) */

/* ── Bulk feedback action bar — Sprint 25 ────────────────────────── */

.bulk-action-bar {
  position: sticky;
  bottom: 1rem;
  z-index: 40;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--color-primary);
  color: #fff;
  border-radius: 0.75rem;
  box-shadow: 0 4px 16px rgba(99, 102, 241, 0.35);
  font-size: 0.875rem;
  font-weight: 500;
  margin-bottom: 0.75rem;
}
.bulk-action-bar .btn {
  font-size: 0.8125rem;
  padding: 0.375rem 0.75rem;
}
.bulk-action-bar .btn-primary {
  background: #fff;
  color: var(--color-primary);
}
.bulk-action-bar .btn-primary:hover:not(:disabled) {
  background: var(--color-primary-light);
}
.bulk-action-bar .btn-ghost {
  background: transparent;
  color: #fff;
  border-color: rgba(255, 255, 255, 0.4);
}
.bulk-action-bar .btn-ghost:hover:not(:disabled) {
  background: rgba(255, 255, 255, 0.15);
}

@media (max-width: 640px) {
  .bulk-action-bar {
    flex-direction: column;
    gap: 0.5rem;
    bottom: 0.5rem;
    padding: 0.625rem 0.75rem;
    font-size: 0.8125rem;
  }
}

/* ── Sprint 25: Dashboard search/filter bar ──────────────────────────── */

.search-filter-bar {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  margin-bottom: 1rem;
}

.search-input-wrap {
  position: relative;
  flex: 1;
  max-width: 24rem;
}

.search-input-wrap .search-icon {
  position: absolute;
  left: 0.75rem;
  top: 50%;
  transform: translateY(-50%);
  color: var(--color-text-muted);
  pointer-events: none;
}

.search-input-wrap .search-input {
  padding-left: 2.25rem;
}

.status-filter-select {
  width: auto;
  min-width: 10rem;
}

.search-result-count {
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  white-space: nowrap;
}

@media (max-width: 640px) {
  .search-filter-bar {
    flex-wrap: wrap;
  }
  .search-input-wrap {
    max-width: 100%;
    width: 100%;
  }
  .status-filter-select {
    flex: 1;
    min-width: 0;
  }
}

/* ── Sprint 25: 5-column stat bar variant ────────────────────────────── */

.stat-bar-5 {
  grid-template-columns: repeat(5, 1fr);
}

@media (max-width: 768px) {
  .stat-bar-5 {
    grid-template-columns: repeat(3, 1fr);
  }
}

@media (max-width: 480px) {
  .stat-bar-5 {
    grid-template-columns: repeat(2, 1fr);
  }
}

/* ── Sprint 25: Case type badges ─────────────────────────────────────── */

.badge-blue   { background: #eff6ff; color: #1d4ed8; }
.badge-orange { background: #fff7ed; color: #c2410c; }
.badge-purple { background: #faf5ff; color: #7c3aed; }
.badge-gray   { background: #f3f4f6; color: #4b5563; }

/* ── C1: Case notes section ──────────────────────────────────────────── */

.case-notes-section {
  margin-bottom: 1.5rem;
}

.case-notes-label {
  display: block;
  font-size: 0.8125rem;
  font-weight: 600;
  color: var(--color-text);
  margin-bottom: 0.375rem;
}

.case-notes-textarea {
  width: 100%;
  padding: 0.625rem 0.75rem;
  font-family: var(--font-body);
  font-size: 0.875rem;
  line-height: 1.5;
  color: var(--color-text);
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  resize: vertical;
  min-height: 4rem;
  transition: border-color 0.15s ease;
  box-sizing: border-box;
}

.case-notes-textarea:focus {
  outline: none;
  border-color: var(--color-primary);
  box-shadow: 0 0 0 3px rgba(99, 102, 241, 0.1);
}

.case-notes-textarea.case-notes-readonly {
  background: var(--color-bg);
  color: var(--color-text-muted);
  cursor: default;
  resize: none;
}

.case-notes-hint {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  margin-top: 0.25rem;
}

/* ── Case context section ──────────────────────────────────────────── */

.case-context-section {
  margin-bottom: 1.5rem;
}

.case-context-border {
  border-left: 3px solid var(--color-info);
}

/* ── Chat panel — Sprint 32 ───────────────────────────────────────── */

.chat-toggle {
  position: fixed;
  bottom: 1.5rem;
  right: 1.5rem;
  width: 3rem;
  height: 3rem;
  border-radius: 50%;
  background: var(--color-primary);
  color: #fff;
  border: none;
  box-shadow: 0 4px 12px rgba(99, 102, 241, 0.3);
  cursor: pointer;
  z-index: 90;
  display: flex;
  align-items: center;
  justify-content: center;
  transition: background 0.15s;
}
.chat-toggle:hover { background: var(--color-primary-dark); }

.chat-panel {
  position: fixed;
  bottom: 5rem;
  right: 1.5rem;
  width: 24rem;
  max-height: 32rem;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  box-shadow: 0 8px 30px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  z-index: 90;
}

.chat-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem 1rem;
  border-bottom: 1px solid var(--color-border);
}

.chat-messages {
  flex: 1;
  overflow-y: auto;
  padding: 0.75rem;
  max-height: 22rem;
}

.chat-msg { margin-bottom: 0.75rem; }

.chat-msg-content {
  padding: 0.5rem 0.75rem;
  border-radius: 0.75rem;
  font-size: 0.8125rem;
  line-height: 1.5;
  white-space: pre-wrap;
}

.chat-msg-user .chat-msg-content {
  background: var(--color-primary);
  color: #fff;
  border-radius: 0.75rem 0.75rem 0.25rem 0.75rem;
  margin-left: 2rem;
}

.chat-msg-assistant .chat-msg-content {
  background: var(--color-bg);
  color: var(--color-text);
  border-radius: 0.75rem 0.75rem 0.75rem 0.25rem;
  margin-right: 2rem;
}

.chat-input-row {
  display: flex;
  gap: 0.5rem;
  padding: 0.75rem;
  border-top: 1px solid var(--color-border);
}

.chat-input {
  flex: 1;
  font-size: 0.8125rem;
}

.chat-send-btn {
  flex-shrink: 0;
  font-size: 0.8125rem;
  padding: 0.5rem 0.75rem;
}

/* ── C2: Severity summary bar ────────────────────────────────────────── */

.severity-summary {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
  display: flex;
  align-items: center;
  gap: 1.5rem;
  flex-wrap: wrap;
}

.severity-summary-counts {
  display: flex;
  gap: 1.25rem;
  align-items: center;
}

.severity-summary-item {
  display: flex;
  align-items: center;
  gap: 0.375rem;
  font-size: 0.875rem;
}

.severity-summary-dot {
  width: 0.5rem;
  height: 0.5rem;
  border-radius: 50%;
  flex-shrink: 0;
}

.severity-dot-high   { background: var(--color-danger); }
.severity-dot-medium { background: var(--color-warning); }
.severity-dot-low    { background: var(--color-success); }
.severity-dot-info   { background: var(--color-info); }

.severity-summary-count {
  font-weight: 700;
  font-family: var(--font-mono);
  font-size: 0.9375rem;
}

.severity-summary-label {
  color: var(--color-text-muted);
  font-size: 0.8125rem;
}

.severity-summary-overbilling {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

.severity-summary-amount {
  font-weight: 700;
  font-size: 1.125rem;
  color: var(--color-danger);
}

.severity-breakdown-bar {
  width: 100%;
  height: 0.375rem;
  border-radius: 0.25rem;
  display: flex;
  overflow: hidden;
  background: var(--color-bg);
}

.severity-bar-segment {
  height: 100%;
  min-width: 2px;
  transition: width 0.3s ease;
}

.severity-bar-high   { background: var(--color-danger); }
.severity-bar-medium { background: var(--color-warning); }
.severity-bar-low    { background: var(--color-success); }
.severity-bar-info   { background: var(--color-info); }

@media (max-width: 640px) {
  .severity-summary {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.75rem;
  }
  .severity-summary-overbilling {
    margin-left: 0;
  }
}

/* (Sprint 27 mobile block removed — consolidated into Sprint 29 below) */

/* ── Sprint 26 D1: Cross-document flag badge ───────────────────────── */

.badge-cross-doc {
  display: inline-block;
  padding: 2px 8px;
  font-size: 0.7rem;
  font-weight: 600;
  border-radius: 9999px;
  background: #eef2ff;
  color: #4f46e5;
  margin-left: 0.5rem;
}

/* ── Dispute letter modal — Sprint 27 ──────────────────────────────── */

.modal-overlay { position:fixed;inset:0;background:rgba(0,0,0,0.5);display:flex;align-items:center;justify-content:center;z-index:100;padding:1rem; }
.letter-type-selector { display:grid;grid-template-columns:1fr 1fr;gap:1rem;margin:1rem 0; }
.radio-card { border:2px solid var(--color-border);border-radius:0.5rem;padding:1rem;cursor:pointer;transition:border-color 0.15s; }
.radio-card.selected { border-color:var(--color-primary);background:var(--color-primary-light); }
.radio-card input[type="radio"] { display:none; }
.radio-card strong { display:block;margin-bottom:0.25rem; }
.radio-card p { margin:0;font-size:0.8125rem;color:var(--color-text-muted);line-height:1.4; }
.letter-result { white-space:pre-wrap;font-family:var(--font-body);line-height:1.7;font-size:0.875rem;background:var(--color-bg);padding:1.25rem;border-radius:0.5rem;border:1px solid var(--color-border);max-height:50vh;overflow-y:auto;margin:1rem 0; }
@media (max-width: 640px) { .letter-type-selector { grid-template-columns:1fr; } }

/* ── Sprint 28: Progress bar animations ──────────────────────────────── */

.progress-fill {
  transition: width 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

@keyframes pulse-glow {
  0%, 100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.2); }
  50% { box-shadow: 0 0 12px 4px rgba(99, 102, 241, 0.15); }
}

.progress-bar.processing {
  animation: pulse-glow 2s ease-in-out infinite;
}

/* ── Sprint 28: Completion checkmark ─────────────────────────────────── */

@keyframes check-pop {
  0% { transform: scale(0); opacity: 0; }
  60% { transform: scale(1.2); }
  100% { transform: scale(1); opacity: 1; }
}

.status-complete-icon {
  animation: check-pop 0.4s ease-out forwards;
  color: var(--color-success);
  font-size: 1.25rem;
  font-weight: 700;
}

/* ── Sprint 28: Flag card entrance animations ────────────────────────── */

@keyframes fade-slide-up {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

.flag-card {
  animation: fade-slide-up 0.3s ease-out both;
}

.flag-card:nth-child(1) { animation-delay: 0.05s; }
.flag-card:nth-child(2) { animation-delay: 0.1s; }
.flag-card:nth-child(3) { animation-delay: 0.15s; }
.flag-card:nth-child(4) { animation-delay: 0.2s; }
.flag-card:nth-child(5) { animation-delay: 0.25s; }
.flag-card:nth-child(n+6) { animation-delay: 0.3s; }

/* ── Sprint 28: Status text fade-in ──────────────────────────────────── */

@keyframes status-fade-in {
  from { opacity: 0; transform: translateY(-4px); }
  to { opacity: 1; transform: translateY(0); }
}

.status-text-animate {
  animation: status-fade-in 0.3s ease-out;
}

/* ── Sprint 28: Shimmer loading skeleton ─────────────────────────────── */

@keyframes shimmer {
  0% { background-position: 200% 0; }
  100% { background-position: -200% 0; }
}

.skeleton-shimmer {
  height: 1rem;
  background: linear-gradient(90deg, var(--color-border) 25%, #f0f0f0 50%, var(--color-border) 75%);
  background-size: 200% 100%;
  animation: shimmer 1.5s infinite;
  border-radius: 4px;
  margin-bottom: 0.75rem;
}

.skeleton-shimmer.short { width: 60%; }

/* ── Sprint 28: Summary card counter animation ───────────────────────── */

@keyframes count-up-fade {
  from { opacity: 0; transform: translateY(8px); }
  to { opacity: 1; transform: translateY(0); }
}

.stat-card-value, .summary-card .value {
  animation: count-up-fade 0.4s ease-out both;
}

/* (Sprint 28 mobile block removed — consolidated into Sprint 29 below) */

/* ── Sprint 33: Filter button active state ────────────────────────── */

.filter-btn.active {
  color: #fff !important;
}

/* ── Sprint 29: Comprehensive mobile fix ─────────────────────────────
   Single block replaces Sprint 24/27/28 mobile blocks.
   All content lives inside <main class="container page">, so the main
   fix is ensuring .container padding propagates and children don't overflow.
   ──────────────────────────────────────────────────────────────────── */

@media (max-width: 768px) {
  /* 1. Kill horizontal overflow at the root */
  html, body {
    overflow-x: hidden;
    max-width: 100vw;
  }

  /* 2. Container: !important guarantees override against inline <style> blocks */
  .container {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    max-width: 100% !important;
    box-sizing: border-box !important;
    overflow-x: hidden;
  }

  /* 2b. Nav bar: reduce from 2rem to 1rem on mobile */
  .nav {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
  }

  /* 2c. Universal child containment — prevent overflow from children */
  .container > *,
  .container > * > * {
    max-width: 100% !important;
    box-sizing: border-box !important;
  }

  /* 3. All box-model safety for interactive/layout elements */
  .flag-card, .stat-card, .card, .summary-card,
  .doc-row, .case-table-wrap, .upload-section,
  .filter-bar, .search-filter-bar, .bulk-action-bar,
  .pagination, .dropzone, .pipeline-progress,
  .severity-summary, .summary-bar, .stat-bar,
  .case-notes-section, .case-notes-textarea,
  .empty-state, .alert, .defense-risk,
  .letter-type-selector, .letter-result,
  table, select, input, textarea {
    max-width: 100%;
    box-sizing: border-box;
  }

  /* 4. Dashboard table: scrollable for 761-768px gap before card layout kicks in */
  .case-table-wrap {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 5. Flag cards: prevent long CPT codes / amounts from overflowing */
  .flag-card {
    overflow: hidden;
    word-break: break-word;
  }

  /* 6. Doc rows: keep icon+info on first line, wrap badges/buttons below */
  .doc-row {
    flex-wrap: wrap !important;
  }
  .doc-row .doc-info {
    flex: 1 1 0% !important;
    min-width: 0;
  }
  .doc-row .doc-name {
    white-space: normal !important;
    word-break: break-word !important;
  }

  /* 7. Severity summary counts + summary bars: wrap */
  .severity-summary-counts {
    flex-wrap: wrap;
    gap: 0.75rem;
  }
  .summary-bar {
    grid-template-columns: 1fr 1fr !important;
  }

  /* 7b. Two-col / documents grid: stack to single column */
  .two-col,
  .documents-grid {
    grid-template-columns: 1fr !important;
  }

  /* 8. Report reduction analysis table: horizontal scroll */
  .defense-risk table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* 9. Pipeline progress: contain width */
  .pipeline-progress {
    overflow: hidden;
  }

  /* 10. Search filter bar: wrap */
  .search-filter-bar {
    flex-wrap: wrap;
  }

  /* 11. Bulk action bar: stay within viewport */
  .bulk-action-bar {
    max-width: calc(100vw - 2rem);
  }

  /* 12. Report/case meta: ensure wrapping */
  .case-meta,
  .report-meta {
    flex-wrap: wrap;
    gap: 0.5rem 1rem;
  }

  /* 13. Mono text and flag rules: break long strings */
  .mono {
    word-break: break-all;
  }
  .flag-rule {
    word-break: break-all;
  }

  /* 14. Modal: full-width with edge buffer */
  .modal {
    max-width: calc(100vw - 2rem);
  }
  .modal-overlay {
    padding: 0.5rem;
  }

  /* 15. Stat bar: ensure no overflow */
  .stat-bar {
    max-width: 100%;
  }

  /* 16. Case header action buttons: wrap (including nested flex divs) */
  .case-header > div {
    flex-wrap: wrap;
  }
  .case-header div[style*="display:flex"] {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* 17. Report header action buttons: stack vertically */
  .report-header .no-print {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* 18. Toast: full width on mobile */
  [x-show="toast"] {
    left: 1rem !important;
    right: 1rem !important;
  }

  /* 19. Letter type selector: single column */
  .letter-type-selector {
    grid-template-columns: 1fr;
  }

  /* 20. Processing info: full width */
  .processing-info {
    max-width: 100%;
  }

  /* 21. Chat panel: full-width bottom sheet */
  .chat-panel {
    left: 0.5rem !important;
    right: 0.5rem !important;
    bottom: 4.5rem !important;
    width: auto !important;
    max-height: 60vh !important;
  }
}

/* ── Sprint 29: Background processing UX ─────────────────────────────── */

.processing-info {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: var(--color-primary-light);
  border: 1px solid #c7d2fe;
  border-radius: 0.5rem;
}

.processing-message {
  margin: 0;
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--color-primary-dark);
}

.processing-estimate {
  margin: 0.25rem 0 0;
  font-size: 0.75rem;
  color: var(--color-text-muted);
}

.processing-elapsed {
  font-size: 0.75rem;
  color: var(--color-text-muted);
  font-family: var(--font-mono);
  margin-left: 0.5rem;
}

.processing-complete {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: #f0fdfa;
  border: 1px solid #99f6e4;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  color: #0f766e;
  display: flex;
  align-items: center;
  gap: 0.5rem;
}

/* ── Sprint 35: CPT Tooltip ────────────────────────────────────────── */

.cpt-tooltip {
  position: fixed;
  z-index: 200;
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.5rem;
  padding: 0.5rem 0.75rem;
  max-width: 280px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  pointer-events: none;
}

.cpt-hover {
  border-bottom: 1px dotted var(--color-text-muted);
}

/* ── Sprint 35: Upload guidance ────────────────────────────────────── */

.upload-guidance {
  margin-top: 0.75rem;
  padding: 0.75rem 1rem;
  background: #f0f9ff;
  border-left: 3px solid var(--color-info);
  border-radius: 0 0.375rem 0.375rem 0;
  font-size: 0.8125rem;
}

/* ── Sprint 35: Top findings card ──────────────────────────────────── */

.top-findings {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-left: 3px solid var(--color-danger);
  border-radius: 0.75rem;
  padding: 1rem 1.25rem;
  margin-bottom: 1.5rem;
}

/* ── Sprint 35: Confidence warning ─────────────────────────────────── */

.confidence-warning {
  font-size: 0.6875rem;
  color: #b45309;
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}
.confidence-warning::before {
  content: '\26A0';
  font-size: 0.625rem;
}

/* ── Sprint 36: Indeterminate progress bar ─────────────────────────── */

.progress-fill.indeterminate {
  animation: indeterminate 1.5s ease-in-out infinite;
  width: 40% !important;
}
@keyframes indeterminate {
  0% { transform: translateX(-100%); }
  100% { transform: translateX(350%); }
}

/* ── Sprint 36: Scan counter ───────────────────────────────────────── */

.scan-counter {
  text-align: center;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  padding: 0.375rem 0;
  animation: status-fade-in 0.3s ease;
}

/* ── Sprint 38: Billing page ─────────────────────────────────────── */

.billing-plans-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(14rem, 1fr));
  gap: 1rem;
}

.billing-plan-card {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 0.75rem;
  padding: 1.25rem;
  display: flex;
  flex-direction: column;
}

.billing-plan-card.billing-plan-current {
  border-color: var(--color-primary);
  box-shadow: 0 0 0 1px var(--color-primary);
}

.billing-plan-name {
  font-size: 1rem;
  font-weight: 700;
  margin-bottom: 0.5rem;
}

.billing-plan-price {
  margin-bottom: 1rem;
}

.billing-plan-amount {
  font-size: 1.5rem;
  font-weight: 700;
  font-family: var(--font-mono);
  color: var(--color-text);
}

.billing-plan-interval {
  font-size: 0.875rem;
  color: var(--color-text-muted);
}

.billing-plan-features {
  list-style: none;
  padding: 0;
  margin: 0 0 1rem;
  flex: 1;
  font-size: 0.8125rem;
  color: var(--color-text-muted);
  line-height: 1.8;
}

.billing-plan-features li::before {
  content: '\2713 ';
  color: var(--color-success);
  font-weight: 600;
  margin-right: 0.375rem;
}

.billing-usage-bar {
  height: 0.5rem;
  background: var(--color-border);
  border-radius: 9999px;
  overflow: hidden;
}

.billing-usage-fill {
  height: 100%;
  background: var(--color-primary);
  border-radius: 9999px;
  transition: width 0.3s ease;
}

.billing-usage-fill.billing-usage-warning {
  background: var(--color-warning);
}

.billing-usage-fill.billing-usage-danger {
  background: var(--color-danger);
}

.nav-plan-badge {
  font-size: 0.75rem;
  padding: 0.25rem 0.625rem;
  background: var(--color-primary-light);
  color: var(--color-primary-dark);
  border-radius: 9999px;
  font-weight: 500;
  white-space: nowrap;
}

/* Sprint 39 — Nav links */
.nav-links { display: flex; align-items: center; gap: 0.25rem; }
.nav-link { font-size: 0.875rem; font-weight: 500; color: var(--color-text-muted); text-decoration: none; padding: 0.375rem 0.75rem; border-radius: 0.375rem; transition: color 0.15s, background 0.15s; }
.nav-link:hover { color: var(--color-text); background: var(--color-bg); }
.nav-link-active { color: var(--color-primary); background: var(--color-primary-light); }

/* Sprint 39 — Footer */
.app-footer { border-top: 1px solid var(--color-border); padding: 1.5rem 2rem; margin-top: auto; font-size: 0.8125rem; color: var(--color-text-muted); }
.app-footer a { color: var(--color-text-muted); text-decoration: none; }
.app-footer a:hover { color: var(--color-primary); }

/* Sprint 39 — Paywall card */
.paywall-card { border: 2px solid var(--color-primary); background: linear-gradient(135deg, var(--color-primary-light) 0%, var(--color-surface) 100%); }

/* Sprint 39 — Print: hide footer */
@media print { .app-footer { display: none !important; } }

.nav-logo-icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
  transition: transform 0.3s ease, color 0.3s ease;
}

.nav-logo-icon:hover {
  transform: rotate(90deg);
  color: var(--color-danger);
}

.nav-logo-svg {
  width: 1.75rem;
  height: 1.75rem;
  fill: currentColor;
}

.nav-brand-text {
  text-transform: uppercase;
  letter-spacing: 0.15em;
  font-weight: 700;
}

/* ── Sprint 41: Brand cohesion — Footer logo ─────────────────────────── */

.footer-brand {
  display: inline-flex;
  align-items: center;
  gap: 0.375rem;
}

.footer-logo-icon {
  display: inline-flex;
  align-items: center;
  color: var(--color-primary);
}

.footer-logo-svg {
  width: 1.25rem;
  height: 1.25rem;
  fill: currentColor;
}

.footer-brand-text {
  font-weight: 600;
}

/* ── Sprint 41: Brand cohesion — Print header logo ───────────────────── */

.print-header-logo-icon {
  display: inline-block;
  width: 1.25rem;
  height: 1.25rem;
  vertical-align: middle;
  margin-right: 0.25rem;
}

.print-header-logo-icon svg {
  width: 1.25rem;
  height: 1.25rem;
}

/* ── Sprint 41: Brand cohesion — Mobile ──────────────────────────────── */

@media (max-width: 400px) {
  .nav-brand-text { display: none; }
}

/* ── Sprint 43: Scroll-based logo animation ──────────────────────────── */

.nav-logo-icon.logo-scrolled {
  color: var(--color-danger);
  transform: rotate(90deg);
}

/* ── Sprint 43: Full-width flags section ─────────────────────────────── */

.flags-section-full { margin-top: 1.5rem; }
.flags-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1rem; }
@media (max-width: 900px) { .flags-grid { grid-template-columns: 1fr; } }

/* ── Sprint 45: Documents grid (replaces two-col on case page) ───────── */

.documents-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; align-items: start; margin-bottom: 2rem; }

/* ── Sprint 45: Swipe-to-delete (mobile dashboard) ──────────────────── */

.case-card-swipe-wrap {
  position: relative;
  overflow: hidden;
}
.case-card-swipe-delete {
  position: absolute;
  right: 0;
  top: 0;
  bottom: 0;
  width: 5rem;
  background: linear-gradient(135deg, #ef4444, #dc2626);
  border-radius: 0 0.75rem 0.75rem 0;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* === Sprint 47: Footer logo hover === */
.footer-logo-icon { transition: transform 0.3s ease, color 0.3s ease; }
.footer-logo-icon:hover { transform: rotate(90deg); color: var(--color-danger); }

/* === Sprint 47: Chat bubble label === */
.chat-toggle {
  width: auto;
  height: auto;
  border-radius: 1.5rem;
  padding: 0.625rem 1rem;
  gap: 0.5rem;
}
.chat-toggle-label {
  font-size: 0.8125rem;
  font-weight: 600;
  white-space: nowrap;
}

/* === Sprint 47: Swipe-right-to-close (mobile dashboard) === */
.case-card-swipe-close {
  position: absolute;
  left: 0;
  top: 0;
  bottom: 0;
  width: 5rem;
  background: linear-gradient(135deg, #f59e0b, #d97706);
  border-radius: 0.75rem 0 0 0.75rem;
  color: #fff;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.8125rem;
  font-weight: 700;
  letter-spacing: 0.02em;
}

/* ── Sprint 45: Mobile case card layout + documents-grid ─────────────── */

@media (max-width: 768px) {
  .container { padding: 0 1rem !important; }
  .documents-grid { grid-template-columns: 1fr !important; }
  .case-card-row {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.25rem;
  }
  .case-card-subject {
    width: 100%;
    font-size: 0.9375rem;
  }
  .case-card-row .badge {
    font-size: 0.6875rem;
    padding: 0.125rem 0.375rem;
  }
  .chat-toggle-label { display: none !important; }
  .chat-toggle { width: 3rem !important; height: 3rem !important; padding: 0 !important; border-radius: 50% !important; }
  .scorecard-grid, .dashboard-stats-grid { grid-template-columns: repeat(2, 1fr); }

  /* Sprint 61: Billing plan cards — stack vertically */
  .billing-plans-grid { grid-template-columns: 1fr !important; }

  /* Sprint 61: Case page tabs — horizontal scroll */
  .case-tabs, [style*="border-bottom:2px"] {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
  }
  .case-tabs::-webkit-scrollbar { display: none; }

  /* Sprint 61: Modals — full-width on mobile */
  .modal-overlay > div,
  .onboarding-modal,
  .dismiss-modal {
    max-width: calc(100vw - 2rem) !important;
    width: calc(100vw - 2rem) !important;
    margin: 1rem;
  }

  /* Sprint 61: Table responsiveness — horizontal scroll */
  .case-table-wrap,
  table { display: block; overflow-x: auto; -webkit-overflow-scrolling: touch; }

  /* Sprint 61: Typography — prevent long strings from overflowing */
  .case-card-subject,
  .flag-card,
  h1, h2, h3 {
    word-break: break-word;
    overflow-wrap: break-word;
  }

  /* Sprint 61: Code blocks — horizontal scroll */
  pre, code, .code-block {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    max-width: calc(100vw - 2rem);
  }

  /* Sprint 61: Help page — single column */
  .help-sidebar { display: none; }
  .help-content { max-width: 100%; }

  /* Sprint 61: Settings account grid — single column */
  .account-grid { grid-template-columns: 1fr !important; }

  /* Sprint 61: Nav plan badge — hide on small screens */
  .nav-right .nav-plan-badge { display: none; }

  /* Sprint 75: Touch-friendly buttons */
  .btn, .filter-btn { min-height: 2.75rem; }
  .feedback-btn { min-height: 2.25rem; }

  /* Sprint 75: Super admin tabs scroll */
  .sa-tabs { overflow-x: auto; -webkit-overflow-scrolling: touch; }
  .sa-tab { white-space: nowrap; flex-shrink: 0; }

  /* Sprint 75: Dark mode filter bar inputs */
  [data-theme="dark"] .filter-bar input,
  [data-theme="dark"] .filter-bar select {
    background: var(--color-surface);
    color: var(--color-text);
    border-color: var(--color-border);
  }
}

.case-card-item {
  transition: transform 0.2s ease;
  position: relative;
  z-index: 1;
  background: var(--color-surface);
}

/* Sprint 57 — Tooltip styles */
.tooltip-trigger { position: relative; cursor: help; }
.tooltip-trigger .tooltip-text {
    visibility: hidden; opacity: 0; position: absolute;
    bottom: 125%; left: 50%; transform: translateX(-50%);
    background: #1f2937; color: #fff; padding: 8px 12px;
    border-radius: 6px; font-size: 0.8rem; max-width: 280px;
    white-space: normal; z-index: 10; transition: opacity 0.2s;
    pointer-events: none;
}
.tooltip-trigger .tooltip-text::after {
    content: ''; position: absolute; top: 100%; left: 50%;
    transform: translateX(-50%); border: 5px solid transparent;
    border-top-color: #1f2937;
}
.tooltip-trigger:hover .tooltip-text { visibility: visible; opacity: 1; }

/* Sprint 57 — Onboarding modal */
.onboarding-backdrop {
    position: fixed; inset: 0; background: rgba(0,0,0,0.5);
    z-index: 50; display: flex; align-items: center; justify-content: center;
}
.onboarding-modal {
    background: #fff; border-radius: 12px; padding: 2rem;
    max-width: 540px; width: 90%; box-shadow: 0 25px 50px rgba(0,0,0,0.25);
    color: #111827;
}
[data-theme="dark"] .onboarding-modal {
    background: var(--color-surface);
    color: #f1f5f9;
}
.onboarding-steps { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; }
.onboarding-step-dot {
    width: 8px; height: 8px; border-radius: 50%; background: #e5e7eb;
    transition: background 0.2s;
}
.onboarding-step-dot.active { background: #6366f1; }
.onboarding-step-content { min-height: 200px; }
.onboarding-actions { display: flex; justify-content: space-between; margin-top: 1.5rem; }

/* Sprint 57 — Enhanced empty state */
.empty-state-enhanced {
    text-align: center; padding: 2.5rem 1.5rem;
}
.empty-state-icon {
    display: flex; align-items: center; justify-content: center;
    width: 3.5rem; height: 3.5rem; border-radius: 50%;
    background: var(--color-primary-light); margin: 0 auto 1rem;
}
.empty-state-formats {
    display: flex; gap: 0.5rem; justify-content: center;
    flex-wrap: wrap; margin-top: 0.75rem;
}
.format-tag {
    font-size: 0.6875rem; font-family: var(--font-mono);
    padding: 0.125rem 0.5rem; background: var(--color-bg);
    border: 1px solid var(--color-border); border-radius: 9999px;
    color: var(--color-text-muted);
}


/* ── Sprint 59: Scorecard & Dashboard Stats ──────────────────────────── */
.scorecard-grid, .dashboard-stats-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
    gap: 1rem;
    margin-bottom: 1.5rem;
}
.scorecard-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.25rem;
    text-align: center;
}
.scorecard-score { font-size: 2rem; font-weight: 700; }
.scorecard-score.high { color: var(--color-danger); }
.scorecard-score.medium { color: var(--color-warning); }
.scorecard-score.low { color: var(--color-success); }
.scorecard-label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-top: 0.25rem;
}
.text-2xl { font-size: 1.5rem; }
.font-bold { font-weight: 700; }
.font-mono { font-family: var(--font-mono); }

/* Sprint 61: Quick-start cards */
.quick-start-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
    gap: 1.25rem;
    margin-top: 1.5rem;
}
.quick-start-card {
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 12px;
    padding: 1.5rem;
    text-align: center;
    transition: border-color 0.15s;
}
.quick-start-card:hover { border-color: var(--color-primary); }
.quick-start-card-icon {
    font-size: 1.75rem;
    margin-bottom: 0.75rem;
}
.quick-start-card-title {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: var(--color-text);
}
.quick-start-card-desc {
    font-size: 0.8125rem;
    color: var(--color-text-muted);
    line-height: 1.4;
}

/* Sprint 61: First-upload celebration */
.first-upload-banner {
    background: #f0fdf4;
    border: 1px solid #bbf7d0;
    border-radius: 12px;
    padding: 1rem 1.25rem;
    margin-bottom: 1rem;
    display: flex;
    align-items: center;
    gap: 0.75rem;
}
.first-upload-icon {
    font-size: 1.5rem;
    color: #16a34a;
    flex-shrink: 0;
}
.first-upload-title { font-weight: 600; color: #166534; }
.first-upload-desc { font-size: 0.8125rem; color: #15803d; }

/* Sprint 61: API docs code blocks */
.code-block {
    position: relative;
    background: #1e1e2e;
    color: #cdd6f4;
    border-radius: 8px;
    padding: 1rem;
    margin: 0.75rem 0;
    overflow-x: auto;
    font-family: var(--font-mono);
    font-size: 0.8125rem;
    line-height: 1.6;
}
.code-block .copy-btn {
    position: absolute;
    top: 0.5rem;
    right: 0.5rem;
    background: rgba(255,255,255,0.1);
    color: #cdd6f4;
    border: none;
    padding: 0.25rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    cursor: pointer;
}
.code-block .copy-btn:hover { background: rgba(255,255,255,0.2); }
.method-badge {
    display: inline-block;
    padding: 0.125rem 0.5rem;
    border-radius: 4px;
    font-size: 0.6875rem;
    font-weight: 700;
    font-family: var(--font-mono);
    text-transform: uppercase;
}
.method-get { background: #dcfce7; color: #166534; }
.method-post { background: #dbeafe; color: #1e40af; }
.method-patch { background: #fef3c7; color: #92400e; }
.method-delete { background: #fecaca; color: #991b1b; }

/* Sprint 61: Help page section styles */
.help-section {
    border: 1px solid var(--color-border);
    border-radius: 12px;
    margin-bottom: 1rem;
    background: var(--color-surface);
}
.help-section summary {
    padding: 1rem 1.25rem;
    font-weight: 600;
    cursor: pointer;
    list-style: none;
}
.help-section summary::-webkit-details-marker { display: none; }
.help-section summary::before {
    content: '+';
    display: inline-block;
    width: 1.25rem;
    font-weight: 700;
    color: var(--color-primary);
}
.help-section[open] summary::before { content: '\2212'; }
.help-section-content {
    padding: 0 1.25rem 1.25rem;
    font-size: 0.875rem;
    line-height: 1.6;
    color: var(--color-text-muted);
}
.help-section-content h4 {
    color: var(--color-text);
    margin: 1rem 0 0.5rem;
    font-size: 0.9375rem;
}
.help-section-content ul {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}
.help-section-content li { margin-bottom: 0.25rem; }
.help-section-content ol {
    margin: 0.5rem 0;
    padding-left: 1.5rem;
}

/* Sprint 63: Fair price table */
.fair-price-table th { font-weight: 600; color: var(--color-text-muted); font-size: 0.75rem; text-transform: uppercase; letter-spacing: 0.04em; }
.fair-price-table tr:hover { background: var(--color-bg); }

/* ── Sprint 70: Dark Mode ──────────────────────────────────────────────────── */

[data-theme="dark"] {
  --color-bg:            #0f172a;
  --color-surface:       #1e293b;
  --color-primary:       #818cf8;
  --color-primary-dark:  #6366f1;
  --color-primary-light: #1e1b4b;
  --color-danger:        #fb7185;
  --color-success:       #2dd4bf;
  --color-warning:       #fbbf24;
  --color-info:          #38bdf8;
  --color-text:          #f1f5f9;
  --color-text-muted:    #94a3b8;
  --color-border:        #334155;
}

/* Inputs, selects, textareas */
[data-theme="dark"] input,
[data-theme="dark"] textarea,
[data-theme="dark"] select {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  color: var(--color-text);
}
[data-theme="dark"] input::placeholder,
[data-theme="dark"] textarea::placeholder {
  color: var(--color-text-muted);
}

/* Cards and surfaces */
[data-theme="dark"] .card,
[data-theme="dark"] .content-card,
[data-theme="dark"] .kpi-card,
[data-theme="dark"] .detail-panel {
  background-color: var(--color-surface);
  border-color: var(--color-border);
  box-shadow: 0 1px 3px rgba(0,0,0,0.3);
}

/* Tables */
[data-theme="dark"] th {
  background-color: var(--color-bg);
  color: var(--color-text-muted);
}
[data-theme="dark"] tr:hover {
  background-color: rgba(255,255,255,0.03);
}
[data-theme="dark"] td {
  border-color: var(--color-border);
}

/* Code blocks */
[data-theme="dark"] code,
[data-theme="dark"] .font-mono,
[data-theme="dark"] pre {
  background-color: rgba(255,255,255,0.05);
}

/* Sprint 75: Dark mode override for inline <code> with hardcoded backgrounds */
[data-theme="dark"] p code,
[data-theme="dark"] li code,
[data-theme="dark"] ol code,
[data-theme="dark"] td code {
  background: rgba(129,140,248,0.15) !important;
  color: var(--color-primary) !important;
}
[data-theme="dark"] pre code,
[data-theme="dark"] .mcp-code-block code,
[data-theme="dark"] .api-code-block code {
  background: transparent !important;
  color: inherit !important;
}

/* Sprint 75: Reusable inline-code class */
.inline-code {
  font-family: var(--font-mono);
  font-size: 0.8125rem;
  background: #f3f4f6;
  padding: 0.125rem 0.375rem;
  border-radius: 0.25rem;
}
[data-theme="dark"] .inline-code {
  background: rgba(129,140,248,0.15);
  color: var(--color-primary);
}

/* Nav */
[data-theme="dark"] .nav {
  background-color: var(--color-surface);
  border-color: var(--color-border);
}

/* Skeleton loading */
[data-theme="dark"] .skeleton {
  background: linear-gradient(90deg, var(--color-surface) 25%, rgba(255,255,255,0.06) 50%, var(--color-surface) 75%);
}

/* Scrollbar (WebKit) */
[data-theme="dark"] ::-webkit-scrollbar-track { background: var(--color-bg); }
[data-theme="dark"] ::-webkit-scrollbar-thumb { background: var(--color-border); }

/* Fair price table hover — now uses var(--color-bg) in light mode, variable handles dark automatically */

/* Modal/dialog overlay */
[data-theme="dark"] .modal-overlay {
  background: rgba(0,0,0,0.6);
}
[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal {
  background-color: var(--color-surface);
  border-color: var(--color-border);
}

/* Alerts */
[data-theme="dark"] .alert-error { background: rgba(251,113,133,0.15); border-color: rgba(251,113,133,0.3); }
[data-theme="dark"] .alert-success { background: rgba(45,212,191,0.15); border-color: rgba(45,212,191,0.3); }
[data-theme="dark"] .alert-info { background: rgba(56,189,248,0.15); border-color: rgba(56,189,248,0.3); }
[data-theme="dark"] .alert-warning { background: rgba(245,158,11,0.15); border-color: rgba(245,158,11,0.3); color: #fbbf24; }

/* Footer */
[data-theme="dark"] .app-footer { background-color: var(--color-surface); border-color: var(--color-border); }

/* Upload zone */
[data-theme="dark"] .upload-zone { background-color: var(--color-bg); border-color: var(--color-border); }
[data-theme="dark"] .upload-zone:hover { background-color: var(--color-surface); }

/* Chat panel */
[data-theme="dark"] .chat-panel { background-color: var(--color-surface); border-color: var(--color-border); }

/* Filter bar */
[data-theme="dark"] .filter-bar { background-color: var(--color-surface); }

/* Help sections */
[data-theme="dark"] .help-section-header { background-color: var(--color-surface); }
[data-theme="dark"] .help-section-header:hover { background-color: rgba(255,255,255,0.03); }

/* API/MCP docs */
[data-theme="dark"] .api-code-block,
[data-theme="dark"] .mcp-code-block { background-color: #0d1117; }
[data-theme="dark"] .api-sidebar,
[data-theme="dark"] .mcp-sidebar { background-color: var(--color-surface); border-color: var(--color-border); }

/* Theme toggle button */
.theme-toggle {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2rem;
  height: 2rem;
  padding: 0;
  border: none;
  background: transparent;
  color: var(--color-text-muted);
  cursor: pointer;
  border-radius: 0.375rem;
  transition: color 0.15s, background-color 0.15s;
}
.theme-toggle:hover {
  color: var(--color-text);
  background-color: rgba(0,0,0,0.05);
}
[data-theme="dark"] .theme-toggle:hover {
  background-color: rgba(255,255,255,0.1);
}
.theme-icon-sun { display: none; }
[data-theme="dark"] .theme-icon-moon { display: none; }
[data-theme="dark"] .theme-icon-sun { display: block; }

/* Case notes chevron — explicit size override */
.case-notes-chevron {
  width: 1.25rem !important;
  height: 1.25rem !important;
  flex-shrink: 0;
}

/* API docs dark mode — endpoint interactions */
[data-theme="dark"] .api-endpoint-header:hover {
  background: rgba(255,255,255,0.05);
}

/* API docs dark mode — info boxes */
[data-theme="dark"] .api-info-box {
  background: rgba(129,140,248,0.1);
  border-color: rgba(129,140,248,0.25);
}
[data-theme="dark"] .api-info-box code {
  background: rgba(129,140,248,0.2);
  color: var(--color-primary);
}

/* API docs dark mode — method badges */
[data-theme="dark"] .method-get    { background: rgba(34,197,94,0.15);  color: #4ade80; }
[data-theme="dark"] .method-post   { background: rgba(59,130,246,0.15); color: #60a5fa; }
[data-theme="dark"] .method-patch  { background: rgba(245,158,11,0.15); color: #fbbf24; }
[data-theme="dark"] .method-delete { background: rgba(244,63,94,0.15);  color: #fb7185; }

/* API docs dark mode — sidebar links */
[data-theme="dark"] .api-sidebar-link:hover {
  background: rgba(129,140,248,0.1);
}
[data-theme="dark"] .api-sidebar-link.active {
  background: rgba(129,140,248,0.15);
}

/* API docs dark mode — param tables */
[data-theme="dark"] .api-param-table th {
  background-color: rgba(255,255,255,0.03);
}

/* API docs dark mode — tabs */
[data-theme="dark"] .api-tab:hover {
  color: var(--color-text);
  background: rgba(255,255,255,0.05);
}

/* API docs dark mode — code block border */
[data-theme="dark"] .api-code-wrap {
  border-color: #334155;
}

/* API docs dark mode — rate/error tables */
[data-theme="dark"] .api-rate-table th {
  background-color: rgba(255,255,255,0.03);
}

/* Report page dark mode */
[data-theme="dark"] .defense-risk {
  background: linear-gradient(135deg, rgba(251,113,133,0.1) 0%, rgba(251,113,133,0.05) 100%);
  border-color: rgba(251,113,133,0.25);
}
[data-theme="dark"] .defense-risk-title { color: #fb7185; }
[data-theme="dark"] .defense-risk-text { color: #fda4af; }

[data-theme="dark"] .flag-recommendation {
  background: rgba(251,191,36,0.1);
  border-color: rgba(251,191,36,0.2);
}

/* Tooltip dark mode */
[data-theme="dark"] .tooltip-text,
[data-theme="dark"] .cpt-tooltip {
  background: var(--color-surface);
  color: var(--color-text);
  border: 1px solid var(--color-border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* MCP docs dark mode — inline code in messages */
[data-theme="dark"] .mcp-msg-text code {
  background: rgba(129,140,248,0.15);
  color: var(--color-primary);
}

/* MCP docs dark mode — info box */
[data-theme="dark"] .mcp-info-box {
  background: rgba(129,140,248,0.1);
  border-color: rgba(129,140,248,0.25);
}
[data-theme="dark"] .mcp-info-box code {
  background: rgba(129,140,248,0.2);
  color: var(--color-primary);
}

/* MCP docs dark mode — tool badges */
[data-theme="dark"] .mcp-tool-badge {
  background: rgba(129,140,248,0.15);
  color: var(--color-primary);
}

/* MCP docs dark mode — table header */
[data-theme="dark"] .mcp-table th {
  background-color: rgba(255,255,255,0.03);
}

/* MCP docs dark mode — sidebar links */
[data-theme="dark"] .mcp-sidebar-link:hover {
  background: rgba(129,140,248,0.1);
}
[data-theme="dark"] .mcp-sidebar-link.active {
  background: rgba(129,140,248,0.15);
}

/* MCP docs dark mode — tabs hover */
[data-theme="dark"] .mcp-tab:hover {
  color: var(--color-text);
  background: rgba(255,255,255,0.05);
}

/* MCP docs dark mode — code wrap border */
[data-theme="dark"] .mcp-code-wrap {
  border-color: #334155;
}

/* MCP docs dark mode — conversation messages */
[data-theme="dark"] .mcp-conversation {
  border-color: var(--color-border);
}
[data-theme="dark"] .mcp-msg {
  border-color: var(--color-border);
}

/* Fair price explainer box */
.fair-price-explainer {
  background: #f0f9ff;
  border: 1px solid #bae6fd;
  color: #0c4a6e;
}
[data-theme="dark"] .fair-price-explainer {
  background: rgba(56,189,248,0.1);
  border-color: rgba(56,189,248,0.25);
  color: #7dd3fc;
}

/* Owner dashboard nav link */
.nav-link-admin {
  color: var(--color-primary) !important;
  font-weight: 600;
}
[data-theme="dark"] .nav-link-admin {
  color: var(--color-primary) !important;
}

/* ── Sprint 74: Savings card (case page) ──────────────────────────────────── */
.savings-card {
  background: linear-gradient(135deg, #eef2ff, #ffffff);
  border: 1px solid #c7d2fe;
}
.savings-card-title { color: #4338ca; }
.savings-card-amount { color: #4f46e5; }
.savings-card-link { color: #4f46e5; }
.progress-track { background: #e5e7eb; overflow: hidden; border-radius: 9999px; }

[data-theme="dark"] .savings-card {
  background: linear-gradient(135deg, rgba(129,140,248,0.1), rgba(129,140,248,0.05));
  border-color: rgba(129,140,248,0.25);
}
[data-theme="dark"] .savings-card-title { color: #a5b4fc; }
[data-theme="dark"] .savings-card-amount { color: #818cf8; }
[data-theme="dark"] .savings-card-link { color: #818cf8; }
[data-theme="dark"] .progress-track { background: #334155; }

/* ── Sprint 74: Case page tab navigation ──────────────────────────────────── */
.case-tab-nav {
  display: flex;
  gap: 0.5rem;
  border-bottom: 2px solid var(--color-border);
  padding-bottom: 0;
}
.case-tab {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem 1rem;
  font-size: 0.9rem;
  margin-bottom: -2px;
  color: var(--color-text-muted);
  transition: color 0.15s;
}
.case-tab:hover { color: var(--color-text); }
.case-tab.active {
  border-bottom: 2px solid var(--color-primary);
  color: var(--color-primary);
  font-weight: 600;
}
[data-theme="dark"] .case-tab-nav { border-bottom-color: #475569; }

/* ── Sprint 74: Keyboard-selected flag highlight ──────────────────────────── */
.flag-card.flag-selected {
  outline: 2px solid var(--color-primary);
  outline-offset: -2px;
  box-shadow: 0 0 0 4px rgba(99,102,241,0.15);
}
[data-theme="dark"] .flag-card.flag-selected {
  box-shadow: 0 0 0 4px rgba(129,140,248,0.2);
}

/* ── Sprint 74: Keyboard shortcut hint ────────────────────────────────────── */
.kbd-hint {
  display: flex;
  gap: 1rem;
  font-size: 0.75rem;
  color: var(--color-text-muted);
  padding: 0.375rem 0;
}
.kbd-hint kbd {
  display: inline-block;
  padding: 0.125rem 0.375rem;
  font-family: var(--font-mono);
  font-size: 0.6875rem;
  background: var(--color-bg);
  border: 1px solid var(--color-border);
  border-radius: 0.25rem;
  box-shadow: 0 1px 0 var(--color-border);
}

/* Sprint 75: Mobile hamburger menu */
.hamburger-btn {
  background: none;
  border: none;
  cursor: pointer;
  padding: 0.5rem;
  color: var(--color-text);
  border-radius: 0.375rem;
}
.hamburger-btn svg { width: 24px; height: 24px; }
.hamburger-btn:hover { background: rgba(0,0,0,0.05); }
[data-theme="dark"] .hamburger-btn:hover { background: rgba(255,255,255,0.1); }

.mobile-menu {
  display: none;
  position: fixed;
  top: 3.5rem;
  left: 0;
  right: 0;
  background: var(--color-surface);
  border-bottom: 1px solid var(--color-border);
  box-shadow: 0 4px 12px rgba(0,0,0,0.1);
  z-index: 49;
  padding: 0.5rem 0;
  flex-direction: column;
  max-height: calc(100vh - 3.5rem);
  overflow-y: auto;
}
.mobile-menu.open { display: flex; }
.mobile-menu .nav-link {
  display: block;
  padding: 0.875rem 1.5rem;
  font-size: 0.9375rem;
  border-radius: 0;
  border-bottom: 1px solid var(--color-border);
}
.mobile-menu .nav-link:last-child { border-bottom: none; }
.mobile-menu .nav-link:hover { background: var(--color-bg); }
.mobile-menu .nav-link-active { background: var(--color-primary-light); color: var(--color-primary); font-weight: 600; }
.mobile-menu .nav-link-admin { color: var(--color-primary); font-weight: 600; }
[data-theme="dark"] .mobile-menu { box-shadow: 0 4px 12px rgba(0,0,0,0.4); }
[data-theme="dark"] .mobile-menu .nav-link-active { background: rgba(129,140,248,0.15); }
[data-theme="dark"] .owner-exclusion-note { background: rgba(129,140,248,0.1); }
@media (max-width: 768px) {
  .nav-right { gap: 0.5rem; }
  .nav-right .btn-ghost { font-size: 0.75rem; padding: 0.25rem 0.5rem; }
}

/* Sprint 77: Toast animation */
.toast-slide-in { animation: slideInRight 0.3s ease-out; }
@keyframes slideInRight {
  from { transform: translateX(100%); opacity: 0; }
  to { transform: translateX(0); opacity: 1; }
}

/* Sprint 77: Theme transitions */
body, .nav, .card, .content-card, .kpi-card, .modal-content,
.app-footer, .filter-bar, input, textarea, select {
  transition: background-color 0.2s ease, border-color 0.2s ease, color 0.2s ease;
}

/* Sprint 77: Focus-visible states */
.btn:focus-visible, .input:focus-visible, .filter-btn:focus-visible, .nav-link:focus-visible {
  outline: 2px solid var(--color-primary);
  outline-offset: 2px;
}

/* Sprint 77: Dark mode — report callouts */
[data-theme="dark"] .defense-risk { background: rgba(244,63,94,0.1); border-color: rgba(244,63,94,0.25); }
[data-theme="dark"] .defense-risk-title { color: #fda4af; }
[data-theme="dark"] .defense-risk-text { color: #fb7185; }
[data-theme="dark"] .flag-recommendation { background: rgba(245,158,11,0.1); border-color: rgba(245,158,11,0.25); color: #fbbf24; }

/* Sprint 60: Print stylesheet */
@media print {
    .nav, .app-footer, .btn, .filter-bar, .bulk-action-bar, .chat-toggle,
    .chat-panel, .upload-zone, details summary { display: none !important; }
    .container { max-width: 100% !important; padding: 0 !important; margin: 0 !important; }
    .content-card { box-shadow: none !important; border: 1px solid #ddd !important; break-inside: avoid; }
    .flag-card { break-inside: avoid; }
    body { background: #fff !important; }
    [data-theme="dark"] {
      --color-bg: #ffffff !important;
      --color-surface: #ffffff !important;
      --color-text: #111827 !important;
      --color-text-muted: #6b7280 !important;
      --color-border: #e5e7eb !important;
    }
}

/* ── Sprint 81: Dark mode overrides for inline/hardcoded colors ─────── */

[data-theme="dark"] .badge-method-pdfplumber { background: rgba(15,118,110,0.15); color: #5eead4; }
[data-theme="dark"] .badge-method-llm { background: rgba(146,64,14,0.15); color: #fbbf24; }
[data-theme="dark"] .badge-method-stub { background: var(--color-bg); color: var(--color-text-muted); }
[data-theme="dark"] .badge-method-vision { background: rgba(124,58,237,0.15); color: #a78bfa; }

[data-theme="dark"] .alert-warning {
  background: rgba(251,191,36,0.1) !important;
  border-color: rgba(251,191,36,0.3) !important;
  color: var(--color-warning) !important;
}

[data-theme="dark"] .modal-content,
[data-theme="dark"] .modal-overlay > div {
  background: var(--color-surface) !important;
  color: var(--color-text) !important;
}

[data-theme="dark"] .code-preview {
  background: var(--color-bg) !important;
  color: var(--color-text) !important;
  border-color: var(--color-border) !important;
}

/* Share Popup (compact icon popup) */
.share-popup {
    position: absolute;
    right: 0;
    top: 100%;
    margin-top: 4px;
    background: var(--color-surface);
    border: 1px solid var(--color-border);
    border-radius: 8px;
    padding: 12px;
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    z-index: 100;
    min-width: 200px;
}
[data-theme="dark"] .share-popup {
    box-shadow: 0 4px 12px rgba(0,0,0,0.4);
}

/* Hero stat card for savings */
.stat-card-hero {
    border: 2px solid var(--color-success);
    background: linear-gradient(135deg, var(--color-surface) 0%, rgba(20, 184, 166, 0.05) 100%);
}

.stat-value-savings {
    color: var(--color-success);
    font-size: 1.75rem;
    font-weight: 700;
}

[data-theme="dark"] .stat-card-hero {
    border-color: var(--color-success);
    background: linear-gradient(135deg, var(--color-surface) 0%, rgba(20, 184, 166, 0.1) 100%);
}

/* ── Sprint 3-T8: No anomalies card dark mode ────────────────────────── */
[data-theme="dark"] .no-anomalies-card {
    background: rgba(20, 184, 166, 0.15) !important;
    border-color: rgba(20, 184, 166, 0.3) !important;
}

/* ── Sprint 3-T9: Mobile layout fixes ────────────────────────────────── */

/* Fix 1: Chat bubble stays fixed regardless of parent transforms */
.chat-toggle {
    position: fixed !important;
    bottom: 1.5rem !important;
    right: 1.5rem !important;
    z-index: 9999 !important;
}

@media (max-width: 768px) {
    /* Fix 2: Savings number overflow */
    .stat-value-savings {
        font-size: 1.15rem !important;
    }
    .stat-card-value, .stat-value {
        font-size: 1rem;
        word-break: break-word;
    }

    /* Fix 3: Document titles compressed */
    .doc-row {
        flex-wrap: wrap !important;
    }
    .doc-info {
        flex: 1 1 100% !important;
        min-width: 0;
    }
    .doc-name {
        white-space: normal !important;
        word-break: break-word;
    }

    /* Fix 4: Action buttons — 2-column grid on mobile */
    .case-header-actions {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 0.5rem;
    }
    .case-header-actions .btn {
        width: 100% !important;
        justify-content: center;
        text-align: center;
    }

    /* Fix 5: Dashboard header — New Case button alignment */
    .page-header {
        flex-direction: column !important;
        align-items: stretch !important;
        gap: 0.75rem !important;
    }

    /* Fix 6: Free tier warning text */
    .alert-warning {
        font-size: 0.85rem !important;
        line-height: 1.5;
        text-align: center;
    }
}

/* FINAL FIX: Solid toast backgrounds — no transparency */
.toast-slide-in .alert,
.toast-slide-in .alert-success,
.toast-slide-in .alert-error,
.toast-slide-in .alert-info,
.toast-slide-in .alert-warning {
    background: #ffffff !important;
    opacity: 1 !important;
    border-left: 4px solid;
    box-shadow: 0 4px 16px rgba(0,0,0,0.2) !important;
    color: var(--color-text) !important;
}
.toast-slide-in .alert-success { border-left-color: #14b8a6 !important; }
.toast-slide-in .alert-error { border-left-color: #f43f5e !important; }
.toast-slide-in .alert-info { border-left-color: #0ea5e9 !important; }
.toast-slide-in .alert-warning { border-left-color: #f59e0b !important; }

[data-theme="dark"] .toast-slide-in .alert,
[data-theme="dark"] .toast-slide-in .alert-success,
[data-theme="dark"] .toast-slide-in .alert-error,
[data-theme="dark"] .toast-slide-in .alert-info,
[data-theme="dark"] .toast-slide-in .alert-warning {
    background: #1e293b !important;
    color: #f1f5f9 !important;
    box-shadow: 0 4px 16px rgba(0,0,0,0.5) !important;
}

/* Out-of-Pocket Impact Card */
.oop-card {
    background: var(--color-surface);
    border: 2px solid var(--color-success);
    border-radius: 8px;
    padding: 1.25rem;
    margin-bottom: 1.5rem;
}
.oop-grid {
    display: grid;
    grid-template-columns: 1fr 1fr 1fr;
    gap: 1rem;
}
.oop-label {
    font-size: 0.8rem;
    color: var(--color-text-muted);
    margin-bottom: 0.25rem;
}
.oop-value {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: var(--font-mono);
    color: var(--color-text);
}
.oop-stat-highlight {
    background: rgba(20, 184, 166, 0.05);
    border-radius: 6px;
    padding: 0.5rem;
}
[data-theme="dark"] .oop-stat-highlight {
    background: rgba(20, 184, 166, 0.1);
}
@media (max-width: 768px) {
    .oop-grid {
        grid-template-columns: 1fr;
    }
}

/* Sprint 5 Task 2: Mobile doc titles stacking + flags toolbar spacing */
@media (max-width: 768px) {
    .doc-row {
        flex-wrap: wrap !important;
        gap: 0.25rem !important;
        padding: 0.75rem 0.5rem !important;
    }
    .doc-info {
        flex: 1 1 calc(100% - 3rem) !important;
        min-width: 0;
    }
    .doc-name {
        white-space: normal !important;
        word-break: break-word;
        line-height: 1.3;
    }
    .doc-meta,
    .doc-row .badge,
    .doc-row .badge-method,
    .doc-row .doc-status {
        font-size: 0.75rem;
    }

    /* Flags toolbar: stack title row and actions */
    .flags-toolbar {
        flex-wrap: wrap !important;
        gap: 0.5rem !important;
    }
    .flags-toolbar > div {
        flex-wrap: wrap;
        gap: 0.375rem;
    }
    .flags-toolbar .btn {
        margin-top: 4px !important;
    }
    .flags-toolbar .input {
        font-size: 0.75rem !important;
    }
}

/* Sprint 5-T3: Filter bar padding for better centering */
.filter-bar {
    padding: 0.5rem 0.75rem;
}


/* Demo environment banner */
.demo-banner {
    background: #fef3c7;
    color: #92400e;
    text-align: center;
    padding: 4px 12px;
    font-size: 0.75rem;
    font-weight: 600;
    letter-spacing: 0.5px;
}
[data-theme="dark"] .demo-banner {
    background: #78350f;
    color: #fef3c7;
}

/* ── Sprint: Recommended documents dark mode ──────────────────────── */
[data-theme="dark"] .upload-guidance {
    background: #0c2d48;
}

/* ── Sprint: Flags toolbar spacing ────────────────────────────────── */
.flags-toolbar {
    margin-top: 0.75rem;
}

/* ── Issue 1: Mobile upload buttons side by side ─────────────────── */
@media (max-width: 768px) {
    .upload-btn-row {
        display: flex;
        gap: 0.5rem;
    }
    .upload-btn-row .btn {
        flex: 1;
        font-size: 0.8rem;
        padding: 0.5rem;
    }
}

/* ── Issue 2: Free case limit panel button spacing ───────────────── */
.limit-panel-actions {
    display: flex;
    gap: 0.5rem;
    flex-wrap: wrap;
    justify-content: center;
    align-items: center;
    margin-top: 0.75rem;
}

/* ── Issue 6: Dark mode — red/danger text readability ────────────── */
[data-theme="dark"] .text-danger {
    color: #fca5a5 !important;
}

/* ── Issue 7: Dark mode — action plan sections ───────────────────── */
[data-theme="dark"] .action-plan-snippet {
    background: var(--color-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

/* ── Issue 8: Dark mode — letter generation modals ───────────────── */
[data-theme="dark"] .letter-modal-inner {
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
}
[data-theme="dark"] .letter-modal-inner label {
    color: var(--color-text) !important;
}
/* Letter option radio cards */
.letter-option-active {
    border-color: #6366f1 !important;
    background: #eef2ff !important;
}
[data-theme="dark"] .letter-option-active {
    border-color: #818cf8 !important;
    background: rgba(99, 102, 241, 0.15) !important;
}
[data-theme="dark"] .letter-modal-inner input[type="text"] {
    background: var(--color-bg) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .letter-modal-inner span[style*="font-weight:500"] {
    color: var(--color-text) !important;
}
[data-theme="dark"] .letter-result-inner {
    background: var(--color-surface) !important;
    color: var(--color-text) !important;
}
[data-theme="dark"] .letter-result-inner pre {
    background: var(--color-bg) !important;
    color: var(--color-text) !important;
    border-color: var(--color-border) !important;
}
[data-theme="dark"] .letter-result-inner .letter-template-notice {
    background: rgba(251, 191, 36, 0.15) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
    color: #fbbf24 !important;
}

/* ── Issue 7 cont: FA screener dark mode ─────────────────────────── */
[data-theme="dark"] .fa-result-likely {
    background: rgba(34, 197, 94, 0.15) !important;
    border-color: rgba(34, 197, 94, 0.3) !important;
    color: #86efac !important;
}
[data-theme="dark"] .fa-result-possible {
    background: rgba(251, 191, 36, 0.15) !important;
    border-color: rgba(251, 191, 36, 0.3) !important;
    color: #fbbf24 !important;
}
[data-theme="dark"] .fa-result-unlikely {
    background: var(--color-bg) !important;
    border-color: var(--color-border) !important;
    color: var(--color-text) !important;
}

/* ── Pipeline Management (Command Center) ──────────────────────────────── */

.pipeline-card { border: 1px solid var(--color-border); border-radius: 0.75rem; }

.stat-mini-grid { display: grid; grid-template-columns: repeat(4, 1fr); gap: 0.75rem; }
.stat-mini { padding: 0.5rem; background: var(--color-bg); border-radius: 0.5rem; text-align: center; }
.stat-mini-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin-bottom: 0.25rem; }
.stat-mini-value { font-size: 1rem; font-weight: 700; color: var(--color-text); }
.stat-mini-value.mono { font-family: var(--font-mono); }

.badge-pipeline { display: inline-block; padding: 0.125rem 0.625rem; border-radius: 9999px; font-size: 0.6875rem; font-weight: 700; letter-spacing: 0.04em; }
.badge-pipeline-warning { background: #fffbeb; color: #92400e; }
.badge-pipeline-success { background: #f0fdfa; color: #0f766e; }
.badge-pipeline-secondary { background: #f3f4f6; color: var(--color-text-muted); }

.pipeline-log-container { margin-top: 0.5rem; }
.pipeline-log-label { font-size: 0.6875rem; font-weight: 600; text-transform: uppercase; letter-spacing: 0.04em; color: var(--color-text-muted); margin-bottom: 0.375rem; }
.pipeline-log { background: var(--color-bg); border: 1px solid var(--color-border); border-radius: 0.5rem; padding: 0.75rem; font-family: var(--font-mono); font-size: 0.75rem; line-height: 1.5; max-height: 200px; overflow-y: auto; white-space: pre-wrap; word-break: break-all; color: var(--color-text); margin: 0; }

/* Dark mode overrides for pipelines */
[data-theme="dark"] .badge-pipeline-warning { background: rgba(146,64,14,0.15); color: #fbbf24; }
[data-theme="dark"] .badge-pipeline-success { background: rgba(15,118,110,0.15); color: #5eead4; }
[data-theme="dark"] .badge-pipeline-secondary { background: var(--color-bg); color: var(--color-text-muted); }
[data-theme="dark"] .pipeline-log { background: #0f172a; border-color: var(--color-border); color: var(--color-text); }

@media (max-width: 768px) {
  .stat-mini-grid { grid-template-columns: repeat(2, 1fr); }
}

/* ── parse_error detail on document rows (2026-04-08) ── */
.doc-error-detail {
  margin-top: 6px;
  padding: 8px 10px;
  background: #fef2f2;
  border-left: 3px solid var(--color-danger);
  border-radius: 4px;
  color: #991b1b;
  font-size: 13px;
  line-height: 1.4;
}

[data-theme="dark"] .doc-error-detail {
  background: #451a1a;
  color: #fecaca;
}

/* ── Free Scan landing page (2026-04-10) ── */
.free-scan-hero {
  text-align: center;
  padding: 48px 16px 32px;
  max-width: 720px;
  margin: 0 auto;
}

.free-scan-hero h1 {
  font-size: 2rem;
  font-weight: 700;
  color: var(--color-text);
  margin-bottom: 12px;
}

.free-scan-hero p {
  font-size: 1.1rem;
  color: var(--color-text-muted);
  line-height: 1.6;
}

.free-scan-upload {
  max-width: 600px;
  margin: 0 auto 24px;
  padding: 32px;
  border: 2px dashed var(--color-border);
  border-radius: 12px;
  text-align: center;
  cursor: pointer;
  transition: border-color 0.2s, background-color 0.2s;
}

.free-scan-upload:hover,
.free-scan-upload.dragover {
  border-color: var(--color-primary);
  background: var(--color-primary-light);
}

[data-theme="dark"] .free-scan-upload:hover,
[data-theme="dark"] .free-scan-upload.dragover {
  background: rgba(99, 102, 241, 0.1);
}

.free-scan-consent {
  max-width: 600px;
  margin: 0 auto 16px;
  display: flex;
  align-items: flex-start;
  gap: 8px;
  font-size: 13px;
  color: var(--color-text-muted);
  line-height: 1.4;
}

.free-scan-consent input[type="checkbox"] {
  margin-top: 2px;
  flex-shrink: 0;
}

.free-scan-btn {
  display: block;
  max-width: 600px;
  margin: 0 auto 32px;
  width: 100%;
  padding: 14px;
  border: none;
  border-radius: 8px;
  background: var(--color-primary);
  color: #fff;
  font-size: 1rem;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.2s;
}

.free-scan-btn:hover:not(:disabled) {
  background: var(--color-primary-dark);
}

.free-scan-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.free-scan-results {
  max-width: 720px;
  margin: 0 auto 32px;
}

.free-scan-summary {
  padding: 16px 20px;
  border-radius: 8px;
  margin-bottom: 20px;
  font-weight: 600;
  font-size: 1.1rem;
}

.free-scan-summary.has-findings {
  background: #fef2f2;
  color: #991b1b;
  border-left: 4px solid var(--color-danger);
}

.free-scan-summary.clean {
  background: #f0fdf4;
  color: #166534;
  border-left: 4px solid var(--color-success);
}

[data-theme="dark"] .free-scan-summary.has-findings {
  background: #451a1a;
  color: #fecaca;
}

[data-theme="dark"] .free-scan-summary.clean {
  background: #14332a;
  color: #bbf7d0;
}

.free-scan-finding {
  background: var(--color-surface);
  border: 1px solid var(--color-border);
  border-radius: 8px;
  padding: 16px;
  margin-bottom: 12px;
}

.free-scan-finding .severity-badge {
  display: inline-block;
  padding: 2px 8px;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  margin-right: 8px;
}

.severity-badge.high { background: #fee2e2; color: #991b1b; }
.severity-badge.medium { background: #fef3c7; color: #92400e; }
.severity-badge.low { background: #dbeafe; color: #1e40af; }
.severity-badge.info { background: #f3f4f6; color: #4b5563; }

[data-theme="dark"] .severity-badge.high { background: #451a1a; color: #fecaca; }
[data-theme="dark"] .severity-badge.medium { background: #451a00; color: #fde68a; }
[data-theme="dark"] .severity-badge.low { background: #1e293b; color: #93c5fd; }
[data-theme="dark"] .severity-badge.info { background: #1f2937; color: #d1d5db; }

.free-scan-cta {
  max-width: 600px;
  margin: 32px auto;
  padding: 24px;
  background: var(--color-primary-light);
  border-radius: 12px;
  text-align: center;
}

[data-theme="dark"] .free-scan-cta {
  background: rgba(99, 102, 241, 0.1);
}

.free-scan-cta h3 {
  margin: 0 0 8px;
  color: var(--color-text);
}

.free-scan-cta p {
  margin: 0 0 16px;
  color: var(--color-text-muted);
  font-size: 14px;
}

.free-scan-progress {
  max-width: 600px;
  margin: 0 auto 24px;
}

.free-scan-progress .bar {
  height: 6px;
  background: var(--color-border);
  border-radius: 3px;
  overflow: hidden;
  margin-bottom: 8px;
}

.free-scan-progress .bar-fill {
  height: 100%;
  background: var(--color-primary);
  transition: width 0.5s ease;
  border-radius: 3px;
}

.free-scan-progress .message {
  text-align: center;
  font-size: 14px;
  color: var(--color-text-muted);
}