/* Brand tokens — overridden at runtime by /api/branding via JS for white-label tenants */
:root {
  --brand-primary: #2f6fa6;
  --brand-primary-dark: #1f3d5b;
  --brand-secondary: #34495e;
  --brand-accent: #27ae60;
}

* {
  box-sizing: border-box;
}

body {
  margin: 0;
  font-family: "Segoe UI", Tahoma, Arial, sans-serif;
  color: #23313f;
  overflow-x: hidden;
}

html[data-theme="light"] {
  color-scheme: light;
}

html[data-theme="dark"] {
  color-scheme: dark;
  scrollbar-color: #3a5068 #0f1a27;
}

html[data-theme="dark"] ::-webkit-scrollbar {
  width: 12px;
  height: 12px;
}
html[data-theme="dark"] ::-webkit-scrollbar-track {
  background: #0f1a27;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb {
  background: #3a5068;
  border-radius: 6px;
  border: 2px solid #0f1a27;
}
html[data-theme="dark"] ::-webkit-scrollbar-thumb:hover {
  background: #4c6780;
}

/* Safe default so form fields stay readable: color-scheme: dark makes browsers apply a
   light/white default text color to native inputs that don't set their own `color`, which
   turns invisible against any field whose background is hardcoded white/light. Specific
   `.foo-inp { color: ... }` rules elsewhere still win (higher specificity), this is just
   the fallback for fields that never declared one. */
input, textarea, select {
  color: #1a2a3a;
}

.login-body {
  min-height: 100vh;
  background: radial-gradient(circle at 20% 20%, #dce9f6, #a8c0d8 45%, #6f8faa 100%);
  display: grid;
  place-items: center;
}

.login-shell {
  width: min(1000px, 92vw);
  display: grid;
  grid-template-columns: 1.2fr 1fr;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(11, 29, 44, 0.25);
  background: #f3f7fb;
}

.login-brand {
  padding: 42px;
  background: linear-gradient(160deg, var(--brand-secondary), var(--brand-primary-dark));
  color: #ecf2f8;
}

.login-brand h1 {
  margin: 0;
  font-size: 48px;
  letter-spacing: 1px;
}

.login-brand p {
  margin-top: 8px;
  color: #cae2f2;
}

.login-brand ul {
  margin-top: 28px;
  padding-left: 18px;
  line-height: 1.8;
}

.login-card {
  padding: 38px;
}

.login-card h2 {
  margin-top: 0;
  margin-bottom: 20px;
}

.theme-toolbar {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 10px;
}

.theme-toggle-btn {
  border: 1px solid #9fb5c9;
  border-radius: 10px;
  background: #edf4fb;
  color: #1f3f5b;
  padding: 0.38rem 0.72rem;
  font-size: 0.83rem;
  font-weight: 700;
  line-height: 1.2;
  cursor: pointer;
}

.theme-toggle-btn:hover {
  background: #dfeefa;
}

.login-form {
  display: grid;
  gap: 10px;
}

.login-form input {
  height: 42px;
  border: 1px solid #bccada;
  border-radius: 10px;
  padding: 0 12px;
  font-size: 15px;
}

.password-row {
  display: grid;
  grid-template-columns: 1fr auto;
  gap: 8px;
}

.password-row input {
  width: 100%;
}

.login-form button {
  margin-top: 8px;
  height: 44px;
  border: none;
  border-radius: 10px;
  background: #2f6fa6;
  color: #fff;
  font-weight: 700;
  cursor: pointer;
}

.login-form button.secondary {
  margin-top: 0;
  padding: 0 14px;
  background: #516a80;
  height: 42px;
}

.alert {
  margin-bottom: 12px;
  border-radius: 8px;
  background: #ffd9d9;
  color: #8f2121;
  padding: 10px 12px;
  font-size: 14px;
}

.login-help {
  margin-top: 14px;
  color: #55697d;
  font-size: 13px;
}

.forgot-row {
  margin-top: 10px;
  font-size: 14px;
}

.forgot-row a {
  color: #2f6fa6;
  text-decoration: none;
  font-weight: 600;
  display: inline-flex;
  align-items: center;
  min-height: 44px;
  padding: 10px 0;
}

.alert.success {
  background: #dbf4e4;
  color: #1f7b45;
}

.login-shell.single-panel {
  grid-template-columns: 1fr;
  max-width: 560px;
}

.login-card.wide {
  padding: 36px;
}

.app-body {
  min-height: 100vh;
  background: #ebf1f6;
}

.app-body.sidebar-lock {
  overflow: hidden;
}

.app-shell {
  display: grid;
  grid-template-columns: clamp(15rem, 22vw, 18rem) minmax(0, 1fr);
  min-height: 100vh;
  max-width: 100vw;
  overflow-x: hidden;
}

.sidebar {
  /* Fixed, not tenant-brand-driven -- dark mode already overrides this with
     its own fixed #26384c below. A tenant's --brand-secondary is tuned for
     the dark login screen backdrop; letting it also drive the light-mode
     app shell put whatever dark color they picked next to white panels. */
  background: #34495e;
  color: #fff;
  display: flex;
  flex-direction: column;
}

.sidebar-head {
  display: block;
}

.sidebar-toggle {
  display: none;
}

.sidebar-scroll {
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.sidebar-overlay {
  display: none;
}

.logo-panel {
  background: #fff;
  color: #1f3a4f;
  padding: 18px 16px;
  text-align: center;
  border-bottom: 3px solid #2c3e50;
}

.logo-panel h1 {
  margin: 0;
  font-size: 36px;
  color: var(--brand-primary);
  font-weight: 800;
}

.logo-panel p {
  margin: 4px 0 0;
  font-size: 12px;
  color: #4f6274;
}

.menu-scroll-wrap {
  position: relative;
  display: flex;
  flex-direction: column;
  flex: 1;
  min-height: 0;
}

.menu {
  padding: 8px 0;
  overflow-y: auto;
  flex: 1;
  min-height: 0;
}

.scroll-fade {
  position: absolute;
  left: 0;
  right: 0;
  bottom: 0;
  height: 36px;
  background: linear-gradient(to bottom, transparent, #34495e 85%);
  pointer-events: none;
  transition: opacity 0.15s ease;
}

html[data-theme="dark"] .scroll-fade {
  background: linear-gradient(to bottom, transparent, #26384c 85%);
}

.menu-item {
  width: 100%;
  border: none;
  background: transparent;
  color: #fff;
  text-align: left;
  padding: 14px 18px;
  font-size: 0.92rem;
  font-weight: 600;
  line-height: 1.35;
  white-space: normal;
  cursor: pointer;
}

.menu-item:hover,
.menu-item.active {
  background: #2c3e50;
  border-left: 4px solid #3498db;
}

.separator {
  height: 1px;
  margin: 8px 14px;
  background: #5f7388;
}

.sidebar-footer {
  background: #2c3e50;
  padding: 14px;
  border-top: 2px solid #1f2e3d;
}

html[data-theme="dark"] .sidebar-footer {
  /* Never had a dark variant -- stayed at the light-mode #2c3e50 while the
     menu above it uses #26384c, so the two sections read as different
     shades stitched together. Match the menu's tone and swap the flat
     border for a soft shadow so it reads as one raised shelf, not a seam. */
  background: #1c2b3a;
  border-top-color: transparent;
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.04), 0 -4px 12px rgba(0, 0, 0, 0.3);
}

.clock {
  font-size: 26px;
  color: #58a9f3;
  font-weight: 700;
  text-align: center;
  margin-bottom: 8px;
}

.meta-row {
  font-size: 12px;
  color: #c6d6e6;
  margin-bottom: 4px;
}

.sidebar-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
}

.sidebar-link:hover {
  background: rgba(255,255,255,0.1);
}

.logout-link {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  min-height: 44px;
  margin-top: 8px;
  color: #fff;
  font-size: 13px;
  text-decoration: none;
  padding: 10px 12px;
  border-radius: 10px;
  background: rgba(255,255,255,0.05);
}

.logout-link:hover {
  background: rgba(255,255,255,0.1);
}

.sidebar-footer .theme-toggle-btn {
  width: 100%;
  min-height: 44px;
  margin-top: 10px;
  margin-bottom: 2px;
  border-color: #5f7a93;
  background: #3a5570;
  color: #dbe8f5;
}

.sidebar-footer .theme-toggle-btn:hover {
  background: #456480;
}

.workspace {
  padding: 22px;
  min-width: 0;
  overflow-x: hidden;
}

.workspace-header h2 {
  margin: 0;
}

.workspace-header p {
  margin: 4px 0 16px;
  color: #5d7184;
}

.metrics {
  display: none;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 14px;
  margin-bottom: 14px;
}

.workspace.patient-entry-mode .metrics {
  display: grid;
}

.metric-card {
  background: #fff;
  border-radius: 12px;
  padding: 14px;
  border: 1px solid #d5e0ea;
}

.metric-card span {
  display: block;
  color: #5a6d7d;
  font-size: 13px;
}

.metric-card strong {
  display: block;
  margin-top: 6px;
  font-size: 28px;
  color: #223c53;
}

.content-panel {
  background: #fff;
  border-radius: 12px;
  border: 1px solid #d5e0ea;
  padding: 16px;
  min-height: 440px;
  min-width: 0;
  overflow-x: hidden;
}

.toolbar {
  display: flex;
  gap: 10px;
  flex-wrap: wrap;
  margin-bottom: 14px;
  align-items: center;
}

.toolbar input,
.toolbar select,
.toolbar button {
  min-height: 2.4rem;
  height: auto;
  border-radius: 8px;
  border: 1px solid #bfd1e0;
  padding: 0.45rem 0.65rem;
  font-size: 0.95rem;
  line-height: 1.35;
}

.toolbar button {
  background: #2f6fa6;
  color: white;
  border: none;
  font-weight: 600;
  cursor: pointer;
}

.doctor-typeahead {
  position: relative;
  min-width: 220px;
}

#doctor-share-doctor-input {
  width: 100%;
}

.doctor-typeahead-list {
  position: absolute;
  top: calc(100% + 4px);
  left: 0;
  right: 0;
  background: #ffffff;
  border: 1px solid #bfd1e0;
  border-radius: 10px;
  box-shadow: 0 10px 24px rgba(17, 34, 51, 0.15);
  max-height: 240px;
  overflow-y: auto;
  z-index: 60;
}

.doctor-typeahead-item {
  display: block;
  width: 100%;
  border: none;
  background: transparent;
  text-align: left;
  padding: 9px 11px;
  cursor: pointer;
  color: #1f334a;
  font-size: 0.92rem;
}

.doctor-typeahead-item:hover,
.doctor-typeahead-item.active {
  background: #e7f1fb;
}

.doctor-typeahead-empty {
  padding: 9px 11px;
  color: #567085;
  font-size: 0.88rem;
}

.btn-doctor-share-detail {
  border: 1px solid #2f6fa6;
  background: #eef5fc;
  color: #1f4f79;
  border-radius: 8px;
  padding: 0.45rem 0.75rem;
  font-size: 0.9rem;
  min-height: 44px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  cursor: pointer;
}

.btn-doctor-share-detail:hover {
  background: #dcebf9;
}

.ds-badge {
  display: inline-block;
  padding: 3px 10px;
  border-radius: 4px;
  font-size: inherit;
}
.ds-badge-green {
  background: #d4edda;
  color: #155724;
  border: 1px solid #c3e6cb;
}
.ds-badge-blue {
  background: #cce5ff;
  color: #004085;
  border: 1px solid #b8daff;
}
.ds-badge-red {
  background: #f8d7da;
  color: #721c24;
  border: 1px solid #f5c6cb;
}
html[data-theme="dark"] .ds-badge-green {
  background: #1a3a24;
  color: #75c78a;
  border-color: #2d6a40;
}
html[data-theme="dark"] .ds-badge-blue {
  background: #1a2d4a;
  color: #7ab8f5;
  border-color: #2a4a7a;
}
html[data-theme="dark"] .ds-badge-red {
  background: #3a1a1e;
  color: #f08090;
  border-color: #6a2a30;
}

.doctor-share-detail-modal {
  z-index: 1200;
}

.doctor-share-detail-box {
  width: min(1180px, 98vw);
}

.doctor-share-detail-body {
  padding: 16px 18px 18px;
  overflow: auto;
}

.doctor-share-detail-meta {
  display: grid;
  grid-template-columns: repeat(3, minmax(180px, 1fr));
  gap: 8px 16px;
  margin-bottom: 12px;
  font-size: 13px;
  color: #2a4058;
}

.doctor-share-detail-table {
  overflow-x: auto;
}

#doctor-share-from,
#doctor-share-to,
#doctor-share-doctor-input,
#doctor-share-basis,
#doctor-share-apply,
#doctor-share-reset {
  min-height: 44px;
}

@media (max-width: 860px) {
  .doctor-share-detail-box {
    width: min(100vw, 100vw);
    max-height: 96vh;
    border-radius: 0;
  }

  .doctor-share-detail-meta {
    grid-template-columns: 1fr 1fr;
    gap: 6px 10px;
    font-size: 12px;
  }

  .doctor-share-detail-body {
    padding: 12px;
  }

  #doctor-share-grid table {
    min-width: 100%;
  }

  #doctor-share-grid th,
  #doctor-share-grid td {
    font-size: 12px;
    padding: 6px;
  }

  .doctor-typeahead {
    min-width: 160px;
  }
}

@media (max-width: 480px) {
  #doctor-share-grid th,
  #doctor-share-grid td {
    font-size: 11px;
    padding: 4px;
  }

  .doctor-share-detail-box {
    width: 100vw;
    max-height: 94vh;
    border-radius: 0;
  }

  .modal-header {
    padding: 14px 16px 12px;
  }

  .modal-header h3 {
    font-size: 16px;
  }

  .doctor-share-detail-meta {
    grid-template-columns: 1fr;
    gap: 4px 8px;
    font-size: 11px;
  }

  .doctor-share-detail-body {
    padding: 8px;
  }

  .doctor-typeahead {
    min-width: 100%;
  }
}

html[data-theme="dark"] .doctor-share-detail-box {
  background: #1a2a38;
}

html[data-theme="dark"] .doctor-share-detail-body {
  background: #132131;
}

html[data-theme="dark"] .doctor-share-detail-meta {
  color: #c8d8e8;
}

html[data-theme="dark"] .doctor-share-detail-meta strong {
  color: #d4e2f0;
}

html[data-theme="dark"] .btn-doctor-share-detail {
  background: #1f4458;
  color: #a8cde8;
  border-color: #3e6580;
}

html[data-theme="dark"] .btn-doctor-share-detail:hover {
  background: #2a5470;
}

