/* ClinicOS — app.css v3.41R
   Single source of truth. No duplicate rules.
   Mobile-first, theme-safe, WCAG AA verified.
   ─────────────────────────────────────────── */

/* ══════════════════════════════════════════
   DESIGN TOKENS
   ══════════════════════════════════════════ */
:root {
  /* Brand palette */
  --teal:    #0d9488;
  --teal-d:  #0f766e;
  --teal-m:  #5eead4;
  --green:   #22c55e;
  --red:     #ef4444;
  --amber:   #f59e0b;
  --purple:  #a78bfa;

  /* Dark mode surfaces (default) */
  --bg:   #080e0d;
  --bg2:  #0f1917;
  --bg3:  #162220;

  /* Dark mode text — WCAG AA solid colors */
  --ink:   #f0fdf4;   /* 17:1 on bg2 */
  --ink-5: #9dc4b8;   /*  9:1 on bg2 */
  --ink-3: #6d9e90;   /*  6:1 on bg2 */
  --ink-1: #3a5e55;   /* borders      */

  /* Aliases */
  --text-primary:   var(--ink);
  --text-secondary: var(--ink-5);
  --text-muted:     var(--ink-3);
  --card-bg:        var(--bg2);
  --input-bg:       var(--bg3);
  --border:         var(--silver);

  --silver: rgba(255,255,255,.12);

  /* Spacing scale */
  --sp-xs: 4px;
  --sp-sm: 8px;
  --sp-md: 14px;
  --sp-lg: 20px;
  --sp-xl: 28px;

  /* Radius */
  --r:   8px;
  --r-l: 12px;
  --r-s: 5px;

  /* Typography */
  --font: 'DM Sans', sans-serif;
  --mono: 'DM Mono', monospace;
  --head: 'Syne', sans-serif;

  color-scheme: dark;
}

[data-theme="light"] {
  --bg:   #f7faf9;
  --bg2:  #ffffff;
  --bg3:  #eef4f2;
  --ink:   #0a1512;   /* 18.6:1 on white */
  --ink-5: #2d5247;   /*  8.7:1 on white */
  --ink-3: #4a7468;   /*  5.3:1 on white */
  --ink-1: #d0e6e0;
  --silver: rgba(16,32,29,.14);
  --teal-m: #0f766e;
  color-scheme: light;
}
[data-theme="dark"] {
  --bg:   #080e0d;
  --bg2:  #0f1917;
  --bg3:  #162220;
  --ink:   #f0fdf4;
  --ink-5: #9dc4b8;
  --ink-3: #6d9e90;
  --ink-1: #3a5e55;
  --silver: rgba(255,255,255,.12);
  --teal-m: #5eead4;
  color-scheme: dark;
}
@media (prefers-color-scheme: light) {
  [data-theme="system"] {
    --bg:#f7faf9; --bg2:#ffffff; --bg3:#eef4f2;
    --ink:#0a1512; --ink-5:#2d5247; --ink-3:#4a7468; --ink-1:#d0e6e0;
    --silver:rgba(16,32,29,.14); --teal-m:#0f766e;
    color-scheme: light;
  }
}


/* ══════════════════════════════════════════
   RESET
   ══════════════════════════════════════════ */
*, *::before, *::after { box-sizing: border-box; margin: 0; padding: 0; }
html { background: var(--bg); color: var(--ink); }
body {
  font-family: var(--font);
  background: var(--bg);
  color: var(--ink);
  min-height: 100vh;
  font-size: 14px;
  line-height: 1.5;
}
button { cursor: pointer; font-family: var(--font); color: inherit; border: none; }
input, select, textarea {
  font-family: var(--font);
  color: var(--ink);
  background: var(--input-bg);
  border: 1.5px solid var(--silver);
  border-radius: var(--r);
  outline: none;
  font-size: 14px;
  transition: border .2s;
}
input:focus, select:focus, textarea:focus { border-color: var(--teal); }
select {
  min-height: 40px;
  padding: 8px 12px;
  font-size: 14px;
  cursor: pointer;
}
select option { background: var(--bg2); color: var(--ink); }
input[type="number"], input[type="text"], input[type="date"],
input[type="email"], input[type="password"] {
  padding: 9px 12px;
  height: 40px;
}
textarea { padding: 10px 12px; resize: vertical; width: 100%; }
input[type="checkbox"] { width: 16px; height: 16px; accent-color: var(--teal); cursor: pointer; }
/* iOS safari font-size fix (prevent zoom on focus) */
@media (max-width: 768px) {
  input, select, textarea { font-size: 16px !important; }
}


/* ══════════════════════════════════════════
   AUTH / LOGIN
   ══════════════════════════════════════════ */
#auth-screen {
  display: flex; align-items: center; justify-content: center;
  min-height: 100vh;
  background:
    radial-gradient(ellipse at 20% 60%, rgba(13,148,136,.22), transparent 55%),
    radial-gradient(ellipse at 80% 20%, rgba(13,148,136,.1), transparent 45%),
    var(--bg);
}
.auth-box {
  background: var(--bg2);
  border: 1px solid rgba(13,148,136,.25);
  border-radius: 16px;
  padding: 40px;
  width: 420px;
  max-width: 95vw;
  box-shadow: 0 8px 32px rgba(0,0,0,.35);
}
.auth-logo {
  font-family: var(--head); font-size: 11px; font-weight: 700;
  color: var(--teal-m); letter-spacing: .14em; text-transform: uppercase; margin-bottom: 8px;
}
.auth-title {
  font-family: var(--head); font-size: 26px; font-weight: 800;
  color: var(--ink); margin-bottom: 8px; line-height: 1.2;
}
.auth-sub { font-size: 13px; color: var(--ink-5); margin-bottom: 28px; line-height: 1.5; }
.auth-tabs { display: flex; background: var(--bg3); border-radius: var(--r); padding: 4px; gap: 4px; margin-bottom: 24px; }
.auth-tab {
  flex: 1; padding: 9px; text-align: center; font-size: 13px; font-weight: 600;
  color: var(--ink-5); background: none; border-radius: var(--r-s); transition: all .2s;
}
.auth-tab.active { background: var(--teal); color: #fff; }
.auth-err { color: var(--red); font-size: 12px; min-height: 18px; margin-bottom: 12px; }
#pending-screen { display: none; align-items: center; justify-content: center; min-height: 100vh; }
.pending-box {
  background: var(--bg2); border: 1px solid var(--silver); border-radius: 16px;
  padding: 40px; width: 380px; max-width: 95vw; text-align: center;
}


/* ══════════════════════════════════════════
   FORM FIELDS (universal)
   ══════════════════════════════════════════ */
.field { margin-bottom: 16px; }
.field label {
  display: block; font-size: 11px; font-weight: 700;
  color: var(--ink-3); text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px;
}
.field input, .field select, .field textarea {
  width: 100%;
}
.field input[readonly] { opacity: .7; cursor: default; }


/* ══════════════════════════════════════════
   APP SHELL
   ══════════════════════════════════════════ */
#app { display: none; height: 100vh; overflow: hidden; }

/* 2-panel layout: sidebar + main */
.app-layout { display: flex; min-height: 100dvh; height: auto; overflow: visible; }

.sidebar {
  width: 224px; flex-shrink: 0;
  background: var(--bg2);
  border-right: 1px solid var(--silver);
  display: flex; flex-direction: column;
  overflow-y: auto;
}

.main { flex: 1; display: flex; flex-direction: column; overflow: visible; min-width: 0; min-height: 100dvh; }


/* ══════════════════════════════════════════
   TOPBAR
   ══════════════════════════════════════════ */
.topbar {
  height: 56px; padding: 0 20px;
  display: flex; align-items: center; justify-content: space-between;
  border-bottom: 1px solid var(--silver); flex-shrink: 0;
  background: var(--bg2);
  position: sticky; top: 0; z-index: 100;
}
.topbar-title { font-family: var(--head); font-weight: 700; font-size: 18px; color: var(--ink); }
.topbar-actions { display: flex; gap: 8px; align-items: center; }

/* Burger — hidden desktop, visible mobile */
#sb-toggle {
  display: none;
  background: none; border: none;
  color: var(--ink);           /* explicit — not inherited */
  cursor: pointer; padding: 6px;
  border-radius: var(--r); line-height: 1;
  align-items: center; justify-content: center;
}


/* ══════════════════════════════════════════
   SIDEBAR NAV
   ══════════════════════════════════════════ */
.sb-brand { padding: 16px; border-bottom: 1px solid var(--silver); }
.sb-logo  { display: flex; align-items: center; gap: 10px; margin-bottom: 2px; }
.sb-icon  {
  width: 34px; height: 34px; background: var(--teal); border-radius: 8px;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--head); font-weight: 800; font-size: 13px; color: #fff; flex-shrink: 0;
}
.sb-name    { font-family: var(--head); font-weight: 700; font-size: 15px; color: var(--ink); }
.sb-tagline { font-size: 10px; color: var(--ink-3); letter-spacing: .04em; }
.sb-user    { padding: 10px 16px; border-bottom: 1px solid var(--silver); display: flex; align-items: center; gap: 8px; }
.sb-avatar  {
  width: 32px; height: 32px; border-radius: 50%; background: var(--teal);
  display: flex; align-items: center; justify-content: center;
  font-family: var(--head); font-weight: 700; font-size: 12px; color: #fff; flex-shrink: 0;
}
.sb-uname { font-weight: 600; font-size: 13px; color: var(--ink); flex: 1; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.sb-urole { font-size: 10px; color: var(--ink-3); }
.sb-logout { background: none; border: none; color: var(--ink-5); font-size: 16px; padding: 4px; margin-left: auto; flex-shrink: 0; cursor: pointer; }
.sb-logout:hover { color: var(--red); }
#sb-greeting { padding: 8px 16px 4px; font-size: 13px; color: var(--ink); font-weight: 600; }
.sb-sect  { font-size: 10px; font-weight: 700; color: var(--ink-3); text-transform: uppercase; letter-spacing: .08em; padding: 14px 16px 4px; }
.sb-nav   { padding: 8px 0; flex: 1; }
.sb-link  {
  display: flex; align-items: center; gap: 10px; width: 100%;
  padding: 9px 16px; background: none; border: none;
  color: var(--ink); font-size: 13px; text-align: left; cursor: pointer;
  border-radius: 0; transition: background .15s;
}
.sb-link:hover  { background: rgba(255,255,255,.05); }
.sb-link.active { color: var(--teal-m); background: rgba(13,148,136,.1); font-weight: 600; }
.sb-link .icon  { font-size: 15px; width: 20px; text-align: center; flex-shrink: 0; }
.sb-badge { position: absolute; right: 14px; background: var(--red); color: #fff; font-size: 9px; font-weight: 700; border-radius: 10px; padding: 1px 5px; line-height: 1.4; }


/* ══════════════════════════════════════════
   CONTENT AREA
   ══════════════════════════════════════════ */
.content { flex: 1; overflow-y: visible; overflow-x: hidden; padding: 20px; padding-bottom: calc(120px + env(safe-area-inset-bottom)); }
.page { display: none; }
.page.active { display: block; }
.page-inner { max-width: 1200px; }


/* ══════════════════════════════════════════
   CARD
   ══════════════════════════════════════════ */
.card {
  background: var(--bg2);
  border: 1px solid var(--silver);
  border-radius: var(--r-l);
  margin-bottom: 16px;
  overflow: hidden;
}
.card-head {
  padding: 13px 18px;
  border-bottom: 1px solid var(--silver);
  display: flex; align-items: center; justify-content: space-between; gap: 8px;
}
.card-head h2 { font-family: var(--head); font-weight: 800; font-size: 16px; color: var(--ink); }
.card-head h3 { font-family: var(--head); font-weight: 700; font-size: 14px; color: var(--ink); }
.card-head span { color: var(--ink-3); font-size: 12px; }
.card-body { padding: 16px 18px; }


/* ══════════════════════════════════════════
   BUTTONS
   ══════════════════════════════════════════ */
.btn {
  display: inline-flex; align-items: center; gap: 6px;
  padding: 9px 16px; border-radius: var(--r);
  font-size: 13px; font-weight: 600;
  transition: all .15s; white-space: nowrap; cursor: pointer;
  border: 1px solid transparent;
}
.btn-primary   { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn-primary:hover { background: var(--teal-d); border-color: var(--teal-d); }
.btn-secondary {
  background: var(--bg3); color: var(--ink);
  border: 1px solid var(--silver);
}
.btn-secondary:hover { background: rgba(255,255,255,.1); }
.btn-danger    { background: rgba(239,68,68,.15); color: var(--red); border-color: rgba(239,68,68,.3); }
.btn-danger:hover { background: rgba(239,68,68,.25); }
.btn-ghost     { background: none; border: none; color: var(--ink-5); padding: 5px 8px; }
.btn-ghost:hover { color: var(--ink); background: rgba(255,255,255,.05); }
.btn-sm  { padding: 6px 12px; font-size: 12px; }
.btn-xs  { padding: 4px 8px;  font-size: 11px; }
.btn:disabled { opacity: .4; cursor: not-allowed; }


/* ══════════════════════════════════════════
   BADGES
   ══════════════════════════════════════════ */
.badge { display: inline-block; padding: 2px 8px; border-radius: 4px; font-size: 10px; font-weight: 700; }
.badge-approved    { background: rgba(34,197,94,.15);   color: var(--green); }
.badge-pending     { background: rgba(245,158,11,.15);  color: var(--amber); }
.badge-active      { background: rgba(56,189,248,.15);  color: #38bdf8; }
.badge-manager     { background: rgba(167,139,250,.15); color: var(--purple); }
.badge-disputed    { background: rgba(239,68,68,.15);   color: var(--red); }
.badge-warn        { background: rgba(245,158,11,.15);  color: var(--amber); }
.badge-inactive    { background: rgba(148,163,184,.15); color: var(--ink-5); }
.badge-deactivated { background: rgba(148,163,184,.15); color: var(--ink-5); }
.badge-staff       { background: rgba(148,163,184,.12); color: var(--ink-5); }
.badge-viewer      { background: rgba(100,116,139,.15); color: var(--ink-5); }


/* ══════════════════════════════════════════
   TABLE
   ══════════════════════════════════════════ */
.tbl { width: 100%; border-collapse: collapse; font-size: 13px; }
.tbl th {
  padding: 10px 12px; text-align: left;
  font-size: 10px; font-weight: 700;
  color: var(--ink-5); text-transform: uppercase; letter-spacing: .06em;
  border-bottom: 2px solid var(--silver);
}
.tbl td {
  padding: 10px 12px;
  border-bottom: 1px solid var(--silver);
  vertical-align: middle;
  color: var(--ink);
}
.tbl tr:hover td { background: rgba(255,255,255,.03); }
.tbl tr:last-child td { border-bottom: none; }
.actions { display: flex; gap: 4px; flex-wrap: wrap; }


/* ══════════════════════════════════════════
   KPI CARDS
   ══════════════════════════════════════════ */
.kpi {
  background: var(--bg2); border: 1px solid var(--silver);
  border-radius: var(--r-l); padding: 14px 16px;
}
.kpi-label {
  font-size: 10px; font-weight: 700; color: var(--ink-5);
  text-transform: uppercase; letter-spacing: .06em; margin-bottom: 6px;
}
.kpi-value { font-family: var(--mono); font-size: 22px; font-weight: 500; }
.kpi-sub   { font-size: 11px; color: var(--ink-3); margin-top: 4px; }


/* ══════════════════════════════════════════
   MODAL
   ══════════════════════════════════════════ */
.modal-overlay {
  display: none;   /* hidden by default — JS calls openModal() to show */
  position: fixed; inset: 0; background: rgba(0,0,0,.6);
  align-items: center; justify-content: center;
  z-index: 300;
}
/* JS uses classList.add('open') to show modals */
.modal-overlay.open,
.modal-overlay.active {
  display: flex;
}
.modal {
  background: var(--bg2); border: 1px solid var(--silver);
  border-radius: var(--r-l); padding: 24px;
  width: 520px; max-width: 95vw; max-height: 90vh; overflow-y: auto;
  color: var(--ink);
}
.modal h3, .modal h2 { color: var(--ink); font-family: var(--head); }
.modal-close { background: none; border: none; color: var(--ink-5); font-size: 22px; line-height: 1; cursor: pointer; }
.modal-close:hover { color: var(--ink); }


/* ══════════════════════════════════════════
   TOAST + LOADING
   ══════════════════════════════════════════ */
#toast {
  position: fixed; top: 50%; left: 50%;
  transform: translate(-50%, -40px);
  background: var(--bg2); border: 1px solid var(--silver);
  border-radius: var(--r); padding: 14px 22px;
  font-size: 14px; font-weight: 600; color: var(--ink);
  opacity: 0; transition: all .25s;
  z-index: 9999; pointer-events: none;
  max-width: min(360px, 90vw); width: max-content;
  text-align: center;
  box-shadow: 0 8px 32px rgba(0,0,0,.18);
}
#toast.show  { opacity: 1; transform: translate(-50%, -50%); }
#toast.ok    { border-color: rgba(34,197,94,.4);   color: var(--green); }
#toast.err   { border-color: rgba(239,68,68,.4);   color: var(--red);   }
#toast.warn  { border-color: rgba(245,158,11,.4);  color: var(--amber); }
#loading {
  display: none; position: fixed; inset: 0; background: rgba(0,0,0,.6);
  z-index: 400; align-items: center; justify-content: center; flex-direction: column; gap: 12px;
}
#loading.show { display: flex; }
#loading-msg  { font-size: 13px; color: var(--ink-5); }
.spinner {
  width: 32px; height: 32px; border: 3px solid var(--silver);
  border-top-color: var(--teal); border-radius: 50%; animation: spin .7s linear infinite;
}
@keyframes spin  { to { transform: rotate(360deg); } }
@keyframes pulse { 0%,100% { opacity:.4; } 50% { opacity:.8; } }


/* ══════════════════════════════════════════
   MISC UTILITIES
   ══════════════════════════════════════════ */
.empty { text-align: center; padding: 48px 20px; color: var(--ink-3); }
.empty-icon  { font-size: 36px; margin-bottom: 12px; }
.empty-title { font-family: var(--head); font-weight: 700; font-size: 16px; color: var(--ink); margin-bottom: 6px; }
.empty-sub   { font-size: 13px; color: var(--ink-3); }
.section-label {
  font-size: 11px; font-weight: 700; color: var(--ink-5);
  text-transform: uppercase; letter-spacing: .06em;
  margin-bottom: 12px; margin-top: 20px;
}
.section-label:first-child { margin-top: 0; }
.toggle-wrap { display: flex; align-items: center; gap: 8px; }
.toggle-wrap label { font-size: 13px; color: var(--ink); cursor: pointer; }
.red   { color: var(--red); }
.amber { color: var(--amber); }
.green { color: var(--green); }
.teal  { color: var(--teal-m); }
.mono  { font-family: var(--mono); }
.synced-label { font-size:10px; color:var(--ink-3); }


/* ══════════════════════════════════════════
   GRID / LAYOUT HELPERS
   ══════════════════════════════════════════ */
.grid-2 { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.grid-4 { display: grid; grid-template-columns: repeat(4, 1fr); gap: 12px; }
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(180px, 1fr)); gap: 12px; }


/* ══════════════════════════════════════════
   SYNC STATUS
   ══════════════════════════════════════════ */
#sync-status {
  display: none; align-items: center; gap: 6px;
  font-size: 11px; padding: 4px 10px;
  border-radius: 999px; font-weight: 600; cursor: pointer;
}


/* ══════════════════════════════════════════
   DASHBOARD
   ══════════════════════════════════════════ */
.dash-office-btn {
  background: var(--bg3); border: 1px solid var(--silver);
  color: var(--ink-5); border-radius: var(--r);
  padding: 4px 12px; font-size: 12px; cursor: pointer; transition: all .15s;
}
.dash-office-btn:hover  { background: rgba(255,255,255,.1); color: var(--ink); }
.dash-office-btn.active { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 600; }
.ds-total-item .label {
  font-size: 10px; font-weight: 700; color: var(--ink-5);
  text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px;
}
.ds-total-item .value { font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--teal-m); }
.hist-row {
  display: grid;
  grid-template-columns:
    88px    /* Date       */
    150px   /* Office     */
    180px   /* Clinicians */
    36px    /* Patients   */
    90px    /* Collected  */
    82px    /* Balance    */
    88px    /* Status     */
    140px;  /* Actions    */
  gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--silver);
  align-items: center; font-size: 12px; cursor: pointer;
  transition: background .15s; color: var(--ink);
  min-width: 0;
}
.hist-row:hover { background: rgba(255,255,255,.03); }
.hist-row.header {
  font-size: 10px; font-weight: 700; color: var(--ink-5);
  text-transform: uppercase; letter-spacing: .05em;
  cursor: default; border-bottom: 2px solid var(--silver);
  padding-bottom: 8px;
}
.hist-row.header:hover { background: none; }

