/* ==========================================================================
   VetCalc Pro — Design System
   Clean clinical UI: white/light-gray surfaces, blue accent, rounded cards
   ========================================================================== */

:root {
  --bg: #f4f6fa;
  --surface: #ffffff;
  --card: #ffffff;
  --card-hover: #fbfcfe;
  --border: #e7eaf1;
  --border-strong: #d7dce6;
  --text: #12141c;
  --text-soft: #454b58;
  --muted: #767e8c;

  --primary-50: #eef4ff;
  --primary-100: #dce9ff;
  --primary-200: #b8d2ff;
  --primary-400: #5a8fff;
  --primary: #2f6fed;
  --primary-600: #1f56d1;
  --primary-700: #1a44a8;
  --on-primary: #ffffff;

  --success: #0ea86c;
  --success-bg: #e7f8f0;
  --warning: #e8930a;
  --warning-bg: #fdf3e2;
  --danger: #dc2626;
  --danger-bg: #fdecec;
  --info: #2f6fed;
  --info-bg: #eef4ff;

  --radius-sm: 10px;
  --radius: 16px;
  --radius-lg: 22px;
  --radius-full: 999px;

  --shadow-xs: 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-sm: 0 1px 3px rgba(15, 23, 42, 0.06), 0 1px 2px rgba(15, 23, 42, 0.04);
  --shadow-md: 0 8px 24px -8px rgba(15, 23, 42, 0.14), 0 2px 6px -2px rgba(15, 23, 42, 0.06);
  --shadow-lg: 0 20px 50px -12px rgba(15, 23, 42, 0.20);
  --ring: 0 0 0 4px rgba(47, 111, 237, 0.14);

  --font-sans: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", system-ui, sans-serif;
  --font-mono: "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;

  --sidebar-w: 264px;
  --sidebar-w-collapsed: 84px;
  --topnav-h: 68px;

  color-scheme: light;
}

[data-theme="dark"] {
  --bg: #0c1016;
  --surface: #12161e;
  --card: #141922;
  --card-hover: #171d27;
  --border: #232a37;
  --border-strong: #2c3444;
  --text: #eef1f6;
  --text-soft: #c2c8d4;
  --muted: #8a92a3;

  --primary-50: #16233f;
  --primary-100: #182a4c;
  --primary-200: #1d3562;
  --primary-400: #6b9bff;
  --primary: #5a8fff;
  --primary-600: #7ba3ff;
  --primary-700: #a6c2ff;
  --on-primary: #0b1220;

  --success-bg: #0d2a20;
  --warning-bg: #2c220c;
  --danger-bg: #2c1414;
  --info-bg: #16233f;

  --shadow-xs: 0 1px 2px rgba(0, 0, 0, 0.3);
  --shadow-sm: 0 1px 3px rgba(0, 0, 0, 0.35);
  --shadow-md: 0 8px 24px -8px rgba(0, 0, 0, 0.5);
  --shadow-lg: 0 20px 50px -12px rgba(0, 0, 0, 0.6);

  color-scheme: dark;
}

/* ---------- Reset ---------- */
*, *::before, *::after { box-sizing: border-box; }
html, body { height: 100%; }
body {
  margin: 0;
  background: var(--bg);
  color: var(--text);
  font-family: var(--font-sans);
  font-size: 14.5px;
  line-height: 1.5;
  -webkit-font-smoothing: antialiased;
  transition: background-color 0.25s ease, color 0.25s ease;
}
h1, h2, h3, h4, p { margin: 0; }
ul { list-style: none; margin: 0; padding: 0; }
a { color: inherit; text-decoration: none; }
button { font-family: inherit; cursor: pointer; }
input, select, textarea { font-family: inherit; }
img { max-width: 100%; display: block; }

::selection { background: rgba(47,111,237,0.2); }

/* The page itself must never scroll sideways; wide tables scroll inside their
   own .table-wrap. clip rather than hidden — overflow:hidden on the root
   element breaks position: sticky. */
html, body { overflow-x: clip; }

/* thin scrollbars */
* { scrollbar-width: thin; scrollbar-color: var(--border-strong) transparent; }
*::-webkit-scrollbar { width: 8px; height: 8px; }
*::-webkit-scrollbar-thumb { background: var(--border-strong); border-radius: 999px; }
*::-webkit-scrollbar-track { background: transparent; }

@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    transition-duration: 0.001ms !important;
  }
}

/* ---------- App shell ---------- */
.app-shell { display: flex; min-height: 100vh; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: var(--sidebar-w);
  flex-shrink: 0;
  background: var(--surface);
  border-right: 1px solid var(--border);
  display: flex;
  flex-direction: column;
  position: fixed;
  top: 0; left: 0; bottom: 0;
  z-index: 40;
  transition: width 0.25s cubic-bezier(.4,0,.2,1), transform 0.25s ease;
}
.sidebar.collapsed { width: var(--sidebar-w-collapsed); }

