/* Minimal custom styles — Tailwind CDN handles everything else */
html { scroll-behavior: smooth; }
body { -webkit-font-smoothing: antialiased; -moz-osx-font-smoothing: grayscale; }

/* ────────────────────────────────────────────────────────────────────────────
   Dark mode (opt-in via the topbar toggle; default is light). Themed centrally
   here rather than per-template. `.dark <class>` selectors have higher specificity
   than the single-class Tailwind utilities, so they override without !important.
   Beta: covers shell + component layer + the most common slate utilities.
   ──────────────────────────────────────────────────────────────────────────── */
.dark body { background-color: #0b1220; color: #e2e8f0; }
/* Shell surfaces */
.dark .app-topbar { background-color: rgba(15, 23, 42, .95); border-color: #1e293b; }
.dark .card { background-color: #0f172a; border-color: #1e293b; }
.dark .card-header { background-color: #111c33; border-color: #1e293b; }
/* Tables */
.dark .sample-scroll thead th { background-color: #111c33; box-shadow: 0 1px 0 0 #1e293b; }
.dark .table-tr:hover { background-color: #111c33; }
/* Forms + secondary buttons + chips */
.dark .form-control, .dark .form-select { background-color: #0f172a; border-color: #334155; color: #e2e8f0; }
.dark .btn-secondary { background-color: #1e293b; color: #e2e8f0; border-color: #334155; }
.dark .btn-secondary:hover { background-color: #263449; }
.dark .view-chip { background-color: #1e293b; color: #cbd5e1; border-color: #334155; }
.dark .view-chip:hover { background-color: #263449; }
.dark .chip-count { background-color: #0b1220; color: #94a3b8; }
/* Common utility flips so text stays legible on dark surfaces */
.dark .bg-white { background-color: #0f172a; }
.dark .bg-slate-50, .dark .bg-slate-50\/50, .dark .bg-slate-50\/60, .dark .bg-slate-100 { background-color: #111c33; }
.dark .text-slate-900, .dark .text-slate-800 { color: #f1f5f9; }
.dark .text-slate-700, .dark .text-slate-600 { color: #cbd5e1; }
.dark .text-slate-500, .dark .text-slate-400 { color: #94a3b8; }
.dark .border-slate-200, .dark .border-slate-100 { border-color: #1e293b; }

/* Sidebar scroll */
#sidebar { overflow-y: auto; scrollbar-width: thin; scrollbar-color: rgba(255,255,255,.15) transparent; }

/* Table overflow for small screens */
.table-wrap { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.table-wrap table { min-width: 820px; }

/* Sample Requests list: the .card component uses overflow-hidden (for its rounded
   corners), which breaks position:sticky on any descendant — sticky needs its own
   nearer scroll-container ancestor instead. #sample-table (.sample-scroll) is that
   ancestor: it owns both the vertical scroll and the horizontal overflow, bounded to
   the remaining viewport height by .sample-list-card, so its thead can freeze at top:0
   and its pagination bar can freeze at bottom:0 (see list.html / _table.html). */
.sample-list-card {
  height: calc(100vh - 5rem); /* 5rem = sticky topbar (h-12 = 3rem) + main's vertical padding (py-4 = 2rem) */
}
.sample-scroll {
  overflow: auto;
  -webkit-overflow-scrolling: touch;
}
.sample-scroll table { min-width: 820px; }
.sample-scroll thead th {
  position: sticky;
  top: 0;
  z-index: 10;
  background-color: #f8fafc; /* opaque slate-50 so scrolling rows don't show through */
  box-shadow: 0 1px 0 0 rgb(226 232 240); /* crisp edge in place of the row's normal border-b when stuck */
}
/* Compact "Data-Dense Dashboard" density: tighter row padding + header so more
   rows are visible without horizontal scroll. Scoped to the samples list only. */
.sample-scroll thead th { padding-top: .5rem; padding-bottom: .5rem; }
.sample-scroll tbody td { padding-top: .5rem; padding-bottom: .5rem; }

/* Timeline / event log */
.timeline-item + .timeline-item { margin-top: .75rem; padding-top: .75rem; border-top: 1px solid #e2e8f0; }

/* Raw PDF preview */
.raw-preview { max-height: 380px; overflow: auto; white-space: pre-wrap; font-size: .82rem; }

/* Sticky form actions bar */
.sticky-actions { position: sticky; bottom: 12px; z-index: 30; }

/* Smooth sidebar transition for mobile */
#sidebar-overlay { transition: opacity .2s; }