/* Skeleton loading state */
.hist-skeleton { cursor: default; }
.skel-bar {
  height: 10px; border-radius: 4px;
  background: var(--bg3);
  animation: skel-pulse 1.6s ease-in-out infinite;
}
@keyframes skel-pulse { 0%,100% { opacity:.35; } 50% { opacity:.7; } }
.hist-mono { font-family: var(--mono); }
/* Prevent cell overflow misaligning the grid */
.hist-row > div { min-width: 0; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* Clinician cell: allow wrapping on smaller screens */
.hist-clin { white-space: normal !important; line-height: 1.3; }
/* Actions cell: never truncate buttons */
.hist-row > div:last-child { overflow: visible; white-space: nowrap; }
.hist-filters {
  display: flex; gap: 8px; flex-wrap: wrap; align-items: center;
  margin-bottom: 16px;
}
.hist-filters input, .hist-filters select {
  font-size: 12px; padding: 6px 10px; height: 36px;
}


/* ══════════════════════════════════════════════════════
   DAY SHEET — MODERN UI  v346F
   Replaces legacy .ds-header / .patient-block / .proc-table
   Spacing scale: 8 · 12 · 16 · 24px
   ══════════════════════════════════════════════════════ */

/* ── Shared field style ─────────────────────────────── */
.ds-field {
  display: flex; flex-direction: column; gap: 4px;
}
.ds-field label, .ds-label {
  font-size: 10px; font-weight: 700; letter-spacing: .05em;
  text-transform: uppercase; color: var(--ink-3); white-space: nowrap;
}
.ds-field input, .ds-field select,
.ds-input, .ds-select {
  height: 38px; padding: 0 12px;
  border: 1.5px solid var(--silver); border-radius: var(--r);
  background: var(--bg3); color: var(--ink);
  font-size: 13px; font-family: var(--font);
  transition: border-color .15s, box-shadow .15s;
  width: 100%;
}
.ds-field input:focus, .ds-field select:focus,
.ds-input:focus, .ds-select:focus {
  border-color: var(--teal); outline: none;
  box-shadow: 0 0 0 3px rgba(13,148,136,.15);
}
.ds-field select option, .ds-select option { background: var(--bg2); color: var(--ink); }

/* ── Page header ────────────────────────────────────── */
.ds-header {
  display: flex; gap: 12px; margin-bottom: 16px;
  flex-wrap: wrap; align-items: flex-end;
  padding: 16px; background: var(--bg2);
  border: 1px solid var(--silver); border-radius: var(--r-l);
}
.ds-header .field,
.ds-header .ds-field { margin-bottom: 0; min-width: 160px; flex: 1; }
.ds-header .ds-load-actions { display: flex; align-items: flex-end; gap: 8px; }
.ds-system-time {
  display: flex; flex-direction: column; gap: 2px;
  min-width: 90px; align-items: flex-end; margin-left: auto;
}
.ds-system-time-label { font-size: 9px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; }
#ds-system-time-value {
  font-family: var(--mono); font-size: 18px; font-weight: 700; color: var(--teal-m);
  letter-spacing: .04em;
}

/* ── Status bar ─────────────────────────────────────── */
.ds-status-bar {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; background: var(--bg2);
  border: 1px solid var(--silver); border-radius: var(--r-l);
  margin-bottom: 16px; flex-wrap: wrap;
}
.ds-status-bar .badge { font-size: 11px; }
#ds-action-btns { margin-left: auto; display: flex; gap: 8px; flex-wrap: wrap; }

/* ── Button system ──────────────────────────────────── */
.btn {
  height: 38px; padding: 0 16px;
  border-radius: var(--r); font-family: var(--font);
  font-size: 13px; font-weight: 600;
  border: 1.5px solid transparent;
  cursor: pointer; display: inline-flex; align-items: center;
  gap: 6px; white-space: nowrap; transition: all .15s;
  text-decoration: none;
}
.btn-primary   { background: var(--teal); color: #fff; border-color: var(--teal); }
.btn-primary:hover { background: var(--teal-d); border-color: var(--teal-d); transform: translateY(-1px); box-shadow: 0 4px 12px rgba(13,148,136,.3); }
.btn-secondary { background: var(--bg3); color: var(--ink); border-color: var(--silver); }
.btn-secondary:hover { border-color: var(--teal); background: rgba(13,148,136,.08); }
.btn-danger    { background: rgba(239,68,68,.12); color: var(--red); border-color: rgba(239,68,68,.3); }
.btn-danger:hover { background: rgba(239,68,68,.22); }
.btn-ghost     { background: none; border-color: transparent; color: var(--ink-3); height: 32px; padding: 0 10px; font-size: 12px; }
.btn-ghost:hover { color: var(--ink); background: rgba(255,255,255,.06); }
.btn-sm  { height: 32px; padding: 0 12px; font-size: 12px; }
.btn-xs  { height: 26px; padding: 0 8px;  font-size: 11px; border-radius: 6px; }
.btn:disabled { opacity: .4; cursor: not-allowed; transform: none !important; box-shadow: none !important; }

/* ── Patient card ───────────────────────────────────── */
.patient-block {
  background: var(--bg2); border: 1px solid var(--silver);
  border-radius: var(--r-l); margin-bottom: 16px;
  box-shadow: 0 2px 8px rgba(0,0,0,.15);
  overflow: visible;
}
.patient-block:focus-within {
  border-color: rgba(13,148,136,.35);
  box-shadow: 0 2px 16px rgba(13,148,136,.1);
}

/* Card header strip */
.patient-header-row {
  display: flex; align-items: center; gap: 12px;
  padding: 12px 16px; background: var(--bg3);
  border-bottom: 1px solid var(--silver);
  border-radius: var(--r-l) var(--r-l) 0 0;
  flex-wrap: wrap;
}
.patient-num {
  width: 28px; height: 28px; flex-shrink: 0;
  background: var(--teal); border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-family: var(--head); font-weight: 800; font-size: 12px; color: #fff;
}

/* Patient identity grid */
.patient-identity-grid {
  display: grid;
  grid-template-columns: minmax(140px,1.8fr) 130px minmax(120px,1fr) minmax(140px,1.5fr) 130px;
  gap: 8px; flex: 1; align-items: start;
}
.pt-name-wrap { display: flex; flex-direction: column; gap: 3px; }
.pt-name-label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-3);
}
.pt-name-label.warn { color: var(--amber); }
.pt-name {
  height: 38px; padding: 0 12px;
  border: 1.5px solid var(--silver); border-radius: var(--r);
  background: var(--bg2); color: var(--ink); font-size: 13px;
  width: 100%; transition: border-color .15s, box-shadow .15s;
}
.pt-name:focus { border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px rgba(13,148,136,.15); }
.pt-name.warn  { border-color: var(--amber); }

.pt-field { display: flex; flex-direction: column; gap: 3px; }
.pt-field label {
  font-size: 10px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .05em; color: var(--ink-3);
}
.pt-field input, .pt-field select {
  height: 38px; padding: 0 10px;
  border: 1.5px solid var(--silver); border-radius: var(--r);
  background: var(--bg2); color: var(--ink);
  font-size: 12px; width: 100%;
  transition: border-color .15s;
}
.pt-field input:focus, .pt-field select:focus {
  border-color: var(--teal); outline: none; box-shadow: 0 0 0 3px rgba(13,148,136,.15);
}
.pt-field select option { background: var(--bg2); color: var(--ink); }

/* UID badge */
.pt-uid-wrap {
  display: flex; flex-direction: column; gap: 3px;
  grid-column: span 1;
}
.pt-uid-label { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .05em; color: var(--ink-3); }
.pt-uid-badge {
  display: flex; align-items: center; gap: 6px;
  height: 38px; padding: 0 10px;
  border: 1.5px solid var(--silver); border-radius: var(--r);
  background: var(--bg3); cursor: default; user-select: none;
}
.pt-uid-status {
  font-size: 10px; font-weight: 700; border-radius: 4px;
  padding: 2px 6px; white-space: nowrap;
}
.pt-uid-status.ok       { background: rgba(34,197,94,.15);  color: var(--green); }
.pt-uid-status.pending  { background: rgba(245,158,11,.15); color: var(--amber); }
.pt-uid-status.new      { background: rgba(99,102,241,.15); color: #818cf8; }
.pt-uid-status.checking { background: rgba(245,158,11,.1);  color: var(--amber); }
.pt-uid-status.error    { background: rgba(239,68,68,.15);  color: var(--red); }
.pt-uid-value {
  font-family: var(--mono); font-size: 10px; color: var(--ink-3);
  overflow: hidden; text-overflow: ellipsis; white-space: nowrap; flex: 1;
}

/* Remove patient button */
.patient-del-btn {
  margin-left: auto; flex-shrink: 0;
  width: 30px; height: 30px; border-radius: 50%; padding: 0;
  background: rgba(239,68,68,.1); border: 1px solid rgba(239,68,68,.2);
  color: var(--red); font-size: 16px; cursor: pointer;
  display: flex; align-items: center; justify-content: center;
  transition: all .15s;
}
.patient-del-btn:hover { background: rgba(239,68,68,.25); transform: scale(1.1); }

/* ── Procedure section ──────────────────────────────── */
.proc-section { padding: 0 16px 4px; }

/* Procedure card — replaces table rows */
.proc-card {
  background: var(--bg3); border: 1px solid var(--silver);
  border-radius: var(--r); margin-bottom: 8px; overflow: hidden;
}
.proc-card:focus-within { border-color: rgba(13,148,136,.4); }

.proc-card-primary {
  display: grid;
  grid-template-columns: minmax(160px,2fr) 70px 90px 90px 90px 90px 200px 80px 32px;
  gap: 0; align-items: stretch;
}
.proc-card-cell {
  padding: 6px 6px 4px; border-right: 1px solid var(--silver);
  display: flex; flex-direction: column; gap: 2px;
}
.proc-card-cell:last-child { border-right: none; }
.proc-cell-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--ink-5); white-space: nowrap;
}
.proc-card-cell input, .proc-card-cell select {
  height: 30px; padding: 0 6px;
  background: transparent; border: 1px solid transparent;
  border-radius: var(--r-s); color: var(--ink); font-size: 11px;
  width: 100%; transition: all .12s;
}
.proc-card-cell input:hover, .proc-card-cell select:hover {
  background: rgba(255,255,255,.05); border-color: var(--silver);
}
.proc-card-cell input:focus, .proc-card-cell select:focus {
  border-color: var(--teal); background: rgba(13,148,136,.07); outline: none;
}
.proc-card-cell select option { background: var(--bg2); color: var(--ink); }
.proc-card-cell input.mono { font-family: var(--mono); }
.proc-bal-cell input { color: var(--amber); }

/* Procedure secondary row */
.proc-card-secondary {
  display: grid;
  grid-template-columns: 100px 100px 1fr 120px 28px;
  gap: 0; align-items: stretch;
  border-top: 1px solid var(--silver);
  background: rgba(255,255,255,.015);
}

/* Insurance section inside proc card */
.proc-ins-section {
  padding: 6px 8px; border-top: 1px solid var(--silver);
  background: rgba(13,148,136,.04);
}
.proc-ins-header {
  display: flex; align-items: center; gap: 8px; margin-bottom: 6px;
}
.proc-ins-header-label {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  letter-spacing: .04em; color: var(--teal-m);
}
.ins-card-slot {
  background: var(--bg2); border: 1px solid var(--silver);
  border-radius: var(--r-s); padding: 6px 8px; margin-bottom: 6px;
}
.ins-card-slot-title {
  font-size: 9px; font-weight: 700; text-transform: uppercase;
  color: var(--ink-3); margin-bottom: 5px; letter-spacing: .04em;
}
.ins-card-grid {
  display: grid; grid-template-columns: 1fr 80px 80px; gap: 6px; align-items: end;
}
.ins-card-grid .ds-label { font-size: 9px; }
.ins-card-grid input, .ins-card-grid select {
  height: 30px; padding: 0 6px; font-size: 11px;
  border: 1px solid var(--silver); border-radius: var(--r-s);
  background: var(--bg3); color: var(--ink); width: 100%;
}
.ins-card-grid input:focus, .ins-card-grid select:focus {
  border-color: var(--teal); outline: none;
}
.ins-card-count-wrap {
  display: flex; align-items: center; gap: 8px;
}
.ins-card-count-wrap select {
  height: 26px; padding: 0 8px; font-size: 11px;
  border: 1.5px solid var(--silver); border-radius: 6px;
  background: var(--bg3); color: var(--ink); cursor: pointer;
}
.ins-card-count-wrap select:focus { border-color: var(--teal); outline: none; }

/* Proc footer */
.proc-footer {
  display: flex; align-items: center; gap: 8px;
  padding: 10px 16px; border-top: 1px solid var(--silver);
  background: var(--bg3); border-radius: 0 0 var(--r-l) var(--r-l);
}
.pt-subtotal {
  font-family: var(--mono); font-size: 13px; font-weight: 700;
  color: var(--teal-m); margin-left: auto;
}

/* ── Add patient button ──────────────────────────────── */
#ds-add-patient-btn {
  width: 100%; margin-bottom: 20px; height: 42px;
  border-style: dashed; justify-content: center;
  font-size: 14px;
}
#ds-add-patient-btn:hover { border-style: solid; }

/* ── Day totals strip ────────────────────────────────── */
.ds-totals {
  display: flex; flex-wrap: wrap; gap: 8px;
  margin-bottom: 16px;
}
.ds-total-item {
  flex: 1; min-width: 110px; padding: 10px 14px;
  background: var(--bg2); border: 1px solid var(--silver);
  border-radius: var(--r); text-align: center;
}
.ds-total-item .label { font-size: 10px; color: var(--ink-3); font-weight: 700; text-transform: uppercase; margin-bottom: 4px; }
.ds-total-item .value { font-family: var(--mono); font-size: 14px; font-weight: 700; color: var(--ink); }

/* ── Legacy table — keep working for non-modernized views ── */
.proc-table { width: 100%; border-collapse: collapse; font-size: 11px; }
.proc-table th { font-size: 9px; font-weight: 700; color: var(--ink-5); text-transform: uppercase; padding: 5px 6px; text-align: left; border-bottom: 1px solid var(--silver); white-space: nowrap; }
.proc-table td { padding: 3px 2px; vertical-align: middle; }
.proc-table td input, .proc-table td select { width: 100%; background: transparent; border: 1px solid transparent; border-radius: 3px; padding: 4px 5px; color: var(--ink); font-size: 11px; height: 28px; }
.proc-table td input:hover, .proc-table td select:hover { background: rgba(255,255,255,.05); }
.proc-table td input:focus, .proc-table td select:focus { border-color: var(--teal); background: rgba(13,148,136,.07); outline: none; }
.proc-row-secondary td { background: rgba(255,255,255,.02); border-top: none !important; }
.proc-row-primary td   { border-bottom: none !important; }
.proc-row-secondary input, .proc-row-secondary select { background: transparent; border: 1px solid transparent; border-radius: 3px; padding: 4px 5px; color: var(--ink); font-size: 11px; height: 28px; width: 100%; }
.proc-row-secondary input:focus, .proc-row-secondary select:focus { border-color: var(--teal); background: rgba(13,148,136,.07); outline: none; }

/* ── Responsive ──────────────────────────────────────── */
@media (max-width: 900px) {
  .patient-identity-grid {
    grid-template-columns: 1fr 1fr;
  }
  .pt-uid-wrap { grid-column: 1 / -1; }
  .proc-card-primary {
    grid-template-columns: 1fr 1fr 1fr;
  }
  .proc-card-primary .proc-card-cell:nth-child(n+7) { display: none; }
  .ins-card-grid { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 600px) {
  .ds-header { padding: 12px; gap: 8px; }
  .patient-identity-grid { grid-template-columns: 1fr; }
  .pt-uid-wrap { grid-column: 1; }
  .proc-card-primary { grid-template-columns: 1fr 1fr; }
  .ds-totals { gap: 6px; }
  .ds-total-item { min-width: 90px; padding: 8px 10px; }
  .patient-header-row { padding: 10px 12px; }
  .proc-footer { padding: 8px 12px; }
}


/* ══════════════════════════════════════════
   MISC TABLES / FORMS (shared)
   ══════════════════════════════════════════ */
.or-row { display: flex; justify-content: space-between; align-items: flex-start; padding: 10px 14px; border-bottom: 1px solid var(--silver); cursor: pointer; transition: background .15s; }
.or-row:hover { background: rgba(255,255,255,.03); }
.or-label { font-size: 13px; font-weight: 600; color: var(--ink); }
.or-sub   { font-size: 11px; color: var(--ink-3); margin-top: 2px; }
.or-val   { font-family: var(--mono); font-size: 14px; color: var(--ink); text-align: right; }
.or-target { font-size: 11px; color: var(--ink-3); text-align: right; margin-top: 2px; }
.pip { display: flex; gap: 4px; flex-wrap: wrap; }
.pip-cell    { width: 18px; height: 18px; border-radius: 3px; background: var(--bg3); }
.pip-present { background: var(--green); }
.pip-missing { background: var(--red); }
.pip-closed  { background: var(--bg3); border: 1px solid var(--silver); }
.pip-no-patients { background: var(--amber); }


/* ══════════════════════════════════════════
   TABS (inventory, reports etc.)
   ══════════════════════════════════════════ */
.inv-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 16px; }
.inv-tab {
  background: var(--bg3); border: 1px solid var(--silver);
  color: var(--ink-5); border-radius: var(--r);
  padding: 6px 14px; font-size: 12px; cursor: pointer; transition: all .15s; min-height: 36px;
}
.inv-tab:hover  { background: rgba(255,255,255,.1); color: var(--ink); }
.inv-tab.active { background: var(--teal); border-color: var(--teal); color: #fff; font-weight: 600; }
.pin-btn {
  background: var(--bg3); border: 1px solid var(--silver);
  border-radius: var(--r); padding: 14px; font-size: 20px; font-weight: 600;
  cursor: pointer; color: var(--ink); transition: background .15s;
}
.pin-btn:hover { background: rgba(255,255,255,.12); }
.pin-btn:active { background: var(--teal); color: #fff; }


/* ══════════════════════════════════════════
   AUDIT LOG
   ══════════════════════════════════════════ */
.audit-row  { display: flex; gap: 16px; padding: 10px 0; border-bottom: 1px solid var(--silver); font-size: 12px; align-items: flex-start; }
.audit-time { font-family: var(--mono); color: var(--ink-3); white-space: nowrap; flex-shrink: 0; }
.audit-action { font-weight: 600; color: var(--ink); }
.audit-detail { color: var(--ink-5); margin-top: 2px; font-size: 11px; }


/* ══════════════════════════════════════════
   INSURANCE / COMMISSION TABLES
   ══════════════════════════════════════════ */
.ic-row {
  display: grid;
  grid-template-columns: 90px 130px 110px 90px 90px 90px 90px 80px 1fr;
  gap: 6px; padding: 9px 14px;
  border-bottom: 1px solid var(--silver);
  align-items: center; font-size: 12px; cursor: pointer; color: var(--ink);
  transition: background .15s;
}
.ic-row:hover { background: rgba(255,255,255,.03); }
.ic-row.header {
  font-size: 10px; font-weight: 700; color: var(--ink-5);
  text-transform: uppercase; letter-spacing: .05em;
  cursor: default; border-bottom: 2px solid var(--silver);
}
.comm-report-row {
  display: grid;
  grid-template-columns: 115px 145px 95px 95px 95px 95px 90px 90px 92px 1fr;
  gap: 8px; padding: 10px 14px;
  border-bottom: 1px solid var(--silver);
  align-items: center; font-size: 12px; cursor: pointer; color: var(--ink);
  transition: background .15s;
}
.comm-report-row:hover { background: rgba(255,255,255,.03); }
.comm-report-row.header {
  font-size: 10px; font-weight: 700; color: var(--ink-5);
  text-transform: uppercase; letter-spacing: .05em;
  cursor: default; border-bottom: 2px solid var(--silver);
}
.comm-item-row {
  display: grid;
  grid-template-columns: 80px 1fr 130px 80px 80px 80px 80px 80px 80px 90px 90px;
  gap: 6px; padding: 7px 14px;
  border-bottom: 1px solid var(--silver); font-size: 11px; color: var(--ink);
  align-items: center;
}
.comm-item-row.header {
  font-size: 10px; font-weight: 700; color: var(--ink-5);
  text-transform: uppercase; border-bottom: 1px solid var(--silver);
  padding: 8px 14px; cursor: default;
}

.comm-balance-due { color: var(--amber) !important; font-weight: 800; }
.comm-balance-zero { color: var(--teal-m) !important; opacity: .85; }
.comm-summary-item .label { font-size: 10px; font-weight: 700; color: var(--ink-5); text-transform: uppercase; letter-spacing: .05em; margin-bottom: 3px; }
.comm-summary-item .value { font-family: var(--mono); font-size: 15px; font-weight: 500; color: var(--teal-m); }
.office-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--silver); color: var(--ink); }
.del-btn:hover { color: var(--red); background: rgba(239,68,68,.1); }


/* ══════════════════════════════════════════
   CALENDAR
   ══════════════════════════════════════════ */

/* Header: nav + Today on one line */
.cal-header {
  display: flex; align-items: center; gap: 10px;
  flex-wrap: wrap; margin-bottom: 12px;
}
.cal-month-nav {
  display: flex; align-items: center; gap: 8px;
}
.cal-month-label {
  font-family: var(--head); font-weight: 700; font-size: 16px;
  color: var(--ink); min-width: 110px; text-align: center;
}