.sidebar-brand {
  display: flex; align-items: center; gap: 10px;
  height: var(--topnav-h);
  padding: 0 20px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.sidebar-brand .logo-mark {
  width: 34px; height: 34px; border-radius: 10px;
  background: linear-gradient(135deg, var(--primary), var(--primary-700));
  display: flex; align-items: center; justify-content: center;
  color: #fff; flex-shrink: 0;
  box-shadow: 0 4px 10px -4px rgba(47,111,237,0.6);
}
.sidebar-brand .brand-text { font-weight: 700; font-size: 15.5px; white-space: nowrap; overflow: hidden; opacity: 1; transition: opacity 0.15s ease; }
.sidebar.collapsed .brand-text, .sidebar.collapsed .nav-label, .sidebar.collapsed .nav-section-title, .sidebar.collapsed .sidebar-footer-text { opacity: 0; width: 0; }

.sidebar-nav { flex: 1; overflow-y: auto; padding: 16px 12px; }
.nav-section { margin-bottom: 18px; }
.nav-section-title {
  font-size: 11px; font-weight: 700; letter-spacing: 0.06em; text-transform: uppercase;
  color: var(--muted); padding: 0 12px; margin-bottom: 6px; white-space: nowrap;
}
.nav-item {
  display: flex; align-items: center; gap: 12px;
  padding: 10px 12px; border-radius: 12px;
  color: var(--text-soft); font-size: 13.8px; font-weight: 500;
  margin-bottom: 2px; position: relative;
  transition: background-color 0.15s ease, color 0.15s ease;
  white-space: nowrap;
}
.nav-item svg { flex-shrink: 0; width: 18px; height: 18px; }
.nav-item:hover { background: var(--primary-50); color: var(--primary); }
.nav-item.active { background: var(--primary-50); color: var(--primary); font-weight: 600; }
.nav-item.active::before {
  content: ""; position: absolute; left: -12px; top: 50%; transform: translateY(-50%);
  width: 3px; height: 18px; background: var(--primary); border-radius: 0 3px 3px 0;
}
.nav-label { transition: opacity 0.15s ease; }
.sidebar.collapsed .nav-item { justify-content: center; padding: 10px; }

.sidebar-footer {
  padding: 14px 12px; border-top: 1px solid var(--border); flex-shrink: 0;
}
.collapse-btn {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 12px; border-radius: 12px; border: none; background: transparent;
  color: var(--muted); font-size: 13px; font-weight: 500;
}
.collapse-btn:hover { background: var(--bg); color: var(--text); }
/* Ownership line under the collapse button. Hidden with the other footer text
   when the sidebar collapses — there is no room for it at 84px wide. */
.sidebar-copyright {
  display: block; padding: 8px 12px 2px; font-size: 11px; color: var(--muted);
  white-space: nowrap; overflow: hidden; transition: opacity 0.15s ease;
}
.sidebar-copyright:hover { color: var(--text-soft); }
.collapse-btn svg { transition: transform 0.25s ease; flex-shrink: 0; }
.sidebar.collapsed .collapse-btn svg { transform: rotate(180deg); }

/* Mobile sidebar */
.sidebar-scrim {
  position: fixed; inset: 0; background: rgba(10,14,22,0.4); z-index: 39;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.sidebar-scrim.show { opacity: 1; pointer-events: auto; }

@media (max-width: 900px) {
  .sidebar { transform: translateX(-100%); width: var(--sidebar-w); box-shadow: var(--shadow-lg); }
  .sidebar.mobile-open { transform: translateX(0); }
  .sidebar.collapsed { width: var(--sidebar-w); }
  .sidebar.collapsed .brand-text, .sidebar.collapsed .nav-label, .sidebar.collapsed .nav-section-title { opacity: 1; width: auto; }
}

/* ---------- Main column ---------- */
.main-col {
  flex: 1;
  margin-left: var(--sidebar-w);
  min-width: 0;
  transition: margin-left 0.25s cubic-bezier(.4,0,.2,1);
  display: flex; flex-direction: column;
  min-height: 100vh;
}
.sidebar.collapsed ~ .main-col { margin-left: var(--sidebar-w-collapsed); }
@media (max-width: 900px) {
  .main-col { margin-left: 0 !important; }
}

/* ---------- Top nav ---------- */
.topnav {
  height: var(--topnav-h);
  display: flex; align-items: center; gap: 14px;
  padding: 0 24px;
  background: rgba(244,246,250,0.75);
  backdrop-filter: blur(10px);
  border-bottom: 1px solid var(--border);
  position: sticky; top: 0; z-index: 30;
}
[data-theme="dark"] .topnav { background: rgba(12,16,22,0.75); }

.icon-btn {
  width: 38px; height: 38px; border-radius: 11px; border: 1px solid transparent;
  background: transparent; display: flex; align-items: center; justify-content: center;
  color: var(--text-soft); flex-shrink: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease, color 0.15s ease;
}
.icon-btn:hover { background: var(--bg); border-color: var(--border); color: var(--text); }
.icon-btn svg { width: 19px; height: 19px; }

.topnav-search {
  flex: 1; max-width: 420px; display: flex; align-items: center; gap: 8px;
  background: var(--bg); border: 1px solid var(--border); border-radius: 12px;
  padding: 0 12px; height: 40px; color: var(--muted);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.topnav-search:focus-within { border-color: var(--primary); box-shadow: var(--ring); }
.topnav-search input { border: none; background: transparent; outline: none; width: 100%; color: var(--text); font-size: 13.5px; }
.topnav-search svg { width: 17px; height: 17px; flex-shrink: 0; }
.kbd {
  font-size: 11px; padding: 2px 6px; border-radius: 6px; background: var(--surface);
  border: 1px solid var(--border); color: var(--muted); font-family: var(--font-mono);
}

.topnav-spacer { flex: 1; }
.topnav-right { display: flex; align-items: center; gap: 8px; }

.avatar {
  width: 38px; height: 38px; border-radius: 50%;
  background: linear-gradient(135deg, var(--primary-400), var(--primary-700));
  color: #fff; display: flex; align-items: center; justify-content: center;
  font-weight: 700; font-size: 13px; flex-shrink: 0;
}

.page-content {
  padding: 28px 28px 100px;
  flex: 1;
  max-width: 1400px;
  width: 100%;
  margin: 0 auto;
}
@media (max-width: 640px) {
  .page-content { padding: 18px 16px 100px; }
  .topnav { padding: 0 14px; gap: 8px; }
}

/* ---------- Page header ---------- */
.page-header { margin-bottom: 24px; animation: fadeInUp 0.4s ease both; }
.page-eyebrow {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 700; color: var(--primary);
  text-transform: uppercase; letter-spacing: 0.06em; margin-bottom: 8px;
}
.page-title { font-size: 26px; font-weight: 700; letter-spacing: -0.02em; margin-bottom: 6px; }
.page-subtitle { color: var(--muted); font-size: 14.5px; max-width: 640px; }

/* ---------- Cards ---------- */
.card {
  position: relative;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.25s ease, border-color 0.2s ease, transform 0.2s ease;
}
/* .animate-in animates transform, which makes every card its own stacking
   context — so a dropdown inside one card cannot paint over the card below it
   no matter how high its z-index is. Lift the whole card while its menu is
   open, which is the only level at which the sibling order can be beaten.

   z-index: 1 is deliberate and sufficient: sibling cards sit at auto (0), so 1
   wins against them while staying underneath every piece of app chrome —
   sticky calculate bar (20), patient bar (29), top nav (30), sidebar (40).
   Anything higher makes the card float over the header, which it must not. */
.card:has(.search-select-panel:not([hidden])) { z-index: 1; }
.card-pad { padding: 22px; }
.card-header { display: flex; align-items: flex-start; justify-content: space-between; gap: 12px; margin-bottom: 16px; }
.card-title-row { display: flex; align-items: center; gap: 10px; }
.card-icon {
  width: 36px; height: 36px; border-radius: 11px; display: flex; align-items: center; justify-content: center;
  background: var(--primary-50); color: var(--primary); flex-shrink: 0;
}
.card-icon svg { width: 18px; height: 18px; }
.card-title { font-size: 15.5px; font-weight: 700; }
.card-desc { font-size: 13px; color: var(--muted); margin-top: 2px; }

.grid { display: grid; gap: 20px; }
.grid-2 { grid-template-columns: repeat(2, 1fr); }
.grid-3 { grid-template-columns: repeat(3, 1fr); }
.grid-4 { grid-template-columns: repeat(4, 1fr); }
@media (max-width: 1100px) { .grid-4 { grid-template-columns: repeat(2, 1fr); } .grid-3 { grid-template-columns: repeat(2,1fr);} }
@media (max-width: 720px) { .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr; } }

/* ---------- Stat cards (dashboard) ---------- */
.stat-card { padding: 20px; display: flex; flex-direction: column; gap: 10px; animation: fadeInUp 0.45s ease both; }
.stat-top { display: flex; align-items: center; justify-content: space-between; }
.stat-icon { width: 42px; height: 42px; border-radius: 13px; display: flex; align-items: center; justify-content: center; }
.stat-icon svg { width: 20px; height: 20px; }
.stat-value { font-size: 28px; font-weight: 700; letter-spacing: -0.02em; font-family: var(--font-mono); }
.stat-label { font-size: 13px; color: var(--muted); }
.stat-delta { display: inline-flex; align-items: center; gap: 4px; font-size: 12px; font-weight: 700; padding: 3px 8px; border-radius: 999px; width: fit-content; }
.stat-delta.up { color: var(--success); background: var(--success-bg); }
.stat-delta.down { color: var(--primary); background: var(--primary-50); }

/* ---------- Buttons ---------- */
.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 8px;
  border-radius: 12px; border: 1px solid transparent; font-size: 13.8px; font-weight: 600;
  padding: 10px 18px; transition: all 0.15s ease; white-space: nowrap;
}
.btn svg { width: 16px; height: 16px; }
.btn:active { transform: scale(0.97); }
.btn-primary { background: var(--primary); color: #fff; box-shadow: var(--shadow-xs); }
.btn-primary:hover { background: var(--primary-600); box-shadow: var(--shadow-sm); }
.btn-primary:disabled { opacity: 0.5; cursor: not-allowed; }
.btn-outline { background: transparent; border-color: var(--border-strong); color: var(--text); }
.btn-outline:hover { background: var(--bg); }
.btn-ghost { background: transparent; color: var(--text-soft); }
.btn-ghost:hover { background: var(--bg); color: var(--text); }
.btn-sm { padding: 7px 12px; font-size: 12.5px; border-radius: 10px; }
.btn-block { width: 100%; }
.btn-danger { background: var(--danger); color: #fff; }

/* ---------- Forms ---------- */
.field { margin-bottom: 16px; }
.field-label { display: block; font-size: 13px; font-weight: 600; color: var(--text-soft); margin-bottom: 7px; }
.field-hint { font-size: 12px; color: var(--muted); margin-top: 5px; }
.input, .select {
  width: 100%; height: 44px; border-radius: 12px; border: 1px solid var(--border-strong);
  background: var(--surface); padding: 0 14px; font-size: 14px; color: var(--text);
  transition: border-color 0.15s ease, box-shadow 0.15s ease; outline: none;
  appearance: none;
}
.input:focus, .select:focus { border-color: var(--primary); box-shadow: var(--ring); }
.select {
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%23767e8c' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat; background-position: right 14px center; padding-right: 38px;
}
.input-group { display: flex; align-items: center; border: 1px solid var(--border-strong); border-radius: 12px; overflow: hidden; background: var(--surface); }
.input-group .input { border: none; height: 44px; }
.input-group .input-suffix { padding: 0 14px; color: var(--muted); font-size: 13px; font-weight: 600; background: var(--bg); height: 44px; display: flex; align-items: center; border-left: 1px solid var(--border); flex-shrink: 0; }

.segmented { display: flex; background: var(--bg); border: 1px solid var(--border); border-radius: 12px; padding: 4px; gap: 4px; }
.segmented button {
  flex: 1; border: none; background: transparent; padding: 9px 10px; border-radius: 9px; font-size: 13.5px; font-weight: 600;
  color: var(--muted); display: flex; align-items: center; justify-content: center; gap: 6px;
  transition: all 0.15s ease;
}
.segmented button svg { width: 15px; height: 15px; }
.segmented button.active { background: var(--card); color: var(--primary); box-shadow: var(--shadow-xs); }

/* ---------- Result / Readout ---------- */
.result-row {
  display: flex; align-items: center; justify-content: space-between;
  padding: 14px 0; border-bottom: 1px dashed var(--border);
}
.result-row:last-child { border-bottom: none; }
.result-label { font-size: 13px; color: var(--muted); font-weight: 500; }
.result-value { font-family: var(--font-mono); font-weight: 700; font-size: 16px; letter-spacing: -0.01em; }
.result-value.big { font-size: 30px; }
.result-unit { font-size: 12px; color: var(--muted); font-weight: 500; margin-left: 4px; }

.readout-hero {
  border-radius: var(--radius); padding: 22px;
  background: linear-gradient(135deg, var(--primary-50), var(--card) 70%);
  border: 1px solid var(--primary-100);
  display: flex; flex-direction: column; gap: 4px; margin-bottom: 18px;
  animation: scaleIn 0.3s cubic-bezier(.2,.9,.3,1.2) both;
}
.readout-hero .label { font-size: 12.5px; font-weight: 700; color: var(--primary); text-transform: uppercase; letter-spacing: 0.05em; }
/* The headline is usually a short number, but on the tablet path it is a
   phrase like "1 ½ × 20 mg". Scale with the viewport and allow it to wrap so a
   long answer stays inside the card instead of overflowing it. */
.readout-hero .value {
  font-family: var(--font-mono); font-weight: 800; letter-spacing: -0.02em; color: var(--text);
  font-size: clamp(26px, 4.4vw, 38px);
  line-height: 1.12;
  overflow-wrap: anywhere;
}
.readout-hero .sub { font-size: 13px; color: var(--muted); }
.readout-hero .hero-pane { display: flex; flex-direction: column; gap: 4px; min-width: 0; }

/* Two figures in one hero box. The second is deliberately smaller and quieter:
   it is context for the headline number, not an alternative to it. */
/* Padding, not gap, separates the panes: with flex-basis 0 a padded item floors
   at its own padding, so mirroring it on both panes keeps the columns even. */
.readout-hero.hero-split { flex-direction: row; align-items: stretch; gap: 0; }
.readout-hero.hero-split .hero-pane { flex: 1 1 0; padding-right: 22px; }
.readout-hero.hero-split .hero-pane-alt { border-left: 1px solid var(--primary-100); padding-left: 22px; padding-right: 0; }
.readout-hero.hero-split .hero-pane-alt .label { color: var(--muted); }
.readout-hero.hero-split .hero-pane-alt .value { font-size: clamp(22px, 3.2vw, 30px); color: var(--text-soft); }
@media (max-width: 700px) {
  .readout-hero.hero-split { flex-direction: column; gap: 16px; }
  .readout-hero.hero-split .hero-pane { padding-right: 0; }
  .readout-hero.hero-split .hero-pane-alt {
    border-left: none; padding-left: 0;
    border-top: 1px solid var(--primary-100); padding-top: 16px;
  }
}

/* ---------- Badges ---------- */
.badge {
  display: inline-flex; align-items: center; gap: 5px; padding: 4px 10px; border-radius: 999px;
  font-size: 11.5px; font-weight: 700;
}
.badge svg { width: 12px; height: 12px; }
.badge-primary { background: var(--primary-50); color: var(--primary); }
.badge-success { background: var(--success-bg); color: var(--success); }
.badge-warning { background: var(--warning-bg); color: var(--warning); }
.badge-danger { background: var(--danger-bg); color: var(--danger); }
.badge-neutral { background: var(--bg); color: var(--muted); border: 1px solid var(--border); }

/* ---------- Warning card ---------- */
.warning-item {
  display: flex; gap: 12px; padding: 13px 14px; border-radius: 13px; margin-bottom: 10px;
  border: 1px solid transparent; font-size: 13.3px; line-height: 1.5;
}
.warning-item:last-child { margin-bottom: 0; }
.warning-item svg { width: 17px; height: 17px; flex-shrink: 0; margin-top: 1px; }
.warning-item.info { background: var(--info-bg); color: var(--text-soft); border-color: var(--primary-100); }
.warning-item.caution { background: var(--warning-bg); color: var(--text-soft); border-color: rgba(232,147,10,0.25); }
.warning-item.danger { background: var(--danger-bg); color: var(--text-soft); border-color: rgba(220,38,38,0.25); }
.warning-item strong { color: var(--text); }

/* ---------- Reference card ---------- */
.reference-item {
  display: flex; align-items: flex-start; gap: 10px; padding: 10px 0;
  border-bottom: 1px solid var(--border); font-size: 13px;
}
.reference-item:last-child { border-bottom: none; }
.reference-item svg { width: 15px; height: 15px; color: var(--muted); margin-top: 2px; flex-shrink: 0; }
.reference-title { font-weight: 600; color: var(--text); }
.reference-meta { color: var(--muted); font-size: 12px; margin-top: 1px; }

/* ---------- Sticky calculate bar ---------- */
.sticky-bar {
  position: sticky; bottom: 0; left: 0; right: 0;
  margin-top: 24px; padding: 14px 18px;
  background: var(--card); border: 1px solid var(--border); border-radius: var(--radius);
  box-shadow: var(--shadow-lg);
  display: flex; align-items: center; justify-content: space-between; gap: 14px;
  z-index: 20;
}
.sticky-bar .status-text { font-size: 13px; color: var(--muted); display:flex; align-items:center; gap:8px; }
.sticky-bar .status-dot { width: 8px; height: 8px; border-radius: 50%; background: var(--border-strong); }
.sticky-bar .status-dot.ready { background: var(--success); box-shadow: 0 0 0 4px var(--success-bg); }

/* ---------- Loading ---------- */
.skeleton {
  border-radius: 10px; background: linear-gradient(90deg, var(--bg) 25%, var(--border) 37%, var(--bg) 63%);
  background-size: 400% 100%; animation: shimmer 1.4s ease infinite;
}
.spinner {
  width: 18px; height: 18px; border-radius: 50%; border: 2.5px solid rgba(255,255,255,0.4);
  border-top-color: #fff; animation: spin 0.7s linear infinite;
}
.spinner-dark { border: 2.5px solid var(--border); border-top-color: var(--primary); }

/* ---------- Empty state ---------- */
.empty-state {
  display: flex; flex-direction: column; align-items: center; text-align: center;
  padding: 56px 24px; color: var(--muted);
}
.empty-state .empty-icon {
  width: 64px; height: 64px; border-radius: 18px; background: var(--bg); border: 1px solid var(--border);
  display: flex; align-items: center; justify-content: center; margin-bottom: 16px; color: var(--muted);
}
.empty-state .empty-icon svg { width: 28px; height: 28px; }
.empty-state h4 { font-size: 15px; color: var(--text); margin-bottom: 4px; font-weight: 600; }
.empty-state p { font-size: 13px; max-width: 320px; }

/* ---------- Table ---------- */
.table-wrap { border: 1px solid var(--border); border-radius: var(--radius); overflow: hidden; }
table.data-table { width: 100%; border-collapse: collapse; font-size: 13.5px; }
table.data-table thead { background: var(--bg); }
table.data-table th {
  text-align: left; padding: 12px 16px; font-size: 11px; font-weight: 700; text-transform: uppercase;
  letter-spacing: 0.05em; color: var(--muted); border-bottom: 1px solid var(--border);
}
table.data-table td { padding: 14px 16px; border-bottom: 1px solid var(--border); vertical-align: middle; }
/* Action cells keep their buttons in a flex wrapper — never on the <td> itself,
   which drops the cell out of the table layout and misaligns the row borders. */
table.data-table td.row-actions { width: 1%; white-space: nowrap; }
table.data-table tbody tr { transition: background-color 0.15s ease; cursor: pointer; }
table.data-table tbody tr:hover { background: var(--bg); }
table.data-table tbody tr:last-child td { border-bottom: none; }

/* ---------- Misc utility ---------- */
.flex { display: flex; }
.flex-col { flex-direction: column; }
.items-center { align-items: center; }
.justify-between { justify-content: space-between; }
.gap-8 { gap: 8px; } .gap-10 { gap: 10px; } .gap-12 { gap: 12px; } .gap-16 { gap: 16px; }
.mt-8 { margin-top: 8px; } .mt-12 { margin-top: 12px; } .mt-16 { margin-top: 16px; } .mt-24 { margin-top: 24px; }
.mb-12 { margin-bottom: 12px; } .mb-16 { margin-bottom: 16px; }
.w-full { width: 100%; }
.text-muted { color: var(--muted); }
.text-sm { font-size: 12.5px; }
.fw-600 { font-weight: 600; }
.hidden { display: none !important; }
.pill-toggle-group { display: flex; gap: 8px; flex-wrap: wrap; }
.chip {
  padding: 7px 14px; border-radius: 999px; border: 1px solid var(--border-strong); background: var(--surface);
  font-size: 13px; font-weight: 600; color: var(--text-soft); transition: all 0.15s ease; display:inline-flex; align-items:center; gap:6px;
}
.chip.active { background: var(--primary); border-color: var(--primary); color: #fff; }
.chip:hover:not(.active) { border-color: var(--primary); color: var(--primary); }

.divider { height: 1px; background: var(--border); margin: 18px 0; }

.icon-fav-btn { width: 34px; height: 34px; border-radius: 10px; border: 1px solid var(--border); background: var(--surface); display: flex; align-items: center; justify-content: center; color: var(--muted); flex-shrink:0; transition: all .15s ease; }
.icon-fav-btn:hover { border-color: var(--primary); color: var(--primary); }
.icon-fav-btn.active { background: var(--warning-bg); border-color: transparent; color: var(--warning); }
.icon-fav-btn.active svg { fill: var(--warning); }

/* ---------- Animations ---------- */
@keyframes fadeInUp { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: translateY(0); } }
@keyframes fadeIn { from { opacity: 0; } to { opacity: 1; } }
@keyframes scaleIn { from { opacity: 0; transform: scale(0.96); } to { opacity: 1; transform: scale(1); } }
@keyframes shimmer { 0% { background-position: 100% 0; } 100% { background-position: 0 0; } }
@keyframes spin { to { transform: rotate(360deg); } }

.animate-in { animation: fadeInUp 0.4s cubic-bezier(.2,.8,.3,1) both; }
.stagger > * { animation: fadeInUp 0.4s cubic-bezier(.2,.8,.3,1) both; }
.stagger > *:nth-child(1) { animation-delay: 0.02s; }
.stagger > *:nth-child(2) { animation-delay: 0.06s; }
.stagger > *:nth-child(3) { animation-delay: 0.10s; }
.stagger > *:nth-child(4) { animation-delay: 0.14s; }
.stagger > *:nth-child(5) { animation-delay: 0.18s; }
.stagger > *:nth-child(6) { animation-delay: 0.22s; }

/* ---------------- Slider + number combo ---------------- */
.slider-combo { display: flex; align-items: center; gap: 12px; }
.slider-combo input[type="range"] { flex: 1; accent-color: var(--primary); }
.slider-combo input[type="number"] {
  width: 84px; flex-shrink: 0; height: 38px; border-radius: 10px; border: 1px solid var(--border-strong);
  background: var(--surface); text-align: center; font-weight: 700; font-family: var(--font-mono);
  color: var(--text); outline: none;
}
.slider-combo input[type="number"]:focus { border-color: var(--primary); box-shadow: var(--ring); }

/* ---------------- Stale / pending result indicator ---------------- */
.stale-note {
  display: flex; align-items: center; gap: 8px; padding: 10px 14px; border-radius: 12px;
  background: var(--warning-bg); color: var(--warning); font-size: 12.5px; font-weight: 600; margin-bottom: 14px;
  animation: fadeIn 0.2s ease both;
}
.stale-note svg { width: 15px; height: 15px; flex-shrink: 0; }

/* ---------------- Modal ---------------- */
.modal-overlay {
  position: fixed; inset: 0; background: rgba(10,14,22,0.5); z-index: 200;
  display: flex; align-items: center; justify-content: center; padding: 20px;
  opacity: 0; pointer-events: none; transition: opacity 0.2s ease;
}
.modal-overlay.show { opacity: 1; pointer-events: auto; }
.modal-card {
  background: var(--card); border-radius: var(--radius-lg); border: 1px solid var(--border);
  box-shadow: var(--shadow-lg); width: 100%; max-width: 640px; max-height: 88vh; overflow-y: auto;
  transform: scale(0.96) translateY(8px); transition: transform 0.2s ease;
}
.modal-overlay.show .modal-card { transform: scale(1) translateY(0); }
.modal-header {
  display: flex; align-items: center; justify-content: space-between; padding: 20px 22px;
  border-bottom: 1px solid var(--border); position: sticky; top: 0; background: var(--card); z-index: 2;
}
.modal-body { padding: 22px; }
.modal-footer {
  display: flex; justify-content: flex-end; gap: 10px; padding: 16px 22px;
  border-top: 1px solid var(--border); position: sticky; bottom: 0; background: var(--card);
}
.form-row { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 560px) { .form-row { grid-template-columns: 1fr; } }
.dyn-row { display: flex; gap: 8px; align-items: flex-end; margin-bottom: 10px; }
.dyn-row .field { flex: 1; margin-bottom: 0; }
.remove-row-btn { width: 38px; height: 38px; border-radius: 10px; border: 1px solid var(--border); background: var(--bg); color: var(--danger); flex-shrink: 0; display:flex; align-items:center; justify-content:center; }

/* ---------- Toast ---------- */
#toast-root { position: fixed; bottom: 24px; right: 24px; z-index: 100; display: flex; flex-direction: column; gap: 10px; }
.toast {
  background: var(--text); color: var(--bg); padding: 12px 16px; border-radius: 12px; font-size: 13px; font-weight: 600;
  box-shadow: var(--shadow-lg); display: flex; align-items: center; gap: 10px; animation: fadeInUp 0.25s ease both;
}
.toast svg { width: 16px; height: 16px; color: var(--success); flex-shrink: 0; }

/* ==========================================================================
   Patient bar — the shared patient (species + weight) entered once and used
   by every calculator. Sits directly under the top nav and stays visible.
   ========================================================================== */
.patient-bar {
  position: sticky; top: var(--topnav-h); z-index: 29;
  background: var(--surface);
  border-bottom: 1px solid var(--border);
  box-shadow: var(--shadow-xs);
}
.patient-bar-inner {
  max-width: 1400px; margin: 0 auto;
  padding: 10px 28px;
  display: flex; align-items: center; gap: 12px; flex-wrap: wrap;
}
.patient-bar-label {
  display: inline-flex; align-items: center; gap: 7px;
  font-size: 12px; font-weight: 700; color: var(--primary);
  text-transform: uppercase; letter-spacing: 0.06em; flex-shrink: 0;
}
.patient-bar-label svg { width: 16px; height: 16px; }

.patient-bar .patient-name { width: 168px; height: 40px; }
.patient-bar .patient-species { flex-shrink: 0; }
.patient-bar .patient-species button { padding: 0 14px; height: 38px; }
.patient-bar .patient-species svg { width: 16px; height: 16px; }

.patient-bar .patient-weight { width: 148px; }
.patient-bar .patient-weight .input {
  font-family: var(--font-mono);
  font-size: 17px; font-weight: 700; letter-spacing: -0.01em;
}
.patient-bsa {
  font-size: 13px; color: var(--muted); white-space: nowrap;
  padding-left: 4px;
}
.patient-bsa .readout { font-family: var(--font-mono); font-weight: 700; color: var(--text); }
.patient-bar .patient-clear { margin-left: auto; }

@media (max-width: 900px) {
  .patient-bar-inner { padding: 10px 16px; gap: 8px; }
  .patient-bar .patient-name { width: 100%; order: -1; }
  .patient-bar .patient-weight { flex: 1; min-width: 120px; width: auto; }
  .patient-bsa { width: 100%; order: 10; padding-left: 0; }
  .patient-bar-label { display: none; }
}

/* Offline indicator in the top nav */
/* [hidden] alone loses to display:inline-flex, so hide it explicitly. */
.offline-pill[hidden] { display: none; }
.offline-pill {
  display: inline-flex; align-items: center; gap: 6px;
  font-size: 12px; font-weight: 600;
  padding: 5px 10px; border-radius: var(--radius-full);
  background: var(--warning-bg); color: var(--warning);
}
.offline-pill svg { width: 14px; height: 14px; }

/* "Live" tag on the sticky bar — results update as you type */
.live-tag {
  display: inline-block;
  font-size: 10.5px; font-weight: 800; letter-spacing: 0.06em; text-transform: uppercase;
  padding: 2px 7px; border-radius: var(--radius-full);
  background: var(--success-bg); color: var(--success);
  margin-right: 6px; vertical-align: 1px;
}

/* ---------- Home page ---------- */
.home-prompt { display: flex; align-items: center; gap: 14px; }

.tool-tile {
  display: flex; flex-direction: column; gap: 6px;
  padding: 18px;
  text-decoration: none; color: inherit;
}
.tool-tile:hover {
  border-color: var(--primary);
  transform: translateY(-2px);
  box-shadow: var(--shadow-md);
}
.tool-tile .card-icon { margin-bottom: 4px; }
.tool-label { font-weight: 700; font-size: 14.5px; letter-spacing: -0.01em; }
.tool-desc { font-size: 12.5px; color: var(--muted); line-height: 1.45; }

.history-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px; border-radius: 14px; border: 1px solid var(--border);
  text-decoration: none; color: inherit;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.history-row:hover { background: var(--bg); border-color: var(--border-strong); }
.truncate { white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }

@media (max-width: 720px) {
  .home-tools { grid-template-columns: repeat(2, 1fr) !important; }
  .tool-desc { display: none; }
  .tool-tile { padding: 14px; }
}

/* Larger touch targets on phones — this gets used one-handed while the other
   hand is holding the patient. */
@media (max-width: 640px) {
  .input, .select { height: 46px; font-size: 16px; }  /* 16px stops iOS zooming on focus */
  .segmented button { height: 44px; }
  .btn { min-height: 44px; }
  .icon-btn { width: 42px; height: 42px; }
  .page-title { font-size: 21px; }
}

/* On a phone the patient bar is already showing species and weight, so the
   duplicate fields inside each calculator are just scroll. Hide them there and
   let the bar be the single place those are entered. Desktop keeps both — the
   space is free and having weight beside the drug is convenient. */
@media (max-width: 640px) {
  .page-content .field:has(#weight-input),
  .page-content .field:has(#k-weight),
  .page-content .field:has(#ca-weight),
  .page-content .field:has(#na-weight),
  .page-content .field:has(#mg-weight),
  .page-content .field:has([data-role="species-toggle"]) {
    display: none;
  }
}

/* ---------- Dose range meter (Drug Calculator) ---------- */
.dose-meter-track {
  position: relative; height: 8px; border-radius: var(--radius-full);
  background: linear-gradient(90deg, var(--primary-200), var(--primary), var(--primary-700));
  margin: 6px 0 8px;
}
.dose-meter.outside .dose-meter-track { background: var(--border-strong); }
.dose-meter-marker {
  position: absolute; top: 50%; width: 18px; height: 18px; border-radius: 50%;
  background: var(--card); border: 3px solid var(--primary);
  transform: translate(-50%, -50%); box-shadow: var(--shadow-sm);
  transition: left 0.12s ease;
}
.dose-meter.outside .dose-meter-marker { border-color: var(--danger); }
.dose-meter-ends {
  display: flex; justify-content: space-between;
  font-size: 12px; color: var(--muted); font-family: var(--font-mono);
}

/* ---------- Dispensable tablet options table ---------- */
.table-wrap { overflow-x: auto; }
.tablet-table .tablet-count {
  font-family: var(--font-mono); font-weight: 700; font-size: 16px; color: var(--text);
}
.tablet-table .readout { font-family: var(--font-mono); font-weight: 600; }
.tablet-table .out-of-range { color: var(--danger); }
.tablet-table tr.row-closest { background: var(--primary-50); }
[data-theme="dark"] .tablet-table tr.row-closest { background: rgba(90, 143, 255, 0.14); }
.tablet-table tr.row-closest td:first-child { box-shadow: inset 3px 0 0 var(--primary); }

/* ---------- Body condition score selector ---------- */
.bcs-scale { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.bcs-chip {
  flex: 1; min-width: 38px; height: 44px;
  border-radius: 12px; border: 1px solid var(--border); background: var(--bg);
  font-family: var(--font-mono); font-weight: 700; font-size: 15px; color: var(--text-soft);
  transition: all 0.15s ease;
}
.bcs-chip:hover { border-color: var(--border-strong); }
.bcs-chip.active { color: var(--on-primary); border-color: transparent; box-shadow: var(--shadow-sm); }
.bcs-chip.active.tone-success { background: var(--success); }
.bcs-chip.active.tone-caution { background: var(--warning); }
.bcs-chip.active.tone-danger  { background: var(--danger); }

/* ---------- CPR timer ---------- */
.cpr-panel { display: flex; align-items: center; gap: 20px; flex-wrap: wrap; }
.cpr-ring {
  --progress: 0%;
  position: relative; flex: 1; min-width: 190px;
  padding: 16px 18px; border-radius: var(--radius);
  border: 1px solid var(--border); background: var(--bg);
  overflow: hidden;
}
/* Fill sweeps left-to-right across the 2-minute cycle. */
.cpr-ring::before {
  content: ""; position: absolute; inset: 0; width: var(--progress);
  background: var(--primary-50); transition: width 0.1s linear;
}
[data-theme="dark"] .cpr-ring::before { background: rgba(90, 143, 255, 0.16); }
.cpr-panel.running .cpr-ring { border-color: var(--primary); }
.cpr-clock {
  position: relative; font-family: var(--font-mono);
  font-size: 34px; font-weight: 700; letter-spacing: -0.02em; line-height: 1.1;
}
.cpr-sub { position: relative; font-size: 12.5px; color: var(--muted); margin-top: 4px; }
.cpr-actions { display: flex; gap: 10px; flex-shrink: 0; }
.btn.btn-danger { background: var(--danger); color: #fff; border-color: transparent; }
.btn.btn-danger:hover { filter: brightness(0.94); }

.cpr-sounds { display: flex; flex-direction: column; gap: 8px; margin-top: 16px; }
.cpr-sound-toggle {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px;
  font-size: 13.5px; cursor: pointer;
}
.cpr-sound-toggle:hover { border-color: var(--border-strong); }
.cpr-sound-toggle input { width: 17px; height: 17px; accent-color: var(--primary); flex-shrink: 0; }
.cpr-sound-toggle span { display: inline-flex; align-items: center; gap: 8px; }
.cpr-sound-toggle svg { width: 16px; height: 16px; color: var(--muted); }

/* ---------- Preparation steps (dilutions) ---------- */
.prep-step { padding: 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--bg); }
.prep-step + .prep-step { margin-top: 10px; }
.prep-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; flex-wrap: wrap; }

/* ---------- CRI combination component rows ---------- */
.combo-row { display: flex; align-items: center; gap: 12px; margin-bottom: 10px; }
.combo-row:last-child { margin-bottom: 0; }
.combo-name { flex: 1; font-size: 13.5px; font-weight: 600; min-width: 0; }
.combo-input { width: 190px; flex-shrink: 0; }
@media (max-width: 560px) {
  .combo-row { flex-direction: column; align-items: stretch; gap: 6px; }
  .combo-input { width: 100%; }
}

/* ---------- Chemotherapy weekly schedule strip ---------- */
.week-strip {
  display: flex; gap: 6px; flex-wrap: wrap;
  padding-bottom: 4px; margin-bottom: 16px;
}
.week-chip {
  display: flex; flex-direction: column; align-items: center; gap: 4px;
  min-width: 40px; padding: 8px 6px;
  border-radius: 11px; border: 1px solid var(--border); background: var(--bg);
  transition: all 0.15s ease;
}
.week-chip:hover { border-color: var(--primary); }
.week-chip .week-num { font-family: var(--font-mono); font-weight: 700; font-size: 13px; color: var(--text-soft); }
.week-chip .week-dots { display: flex; gap: 3px; height: 5px; }
.week-chip .week-dots i { width: 5px; height: 5px; border-radius: 50%; background: var(--primary); display: block; }
.week-chip.empty { opacity: 0.55; }
.week-chip.active {
  background: var(--primary); border-color: transparent; box-shadow: var(--shadow-sm);
}
.week-chip.active .week-num { color: var(--on-primary); }
.week-chip.active .week-dots i { background: rgba(255,255,255,0.85); }

.week-detail { border: 1px solid var(--border); border-radius: var(--radius); padding: 14px 16px; background: var(--bg); }
.week-detail-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; }

/* Combination component: dose box + its own unit selector */
.combo-controls { display: flex; gap: 8px; flex-shrink: 0; width: 250px; }
.combo-controls .combo-dose { width: 90px; flex-shrink: 0; }
.combo-controls .combo-unit { flex: 1; min-width: 0; padding-right: 30px; }
@media (max-width: 560px) { .combo-controls { width: 100%; } }

/* ---------- Stock tablet strengths ---------- */
.strength-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.strength-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 6px 8px 6px 12px; border-radius: var(--radius-full);
  border: 1px solid var(--border); background: var(--bg);
  font-family: var(--font-mono); font-weight: 700; font-size: 13.5px;
}
.strength-remove {
  display: inline-flex; align-items: center; justify-content: center;
  width: 20px; height: 20px; border-radius: 50%; border: none;
  background: transparent; color: var(--muted); cursor: pointer;
}
.strength-remove:hover { background: var(--danger-bg); color: var(--danger); }
.strength-remove svg { width: 13px; height: 13px; }

/* ---------- Tablet split recommendation ---------- */
.split-hero {
  padding: 18px; border-radius: var(--radius);
  background: var(--primary-50); border: 1px solid var(--primary-200);
}
[data-theme="dark"] .split-hero { background: rgba(90, 143, 255, 0.13); border-color: rgba(90, 143, 255, 0.32); }
.split-hero.out { background: var(--warning-bg); border-color: var(--warning); }
.split-hero-label {
  font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase;
  color: var(--primary); margin-bottom: 8px;
}
.split-hero.out .split-hero-label { color: var(--warning); }
.split-hero-value { display: flex; align-items: baseline; gap: 8px; flex-wrap: wrap; }
.split-count { font-family: var(--font-mono); font-size: 34px; font-weight: 800; line-height: 1.05; letter-spacing: -0.02em; }
.split-strength { font-family: var(--font-mono); font-size: 22px; font-weight: 700; }
.split-of { color: var(--muted); font-size: 14px; }
.split-hero-sub { margin-top: 10px; font-size: 13px; color: var(--text-soft); line-height: 1.5; }

.split-alts { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
.split-alt {
  display: flex; align-items: center; gap: 10px; flex-wrap: wrap;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px;
}
.split-alt-main { font-size: 14px; }

/* ---------- Treatment calendar ---------- */
.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); gap: 5px; }
.cal-dow {
  text-align: center; font-size: 11px; font-weight: 700; letter-spacing: 0.04em;
  text-transform: uppercase; color: var(--muted); padding-bottom: 6px;
}
.cal-cell {
  position: relative; aspect-ratio: 1; min-height: 38px;
  display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 3px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--bg);
  font-family: var(--font-mono); font-size: 13px; color: var(--text-soft);
  cursor: pointer; transition: all 0.15s ease;
}
.cal-cell.empty { border: none; background: transparent; cursor: default; }
.cal-cell:not(.empty):hover { border-color: var(--primary); }
.cal-cell.today { border-color: var(--border-strong); font-weight: 700; box-shadow: inset 0 0 0 1px var(--border-strong); }
.cal-cell.treated { background: var(--primary); border-color: transparent; color: var(--on-primary); font-weight: 700; }
.cal-cell.treated.today { box-shadow: 0 0 0 2px var(--primary-200); }
.cal-dots { display: flex; gap: 2px; }
.cal-dots i { width: 4px; height: 4px; border-radius: 50%; background: currentColor; opacity: 0.8; display: block; }

/* ---------- Editable log entries ---------- */
.log-entry { border: 1px solid var(--border); border-radius: 14px; padding: 12px 14px; }
.log-entry .icon-fav-btn { width: 26px; height: 26px; }
.log-entry .icon-fav-btn svg { width: 14px; height: 14px; }

/* ---------- SearchSelect (type-to-filter drug picker) ---------- */
.search-select { position: relative; }
.search-select-field { position: relative; }
.search-select-control {
  display: flex; align-items: center; gap: 8px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  padding: 0 8px 0 12px; height: 44px; color: var(--muted);
  transition: border-color 0.15s ease, box-shadow 0.15s ease;
}
.search-select-control:focus-within { border-color: var(--primary); box-shadow: var(--ring); }
.search-select-control > svg { width: 17px; height: 17px; flex-shrink: 0; }
.search-select-input {
  flex: 1; min-width: 0; border: none; background: transparent; outline: none;
  font-size: 14px; font-weight: 600; color: var(--text);
}
.search-select-input::placeholder { font-weight: 400; color: var(--muted); }
.search-select-toggle {
  display: flex; align-items: center; justify-content: center;
  width: 30px; height: 30px; border: none; border-radius: 8px;
  background: transparent; color: var(--muted); cursor: pointer; flex-shrink: 0;
}
.search-select-toggle:hover { background: var(--bg); color: var(--text); }
.search-select-toggle svg { width: 16px; height: 16px; }

.search-select-panel {
  position: absolute; z-index: 70; left: 0; right: 0; top: calc(100% + 6px);
  overflow-y: auto;
  background: var(--card); border: 1px solid var(--border-strong);
  border-radius: 14px; box-shadow: var(--shadow-lg); padding: 6px;
}
.search-select-panel.flip-up { top: auto; bottom: calc(100% + 6px); }
.search-select-option {
  display: flex; flex-direction: column; gap: 3px; width: 100%;
  padding: 10px 12px; border: none; border-radius: 10px;
  background: transparent; text-align: left; cursor: pointer;
}
.search-select-option:hover, .search-select-option.active { background: var(--primary-50); }
.sso-main { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.sso-label { font-weight: 600; font-size: 14px; color: var(--text); }
.sso-sub { font-size: 12.5px; color: var(--muted); line-height: 1.4; }
.search-select-empty { padding: 18px 12px; text-align: center; color: var(--muted); font-size: 13.5px; }

@media (max-width: 640px) {
  .search-select-control { height: 46px; }
  .search-select-input { font-size: 16px; }  /* stops iOS zooming on focus */
}

/* Any rule that sets `display` on these would silently defeat the `hidden`
   attribute, which is how the offline pill once stayed visible. Pin it. */
.search-select-panel[hidden], .offline-pill[hidden] { display: none !important; }

/* Side-by-side refeeding ladders */
.refeed-split { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
.refeed-heading { font-size: 12px; font-weight: 700; letter-spacing: 0.05em; text-transform: uppercase; color: var(--primary); margin-bottom: 8px; }
@media (max-width: 900px) { .refeed-split { grid-template-columns: 1fr; } }

/* Checkbox + label pairs in modal forms */
.form-check {
  display: inline-flex; align-items: center; gap: 8px;
  padding: 10px 14px; border: 1px solid var(--border); border-radius: 12px;
  font-size: 13.5px; cursor: pointer;
}
.form-check:hover { border-color: var(--border-strong); }
.form-check input { width: 17px; height: 17px; accent-color: var(--primary); }
.form-check span { display: inline-flex; align-items: center; gap: 6px; }
.form-check svg { width: 15px; height: 15px; color: var(--muted); }

/* A library row that differs from the shipped data */
tr.row-edited td:first-child { box-shadow: inset 3px 0 0 var(--warning); }

/* ---------- iOS safe areas ----------
   index.html sets viewport-fit=cover, which lets the layout extend under the
   rounded corners and the home indicator, but no inset was ever applied. On an
   iPhone that puts the sticky Calculate bar beneath the home indicator, and in
   landscape it hides the edge of every row behind the notch.

   Each selector keeps its own gutter as the floor and only grows where the
   device actually needs it, so nothing moves on a screen without insets. Last
   in the file on purpose: these have to win over the padding shorthands above. */
.topnav {
  padding-left: max(24px, env(safe-area-inset-left));
  padding-right: max(24px, env(safe-area-inset-right));
}
.patient-bar-inner {
  padding-left: max(28px, env(safe-area-inset-left));
  padding-right: max(28px, env(safe-area-inset-right));
}
.page-content {
  padding-left: max(28px, env(safe-area-inset-left));
  padding-right: max(28px, env(safe-area-inset-right));
  padding-bottom: calc(100px + env(safe-area-inset-bottom));
}
.sticky-bar {
  padding-left: max(18px, env(safe-area-inset-left));
  padding-right: max(18px, env(safe-area-inset-right));
  bottom: env(safe-area-inset-bottom);
}

@media (max-width: 900px) {
  .topnav {
    padding-left: max(14px, env(safe-area-inset-left));
    padding-right: max(14px, env(safe-area-inset-right));
  }
  .patient-bar-inner,
  .page-content {
    padding-left: max(16px, env(safe-area-inset-left));
    padding-right: max(16px, env(safe-area-inset-right));
  }
}

/* The status line and the button were fighting for the same row on a phone —
   "3.6 kg cat · 0.075 mg/kg" wrapped onto two lines and shoved the button
   sideways. Give the text the leftover space and let it truncate; the button
   keeps its tap target. */
@media (max-width: 480px) {
  .sticky-bar { gap: 10px; }
  .sticky-bar .status-text {
    min-width: 0; flex: 1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  }
  .sticky-bar .btn { flex-shrink: 0; }
}

/* ---------- Narrow-screen containment ----------
   Two defaults conspire to push cards off the right edge of a phone:

   1. A grid or flex item's `min-width` is `auto`, so it refuses to shrink below
      the widest thing inside it.
   2. A <select> reports a min-content width based on its LONGEST OPTION, not
      its set width. "RER only — hospitalised / starting point (×1)" is 385px
      of intrinsic minimum, which dragged the whole column to 404px inside a
      390px screen.

   Together they made every calculator with a long option overflow on a phone.
   Letting these shrink is what `width: 100%` already promised. */
.grid > *,
.flex > * { min-width: 0; }

.input,
.select,
.search-select { min-width: 0; max-width: 100%; }

/* The chemo week strip is 25 chips. Wrapping is right on a phone, but it must
   wrap inside the card rather than setting the card's minimum width. */
.week-strip { min-width: 0; }