html[data-theme="dark"] .doctor-typeahead-list {
  background: #1b2b3a;
  border-color: #37526a;
  box-shadow: 0 12px 28px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .doctor-typeahead-item {
  color: #c5d9eb;
}

html[data-theme="dark"] .doctor-typeahead-item:hover,
html[data-theme="dark"] .doctor-typeahead-item.active {
  background: #26445d;
}

html[data-theme="dark"] .doctor-typeahead-empty {
  color: #9fb7cb;
}

html[data-theme="dark"] .doctor-share-detail-modal .modal-header {
  border-bottom-color: #2e445a;
}

html[data-theme="dark"] .doctor-share-detail-modal .modal-header h3 {
  color: #d4e2f0;
}

html[data-theme="dark"] .doctor-share-detail-modal .modal-close {
  color: #9fb7cb;
}

html[data-theme="dark"] .doctor-share-detail-modal .modal-close:hover {
  color: #d4e2f0;
}

html[data-theme="dark"] .modal-overlay {
  background: rgba(5, 11, 17, 0.72);
}

html[data-theme="dark"] .modal-box {
  background: #1a2a38;
  color: #d4e1ee;
}

html[data-theme="dark"] .modal-header {
  border-bottom-color: #2e445a;
}

html[data-theme="dark"] .modal-header h3 {
  color: #d4e2f0;
}

html[data-theme="dark"] .modal-close {
  color: #9fb7cb;
}

html[data-theme="dark"] .modal-close:hover {
  color: #d4e2f0;
}

/* Financial Ledger (mobile-style summary) */
.fin-ledger-shell {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.fin-ledger-filter-row {
  display: grid;
  grid-template-columns: minmax(0, 1fr) minmax(0, 1fr) minmax(0, 1fr) auto;
  gap: 10px;
  align-items: center;
}

.fin-ledger-select {
  min-height: 2.7rem;
  border-radius: 10px;
  border: 1px solid #cfd8e3;
  padding: 0.5rem 0.65rem;
  font-size: 1rem;
  background: #fff;
  color: #23313f;
}

.fin-ledger-filter-actions {
  display: flex;
  gap: 8px;
}

.fin-ledger-icon-btn {
  min-height: 2.7rem;
  border-radius: 10px;
  border: 1px solid #6f8199;
  background: #fff;
  color: #213447;
  font-weight: 700;
  padding: 0.5rem 0.75rem;
  cursor: pointer;
}

.fin-ledger-tabs {
  display: grid;
  grid-template-columns: 1fr 1fr;
  border-bottom: 1px solid #dbe2ea;
}

.fin-ledger-tab {
  border: none;
  background: transparent;
  min-height: 2.7rem;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1f334a;
  cursor: pointer;
  border-bottom: 3px solid transparent;
}

.fin-ledger-tab.active {
  color: #1372c7;
  border-bottom-color: #1372c7;
}

html[data-theme="dark"] .fin-ledger-tabs { border-bottom-color: #2e4060; }
html[data-theme="dark"] .fin-ledger-tab { color: #90b8d8; }
html[data-theme="dark"] .fin-ledger-tab.active { color: #4da6ff; border-bottom-color: #4da6ff; }

.fin-ledger-balance-row {
  display: flex;
  align-items: center;
  gap: 12px;
  flex-wrap: wrap;
  font-size: 1.05rem;
}

.fin-ledger-balance-pill {
  display: inline-flex;
  align-items: center;
  border-radius: 999px;
  background: #0e2f5f;
  color: #fff;
  padding: 0.42rem 0.9rem;
  font-weight: 800;
}

.fin-ledger-cards-grid {
  display: grid;
  grid-template-columns: repeat(3, minmax(0, 1fr));
  gap: 16px;
}

.fin-ledger-card {
  border-radius: 14px;
  border: 2px solid transparent;
  padding: 20px 18px;
  min-height: 110px;
  box-shadow: 0 3px 12px rgba(0,0,0,.15);
}

/* Total Amount — deep blue */
.fin-ledger-card-total {
  background: #1565c0;
  border-color: #0d47a1;
}

/* Cash — deep green */
.fin-ledger-card-cash-col {
  background: #2e7d32;
  border-color: #1b5e20;
}

/* UPI — deep purple */
.fin-ledger-card-upi-col {
  background: #6a1b9a;
  border-color: #4a148c;
}

.fin-ledger-card-total .fin-ledger-amount,
.fin-ledger-card-cash-col .fin-ledger-amount,
.fin-ledger-card-upi-col .fin-ledger-amount {
  color: #fff;
}

.fin-ledger-card-total h4,
.fin-ledger-card-cash-col h4,
.fin-ledger-card-upi-col h4 {
  color: rgba(255, 255, 255, 0.82);
}

.fin-ledger-amount {
  margin: 0;
  font-size: 1.9rem;
  font-weight: 800;
  color: #172b43;
}

.fin-ledger-card h4 {
  margin: 8px 0 0;
  font-size: 1.05rem;
  font-weight: 700;
  color: #1e3249;
}

@media (max-width: 600px) {
  .fin-ledger-cards-grid { grid-template-columns: 1fr; }
}

.fin-ledger-period-note {
  font-size: 0.9rem;
  color: #6b7f94;
}

/* ── Summary page mini cards (Dues / Referrals / Ledger) ── */
.fin-mini-card { display: flex; flex-direction: column; }
.fin-mini-card-hd {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 12px;
}
.fin-mini-card-hd h4 { margin: 0; font-size: 1.05rem; font-weight: 700; color: #fff; }
.fin-mini-card-link {
  background: rgba(255,255,255,0.18); border: 1px solid rgba(255,255,255,0.35);
  color: #fff; font-size: 11px; font-weight: 600; border-radius: 20px;
  padding: 3px 10px; cursor: pointer; white-space: nowrap; flex-shrink: 0;
  margin-left: 8px;
}
.fin-mini-card-link:hover { background: rgba(255,255,255,0.3); }
.fin-mini-body {
  display: flex; flex-wrap: wrap; gap: 6px; margin-top: auto;
}
.fin-mini-stat {
  background: rgba(255,255,255,0.15); border: 1px solid rgba(255,255,255,0.25);
  border-radius: 16px; padding: 3px 11px;
  font-size: 12px; color: #fff; white-space: nowrap;
}
.fin-mini-stat-primary {
  background: rgba(255,255,255,0.32); border-color: rgba(255,255,255,0.55);
  font-weight: 700;
}
.fin-mini-stat-high {
  background: rgba(255,70,70,0.38); border-color: rgba(255,130,130,0.5);
  font-weight: 700;
}
.fin-mini-stat-med {
  background: rgba(255,180,0,0.32); border-color: rgba(255,210,60,0.5);
  font-weight: 700;
}

/* ── Patient Ledger mode tabs ── */
.plr-mode-tabs {
  display: flex; gap: 0; border-bottom: 2px solid #dee2e6; margin-bottom: 14px;
}
.plr-tab {
  padding: 8px 22px; font-size: 13px; font-weight: 600; cursor: pointer;
  border: none; background: none; color: #6c757d;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
  transition: color .15s, border-color .15s; border-radius: 4px 4px 0 0;
}
.plr-tab:hover { color: #1a73e8; background: #f0f6ff; }
.plr-tab-active { color: #1a73e8; border-bottom-color: #1a73e8; background: #f0f6ff; }
html[data-theme="dark"] .plr-mode-tabs { border-bottom-color: #2e4060; }
html[data-theme="dark"] .plr-tab { color: #90b8d8; }
html[data-theme="dark"] .plr-tab:hover { color: #4da6ff; background: #1e2a38; }
html[data-theme="dark"] .plr-tab-active { color: #4da6ff; border-bottom-color: #4da6ff; background: #1e2a38; }
.plr-filter-panel {
  display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 14px;
}
.plr-hidden { display: none !important; }
.plr-inp {
  padding: 7px 11px; border: 1px solid #c2d1de; border-radius: 5px;
  font-size: 13px; min-width: 220px; flex: 1;
}
.plr-inp:focus { outline: none; border-color: #1a73e8; }
.plr-select {
  padding: 7px 11px; border: 1px solid #c2d1de; border-radius: 5px;
  font-size: 13px; min-width: 200px; flex: 1;
}
.plr-btn {
  padding: 7px 18px; border: 1px solid #c2d1de; background: #f4f7fb;
  border-radius: 5px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.plr-btn:hover { background: #e4eaf3; }
html[data-theme="dark"] .plr-btn { background: #1e2a38; border-color: #2e4060; color: #d4e1ee; }
html[data-theme="dark"] .plr-btn:hover { background: #24384a; }
.plr-btn-primary { background: #2f6fa6; color: #fff; border-color: #1565c0; }
.plr-btn-primary:hover { background: #1565c0; }
.plr-date-lbl { font-size: 13px; font-weight: 500; display: flex; align-items: center; gap: 6px; }
.plr-date-inp {
  padding: 7px 10px; border: 1px solid #c2d1de; border-radius: 5px; font-size: 13px;
}
.plr-date-inp:focus { outline: none; border-color: #1a73e8; }
@media (max-width: 600px) {
  .plr-mode-tabs { flex-wrap: wrap; }
  .plr-tab { padding: 7px 14px; font-size: 12px; }
  .plr-inp, .plr-select { min-width: 100%; }
}

.fin-ledger-cta-row {
  display: flex;
  justify-content: flex-end;
}

.fin-ledger-recharge-btn {
  border: none;
  border-radius: 999px;
  padding: 0.72rem 1.8rem;
  background: #2c65aa;
  color: #fff;
  font-size: 1.15rem;
  font-weight: 800;
  text-transform: uppercase;
  cursor: pointer;
}

@media (max-width: 760px) {
  .fin-ledger-filter-row {
    grid-template-columns: 1fr 1fr;
  }

  .fin-ledger-filter-actions {
    grid-column: 1 / -1;
  }

  .fin-ledger-icon-btn {
    flex: 1;
  }

  .fin-ledger-amount {
    font-size: 1.55rem;
  }
}

table {
  width: 100%;
  border-collapse: collapse;
  table-layout: auto;
}

thead th {
  background: #eff4f9;
  color: #314a5f;
  text-align: left;
  font-size: 0.78rem;
  padding: 0.6rem;
  line-height: 1.35;
  border-bottom: 1px solid #d6e0ea;
  white-space: normal;
  overflow-wrap: anywhere;
  vertical-align: top;
}

tbody td {
  padding: 0.6rem;
  border-bottom: 1px solid #edf2f6;
  font-size: 0.86rem;
  line-height: 1.4;
  white-space: normal;
  overflow-wrap: anywhere;
  word-break: break-word;
  vertical-align: top;
}

tbody tr.empty-row td {
  color: #5d7184;
  text-align: center;
}

@media (max-width: 720px) {
  table:not(.home-table):not(.pe-avail-tbl):not(.pe-final-tbl):not(.bill-tbl) {
    display: block;
  }

  table:not(.home-table):not(.pe-avail-tbl):not(.pe-final-tbl):not(.bill-tbl) thead {
    display: none;
  }

  table:not(.home-table):not(.pe-avail-tbl):not(.pe-final-tbl):not(.bill-tbl) tbody {
    display: block;
  }

  table:not(.home-table):not(.pe-avail-tbl):not(.pe-final-tbl):not(.bill-tbl) tbody tr {
    display: block;
    margin-bottom: 10px;
    padding: 6px 10px;
    background: #fff;
    border: 1px solid #d5e0ea;
    border-radius: 10px;
    box-shadow: 0 1px 4px rgba(0, 0, 0, 0.06);
  }

  table:not(.home-table):not(.pe-avail-tbl):not(.pe-final-tbl):not(.bill-tbl) tbody tr.empty-row {
    background: transparent;
    border: none;
    box-shadow: none;
    padding: 6px 0;
  }

  html[data-theme="dark"] table:not(.home-table):not(.pe-avail-tbl):not(.pe-final-tbl):not(.bill-tbl) tbody tr {
    background: #132131;
    border-color: #2a3f54;
  }

  html[data-theme="dark"] table:not(.home-table):not(.pe-avail-tbl):not(.pe-final-tbl):not(.bill-tbl) tbody td {
    border-bottom-color: #263b4f;
  }

  html[data-theme="dark"] table:not(.home-table):not(.pe-avail-tbl):not(.pe-final-tbl):not(.bill-tbl) tbody td::before {
    color: #9eb5c9;
  }

  table:not(.home-table):not(.pe-avail-tbl):not(.pe-final-tbl):not(.bill-tbl) tbody td {
    display: flex;
    justify-content: space-between;
    align-items: flex-start;
    gap: 10px;
    padding: 6px 0;
    border-bottom: 1px solid #eef2f6;
    white-space: normal;
    overflow-wrap: break-word;
    word-break: normal;
    text-align: right;
  }

  table:not(.home-table):not(.pe-avail-tbl):not(.pe-final-tbl):not(.bill-tbl) tbody tr.empty-row td {
    display: block;
    border-bottom: none;
    text-align: center;
  }

  table:not(.home-table):not(.pe-avail-tbl):not(.pe-final-tbl):not(.bill-tbl) tbody td:last-child {
    border-bottom: none;
  }

  table:not(.home-table):not(.pe-avail-tbl):not(.pe-final-tbl):not(.bill-tbl) tbody td::before {
    content: attr(data-label);
    flex-shrink: 0;
    margin-right: 8px;
    font-weight: 600;
    color: #5a6d7d;
    text-align: left;
  }

  table:not(.home-table):not(.pe-avail-tbl):not(.pe-final-tbl):not(.bill-tbl) tbody td:not([data-label])::before,
  table:not(.home-table):not(.pe-avail-tbl):not(.pe-final-tbl):not(.bill-tbl) tbody td[data-label=""]::before {
    content: none;
  }
}

.placeholder {
  padding: 18px;
  border: 1px dashed #b8c9d8;
  border-radius: 10px;
  background: #f7fafc;
  color: #4f6578;
}

.tools-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 12px;
  margin-bottom: 14px;
}

.tools-grid-layout .preview-section {
  grid-column: span 2;
}

.tools-section {
  border: 1px solid #dbe5ee;
  border-radius: 10px;
  padding: 12px;
  background: #fcfdff;
}

.tools-section h3 {
  margin: 0 0 10px;
  font-size: 15px;
  color: #2c4359;
}

.tools-row {
  display: flex;
  gap: 16px;
  flex-wrap: wrap;
  margin-bottom: 10px;
}

.tools-fields {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 10px;
}

.tools-fields label,
.tools-quad label {
  display: flex;
  flex-direction: column;
  gap: 6px;
  font-size: 12px;
  color: #415b71;
}

.tools-fields input,
.tools-fields select,
.tools-quad input {
  height: 36px;
  border: 1px solid #bfd1e0;
  border-radius: 8px;
  padding: 0 10px;
  font-size: 13px;
}

.range-input {
  height: 8px !important;
  padding: 0 !important;
}

.preview-help {
  margin: 0 0 10px;
  color: #536b80;
  font-size: 12px;
}

.a4-preview-wrap {
  width: 100%;
  overflow: hidden;
  border: 1px solid #d7e3ee;
  border-radius: 10px;
  background: linear-gradient(180deg, #f5f9fd 0%, #edf4fb 100%);
  padding: 8px;
}

.a4-page {
  position: relative;
  margin: 0 auto;
  background: #fff;
  border: 1px solid #c7d6e4;
  box-shadow: 0 18px 40px rgba(15, 35, 55, 0.12);
  overflow: hidden;
}

.letterpad-preview-layer {
  position: absolute;
  inset: 0;
  pointer-events: none;
  z-index: 0;
}

.letterpad-preview-layer img,
.letterpad-preview-layer iframe {
  width: 100%;
  height: 100%;
  border: 0;
  display: block;
  background: transparent;
}

.letterpad-preview-note {
  position: absolute;
  top: 10px;
  left: 50%;
  transform: translateX(-50%);
  background: rgba(143, 33, 33, 0.86);
  color: #fff;
  font-size: 11px;
  line-height: 1.2;
  border-radius: 12px;
  padding: 5px 10px;
  z-index: 4;
  pointer-events: none;
}

.a4-margin-box {
  position: absolute;
  border: 1px dashed #84a3bf;
  background: rgba(137, 175, 208, 0.08);
  z-index: 1;
}

.guide-line {
  position: absolute;
  background: rgba(56, 94, 128, 0.45);
  pointer-events: none;
  z-index: 2;
}

.guide-line.vertical {
  top: 0;
  bottom: 0;
  width: 1px;
}

.guide-line.horizontal {
  left: 0;
  right: 0;
  height: 1px;
}

.overlay-block {
  position: absolute;
  border: 1px solid #467ba8;
  background: rgba(62, 129, 177, 0.16);
  color: #244862;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 11px;
  font-weight: 700;
  text-align: center;
  padding: 3px;
  cursor: grab;
  touch-action: none;
  user-select: none;
  z-index: 3;
  overflow: hidden;
}

.overlay-block-img {
  max-width: 100%;
  max-height: 100%;
  object-fit: contain;
  pointer-events: none;
}

.overlay-block.selected {
  border-color: #0d5d96;
  background: rgba(24, 127, 196, 0.26);
  box-shadow: 0 0 0 2px rgba(13, 93, 150, 0.2);
}

.overlay-block.dragging {
  cursor: grabbing;
}

.overlay-block.resizing {
  cursor: nwse-resize;
}

.overlay-handle {
  position: absolute;
  width: 10px;
  height: 10px;
  border-radius: 2px;
  background: #0d5d96;
  border: 1px solid #fff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.25);
}

.overlay-handle-se {
  right: -6px;
  bottom: -6px;
  cursor: nwse-resize;
}

.tools-quad {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 10px;
}

.inline-note {
  font-size: 13px;
  color: #1f7b45;
}

.inline-note.error {
  color: #8f2121;
}

html[data-theme="dark"] body {
  color: #d6e2ee;
}

html[data-theme="dark"] .login-body {
  background: radial-gradient(circle at 20% 20%, #1f2d3d, #15212d 45%, #0f1822 100%);
}

html[data-theme="dark"] .login-shell {
  background: #142130;
  box-shadow: 0 18px 60px rgba(3, 8, 14, 0.55);
}

html[data-theme="dark"] .login-brand {
  background: linear-gradient(160deg, #1f3d5b, #172c43);
  color: #dceaf8;
}

html[data-theme="dark"] .login-brand p,
html[data-theme="dark"] .login-help {
  color: #acc4d9;
}

html[data-theme="dark"] .login-card {
  background: #142130;
}

html[data-theme="dark"] .login-card h2,
html[data-theme="dark"] .forgot-row a {
  color: #dce9f5;
}

html[data-theme="dark"] .login-form input,
html[data-theme="dark"] .tools-fields input,
html[data-theme="dark"] .tools-fields select,
html[data-theme="dark"] .tools-quad input,
html[data-theme="dark"] .toolbar input,
html[data-theme="dark"] .toolbar select,
html[data-theme="dark"] .plr-inp,
html[data-theme="dark"] .plr-select,
html[data-theme="dark"] .plr-date-inp {
  background: #0f1a27;
  color: #d6e2ee;
  border-color: #2e4458;
}

html[data-theme="dark"] .login-form button.secondary {
  background: #2d4458;
}

html[data-theme="dark"] .theme-toggle-btn {
  background: #1f3347;
  border-color: #395673;
  color: #d8e6f3;
}

html[data-theme="dark"] .theme-toggle-btn:hover {
  background: #29435c;
}

html[data-theme="dark"] .app-body {
  background: #101a25;
}

html[data-theme="dark"] .logo-panel {
  background: #111f2d;
  color: #d4e2f0;
  border-bottom-color: #203448;
}

html[data-theme="dark"] .logo-panel p {
  color: #9fb7cb;
}

html[data-theme="dark"] .sidebar,
html[data-theme="dark"] .menu-item:hover,
html[data-theme="dark"] .menu-item.active {
  background: #26384c;
}

html[data-theme="dark"] .sidebar-toggle {
  border-color: #4c6780;
  background: #30475f;
  color: #e1edf8;
}

html[data-theme="dark"] .sidebar-toggle:hover {
  background: #3b5875;
}

html[data-theme="dark"] .sidebar-overlay {
  background: rgba(5, 11, 17, 0.55);
}

html[data-theme="dark"] .separator {
  background: #4f6479;
}

html[data-theme="dark"] .workspace-header p,
html[data-theme="dark"] .metric-card span,
html[data-theme="dark"] .meta-row {
  color: #9eb5c9;
}

html[data-theme="dark"] .metric-card strong {
  color: #e2eef8;
}

html[data-theme="dark"] .metric-card,
html[data-theme="dark"] .content-panel,
html[data-theme="dark"] .tools-section,
html[data-theme="dark"] .placeholder {
  background: #132131;
  border-color: #2a3f54;
  color: #d4e1ee;
}

html[data-theme="dark"] .tools-section h3 {
  color: #e2eef8;
}

html[data-theme="dark"] .tools-fields label,
html[data-theme="dark"] .tools-quad label,
html[data-theme="dark"] .tools-row label {
  color: #9eb5c9;
}

html[data-theme="dark"] .preview-help {
  color: #adc3d6;
}

html[data-theme="dark"] .a4-preview-wrap {
  border-color: #2e455a;
  background: linear-gradient(180deg, #121f2c 0%, #17293a 100%);
}

html[data-theme="dark"] .a4-page {
  border-color: #3a5670;
  box-shadow: 0 18px 42px rgba(0, 0, 0, 0.5);
}

html[data-theme="dark"] .a4-margin-box {
  border-color: #6f95b6;
  background: rgba(106, 151, 194, 0.12);
}

html[data-theme="dark"] .guide-line {
  background: rgba(166, 196, 224, 0.4);
}

html[data-theme="dark"] .overlay-block {
  border-color: #84b4d9;
  background: rgba(93, 154, 201, 0.25);
  color: #def0ff;
}

html[data-theme="dark"] .overlay-block.selected {
  border-color: #9ac6e8;
  background: rgba(112, 178, 226, 0.36);
}

html[data-theme="dark"] .overlay-handle {
  background: #8cc1e8;
  border-color: #1f3447;
}

html[data-theme="dark"] thead th {
  background: #1d2f42;
  color: #c8d8e8;
  border-bottom-color: #2c4257;
}

html[data-theme="dark"] tbody td {
  border-bottom-color: #263b4f;
  color: #d0deea;
}

html[data-theme="dark"] tbody tr.empty-row td {
  color: #9eb5c8;
}

html[data-theme="dark"] .inline-note {
  color: #9edbb5;
}

html[data-theme="dark"] .inline-note.error {
  color: #ff9393;
}

@media (max-width: 960px) {
  .app-shell {
    grid-template-columns: 1fr;
  }

  .sidebar {
    min-height: auto;
    position: sticky;
    top: 0;
    z-index: 90;
    border-bottom: 2px solid #263a4d;
  }

  .sidebar-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 12px;
    padding: 10px 12px;
  }

  .logo-panel {
    background: transparent;
    color: #fff;
    border-bottom: none;
    text-align: left;
    padding: 0;
  }

  .logo-panel h1 {
    font-size: 28px;
    color: #8ed6ac;
  }

  .logo-panel p {
    color: #d8e6f3;
  }

  .sidebar-toggle {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    height: 44px;
    min-width: 44px;
    padding: 0 14px;
    border: 1px solid #6f89a1;
    border-radius: 10px;
    background: #3d5770;
    color: #ecf4fb;
    font-weight: 700;
    cursor: pointer;
  }

  .sidebar-scroll {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    width: min(86vw, 20rem);
    display: flex;
    background: #34495e;
    border-top: none;
    transform: translateX(-104%);
    transition: transform 0.22s ease;
    box-shadow: 0 20px 40px rgba(9, 20, 30, 0.42);
    z-index: 95;
  }

  .sidebar.is-open .sidebar-scroll {
    transform: translateX(0);
  }

  .sidebar-overlay {
    display: block;
    position: fixed;
    inset: 0;
    background: rgba(5, 12, 18, 0.42);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.22s ease;
    z-index: 80;
  }

  .sidebar.is-open + .sidebar-overlay {
    opacity: 1;
    pointer-events: auto;
  }

  .menu {
    overflow-y: auto;
    flex: 1 1 auto;
    padding-top: 6px;
  }

  .menu-item {
    padding: 12px 16px;
    font-size: 0.94rem;
  }

  .sidebar-footer {
    border-top-width: 1px;
    flex: 0 0 auto;
  }

  .metrics {
    grid-template-columns: 1fr;
  }

  .workspace {
    padding: 16px;
  }

  .content-panel {
    min-height: 340px;
  }

  .tools-grid {
    grid-template-columns: 1fr;
  }

  .tools-grid-layout .preview-section {
    grid-column: span 1;
  }

  .tools-fields,
  .tools-quad {
    grid-template-columns: 1fr;
  }

  .login-shell {
    grid-template-columns: 1fr;
  }

  .company-shell {
    grid-template-columns: 1fr;
  }

  .company-brand {
    display: none;
  }

  .form-row {
    grid-template-columns: 1fr;
  }
}

/* ══════════════════════════════════════════════════════
   HOME – SPLIT PANEL (Pending / Complete Reports)
   ══════════════════════════════════════════════════════ */

/* When home-mode is active, collapse the workspace chrome */
.workspace.home-mode {
  padding: 0;
  display: flex;
  flex-direction: column;
  height: 100vh;
  overflow: hidden;
}

/* The two report lists scroll independently inside that 100vh workspace, so the
   sidebar beside it must fit 100vh too (its .menu scrolls inside). Left to grow
   with the menu, it stretched the .app-shell grid row and the whole page scrolled
   instead. Home only: other screens scroll the page and keep the full-height
   sidebar. Desktop only: below 961px the sidebar is a top bar + drawer. */
@media (min-width: 961px) {
  .app-shell:has(> .workspace.home-mode) > .sidebar {
    height: 100vh;
  }
}

.workspace.home-mode .workspace-header,
.workspace.home-mode .metrics {
  display: none;
}

.workspace.home-mode .content-panel {
  flex: 1;
  padding: 0;
  margin: 0;
  overflow: hidden;
  display: flex;
  flex-direction: column;
}

.home-split {
  display: flex;
  flex-direction: row;
  flex: 1;
  overflow: hidden;
  gap: 10px;
  padding: 10px;
  background: #ebf1f6;
  height: 100%;
}

.home-panel {
  flex: 1;
  display: flex;
  flex-direction: column;
  border-radius: 10px;
  overflow: hidden;
  background: #fff;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.08);
  border: 1px solid #d0dce8;
  min-width: 0;
}

html[data-theme="dark"] .home-panel {
  background: #132131;
  border-color: #2a3f54;
  /* The light-mode shadow (rgba(0,0,0,.08)) is invisible against an already-dark
     page -- a black shadow needs a light surface to read against. Use a bigger,
     darker shadow plus a faint top highlight so the card still reads as raised. */
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.04);
}

html[data-theme="dark"] .home-split {
  background: #0d1722;
}

.home-panel-header {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 9px 12px;
  background: linear-gradient(to right, #2c5f8a, #1a4d77);
  color: #fff;
  flex-shrink: 0;
}

.home-panel-title {
  font-size: 13.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  white-space: nowrap;
}

.home-panel-badge {
  background: rgba(255, 255, 255, 0.18);
  border-radius: 14px;
  padding: 2px 7px;
  font-size: 12px;
  font-weight: 700;
  min-width: 24px;
  text-align: center;
}

.home-badge--green {
  background: rgba(39, 174, 96, 0.3);
}

.home-panel-spacer {
  flex: 1;
}

.home-icon-btn {
  background: rgba(255, 255, 255, 0.15);
  border: 1px solid rgba(255, 255, 255, 0.3);
  color: #fff;
  border-radius: 6px;
  padding: 3px 8px;
  cursor: pointer;
  font-size: 15px;
  line-height: 1.4;
}

.home-icon-btn:hover {
  background: rgba(255, 255, 255, 0.28);
}

.home-panel-search-wrap {
  display: flex;
  align-items: center;
  gap: 6px;
  flex: 1;
}

.home-search-input {
  height: 28px;
  border: 1px solid rgba(255, 255, 255, 0.35);
  border-radius: 6px;
  padding: 0 10px;
  font-size: 12px;
  background: rgba(255, 255, 255, 0.15);
  color: #fff;
  max-width: 200px;
  width: 100%;
}

.home-search-input::placeholder {
  color: rgba(255, 255, 255, 0.6);
}

.home-search-input:focus {
  outline: none;
  background: rgba(255, 255, 255, 0.25);
  border-color: rgba(255, 255, 255, 0.6);
}

.home-panel-body {
  flex: 1;
  overflow-y: auto;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

/* Home mobile tab toggle (hidden on desktop) */
.home-tabs {
  display: none;
  gap: 8px;
  padding: 10px 10px 0;
  background: #ebf1f6;
  flex-shrink: 0;
}

.home-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 9px 10px;
  border: 1px solid #c3d4e3;
  border-radius: 8px 8px 0 0;
  background: #dde8f1;
  color: #44607a;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.home-tab-active {
  background: linear-gradient(to right, #2c5f8a, #1a4d77);
  color: #fff;
  border-color: #1a4d77;
}

.home-tab-badge {
  background: rgba(0, 0, 0, 0.12);
  border-radius: 12px;
  padding: 1px 7px;
  font-size: 12px;
  font-weight: 700;
  min-width: 20px;
  text-align: center;
}

.home-tab-active .home-tab-badge {
  background: rgba(255, 255, 255, 0.22);
}

/* Home table */
.home-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12.5px;
}

.home-table thead tr {
  background: #e4eef7;
  position: sticky;
  top: 0;
  z-index: 1;
}

.home-table th {
  padding: 6px 6px;
  text-align: left;
  color: #2f5570;
  font-weight: 700;
  font-size: 11.5px;
  border-bottom: 2px solid #bcd4e6;
  white-space: nowrap;
}

.home-table td {
  padding: 5px 6px;
  border-bottom: 1px solid #eaf0f6;
  vertical-align: middle;
  white-space: nowrap;
}

.home-table tbody tr:nth-child(even) {
  background: #f5faff;
}

.home-table tbody tr:hover {
  background: #deeefa;
}

html[data-theme="dark"] .home-table tbody tr:nth-child(even) {
  background: #1a2c3d;
}

html[data-theme="dark"] .home-table tbody tr:hover {
  background: #234156;
}

html[data-theme="dark"] .home-table thead tr {
  background: #1d2f42;
}

html[data-theme="dark"] .home-table th {
  color: #c8d8e8;
  border-bottom-color: #2c4257;
}

/* Column widths */
.hcell-act {
  width: 30px;
  text-align: center;
  padding: 4px 3px !important;
}

.hcell-date {
  width: 48px;
  color: #4a6a80;
}

.hcell-no {
  width: 50px;
  font-weight: 600;
  color: #2f5570;
}

.hcell-age {
  width: 38px;
  color: #5a7a8a;
}

.hcell-doc {
  max-width: 90px;
  overflow: hidden;
  text-overflow: ellipsis;
  color: #4a6070;
}

.hcell-name {
  max-width: 120px;
  overflow: hidden;
  text-overflow: ellipsis;
  font-weight: 500;
}

/* Home action buttons */
.hbtn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 14px;
  line-height: 1;
  padding: 3px;
  border-radius: 4px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 24px;
  transition: filter 0.1s;
}

.hbtn:hover {
  filter: brightness(0.85);
}

.hbtn-edit  { background: #dce8f7; color: #1a4d8a; }
.hbtn-copy  { background: #fff3cd; color: #6b4e00; }
.hbtn-make  { background: #d1f0de; color: #1a5c34; font-weight: 700; font-size: 15px; }
.hbtn-print { background: #cfe2ff; color: #003087; }
.hbtn-wa    { background: #d4f0dc; color: #0f4a25; }

.home-loading {
  padding: 48px 20px;
  text-align: center;
  color: #8aa0b0;
  font-size: 14px;
}

.home-error {
  color: #c0392b;
}

.home-empty {
  padding: 70px 20px;
  text-align: center;
  color: #a8bec9;
  font-size: 14px;
}

@media (max-width: 960px) {
  .home-split {
    flex-direction: column;
    height: auto;
  }

  .home-panel {
    min-height: 300px;
  }

  .home-panel-header {
    flex-wrap: wrap;
  }

  .home-search-input {
    max-width: none;
  }

  .home-table {
    width: max-content;
    min-width: 100%;
    font-size: 13.5px;
  }

  .hcell-date {
    width: auto;
    white-space: nowrap;
  }

  .hcell-no {
    width: auto;
    white-space: nowrap;
  }

  .home-tabs {
    display: flex;
  }

  .home-panel[data-panel] {
    display: none;
  }

  .home-split[data-active-panel="pending"] .home-panel[data-panel="pending"],
  .home-split[data-active-panel="complete"] .home-panel[data-panel="complete"] {
    display: flex;
  }
}

/* ══════════════════════════════════════════════════════
   COMPANY SELECTION PAGE
   ══════════════════════════════════════════════════════ */

.company-body {
  min-height: 100vh;
  background: radial-gradient(circle at 20% 20%, #dce9f6, #a8c0d8 45%, #6f8faa 100%);
  display: grid;
  place-items: center;
  padding: 20px 0;
}

.company-shell {
  width: min(1060px, 92vw);
  display: grid;
  grid-template-columns: 320px 1fr;
  overflow: hidden;
  border-radius: 18px;
  box-shadow: 0 18px 60px rgba(11, 29, 44, 0.25);
  background: #f3f7fb;
  min-height: 560px;
}

/* ── Brand panel (matches login-brand) ── */
.company-brand {
  padding: 48px 36px;
  background: linear-gradient(160deg, #274b6f, #1f3d5b);
  color: #ecf2f8;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
}

.brand-logo {
  display: flex;
  align-items: center;
  gap: 14px;
}

.brand-icon {
  font-size: 40px;
}

.brand-logo h1 {
  margin: 0;
  font-size: 42px;
  letter-spacing: 1px;
  color: #fff;
}

.brand-sub {
  margin: 16px 0 32px;
  color: #cae2f2;
  font-size: 14px;
  line-height: 1.5;
}

.brand-features {
  list-style: none;
  padding: 0;
  margin: 0;
  color: #a7cce6;
  font-size: 14px;
  line-height: 2.2;
}

.brand-features li::before {
  content: "✓  ";
  color: #5dbbea;
}

.brand-version {
  margin-top: 32px;
  color: #6a98bb;
  font-size: 12px;
}

/* ── Content panel ── */
.company-content {
  padding: 36px 40px;
  display: flex;
  flex-direction: column;
  max-height: 90vh;
  overflow: hidden;
}

.company-content-header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 18px;
  flex-shrink: 0;
}

.company-heading {
  margin: 0 0 4px;
  font-size: 24px;
  color: #1f3d5b;
}

.company-subhead {
  margin: 0;
  font-size: 13px;
  color: #6a8aa0;
}

.btn-create-company {
  flex-shrink: 0;
  background: #2f6fa6;
  color: #fff;
  border: none;
  border-radius: 10px;
  padding: 9px 18px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
  white-space: nowrap;
}

.btn-create-company:hover {
  background: #1f5484;
}

/* ── Search ── */
.company-search-row {
  flex-shrink: 0;
  margin-bottom: 14px;
}

.company-search-input {
  width: 100%;
  height: 40px;
  border: 1px solid #c2d1de;
  border-radius: 10px;
  padding: 0 14px;
  font-size: 14px;
  color: #23313f;
  background: #fff;
}

.company-search-input:focus {
  outline: none;
  border-color: #2f6fa6;
  box-shadow: 0 0 0 3px rgba(47, 111, 166, 0.15);
}

/* ── Company list ── */
.company-list {
  flex: 1;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: 10px;
  padding-right: 4px;
}

.company-card-form {
  margin: 0;
}

.company-card {
  display: flex;
  align-items: center;
  gap: 16px;
  padding: 14px 16px;
  border-radius: 12px;
  background: #fff;
  border: 1px solid #e2ecf4;
  transition: box-shadow 0.15s, border-color 0.15s;
}

.company-card:hover {
  border-color: #2f6fa6;
  box-shadow: 0 4px 14px rgba(47, 111, 166, 0.12);
}

.company-card-avatar {
  flex-shrink: 0;
  width: 44px;
  height: 44px;
  border-radius: 50%;
  background: linear-gradient(135deg, #2f6fa6, #1f3d5b);
  color: #fff;
  font-size: 20px;
  font-weight: 700;
  display: grid;
  place-items: center;
}

.company-card-body {
  flex: 1;
  min-width: 0;
}

.company-card-name {
  font-weight: 700;
  font-size: 15px;
  color: #1f3d5b;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.company-card-meta {
  margin-top: 3px;
  font-size: 12px;
  color: #7a9aae;
}

.btn-select-company {
  flex-shrink: 0;
  background: #27ae60;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}

.btn-select-company:hover {
  background: #1e8449;
}

/* ── Empty state ── */
.company-empty {
  text-align: center;
  padding: 60px 20px;
  color: #88a0b0;
}

.company-empty-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
}

.company-empty p {
  margin: 6px 0;
}

/* ── Company page responsive overrides (must come after base company styles) ── */
@media (max-width: 960px) {
  .company-body {
    place-items: start center;
    padding: 12px 0;
  }

  .company-shell {
    width: min(1060px, 96vw);
    grid-template-columns: 1fr;
    min-height: auto;
  }

  .company-brand {
    display: none;
  }

  .company-content {
    max-height: none;
    min-height: 0;
    padding: 24px 20px;
  }

  .company-content-header {
    flex-direction: column;
    align-items: stretch;
    gap: 10px;
  }

  .btn-create-company {
    width: 100%;
  }
}

@media (max-width: 560px) {
  .company-heading {
    font-size: 20px;
  }

  .company-subhead {
    font-size: 12px;
  }

  .company-content {
    padding: 18px 14px;
  }

  .company-list {
    gap: 8px;
    padding-right: 0;
  }

  .company-card {
    display: grid;
    grid-template-columns: 36px minmax(0, 1fr);
    column-gap: 10px;
    row-gap: 8px;
    padding: 12px;
    align-items: start;
  }

  .company-card-avatar {
    width: 36px;
    height: 36px;
    font-size: 16px;
  }

  .company-card-body {
    min-width: 0;
    width: auto;
  }

  .company-card-name {
    font-size: 14px;
  }

  .company-card-meta {
    font-size: 11px;
    line-height: 1.4;
    overflow-wrap: anywhere;
  }

  .btn-select-company {
    grid-column: 1 / -1;
    width: 100%;
    margin-top: 4px;
  }
}

/* ══════════════════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════════════════ */

.modal-overlay {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(10, 24, 38, 0.55);
  z-index: 1000;
  align-items: center;
  justify-content: center;
  padding: 20px;
}

.modal-overlay.open {
  display: flex;
}

.modal-box {
  background: #fff;
  border-radius: 16px;
  width: min(720px, 96vw);
  max-height: 90vh;
  display: flex;
  flex-direction: column;
  box-shadow: 0 24px 80px rgba(0, 0, 0, 0.28);
}

.modal-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 22px 28px 18px;
  border-bottom: 1px solid #e2ecf4;
  flex-shrink: 0;
}

.modal-header h3 {
  margin: 0;
  font-size: 20px;
  color: #1f3d5b;
}

.modal-close {
  background: none;
  border: none;
  font-size: 24px;
  color: #7a9aae;
  cursor: pointer;
  line-height: 1;
  width: 44px;
  height: 44px;
  padding: 0;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.modal-close:hover {
  color: #1f3d5b;
}

#create-company-form {
  padding: 20px 28px;
  overflow-y: auto;
  flex: 1;
}

/* ── Form layout ── */
.form-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 20px;
  margin-bottom: 0;
}

.form-group {
  display: flex;
  flex-direction: column;
  gap: 4px;
  margin-bottom: 14px;
}

.form-group.full-width,
.form-group.span-2 {
  grid-column: span 2;
}

.form-group label {
  font-size: 12px;
  font-weight: 600;
  color: #5a7a90;
  text-transform: uppercase;
  letter-spacing: 0.4px;
}

.form-group input,
.form-group select {
  height: 40px;
  border: 1px solid #c2d1de;
  border-radius: 8px;
  padding: 0 12px;
  font-size: 14px;
  color: #23313f;
  background: #fafdff;
}

.form-group input:focus,
.form-group select:focus {
  outline: none;
  border-color: #2f6fa6;
  box-shadow: 0 0 0 3px rgba(47, 111, 166, 0.15);
}

/* ── Wizard step indicator ── */
.wizard-steps {
  display: flex;
  align-items: center;
  margin: 4px 0 16px;
}
.wstep {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 4px;
  font-size: 11px;
  font-weight: 600;
  color: #a0b8cc;
  min-width: 68px;
  text-align: center;
}
.wstep span {
  width: 28px; height: 28px;
  border-radius: 50%;
  background: #e2ecf4;
  color: #8aa4b8;
  display: flex; align-items: center; justify-content: center;
  font-size: 13px; font-weight: 700;
  transition: background 0.2s, color 0.2s;
}
.wstep.active { color: #2f6fa6; }
.wstep.active span { background: #2f6fa6; color: #fff; }
.wstep.done { color: #3aaa6f; }
.wstep.done span { background: #3aaa6f; color: #fff; }
.wstep-line { flex: 1; height: 2px; background: #dce8f0; margin-bottom: 22px; }

/* Required field star */
.req-star { color: #e53935; font-size: 13px; }

/* Wizard back/next buttons */
.btn-wizard-back,
.btn-wizard-next {
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.btn-wizard-back {
  background: #eef2f6;
  color: #4a6070;
}
.btn-wizard-back:hover { background: #dce5ed; }
.btn-wizard-next {
  background: #2f6fa6;
  color: #fff;
}
.btn-wizard-next:hover { background: #245a8a; }

/* ── Company Settings (edit) form ── */
.cs-wrap { max-width: 780px; }
.cs-section-title {
  font-size: 13px;
  font-weight: 700;
  color: #2f6fa6;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  margin: 18px 0 8px;
  padding-bottom: 4px;
  border-bottom: 1px solid #e2ecf4;
}
html[data-theme="dark"] .cs-section-title { color: #90b8d8; border-bottom-color: #2e4060; }
.cs-alert {
  padding: 10px 14px;
  border-radius: 8px;
  font-size: 13px;
  margin-bottom: 12px;
}
.cs-alert-ok { background: #e8f6ee; color: #256840; border: 1px solid #b2dfc4; }
.cs-alert-err { background: #fdecea; color: #b71c1c; border: 1px solid #f5b8b5; }
.cs-actions {
  padding-top: 16px;
  border-top: 1px solid #e2ecf4;
  margin-top: 8px;
}

/* ===================================================================
   PATIENT ENTRY MODULE
   =================================================================== */
.pe-wrap {
  display: flex;
  flex-direction: column;
  height: 100%;
  background: #f5f6fa;
  overflow: hidden;
}

.pe-page {
  display: flex;
  flex-direction: column;
  gap: 14px;
  height: 100%;
  min-height: 0;
}

.pe-entry-heading {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 14px 0;
  background: linear-gradient(180deg, #f5f8fc 0%, #f5f6fa 100%);
}

.pe-entry-title {
  font-size: 13px;
  font-weight: 800;
  color: #183b5d;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.pe-entry-sub {
  font-size: 12px;
  color: #58718b;
}

/* ── Top bar ─────────────────────────────────────────────────────── */
.pe-topbar {
  display: flex;
  align-items: flex-end;
  gap: 10px;
  padding: 8px 14px 7px;
  background: #2f6fa6;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.pe-topbar-field {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.pe-topbar-field label {
  font-size: 10px;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  text-transform: uppercase;
  letter-spacing: 0.04em;
}
.pe-topbar .pe-inp,
.pe-topbar .pe-sel {
  height: 30px;
  padding: 0 8px;
  border: 1px solid rgba(255,255,255,0.35);
  border-radius: 4px;
  background: rgba(255,255,255,0.15);
  color: #fff;
  font-size: 13px;
}
.pe-topbar .pe-inp::placeholder { color: rgba(255,255,255,0.55); }
.pe-topbar .pe-inp:focus,
.pe-topbar .pe-sel:focus { outline: none; background: rgba(255,255,255,0.28); border-color: rgba(255,255,255,0.7); }
.pe-topbar .pe-sel option { color: #222; background: #fff; }
.pe-labno-inp { width: 130px; font-weight: 700; letter-spacing: 0.04em; }
.pe-name-field .pe-inp { width: 200px; }
.pe-age-inp { width: 60px; }
.pe-age-wrap {
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.pe-age-sub-inp { width: 52px; }
.pe-age-sep {
  color: rgba(255,255,255,0.82);
  font-size: 12px;
  line-height: 1;
  user-select: none;
}

/* ── Body ────────────────────────────────────────────────────────── */
.pe-body {
  display: flex;
  flex: 1;
  overflow: hidden;
  min-height: 0;
}

/* ── Left: tests panel ───────────────────────────────────────────── */
.pe-tests-panel {
  width: 300px;
  flex-shrink: 0;
  display: flex;
  flex-direction: column;
  border-right: 1px solid #dee2e6;
  background: #fff;
}
.pe-tests-toolbar {
  display: flex;
  gap: 6px;
  padding: 7px 8px;
  border-bottom: 1px solid #eee;
  flex-shrink: 0;
}
.pe-tests-toolbar .pe-inp {
  flex: 1;
  height: 28px;
  padding: 0 8px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 12px;
}
.pe-tests-scroll { flex: 1; overflow-y: auto; }
.pe-tests-table { width: 100%; border-collapse: collapse; font-size: 12px; }
.pe-tests-table thead th {
  background: #f0f4ff;
  padding: 5px 6px;
  text-align: left;
  font-size: 11px;
  color: #555;
  position: sticky;
  top: 0;
  z-index: 1;
  border-bottom: 1px solid #dde;
}
.pe-group-row td {
  background: #e8f0fe;
  padding: 5px 8px;
  cursor: pointer;
  user-select: none;
  font-size: 12px;
}
.pe-group-row:hover td { background: #d2e3fc; }
.pe-group-arrow { margin-right: 5px; font-size: 10px; }
.pe-group-subtotal { float: right; color: #1a73e8; font-size: 11px; font-weight: 600; }
.pe-test-row td { padding: 3px 6px; border-bottom: 1px solid #f0f0f0; }
.pe-test-row:hover td { background: #f8f9fa; }
.pe-test-row input[type="checkbox"] { cursor: pointer; }
.pe-test-name { color: #333; }
.pe-test-price { text-align: right; color: #1a73e8; font-size: 11px; width: 54px; }

/* ── Right: info panel ───────────────────────────────────────────── */
.pe-info-panel {
  flex: 1;
  overflow-y: auto;
  padding: 12px 16px;
}

.pe-history-card {
  border: 1px solid #d7e1ec;
  border-radius: 10px;
  background: #ffffff;
  padding: 10px 12px;
  margin-bottom: 12px;
  box-shadow: 0 1px 2px rgba(17, 43, 70, 0.06);
}

.pe-history-card-standalone {
  margin: 0 16px;
  padding: 12px 14px 14px;
  border-color: #cad8e8;
  box-shadow: 0 10px 24px rgba(19, 48, 77, 0.08);
}

.pe-history-head {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.pe-history-title {
  font-size: 12px;
  font-weight: 700;
  color: #123657;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

.pe-history-sub {
  font-size: 11px;
  color: #5c748b;
}

.pe-history-kicker {
  font-size: 12px;
  color: #5f7891;
  text-align: right;
}

.pe-history-grid {
  display: grid;
  grid-template-columns: repeat(4, minmax(0, 1fr));
  gap: 8px 10px;
}
/* These inputs had no rule at all (relying on browser defaults), which broke
   in dark mode: color-scheme:dark gives them a native dark background while
   the global input color fallback keeps text dark navy — dark-on-dark. */
.pe-history-grid .pe-inp {
  width: 100%; height: 32px; padding: 0 8px;
  border: 1px solid #ced4da; border-radius: 4px;
  font-size: 13px; color: #222; background: #fff;
}
.pe-history-grid .pe-inp:focus {
  outline: none; border-color: #1a73e8; box-shadow: 0 0 0 2px rgba(26,115,232,0.14);
}
html[data-theme="dark"] .pe-history-grid .pe-inp {
  background: #0f1a27; color: #d6e2ee; border-color: #2e4458;
}
html[data-theme="dark"] .pe-history-grid .pe-inp::placeholder {
  color: rgba(214, 226, 238, 0.55);
}
/* The card itself and its labels had no dark variant either — the input fix
   above was landing inside a card that stayed hardcoded white, so the dark
   inputs looked like holes punched in a light card instead of a themed panel. */
html[data-theme="dark"] .pe-history-card {
  background: #142130; border-color: #2e4458;
}
html[data-theme="dark"] .pe-history-title { color: #dceaf8; }
html[data-theme="dark"] .pe-history-sub,
html[data-theme="dark"] .pe-history-kicker { color: #acc4d9; }
html[data-theme="dark"] .pe-history-grid .pe-field label { color: #acc4d9; }

.pe-history-actions {
  margin-top: 8px;
  display: flex;
  justify-content: flex-end;
  gap: 8px;
}

.pe-history-status {
  margin-top: 8px;
  border-radius: 6px;
  padding: 6px 8px;
  font-size: 12px;
}

.pe-history-status-info {
  background: #eef5ff;
  color: #1c4f8b;
  border: 1px solid #cfe0fb;
}

.pe-history-status-ok {
  background: #e8f6ec;
  color: #1d6a38;
  border: 1px solid #bfe2c9;
}

.pe-history-status-err {
  background: #fdeeee;
  color: #8f2e2e;
  border: 1px solid #f1c8c8;
}

.pe-history-results {
  margin-top: 8px;
}

.pe-history-empty {
  padding: 10px;
  border: 1px dashed #cfd9e5;
  border-radius: 8px;
  color: #5e7184;
  background: #f9fbfe;
  font-size: 12px;
}

.pe-history-table-wrap {
  max-height: 220px;
  overflow: auto;
  border: 1px solid #dae3ee;
  border-radius: 8px;
}

.pe-history-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 12px;
  background: #fff;
}

.pe-history-table thead th {
  position: sticky;
  top: 0;
  z-index: 1;
  background: #edf3fb;
  color: #35536e;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  font-size: 10px;
  text-align: left;
  padding: 6px 8px;
  border-bottom: 1px solid #c7d7ea;
  white-space: nowrap;
}

.pe-history-table td {
  padding: 6px 8px;
  border-bottom: 1px solid #edf1f6;
  color: #1d2f40;
  vertical-align: middle;
  white-space: nowrap;
}

.pe-history-table tbody tr:hover td {
  background: #f6faff;
}

.pe-hist-use {
  min-height: 26px;
  padding: 0 10px;
}
.pe-intake-actions {
  margin-top: 12px;
  display: flex;
  justify-content: flex-end;
}

/* Intake-first mode: show details form first, hide test selector + billing */
.pe-wrap.pe-mode-intake .pe-tests-3col,
.pe-wrap.pe-mode-intake .pe-billing-bar {
  display: none;
}
.pe-wrap.pe-mode-intake .pe-info-panel {
  padding-top: 14px;
}
.pe-wrap.pe-mode-intake .pe-info-grid {
  max-width: 980px;
}

/* Test-selection mode: hide details form to reduce clutter */
.pe-wrap:not(.pe-mode-intake) .pe-info-panel {
  display: none;
}
.pe-wrap:not(.pe-mode-intake) .pe-tests-3col {
  flex: 1;
  border-right: none;
}
.pe-wrap:not(.pe-mode-intake) .pe-grp-col {
  width: 300px;
}
.pe-wrap:not(.pe-mode-intake) .pe-final-col {
  width: 440px;
}
.pe-info-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 16px;
  max-width: 760px;
}
.pe-field { display: flex; flex-direction: column; gap: 3px; position: relative; }
.pe-field.span-2 { grid-column: span 2; }
.pe-field label {
  font-size: 12px;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}
.pe-info-panel .pe-inp,
.pe-info-panel .pe-sel {
  width: 100%;
  height: 30px;
  padding: 0 8px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 13px;
  color: #222;
  background: #fff;
  transition: border-color 0.12s;
}
.pe-info-panel .pe-inp:focus,
.pe-info-panel .pe-sel:focus {
  outline: none;
  border-color: #1a73e8;
  box-shadow: 0 0 0 2px rgba(26,115,232,0.14);
}
.pe-textarea {
  height: auto !important;
  padding: 6px 8px !important;
  resize: vertical;
}
.pe-patient-badge {
  font-size: 11px;
  padding: 2px 6px;
  border-radius: 3px;
  margin-top: 2px;
}
.pe-patient-found { background: #e6f4ea; color: #1e7e34; border: 1px solid #b7dfbe; }
.pe-patient-hint  { background: #fff8e1; color: #7a5c00; border: 1px solid #ffe082; }

/* ── Billing bar ─────────────────────────────────────────────────── */
.pe-billing-bar {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 8px 14px;
  background: #fff;
  border-top: 2px solid #1a73e8;
  flex-wrap: wrap;
  flex-shrink: 0;
}
.pe-billing-field { display: flex; flex-direction: column; gap: 2px; }
.pe-billing-field label {
  font-size: 10px;
  font-weight: 600;
  color: #555;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

@media (max-width: 1024px) {
  .pe-topbar-field label,
  .pe-billing-field label {
    font-size: 12px;
  }
}
.pe-billing-inp {
  width: 88px;
  height: 30px;
  padding: 0 8px;
  border: 1px solid #ced4da;
  border-radius: 4px;
  font-size: 13px;
  /* Patient Entry doesn't theme for dark mode yet, but `color-scheme: dark`
     (set on <html> for the rest of the app) still makes the browser paint
     native form controls with a dark default background whenever one isn't
     set explicitly -- colliding with the global dark-navy input text color
     and making this unreadable. Pin it so this field looks the same in both
     themes, same as .pe-net-inp already does via its own explicit background. */
  background: #fff;
}

@media (max-width: 1024px) {
  .pe-topbar-field label,
  .pe-billing-field label {
    font-size: 12px;
  }
}
}
.pe-billing-inp:focus { outline: none; border-color: #1a73e8; box-shadow: 0 0 0 2px rgba(26,115,232,0.14); }
.pe-net-inp { font-weight: 700; color: #1a73e8; background: #f0f4ff !important; border-color: #b8d0f8 !important; }
.pe-utr-field .pe-billing-inp { width: 200px; }
@media (max-width: 700px) { .pe-utr-field { width: 100%; } .pe-utr-field .pe-billing-inp { width: 100%; box-sizing: border-box; } }
.pe-billing-actions {
  display: flex;
  align-items: flex-end;
  gap: 7px;
  margin-left: auto;
  flex-wrap: wrap;
}
.pe-alert {
  padding: 5px 10px;
  border-radius: 4px;
  font-size: 12px;
  max-width: 280px;
}
.pe-alert-ok  { background: #e6f4ea; color: #1e7e34; border: 1px solid #b7dfbe; }
.pe-alert-err { background: #fce8e6; color: #c62828; border: 1px solid #f5c6cb; }
.pe-btn {
  height: 32px;
  padding: 0 16px;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  font-size: 13px;
  font-weight: 600;
}
.pe-btn-save { background: #2f6fa6; color: #fff; }
.pe-btn-save:hover { background: #1f3d5b; }
.pe-btn-save:disabled { background: #aaa; cursor: not-allowed; }
.pe-btn-new  { background: #34a853; color: #fff; }
.pe-btn-new:hover { background: #2d8f47; }
.pe-btn-list { background: #f5f5f5; color: #333; border: 1px solid #ccc; }
.pe-btn-list:hover { background: #e8e8e8; }
.pe-btn-sm {
  height: 28px;
  padding: 0 10px;
  border: 1px solid #ccc;
  border-radius: 4px;
  background: #f5f5f5;
  cursor: pointer;
  font-size: 11px;
}
.pe-btn-sm:hover { background: #e0e0e0; }
.cs-save-btn {
  background: #2f6fa6;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 28px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
}
.cs-save-btn:hover { background: #245a8a; }
.cs-save-btn:disabled { opacity: 0.6; cursor: not-allowed; }

/* Phone input with country code prefix */
.phone-input-group {
  display: flex;
}
.phone-code-select {
  width: 74px;
  flex-shrink: 0;
  height: 40px;
  border: 1px solid #c2d1de;
  border-right: none;
  border-radius: 8px 0 0 8px;
  padding: 0 2px 0 8px;
  font-size: 12px;
  color: #23313f;
  background: #edf3f8;
  cursor: pointer;
}
.phone-code-select:focus {
  outline: none;
  border-color: #2f6fa6;
  box-shadow: 0 0 0 3px rgba(47,111,166,.15);
  z-index: 1;
}
.phone-number-input {
  flex: 1;
  height: 40px;
  border: 1px solid #c2d1de;
  border-radius: 0 8px 8px 0;
  padding: 0 12px;
  font-size: 14px;
  color: #23313f;
  background: #fafdff;
}
.phone-number-input:focus {
  outline: none;
  border-color: #2f6fa6;
  box-shadow: 0 0 0 3px rgba(47,111,166,.15);
}
/* Pincode lookup spinner */
.pin-spin {
  display: inline-block;
  animation: pin-rotate 0.9s linear infinite;
  color: #2f6fa6;
  font-size: 14px;
  margin-left: 3px;
}
@keyframes pin-rotate {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}

.modal-footer {
  display: flex;
  justify-content: flex-end;
  gap: 12px;
  padding: 16px 0 4px;
  border-top: 1px solid #e2ecf4;
  margin-top: 8px;
}

.btn-modal-cancel {
  background: #eef2f6;
  color: #4a6070;
  border: none;
  border-radius: 8px;
  padding: 10px 22px;
  font-size: 14px;
  cursor: pointer;
}

.btn-modal-cancel:hover {
  background: #dce5ed;
}

.btn-modal-create {
  background: #2f6fa6;
  color: #fff;
  border: none;
  border-radius: 8px;
  padding: 10px 24px;
  font-size: 14px;
  font-weight: 700;
  cursor: pointer;
}

.btn-modal-create:hover {
  background: #1f5484;
}

.btn-modal-create:disabled {
  opacity: 0.6;
  cursor: not-allowed;
}

/* ══════════════════════════════════════════════════════
   LOGIN PAGE (REDESIGNED)
   ══════════════════════════════════════════════════════ */

.login-brand-teal {
  background: linear-gradient(160deg, var(--brand-primary, #1a5c78), var(--brand-secondary, #0e3d52)) !important;
  position: relative;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  padding: 48px 40px 32px !important;
}

.login-company-icon {
  font-size: 48px;
  display: block;
  margin-bottom: 12px;
}

.login-brand-teal h1 {
  font-size: 28px;
  margin: 0 0 6px;
  color: #fff;
}

.login-company-location {
  color: #9dd6f0 !important;
  font-size: 13px;
}

.login-brand-teal .brand-features {
  margin-top: 20px;
}

.login-divider {
  width: 48px;
  height: 3px;
  background: #3ea6d0;
  border-radius: 2px;
  margin: 20px 0;
}

.login-meta-item {
  font-size: 13px;
  color: #b8dff2;
  margin-bottom: 8px;
}

.login-meta-item span {
  display: block;
  font-size: 12px;
  text-transform: uppercase;
  letter-spacing: 0.5px;
  color: #5a9cba;
  margin-bottom: 1px;
}

.login-change-company {
  font-size: 13px;
  color: #6ab4d4;
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-height: 44px;
  padding: 10px 12px;
  border-radius: 10px;
  margin-top: 20px;
}

.login-change-company:hover {
  color: #a8daf2;
  background: rgba(106, 180, 212, 0.12);
}

.login-card-header {
  margin-bottom: 24px;
}

.login-card-header h2 {
  margin: 0;
  letter-spacing: 3px;
  font-size: 20px;
  color: #1f3d5b;
}

.login-field {
  display: flex;
  align-items: center;
  gap: 10px;
  border: 1px solid #c2d1de;
  border-radius: 10px;
  padding: 0 12px;
  background: #fff;
  margin-bottom: 14px;
  height: 48px;
}

.login-field:focus-within {
  border-color: #2f6fa6;
  box-shadow: 0 0 0 3px rgba(47, 111, 166, 0.12);
}

.login-field-icon {
  font-size: 16px;
  flex-shrink: 0;
  color: #7a9aae;
  display: inline-flex;
}

.login-field-icon svg {
  width: 18px;
  height: 18px;
}

.login-eye-btn svg {
  width: 20px;
  height: 20px;
}

.login-field input {
  flex: 1;
  border: none;
  background: transparent;
  font-size: 15px;
  outline: none;
  color: #23313f;
  height: 100%;
}

.login-eye-btn {
  background: none;
  border: none;
  cursor: pointer;
  font-size: 16px;
  line-height: 1;
  padding: 2px;
  color: #7a9aae;
  min-width: 44px;
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
}

/* `.login-form button` (base rules, higher specificity via its element+class
   selector) sets margin-top: 8px, which pushes this 44px button past the
   48px-tall .login-field row and overflows its rounded border. */
.login-field .login-eye-btn {
  margin-top: 0;
}

.sr-only {
  position: absolute;
  width: 1px;
  height: 1px;
  padding: 0;
  margin: -1px;
  overflow: hidden;
  clip: rect(0, 0, 0, 0);
  white-space: nowrap;
  border: 0;
}

.login-actions {
  display: flex;
  gap: 12px;
  margin-top: 8px;
}

/* ── Poster splash (/web/splash) ──
   Deliberately its own thing, not the .login-body/.login-shell/.login-card
   chrome shared by every functional login-family page: a marketing poster in
   a small boxed card on an unrelated pale background read as a stray dialog,
   not a splash. One fixed dark look regardless of the app's light/dark
   toggle -- the poster art itself doesn't change with theme. */
.splash-body {
  min-height: 100vh;
  display: grid;
  place-items: center;
  gap: 20px;
  padding: 20px 16px;
  background: radial-gradient(circle at 50% 0%, #16323b, #0a1a1f 55%, #060f12 100%);
}

.splash-poster {
  max-height: 78vh;
  max-width: min(560px, 92vw);
  width: auto;
  border-radius: 16px;
  box-shadow: 0 24px 70px rgba(0, 0, 0, 0.5);
}

.splash-continue-btn {
  display: inline-block;
  padding: 14px 56px;
  border-radius: 10px;
  background: #2f6fa6;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  letter-spacing: 1px;
  text-align: center;
  text-decoration: none;
}

.splash-continue-btn:hover {
  background: #1f5484;
}

.login-cancel-btn {
  flex: 1;
  height: 46px;
  border-radius: 10px;
  background: #eef2f6;
  color: #4a6070;
  text-decoration: none;
  display: grid;
  place-items: center;
  font-size: 15px;
  font-weight: 600;
}

.login-cancel-btn:hover {
  background: #dce5ed;
}

.login-submit-btn {
  flex: 2;
  height: 46px;
  border: none;
  border-radius: 10px;
  background: #2f6fa6;
  color: #fff;
  font-weight: 700;
  font-size: 15px;
  cursor: pointer;
  letter-spacing: 1px;
}

.login-submit-btn:hover {
  background: #1f5484;
}

/* ── Dark-mode overrides for the redesigned login fields ──
   Without these, the generic `html[data-theme="dark"] .login-form input` rule paints
   the input dark while its `.login-field` wrapper stays hardcoded #fff, producing a
   white box around a dark input with the icons stranded on white. Make the whole field
   dark and let the input ride transparently on the wrapper background. */
html[data-theme="dark"] .login-field {
  background: #0f1a27;
  border-color: #2e4458;
}

html[data-theme="dark"] .login-field:focus-within {
  border-color: #4a86c4;
  box-shadow: 0 0 0 3px rgba(74, 134, 196, 0.18);
}

html[data-theme="dark"] .login-field input {
  background: transparent;
  color: #d6e2ee;
}

html[data-theme="dark"] .login-field input::placeholder {
  color: #7e96ab;
}

html[data-theme="dark"] .login-eye-btn {
  color: #8fb0c8;
}

html[data-theme="dark"] .login-field-icon {
  color: #8fb0c8;
}

html[data-theme="dark"] .login-cancel-btn {
  background: #21344a;
  color: #c4d4e2;
}

html[data-theme="dark"] .login-cancel-btn:hover {
  background: #2b4259;
}

/* ── Redesigned login responsive overrides (placed after redesigned styles) ── */
@media (max-width: 960px) {
  .login-body {
    place-items: start center;
    padding: 12px 0;
  }

  .login-shell {
    width: min(620px, 96vw);
    grid-template-columns: 1fr;
  }

  .login-brand-teal {
    padding: 28px 24px 20px !important;
  }

  .login-brand-teal h1 {
    font-size: 28px;
  }

  .login-card-header h2 {
    font-size: 18px;
    letter-spacing: 4px;
  }

  .login-field {
    height: 46px;
  }

  .login-card {
    padding: 28px 24px;
  }
}

@media (max-width: 560px) {
  .login-shell {
    width: min(1000px, 95vw);
    border-radius: 16px;
  }

  .login-brand-teal {
    padding: 18px 14px 14px !important;
  }

  .login-company-icon {
    font-size: 34px;
    margin-bottom: 6px;
  }

  .login-brand-teal h1 {
    font-size: 24px;
  }

  .login-company-location {
    font-size: 11px;
  }

  .login-divider {
    margin: 10px 0;
  }

  .login-meta-item {
    font-size: 11px;
    margin-bottom: 4px;
  }

  .login-meta-item span {
    font-size: 12px;
  }

  .login-change-company {
    margin-top: 10px;
    font-size: 12px;
  }

  .login-card {
    padding: 14px;
  }

  .login-card-header {
    margin-bottom: 14px;
  }

  .login-card-header h2 {
    letter-spacing: 5px;
    font-size: 18px;
  }

  .login-field {
    height: 44px;
    margin-bottom: 10px;
    padding: 0 10px;
  }

  .login-eye-btn {
    min-width: 44px;
    height: 44px;
    border-radius: 12px;
    background: #2f6fa6;
    color: #fff;
  }

  .login-actions {
    margin-top: 4px;
  }

  .login-cancel-btn,
  .login-submit-btn {
    height: 44px;
  }
}


/* ===================================================================
   RECEIPT DIALOG
   =================================================================== */
.rcpt-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center; z-index: 9999;
}
.rcpt-box {
  background: #fff; border-radius: 14px; padding: 36px 40px;
  width: 380px; max-width: 94vw; text-align: center;
  box-shadow: 0 8px 40px rgba(0,0,0,.25);
}
.rcpt-icon { font-size: 48px; line-height: 1; margin-bottom: 8px; }
.rcpt-title { font-size: 18px; font-weight: 700; color: #1a1a2e; margin-bottom: 4px; }
.rcpt-subtitle { font-size: 13px; color: #555; margin-bottom: 20px; }
.rcpt-question { font-size: 14px; font-weight: 600; color: #333; margin-bottom: 18px; }
.rcpt-btns { display: flex; gap: 12px; justify-content: center; }
.rcpt-btn {
  flex: 1; padding: 10px 0; border-radius: 8px; font-size: 14px;
  font-weight: 600; cursor: pointer; border: none;
  transition: opacity .15s;
}
.rcpt-btn:hover { opacity: .85; }
.rcpt-btn:disabled { opacity: .55; cursor: not-allowed; }
.rcpt-yes { background: #2f6fa6; color: #fff; }
.rcpt-no  { background: #eef2f6; color: #333; }

/* Report QR Modal */
.rqr-box {
  background: #fff; border-radius: 14px; padding: 28px 32px;
  width: 560px; max-width: 96vw;
  box-shadow: 0 8px 40px rgba(0,0,0,.28);
}
.rqr-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 10px; }
.rqr-title { font-size: 17px; font-weight: 700; color: #1a1a2e; }
.rqr-close {
  background: none; border: none; font-size: 18px; cursor: pointer;
  color: #666; padding: 2px 6px; border-radius: 4px;
}
.rqr-close:hover { background: #f0f0f0; }
.rqr-note { font-size: 12px; color: #666; margin: 0 0 18px; }
.rqr-options { display: flex; gap: 24px; justify-content: center; }
.rqr-option {
  flex: 1; display: flex; flex-direction: column; align-items: center;
  background: #f8fafc; border: 1px solid #e0e7ef; border-radius: 10px; padding: 18px 14px 14px;
}
.rqr-opt-title { font-size: 13px; font-weight: 600; color: #2d3a4a; margin-bottom: 12px; display: flex; gap: 6px; align-items: center; }
.rqr-tag { font-size: 10px; font-weight: 600; padding: 2px 7px; border-radius: 10px; letter-spacing: .3px; }
.rqr-tag-blue { background: #e3f0ff; color: #1a73e8; }
.rqr-tag-grey { background: #eceff1; color: #546e7a; }
.rqr-img-wrap {
  width: 200px; height: 200px; display: flex; align-items: center; justify-content: center;
  background: #fff; border: 1px solid #dde3ec; border-radius: 6px; overflow: hidden;
}
.rqr-img-wrap svg { display: block; }
.rqr-loading { font-size: 12px; color: #aaa; }
.rqr-err { font-size: 12px; color: #c62828; }
.rqr-dl-btn {
  margin-top: 12px; font-size: 12px; font-weight: 600; color: #1a73e8;
  text-decoration: none; padding: 5px 14px; border: 1px solid #1a73e8;
  border-radius: 6px; background: #e8f0fe;
  transition: background .15s;
}
.rqr-dl-btn:hover { background: #d2e3fc; }
@media (max-width: 540px) {
  .rqr-options { flex-direction: column; }
  .rqr-box { padding: 20px 16px; }
}
/* QR button in result entry action bar */
.rentry-qr-btn {
  background: #7c4dff; color: #fff; border: none; border-radius: 5px;
  padding: 7px 14px; font-size: 13px; font-weight: 600; cursor: pointer;
  transition: background .15s;
}
.rentry-qr-btn:hover { background: #651fff; }

/* ===================================================================
   3-PANEL TEST SELECTOR (Patient Entry) — Desktop parity
   =================================================================== */
.pe-tests-3col {
  /* overflow-x: auto (not hidden) is a safety net: the non-stacked layout's
     fixed-width columns need a real minimum width (see STACK_BELOW_PX in
     web_app.js) below which they don't fit. If that JS breakpoint and this
     CSS ever drift out of sync again, a horizontal scrollbar keeps every
     column — including Final List's remove-test button — reachable instead
     of silently clipped off-screen with no way to get to it. */
  display: flex; flex: 1; overflow-x: auto; overflow-y: hidden; min-height: 0;
  border-right: 1px solid #dee2e6; background: #fff;
}
/* Add Test picker modal (Result Entry) — give the 3-panel layout an explicit
   height since it isn't nested in the Patient Entry flex page here. */
.atp-picker-3col { height: 64vh; min-height: 380px; max-height: 560px; flex: none; }
/* Inline Patient Entry lives in an auto-height app shell (min-height:100vh, no
   definite height), so height:100% never bounds the flex chain and the test
   columns can't scroll. Cap the selector at a viewport fraction so each column
   (groups / available tests / final list) scrolls internally — same fix as
   .atp-picker-3col above. Scoped to .pe-wrap so the modal is untouched. */
.pe-wrap .pe-tests-3col { max-height: 60vh; }
.pe-grp-col  { width: 220px; flex-shrink: 0; display: flex; flex-direction: column; border-right: 2px solid #c8d8ea; background: #fafbfc; }
/* min-width must clear the avail table's own fixed columns (chk 26 + grp 90 + price 60 = 176px)
   plus room for a legible Test Name — 180px left ~4px for the name, crushing it to one letter. */
.pe-avail-col { flex: 1; min-width: 300px; display: flex; flex-direction: column; border-right: 1px solid #dee2e6; }
.pe-arrow-col { width: 36px; flex-shrink: 0; display: flex; align-items: center; justify-content: center; background: #f0f4ff; border-right: 1px solid #dee2e6; }
.pe-final-col { width: 290px; flex-shrink: 0; display: flex; flex-direction: column; }
.pe-col-hdr {
  padding: 5px 10px; font-size: 11px; font-weight: 700;
  text-transform: uppercase; color: #444; background: #e8edf5;
  border-bottom: 1px solid #c8d0e0; flex-shrink: 0; white-space: nowrap; overflow: hidden;
}
.pe-grp-col-hdr { font-size: 10px; letter-spacing: 0.02em; }

.pe-mobile-stagebar {
  display: none;
  align-items: center;
  gap: 6px;
  padding: 8px 8px 6px;
  background: #f7f9fc;
  border-bottom: 1px solid #d7deea;
}

.pe-mobile-stagebtn {
  border: 1px solid #c8d2e2;
  background: #fff;
  color: #1f3b57;
  border-radius: 16px;
  font-size: 11px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: 0.03em;
  padding: 6px 10px;
  cursor: pointer;
}

.pe-mobile-stagebtn.is-active {
  background: #2f6fa6;
  border-color: #1a73e8;
  color: #fff;
}

.pe-mobile-add-btn {
  display: none;
  border: none;
  background: #2f6fa6;
  color: #fff;
  border-radius: 4px;
  font-size: 11px;
  font-weight: 700;
  padding: 4px 8px;
  cursor: pointer;
}

.pe-mobile-add-btn:hover {
  background: #1557b0;
}

/* ── Groups left panel ─────────────────────────────────────────────── */
.pe-grp-list { flex: 1; overflow-y: auto; margin: 0; padding: 0; }
.pe-grp-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 7px 10px; cursor: pointer; font-size: 12px; font-weight: 600;
  color: #333; border-bottom: 1px solid #eaeef2; user-select: none;
}
.pe-grp-item:hover { background: #edf3fb; }
.pe-grp-active {
  background: #fffde7 !important; color: #1a237e; font-weight: 700;
  border-left: 3px solid #f9a825;
}
.pe-grp-badge {
  background: #1565c0; color: #fff; border-radius: 4px;
  padding: 1px 5px; font-size: 10px; font-weight: 700; flex-shrink: 0;
  margin-left: 4px; white-space: nowrap;
}
.pe-grp-active .pe-grp-badge { background: #e65100; }

/* ── Middle: toolbar rows ──────────────────────────────────────────── */
.pe-avail-toolbar {
  display: flex; align-items: center; flex-shrink: 0;
  padding: 4px 6px; border-bottom: 1px solid #e0e4ea; background: #f8fafc;
}
.pe-search-inp {
  flex: 1; height: 26px; padding: 0 8px;
  border: 1px solid #c8d0de; border-radius: 4px; font-size: 12px;
  outline: none; background: #fff;
}
.pe-search-inp:focus { border-color: #1a73e8; background: #f0f8ff; }
.pe-avail-toolbar2 {
  display: flex; align-items: center; justify-content: space-between;
  padding: 3px 8px 3px 10px; border-bottom: 1px solid #e0e4ea;
  font-size: 11px; color: #555; flex-shrink: 0; background: #f8fafc;
}
.pe-selall-lbl { cursor: pointer; user-select: none; display: flex; align-items: center; gap: 4px; }
.pe-choose-lbl { font-weight: 700; color: #1a73e8; font-size: 11px; }

/* ── Middle: available tests table ────────────────────────────────── */
.pe-avail-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; }
.pe-avail-tbl { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.pe-avail-tbl thead { position: sticky; top: 0; z-index: 2; }
.pe-avail-tbl thead th {
  background: #e8f0fe; padding: 5px 6px; text-align: left;
  font-size: 10px; font-weight: 700; color: #333; border-bottom: 2px solid #c5d4f0;
  text-transform: uppercase; white-space: nowrap; overflow: hidden;
}
.pe-avail-th-chk  { width: 26px; text-align: center; }
.pe-avail-th-name { width: auto; }
.pe-avail-th-price { width: 60px; text-align: right; }
.pe-avail-row { cursor: pointer; border-bottom: 1px solid #f0f0f0; }
.pe-avail-row:hover td { background: #f5f8ff; }
.pe-avail-row-checked td { background: #d9eaff !important; }
.pe-avail-tbl td { padding: 5px 6px; vertical-align: middle; }
.pe-avail-td-chk  { width: 26px; text-align: center; }
.pe-avail-td-name { color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; font-size: 12px; }
.pe-avail-td-price { text-align: right; color: #333; white-space: nowrap; }
.pe-avail-chk { cursor: pointer; width: 14px; height: 14px; }
.pe-avail-empty { padding: 16px; text-align: center; color: #aaa; font-size: 12px; }

.pe-wrap:not(.pe-mode-intake) .pe-avail-tbl thead th { padding: 7px 8px; }
.pe-wrap:not(.pe-mode-intake) .pe-avail-tbl td { padding: 7px 8px; }
.pe-wrap:not(.pe-mode-intake) .pe-avail-th-price { width: 80px; }

.pe-wrap:not(.pe-mode-intake) .pe-final-tbl thead th { padding: 7px 8px; }
.pe-wrap:not(.pe-mode-intake) .pe-final-tbl td { padding: 7px 8px; }
.pe-wrap:not(.pe-mode-intake) .pe-final-th-grp { width: 120px; }

/* ── ">>" button ──────────────────────────────────────────────────── */
.pe-arrow-btn {
  background: #2f6fa6; color: #fff; border: none; border-radius: 4px;
  padding: 10px 6px; font-size: 11px; font-weight: 700; cursor: pointer;
  letter-spacing: 2px;
}
.pe-arrow-btn:hover { background: #1557b0; }

/* ── Right: final list table ──────────────────────────────────────── */
.pe-final-scroll { flex: 1; overflow-y: auto; overflow-x: hidden; }
.pe-final-tbl { width: 100%; border-collapse: collapse; font-size: 12px; table-layout: fixed; }
.pe-final-tbl thead { position: sticky; top: 0; z-index: 2; }
.pe-final-tbl thead th {
  background: #e8f0fe; padding: 5px 8px; text-align: left;
  font-size: 10px; font-weight: 700; color: #333; border-bottom: 2px solid #c5d4f0;
  text-transform: uppercase; white-space: nowrap; overflow: hidden;
}
.pe-final-th-grp   { width: 90px; }
.pe-final-th-name  { /* flex */ }
.pe-final-th-price { width: 52px; text-align: right; }
.pe-final-th-del   { width: 34px; }
/* Group rowspan cell */
.pe-final-td-grp {
  background: #e3f2fd; color: #0d47a1; font-weight: 700; font-size: 10px;
  text-transform: uppercase; vertical-align: middle; text-align: center;
  border-right: 2px solid #90b8dc; padding: 4px 6px; letter-spacing: 0.03em;
  width: 90px; line-height: 1.3;
}
.pe-final-row { border-bottom: 1px solid #f0f0f0; }
.pe-final-row:hover td { background: #f5f8ff; }
.pe-final-row:hover .pe-final-td-grp { background: #d6eaf8; }
.pe-final-tbl td { padding: 5px 6px; vertical-align: middle; }
.pe-final-td-name { color: #222; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.pe-final-td-price { width: 52px; text-align: right; color: #333; white-space: nowrap; font-size: 11px; }
.pe-final-td-del  { width: 34px; text-align: center; }
.pe-final-rm {
  background: #fdecea; border: none; border-radius: 50%; color: #c62828; font-size: 16px;
  cursor: pointer; padding: 0; line-height: 1; width: 22px; height: 22px;
  display: inline-flex; align-items: center; justify-content: center;
}
.pe-final-rm:hover { background: #f8d3cf; color: #7f0000; transform: scale(1.15); }
.pe-final-empty { padding: 16px; text-align: center; color: #aaa; font-size: 12px; }

/* Keep patient-entry test tables readable even when global dark-theme table styles are active. */
html[data-theme="dark"] .pe-avail-tbl td,
html[data-theme="dark"] .pe-final-tbl td {
  color: #1f2d3a;
  border-bottom-color: #d6e0ea;
}

html[data-theme="dark"] .pe-avail-td-name,
html[data-theme="dark"] .pe-final-td-name {
  color: #1f2d3a;
}

html[data-theme="dark"] .pe-avail-td-price,
html[data-theme="dark"] .pe-final-td-price {
  color: #273646;
}

html[data-theme="dark"] .pe-avail-row-checked td {
  background: #d9eaff !important;
  color: #112a45;
}

@media (max-width: 960px) {
  .pe-history-card-standalone {
    margin: 0 12px;
  }

  .pe-entry-heading {
    flex-direction: column;
    align-items: flex-start;
    padding-top: 6px;
  }

  .pe-history-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .pe-history-head {
    flex-direction: column;
    align-items: flex-start;
  }

  .pe-wrap:not(.pe-mode-intake) .pe-body {
    display: flex;
    flex-direction: column;
  }

  .pe-wrap:not(.pe-mode-intake) .pe-mobile-stagebar {
    display: flex;
  }

  .pe-wrap:not(.pe-mode-intake) .pe-tests-3col {
    border-right: none;
  }

  .pe-wrap:not(.pe-mode-intake) .pe-grp-col,
  .pe-wrap:not(.pe-mode-intake) .pe-avail-col,
  .pe-wrap:not(.pe-mode-intake) .pe-final-col {
    width: 100%;
    border-right: none;
  }

  .pe-wrap:not(.pe-mode-intake) .pe-arrow-col {
    display: none;
  }

  .pe-wrap.pe-mobile-groups:not(.pe-mode-intake) .pe-avail-col,
  .pe-wrap.pe-mobile-groups:not(.pe-mode-intake) .pe-final-col {
    display: none;
  }

  .pe-wrap.pe-mobile-tests:not(.pe-mode-intake) .pe-grp-col,
  .pe-wrap.pe-mobile-tests:not(.pe-mode-intake) .pe-final-col {
    display: none;
  }

  .pe-wrap.pe-mobile-final:not(.pe-mode-intake) .pe-grp-col,
  .pe-wrap.pe-mobile-final:not(.pe-mode-intake) .pe-avail-col {
    display: none;
  }

  .pe-wrap:not(.pe-mode-intake) .pe-mobile-add-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  .pe-wrap:not(.pe-mode-intake) .pe-avail-toolbar2 {
    gap: 8px;
  }

  .pe-wrap:not(.pe-mode-intake) .pe-avail-tbl {
    table-layout: auto;
  }

  .pe-wrap:not(.pe-mode-intake) .pe-avail-td-name {
    white-space: normal;
    overflow: visible;
    text-overflow: clip;
    line-height: 1.3;
  }

  .pe-wrap:not(.pe-mode-intake) .pe-avail-th-price,
  .pe-wrap:not(.pe-mode-intake) .pe-avail-td-price {
    width: 70px;
  }

  .pe-wrap:not(.pe-mode-intake) .pe-final-th-grp,
  .pe-wrap:not(.pe-mode-intake) .pe-final-td-grp {
    width: 78px;
  }
}

/* Container-driven stacked layout for the Patient Entry test selector.
   JS toggles .pe-stacked on .pe-wrap when the 3 columns can't fit the panel's
   OWN width (any viewport / sidebar state / orientation), so the middle
   "available tests" panel never collapses to zero. Mirrors the @media stacking. */
.pe-wrap.pe-stacked:not(.pe-mode-intake) .pe-body { display: flex; flex-direction: column; }
.pe-wrap.pe-stacked:not(.pe-mode-intake) .pe-mobile-stagebar { display: flex; }
.pe-wrap.pe-stacked:not(.pe-mode-intake) .pe-tests-3col { border-right: none; }
.pe-wrap.pe-stacked:not(.pe-mode-intake) .pe-grp-col,
.pe-wrap.pe-stacked:not(.pe-mode-intake) .pe-avail-col,
.pe-wrap.pe-stacked:not(.pe-mode-intake) .pe-final-col { width: 100%; min-width: 0; border-right: none; }
.pe-wrap.pe-stacked:not(.pe-mode-intake) .pe-arrow-col { display: none; }
.pe-wrap.pe-stacked.pe-mobile-groups:not(.pe-mode-intake) .pe-avail-col,
.pe-wrap.pe-stacked.pe-mobile-groups:not(.pe-mode-intake) .pe-final-col { display: none; }
.pe-wrap.pe-stacked.pe-mobile-tests:not(.pe-mode-intake) .pe-grp-col,
.pe-wrap.pe-stacked.pe-mobile-tests:not(.pe-mode-intake) .pe-final-col { display: none; }
.pe-wrap.pe-stacked.pe-mobile-final:not(.pe-mode-intake) .pe-grp-col,
.pe-wrap.pe-stacked.pe-mobile-final:not(.pe-mode-intake) .pe-avail-col { display: none; }
.pe-wrap.pe-stacked:not(.pe-mode-intake) .pe-mobile-add-btn { display: inline-flex; align-items: center; justify-content: center; }

@media (max-width: 600px) {
  .pe-history-card-standalone {
    margin: 0 8px;
    padding: 10px;
  }

  .pe-history-grid {
    grid-template-columns: 1fr;
  }

  .pe-history-actions {
    justify-content: stretch;
  }

  .pe-history-actions .pe-btn {
    flex: 1;
  }

  .pe-wrap:not(.pe-mode-intake) .pe-avail-th-chk,
  .pe-wrap:not(.pe-mode-intake) .pe-avail-td-chk {
    width: auto;
    padding-left: 4px;
    padding-right: 4px;
  }

  .pe-wrap:not(.pe-mode-intake) .pe-avail-th-price,
  .pe-wrap:not(.pe-mode-intake) .pe-avail-td-price {
    display: none;
  }

  .pe-wrap:not(.pe-mode-intake) .pe-final-th-grp,
  .pe-wrap:not(.pe-mode-intake) .pe-final-td-grp {
    width: 64px;
  }
}


/* ===================================================================
   MASTERS MODULE (CRUD)
   =================================================================== */
.mstr-tabs {
  display: flex; gap: 0; border-bottom: 2px solid #dde4ee;
  background: #f7f9ff; flex-shrink: 0; padding: 0 14px;
}
.mstr-tab {
  padding: 9px 20px; font-size: 13px; font-weight: 600;
  color: #555; border: none; background: none; cursor: pointer;
  border-bottom: 3px solid transparent; margin-bottom: -2px;
}
.mstr-tab:hover { color: #1a73e8; }
.mstr-tab-active { color: #1a73e8; border-bottom-color: #1a73e8; }
.mstr-toolbar {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  padding: 10px 16px; border-bottom: 1px solid #eee; flex-shrink: 0;
}
.mstr-search-inp {
  border: 1px solid #d8dee8; border-radius: 6px; padding: 7px 12px;
  font-size: 13px; width: 260px; max-width: 100%;
}
.mstr-search-inp:focus { outline: none; border-color: #1a73e8; }
.mstr-add-btn {
  background: #2f6fa6; color: #fff; border: none; border-radius: 6px;
  padding: 7px 16px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.mstr-add-btn:hover { background: #1557b0; }
.mstr-tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.mstr-tbl thead th {
  background: #f0f4ff; padding: 7px 10px; text-align: left;
  font-size: 12px; color: #555; font-weight: 700; text-transform: uppercase;
  border-bottom: 2px solid #dde;
  position: sticky; top: 0; z-index: 1;
}
.mstr-tbl tbody tr:hover { background: #f7f9ff; }
.mstr-tbl td { padding: 6px 10px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.mstr-actions-cell { white-space: nowrap; }
.mstr-edit-btn {
  background: #e8f0fe; color: #1a73e8; border: none; border-radius: 4px;
  padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; margin-right: 6px;
}
.mstr-edit-btn:hover { background: #c5d8fb; }
.mstr-del-btn {
  background: #fde8e8; color: #c62828; border: none; border-radius: 4px;
  padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.mstr-del-btn:hover { background: #f8b4b4; }
.mstr-arrange-btn {
  background: #eef6ec; color: #2e7d32; border: none; border-radius: 4px;
  padding: 4px 10px; font-size: 12px; font-weight: 600; cursor: pointer; margin-right: 6px;
}
.mstr-arrange-btn:hover { background: #cdeac9; }

.torder-box { width: 480px; max-height: 80vh; display: flex; flex-direction: column; }
.torder-hint { font-size: 12px; color: #5a7a9a; margin-bottom: 12px; line-height: 1.4; }
.torder-list { overflow-y: auto; max-height: 50vh; border: 1px solid #e0e8f0; border-radius: 6px; }
.torder-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 12px;
  border-bottom: 1px solid #eef2f6;
}
.torder-row:last-child { border-bottom: none; }
.torder-pos {
  width: 22px; height: 22px; flex: none; border-radius: 50%; background: #2f6fa6; color: #fff;
  font-size: 11px; font-weight: 700; display: flex; align-items: center; justify-content: center;
}
.torder-name { flex: 1; font-size: 13px; color: #1a3c5e; }
.torder-code { font-family: "Consolas", "Courier New", monospace; font-size: 11px; color: #888; }
.torder-btns { display: flex; gap: 4px; flex: none; }
.torder-move-btn {
  width: 26px; height: 26px; border: 1px solid #c8d6e5; border-radius: 4px; background: #fff;
  cursor: pointer; font-size: 13px; color: #1a3c5e;
}
.torder-move-btn:hover:not(:disabled) { background: #e8f0fe; border-color: #1a73e8; }
.torder-move-btn:disabled { opacity: .35; cursor: not-allowed; }

.mstr-form-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.45);
  display: flex; align-items: center; justify-content: center; z-index: 9000;
}
.mstr-form-box {
  background: #fff; border-radius: 12px; padding: 28px 32px;
  width: 500px; max-width: 95vw; max-height: 90vh;
  overflow-y: auto; box-shadow: 0 8px 40px rgba(0,0,0,.25);
}
.mstr-form-title { font-size: 16px; font-weight: 700; color: #1a1a2e; margin-bottom: 18px; }
.mstr-form-fields { display: flex; flex-direction: column; gap: 12px; }
.mstr-field { display: flex; flex-direction: column; gap: 4px; }
.mstr-field label { font-size: 11px; font-weight: 600; color: #555; text-transform: uppercase; }
.mstr-inp {
  height: 36px; padding: 0 10px; border: 1px solid #c2d1de;
  border-radius: 6px; font-size: 13px; color: #222; background: #fafdff;
  width: 100%; box-sizing: border-box;
}
.mstr-inp:focus { outline: none; border-color: #1a73e8; box-shadow: 0 0 0 2px rgba(26,115,232,.18); }
.mstr-inp[type="number"] { -moz-appearance: textfield; }
.mstr-form-actions {
  display: flex; gap: 10px; justify-content: flex-end;
  margin-top: 20px; padding-top: 16px; border-top: 1px solid #eee;
}
.mstr-save-btn {
  background: #2f6fa6; color: #fff; border: none; border-radius: 6px;
  padding: 8px 22px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.mstr-save-btn:hover { background: #1557b0; }
.mstr-save-btn:disabled { opacity: .6; cursor: not-allowed; }
.mstr-cancel-btn {
  background: #eef2f6; color: #333; border: none; border-radius: 6px;
  padding: 8px 18px; font-size: 13px; cursor: pointer;
}
.mstr-cancel-btn:hover { background: #dce5ed; }
.mstr-form-err { color: #c62828; font-size: 12px; margin-top: 8px; }

/* Rich-text editor in test master form */
.mstr-rte-toolbar {
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px;
  background: #f0f4f8; border: 1px solid #c2d1de;
  border-bottom: none; border-radius: 6px 6px 0 0;
  padding: 5px 8px;
}
.rte-btn {
  min-width: 30px; height: 28px; padding: 0 7px;
  border: 1px solid #c2d1de; border-radius: 4px;
  background: #fff; font-size: 13px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: background .12s;
}
.rte-btn:hover { background: #dce8f8; border-color: #1a73e8; }
.rte-btn b { font-weight: 900; }
.rte-sep { width: 1px; height: 20px; background: #c2d1de; margin: 0 4px; }
.rte-size-sel {
  height: 28px; padding: 0 6px; border: 1px solid #c2d1de;
  border-radius: 4px; font-size: 12px; background: #fff; cursor: pointer;
}
.rte-clear-btn { font-size: 11px; color: #555; }
.mstr-rte-editor {
  min-height: 90px; padding: 10px 12px;
  border: 1px solid #c2d1de; border-radius: 0 0 6px 6px;
  font-size: 13px; line-height: 1.55; color: #222;
  background: #fafdff; outline: none;
  white-space: pre-wrap; word-break: break-word;
  cursor: text;
}
.mstr-rte-editor:focus { border-color: #1a73e8; box-shadow: 0 0 0 2px rgba(26,115,232,.15); }
.mstr-rte-editor:empty::before {
  content: "Enter interpretation / comments that will appear on the test report…";
  color: #aaa; pointer-events: none;
}
.mstr-form-box { width: 560px; }
.mstr-tbl-wrap { flex: 1; overflow-y: auto; padding: 0 16px 16px; }
.mstr-loading, .mstr-empty {
  padding: 24px; text-align: center; color: #888; font-size: 13px;
}

/* ===================================================================
   RESULT ENTRY MODULE
   =================================================================== */
/* height:100% never bounds this — .content-panel/.workspace/.app-shell only
   set min-height (see the .app-shell comment above), so it resolves to
   nothing and .rentry-tbl-wrap's overflow-y:auto below never gets a real
   box to scroll within. The whole page grows to fit the results table
   instead, pushing the Add-Test bar and Save button off-screen for any
   visit with enough test groups to make the table tall — same fix as
   .pe-wrap .pe-tests-3col's max-height above, applied here too. */
.rentry-wrap { display: flex; flex-direction: column; height: calc(100vh - 160px); overflow: hidden; background: #f0f2f5; }
.rentry-loading, .rentry-err { padding: 24px; text-align: center; color: #888; font-size: 14px; }
.rentry-err { color: #c62828; }

/* ── Header ── */
.rentry-header {
  display: flex; gap: 24px; flex-wrap: wrap; align-items: flex-end;
  padding: 10px 16px; background: #2f6fa6; color: #fff; flex-shrink: 0;
}
.rentry-hcol { display: flex; flex-direction: column; gap: 1px; }
.rentry-label { font-size: 10px; opacity: .7; text-transform: uppercase; font-weight: 600; letter-spacing: .5px; }
.rentry-hval { font-size: 13px; font-weight: 700; }

/* ── Results Table ── */
.rentry-tbl-wrap { flex: 1; overflow-y: auto; padding: 10px 14px; }
.rentry-table {
  width: 100%; border-collapse: collapse; font-size: 13px;
  background: #fff; box-shadow: 0 1px 6px rgba(0,0,0,.1);
}
.rentry-table thead th {
  background: #37474f; color: #fff; padding: 7px 10px; text-align: left;
  font-size: 11px; font-weight: 700; text-transform: uppercase;
  border-right: 1px solid rgba(255,255,255,.12);
}
.rentry-th-grp    { width: 130px; }
.rentry-th-name   { /* auto */ }
.rentry-th-result { width: 110px; }
.rentry-th-unit   { width: 70px; }
.rentry-th-range  { width: 160px; }
.rentry-th-cost   { width: 75px; }
.rentry-th-status { width: 90px; }

/* Group cell — yellow, vertically centred */
.rentry-grp-cell {
  background: #fffde7; color: #e65100; font-weight: 700; font-size: 11px;
  text-transform: uppercase; letter-spacing: .4px; text-align: center;
  padding: 6px 8px; border-right: 3px solid #f9a825;
  vertical-align: middle; border-bottom: 1px solid #f5f5f5;
}

.rentry-row td { padding: 6px 10px; border-bottom: 1px solid #f0f0f0; vertical-align: middle; }
.rentry-row:hover td { background: #f8fbff; }
.rentry-row:hover .rentry-grp-cell { background: #fffde7; } /* keep yellow on hover */

.rentry-grp-arrange-btn {
  display: block; margin: 6px auto 0; width: 22px; height: 22px; line-height: 20px;
  border: 1px solid #f0c14b; border-radius: 50%; background: #fff8e1; color: #e65100;
  font-size: 12px; cursor: pointer; padding: 0; text-transform: none; letter-spacing: normal;
}
.rentry-grp-arrange-btn:hover { background: #ffe9b3; }

/* Result value cell */
.rentry-val-cell { background: #fff; padding: 4px 6px !important; }
.rentry-val-abn  { background: #ffcdd2 !important; } /* red when out of range */
.rentry-inp {
  width: 100%; box-sizing: border-box; padding: 4px 7px;
  border: 1px solid #c2d1de; border-radius: 3px; font-size: 13px;
  background: transparent;
}
.rentry-val-abn .rentry-inp { border-color: #e53935; background: transparent; font-weight: 700; color: #b71c1c; }
.rentry-val-abn .rentry-inp:disabled { color: #b71c1c !important; background: transparent !important; border-color: #e53935 !important; }
.rentry-inp:focus { outline: none; border-color: #1a73e8; background: #fff; }
.rentry-inp-calc { background: #fff8e1; border-color: #e0c46c; }
.rentry-inp-calc:focus { background: #fff8e1; }
.rentry-inp:disabled {
  background: rgba(120, 144, 156, 0.12);
  border-color: #b0bec5;
  color: #37474f;
  cursor: not-allowed;
}
.rentry-empty {
  text-align: center;
  color: #607d8b;
  font-style: italic;
  padding: 16px 10px !important;
}

.rentry-name  { font-weight: 500; color: #222; }
.rentry-unit  { font-size: 11px; color: #555; }
.rentry-range { font-size: 11px; color: #555; font-style: italic; }
.rentry-cost  { font-size: 12px; color: #2e7d32; text-align: right; padding-right: 12px !important; }

html[data-theme="dark"] .rentry-name  { color: #d4e1ee; }
html[data-theme="dark"] .rentry-unit,
html[data-theme="dark"] .rentry-range { color: #9eb5c9; }
html[data-theme="dark"] .rentry-cost  { color: #6fcf8f; }
html[data-theme="dark"] .rentry-empty { color: #7e94a8; }

/* The text-only overrides above assume a dark backdrop, but .rentry-wrap/.rentry-table
   were hardcoded to a light background with no dark-theme pairing — pair them here so the
   table doesn't render light text on a still-white background. */
html[data-theme="dark"] .rentry-wrap  { background: #0f1b27; }
html[data-theme="dark"] .rentry-table { background: #132131; box-shadow: 0 1px 6px rgba(0,0,0,.4); }
html[data-theme="dark"] .rentry-row td { border-bottom-color: #24384a; }
html[data-theme="dark"] .rentry-row:hover td { background: #16263a; }
html[data-theme="dark"] .rentry-grp-cell,
html[data-theme="dark"] .rentry-row:hover .rentry-grp-cell { background: #2a2410; border-right-color: #b8860b; }
html[data-theme="dark"] .rentry-val-cell { background: #132131; }
html[data-theme="dark"] .rentry-val-abn { background: #4a1f1f !important; }
html[data-theme="dark"] .rentry-inp { border-color: #3a5670; color: #d4e1ee; background: transparent; }
html[data-theme="dark"] .rentry-inp:focus { background: #16263a; border-color: #4f9eff; }
html[data-theme="dark"] .rentry-val-abn .rentry-inp { color: #ff8a80; }
html[data-theme="dark"] .rentry-inp-calc { background: #2a2410; border-color: #b8860b; }
html[data-theme="dark"] .rentry-inp:disabled { background: rgba(255,255,255,.06); border-color: #3a5670; color: #8fa6b8; }

.rentry-status-cell { white-space: nowrap; }
.rentry-remove-btn {
  margin-left: 6px; width: 20px; height: 20px; line-height: 18px; vertical-align: middle;
  border: 1px solid #ef9a9a; border-radius: 50%; background: #ffebee; color: #c62828;
  font-size: 13px; cursor: pointer; padding: 0; text-transform: none; letter-spacing: normal;
}
.rentry-remove-btn:hover { background: #ffcdd2; }
.rentry-remove-btn:disabled { opacity: .5; cursor: default; }
html[data-theme="dark"] .rentry-remove-btn { background: #3a1515; border-color: #7a3b3b; color: #ef9a9a; }
.rentry-badge { display: inline-block; padding: 2px 8px; border-radius: 10px; font-size: 11px; font-weight: 600; }
.rentry-badge-pending   { background: #fff3e0; color: #e65100; }
.rentry-badge-completed { background: #e8f5e9; color: #2e7d32; }
html[data-theme="dark"] .rentry-badge-pending   { background: #3a2a10; color: #ffb74d; }
html[data-theme="dark"] .rentry-badge-completed { background: #15301c; color: #81c995; }

/* ── Bottom bar ── */
.rentry-bottom {
  display: flex; align-items: center; gap: 0;
  padding: 0 14px; background: #263238; color: #fff; flex-shrink: 0;
  border-top: 2px solid #37474f; min-height: 50px;
}
.rentry-addtest-bar {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 14px;
  border-top: 1px solid #dde5ea;
  background: #ffffff;
  flex-shrink: 0;
}
.rentry-addtest-label {
  font-size: 11px;
  text-transform: uppercase;
  letter-spacing: .4px;
  color: #607d8b;
  font-weight: 700;
}
.rentry-addtest-select {
  min-width: 250px;
  max-width: 460px;
  padding: 7px 9px;
  border: 1px solid #c6d1d9;
  border-radius: 5px;
  font-size: 13px;
}
.rentry-addtest-select:disabled { background: #f3f6f8; color: #8aa0ad; }
.rentry-addtest-btn {
  background: #00897b;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 8px 14px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}
.rentry-addtest-btn:hover { background: #00695c; }
.rentry-addtest-btn:disabled { opacity: .65; cursor: not-allowed; }
.rentry-billing {
  display: flex; align-items: center; flex: 1; gap: 0; overflow-x: auto;
}
.rentry-billing-field {
  display: flex; flex-direction: column; align-items: center;
  padding: 6px 16px; min-width: 90px;
}
.rentry-bl-lbl { font-size: 9px; text-transform: uppercase; letter-spacing: .5px; color: #b0bec5; }
.rentry-bl-val { font-size: 14px; font-weight: 700; color: #fff; margin-top: 1px; }
.rentry-bl-net { color: #80cbc4; }
.rentry-billing-sep { width: 1px; background: #37474f; align-self: stretch; margin: 8px 0; }

.rentry-actions {
  display: flex; gap: 8px; align-items: center; padding: 8px 0 8px 16px;
  border-left: 1px solid #37474f; flex-shrink: 0;
}
.rentry-save-btn {
  background: #43a047; color: #fff; border: none; border-radius: 5px;
  padding: 8px 20px; font-size: 13px; font-weight: 700; cursor: pointer;
}
.rentry-save-btn:hover { background: #388e3c; }
.rentry-save-btn:disabled { opacity: .6; cursor: not-allowed; }
.rentry-history-btn {
  background: #00838f;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.rentry-history-btn:hover { background: #006064; }
.rentry-delete-btn {
  background: #e53935;
  color: #fff;
  border: none;
  border-radius: 5px;
  padding: 8px 16px;
  font-size: 13px;
  font-weight: 700;
  cursor: pointer;
}
.rentry-delete-btn:hover { background: #b71c1c; }
.rentry-print-btn {
  background: #1565c0; color: #fff; border: none; border-radius: 5px;
  padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.rentry-print-btn:hover { background: #0d47a1; }
.rentry-email-btn {
  background: #f57c00; color: #fff; border: none; border-radius: 5px;
  padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.rentry-email-btn:hover { background: #e65100; }
.rentry-close-btn {
  background: #546e7a; color: #fff; border: none; border-radius: 5px;
  padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.rentry-close-btn:hover { background: #37474f; }
.rentry-msg { font-size: 12px; font-weight: 600; }
.rentry-msg-ok  { color: #a5d6a7; }
.rentry-msg-err { color: #ef9a9a; }
.rhist-box { width: 620px; max-width: calc(100vw - 32px); }
.rhist-list { overflow-y: auto; max-height: 60vh; border: 1px solid #e0e8f0; border-radius: 6px; }
.rhist-row { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border-bottom: 1px solid #eef2f6; }
.rhist-row:last-child { border-bottom: none; }
.rhist-num { font-weight: 700; color: #2f6fa6; min-width: 34px; }
.rhist-main { flex: 1; min-width: 0; font-size: 13px; overflow-wrap: anywhere; }
.rhist-meta { font-size: 11px; color: #667; margin-top: 2px; }
.rhist-changes { margin: 6px 0 0; padding-left: 18px; font-size: 12px; color: #333; }
.rhist-current { font-size: 11px; font-weight: 700; color: #2e7d32; padding-top: 2px; }
.rhist-restore-btn {
  background: #2f6fa6; color: #fff; border: none; border-radius: 5px;
  padding: 6px 12px; font-size: 12px; font-weight: 600; cursor: pointer;
}
.rhist-restore-btn:hover:not(:disabled) { background: #1f3d5b; }
.rhist-restore-btn:disabled { opacity: .55; cursor: not-allowed; }

@media (max-width: 900px) {
  .rentry-addtest-bar {
    flex-wrap: wrap;
    gap: 8px;
  }
  .rentry-addtest-select {
    min-width: 100%;
    max-width: 100%;
  }
}

/* Users module */
.users-wrap {
  display: grid;
  gap: 12px;
}

.users-alert {
  border-radius: 10px;
  padding: 10px 12px;
  border: 1px solid #d7e5ef;
  background: #f4f8fc;
  color: #24435c;
}

.users-alert-ok {
  background: #e9f8ef;
  border-color: #b9e2c8;
  color: #1f6a39;
}

.users-alert-err {
  background: #fff0f0;
  border-color: #efc2c2;
  color: #8b2e2e;
}

.users-grid {
  display: grid;
  grid-template-columns: minmax(260px, 360px) minmax(0, 1fr);
  gap: 14px;
}

.users-card {
  border: 1px solid #d6e2ed;
  border-radius: 12px;
  background: #fbfdff;
  padding: 12px;
}

.users-card h4 {
  margin: 0 0 10px;
  color: #21415a;
}

.users-form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 8px 10px;
  align-items: center;
}

.users-form-grid label {
  font-weight: 600;
  color: #2d4f67;
  font-size: 12px;
}

.users-inp,
.users-sel {
  width: 100%;
  min-height: 34px;
  border: 1px solid #c2d3e3;
  border-radius: 8px;
  padding: 6px 9px;
  font-size: 13px;
  background: #ffffff;
  color: #1f3448;
}

.users-inline {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: #2b4a61;
}

.users-section-title {
  margin-top: 4px;
  padding-top: 6px;
  border-top: 1px dashed #cedde8;
}

.users-actions {
  margin-top: 10px;
}

.users-actions button,
.users-list-toolbar button,
.users-row-save,
.users-row-reset {
  border: none;
  border-radius: 8px;
  padding: 7px 11px;
  font-size: 12px;
  font-weight: 700;
  cursor: pointer;
}

.users-actions button,
.users-list-toolbar button,
.users-row-save {
  background: #2f6fa6;
  color: #fff;
}

.users-row-reset {
  background: #eef3f8;
  color: #2c4a62;
  border: 1px solid #ccdae7;
}

.users-list-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 10px;
  align-items: center;
  flex-wrap: wrap;
}

.users-list {
  overflow-x: auto;
}

.users-table {
  width: 100%;
  border-collapse: collapse;
}

.users-table th,
.users-table td {
  border: 1px solid #dde6ee;
  padding: 7px;
  text-align: left;
  font-size: 12px;
  vertical-align: middle;
}

.users-table thead th {
  background: #f1f6fb;
  color: #21425c;
}

@media (max-width: 980px) {
  .users-grid {
    grid-template-columns: 1fr;
  }
}

/* ── Pending Reports: Remove button ─────────────────────────────────── */
.visit-remove-btn {
  font-size: 13px;
  padding: 8px 12px;
  min-height: 44px;
  border: 1.5px solid #e53935;
  border-radius: 4px;
  background: transparent;
  color: #c62828;
  cursor: pointer;
  font-weight: 600;
  white-space: nowrap;
  transition: background 0.15s, color 0.15s;
}
.visit-remove-btn:hover {
  background: #c62828;
  color: #fff;
}

/* ── Visit Action Flow (OTP) Modal ───────────────────────────────────── */
.vaf-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0,0,0,0.45);
  z-index: 1100;
  display: flex;
  align-items: center;
  justify-content: center;
}
.vaf-box {
  background: #fff;
  border-radius: 12px;
  padding: 32px 28px 28px;
  width: 100%;
  max-width: 440px;
  position: relative;
  box-shadow: 0 8px 40px rgba(0,0,0,0.22);
}
.vaf-close {
  position: absolute;
  top: 12px;
  right: 14px;
  background: none;
  border: none;
  font-size: 22px;
  cursor: pointer;
  color: #888;
  line-height: 1;
}
.vaf-close:hover { color: #333; }
.vaf-title {
  font-size: 16px;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 14px;
}
.vaf-patient-info {
  font-size: 13px;
  color: #444;
  margin: 0 0 10px;
}
.vaf-warning {
  font-size: 13px;
  color: #b71c1c;
  background: #fff3e0;
  border-left: 3px solid #e53935;
  padding: 8px 12px;
  border-radius: 4px;
  margin: 0 0 18px;
}
.vaf-hidden { display: none !important; }
.vaf-phase { display: flex; flex-direction: column; gap: 10px; }
.vaf-hint { font-size: 13px; color: #444; margin: 0; }
.vaf-hint-sub { font-size: 12px; color: #888; margin: 0; }
.vaf-otp-input {
  font-size: 28px;
  letter-spacing: 0.35em;
  text-align: center;
  border: 2px solid #90caf9;
  border-radius: 8px;
  padding: 10px;
  outline: none;
  width: 100%;
  box-sizing: border-box;
}
.vaf-otp-input:focus { border-color: #1a73e8; }
.vaf-timer {
  font-size: 11px;
  color: #999;
  text-align: center;
  margin: 0;
}
.vaf-err {
  font-size: 12px;
  color: #c62828;
  min-height: 16px;
  margin: 0;
}
.vaf-btn {
  padding: 9px 18px;
  border: none;
  border-radius: 6px;
  font-size: 13px;
  font-weight: 600;
  cursor: pointer;
  transition: background 0.15s;
}
.vaf-btn:disabled { opacity: 0.55; cursor: not-allowed; }
.vaf-btn-primary { background: #2f6fa6; color: #fff; }
.vaf-btn-primary:hover:not(:disabled) { background: #1f3d5b; }
.vaf-btn-danger { background: #e53935; color: #fff; }
.vaf-btn-danger:hover:not(:disabled) { background: #b71c1c; }
.vaf-btn-success { background: #2e7d32; color: #fff; }
.vaf-btn-success:hover:not(:disabled) { background: #1b5e20; }
.vaf-btn-perm-delete { background: #4a148c; color: #fff; }
.vaf-btn-perm-delete:hover:not(:disabled) { background: #311b92; }
.vaf-btn-ghost {
  background: transparent;
  color: #1a73e8;
  border: 1px solid #90caf9;
}
.vaf-btn-ghost:hover:not(:disabled) { background: #e8f0fe; }

/* ── Recycle Bin table ───────────────────────────────────────────────── */
.recbin-restore-btn {
  font-size: 11px;
  padding: 3px 10px;
  border: 1.5px solid #2e7d32;
  border-radius: 4px;
  background: transparent;
  color: #2e7d32;
  cursor: pointer;
  font-weight: 600;
  margin-right: 6px;
  transition: background 0.15s, color 0.15s;
}
.recbin-restore-btn:hover {
  background: #2e7d32;
  color: #fff;
}
.recbin-permdelete-btn {
  font-size: 11px;
  padding: 3px 10px;
  border: 1.5px solid #4a148c;
  border-radius: 4px;
  background: transparent;
  color: #4a148c;
  cursor: pointer;
  font-weight: 600;
  transition: background 0.15s, color 0.15s;
}
.recbin-permdelete-btn:hover {
  background: #4a148c;
  color: #fff;
}

/* ── License Status card ─────────────────────────────────────────────── */
.lic-status-card {
  max-width: 520px;
  background: #fff;
  border: 1px solid #e0e7ef;
  border-radius: 10px;
  padding: 24px 28px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.06);
}
.lic-status-table {
  width: 100%;
  border-collapse: collapse;
}
.lic-status-table tr + tr td {
  padding-top: 14px;
}
.lic-label {
  font-size: 12px;
  font-weight: 600;
  color: #888;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  width: 160px;
  vertical-align: top;
  padding-right: 16px;
}
.lic-value {
  font-size: 14px;
  color: #1a1a2e;
  font-weight: 500;
}
.lic-message {
  margin: 16px 0 0;
  font-size: 12px;
  color: #555;
  background: #f5f7fa;
  border-radius: 6px;
  padding: 8px 12px;
}
/* Card kept a hardcoded white background in dark mode, but its <td> cells
   were still picking up the generic `html[data-theme="dark"] tbody td`
   color (meant for tables that DO get a dark background) — light text on a
   white card. Give the card an actual dark background and reclaim its own
   label/value colors explicitly instead of relying on that unrelated rule. */
html[data-theme="dark"] .lic-status-card {
  background: #132131; border-color: #2a3f54;
}
html[data-theme="dark"] .lic-label { color: #90b8d8; }
html[data-theme="dark"] .lic-value { color: #d4e1ee; }
html[data-theme="dark"] .lic-message { background: #1a2a38; color: #9db3c7; }

/* ── Test Master Form (tmf) ──────────────────────────────────────────── */
.tmf-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.48);
  display: flex; align-items: flex-start; justify-content: center;
  z-index: 9100; padding: 24px 12px; overflow-y: auto;
}
.tmf-box {
  background: #fff; border-radius: 12px;
  box-shadow: 0 8px 40px rgba(0,0,0,.18);
  width: 940px; max-width: 98vw;
  padding: 0 0 24px;
}
.tmf-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 16px 24px 14px; border-bottom: 1px solid #e0e8f0;
}
.tmf-title { font-size: 17px; font-weight: 700; color: #1a3c5e; }
.tmf-close-btn {
  background: none; border: none; font-size: 22px; color: #888;
  cursor: pointer; line-height: 1; padding: 0 4px;
}
.tmf-close-btn:hover { color: #c00; }
.tmf-section { padding: 12px 24px 0; }
.tmf-row { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; }
.tmf-field { display: flex; flex-direction: column; gap: 3px; flex: 1; min-width: 100px; }
.tmf-field-full { width: 100%; flex: none; }
.tmf-field label { font-size: 11px; font-weight: 600; color: #556; text-transform: uppercase; letter-spacing: .4px; }
.tmf-inp {
  padding: 7px 10px; border: 1px solid #c8d6e5; border-radius: 6px;
  font-size: 13px; color: #1a2a3a; background: #f9fbfd;
  width: 100%; box-sizing: border-box;
}
.tmf-inp:focus { outline: none; border-color: #1a73e8; background: #fff; }

/* Normal range 2×2 grid */
.tmf-range-grid {
  display: grid;
  grid-template-columns: 1fr 52px 1fr;
  grid-template-areas:
    "male  copy  female"
    "mc    copy  fc";
  gap: 10px;
}
.tmf-range-cell {
  border: 1px solid #d0dde8; border-radius: 8px; padding: 10px 12px;
  background: #f9fbfd;
}
.tmf-range-male   { grid-area: male; }
.tmf-range-female { grid-area: female; }
.tmf-range-mc     { grid-area: mc; }
.tmf-range-fc     { grid-area: fc; }
.tmf-range-label {
  font-size: 10px; font-weight: 700; color: #1a73e8;
  text-transform: uppercase; letter-spacing: .5px; margin-bottom: 6px;
}
.tmf-range-textarea {
  width: 100%; box-sizing: border-box; resize: vertical;
  border: 1px solid #c8d6e5; border-radius: 5px; padding: 6px 8px;
  font-size: 12px; background: #fff; min-height: 54px;
}
.tmf-range-textarea:focus { outline: none; border-color: #1a73e8; }
.tmf-range-minmax {
  display: flex; align-items: center; gap: 6px; margin-top: 6px;
  font-size: 11px; color: #556;
}
.tmf-small-inp {
  width: 72px; padding: 4px 7px; border: 1px solid #c8d6e5;
  border-radius: 5px; font-size: 12px; background: #fff;
}
.tmf-small-inp:focus { outline: none; border-color: #1a73e8; }
.tmf-copy-col {
  grid-area: copy;
  display: flex; align-items: center; justify-content: center;
}
.tmf-copy-btn {
  padding: 10px 8px; background: #e8f0fe; border: 1.5px solid #1a73e8;
  border-radius: 7px; cursor: pointer; font-weight: 800; color: #1a73e8;
  font-size: 15px; line-height: 1; transition: background .15s;
}
.tmf-copy-btn:hover { background: #d2e3fc; }

/* Bottom row: interpretation + shortcuts */
.tmf-bottom-row {
  display: grid; grid-template-columns: 1fr 320px;
  gap: 16px; padding: 14px 24px 0;
}

/* Mobile responsive */
@media (max-width: 720px) {
  .tmf-overlay { padding: 10px 6px; }
  .tmf-box { width: 100%; max-width: 100%; border-radius: 8px; }
  .tmf-header { padding: 12px 14px 10px; }
  .tmf-section { padding: 10px 14px 0; }
  .tmf-range-grid {
    grid-template-columns: 1fr;
    grid-template-areas: "male" "copy" "female" "mc" "fc";
  }
  .tmf-copy-col { justify-content: flex-start; padding: 2px 0; }
  .tmf-bottom-row { grid-template-columns: 1fr; padding: 12px 14px 0; }
  .tmf-form-actions { padding: 14px 14px 0; flex-wrap: wrap; }
  .tmf-row { gap: 8px; }
  .tmf-field { min-width: 130px; }
}
.tmf-shortcuts-box {
  border: 1px solid #d0dde8; border-radius: 8px;
  padding: 12px 14px; background: #f9fbfd;
  display: flex; flex-direction: column; gap: 8px;
}
.tmf-shortcuts-title { font-size: 11px; font-weight: 700; color: #1a3c5e; text-transform: uppercase; letter-spacing: .4px; }
.tmf-sc-input-row { display: flex; gap: 6px; align-items: center; flex-wrap: wrap; }
.tmf-sc-abn-label { font-size: 11px; color: #556; display: flex; align-items: center; gap: 3px; white-space: nowrap; }
.tmf-sc-add-btn {
  padding: 5px 10px; background: #2f6fa6; color: #fff; border: none;
  border-radius: 5px; cursor: pointer; font-size: 12px; white-space: nowrap;
}
.tmf-sc-add-btn:hover { background: #1f3d5b; }
.tmf-sc-list { display: flex; flex-direction: column; gap: 4px; max-height: 160px; overflow-y: auto; }
.tmf-sc-list-item {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; padding: 4px 8px; background: #fff; color: #1a2a3a;
  border: 1px solid #e0e8f0; border-radius: 4px;
}
.tmf-sc-abn-badge {
  font-size: 10px; background: #fdecea; color: #b00020;
  border-radius: 3px; padding: 1px 5px; margin-left: 5px;
}
.tmf-sc-del {
  background: none; border: none; color: #999; cursor: pointer; font-size: 14px; padding: 0 3px;
}
.tmf-sc-del:hover { color: #c00; }
.tmf-widal-label { font-size: 12px; color: #556; display: flex; align-items: center; gap: 5px; }

html[data-theme="dark"] .tmf-shortcuts-box { background: #1e2a38; border-color: #2e4060; }
html[data-theme="dark"] .tmf-shortcuts-title { color: #90b8d8; }
html[data-theme="dark"] .tmf-sc-abn-label { color: #8a9bb0; }
html[data-theme="dark"] .tmf-sc-list-item { background: #162030; color: #c8dae8; border-color: #2e4060; }
html[data-theme="dark"] .tmf-sc-abn-badge { background: #3d1a1a; color: #ff8a80; }
html[data-theme="dark"] .tmf-sc-del { color: #6a8aaa; }
html[data-theme="dark"] .tmf-sc-del:hover { color: #ff6b6b; }

/* ── Result Entry: shortcut guide popover ──
   One shared, position:fixed box (so it escapes .rentry-tbl-wrap's overflow-y:auto)
   that shows a test's configured key -> result shortcuts while its Result cell is focused. */
.rentry-shortcut-guide {
  position: fixed; z-index: 4000; min-width: 150px; max-width: 260px;
  background: #f9fbfd; border: 1px solid #d0dde8; border-radius: 8px;
  box-shadow: 0 4px 16px rgba(0,0,0,.18); padding: 6px; font-size: 12px;
}
.rentry-sg-row {
  display: flex; align-items: center; gap: 8px; padding: 3px 6px; border-radius: 4px;
}
.rentry-sg-row b { min-width: 18px; text-align: center; color: #1a3c5e; }
.rentry-sg-row span { color: #33475a; }
.rentry-sg-row.rentry-sg-abn { background: #fdecea; }
.rentry-sg-row.rentry-sg-abn b, .rentry-sg-row.rentry-sg-abn span { color: #b00020; }

html[data-theme="dark"] .rentry-shortcut-guide { background: #1e2a38; border-color: #2e4060; box-shadow: 0 4px 16px rgba(0,0,0,.5); }
html[data-theme="dark"] .rentry-sg-row b { color: #90b8d8; }
html[data-theme="dark"] .rentry-sg-row span { color: #c8dae8; }
html[data-theme="dark"] .rentry-sg-row.rentry-sg-abn { background: #3d1a1a; }
html[data-theme="dark"] .rentry-sg-row.rentry-sg-abn b, html[data-theme="dark"] .rentry-sg-row.rentry-sg-abn span { color: #ff8a80; }

.tmf-formula-section { display: flex; flex-direction: column; gap: 8px; }
.tmf-calc-label {
  display: flex; align-items: center; gap: 8px; font-size: 13px;
  font-weight: 600; color: #1a3c5e; cursor: pointer; user-select: none;
}
.tmf-calc-label small { font-weight: 400; color: #5a7a9a; }
.tmf-formula-inp {
  width: 100%; padding: 8px 10px; font-family: "Consolas", "Courier New", monospace;
  font-size: 13px; border: 1px solid #c8d6e5; border-radius: 6px;
  resize: vertical; min-height: 80px; color: #1a3c5e; line-height: 1.5;
}
.tmf-formula-inp:focus { outline: none; border-color: #1a73e8; }
.tmf-formula-help { font-size: 11.5px; color: #5a7a9a; margin-top: 4px; }
.tmf-formula-help code { background: #e8f0fe; padding: 1px 4px; border-radius: 3px; font-size: 11px; }

.tmf-form-actions {
  display: flex; align-items: center; justify-content: flex-end;
  gap: 10px; padding: 18px 24px 0;
}

/* ── Print Options modal (Result Entry) ──────────────────────────────── */
.po-box { width: 480px; max-width: 94vw; padding-bottom: 20px; }
.po-select-all-link {
  font-size: 12px; color: #1a73e8; cursor: pointer; font-weight: 600;
  padding: 10px 24px 0; display: inline-block;
}
.po-grp-list { display: flex; flex-direction: column; gap: 2px; max-height: 320px; overflow-y: auto; padding: 6px 24px; }
.po-grp-row {
  display: flex; align-items: center; gap: 10px; padding: 8px 10px;
  font-size: 13px; font-weight: 600; color: #1a2a3a; border-radius: 6px; cursor: pointer;
}
.po-grp-row:hover { background: #f0f4f9; }
.po-grp-row input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.po-pending-row {
  display: flex; align-items: center; gap: 10px; padding: 10px 24px;
  font-size: 13px; font-weight: 600; color: #1a2a3a; cursor: pointer;
  border-top: 1px solid #e7edf3; margin-top: 4px;
}
.po-pending-row input[type="checkbox"] { width: 16px; height: 16px; cursor: pointer; }
.po-actions { flex-wrap: wrap; }

.rentry-print-opts-btn {
  background: #1565c0; color: #fff; border: none; border-radius: 5px;
  padding: 8px 18px; font-size: 13px; font-weight: 600; cursor: pointer;
}
.rentry-print-opts-btn:hover { background: #0d47a1; }

@media (max-width: 540px) {
  .po-box { width: 100%; }
  .po-actions { justify-content: stretch; }
  .po-actions button { flex: 1 1 calc(50% - 8px); }
  .po-grp-list, .po-pending-row, .po-select-all-link { padding-left: 14px; padding-right: 14px; }
}

/* ── Widal result entry cell ─────────────────────────────────────────── */
.rentry-widal-cell { display: flex; align-items: center; gap: 8px; min-width: 120px; }
.rentry-widal-btn {
  font-size: 11px; padding: 3px 9px; background: #e8f0fe;
  border: 1px solid #1a73e8; border-radius: 4px; cursor: pointer; color: #1a73e8;
  white-space: nowrap;
}
.rentry-widal-btn:hover { background: #d2e3fc; }
.rentry-widal-summary { font-size: 11px; font-weight: 700; white-space: nowrap; }
.rentry-widal-summary.pos { color: #1e7e34; }
.rentry-widal-summary.neg { color: #999; }
html[data-theme="dark"] .rentry-widal-summary.pos { color: #6fcf8f; }
html[data-theme="dark"] .rentry-widal-summary.neg { color: #9eb5c9; }

.rentry-val-input-wrap { display: flex; align-items: center; gap: 4px; }

/* ── Widal entry modal ───────────────────────────────────────────────── */
.widal-modal-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.5);
  display: flex; align-items: center; justify-content: center;
  z-index: 9200; padding: 12px;
}
.widal-modal-box {
  background: #fff; border-radius: 10px; padding: 20px 24px;
  box-shadow: 0 8px 32px rgba(0,0,0,.22);
  width: auto; max-width: 96vw; overflow-x: auto;
}
.widal-modal-title { font-size: 16px; font-weight: 700; color: #1a3c5e; margin-bottom: 8px; }
.widal-grid {
  display: grid;
  grid-template-columns: 150px repeat(5, 52px);
  gap: 4px; margin: 12px 0;
}
.widal-hdr {
  font-size: 11px; font-weight: 700; color: #1a3c5e;
  text-align: center; padding: 4px 0;
}
.widal-antigen-lbl {
  font-size: 12px; color: #1a3c5e; display: flex; align-items: center; padding-left: 2px;
}
.widal-cell-btn {
  height: 36px; border-radius: 5px; border: 1px solid #c8d6e5;
  font-size: 14px; font-weight: 700; cursor: pointer; transition: background .1s;
}
.widal-cell-btn.pos { background: #2f6fa6; color: #fff; border-color: #2f6fa6; }
.widal-cell-btn.neg { background: #f5f5f5; color: #999; }
.widal-result-row {
  grid-column: 1 / -1; display: flex; align-items: center; gap: 12px;
  font-size: 13px; font-weight: 700; padding: 8px 2px;
  border-top: 1px solid #e0e8f0; margin-top: 4px;
}
.widal-result-lbl { color: #1a3c5e; }
.widal-result-pos { color: #1e7e34; }
.widal-result-neg { color: #999; }
.widal-result-inp {
  font-size: 13px; font-weight: 700; color: #1a3c5e; background: #fff;
  border: 1px solid #c8d6e5; border-radius: 5px;
  padding: 4px 8px; width: 130px; font-family: inherit;
}
.widal-result-inp:focus { outline: none; border-color: #1a73e8; }
.widal-result-auto-btn {
  font-size: 11px; font-weight: 600; color: #1a73e8; background: none; border: none;
  cursor: pointer; padding: 2px 4px; white-space: nowrap;
}
.widal-result-auto-btn:hover { text-decoration: underline; }
.widal-method-row { display: flex; align-items: center; gap: 10px; margin-bottom: 4px; }
.widal-method-lbl { font-size: 12px; font-weight: 600; color: #1a3c5e; white-space: nowrap; }
.widal-method-sel {
  font-size: 12px; padding: 4px 8px; border: 1px solid #c8d6e5;
  border-radius: 5px; background: #f8fbff; color: #1a3c5e; cursor: pointer;
  flex: 1; min-width: 0;
}
.widal-method-sel:focus { outline: none; border-color: #1a73e8; }
.widal-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }

.widal-mode-toggle { display: flex; gap: 6px; margin-bottom: 10px; }
.widal-mode-btn {
  flex: 1; padding: 7px 10px; font-size: 12px; font-weight: 700;
  border: 1px solid #c8d6e5; border-radius: 6px; background: #f5f8fc;
  color: #5a6b7d; cursor: pointer; transition: background .1s, color .1s;
}
.widal-mode-btn.active { background: #2f6fa6; border-color: #2f6fa6; color: #fff; }

.widal-numeric-tbl { width: 100%; border-collapse: collapse; margin: 10px 0; font-size: 13px; }
.widal-numeric-tbl th {
  text-align: left; font-size: 11px; font-weight: 700; color: #1a3c5e;
  text-transform: uppercase; padding: 6px 8px; border-bottom: 2px solid #c8d6e5;
}
.widal-numeric-tbl td { padding: 7px 8px; border-bottom: 1px solid #e7edf3; }
.widal-titre-sel {
  font-size: 12px; padding: 4px 8px; border: 1px solid #c8d6e5;
  border-radius: 5px; background: #f8fbff; color: #1a3c5e; cursor: pointer; min-width: 130px;
}
.widal-titre-sel:focus { outline: none; border-color: #1a73e8; }
.widal-ref-sig { color: #1e7e34; font-weight: 700; }

html[data-theme="dark"] .widal-modal-box { background: #1a2a38; color: #d4e1ee; }
html[data-theme="dark"] .widal-modal-title { color: #d4e1ee; }
html[data-theme="dark"] .widal-hdr { color: #90b8d8; }
html[data-theme="dark"] .widal-antigen-lbl { color: #d6e2ee; }
html[data-theme="dark"] .widal-cell-btn { border-color: #2e4458; }
html[data-theme="dark"] .widal-cell-btn.neg { background: #0f1a27; color: #90b8d8; }
html[data-theme="dark"] .widal-result-row { border-top-color: #2e4458; }
html[data-theme="dark"] .widal-result-lbl { color: #d6e2ee; }
html[data-theme="dark"] .widal-result-neg { color: #90b8d8; }
html[data-theme="dark"] .widal-result-inp {
  background: #0f1a27; color: #d6e2ee; border-color: #2e4458;
}
html[data-theme="dark"] .widal-result-auto-btn { color: #4da6ff; }
html[data-theme="dark"] .widal-method-lbl { color: #d6e2ee; }
html[data-theme="dark"] .widal-method-sel,
html[data-theme="dark"] .widal-titre-sel {
  background: #0f1a27; color: #d6e2ee; border-color: #2e4458;
}
html[data-theme="dark"] .widal-mode-btn {
  background: #0f1a27; color: #90b8d8; border-color: #2e4458;
}
html[data-theme="dark"] .widal-mode-btn.active { background: #2f6fa6; border-color: #2f6fa6; color: #fff; }
html[data-theme="dark"] .widal-numeric-tbl th { color: #90b8d8; border-bottom-color: #2e4458; }
html[data-theme="dark"] .widal-numeric-tbl td { border-bottom-color: #24384a; }

@media (max-width: 640px) {
  .widal-grid { grid-template-columns: 110px repeat(5, 38px); }
  .widal-cell-btn { height: 30px; font-size: 12px; }
  .widal-numeric-tbl { font-size: 12px; }
  .widal-titre-sel { min-width: 100px; }
}

/* ── Report Preview button & modal ───────────────────────────────────── */
.rentry-preview-btn {
  padding: 7px 14px; background: #f0f4f8; border: 1px solid #90a4be;
  border-radius: 6px; cursor: pointer; font-size: 13px; font-weight: 500;
  color: #1a3c5e; transition: background .15s;
}
.rentry-preview-btn:hover { background: #dce5ef; }

.pdf-preview-overlay {
  position: fixed; inset: 0; background: rgba(0,0,0,.55);
  display: flex; align-items: center; justify-content: center;
  z-index: 9300; padding: 16px;
}
.pdf-preview-box {
  display: flex; flex-direction: column;
  width: 860px; max-width: 98vw; height: 92vh;
  background: #fff; border-radius: 10px;
  box-shadow: 0 10px 40px rgba(0,0,0,.3); overflow: hidden;
}
.pdf-preview-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 16px; border-bottom: 1px solid #e0e8f0; flex-shrink: 0;
}
.pdf-preview-title { font-size: 15px; font-weight: 700; color: #1a3c5e; }
.pdf-preview-actions { display: flex; gap: 8px; align-items: center; }
.pdf-preview-content {
  flex: 1; overflow-y: auto; background: #e8ecf0;
  padding: 16px 0; display: flex; flex-direction: column; align-items: center; gap: 8px;
}
.pdf-preview-content canvas {
  display: block; box-shadow: 0 2px 8px rgba(0,0,0,.25);
  max-width: 100%; height: auto;
}
.pdf-preview-loading {
  margin: auto; color: #5a7a9a; font-size: 14px; padding: 40px;
}

/* ── Numbering Format module ─────────────────────────────────────── */
.num-wrap { max-width: 680px; padding: 8px 0; display: flex; flex-direction: column; gap: 20px; }
.num-info-box {
  background: #f0f6ff; border: 1px solid #c8d6e5; border-radius: 8px;
  padding: 14px 18px; font-size: 13px; color: #1a3c5e;
}
.num-info-box strong { display: block; margin-bottom: 8px; font-size: 13.5px; }
.num-token-list { margin: 0 0 8px 18px; padding: 0; }
.num-token-list li { margin-bottom: 4px; }
.num-token-list code { background: #dce8f8; padding: 1px 5px; border-radius: 3px; font-size: 12px; }
.num-tip { margin: 6px 0 0; color: #4a6c8a; font-size: 12px; }
.num-field-block { display: flex; flex-direction: column; gap: 6px; }
.num-field-label { font-size: 13px; font-weight: 700; color: #1a3c5e; }
html[data-theme="dark"] .num-field-label { color: #90b8d8; }
.num-field-row { display: flex; gap: 8px; }
.num-tpl-input {
  flex: 1; padding: 8px 12px; border: 1px solid #c8d6e5; border-radius: 6px;
  font-size: 13px; font-family: "Consolas", "Courier New", monospace; color: #1a3c5e;
}
.num-tpl-input:focus { outline: none; border-color: #1a73e8; }
.num-preview-btn {
  padding: 8px 14px; background: #e8f0fe; border: 1px solid #c8d6e5; border-radius: 6px;
  font-size: 12px; font-weight: 600; color: #1a3c5e; cursor: pointer; white-space: nowrap;
}
.num-preview-btn:hover { background: #d2e3fc; }
.num-preview-out { font-size: 12px; color: #2a6a3e; font-family: "Consolas", monospace; min-height: 18px; }
.num-actions { display: flex; align-items: center; gap: 14px; margin-top: 6px; }
.num-save-status { font-size: 12px; }
.num-save-status.ok  { color: #1e7e34; }
.num-save-status.err { color: #c0392b; }

/* ── Test Formula module ──────────────────────────────────────────── */
.tf-page { display: flex; flex-direction: column; gap: 24px; }
.tf-top-area { display: grid; grid-template-columns: 1fr 260px; gap: 16px; }
.tf-main-col { display: flex; flex-direction: column; gap: 10px; }
.tf-controls-row { display: flex; gap: 12px; }
.tf-control-group { display: flex; flex-direction: column; gap: 4px; flex: 1; }
.tf-lbl { font-size: 12px; font-weight: 600; color: #1a3c5e; }
.tf-sel {
  padding: 7px 10px; border: 1px solid #c8d6e5; border-radius: 6px;
  font-size: 13px; color: #1a3c5e; background: #fff;
}
.tf-sel:focus { outline: none; border-color: #1a73e8; }
.tf-formula-area { display: flex; flex-direction: column; gap: 4px; }
.tf-formula-ta {
  width: 100%; padding: 10px 12px; font-family: "Consolas", "Courier New", monospace;
  font-size: 13px; line-height: 1.6; border: 1px solid #c8d6e5; border-radius: 6px;
  resize: vertical; color: #1a3c5e; min-height: 100px;
}
.tf-formula-ta:focus { outline: none; border-color: #1a73e8; box-shadow: 0 0 0 2px rgba(26,115,232,.12); }
/* No background was set, so dark mode's native color-scheme:dark form control
   background applied while this color stayed forced navy -- dark-on-dark. */
html[data-theme="dark"] .tf-formula-ta {
  background: #0f1a27; color: #d6e2ee; border-color: #2e4458;
}
html[data-theme="dark"] .tf-formula-ta::placeholder { color: rgba(214, 226, 238, 0.55); }
/* Same forced-navy-on-dark-page problem on the module's labels/headings
   (Group, Test Name, Formula Expression, Standard Presets, table header) --
   scoped to .tf-* only, doesn't touch any other module. Note: .tf-sidebar-hdr
   keeps its own hardcoded light background regardless of theme, so its navy
   text is intentionally left alone -- it's already readable on that light bar. */
html[data-theme="dark"] .tf-lbl,
html[data-theme="dark"] .tf-table-hdr {
  color: #dceaf8;
}
html[data-theme="dark"] .tf-count {
  color: #acc4d9;
}

.formula-ac-wrap { position: relative; }
.formula-ac-box {
  position: absolute; left: 0; right: 0; top: 100%; margin-top: 2px;
  background: #fff; border: 1px solid #c8d6e5; border-radius: 6px;
  box-shadow: 0 4px 14px rgba(0,0,0,0.14); max-height: 220px; overflow-y: auto;
  z-index: 80; font-size: 13px;
}
.formula-ac-item { display: flex; align-items: center; gap: 8px; padding: 6px 10px; cursor: pointer; }
.formula-ac-item:hover, .formula-ac-item.formula-ac-active { background: #eef4ff; }
.formula-ac-code { font-family: "Consolas", "Courier New", monospace; font-weight: 700; color: #1a73e8; white-space: nowrap; }
.formula-ac-name { color: #333; }
.formula-ac-empty { padding: 8px 10px; color: #888; font-style: italic; }
.tf-op-area { display: flex; flex-direction: column; gap: 6px; }
.tf-const-row { display: flex; gap: 8px; align-items: center; }
.tf-const-inp {
  width: 130px; padding: 6px 10px; border: 1px solid #c8d6e5; border-radius: 6px;
  font-size: 13px; color: #1a3c5e;
}
.tf-include-btn {
  padding: 6px 14px; background: #e8f0fe; border: 1px solid #c8d6e5; border-radius: 6px;
  font-size: 12px; font-weight: 600; color: #1a3c5e; cursor: pointer;
}
.tf-include-btn:hover { background: #d2e3fc; }
.tf-op-row { display: flex; gap: 6px; flex-wrap: wrap; }
.tf-op-btn {
  min-width: 38px; padding: 6px 10px; background: #f5f7fa;
  border: 1px solid #c8d6e5; border-radius: 5px;
  font-size: 14px; font-weight: 700; cursor: pointer; color: #1a3c5e;
}
.tf-op-btn:hover { background: #e3ecf8; }
.tf-op-wide { min-width: 80px; font-size: 12px; }
.tf-preset-row { display: flex; gap: 8px; align-items: center; }
.tf-preset-sel { flex: 1; font-size: 12px; }
.tf-action-row { display: flex; gap: 8px; align-items: center; margin-top: 4px; }
.tf-status { font-size: 12px; }
.tf-status.ok  { color: #1e7e34; }
.tf-status.err { color: #c0392b; }

/* Sidebar */
.tf-sidebar-col { display: flex; flex-direction: column; }
.tf-sidebar-hdr {
  font-size: 12px; font-weight: 700; color: #1a3c5e;
  padding: 8px 10px; background: #eef3fa; border-radius: 6px 6px 0 0;
  border: 1px solid #c8d6e5; border-bottom: none;
}
.tf-sidebar-hdr small { font-weight: 400; color: #5a7a9a; }
.tf-sidebar-list {
  flex: 1; overflow-y: auto; max-height: 420px;
  border: 1px solid #c8d6e5; border-radius: 0 0 6px 6px;
  background: #fff;
}
.tf-sb-item {
  display: flex; align-items: center; justify-content: space-between;
  padding: 6px 10px; cursor: pointer; border-bottom: 1px solid #eef2f7;
  font-size: 12px; gap: 6px;
}
.tf-sb-item:hover { background: #e8f0fe; }
.tf-sb-item.tf-sb-calc { background: #f0fff4; }
.tf-sb-item.tf-sb-active { background: #d2e3fc; font-weight: 600; }
.tf-sb-name { flex: 1; color: #23313f; }
.tf-sb-code { font-family: monospace; font-size: 11px; color: #1a73e8; background: #e8f0fe; padding: 1px 4px; border-radius: 3px; white-space: nowrap; }
.tf-sb-nocode { font-size: 11px; color: #aaa; font-style: italic; }
.tf-sb-empty { padding: 12px; color: #888; font-size: 12px; }

/* Formula table */
.tf-table-area { display: flex; flex-direction: column; gap: 8px; }
.tf-table-hdr { font-size: 14px; font-weight: 700; color: #1a3c5e; display: flex; align-items: center; gap: 8px; }
.tf-count { font-size: 12px; font-weight: 400; color: #5a7a9a; }
.tf-ftbl { width: 100%; }
.tf-frow { cursor: pointer; }
.tf-frow:hover td { background: #eef3fa; }
html[data-theme="dark"] .tf-frow:hover td { background: #1c2e42; }
.tf-fcode { font-size: 12px; color: #1a73e8; word-break: break-all; }

.ftpl-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.ftpl-chip {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 4px 8px; background: #e8f0fe; border: 1px solid #c8d6e5; border-radius: 12px;
  font-size: 12px; color: #1a3c5e;
}
.ftpl-chip-rm { border: none; background: none; cursor: pointer; color: #5a7a9a; font-size: 14px; line-height: 1; padding: 0; }
.ftpl-chip-rm:hover { color: #c0392b; }
html[data-theme="dark"] .ftpl-chip { background: #1c2e42; border-color: #2a4258; color: #dceaf8; }

@media (max-width: 1024px) {
  .tf-top-area { grid-template-columns: 1fr; }
  .tf-sidebar-list { max-height: 200px; }
}

/* ── Touch target sizing (44px minimum tap height on mobile) ──
   Low-specificity `button`/input rule only affects buttons that don't already
   set their own height via a class below (class selectors win on specificity).
   960px matches the .app-shell breakpoint above — the same point the sidebar
   switches from off-canvas to permanent, i.e. "desktop layout" everywhere else. */
@media (max-width: 1366px) {
  button,
  input[type="button"],
  input[type="submit"] {
    min-height: 44px;
  }

  .home-tab,
  .sidebar-toggle,
  .theme-toggle-btn,
  .pe-btn,
  .pe-btn-sm,
  .cs-save-btn,
  .home-icon-btn,
  .pe-mobile-stagebtn,
  .pe-mobile-add-btn,
  .users-actions button,
  .users-list-toolbar button,
  .users-row-save,
  .users-row-reset,
  .pe-history-actions .pe-btn {
    min-height: 44px;
  }

  .home-icon-btn {
    min-width: 44px;
    padding: 10px 12px;
  }

  .pe-mobile-stagebtn {
    font-size: 12px;
    padding: 10px 14px;
    min-width: 44px;
  }

  .pe-mobile-add-btn {
    font-size: 12px;
    padding: 10px 14px;
    min-width: 44px;
  }

  .users-actions button,
  .users-list-toolbar button,
  .users-row-save,
  .users-row-reset {
    min-width: 44px;
    white-space: nowrap;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 10px 14px;
  }
}

/* ── Billing tab ─────────────────────────────────────────────────────────── */
.bill-split { display: grid; grid-template-columns: minmax(0, 1.4fr) minmax(0, 1fr); gap: 16px; align-items: start; }
@media (max-width: 900px) { .bill-split { grid-template-columns: 1fr; } }
.bill-card { border: 1px solid rgba(148, 163, 184, 0.35); border-radius: 8px; padding: 14px; background: rgba(255, 255, 255, 0.03); }
.bill-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; margin-bottom: 12px; flex-wrap: wrap; }
.bill-sub { opacity: 0.7; font-size: 12px; }
.bill-actions { display: flex; gap: 8px; }
.bill-tbl { width: 100%; border-collapse: collapse; }
.bill-tbl th, .bill-tbl td { padding: 6px 8px; border-bottom: 1px solid rgba(148, 163, 184, 0.2); text-align: left; }
.bill-tbl td.bill-amt, .bill-tbl th.bill-amt { text-align: right; }
.bill-tbl tr.bill-total td { font-weight: 600; }
.bill-tbl tr.bill-net td { border-top: 1.5px solid rgba(148, 163, 184, 0.5); }
.bill-tbl td:first-child { overflow-wrap: anywhere; }
.bill-count { margin-left: 8px; font-size: 11px; opacity: 0.65; }
.bill-member td { padding-left: 22px; font-size: 13px; opacity: 0.85; }
.bill-member-name { overflow-wrap: anywhere; }
.bill-warn { margin-left: 8px; font-size: 11px; color: #b45309; white-space: nowrap; }
.bill-rm { margin-left: 10px; min-width: 32px; min-height: 32px; line-height: 1; cursor: pointer; }
.bill-locked { align-self: center; font-size: 12px; opacity: 0.7; }
.bill-back { display: none; }

/* Touch targets are unconditional: a tablet is a touch device at any width, and
   iPad Pro reports 1024px so a width-gated rule would skip it entirely. */
.bill-actions button,
.bill-toolbar button,
.bill-back { min-height: 44px; padding: 0 14px; }
.bill-rm,
.bill-open { min-width: 44px; min-height: 44px; }
/* 16px keeps iOS from zooming the page on focus. */
.bill-toolbar input { min-height: 44px; font-size: 16px; }

@media (max-width: 900px) {
  .bill-toolbar { display: flex; flex-wrap: wrap; gap: 8px; }
  .bill-toolbar label { display: flex; align-items: center; gap: 6px; }
  .bill-actions { flex-wrap: wrap; }
  /* Stacked panes would put a tapped bill below the fold: show one at a time. */
  .bill-split #bill-preview { display: none; }
  .bill-split.bill-stage-preview #bill-list { display: none; }
  .bill-split.bill-stage-preview #bill-preview { display: block; }
  .bill-back { display: inline-block; margin-bottom: 6px; }
}