.cal-office-tab {
  padding: 5px 12px; border-radius: 20px; font-size: 12px; cursor: pointer;
  border: 1px solid var(--silver); background: var(--bg3);
  color: var(--ink-5); transition: all .15s;
}
.cal-office-tab:hover  { border-color: var(--teal); color: var(--ink); }
.cal-office-tab.active { background: var(--teal); border-color: var(--teal); color: #fff; }

.cal-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.cal-dow  { text-align: center; font-size: 10px; font-weight: 700; color: var(--ink-5); text-transform: uppercase; padding: 6px 0; }
.cal-cell {
  border: 1px solid var(--silver); padding: 6px; min-height: 52px;
  font-size: 11px; cursor: pointer; transition: background .15s; color: var(--ink);
}
.cal-cell:hover       { background: rgba(255,255,255,.04); }
.cal-cell.today       { border-color: var(--teal); }
.cal-cell.other-month { opacity: .3; pointer-events: none; }
.cal-cell.locked      { background: rgba(255,255,255,.04); }
.cal-cell.no-patients { background: rgba(245,158,11,.06); }
.cal-cell.submitted   { background: rgba(34,197,94,.08); }
.cal-date-num         { font-size: 10px; font-weight: 700; color: var(--ink-3); margin-bottom: 2px; }

/* Legend: horizontal row of colour dots + labels */
.cal-legend {
  display: flex; flex-wrap: wrap; gap: 6px 16px;
  margin-top: 12px; padding: 10px 14px;
  background: var(--bg2); border: 1px solid var(--silver);
  border-radius: var(--r); font-size: 11px;
}
.cal-legend-item {
  display: flex; align-items: center; gap: 5px;
  color: var(--ink-5); white-space: nowrap;
}
/* Colour swatches */
.cal-pip {
  width: 10px; height: 10px; border-radius: 2px; flex-shrink: 0;
}
.pip-missing      { background: var(--red);                      border: 1px solid rgba(239,68,68,.4); }
.pip-draft        { background: var(--amber);                    border: 1px solid rgba(245,158,11,.4); }
.pip-submitted    { background: rgba(34,197,94,.5);              border: 1px solid rgba(34,197,94,.5); }
.pip-pending-cv   { background: var(--purple);                   border: 1px solid rgba(167,139,250,.4); }
.pip-verified     { background: var(--green);                    border: 1px solid rgba(34,197,94,.6); }
.pip-locked       { background: rgba(255,255,255,.2);            border: 1px solid var(--silver); }
.pip-no-patients  { background: var(--amber);                    border: 1px solid rgba(245,158,11,.4); }
.pip-closed       { background: var(--bg3);                      border: 1px solid var(--silver); }


/* ══════════════════════════════════════════
   HISTORY LIST
   ══════════════════════════════════════════ */
.ds-list-item {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 14px; border-bottom: 1px solid var(--silver);
  cursor: pointer; transition: background .15s; color: var(--ink);
}
.ds-list-item:hover { background: rgba(255,255,255,.04); }
.ds-li-date   { font-family: var(--mono); font-size: 12px; color: var(--ink-3); min-width: 80px; }
.ds-li-office { font-size: 13px; font-weight: 600; color: var(--ink); flex: 1; }
.ic-update-btn { cursor: pointer !important; pointer-events: auto !important; position: relative !important; z-index: 1 !important; }


/* ══════════════════════════════════════════
   CLINICIAN VERIFICATION PANEL
   ══════════════════════════════════════════ */
.cv-block {
  display: flex; align-items: center; gap: 10px;
  padding: 8px 0; border-bottom: 1px solid var(--silver);
  flex-wrap: wrap;
}
.cv-block:last-child { border-bottom: none; }
.cv-clinician {
  font-weight: 600; font-size: 13px; color: var(--ink);
  min-width: 160px; flex-shrink: 0;
}
.cv-status-text {
  display: flex; align-items: center; gap: 6px;
  flex-wrap: wrap; flex: 1;
}
.cv-actions {
  display: flex; gap: 6px; flex-shrink: 0; margin-left: auto;
}
.badge-unverified { background: rgba(245,158,11,.15); color: var(--amber); }
.badge-verified   { background: rgba(34,197,94,.15);  color: var(--green); }
.badge-override   { background: rgba(167,139,250,.15); color: var(--purple); }
.cr-field label { font-size: 11px; font-weight: 700; color: var(--ink-5); text-transform: uppercase; letter-spacing: .04em; }
.cr-field input[readonly] { background: var(--bg3); color: var(--ink-5); cursor: default; }
.warn-box { background: rgba(245,158,11,.07); border: 1px solid rgba(245,158,11,.3); border-radius: var(--r); padding: 10px 14px; color: var(--amber); font-size: 12px; }


/* ══════════════════════════════════════════
   MOBILE ( ≤ 768px )
   ══════════════════════════════════════════ */
@media (max-width: 768px) {
  /* Burger visible */
  #sb-toggle { display: flex !important; }

  /* Topbar */
  .topbar { padding: 0 12px; height: 52px; }
  .topbar-title {
    font-size: 14px; max-width: 160px;
    overflow: hidden; text-overflow: ellipsis; white-space: nowrap;
  }

  /* Sidebar — off-canvas drawer */
  .sidebar {
    position: fixed !important;
    top: 0; left: -270px; width: 270px !important; height: 100vh !important;
    z-index: 200; transition: left .25s ease;
    box-shadow: none;
  }
  .sidebar.open { left: 0; box-shadow: 6px 0 30px rgba(0,0,0,.5); }
  #sb-overlay.active { display: block !important; }

  /* Content */
  .content { padding: 10px; }
  .main { width: 100%; }

  /* Grids → single column */
  .grid-2, .grid-3, .grid-4 { grid-template-columns: 1fr !important; }
  .kpi-grid { grid-template-columns: 1fr 1fr !important; }
  #dash-kpis { grid-template-columns: 1fr 1fr !important; }
  .ds-totals { grid-template-columns: 1fr 1fr !important; }

  /* KPI value smaller on tiny screens */
  .kpi-value { font-size: 18px !important; }
  .kpi { padding: 10px; }

  /* Cards */
  .card-body { padding: 12px; }

  /* Tables → compress */
  .tbl { font-size: 11px; }
  .tbl th, .tbl td { padding: 6px 8px; }

  /* History list */
  .hist-row {
    grid-template-columns: 80px 1fr 80px 90px;
    gap: 4px; padding: 8px 10px;
  }
  /* Mobile: hide clinicians, patients, balance, actions — show date/office/collected/status */
  .hist-row > div:nth-child(3),
  .hist-row > div:nth-child(4),
  .hist-row > div:nth-child(6),
  .hist-row > div:nth-child(8) { display: none; }

  /* Modals */
  .modal { padding: 16px; width: 96% !important; max-width: 96% !important; }

  /* Day sheet header stacks */
  .ds-header { flex-direction: column; }
  .ds-header .field { min-width: 0; width: 100%; }

  /* Patient header — 2 rows on mobile */
  .patient-header {
    grid-template-columns: 28px 1fr 1fr;
    grid-template-rows: auto auto;
  }

  /* Action buttons — scrollable strip */
  #ds-action-btns { overflow-x: auto; flex-wrap: nowrap; padding-bottom: 4px; }
  .ds-save-btns { overflow-x: auto; flex-wrap: nowrap; }
  .btn { white-space: nowrap; }

  /* Commission tables — hide less critical columns */
  .ic-row    { grid-template-columns: 80px 1fr 80px 80px; }
  .comm-report-row { grid-template-columns: 100px 1fr 80px 80px; }

  /* Topbar actions — smaller */
  .topbar-actions select { font-size: 12px !important; padding: 4px 6px; min-height: 32px; }
}

/* Very small phones */
@media (max-width: 380px) {
  .kpi-grid, #dash-kpis { grid-template-columns: 1fr !important; }
  .ds-totals { grid-template-columns: 1fr !important; }
  .hist-row { grid-template-columns: 70px 1fr; }
}


/* ══════════════════════════════════════════
   RECEIPT / PRINT
   (print-only — always white bg, dark text)
   ══════════════════════════════════════════ */

.receipt-body {
  font-family:'Courier New',Courier,monospace;
  font-size:11px; color:#111; background:#fff;
  padding:14px 16px; width:100%; box-sizing:border-box;
}
.receipt-body .r-center  { text-align:center; }
.receipt-body .r-bold    { font-weight:bold; }
.receipt-body .r-lg      { font-size:13px; }
.receipt-body .r-sm      { font-size:10px; color:#555; }
.receipt-body .r-divider { border:none; border-top:1px dashed #aaa; margin:4px 0; }
.receipt-body .r-row     { display:flex; justify-content:space-between; margin:1px 0; gap:4px; }
.receipt-body .r-label   { flex:1; }
.receipt-body .r-val     { text-align:right; white-space:nowrap; }
.receipt-body .r-section { margin:8px 0 2px; font-weight:bold; font-size:10px; text-transform:uppercase; letter-spacing:.06em; color:#555; }
.receipt-body .r-paid    { text-align:center; border:2px solid #16a34a; color:#16a34a; border-radius:4px; padding:4px 0; font-weight:bold; letter-spacing:.12em; margin:10px 0 4px; font-size:13px; }
.receipt-body .r-balance-due { text-align:center; border:2px solid #dc2626; color:#dc2626; border-radius:4px; padding:4px 0; font-weight:bold; margin:10px 0 4px; font-size:12px; }

/* HOTFIX58: COMPACT RECEIPT PRINT */
#receipt-print-root{background:#fff!important;color:#111!important;width:80mm!important;max-width:80mm!important;margin:0 auto!important}
.receipt-body{width:80mm!important;max-width:80mm!important;min-height:0!important;padding:4mm 3mm 3mm!important;margin:0!important;box-shadow:none!important;page-break-after:auto!important;break-after:auto!important}
.receipt-body.r-58mm{width:58mm!important;max-width:58mm!important;font-size:10px!important;padding:3mm 2mm!important}
.receipt-body.r-80mm{width:80mm!important;max-width:80mm!important}
.receipt-body.r-a5{width:148mm!important;max-width:148mm!important;font-size:12px!important}
.receipt-body .r-row{page-break-inside:avoid!important;break-inside:avoid!important}
@media print{
  html,body{background:#fff!important;width:auto!important;height:auto!important;min-height:0!important;margin:0!important;padding:0!important}
  body>*:not(#receipt-modal){display:none!important;visibility:hidden!important;height:0!important;overflow:hidden!important}
  #receipt-modal{display:block!important;position:static!important;inset:auto!important;background:#fff!important;padding:0!important;margin:0!important;height:auto!important;min-height:0!important;overflow:visible!important}
  #receipt-modal>div{width:auto!important;max-width:none!important;min-height:0!important;height:auto!important;margin:0!important;padding:0!important;border:0!important;box-shadow:none!important;border-radius:0!important;background:#fff!important}
  #receipt-print-root{display:block!important;width:80mm!important;max-width:80mm!important;margin:0!important;padding:0!important;height:auto!important;min-height:0!important;overflow:visible!important}
  .receipt-body{width:80mm!important;max-width:80mm!important;min-height:0!important;height:auto!important;margin:0!important;padding:3mm 2.5mm 2mm!important;overflow:visible!important}
  .receipt-body.r-58mm,#receipt-print-root.r-58mm{width:58mm!important;max-width:58mm!important}
  .receipt-body.r-a5,#receipt-print-root.r-a5{width:148mm!important;max-width:148mm!important}
  .receipt-modal-chrome,#receipt-modal button,#receipt-modal select{display:none!important}
  @page{margin:2mm;size:80mm auto}
}



/* HOTFIX v341f: MOBILE SCROLL / VIEWPORT LOCK FIX
   Root cause: .app-layout/.main used fixed 100vh + overflow hidden.
   On iPhone Safari this can trap scrolling and cut off pages. */
html {
  min-height: 100%;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-text-size-adjust: 100%;
}
body {
  min-height: 100%;
  height: auto;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}
.app-layout {
  min-height: 100dvh;
  height: auto !important;
  overflow: visible !important;
}
.main {
  min-height: 100dvh;
  height: auto !important;
  overflow: visible !important;
}
.content {
  flex: 1 1 auto;
  height: auto !important;
  min-height: calc(100dvh - 72px);
  overflow-y: visible !important;
  overflow-x: hidden;
  -webkit-overflow-scrolling: touch;
  padding-bottom: calc(120px + env(safe-area-inset-bottom));
}
.page.active {
  min-height: auto;
  overflow: visible;
}
@supports not (height: 100dvh) {
  .app-layout, .main { min-height: 100vh; }
  .content { min-height: calc(100vh - 72px); }
}

/* When a modal is truly open, only the modal should scroll. */
body.modal-open,
body.no-scroll {
  overflow: hidden !important;
}
.modal-overlay.open,
.modal-overlay.active {
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  align-items: flex-start;
  padding-top: max(18px, env(safe-area-inset-top));
  padding-bottom: max(18px, env(safe-area-inset-bottom));
}
.modal {
  max-height: calc(100dvh - 36px);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}



/* HOTFIX v341g: MOBILE SAFARI BOTTOM BAR / SAFE AREA FIX
   The page can scroll, but Safari's bottom address bar overlays content.
   Add real bottom breathing room to every scrollable page and dashboard grid. */
:root {
  --mobile-browser-bottom-space: 190px;
}

.content,
.page.active,
.dashboard-grid,
#dashboard-content,
#page-dashboard,
#page-daysheet,
#page-history,
#page-calendar,
#page-import,
#page-myhr,
#page-cash-recon {
  padding-bottom: calc(var(--mobile-browser-bottom-space) + env(safe-area-inset-bottom)) !important;
  scroll-padding-bottom: calc(var(--mobile-browser-bottom-space) + env(safe-area-inset-bottom)) !important;
}

.content::after,
.page.active::after {
  content: "";
  display: block;
  height: calc(var(--mobile-browser-bottom-space) + env(safe-area-inset-bottom));
  flex: 0 0 auto;
}

@media (max-width: 768px) {
  body {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .content {
    padding-left: 14px;
    padding-right: 14px;
    padding-bottom: calc(220px + env(safe-area-inset-bottom)) !important;
  }

  .page.active {
    padding-bottom: calc(220px + env(safe-area-inset-bottom)) !important;
    min-height: auto !important;
  }

  .dashboard-grid,
  #dashboard-content {
    padding-bottom: calc(240px + env(safe-area-inset-bottom)) !important;
    margin-bottom: calc(120px + env(safe-area-inset-bottom)) !important;
  }

  .kpi-grid,
  .cards-grid,
  .dash-grid {
    margin-bottom: calc(160px + env(safe-area-inset-bottom)) !important;
  }

  .bottom-spacer,
  .mobile-bottom-spacer {
    display: block !important;
    height: calc(220px + env(safe-area-inset-bottom)) !important;
  }
}

/* Ensure no ancestor clips the lower part of mobile pages */
.app-layout,
.main,
.content,
.page,
.page.active {
  overflow-x: hidden !important;
}



/* HOTFIX v341h: FINAL MOBILE SCROLL MODEL
   One authoritative mobile scroll container:
   - body/html do NOT scroll on mobile
   - .content is the only vertical scroll area
   - viewport height uses JS-set --app-vh to avoid iOS Safari 100vh bugs
   - generous bottom padding keeps content above Safari bottom toolbar
*/
:root {
  --app-vh: 1vh;
  --topbar-h: 64px;
  --mobile-bottom-buffer: 260px;
}

@media (max-width: 768px) {
  html, body {
    height: calc(var(--app-vh) * 100) !important;
    min-height: calc(var(--app-vh) * 100) !important;
    max-height: calc(var(--app-vh) * 100) !important;
    overflow: hidden !important;
    overscroll-behavior: none !important;
  }

  body {
    position: fixed !important;
    inset: 0 !important;
    width: 100% !important;
    touch-action: pan-y !important;
  }

  .app-layout {
    height: calc(var(--app-vh) * 100) !important;
    min-height: calc(var(--app-vh) * 100) !important;
    max-height: calc(var(--app-vh) * 100) !important;
    overflow: hidden !important;
    display: flex !important;
  }

  .main {
    height: calc(var(--app-vh) * 100) !important;
    min-height: 0 !important;
    max-height: calc(var(--app-vh) * 100) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
  }

  .topbar {
    flex: 0 0 auto !important;
    min-height: var(--topbar-h) !important;
    z-index: 20 !important;
  }

  .content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    height: auto !important;
    max-height: none !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    overscroll-behavior-y: contain !important;
    padding-bottom: calc(var(--mobile-bottom-buffer) + env(safe-area-inset-bottom)) !important;
  }

  .page,
  .page.active {
    min-height: auto !important;
    height: auto !important;
    max-height: none !important;
    overflow: visible !important;
    padding-bottom: calc(var(--mobile-bottom-buffer) + env(safe-area-inset-bottom)) !important;
  }

  .content::after,
  .page.active::after {
    content: "" !important;
    display: block !important;
    height: calc(180px + env(safe-area-inset-bottom)) !important;
    min-height: calc(180px + env(safe-area-inset-bottom)) !important;
    width: 100% !important;
  }

  .dashboard-grid,
  .kpi-grid,
  .cards-grid,
  .dash-grid {
    margin-bottom: calc(160px + env(safe-area-inset-bottom)) !important;
  }

  /* Sidebar can lock background only while open, but the scroll container must recover after close */
  .sidebar.open ~ .main .content {
    overflow-y: auto !important;
  }

  body.modal-open .content,
  body.no-scroll .content {
    overflow-y: auto !important;
  }
}

/* Desktop/tablet remains normal */
@media (min-width: 769px) {
  body {
    position: static !important;
    overflow-y: auto !important;
  }
}



/* HOTFIX v341k: APP SHELL CLASS MISMATCH FIX
   HTML uses <div class="layout">, while prior CSS targeted .app-layout.
   This caused sidebar to render but the main content panel to appear blank/mispositioned on desktop.
   Keep both selectors as aliases from now on. */

#app {
  width: 100%;
}

.layout,
.app-layout {
  display: flex !important;
  width: 100% !important;
  min-height: 100vh;
}

.layout > .sidebar,
.app-layout > .sidebar {
  flex: 0 0 224px;
}

.layout > .main,
.app-layout > .main {
  flex: 1 1 auto;
  min-width: 0;
  display: flex !important;
  flex-direction: column !important;
}

.layout > .main > .content,
.app-layout > .main > .content {
  flex: 1 1 auto;
  min-width: 0;
}

/* Desktop: content must be visible and scrollable if long */
@media (min-width: 769px) {
  #app {
    height: 100vh;
    overflow: hidden;
  }

  .layout,
  .app-layout {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
  }

  .layout > .main,
  .app-layout > .main {
    height: 100vh !important;
    max-height: 100vh !important;
    overflow: hidden !important;
  }

  .layout > .main > .content,
  .app-layout > .main > .content {
    overflow-y: auto !important;
    overflow-x: hidden !important;
    min-height: 0 !important;
    height: auto !important;
  }
}

/* Mobile: preserve the working v341h scroll model but apply it to .layout too */
@media (max-width: 768px) {
  .layout,
  .app-layout {
    height: calc(var(--app-vh) * 100) !important;
    min-height: calc(var(--app-vh) * 100) !important;
    max-height: calc(var(--app-vh) * 100) !important;
    overflow: hidden !important;
    display: flex !important;
  }

  .layout > .main,
  .app-layout > .main {
    height: calc(var(--app-vh) * 100) !important;
    min-height: 0 !important;
    max-height: calc(var(--app-vh) * 100) !important;
    overflow: hidden !important;
    display: flex !important;
    flex-direction: column !important;
    flex: 1 1 auto !important;
  }

  .layout > .main > .content,
  .app-layout > .main > .content {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
  }
}


/* ══════════════════════════════════════════
   ClinicOS brand alignment v341R
   Controlled visual system pass only.
   ══════════════════════════════════════════ */
:root {
  --navy: #0D1B2A;
  --system-blue: #1565C0;
  --teal: #00BFA6;
  --teal-d: #069982;
  --teal-m: #4DE0C6;
  --soft-white: #F5F7FA;
  --slate: #334155;
  --bg: #07111F;
  --bg2: #0D1B2A;
  --bg3: #13243A;
  --ink: #F8FAFC;
  --ink-5: #CBD5E1;
  --ink-3: #94A3B8;
  --ink-1: #263B56;
  --silver: rgba(203,213,225,.16);
  --font: 'Inter', 'SF Pro Display', system-ui, -apple-system, BlinkMacSystemFont, sans-serif;
  --head: 'Poppins', 'Inter', system-ui, sans-serif;
  --r: 10px;
  --r-l: 16px;
  --brand-gradient: linear-gradient(135deg, #2DD4BF 0%, #00BFA6 45%, #1565C0 100%);
  color-scheme: dark;
}

[data-theme="light"] {
  --bg: #F5F7FA;
  --bg2: #FFFFFF;
  --bg3: #EEF4F7;
  --ink: #0D1B2A;
  --ink-5: #334155;
  --ink-3: #64748B;
  --ink-1: #D7E2EA;
  --silver: rgba(13,27,42,.12);
  --teal-m: #00BFA6;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  [data-theme="system"] {
    --bg: #F5F7FA;
    --bg2: #FFFFFF;
    --bg3: #EEF4F7;
    --ink: #0D1B2A;
    --ink-5: #334155;
    --ink-3: #64748B;
    --ink-1: #D7E2EA;
    --silver: rgba(13,27,42,.12);
    --teal-m: #00BFA6;
    color-scheme: light;
  }
}

body { letter-spacing: -0.01em; }

#auth-screen {
  background:
    radial-gradient(circle at 18% 20%, rgba(0,191,166,.20), transparent 28%),
    radial-gradient(circle at 82% 72%, rgba(21,101,192,.16), transparent 32%),
    linear-gradient(135deg, #F5F7FA 0%, #EAF2F5 55%, #DCEAEF 100%) !important;
  color: #0D1B2A;
}

.auth-box {
  background: rgba(255,255,255,.88) !important;
  color: #0D1B2A !important;
  border: 1px solid rgba(13,27,42,.08) !important;
  box-shadow: 0 28px 80px rgba(13,27,42,.18), 0 2px 10px rgba(13,27,42,.05) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
}

.auth-brand-lockup {
  display: flex;
  align-items: center;
  gap: 14px;
  margin-bottom: 24px;
}
.brand-mark {
  width: 58px;
  height: 58px;
  border-radius: 14px;
  box-shadow: 0 12px 28px rgba(21,101,192,.18);
  flex-shrink: 0;
}
.auth-logo {
  font-family: var(--head) !important;
  font-size: 16px !important;
  font-weight: 800 !important;
  letter-spacing: .14em !important;
  color: #0D1B2A !important;
  margin: 0 0 3px !important;
}
.auth-kicker {
  font-size: 11px;
  font-weight: 800;
  letter-spacing: .20em;
  text-transform: uppercase;
  color: #334155;
}
.auth-title {
  font-family: var(--head) !important;
  font-size: clamp(26px, 4vw, 34px) !important;
  font-weight: 800 !important;
  letter-spacing: -0.045em !important;
  line-height: 1.05 !important;
  color: #0D1B2A !important;
  margin-bottom: 12px !important;
}
.auth-sub {
  color: #334155 !important;
  font-size: 14px !important;
  line-height: 1.62 !important;
  margin-bottom: 28px !important;
}
.auth-tabs {
  background: #EEF4F7 !important;
  border: 1px solid rgba(13,27,42,.06);
  border-radius: 14px !important;
}
.auth-tab { color:#334155 !important; border-radius: 10px !important; }
.auth-tab.active,
.btn-primary {
  background: var(--brand-gradient) !important;
  color: #FFFFFF !important;
  border-color: transparent !important;
  box-shadow: 0 10px 22px rgba(0,191,166,.20);
}
.btn-primary:hover { filter: brightness(.97); transform: translateY(-1px); }
.auth-box .field label { color: #475569 !important; }
.auth-box input,
.auth-box select,
.auth-box textarea {
  background: #FFFFFF !important;
  color: #0D1B2A !important;
  border-color: rgba(13,27,42,.16) !important;
}
.auth-box input:focus,
.auth-box select:focus,
.auth-box textarea:focus {
  border-color: #00BFA6 !important;
  box-shadow: 0 0 0 4px rgba(0,191,166,.12);
}
.auth-err { color: #DC2626 !important; }

.sidebar {
  background: linear-gradient(180deg, #0D1B2A 0%, #0B1728 55%, #07111F 100%) !important;
  border-right: 1px solid rgba(203,213,225,.12) !important;
}
.sb-brand { padding: 18px 16px !important; }
.sb-mark { display:flex; align-items:center; gap:12px; }
.sb-logo-img {
  width: 38px !important;
  height: 38px !important;
  padding: 0 !important;
  background: transparent !important;
  border-radius: 10px !important;
  object-fit: contain;
}
.sb-name {
  font-family: var(--head) !important;
  font-weight: 800 !important;
  font-size: 17px !important;
  letter-spacing: -.025em;
}
.sb-tagline {
  color: rgba(203,213,225,.78) !important;
  font-size: 10px !important;
  letter-spacing: .08em !important;
  text-transform: uppercase;
}
.sb-office-pill {
  margin-top: 12px;
  display: inline-flex;
  width: auto;
  max-width: 100%;
  padding: 4px 9px;
  border-radius: 999px;
  background: rgba(0,191,166,.10);
  border: 1px solid rgba(0,191,166,.18);
  color: #CFFAFE;
  font-size: 11px;
  font-weight: 700;
}
.sb-sect { color: rgba(203,213,225,.54) !important; letter-spacing: .12em !important; }
.sb-sect-ws {
  cursor: pointer;
  transition: color .15s;
  user-select: none;
}
.sb-sect-ws:hover {
  color: rgba(203,213,225,.9) !important;
}
.sb-link {
  margin: 2px 8px;
  width: calc(100% - 16px) !important;
  border-radius: 12px !important;
  color: rgba(248,250,252,.86) !important;
}
.sb-link:hover { background: rgba(255,255,255,.06) !important; }
.sb-link.active {
  color: #F8FAFC !important;
  background: linear-gradient(90deg, rgba(0,191,166,.20), rgba(21,101,192,.14)) !important;
  box-shadow: inset 3px 0 0 #00BFA6;
}
.sb-link .icon { opacity: .86; }
.sb-user { border-top: 1px solid rgba(203,213,225,.12); border-bottom: 1px solid rgba(203,213,225,.08) !important; }
.sb-avatar { background: var(--brand-gradient) !important; }

.topbar { background: var(--bg2) !important; backdrop-filter: blur(12px); }
.topbar-title,
.card-head h2,
.card-head h3,
.empty-title,
.modal-title {
  font-family: var(--head) !important;
  letter-spacing: -0.025em;
}

.card,
.modal,
.pending-box {
  border-radius: var(--r-l) !important;
  box-shadow: 0 12px 28px rgba(13,27,42,.06);
}

.btn { border-radius: 11px !important; font-weight: 700 !important; }
.btn-secondary {
  background: var(--bg3) !important;
  border-color: var(--silver) !important;
}
.btn-secondary:hover { border-color: rgba(0,191,166,.35) !important; }

.badge,
.status-chip,
.ds-status-bar .badge {
  border-radius: 999px !important;
  padding: 4px 10px !important;
  font-weight: 800 !important;
  letter-spacing: .01em;
}
.tbl th { color: var(--ink-3) !important; }
.tbl tr:hover td { background: rgba(0,191,166,.035); }

/* app-wide status language: calm unless true failure */
.badge-approved,
.badge-active,
.badge-submitted,
.status-submitted { background: rgba(0,191,166,.14) !important; color: #00BFA6 !important; }
.badge-pending,
.badge-warn { background: rgba(245,158,11,.14) !important; color: #F59E0B !important; }
.badge-disputed { background: rgba(239,68,68,.14) !important; color: #EF4444 !important; }

@media (max-width: 768px) {
  .auth-box { padding: 30px 24px !important; }
  .auth-brand-lockup { margin-bottom: 20px; }
  .brand-mark { width: 52px; height: 52px; }
}


/* ══════════════════════════════════════════
   ClinicOS v341R1 — restore and polish theme selector/light mode
   Controlled fix: no layout/functionality changes.
   ══════════════════════════════════════════ */
.theme-select {
  appearance: none;
  -webkit-appearance: none;
  min-height: 34px;
  padding: 7px 32px 7px 12px;
  border-radius: 999px;
  border: 1px solid var(--silver);
  background:
    linear-gradient(45deg, transparent 50%, var(--ink-5) 50%) calc(100% - 18px) 50%/6px 6px no-repeat,
    linear-gradient(135deg, var(--ink-5) 50%, transparent 50%) calc(100% - 13px) 50%/6px 6px no-repeat,
    var(--bg3);
  color: var(--ink);
  font: 600 12px/1 var(--font);
  letter-spacing: .01em;
  box-shadow: inset 0 1px 0 rgba(255,255,255,.04);
}
.theme-select:focus {
  border-color: var(--teal);
  box-shadow: 0 0 0 3px rgba(0,191,166,.16);
}
[data-theme="light"] .theme-select,
[data-theme="system"] .theme-select {
  background:
    linear-gradient(45deg, transparent 50%, var(--ink-5) 50%) calc(100% - 18px) 50%/6px 6px no-repeat,
    linear-gradient(135deg, var(--ink-5) 50%, transparent 50%) calc(100% - 13px) 50%/6px 6px no-repeat,
    #ffffff;
  color: var(--ink);
}

[data-theme="light"] .sidebar {
  background: linear-gradient(180deg, #0D1B2A 0%, #10263D 100%);
}
[data-theme="light"] .main,
[data-theme="light"] .content {
  background: var(--bg);
  color: var(--ink);
}
[data-theme="light"] .card,
[data-theme="light"] .auth-box,
[data-theme="light"] .panel,
[data-theme="light"] table,
[data-theme="light"] .table-wrap {
  background: var(--bg2);
  color: var(--ink);
  border-color: var(--silver);
}
[data-theme="light"] input,
[data-theme="light"] select,
[data-theme="light"] textarea {
  background-color: #ffffff;
  color: var(--ink);
  border-color: var(--silver);
}
[data-theme="light"] th,
[data-theme="light"] .muted,
[data-theme="light"] label {
  color: var(--ink-5);
}


/* ══════════════════════════════════════════
   ClinicOS v341R2 — Theme + brand cohesion correction
   Controlled CSS-only pass. Fixes broken light mode cascade and makes
   the visual language feel tied to the ClinicOS identity.
   ══════════════════════════════════════════ */
:root {
  --brand-navy: #0D1B2A;
  --brand-blue: #1565C0;
  --brand-teal: #00BFA6;
  --brand-teal-soft: #4DE0C6;
  --brand-bg-light: #F5F7FA;
  --brand-slate: #334155;
  --brand-gradient: linear-gradient(135deg, #4DE0C6 0%, #00BFA6 45%, #1565C0 100%);
  --font: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
  --head: 'Poppins', 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', system-ui, sans-serif;
}

/* Hard theme variables. These come last so Light/Dark actually switch. */
html[data-theme="dark"] {
  --bg: #07111F;
  --bg2: #0D1B2A;
  --bg3: #13243A;
  --ink: #F8FAFC;
  --ink-5: #CBD5E1;
  --ink-3: #94A3B8;
  --ink-1: #263B56;
  --silver: rgba(203,213,225,.16);
  --card-bg: var(--bg2);
  --input-bg: var(--bg3);
  color-scheme: dark;
}
html[data-theme="light"] {
  --bg: #F5F7FA;
  --bg2: #FFFFFF;
  --bg3: #EEF4F7;
  --ink: #0D1B2A;
  --ink-5: #334155;
  --ink-3: #64748B;
  --ink-1: #D7E2EA;
  --silver: rgba(13,27,42,.12);
  --card-bg: var(--bg2);
  --input-bg: #FFFFFF;
  color-scheme: light;
}
@media (prefers-color-scheme: light) {
  html[data-theme="system"] {
    --bg: #F5F7FA;
    --bg2: #FFFFFF;
    --bg3: #EEF4F7;
    --ink: #0D1B2A;
    --ink-5: #334155;
    --ink-3: #64748B;
    --ink-1: #D7E2EA;
    --silver: rgba(13,27,42,.12);
    --card-bg: var(--bg2);
    --input-bg: #FFFFFF;
    color-scheme: light;
  }
}
@media (prefers-color-scheme: dark) {
  html[data-theme="system"] {
    --bg: #07111F;
    --bg2: #0D1B2A;
    --bg3: #13243A;
    --ink: #F8FAFC;
    --ink-5: #CBD5E1;
    --ink-3: #94A3B8;
    --ink-1: #263B56;
    --silver: rgba(203,213,225,.16);
    --card-bg: var(--bg2);
    --input-bg: var(--bg3);
    color-scheme: dark;
  }
}

html, body, #app, .main, .content { background: var(--bg) !important; color: var(--ink) !important; }
.topbar { background: color-mix(in srgb, var(--bg2) 94%, transparent) !important; border-bottom-color: var(--silver) !important; }
.card, .kpi, .modal, .patient-block, .ds-status-bar { background: var(--bg2) !important; border-color: var(--silver) !important; color: var(--ink) !important; }
.card-head, .patient-header-row { background: color-mix(in srgb, var(--bg3) 72%, transparent) !important; border-color: var(--silver) !important; }
input, select, textarea { background: var(--input-bg) !important; color: var(--ink) !important; border-color: var(--silver) !important; }
input:focus, select:focus, textarea:focus { border-color: var(--brand-teal) !important; box-shadow: 0 0 0 3px rgba(0,191,166,.14) !important; }
.btn-primary { background: var(--brand-gradient) !important; border-color: transparent !important; color: #fff !important; }
.btn-secondary, .dash-office-btn { background: var(--bg3) !important; color: var(--ink) !important; border-color: var(--silver) !important; }
.btn-secondary:hover, .dash-office-btn:hover { border-color: rgba(0,191,166,.38) !important; }
.dash-office-btn.active { background: var(--brand-gradient) !important; color:#fff !important; border-color: transparent !important; }
.kpi { box-shadow: 0 8px 18px rgba(13,27,42,.06); }
.kpi-label, .field label, .tbl th, .hist-row.header { color: var(--ink-3) !important; }
.kpi-value, .teal { color: var(--brand-teal-soft) !important; }
html[data-theme="light"] .kpi-value,
html[data-theme="light"] .teal { color: #008F7D !important; }
.tbl td, .hist-row { color: var(--ink) !important; border-color: var(--silver) !important; }
.tbl tr:hover td, .hist-row:hover { background: rgba(0,191,166,.045) !important; }

/* Sidebar remains a brand anchor in light mode; main content switches properly. */
.sidebar { background: linear-gradient(180deg, #0D1B2A 0%, #10263D 55%, #07111F 100%) !important; color:#F8FAFC !important; }
.sidebar .sb-name, .sidebar .sb-link, .sidebar #sb-greeting, .sidebar .sb-uname { color:#F8FAFC !important; }
.sidebar .sb-tagline, .sidebar .sb-sect, .sidebar .sb-urole, .sidebar .sb-office-pill { color: rgba(203,213,225,.78) !important; }
.sidebar .sb-link.active { background: linear-gradient(90deg, rgba(0,191,166,.22), rgba(21,101,192,.16)) !important; box-shadow: inset 3px 0 0 #00BFA6; }

/* Make the Appearance control obvious and usable, not a ghost pill. */
.topbar-actions { min-width: 128px; justify-content: flex-end; }
.theme-select {
  appearance: auto !important;
  -webkit-appearance: menulist !important;
  min-width: 112px !important;
  height: 38px !important;
  padding: 7px 12px !important;
  border-radius: 999px !important;
  border: 1.5px solid rgba(0,191,166,.45) !important;
  background: var(--bg2) !important;
  color: var(--ink) !important;
  font: 700 13px/1 var(--font) !important;
  box-shadow: 0 0 0 3px rgba(0,191,166,.08), inset 0 1px 0 rgba(255,255,255,.06) !important;
}
.theme-select option { background: var(--bg2) !important; color: var(--ink) !important; }
html[data-theme="light"] .theme-select { background:#FFFFFF !important; color:#0D1B2A !important; }
html[data-theme="light"] .theme-select option { background:#FFFFFF !important; color:#0D1B2A !important; }

/* Login stays polished, but typography calms down. */
.auth-title { font-size: clamp(24px, 3.5vw, 30px) !important; letter-spacing: -.035em !important; }
.auth-sub { max-width: 36rem; }
.auth-logo { letter-spacing: .10em !important; }
.auth-kicker { letter-spacing: .14em !important; color: #334155 !important; }

/* Light mode readability safeguards for frequently dark-stuck elements. */
html[data-theme="light"] .topbar { background:#FFFFFF !important; }
html[data-theme="light"] .content { background:#F5F7FA !important; }
html[data-theme="light"] .card,
html[data-theme="light"] .kpi,
html[data-theme="light"] .modal,
html[data-theme="light"] .patient-block,
html[data-theme="light"] .table-wrap { background:#FFFFFF !important; color:#0D1B2A !important; border-color:rgba(13,27,42,.12) !important; }
html[data-theme="light"] .card-head,
html[data-theme="light"] .patient-header-row { background:#F8FAFC !important; }
html[data-theme="light"] .btn-secondary,
html[data-theme="light"] .dash-office-btn { background:#EEF4F7 !important; color:#0D1B2A !important; }
html[data-theme="light"] .hist-row,
html[data-theme="light"] .tbl td { color:#0D1B2A !important; }
html[data-theme="light"] .green { color:#059669 !important; }
html[data-theme="light"] .red { color:#DC2626 !important; }

/* Avoid the brand pass looking like all-caps shouted enterprise software. */
.topbar-title, .card-head h2, .card-head h3, .empty-title { font-family: var(--head) !important; font-weight: 700 !important; }


/* ClinicOS v341T — workflow stability and mobile controls */
.ds-floating-save {
  position: fixed;
  right: 22px;
  bottom: 22px;
  z-index: 999;
  margin: 0;
  width: min(520px, calc(100vw - 44px));
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  padding: 10px;
  border: 1px solid var(--silver);
  border-radius: 18px;
  background: color-mix(in srgb, var(--bg2) 92%, transparent);
  box-shadow: 0 16px 40px rgba(13,27,42,.16);
  backdrop-filter: blur(14px);
}
.ds-floating-save__status {
  margin-right: auto;
  font-size: 12px;
  font-weight: 700;
  color: var(--ink-3);
}
@media (max-width: 768px) {
  #sb-toggle {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    flex: 0 0 auto !important;
    min-width: 42px !important;
    min-height: 42px !important;
    z-index: 120 !important;
  }
  .topbar > div:first-child { min-width: 0 !important; flex: 1 1 auto !important; }
  .topbar-title { min-width: 0 !important; }
  .topbar-actions { flex: 0 0 auto !important; }
  .ds-floating-save {
    position: fixed;
    left: 12px;
    right: 12px;
    bottom: calc(18px + env(safe-area-inset-bottom));
    width: auto;
    margin: 0;
    padding: 10px 12px;
    border-radius: 20px;
  }
  .ds-floating-save .btn { min-height: 40px; padding: 9px 12px; }
}

/* HOTFIX v342J1: RECEIPT ULTRA-COMPACT PREVIEW + PRINT */
#receipt-print-root{background:#fff!important;color:#111!important;width:80mm!important;max-width:80mm!important;margin:0 auto!important}
.receipt-body.receipt-ultra{font-family:'Courier New',Courier,monospace!important;font-size:10px!important;line-height:.98!important;padding:2mm 1.6mm 1.2mm!important;min-height:0!important;height:auto!important;box-shadow:none!important;background:#fff!important;color:#111!important}
.receipt-body.receipt-ultra.r-58mm{width:58mm!important;max-width:58mm!important;font-size:9px!important;padding:1.4mm 1.2mm!important}
.receipt-body.receipt-ultra.r-80mm{width:80mm!important;max-width:80mm!important}
.receipt-body.receipt-ultra.r-a5{width:148mm!important;max-width:148mm!important;font-size:11px!important}
.receipt-ultra .r-divider{margin:1px 0!important;border-top:1px dashed #aaa!important}
.receipt-ultra .r-row,.receipt-ultra .r-line{margin:0!important;line-height:.98!important}
.receipt-ultra .r-label{overflow:hidden!important;text-overflow:ellipsis!important;white-space:nowrap!important}
.receipt-ultra .r-paid,.receipt-ultra .r-balance-due{margin:1px 0 0!important;padding:1px 0!important;font-size:9px!important;border-width:1px!important}
@media print{
  .receipt-body.receipt-ultra{padding:1.8mm 1.4mm 1mm!important;line-height:.98!important;font-size:10px!important}
  .receipt-body.receipt-ultra.r-58mm{font-size:9px!important;padding:1.4mm 1.2mm!important}
  @page{margin:0;size:80mm auto}
}

/* ════════════════════════════════════════════════
   v344B Executive Dashboard UX Hardening
   Command-center visual layer: factual, fast, mobile-first
   ════════════════════════════════════════════════ */
.exec-dashboard-v344b{display:grid!important;grid-template-columns:repeat(12,minmax(0,1fr))!important;gap:14px!important;align-items:start;}
.exec-widget{background:linear-gradient(180deg,rgba(255,255,255,.06),rgba(255,255,255,.025));border:1px solid rgba(148,163,184,.22);border-radius:18px;box-shadow:0 16px 44px rgba(2,6,23,.13);overflow:hidden;min-width:0;}
.exec-widget.exec-full{grid-column:1/-1}.exec-widget.exec-half{grid-column:span 6}.exec-widget-head{padding:13px 15px 0}.exec-widget-head h3{margin:0;font-size:13px;letter-spacing:.04em;text-transform:uppercase;color:var(--ink-3);font-weight:800}.exec-widget-body{padding:13px 15px 15px}.exec-skel{height:72px;border-radius:14px;background:linear-gradient(90deg,rgba(148,163,184,.15),rgba(148,163,184,.28),rgba(148,163,184,.15));background-size:200% 100%;animation:execSkel 1.2s infinite linear}@keyframes execSkel{to{background-position:-200% 0}}
.exec-alert-wrap{background:linear-gradient(135deg,rgba(13,27,42,.96),rgba(15,118,110,.18));border-color:rgba(45,212,191,.35)}.exec-alert-strip{display:flex;gap:10px;overflow-x:auto;padding-bottom:2px}.exec-alert-pill{border:0;border-radius:999px;padding:10px 13px;font-size:13px;font-weight:800;white-space:nowrap;cursor:pointer}.exec-alert-pill.warn{background:rgba(245,158,11,.17);color:#f59e0b}.exec-alert-pill.err{background:rgba(239,68,68,.17);color:#ef4444}.exec-alert-ok,.exec-ok-panel{font-size:14px;color:var(--green);font-weight:800;padding:8px 0}.exec-muted{color:var(--ink-3);font-size:13px;padding:10px 0}.exec-error{color:var(--red);font-size:12px;font-weight:700}
.exec-hero-grid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}.exec-big-kpi,.exec-proc-kpi{position:relative;text-align:left;border:0;border-radius:18px;padding:18px;min-height:126px;cursor:pointer;overflow:hidden;color:white;box-shadow:0 14px 35px rgba(2,6,23,.19);transition:transform .12s ease,box-shadow .12s ease}.exec-big-kpi:hover,.exec-proc-kpi:hover{transform:translateY(-2px);box-shadow:0 20px 45px rgba(2,6,23,.26)}.exec-big-kpi span,.exec-proc-kpi span{display:block;font-size:12px;text-transform:uppercase;letter-spacing:.08em;font-weight:800;opacity:.88}.exec-big-kpi strong,.exec-proc-kpi strong{display:block;font-family:var(--mono);font-size:46px;line-height:1.02;margin:8px 0 6px}.exec-big-kpi em,.exec-proc-kpi em{font-style:normal;font-size:12px;opacity:.82}.exec-blue{background:linear-gradient(135deg,#0f4c81,#1565c0)}.exec-teal{background:linear-gradient(135deg,#00796b,#00bfa6)}.exec-green{background:linear-gradient(135deg,#047857,#10b981)}.exec-amber{background:linear-gradient(135deg,#b45309,#f59e0b)}.exec-red{background:linear-gradient(135deg,#b91c1c,#ef4444)}
.exec-clinical-grid{display:grid;grid-template-columns:repeat(6,minmax(0,1fr));gap:10px}.exec-proc-kpi{min-height:108px;padding:15px}.exec-proc-kpi strong{font-size:34px}.exec-network-grid,.exec-compliance-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}.exec-mini-stat,.exec-compliance-card{background:var(--bg3);border:1px solid var(--silver);border-radius:14px;padding:12px;text-align:left}.exec-mini-stat span,.exec-compliance-card span{display:block;font-size:11px;color:var(--ink-3);font-weight:800;text-transform:uppercase;letter-spacing:.04em}.exec-mini-stat strong,.exec-compliance-card strong{font-family:var(--mono);font-size:24px;color:var(--teal-m)}.exec-compliance-card{cursor:pointer}.exec-compliance-card.exec-amber strong{color:#f59e0b}.exec-compliance-card.exec-green strong{color:#10b981}
.exec-attention-list{display:flex;flex-direction:column;gap:8px}.exec-attention{border-radius:14px;padding:11px 13px;display:flex;justify-content:space-between;gap:10px;font-size:13px;border:1px solid var(--silver)}.exec-attention strong{font-size:14px}.exec-attention.red{background:rgba(239,68,68,.12);border-color:rgba(239,68,68,.28);color:#ef4444}.exec-attention.amber{background:rgba(245,158,11,.12);border-color:rgba(245,158,11,.28);color:#f59e0b}
.exec-flow-detail{display:flex;flex-direction:column;gap:12px}.exec-bar-metric>div:first-child{display:flex;justify-content:space-between;gap:10px;font-size:13px}.exec-bar-metric span{color:var(--ink-3);font-weight:700}.exec-bar-metric strong{font-family:var(--mono)}.exec-metric-track,.exec-proc-track{height:9px;background:rgba(148,163,184,.18);border-radius:99px;overflow:hidden;margin-top:6px}.exec-metric-track>div,.exec-proc-track>div{height:100%;border-radius:inherit}.exec-flow-row{display:flex;justify-content:space-between;border-top:1px solid var(--silver);padding-top:8px;font-size:13px}.exec-flow-row strong{font-family:var(--mono)}
.exec-proc-visual{display:grid;grid-template-columns:150px 1fr;gap:18px;align-items:center}.exec-donut{width:132px;height:132px;border-radius:50%;display:grid;place-items:center;background:conic-gradient(#00bfa6 calc(var(--p)*1%),rgba(148,163,184,.17) 0);position:relative}.exec-donut:after{content:"";position:absolute;inset:18px;border-radius:50%;background:var(--bg)}.exec-donut span{position:relative;z-index:1;font-family:var(--mono);font-size:26px;font-weight:900;color:var(--teal-m)}.exec-bars{display:flex;flex-direction:column;gap:9px}.exec-proc-bar{cursor:pointer}.exec-proc-bar-meta{display:flex;justify-content:space-between;font-size:12px}.exec-proc-bar-meta span{font-weight:800}.exec-proc-track>div{background:linear-gradient(90deg,#1565c0,#00bfa6)}
.exec-table-scroll{overflow-x:auto}.exec-table{width:100%;border-collapse:separate;border-spacing:0;font-size:12px}.exec-table th{position:sticky;top:0;text-align:left;background:var(--bg3);padding:9px;border-bottom:1px solid var(--silver);cursor:pointer;white-space:nowrap}.exec-table td{padding:9px;border-bottom:1px solid var(--silver);font-family:var(--mono);white-space:nowrap}.exec-table tr:hover{background:rgba(13,148,136,.08)}.exec-office-name{font-family:var(--font)!important;font-weight:800;color:var(--ink)}.exec-chip{display:inline-flex;align-items:center;justify-content:center;min-width:48px;border-radius:999px;padding:3px 8px;font-weight:900;color:white}.exec-chip.exec-blue{background:#1565c0}.exec-chip.exec-green{background:#10b981}.exec-chip.exec-amber{background:#f59e0b}.exec-chip.exec-red{background:#ef4444}
.exec-clinician-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:10px}.exec-clin-card{background:var(--bg3);border:1px solid var(--silver);border-radius:15px;padding:12px;cursor:pointer}.exec-clin-card:hover{border-color:var(--teal-m)}.exec-clin-name{font-weight:900;margin-bottom:4px}.exec-clin-top{font-size:12px;color:var(--ink-3);margin-bottom:8px}.exec-clin-stats{display:flex;flex-wrap:wrap;gap:5px}.exec-clin-stats span{font-size:11px;background:rgba(13,148,136,.12);color:var(--teal-m);border-radius:999px;padding:4px 8px;font-weight:800}.exec-trend-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px}.exec-trend-card{border-radius:14px;color:white;padding:12px}.exec-trend-card span{font-size:11px;text-transform:uppercase;font-weight:800;letter-spacing:.05em;opacity:.86}.exec-trend-card strong{display:block;font-family:var(--mono);font-size:24px}.exec-trend-card small{opacity:.84}.exec-widget-toggle{display:flex;align-items:center;gap:8px;padding:7px 0;font-size:13px;cursor:pointer}.exec-widget-toggle input{accent-color:var(--teal);width:auto}.exec-drill-body{font-size:13px;line-height:1.5}
@media(max-width:980px){.exec-widget.exec-half{grid-column:1/-1}.exec-hero-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.exec-clinical-grid{grid-template-columns:repeat(3,minmax(0,1fr))}.exec-big-kpi strong{font-size:38px}.exec-proc-visual{grid-template-columns:1fr}.exec-donut{margin:auto}.exec-network-grid,.exec-compliance-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media(max-width:560px){.exec-dashboard-v344b{gap:10px!important}.exec-widget{border-radius:15px}.exec-widget-body{padding:11px}.exec-hero-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.exec-big-kpi{min-height:104px;padding:13px}.exec-big-kpi strong{font-size:30px}.exec-clinical-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:8px}.exec-proc-kpi{min-height:92px;padding:12px}.exec-proc-kpi strong{font-size:28px}.exec-alert-strip{gap:7px}.exec-alert-pill{font-size:12px;padding:8px 10px}.exec-network-grid,.exec-compliance-grid{grid-template-columns:1fr 1fr}.exec-mini-stat strong,.exec-compliance-card strong{font-size:20px}}

/* ═══════════════════════════════════════════
   CLINICOS HOME EXPERIENCE v344D
   ═══════════════════════════════════════════ */
#page-home { padding:0; background:var(--bg); min-height:100%; }
.home-header { padding:22px 28px 14px; border-bottom:1px solid var(--silver); display:flex; align-items:center; justify-content:space-between; flex-wrap:wrap; gap:8px; }
.home-greeting { font-family:var(--head); font-size:21px; font-weight:800; color:var(--ink); margin-bottom:2px; }
.home-date { font-size:12px; color:var(--ink-3); }
/* Quick actions */
#home-quick-actions { display:flex; flex-wrap:wrap; gap:6px; padding:12px 28px; border-bottom:1px solid var(--silver); }
.home-qa-btn { display:flex; align-items:center; gap:6px; padding:7px 14px; border-radius:999px; border:1.5px solid var(--silver); background:var(--bg2); color:var(--ink-5); font-size:12px; font-weight:600; cursor:pointer; transition:all .15s; white-space:nowrap; }
.home-qa-btn:hover { background:var(--teal); border-color:var(--teal); color:#fff; transform:translateY(-1px); box-shadow:0 4px 12px rgba(13,148,136,.3); }
.home-qa-icon { font-size:14px; }
/* Favorites */
#home-favs { padding:10px 28px; border-bottom:1px solid var(--silver); }
.home-fav-pill { padding:4px 12px; border-radius:999px; border:1px solid rgba(245,158,11,.3); background:rgba(245,158,11,.08); color:#f59e0b; font-size:11px; font-weight:600; cursor:pointer; transition:all .15s; text-transform:capitalize; }
.home-fav-pill:hover { background:rgba(245,158,11,.2); }
/* Tile grid */
.home-tile-grid { display:grid; grid-template-columns:repeat(3,1fr); gap:16px; padding:20px 28px; }
@media(max-width:900px){.home-tile-grid{grid-template-columns:repeat(2,1fr);}}
@media(max-width:560px){.home-tile-grid{grid-template-columns:1fr;padding:12px;gap:10px;}}
/* Tile */
.home-tile { position:relative; background:var(--bg2); border:1px solid var(--silver); border-radius:16px; padding:20px; cursor:pointer; transition:transform .18s, box-shadow .18s, border-color .18s; overflow:hidden; }
.home-tile::before { content:''; position:absolute; top:0; left:0; right:0; height:3px; background:var(--tile-color,var(--teal)); border-radius:16px 16px 0 0; }
.home-tile:hover { transform:translateY(-3px); box-shadow:0 8px 28px rgba(0,0,0,.35); border-color:var(--tile-color,var(--teal)); }
.home-tile-icon { font-size:32px; margin-bottom:10px; line-height:1; }
.home-tile-label { font-family:var(--head); font-size:15px; font-weight:800; color:var(--ink); margin-bottom:3px; }
.home-tile-desc { font-size:11px; color:var(--ink-3); margin-bottom:12px; }
.home-tile-links { display:flex; flex-wrap:wrap; gap:4px; margin-bottom:12px; }
.home-tile-link { padding:3px 10px; border-radius:999px; border:1px solid var(--silver); background:var(--bg3); color:var(--ink-5); font-size:10px; font-weight:600; cursor:pointer; transition:all .12s; }
.home-tile-link:hover { background:var(--tile-color,var(--teal)); border-color:transparent; color:#fff; }
.home-tile-status { min-height:22px; display:flex; flex-wrap:wrap; gap:4px; }
.home-tile-skel { height:20px; width:120px; border-radius:999px; background:var(--bg3); animation:skel-pulse 1.4s ease infinite; }
.home-status-badge { display:inline-flex; align-items:center; padding:3px 9px; border-radius:999px; font-size:10px; font-weight:700; }
.home-tile-fav { position:absolute; top:14px; right:14px; font-size:16px; background:none; border:none; color:var(--ink-3); cursor:pointer; opacity:0; transition:opacity .15s, color .15s; padding:2px; }
.home-tile:hover .home-tile-fav { opacity:1; }
.home-tile-fav.active { opacity:1; color:#f59e0b; }
/* Bottom row */
.home-bottom { display:grid; grid-template-columns:1fr 1fr; gap:16px; padding:0 28px 28px; }
@media(max-width:680px){.home-bottom{grid-template-columns:1fr;padding:0 12px 20px;}}
.home-bottom-card { background:var(--bg2); border:1px solid var(--silver); border-radius:12px; padding:16px; }

/* ═══════════════════════════════════════════
   WORKSPACE EXPLORER PAGES v344E
   ═══════════════════════════════════════════ */

/* Breadcrumb */
.ws-breadcrumb {
  display: flex; align-items: center; gap: 6px;
  padding: 12px 28px 8px;
  font-size: 12px; color: var(--ink-3);
}
.ws-bc-link {
  cursor: pointer; color: var(--ink-3);
  transition: color .15s;
}
.ws-bc-link:hover { color: var(--teal-m); }
.ws-bc-sep { color: var(--ink-1); }
.ws-bc-current { color: var(--ink); font-weight: 600; }

/* Hero band */
.ws-hero {
  display: flex; align-items: flex-start;
  justify-content: space-between; flex-wrap: wrap; gap: 16px;
  padding: 20px 28px 16px;
  border-bottom: 1px solid var(--silver);
  background: linear-gradient(135deg,
    rgba(var(--ws-color-rgb, 20,184,166), .06) 0%,
    transparent 60%);
  position: relative;
  overflow: hidden;
}
.ws-hero::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--ws-color, var(--teal));
}
.ws-hero-left {
  display: flex; align-items: center; gap: 14px;
}
.ws-hero-icon {
  font-size: 40px; line-height: 1;
  filter: drop-shadow(0 2px 8px rgba(0,0,0,.3));
}
.ws-hero-label {
  font-family: var(--head); font-size: 20px;
  font-weight: 800; color: var(--ink);
}
.ws-hero-desc {
  font-size: 12px; color: var(--ink-3); margin-top: 2px;
}
.ws-hero-metrics {
  display: flex; gap: 4px; flex-wrap: wrap; justify-content: flex-end;
}
.ws-hero-kpi {
  background: var(--bg2); border: 1px solid var(--silver);
  border-radius: 12px; padding: 12px 16px; min-width: 100px;
  text-align: center;
}
.ws-kpi-value {
  font-family: var(--head); font-size: 22px;
  font-weight: 800; color: var(--ink); line-height: 1.1;
}
.ws-kpi-label {
  font-size: 10px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .06em;
  margin-top: 3px;
}
.ws-kpi-sub   { font-size: 10px; color: var(--ink-3); margin-top: 2px; }
.ws-kpi-alert { font-size: 11px; margin-top: 4px; }

/* Skeleton */
.ws-kpi-skel {
  background: var(--bg3);
  border-radius: 6px;
  animation: skel-pulse 1.4s ease infinite;
}
.ws-kpi-skel-val { height: 24px; width: 60px; margin: 0 auto 6px; }
.ws-kpi-skel-lbl { height: 10px; width: 50px; margin: 0 auto; }

/* Attention badges */
.ws-attention {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 10px 28px;
  min-height: 16px;
}
.ws-attn-badge {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 12px; border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11px; font-weight: 700;
}

/* Quick actions */
.ws-quick-actions {
  display: flex; flex-wrap: wrap; gap: 6px;
  padding: 6px 28px 14px;
  border-bottom: 1px solid var(--silver);
}
.ws-qa-btn {
  display: flex; align-items: center; gap: 6px;
  padding: 7px 16px; border-radius: 999px;
  border: 1.5px solid var(--silver);
  background: var(--bg2); color: var(--ink-5);
  font-size: 12px; font-weight: 600;
  cursor: pointer; transition: all .15s;
}
.ws-qa-btn:hover {
  background: var(--ws-color, var(--teal));
  border-color: var(--ws-color, var(--teal));
  color: #fff;
  transform: translateY(-1px);
  box-shadow: 0 4px 12px rgba(0,0,0,.25);
}

/* Submodule tile grid */
.ws-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 12px;
  padding: 16px 28px 32px;
}
@media (max-width: 560px) {
  .ws-tile-grid { grid-template-columns: 1fr 1fr; padding: 12px; gap: 8px; }
  .ws-hero { padding: 16px; }
  .ws-hero-metrics { justify-content: flex-start; }
  .ws-breadcrumb, .ws-quick-actions, .ws-attention { padding-left: 16px; padding-right: 16px; }
}

/* Submodule tile */
.ws-subtile {
  background: var(--bg2);
  border: 1px solid var(--silver);
  border-radius: 12px;
  padding: 16px;
  cursor: pointer;
  transition: transform .15s, box-shadow .15s, border-color .15s;
  position: relative;
  overflow: hidden;
}
.ws-subtile::after {
  content: '';
  position: absolute; inset: 0;
  background: var(--ws-color, var(--teal));
  opacity: 0;
  transition: opacity .15s;
  border-radius: 12px;
}
.ws-subtile:hover {
  transform: translateY(-2px);
  box-shadow: 0 6px 20px rgba(0,0,0,.3);
  border-color: var(--ws-color, var(--teal));
}
.ws-subtile:hover::after { opacity: .04; }
.ws-subtile-icon {
  font-size: 22px; margin-bottom: 8px; line-height: 1;
}
.ws-subtile-label {
  font-family: var(--head); font-size: 13px;
  font-weight: 700; color: var(--ink);
  margin-bottom: 3px;
}
.ws-subtile-desc {
  font-size: 11px; color: var(--ink-3); line-height: 1.4;
}
.ws-subtile-arrow {
  position: absolute; bottom: 12px; right: 14px;
  font-size: 14px; color: var(--ink-1);
  transition: color .15s, transform .15s;
}
.ws-subtile:hover .ws-subtile-arrow {
  color: var(--ws-color, var(--teal));
  transform: translateX(3px);
}

/* Home tile — updated for v344E */
.home-tile-cta {
  font-size: 11px; font-weight: 700;
  color: var(--tile-color, var(--teal));
  margin-top: 12px;
  transition: letter-spacing .15s;
}
.home-tile:hover .home-tile-cta { letter-spacing: .04em; }

/* ═══════════════════════════════════════════
   v344F VISUAL POLISH & DASHBOARD ENERGY
   ═══════════════════════════════════════════ */

/* ── Network Snapshot ──────────────────────── */
.home-snapshot-wrap {
  padding: 16px 28px 12px;
  border-bottom: 1px solid var(--silver);
  background: linear-gradient(to right, rgba(56,189,248,.04), rgba(167,139,250,.04));
}
.home-snapshot-label {
  font-size: 10px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .1em;
  margin-bottom: 12px;
}
.home-snapshot-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(130px, 1fr));
  gap: 8px;
}
.snap-kpi {
  background: var(--bg2);
  border: 1px solid var(--silver);
  border-radius: 12px;
  padding: 14px 16px;
  text-align: center;
  transition: transform .15s, box-shadow .15s;
}
.snap-kpi:hover { transform: translateY(-2px); box-shadow: 0 4px 16px rgba(0,0,0,.25); }
.snap-kpi-value {
  font-family: var(--head);
  font-size: 26px;
  font-weight: 800;
  line-height: 1;
  margin-bottom: 5px;
}
.snap-kpi-label {
  font-size: 10px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .06em;
}
.snap-kpi-sub {
  font-size: 10px; color: var(--ink-3); margin-top: 4px;
}
@media (max-width: 560px) {
  .home-snapshot-grid { grid-template-columns: repeat(3, 1fr); gap: 6px; }
  .snap-kpi { padding: 10px; }
  .snap-kpi-value { font-size: 20px; }
  .home-snapshot-wrap { padding: 12px; }
}

/* ── Alert Strip ───────────────────────────── */
.home-alert-strip {
  display: flex;
  flex-wrap: wrap;
  gap: 6px;
  padding: 10px 28px;
  border-bottom: 1px solid var(--silver);
  min-height: 42px;
  align-items: center;
}
.alert-pill {
  display: inline-flex; align-items: center; gap: 5px;
  padding: 5px 13px;
  border-radius: 999px;
  border: 1px solid transparent;
  font-size: 11px; font-weight: 700;
  cursor: pointer;
  transition: filter .15s, transform .15s;
  white-space: nowrap;
}
.alert-pill:hover { filter: brightness(1.15); transform: translateY(-1px); }
.alert-pill-skel {
  height: 28px; width: 160px; border-radius: 999px;
  background: var(--bg3);
  animation: skel-pulse 1.4s ease infinite;
}

/* ── Tiles (v344F rich metrics) ─────────────── */
.home-tile {
  position: relative;
  background: var(--bg2);
  border: 1px solid var(--silver);
  border-radius: 16px;
  padding: 18px;
  cursor: pointer;
  transition: transform .18s, box-shadow .18s, border-color .18s;
  overflow: hidden;
  display: flex; flex-direction: column; gap: 0;
}
.home-tile::before {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; height: 3px;
  background: var(--tile-color, var(--teal));
  border-radius: 16px 16px 0 0;
}
.home-tile::after {
  content: '';
  position: absolute; top: 0; left: 0; right: 0; bottom: 0;
  background: radial-gradient(ellipse at top left,
    color-mix(in srgb, var(--tile-color, var(--teal)) 8%, transparent),
    transparent 60%);
  pointer-events: none;
  border-radius: 16px;
}
.home-tile:hover {
  transform: translateY(-4px);
  box-shadow: 0 12px 32px rgba(0,0,0,.4);
  border-color: var(--tile-color, var(--teal));
}
.home-tile-top {
  display: flex; justify-content: space-between; align-items: flex-start;
  margin-bottom: 8px;
}
.home-tile-icon { font-size: 28px; line-height: 1; }
.home-tile-label {
  font-family: var(--head); font-size: 14px;
  font-weight: 800; color: var(--ink);
  margin-bottom: 10px;
}
/* Rich metrics inside tile */
.home-tile-metrics {
  display: flex; gap: 6px; flex-wrap: wrap;
  margin-bottom: 12px; flex: 1;
}
.tile-kpi {
  background: rgba(255,255,255,.04);
  border-radius: 8px;
  padding: 6px 10px;
  min-width: 52px;
  text-align: center;
}
.tile-kpi-val {
  font-family: var(--mono);
  font-size: 18px; font-weight: 700; line-height: 1;
}
.tile-kpi-lbl {
  font-size: 9px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .05em;
  margin-top: 2px;
}
.tile-metric-skel {
  height: 40px; flex: 1; min-width: 50px; border-radius: 8px;
  background: rgba(255,255,255,.04);
  animation: skel-pulse 1.4s ease infinite;
}
.tile-badge-green {
  display: inline-flex; align-items: center; gap: 4px;
  padding: 4px 10px; border-radius: 999px;
  background: rgba(34,197,94,.12); color: #22c55e;
  font-size: 11px; font-weight: 700;
}
.home-tile-cta {
  font-size: 11px; font-weight: 700;
  color: var(--tile-color, var(--teal));
  margin-top: auto; padding-top: 8px;
  display: flex; align-items: center; gap: 4px;
  transition: gap .15s;
}
.home-tile:hover .home-tile-cta { gap: 8px; }
.home-tile-fav {
  font-size: 16px; background: none; border: none;
  color: var(--ink-1); cursor: pointer;
  opacity: 0; transition: opacity .15s, color .15s;
  padding: 2px; flex-shrink: 0;
}
.home-tile:hover .home-tile-fav { opacity: 1; }
.home-tile-fav.active { opacity: 1 !important; color: #f59e0b; }

/* ── Home bottom ────────────────────────────── */
.home-bottom {
  display: grid; grid-template-columns: 1fr 1fr;
  gap: 14px; padding: 14px 28px 28px;
}
@media (max-width: 700px) {
  .home-bottom { grid-template-columns: 1fr; padding: 12px; }
  .home-alert-strip { padding: 8px 12px; }
}
.home-bottom-card {
  background: var(--bg2); border: 1px solid var(--silver);
  border-radius: 12px; padding: 16px;
}
.home-section-label {
  font-size: 11px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .08em;
  margin-bottom: 12px;
}

/* ── Activity rows ──────────────────────────── */
.activity-row {
  display: flex; align-items: center; gap: 10px;
  padding: 7px 0; border-bottom: 1px solid var(--silver);
}
.activity-row:last-child { border-bottom: none; }
.activity-icon { font-size: 16px; flex-shrink: 0; }
.activity-action {
  font-size: 12px; font-weight: 500; color: var(--ink);
  text-transform: capitalize;
}
.activity-meta { font-size: 10px; color: var(--ink-3); margin-top: 1px; }

/* ── Office attention ───────────────────────── */
.office-attn-row {
  padding: 8px 0; border-bottom: 1px solid var(--silver);
}
.office-attn-row:last-child { border-bottom: none; }
.office-attn-name {
  font-size: 12px; font-weight: 700; color: var(--ink);
  margin-bottom: 4px;
}
.office-attn-issues { display: flex; flex-wrap: wrap; gap: 4px; }
.office-attn-tag {
  font-size: 10px; font-weight: 600;
  background: rgba(255,255,255,.04);
  border-radius: 4px; padding: 2px 7px;
}

/* ── Tile grid ──────────────────────────────── */
.home-tile-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
  gap: 14px; padding: 14px 28px;
}
@media (max-width: 700px) {
  .home-tile-grid { grid-template-columns: 1fr 1fr; padding: 12px; gap: 10px; }
}
@media (max-width: 420px) {
  .home-tile-grid { grid-template-columns: 1fr; }
}

/* ── Favs ───────────────────────────────────── */
#home-favs { padding: 8px 28px; border-bottom: 1px solid var(--silver); }
.home-favs-label {
  font-size: 10px; font-weight: 700; color: var(--ink-3);
  text-transform: uppercase; letter-spacing: .08em; margin-bottom: 7px;
}
.home-fav-pill {
  padding: 4px 12px; border-radius: 999px;
  border: 1px solid rgba(245,158,11,.3);
  background: rgba(245,158,11,.08);
  color: #f59e0b; font-size: 11px; font-weight: 600;
  cursor: pointer; transition: background .15s;
  text-transform: capitalize;
}
.home-fav-pill:hover { background: rgba(245,158,11,.2); }

/* ═══════════════════════════════════════════════════════
   v344G COMMAND CENTER FINAL POLISH
   Last-mile visual energy for ClinicOS Home
   ═══════════════════════════════════════════════════════ */

#page-home{
  background:
    radial-gradient(circle at 18% 8%, rgba(20,184,166,.13), transparent 26%),
    radial-gradient(circle at 86% 4%, rgba(139,92,246,.12), transparent 24%),
    radial-gradient(circle at 76% 82%, rgba(249,115,22,.08), transparent 26%),
    var(--bg);
}
.home-header{
  position:relative;
  padding:26px 32px 18px!important;
  background:
    linear-gradient(135deg, rgba(13,148,136,.10), rgba(59,130,246,.06) 45%, rgba(139,92,246,.08)),
    var(--bg);
  overflow:hidden;
}
.home-header::after{
  content:'';
  position:absolute;right:-90px;top:-130px;width:340px;height:340px;
  background:radial-gradient(circle, rgba(45,212,191,.22), transparent 62%);
  pointer-events:none;
}
.home-greeting{
  font-size:26px!important;
  letter-spacing:-.03em;
}
.home-date{font-size:12px!important;letter-spacing:.02em;}
.home-header .btn{
  position:relative;z-index:1;border-radius:999px!important;
  background:rgba(255,255,255,.06)!important;
  border-color:rgba(148,163,184,.22)!important;
}
#home-quick-actions{
  background:linear-gradient(90deg, rgba(255,255,255,.02), rgba(20,184,166,.04));
}
.home-qa-btn{
  font-weight:800!important;
  backdrop-filter:blur(10px);
}
.home-qa-btn:hover{
  transform:translateY(-2px) scale(1.015)!important;
}
.home-snapshot-wrap{
  margin:16px 28px 6px;
  padding:18px!important;
  border-radius:24px;
  border:1px solid rgba(45,212,191,.20)!important;
  background:
    linear-gradient(135deg, rgba(15,23,42,.03), rgba(20,184,166,.08), rgba(139,92,246,.07)),
    var(--bg2)!important;
  box-shadow:0 18px 50px rgba(15,23,42,.10);
}
.home-snapshot-label{
  color:var(--ink)!important;
  font-size:12px!important;
  margin-bottom:3px!important;
}
.home-snapshot-copy{
  color:var(--ink-3);
  font-size:12px;
  margin-bottom:14px;
}
.home-snapshot-grid{
  grid-template-columns:repeat(6,minmax(120px,1fr))!important;
  gap:12px!important;
}
.command-kpi.snap-kpi{
  position:relative;
  border:1px solid color-mix(in srgb, var(--kpi-color) 30%, transparent)!important;
  border-radius:18px!important;
  padding:18px 14px 12px!important;
  text-align:left!important;
  background:
    radial-gradient(circle at 15% 10%, color-mix(in srgb, var(--kpi-color) 15%, transparent), transparent 45%),
    linear-gradient(180deg, rgba(255,255,255,.09), rgba(255,255,255,.025)),
    var(--bg2)!important;
  box-shadow:0 10px 24px rgba(0,0,0,.10);
  overflow:hidden;
  cursor:pointer;
}
.command-kpi.snap-kpi::after{
  content:'';position:absolute;left:0;right:0;bottom:0;height:4px;background:var(--kpi-color);opacity:.9;
}
.command-kpi:hover{transform:translateY(-4px)!important;box-shadow:0 20px 38px rgba(0,0,0,.18)!important;}
.snap-kpi-icon{font-size:20px;margin-bottom:12px;filter:drop-shadow(0 4px 10px rgba(0,0,0,.15));}
.command-kpi .snap-kpi-value{
  font-size:34px!important;
  letter-spacing:-.04em;
  margin-bottom:8px!important;
}
.command-kpi .snap-kpi-label{
  font-size:10px!important;color:var(--ink)!important;opacity:.9;
}
.command-kpi .snap-kpi-sub{font-size:10px!important;min-height:14px;}
.mini-spark{position:absolute;right:10px;bottom:10px;height:34px;display:flex;gap:3px;align-items:flex-end;opacity:.52;}
.mini-spark span{display:block;width:4px;border-radius:999px;background:var(--kpi-color);}
.home-alert-strip{
  margin:10px 28px 6px;
  padding:10px!important;
  border-radius:18px;
  border:1px solid rgba(148,163,184,.18)!important;
  background:rgba(255,255,255,.04);
}
.alert-pill{
  padding:9px 14px!important;
  font-size:12px!important;
  font-weight:900!important;
  box-shadow:0 6px 18px rgba(0,0,0,.08);
}
.home-tile-grid{
  grid-template-columns:repeat(auto-fill,minmax(255px,1fr))!important;
  gap:18px!important;
  padding:18px 28px!important;
}
.command-tile.home-tile{
  min-height:230px;
  padding:22px!important;
  border-radius:24px!important;
  border:1px solid color-mix(in srgb, var(--tile-color) 28%, var(--silver))!important;
  background:
    radial-gradient(circle at 18% 8%, color-mix(in srgb, var(--tile-color) 16%, transparent), transparent 38%),
    linear-gradient(180deg, rgba(255,255,255,.10), rgba(255,255,255,.035)),
    var(--bg2)!important;
  box-shadow:0 18px 40px rgba(15,23,42,.10);
}
.command-tile.home-tile::before{height:7px!important;box-shadow:0 0 22px color-mix(in srgb, var(--tile-color) 55%, transparent);}
.command-tile.home-tile:hover{
  transform:translateY(-7px) scale(1.012)!important;
  box-shadow:0 28px 64px rgba(15,23,42,.20),0 0 0 1px color-mix(in srgb, var(--tile-color) 35%, transparent)!important;
}
.command-tile .home-tile-icon{
  font-size:42px!important;
  width:58px;height:58px;display:grid;place-items:center;border-radius:18px;
  background:color-mix(in srgb, var(--tile-color) 13%, transparent);
  box-shadow:inset 0 0 0 1px color-mix(in srgb, var(--tile-color) 20%, transparent);
}
.command-tile .home-tile-label{font-size:18px!important;margin:10px 0 2px!important;letter-spacing:-.02em;}
.home-tile-desc{font-size:11px!important;color:var(--ink-3);margin-bottom:8px!important;}
.home-tile-hero{
  display:inline-flex;align-self:flex-start;margin:4px 0 13px;
  padding:5px 10px;border-radius:999px;
  color:var(--tile-color);font-size:10px;font-weight:900;letter-spacing:.06em;text-transform:uppercase;
  background:color-mix(in srgb, var(--tile-color) 12%, transparent);
}
.command-tile .home-tile-metrics{gap:8px!important;margin-bottom:12px!important;}
.command-tile .tile-kpi{
  flex:1;min-width:80px;padding:10px 12px!important;border-radius:15px!important;
  background:rgba(255,255,255,.065)!important;
  border:1px solid rgba(148,163,184,.13);
  text-align:left!important;
}
.command-tile .tile-kpi-val{font-size:25px!important;font-family:var(--head)!important;font-weight:900!important;letter-spacing:-.04em;}
.command-tile .tile-kpi-lbl{font-size:9px!important;margin-top:4px!important;}
.home-tile-pulse{height:32px;display:flex;gap:4px;align-items:flex-end;margin:2px 0 8px;opacity:.42;}
.home-tile-pulse span{display:block;width:18%;border-radius:999px;background:var(--tile-color);}
.home-tile-pulse span:nth-child(1){height:30%;}.home-tile-pulse span:nth-child(2){height:48%;}.home-tile-pulse span:nth-child(3){height:66%;}.home-tile-pulse span:nth-child(4){height:52%;}.home-tile-pulse span:nth-child(5){height:82%;}
.command-tile .home-tile-cta{
  align-self:flex-start;
  padding:9px 13px!important;
  border-radius:999px;
  background:color-mix(in srgb, var(--tile-color) 13%, transparent);
  color:var(--tile-color)!important;
  font-size:11px!important;
  font-weight:950!important;
  gap:8px!important;
}
.command-tile:hover .home-tile-cta{background:var(--tile-color);color:white!important;}
.home-bottom{padding-top:6px!important;}
.home-bottom-card{
  border-radius:20px!important;
  background:linear-gradient(180deg, rgba(255,255,255,.08), rgba(255,255,255,.025)),var(--bg2)!important;
  box-shadow:0 12px 32px rgba(15,23,42,.08);
}
.office-attn-row,.activity-row{padding:10px 0!important;}
.activity-icon{font-size:20px!important;}
.office-attn-name{font-size:13px!important;}
.office-attn-tag{border-radius:999px!important;padding:4px 9px!important;font-weight:800!important;}
@media(max-width:1100px){
  .home-snapshot-grid{grid-template-columns:repeat(3,1fr)!important;}
}
@media(max-width:700px){
  .home-header{padding:20px 16px 14px!important;}
  .home-greeting{font-size:22px!important;}
  .home-snapshot-wrap,.home-alert-strip{margin-left:12px;margin-right:12px;}
  .home-snapshot-grid{grid-template-columns:repeat(2,1fr)!important;}
  .command-kpi .snap-kpi-value{font-size:28px!important;}
  .home-tile-grid{grid-template-columns:1fr!important;padding:12px!important;}
  .command-tile.home-tile{min-height:210px;}
}


/* v344H Mobile Dashboard / Navigation Fixes */
#exec-custom-range[style*="display: none"], #exec-custom-range[style*="display:none"]{display:none!important;}
@media(max-width:720px){
  #page-exec-dashboard{padding:16px 14px 80px!important;overflow-x:hidden!important;}
  #page-exec-dashboard > div:first-child{display:block!important;margin-bottom:12px!important;}
  #page-exec-dashboard h2{font-size:24px!important;line-height:1.15!important;margin:0 0 14px!important;}
  #page-exec-dashboard #exec-period-label{display:inline-block!important;margin-left:6px!important;font-size:15px!important;}
  #page-exec-dashboard select,#page-exec-dashboard input[type="date"]{min-width:0!important;width:100%!important;height:46px!important;font-size:16px!important;border-radius:14px!important;}
  #page-exec-dashboard .btn{min-height:44px!important;border-radius:14px!important;font-size:15px!important;}
  #page-exec-dashboard .exec-dashboard-v344b{display:block!important;width:100%!important;}
  #page-exec-dashboard .exec-widget{display:block!important;width:100%!important;margin:0 0 12px!important;grid-column:1/-1!important;}
  #page-exec-dashboard .exec-error{white-space:normal!important;word-break:break-word!important;line-height:1.45!important;font-size:13px!important;}
}

/* ═══════════════════════════════════════════
   v344I WIDGET ISOLATION ERROR STATES
   ═══════════════════════════════════════════ */
.exec-widget-error {
  display: flex; align-items: center; gap: 10px;
  padding: 14px; border-radius: var(--r);
  background: rgba(245,158,11,.08);
  border: 1px solid rgba(245,158,11,.2);
  font-size: 12px; color: var(--amber);
}
.exec-widget-error div { flex: 1; }

/* ══════════════════════════════════════
   v344KM ADDITIONS
   ══════════════════════════════════════ */

/* PIN dots */
.pin-dot {
  width: 16px; height: 16px;
  border-radius: 50%;
  border: 2px solid var(--ink-3);
  background: transparent;
  transition: background .15s, border-color .15s;
}
.pin-dot.filled {
  background: var(--teal);
  border-color: var(--teal);
}

/* Commission mobile cards */
.comm-item-card {
  background: var(--bg2);
  border: 1px solid var(--silver);
  border-radius: var(--r);
  padding: 12px;
  margin-bottom: 8px;
}
.comm-item-card-row {
  display: flex; justify-content: space-between; align-items: center;
  font-size: 12px; padding: 3px 0;
  border-bottom: 1px solid var(--silver);
}
.comm-item-card-row:last-child { border-bottom: none; }
.comm-item-card-label { color: var(--ink-3); }
.comm-item-card-value { font-weight: 600; color: var(--ink); }

/* My Sheets page */
.mysheet-row {
  display: grid;
  grid-template-columns: 90px 1fr 50px 50px 80px 60px 80px 90px;
  gap: 8px; align-items: center;
  padding: 10px 14px;
  border-bottom: 1px solid var(--silver);
  font-size: 12px; cursor: pointer;
  transition: background .12s;
}
.mysheet-row:hover { background: rgba(255,255,255,.04); }
.mysheet-row.header { font-weight: 700; color: var(--ink-3); cursor: default; font-size: 11px; }
@media (max-width: 700px) {
  .mysheet-row { grid-template-columns: 90px 1fr 80px 80px; }
  .mysheet-row .hide-mobile { display: none; }
}

.review-badge {
  display: inline-flex; align-items: center;
  padding: 2px 8px; border-radius: 999px;
  font-size: 10px; font-weight: 700;
}
.review-badge.pending  { background: rgba(245,158,11,.12); color: #f59e0b; }
.review-badge.reviewed { background: rgba(34,197,94,.12);  color: #22c55e; }
.review-badge.disputed { background: rgba(239,68,68,.12);  color: #ef4444; }

/* Commission date sort toggle */
.comm-sort-btn {
  background: none; border: 1px solid var(--silver);
  color: var(--ink-5); font-size: 11px; padding: 4px 10px;
  border-radius: var(--r); cursor: pointer; transition: all .15s;
}
.comm-sort-btn:hover { border-color: var(--teal); color: var(--teal); }

/* v344KR governance additions */
.review-badge.admin_verified { background: rgba(56,189,248,.12); color: #38bdf8; }

/* v345LL — stable home tiles + identity visibility */
.v345ll-home-btn{display:inline-flex!important;align-items:center!important;justify-content:center!important;gap:7px!important;border:1px solid rgba(20,184,166,.28)!important;background:linear-gradient(135deg,rgba(20,184,166,.16),rgba(37,99,235,.09))!important;color:var(--ink)!important;border-radius:999px!important;padding:9px 13px!important;font-weight:850!important;box-shadow:0 8px 20px rgba(20,184,166,.10)!important;cursor:pointer!important;}
.v345ll-home-btn:hover{transform:translateY(-1px);box-shadow:0 12px 26px rgba(20,184,166,.16)!important;}
@media(max-width:760px){.v345ll-home-btn{min-width:46px!important;min-height:46px!important;padding:9px 12px!important}.v345ll-home-btn .home-text{display:none!important}}
#sb-greeting,#sb-greeting-name,.sb-uname,.sb-urole{color:rgba(255,255,255,.88)!important}.sb-uname{color:#fff!important;font-weight:850!important}.sb-urole{color:rgba(255,255,255,.68)!important}
.home-empty-state{padding:22px;color:var(--ink-3);font-size:14px;text-align:center;border:1px dashed var(--silver);border-radius:18px;background:rgba(255,255,255,.4)}
.home-alert-pill{display:inline-flex;align-items:center;gap:6px;border:1px solid rgba(148,163,184,.25);border-radius:999px;padding:9px 14px;font-size:13px;font-weight:850;background:rgba(255,255,255,.62);box-shadow:0 8px 20px rgba(15,23,42,.05);margin:4px 6px 4px 0;white-space:nowrap}.home-alert-pill.ok{color:#22c55e}.home-alert-pill.warn{color:#d97706}
.home-kpi-card{position:relative;border-radius:24px;padding:20px 18px;min-height:142px;background:rgba(255,255,255,.78);border:1px solid rgba(148,163,184,.22);box-shadow:0 16px 36px rgba(15,23,42,.09);overflow:hidden}.home-kpi-card::after{content:'';position:absolute;left:0;right:0;bottom:0;height:7px;background:currentColor;opacity:.7}.home-kpi-card .kpi-ico{font-size:26px;opacity:.75}.home-kpi-card .kpi-num{font-size:34px;font-weight:950;letter-spacing:-.04em;margin-top:8px;color:currentColor}.home-kpi-card .kpi-label{font-size:12px;font-weight:950;text-transform:uppercase;letter-spacing:.04em;color:var(--ink)}.home-kpi-card .kpi-sub{font-size:12px;color:var(--ink-3);margin-top:5px}.home-kpi-card.blue{color:#38bdf8}.home-kpi-card.green{color:#22c55e}.home-kpi-card.purple{color:#8b5cf6}.home-kpi-card.pink{color:#ec4899}.home-kpi-card.teal{color:#14b8a6}.home-kpi-card.amber{color:#f59e0b}
.command-tile.home-tile{appearance:none;text-align:left;border:1px solid rgba(148,163,184,.22)!important;background:linear-gradient(135deg, color-mix(in srgb, var(--tile-color) 10%, white), rgba(255,255,255,.86))!important;border-radius:26px!important;padding:24px!important;min-height:228px!important;box-shadow:0 18px 46px rgba(15,23,42,.10)!important;overflow:hidden!important;position:relative!important;color:var(--ink)!important}.command-tile.home-tile::before{height:7px!important;background:var(--tile-color)!important;box-shadow:0 0 22px color-mix(in srgb, var(--tile-color) 55%, transparent)!important}.command-tile.home-tile:hover{transform:translateY(-4px)!important;border-color:var(--tile-color)!important;box-shadow:0 24px 58px rgba(15,23,42,.16)!important}.home-tile-top{display:flex;align-items:center;gap:10px}.command-tile .home-tile-icon{width:62px;height:62px;display:flex;align-items:center;justify-content:center;border-radius:22px;font-size:30px!important;background:color-mix(in srgb,var(--tile-color) 18%, white);border:1px solid color-mix(in srgb,var(--tile-color) 28%, transparent)}.command-tile .home-tile-label{font-size:22px!important;font-weight:950!important;line-height:1.05!important;margin:18px 0 6px!important;color:var(--ink)!important}.command-tile .home-tile-desc{font-size:13px!important;color:var(--ink-3)!important;margin:0 0 12px!important}.home-tile-hero{display:inline-flex;align-items:center;border-radius:999px;padding:7px 13px;background:color-mix(in srgb,var(--tile-color) 13%, white);color:var(--tile-color);font-weight:950;font-size:11px;text-transform:uppercase;letter-spacing:.06em;margin-bottom:14px}.command-tile .home-tile-metrics{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-bottom:12px}.command-tile .home-tile-metrics span{border:1px solid rgba(148,163,184,.16);border-radius:16px;background:rgba(255,255,255,.68);padding:10px 12px;display:flex;flex-direction:column;gap:2px}.command-tile .home-tile-metrics strong{font-size:24px;font-weight:950;color:var(--tile-color)}.command-tile .home-tile-metrics small{font-size:10px;font-weight:900;text-transform:uppercase;color:var(--ink-3);letter-spacing:.05em}.home-tile-pulse{height:30px;display:flex;gap:5px;align-items:flex-end;margin:4px 0 12px;opacity:.35}.home-tile-pulse span{display:block;width:18%;border-radius:999px;background:var(--tile-color)}.home-tile-pulse span:nth-child(1){height:30%}.home-tile-pulse span:nth-child(2){height:48%}.home-tile-pulse span:nth-child(3){height:66%}.home-tile-pulse span:nth-child(4){height:52%}.home-tile-pulse span:nth-child(5){height:82%}.command-tile .home-tile-cta{display:inline-flex;align-items:center;gap:6px;border-radius:999px;background:color-mix(in srgb,var(--tile-color) 13%, white);color:var(--tile-color);padding:11px 16px;font-weight:950;font-size:13px}.command-tile:hover .home-tile-cta{background:var(--tile-color);color:white!important}.command-tile .home-tile-fav{position:absolute;right:20px;top:20px;opacity:.25;background:transparent;border:none;font-size:20px}.home-tile-grid{display:grid!important;grid-template-columns:repeat(auto-fit,minmax(245px,1fr))!important;gap:18px!important;padding:22px 28px!important}.home-snapshot-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important;}
@media(max-width:760px){.home-tile-grid{grid-template-columns:1fr!important;padding:14px!important;gap:14px!important}.command-tile.home-tile{min-height:210px!important;padding:20px!important}.home-snapshot-grid{grid-template-columns:1fr 1fr!important;gap:12px!important}.home-kpi-card{min-height:126px;padding:16px 14px}.home-kpi-card .kpi-num{font-size:28px}}

/* v346F Phase 3 — read-only local patient UID badge */
.pt-uid-wrap {
  min-width: 118px;
  max-width: 140px;
  padding: 4px 8px;
  border: 1px dashed var(--silver);
  border-radius: var(--r-s);
  background: color-mix(in srgb, var(--bg2) 82%, transparent);
  display: flex;
  flex-direction: column;
  gap: 1px;
}
.pt-uid-label {
  font-size: 9px;
  font-weight: 700;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--ink-3);
}
.pt-uid-status {
  font-size: 10px;
  font-weight: 700;
  line-height: 1.05;
}
.pt-uid-status.ok { color: var(--green); }
.pt-uid-status.new { color: var(--blue); }
.pt-uid-status.pending { color: var(--ink-3); }
.pt-uid-status.resolving { color: var(--amber); }
.pt-uid-status.locked { color: var(--red); }
.pt-uid-value {
  font-family: var(--mono);
  font-size: 10px;
  color: var(--ink-3);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* v346F Phase 3 — Day Sheet UI modernization: time, actions, patient identity */
#page-daysheet .ds-header{
  align-items:stretch!important;
  gap:14px!important;
  padding:14px!important;
  margin-bottom:18px!important;
  border:1px solid var(--silver)!important;
  border-radius:18px!important;
  background:linear-gradient(135deg, color-mix(in srgb, var(--bg2) 92%, transparent), color-mix(in srgb, var(--bg3) 88%, transparent))!important;
  box-shadow:0 12px 34px rgba(15,23,42,.06)!important;
}
#page-daysheet .ds-header .field{
  min-width:210px!important;
}
#page-daysheet .ds-header .field label{
  font-size:11px!important;
  letter-spacing:.08em!important;
  color:var(--ink-3)!important;
}
#page-daysheet .ds-header input,
#page-daysheet .ds-header select{
  min-height:48px!important;
  border-radius:15px!important;
  font-size:18px!important;
  padding:0 18px!important;
  background:var(--bg2)!important;
  border:1.5px solid var(--silver)!important;
  box-shadow:inset 0 1px 0 rgba(255,255,255,.05)!important;
}
.ds-load-actions{display:flex;align-items:flex-end;gap:10px;}
.ds-load-actions .btn{min-height:48px!important;border-radius:15px!important;padding:0 18px!important;}
.ds-system-time{
  margin-left:auto;
  min-width:230px;
  padding:9px 14px;
  border-radius:15px;
  border:1px solid rgba(20,184,166,.25);
  background:linear-gradient(135deg, rgba(20,184,166,.10), rgba(37,99,235,.06));
  display:flex;
  flex-direction:column;
  justify-content:center;
  gap:2px;
}
.ds-system-time-label{
  font-size:10px;
  font-weight:800;
  text-transform:uppercase;
  letter-spacing:.08em;
  color:var(--ink-3);
}
#ds-system-time-value{
  font-family:var(--mono);
  font-size:14px;
  font-weight:800;
  color:var(--ink);
  white-space:nowrap;
}
#page-daysheet .ds-status-bar{
  padding:14px 16px!important;
  border-radius:18px!important;
  background:var(--bg2)!important;
  border:1px solid var(--silver)!important;
  box-shadow:0 10px 28px rgba(15,23,42,.05)!important;
}
#page-daysheet #ds-action-btns{
  gap:9px!important;
  align-items:center!important;
}
#page-daysheet #ds-action-btns .btn,
#page-daysheet .ds-save-btns .btn{
  min-height:40px!important;
  border-radius:999px!important;
  padding:8px 15px!important;
  font-size:13px!important;
  box-shadow:0 6px 14px rgba(15,23,42,.06)!important;
}
#page-daysheet .patient-block{
  border-radius:22px!important;
  overflow:hidden!important;
  border:1px solid rgba(148,163,184,.28)!important;
  box-shadow:0 12px 30px rgba(15,23,42,.06)!important;
  margin-bottom:18px!important;
}
#page-daysheet .patient-header-row.patient-header-modern{
  display:grid!important;
  grid-template-columns:44px minmax(0,1fr) 38px!important;
  gap:14px!important;
  align-items:start!important;
  padding:16px!important;
  background:linear-gradient(135deg, color-mix(in srgb, var(--bg3) 92%, transparent), color-mix(in srgb, var(--bg2) 92%, transparent))!important;
}
#page-daysheet .patient-num{
  width:38px!important;
  height:38px!important;
  font-size:16px!important;
  box-shadow:0 8px 20px rgba(20,184,166,.22)!important;
}
#page-daysheet .patient-identity-grid{
  display:grid;
  grid-template-columns:minmax(220px,1.5fr) minmax(145px,.75fr) minmax(150px,.8fr) minmax(130px,.7fr) minmax(180px,1fr) minmax(130px,.65fr);
  gap:12px;
  align-items:end;
}
#page-daysheet .pt-name-wrap,
#page-daysheet .pt-field{
  max-width:none!important;
  min-width:0!important;
  width:100%!important;
}
#page-daysheet .pt-name-label,
#page-daysheet .pt-field label,
#page-daysheet .pt-uid-label{
  font-size:10px!important;
  letter-spacing:.08em!important;
  margin-bottom:5px!important;
  color:var(--ink-3)!important;
}
#page-daysheet .pt-name,
#page-daysheet .pt-field input,
#page-daysheet .pt-field select{
  height:46px!important;
  min-height:46px!important;
  border-radius:15px!important;
  padding:0 14px!important;
  font-size:15px!important;
  background:var(--bg2)!important;
  border:1.5px solid var(--silver)!important;
  width:100%!important;
}
#page-daysheet .pt-name:focus,
#page-daysheet .pt-field input:focus,
#page-daysheet .pt-field select:focus{
  border-color:var(--teal)!important;
  box-shadow:0 0 0 4px rgba(20,184,166,.10)!important;
}
#page-daysheet .pt-dob,
#page-daysheet .pt-od-chart{
  font-family:var(--mono)!important;
}
#page-daysheet .pt-uid-wrap{
  min-height:46px!important;
  max-width:none!important;
  min-width:0!important;
  padding:7px 12px!important;
  border-radius:15px!important;
  border:1.5px dashed rgba(20,184,166,.42)!important;
  background:linear-gradient(135deg, rgba(20,184,166,.10), rgba(37,99,235,.05))!important;
  justify-content:center!important;
}
#page-daysheet .pt-uid-status{
  font-size:11px!important;
}
#page-daysheet .pt-uid-value{
  font-size:11px!important;
  max-width:100%!important;
}
#page-daysheet .patient-del-btn{
  width:34px!important;
  height:34px!important;
  border-radius:12px!important;
  margin-left:0!important;
  align-self:center!important;
}
#page-daysheet .proc-table th{
  font-size:10px!important;
  padding:10px 8px!important;
  background:color-mix(in srgb, var(--bg3) 88%, transparent)!important;
}
#page-daysheet .proc-table td{
  padding:8px 6px!important;
}
#page-daysheet .proc-footer{
  padding:12px 16px 16px!important;
  display:flex!important;
  gap:10px!important;
  align-items:center!important;
  flex-wrap:wrap!important;
}
@media(max-width:1180px){
  #page-daysheet .patient-identity-grid{grid-template-columns:minmax(240px,1fr) minmax(145px,.6fr) minmax(150px,.7fr);}
}
@media(max-width:760px){
  #page-daysheet .ds-header{display:grid!important;grid-template-columns:1fr!important;}
  .ds-system-time{margin-left:0;min-width:0;}
  #page-daysheet .patient-header-row.patient-header-modern{grid-template-columns:38px minmax(0,1fr)!important;}
  #page-daysheet .patient-del-btn{grid-column:2;justify-self:end;}
  #page-daysheet .patient-identity-grid{grid-template-columns:1fr!important;}
}


/* v346F Phase 3B — Day Sheet polish: compact 2026 actions + all-row insurance affordance */
#page-daysheet .ds-status-bar{
  display:flex!important;
  align-items:center!important;
  gap:10px!important;
}
#page-daysheet #ds-action-btns{
  display:flex!important;
  align-items:center!important;
  justify-content:flex-end!important;
  gap:6px!important;
  flex-wrap:nowrap!important;
  min-width:0!important;
  overflow-x:auto!important;
  scrollbar-width:thin;
}
#page-daysheet #ds-action-btns .btn{
  height:34px!important;
  min-height:34px!important;
  padding:0 11px!important;
  border-radius:12px!important;
  font-size:12px!important;
  font-weight:800!important;
  line-height:1!important;
  white-space:nowrap!important;
  box-shadow:none!important;
  border:1px solid color-mix(in srgb, var(--silver) 72%, transparent)!important;
}
#page-daysheet #ds-action-btns .btn.btn-primary{
  background:linear-gradient(135deg, var(--teal), #2563eb)!important;
  color:#fff!important;
  border-color:transparent!important;
}
#page-daysheet #ds-action-btns .btn:hover{
  transform:translateY(-1px);
  box-shadow:0 8px 18px rgba(15,23,42,.10)!important;
}
#page-daysheet .ds-save-btns{
  justify-content:flex-end!important;
  gap:8px!important;
}
#page-daysheet .ds-save-btns .btn{
  height:34px!important;
  min-height:34px!important;
  border-radius:12px!important;
  padding:0 12px!important;
  font-size:12px!important;
  font-weight:800!important;
  box-shadow:none!important;
}
#page-daysheet .patient-identity-grid{
  grid-template-columns:minmax(240px,1.4fr) minmax(145px,.65fr) minmax(150px,.75fr) minmax(150px,.8fr) minmax(180px,1fr) minmax(125px,.6fr)!important;
}
#page-daysheet .pt-uid-wrap{
  overflow:hidden!important;
}
#page-daysheet .pt-uid-value{
  max-width:128px!important;
}
#page-daysheet .ins-add-card-btn{
  display:block!important;
  height:26px!important;
  border-radius:10px!important;
  font-size:10px!important;
  font-weight:800!important;
  background:rgba(20,184,166,.08)!important;
}
#page-daysheet .ins-extra{
  border-left:2px solid rgba(20,184,166,.28);
  padding-left:6px;
}
@media(max-width:1120px){
  #page-daysheet #ds-action-btns{width:100%;justify-content:flex-start!important;margin-top:8px;}
  #page-daysheet .ds-status-bar{align-items:flex-start!important;}
}

/* v346F Phase 3C — actual Day Sheet build patch: insurance above discount/lab, receipt preview, summaries, expense wrapping */
#page-daysheet .proc-body{display:flex!important;flex-direction:column!important;gap:12px!important;}
#page-daysheet .ds-proc-modern{display:block!important;border:1px solid rgba(148,163,184,.28)!important;border-radius:18px!important;background:var(--bg2)!important;padding:14px!important;box-shadow:0 8px 22px rgba(15,23,42,.045)!important;overflow:visible!important;}
#page-daysheet .ds-proc-grid{display:grid!important;grid-template-columns:minmax(220px,2fr) 90px 105px 105px 105px 105px 105px 34px!important;gap:10px!important;align-items:end!important;border-bottom:0!important;padding:0!important;}
#page-daysheet .ds-field{display:flex!important;flex-direction:column!important;gap:5px!important;min-width:0!important;}
#page-daysheet .ds-field label,#page-daysheet .ds-section-label{font-size:10px!important;font-weight:850!important;text-transform:uppercase!important;letter-spacing:.055em!important;color:var(--ink-3)!important;}
#page-daysheet .ds-field input,#page-daysheet .ds-field select,#page-daysheet .ds-insurance-row input,#page-daysheet .ds-insurance-row select{height:38px!important;min-height:38px!important;border-radius:11px!important;border:1px solid var(--silver)!important;background:var(--bg2)!important;color:var(--ink)!important;padding:0 10px!important;font-size:13px!important;width:100%!important;box-sizing:border-box!important;}
#page-daysheet .ds-balance input{font-weight:900!important;color:var(--amber)!important;background:rgba(245,158,11,.06)!important;}
#page-daysheet .ds-proc-remove{height:38px!important;width:34px!important;align-self:end!important;border-color:rgba(239,68,68,.24)!important;color:var(--red)!important;}
#page-daysheet .ds-insurance-row{display:grid!important;grid-template-columns:minmax(0,1fr) 370px!important;gap:14px!important;align-items:start!important;margin-top:12px!important;padding:12px!important;border:1px solid rgba(20,184,166,.18)!important;border-radius:16px!important;background:linear-gradient(135deg,rgba(20,184,166,.055),rgba(37,99,235,.025))!important;}
#page-daysheet .ds-insurance-head{grid-column:2!important;display:grid!important;grid-template-columns:80px minmax(115px,1fr) auto!important;gap:8px!important;align-items:center!important;align-self:start!important;}
#page-daysheet .ds-insurance-head .pr-ins-count{height:34px!important;min-height:34px!important;}
#page-daysheet .ds-insurance-head .ins-add-card-btn{height:34px!important;min-height:34px!important;white-space:nowrap!important;}
#page-daysheet .ds-insurance-cards{grid-column:1 / 2!important;display:grid!important;grid-template-columns:repeat(3,minmax(180px,1fr))!important;gap:10px!important;}
#page-daysheet .ins-card-slot{position:relative!important;border:1px solid rgba(148,163,184,.25)!important;border-radius:14px!important;background:rgba(255,255,255,.62)!important;padding:10px!important;min-height:110px!important;}
#page-daysheet .ins-card-title{font-weight:900!important;font-size:12px!important;margin-bottom:8px!important;color:var(--ink)!important;}
#page-daysheet .ins-card-amounts{display:grid!important;grid-template-columns:1fr 1fr!important;gap:8px!important;margin-top:8px!important;}
#page-daysheet .ins-card-amounts.one{grid-template-columns:1fr!important;}
#page-daysheet .ins-card-amounts label{font-size:10px!important;font-weight:800!important;text-transform:uppercase!important;color:var(--ink-3)!important;display:flex!important;flex-direction:column!important;gap:4px!important;}
#page-daysheet .ins-card-remove{position:absolute!important;right:8px!important;top:8px!important;border:1px solid rgba(239,68,68,.20)!important;background:rgba(239,68,68,.06)!important;color:var(--red)!important;border-radius:999px!important;width:22px!important;height:22px!important;line-height:18px!important;cursor:pointer!important;}
#page-daysheet .ds-adjustment-row{display:grid!important;grid-template-columns:130px 130px 135px 180px minmax(260px,1fr)!important;gap:10px!important;align-items:end!important;margin-top:12px!important;padding-top:12px!important;border-top:1px solid rgba(148,163,184,.18)!important;background:transparent!important;}
#page-daysheet .ds-lab-link{align-self:end!important;height:38px!important;display:flex!important;align-items:center!important;}
#page-daysheet .link-btn{border:0!important;background:transparent!important;color:var(--teal)!important;font-weight:800!important;cursor:pointer!important;font-size:12px!important;}
#page-daysheet .ds-commission{height:38px!important;display:flex!important;align-items:center!important;justify-content:center!important;gap:8px!important;border:1px solid rgba(148,163,184,.28)!important;border-radius:12px!important;background:rgba(255,255,255,.45)!important;font-weight:850!important;color:var(--ink)!important;}
#page-daysheet .ds-commission input{accent-color:var(--teal)!important;width:16px!important;height:16px!important;}
#page-daysheet .ds-notes input{height:38px!important;}
#page-daysheet input[type=number]::-webkit-outer-spin-button,#page-daysheet input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none!important;margin:0!important;}
#page-daysheet input[type=number]{-moz-appearance:textfield!important;appearance:textfield!important;}
#page-daysheet .proc-footer .btn[onclick*="printPatientReceiptFromBlock"],#page-daysheet button[onclick*="printPatientReceiptFromBlock"]{height:38px!important;min-height:38px!important;padding:0 16px!important;border-radius:12px!important;font-size:13px!important;font-weight:850!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;}
#receipt-modal{align-items:flex-start!important;justify-content:center!important;padding-top:28px!important;}
#receipt-modal>div{max-width:620px!important;width:fit-content!important;min-width:420px!important;border-radius:16px!important;box-shadow:0 24px 70px rgba(0,0,0,.34)!important;}
#receipt-modal .receipt-modal-chrome{padding:16px 18px!important;}
#receipt-modal .receipt-modal-chrome span{font-size:20px!important;}
#receipt-modal .receipt-modal-chrome button,#receipt-modal .receipt-modal-chrome select{height:40px!important;border-radius:10px!important;font-size:14px!important;padding:0 14px!important;}
#receipt-modal #receipt-print-root{padding:18px 26px!important;}
#receipt-modal .receipt-body.receipt-ultra{font-size:13px!important;line-height:1.18!important;padding:5mm 4mm!important;}
#receipt-modal .receipt-body.receipt-ultra.r-58mm{font-size:11px!important;line-height:1.12!important;}
#receipt-modal .receipt-body.receipt-ultra.r-a5{font-size:13px!important;line-height:1.18!important;}
#page-daysheet #exp-rows tr{display:grid!important;grid-template-columns:minmax(160px,1fr) minmax(120px,.7fr) minmax(230px,1.8fr) minmax(170px,1.2fr) minmax(140px,.9fr) minmax(150px,.9fr) 44px!important;gap:10px!important;align-items:end!important;padding:10px!important;border:1px solid rgba(148,163,184,.20)!important;border-radius:14px!important;background:var(--bg2)!important;margin-bottom:8px!important;}
#page-daysheet #exp-rows td{display:block!important;padding:0!important;border:0!important;min-width:0!important;}
#page-daysheet #exp-rows select,#page-daysheet #exp-rows input{width:100%!important;height:38px!important;border-radius:11px!important;box-sizing:border-box!important;}
#page-daysheet #exp-rows .del-btn{width:38px!important;height:38px!important;border-radius:11px!important;}
#page-daysheet .summary-grid,#page-daysheet .totals-grid,#page-daysheet .day-summary-grid{overflow:visible!important;}
#page-daysheet [id="tot-gross"]{font-size:22px!important;font-weight:950!important;}
@media(max-width:1280px){#page-daysheet .ds-proc-grid{grid-template-columns:minmax(240px,1.7fr) repeat(3,minmax(90px,1fr))!important;}#page-daysheet .ds-insurance-row{grid-template-columns:1fr!important;}#page-daysheet .ds-insurance-head,#page-daysheet .ds-insurance-cards{grid-column:1!important;}#page-daysheet .ds-insurance-cards{grid-template-columns:1fr 1fr!important;}#page-daysheet .ds-adjustment-row{grid-template-columns:1fr 1fr 1fr!important;}#page-daysheet .ds-notes{grid-column:1 / -1!important;}}
@media(max-width:900px){#page-daysheet .ds-proc-grid,#page-daysheet .ds-adjustment-row,#page-daysheet #exp-rows tr{grid-template-columns:1fr!important;}#page-daysheet .ds-insurance-cards{grid-template-columns:1fr!important;}#receipt-modal>div{min-width:0!important;width:96vw!important;max-width:96vw!important;}#receipt-modal #receipt-print-root{padding:12px!important;}}
#page-daysheet .ds-totals{
  display:grid!important;
  grid-template-columns:repeat(5,minmax(120px,1fr))!important;
  gap:8px!important;
  overflow:visible!important;
  align-items:stretch!important;
}
#page-daysheet .ds-totals .ds-total-item{
  min-height:64px!important;
  padding:12px 10px!important;
  border-radius:14px!important;
  box-sizing:border-box!important;
}
#page-daysheet .ds-totals .ds-total-item .label{
  white-space:normal!important;
  line-height:1.15!important;
}
#page-daysheet .ds-totals .ds-total-item .value{
  font-size:16px!important;
  font-weight:900!important;
}
#page-daysheet .ds-totals .ds-total-item:nth-child(2) .value{
  font-size:18px!important;
  font-weight:950!important;
  color:var(--ink)!important;
}
@media(max-width:1280px){
  #page-daysheet .ds-totals{grid-template-columns:repeat(4,minmax(120px,1fr))!important;}
}
@media(max-width:900px){
  #page-daysheet .ds-totals{grid-template-columns:repeat(2,minmax(130px,1fr))!important;}
}
@media(max-width:520px){
  #page-daysheet .ds-totals{grid-template-columns:1fr!important;}
}

/* v346F Phase 3D — targeted rollback/polish per Aj: keep procedure + summary, fix patient line + expenses */
#page-daysheet .patient-header-row{
  display:grid!important;
  grid-template-columns:42px minmax(0,1fr) 38px!important;
  gap:12px!important;
  align-items:end!important;
  flex-wrap:nowrap!important;
  padding:14px 16px!important;
}
#page-daysheet .patient-identity-grid{
  display:grid!important;
  grid-template-columns:minmax(210px,1.45fr) minmax(135px,.8fr) minmax(145px,.85fr) minmax(145px,.85fr) minmax(145px,.8fr) minmax(190px,1.05fr)!important;
  gap:10px!important;
  align-items:end!important;
  width:100%!important;
  min-width:0!important;
}
#page-daysheet .pt-name-wrap,
#page-daysheet .pt-field,
#page-daysheet .pt-uid-wrap{
  min-width:0!important;
  width:100%!important;
}
#page-daysheet .pt-name,
#page-daysheet .pt-field input,
#page-daysheet .pt-field select,
#page-daysheet .pt-uid-badge{
  height:40px!important;
  min-height:40px!important;
  border-radius:12px!important;
  font-size:13px!important;
}
#page-daysheet .pt-uid-wrap{
  padding:0!important;
  border:none!important;
  background:transparent!important;
  min-height:auto!important;
  display:flex!important;
  flex-direction:column!important;
  gap:5px!important;
}
#page-daysheet .pt-uid-badge{
  border:1.5px dashed rgba(20,184,166,.42)!important;
  background:linear-gradient(135deg,rgba(20,184,166,.09),rgba(37,99,235,.04))!important;
  display:flex!important;
  align-items:center!important;
  gap:8px!important;
  padding:0 10px!important;
  overflow:hidden!important;
}
#page-daysheet .pt-uid-value{
  min-width:0!important;
  overflow:hidden!important;
  text-overflow:ellipsis!important;
  white-space:nowrap!important;
}
#page-daysheet .patient-del-btn{
  align-self:end!important;
  margin-bottom:0!important;
}

/* Expense rows: no horizontal scrollbar; let the section get taller instead of wider */
#page-daysheet .expenses-table-wrap{
  overflow-x:visible!important;
  width:100%!important;
}
#page-daysheet .exp-table{
  display:block!important;
  width:100%!important;
  min-width:0!important;
  table-layout:fixed!important;
}
#page-daysheet .exp-table thead,
#page-daysheet .exp-table tbody{
  display:block!important;
  width:100%!important;
}
#page-daysheet .exp-table thead tr{
  display:grid!important;
  grid-template-columns:minmax(130px,1fr) minmax(105px,.7fr) minmax(190px,1.5fr) minmax(135px,1fr) minmax(115px,.85fr) minmax(125px,.9fr) 40px!important;
  gap:10px!important;
  align-items:end!important;
  padding:0 10px 8px!important;
}
#page-daysheet .exp-table th{
  width:auto!important;
  min-width:0!important;
  padding:0!important;
  border:0!important;
  white-space:normal!important;
}
#page-daysheet #exp-rows tr{
  width:100%!important;
  min-width:0!important;
  grid-template-columns:minmax(130px,1fr) minmax(105px,.7fr) minmax(190px,1.5fr) minmax(135px,1fr) minmax(115px,.85fr) minmax(125px,.9fr) 40px!important;
}
#page-daysheet #exp-rows td{
  min-width:0!important;
  width:auto!important;
}
#page-daysheet #exp-rows select,
#page-daysheet #exp-rows input{
  min-width:0!important;
}
@media(max-width:1160px){
  #page-daysheet .patient-identity-grid{
    grid-template-columns:minmax(200px,1.4fr) minmax(130px,.8fr) minmax(140px,.85fr) minmax(140px,.85fr) minmax(140px,.8fr) minmax(175px,1fr)!important;
    gap:8px!important;
  }
  #page-daysheet .pt-name,
  #page-daysheet .pt-field input,
  #page-daysheet .pt-field select,
  #page-daysheet .pt-uid-badge{
    font-size:12px!important;
    padding-left:9px!important;
    padding-right:9px!important;
  }
  #page-daysheet .exp-table thead tr,
  #page-daysheet #exp-rows tr{
    grid-template-columns:1fr 110px 1.4fr 1fr 115px 120px 38px!important;
    gap:8px!important;
  }
}
@media(max-width:980px){
  #page-daysheet .patient-header-row{
    grid-template-columns:38px minmax(0,1fr)!important;
  }
  #page-daysheet .patient-del-btn{
    grid-column:2!important;
    justify-self:end!important;
  }
  #page-daysheet .patient-identity-grid{
    grid-template-columns:1fr 1fr!important;
  }
  #page-daysheet .exp-table thead{display:none!important;}
  #page-daysheet #exp-rows tr{
    grid-template-columns:1fr 1fr!important;
  }
  #page-daysheet #exp-rows td:nth-child(3){grid-column:1 / -1!important;}
}
@media(max-width:620px){
  #page-daysheet .patient-identity-grid,
  #page-daysheet #exp-rows tr{
    grid-template-columns:1fr!important;
  }
}

/* v346F surgical polish — keep layout intact, normalize controls, remove insurance count dropdown */
#page-daysheet .ds-insurance-head{
  grid-template-columns:80px auto!important;
  justify-content:end!important;
}
#page-daysheet .ds-insurance-head .pr-ins-count{display:none!important;}
#page-daysheet .ins-add-card-btn,
#page-daysheet .btn,
#page-daysheet button{
  border-radius:11px!important;
}
#page-daysheet .ds-field input,
#page-daysheet .ds-field select,
#page-daysheet input,
#page-daysheet select{
  min-height:38px;
  border-radius:11px;
  box-sizing:border-box;
}
#page-daysheet .ds-proc-name{position:relative!important;}
#page-daysheet .proc-suggest-box{
  position:absolute!important;
  z-index:9999!important;
  left:0!important;
  right:0!important;
  top:calc(100% + 6px)!important;
  max-height:260px!important;
  overflow:auto!important;
  background:var(--bg2,#fff)!important;
  border:1px solid rgba(148,163,184,.35)!important;
  border-radius:14px!important;
  box-shadow:0 18px 40px rgba(15,23,42,.16)!important;
  padding:6px!important;
}
#page-daysheet .proc-suggest-item{
  width:100%!important;
  display:flex!important;
  align-items:center!important;
  justify-content:space-between!important;
  gap:10px!important;
  border:0!important;
  background:transparent!important;
  min-height:38px!important;
  padding:8px 10px!important;
  border-radius:10px!important;
  text-align:left!important;
  cursor:pointer!important;
  font-weight:750!important;
  color:var(--ink,#111827)!important;
}
#page-daysheet .proc-suggest-item:hover,
#page-daysheet .proc-suggest-item:focus{
  background:rgba(20,184,166,.10)!important;
  outline:none!important;
}
#page-daysheet .proc-suggest-item small{
  font-size:10px!important;
  font-weight:800!important;
  color:var(--ink-3,#64748b)!important;
  text-transform:uppercase!important;
  letter-spacing:.04em!important;
}
#page-daysheet .proc-suggest-empty{
  padding:10px!important;
  color:var(--ink-3,#64748b)!important;
  font-size:12px!important;
}
/* prevent expense row from reintroducing right-scroll while preserving existing fields */
#page-daysheet #exp-rows,
#page-daysheet .expenses-table,
#page-daysheet .expenses-wrap{
  overflow-x:visible!important;
  max-width:100%!important;
}

/* v346F targeted correction — only circled Day Sheet controls: match patient-name field height */
#page-daysheet .ds-header .field input,
#page-daysheet .ds-header .field select,
#page-daysheet .ds-load-actions .btn {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  border-radius: 12px !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  line-height: 40px !important;
  box-sizing: border-box !important;
}
#page-daysheet .ds-load-actions .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
}
#page-daysheet .ds-header,
#page-daysheet .ds-header .field,
#page-daysheet .ds-load-actions {
  align-items: flex-end !important;
}
#page-daysheet .pt-name,
#page-daysheet .pt-dob {
  height: 40px !important;
  min-height: 40px !important;
  max-height: 40px !important;
  line-height: 40px !important;
  box-sizing: border-box !important;
}
#page-daysheet .pt-name-wrap,
#page-daysheet .pt-field:has(.pt-dob) {
  align-self: end !important;
}


/* v346F S2 — Modern History page polish only */
#page-ds-history .hist-filters{
  background:var(--bg2,#fff)!important;
  border:1px solid rgba(148,163,184,.22)!important;
  border-radius:18px!important;
  padding:14px!important;
  margin:4px 0 14px!important;
  box-shadow:0 10px 28px rgba(15,23,42,.06)!important;
  display:flex!important;
  gap:10px!important;
  align-items:center!important;
}
#page-ds-history .hist-filters select,
#page-ds-history .hist-filters input{
  height:40px!important;
  border-radius:12px!important;
  border:1px solid rgba(148,163,184,.34)!important;
  background:var(--bg,#fff)!important;
  color:var(--ink,#111827)!important;
  padding:0 12px!important;
  font-size:13px!important;
  box-shadow:0 1px 2px rgba(15,23,42,.04)!important;
}
#page-ds-history .hist-filters .btn{
  height:40px!important;
  border-radius:12px!important;
  padding:0 14px!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
#page-ds-history #dsh-count{
  margin-left:auto!important;
  background:rgba(20,184,166,.10)!important;
  color:var(--teal,#0f766e)!important;
  border:1px solid rgba(20,184,166,.22)!important;
  border-radius:999px!important;
  padding:6px 10px!important;
  font-weight:800!important;
  white-space:nowrap!important;
}
#page-ds-history > .card{
  border-radius:18px!important;
  overflow:hidden!important;
  border:1px solid rgba(148,163,184,.22)!important;
  box-shadow:0 12px 32px rgba(15,23,42,.06)!important;
}
#page-ds-history .hist-row{
  grid-template-columns:96px minmax(150px,1.15fr) minmax(150px,1.25fr) 72px 100px 92px 112px minmax(190px,1.35fr)!important;
  gap:10px!important;
  padding:12px 14px!important;
  font-size:13px!important;
  border-bottom:1px solid rgba(148,163,184,.18)!important;
  background:var(--bg2,#fff)!important;
}
#page-ds-history .hist-row:hover{
  background:rgba(20,184,166,.055)!important;
}
#page-ds-history .hist-row.header{
  position:sticky!important;
  top:0!important;
  z-index:2!important;
  background:linear-gradient(180deg,rgba(248,250,252,.98),rgba(241,245,249,.98))!important;
  color:var(--ink-3,#64748b)!important;
  font-size:10px!important;
  letter-spacing:.07em!important;
  text-transform:uppercase!important;
  padding-top:13px!important;
  padding-bottom:13px!important;
  border-bottom:1px solid rgba(148,163,184,.28)!important;
}
#page-ds-history .hist-row .badge{
  border-radius:999px!important;
  padding:4px 9px!important;
  font-weight:800!important;
  display:inline-flex!important;
  align-items:center!important;
  justify-content:center!important;
}
#page-ds-history .hist-row button.btn-xs{
  min-height:30px!important;
  border-radius:10px!important;
  padding:0 9px!important;
}
#page-ds-history .hist-mono{
  font-variant-numeric:tabular-nums!important;
}
@media(max-width:1100px){
  #page-ds-history .hist-row{
    grid-template-columns:90px minmax(140px,1fr) minmax(130px,1fr) 66px 92px 86px 104px minmax(170px,1.2fr)!important;
    font-size:12px!important;
  }
}
@media(max-width:760px){
  #page-ds-history .hist-filters{align-items:stretch!important;}
  #page-ds-history .hist-filters select,
  #page-ds-history .hist-filters input,
  #page-ds-history .hist-filters .btn{flex:1 1 160px!important;}
}

/* ══════════════════════════════════════════
   v347O — PROGRESS BAR LOADER (replaces spinner overlay)
   ══════════════════════════════════════════ */
#loading {
  display: none !important; /* hide old overlay — replaced by #ws-progress-bar */
}
#ws-progress-bar {
  position: fixed; top: 0; left: 0; width: 100%; height: 3px;
  z-index: 9999; pointer-events: none;
  background: transparent;
}
#ws-progress-bar .ws-pb-track {
  height: 100%; width: 0%;
  background: linear-gradient(90deg, var(--teal), #00e5d4);
  border-radius: 0 2px 2px 0;
  transition: width .25s ease, opacity .3s ease;
  box-shadow: 0 0 8px rgba(0,191,166,.6);
}
#ws-progress-bar.ws-pb-done .ws-pb-track {
  width: 100%; opacity: 0;
  transition: width .15s ease, opacity .4s ease .15s;
}
#ws-loading-label {
  position: fixed; top: 6px; left: 50%; transform: translateX(-50%);
  font-size: 11px; font-family: var(--mono); color: var(--teal-m);
  background: var(--bg); border: 1px solid var(--border);
  border-radius: 6px; padding: 2px 10px; z-index: 9999;
  pointer-events: none; opacity: 0; transition: opacity .2s;
  white-space: nowrap;
}
#ws-loading-label.visible { opacity: 1; }

/* ══════════════════════════════════════════
   v347O — MOBILE LAYOUT FIXES
   ══════════════════════════════════════════ */
@media (max-width: 600px) {

  /* 1. Pre-Auth KPI cards — 2×2 grid instead of 1-column stack */
  #preauth-summary.grid-4 {
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  #preauth-summary .kpi-card {
    padding: 10px 8px;
  }
  #preauth-summary .kpi-value {
    font-size: 18px !important;
  }
  #preauth-summary .kpi-label {
    font-size: 10px !important;
  }


  #page-closures > div[style*="grid-template-columns:1fr 1fr"],
  #page-closures > div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* 3. Exec Report — P&L / KPIs two-column → single column */
  #mr-body div[style*="grid-template-columns:1fr 1fr"],
  #mr-body div[style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
  /* Exec report risks/wins/variances 3-col → single */
  #mr-body div[style*="grid-template-columns:1fr 1fr 1fr"],
  #mr-body div[style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* 4. Owner Collections table — hide less critical columns on mobile */
  #page-owner-collections table th:nth-child(3),
  #page-owner-collections table td:nth-child(3),
  #page-owner-collections table th:nth-child(7),
  #page-owner-collections table td:nth-child(7) {
    display: none;
  }
  /* Tighten padding in all overflow tables */
  #page-owner-collections table td,
  #page-owner-collections table th {
    padding: 4px 5px !important;
    font-size: 10px !important;
  }
  .badge {
    font-size: 9px !important;
    padding: 2px 5px !important;
  }

  /* General: inline filter bars should wrap cleanly */
  div[style*="display:flex"][style*="flex-wrap:wrap"] {
    gap: 6px !important;
  }
}

/* v347O supplement — class-based mobile overrides */
@media (max-width: 600px) {
  .two-col-stack { grid-template-columns: 1fr !important; }
}

/* ══════════════════════════════════════════
   v347O — MOBILE UI POLISH
   ══════════════════════════════════════════ */

/* 1. Pre-Auth KPI cards — compact horizontal strip instead of tall stacked blocks */
#preauth-summary.kpi-grid {
  grid-template-columns: repeat(4, 1fr) !important;
  gap: 8px !important;
}
#preauth-summary .kpi-card {
  padding: 10px 8px !important;
  display: flex; flex-direction: column; align-items: center; text-align: center;
}
#preauth-summary .kpi-icon { font-size: 16px !important; margin-bottom: 2px; }
#preauth-summary .kpi-value { font-size: 15px !important; line-height: 1.1; }
#preauth-summary .kpi-label { font-size: 9px !important; margin-bottom: 0; text-align: center; }

@media (max-width: 480px) {
  #preauth-summary.kpi-grid {
    grid-template-columns: repeat(4, 1fr) !important;
  }
  #preauth-summary .kpi-value { font-size: 14px !important; }
}

/* 2. Planned Closures — stack vertically on mobile */
@media (max-width: 700px) {
  .two-col-stack {
    grid-template-columns: 1fr !important;
  }
}

/* 3. Executive Report — Production by Clinician table: full width on mobile */
@media (max-width: 700px) {
  .exec-two-col,
  .mr-two-col {
    grid-template-columns: 1fr !important;
  }
  /* Clinician table: show all columns stacked, hide "COLLECTED" header compression */
  .exec-clinician-table td,
  .exec-clinician-table th {
    padding: 4px 5px !important;
    font-size: 10px !important;
  }
}

/* 4. Owner Collections — filter row stacks cleanly on mobile */
@media (max-width: 600px) {
  #page-owner-collections .ocl-filters {
    flex-direction: column !important;
    align-items: stretch !important;
  }
  #page-owner-collections .ocl-filters .field {
    width: 100% !important;
  }
  #page-owner-collections .ocl-filters button {
    width: 100% !important;
    margin-top: 4px;
  }
  /* Slim the 8-col table: hide Deposit Date and Source on mobile */
  #page-owner-collections table th:nth-child(5),
  #page-owner-collections table td:nth-child(5),
  #page-owner-collections table th:nth-child(7),
  #page-owner-collections table td:nth-child(7) {
    display: none;
  }
  #page-owner-collections table td,
  #page-owner-collections table th {
    padding: 4px 5px !important;
    font-size: 10px !important;
  }
}

/* ── Monthly Report: wide tables scroll horizontally, don't squish ── */
.mr-sec { overflow-x: auto; }
.mr-sec table { min-width: 500px; }

/* ── Exec report 3-col risks/wins/variances: stack on mobile ── */
@media (max-width: 600px) {
  #mr-sec-1 [style*="grid-template-columns:1fr 1fr 1fr"],
  #mr-sec-6 [style*="grid-template-columns:1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }
}

/* ── Pre-auth follow-up queue row: prevent horizontal overflow ── */
@media (max-width: 600px) {
  .pa-row {
    grid-template-columns: 1fr 1fr !important;
    font-size: 11px !important;
  }
  .pa-row > div:nth-child(3),
  .pa-row > div:nth-child(5) { display: none; }
}

/* ══════════════════════════════════════════
   v347P — MOBILE UI POLISH (targeted fixes)
   ══════════════════════════════════════════ */

/* ── 1. Pre-Auth KPI cards: always 2×2 grid on phone ─────────────── */
@media (max-width: 700px) {
  #preauth-summary {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }
  #preauth-summary .kpi-card {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    text-align: center !important;
    padding: 12px 8px !important;
    gap: 4px;
  }
  #preauth-summary .kpi-icon { font-size: 20px !important; }
  #preauth-summary .kpi-value { font-size: 16px !important; font-weight: 700; line-height: 1.2; }
  #preauth-summary .kpi-label { font-size: 10px !important; margin: 0; }
}

/* ── 2. Two-col stack: override inline style with !important ──────── */
@media (max-width: 700px) {
  .two-col-stack {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }
}

/* ── 3. Exec report clinician table: full-width, no truncation ────── */
@media (max-width: 700px) {
  #ms-by-clinician,
  #ms-expenses {
    overflow-x: auto;
  }
  #ms-by-clinician table,
  #ms-expenses table {
    min-width: 260px;
    width: 100%;
    font-size: 11px !important;
  }
  #ms-by-clinician td,
  #ms-by-clinician th,
  #ms-expenses td,
  #ms-expenses th {
    padding: 5px 4px !important;
    white-space: nowrap;
  }
}

/* ── 4. Owner Collections: filter bar stacks cleanly ─────────────── */
@media (max-width: 700px) {
  .ocl-filters {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
    align-items: end !important;
  }
  .ocl-filters .field { margin: 0 !important; }
  .ocl-filters button {
    grid-column: 1 / -1;
    width: 100% !important;
  }
  /* OCL table: hide Deposit Date and Actions, keep essentials */
  #page-owner-collections table th:nth-child(5),
  #page-owner-collections table td:nth-child(5),
  #page-owner-collections table th:nth-child(7),
  #page-owner-collections table td:nth-child(7),
  #page-owner-collections table th:nth-child(8),
  #page-owner-collections table td:nth-child(8) {
    display: none !important;
  }
  #page-owner-collections table td,
  #page-owner-collections table th {
    padding: 6px 5px !important;
    font-size: 11px !important;
    white-space: nowrap;
  }
  #page-owner-collections .card > div {
    overflow-x: auto;
  }
}

/* ── General: grid-2/3/4 collapse — but NOT inside preauth-summary ── */
@media (max-width: 700px) {
  .grid-2:not(#preauth-summary),
  .grid-3:not(#preauth-summary),
  .grid-4:not(#preauth-summary) {
    grid-template-columns: 1fr 1fr !important;
  }
}
@media (max-width: 480px) {
  .grid-2:not(#preauth-summary),
  .grid-3:not(#preauth-summary),
  .grid-4:not(#preauth-summary) {
    grid-template-columns: 1fr !important;
  }
}

/* ── two-col-stack base (desktop) — mobile override above stacks it ── */
.two-col-stack {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}

/* ── Budget V3 — mobile/desktop table visibility ── */
@media (min-width: 701px) {
  .bg-mobile-cards { display: none !important; }
  .bg-desktop-table { display: block; }
}
@media (max-width: 700px) {
  .bg-desktop-table { display: none !important; }
  .bg-mobile-cards { display: block; }
}

/* ── Day Sheet: Delete patient button always clickable on desktop ── */
/* The patient-identity-grid's minmax columns can visually overflow  */
/* the parent grid column and physically cover the delete button.    */
#page-daysheet .patient-header-row.patient-header-modern,
#page-daysheet .patient-header-row {
  overflow: visible !important;
}
#page-daysheet .patient-identity-grid {
  overflow: hidden !important; /* clip inner grid to its column */
}
#page-daysheet .patient-del-btn {
  position: relative !important;
  z-index: 10 !important;       /* always above identity grid overflow */
  pointer-events: auto !important;
  cursor: pointer !important;
}