/* ========================================================================
   Align Operating System (AOS) — Unified Dashboard styles
   Design language: calm, premium, clinical-clean ("Apple of dentistry")
   ===================================================================== */
:root {
  --bg: #f5f7fa;
  --surface: #ffffff;
  --surface-2: #f0f3f7;
  --border: #e3e8ef;
  --text: #0f172a;
  --muted: #64748b;
  --brand: #0ea5a4;      /* teal — clinical + trustworthy */
  --brand-dark: #0f766e;
  --accent: #6366f1;
  --success: #16a34a;
  --warn: #d97706;
  --danger: #dc2626;
  --shadow: 0 1px 3px rgba(15,23,42,.06), 0 8px 24px rgba(15,23,42,.05);
  --radius: 14px;
}
/* Dark palette — applied on explicit choice, or by OS default unless the
   user has explicitly chosen light. data-theme is set on <html> by a small
   inline script before paint, so there is no flash of the wrong theme. */
:root[data-theme="dark"] {
  --bg: #0b1120; --surface: #111827; --surface-2: #0f172a;
  --border: #1f2937; --text: #e5e7eb; --muted: #94a3b8;
  --shadow: 0 1px 3px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --bg: #0b1120; --surface: #111827; --surface-2: #0f172a;
    --border: #1f2937; --text: #e5e7eb; --muted: #94a3b8;
    --shadow: 0 1px 3px rgba(0,0,0,.4), 0 8px 24px rgba(0,0,0,.3);
  }
}
* { box-sizing: border-box; margin: 0; padding: 0; }
html, body { height: 100%; }
body {
  font-family: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--bg); color: var(--text); font-size: 14px; line-height: 1.5;
  -webkit-font-smoothing: antialiased;
}
#app { display: flex; min-height: 100vh; }
#app[hidden] { display: none; }

/* ---------- Sidebar ---------- */
.sidebar {
  width: 250px; flex-shrink: 0; background: var(--surface);
  border-right: 1px solid var(--border); display: flex; flex-direction: column;
  position: sticky; top: 0; height: 100vh;
}
.brand { display: flex; align-items: center; gap: 12px; padding: 22px 20px; }
.sidebar-collapse {
  margin-left: auto; border: 1px solid var(--border); background: var(--surface-2);
  color: var(--muted); width: 30px; height: 30px; border-radius: 8px; cursor: pointer;
  font-size: 16px; line-height: 1; flex-shrink: 0;
}
.sidebar-collapse:hover { color: var(--text); border-color: var(--brand); }
.brand-mark {
  width: 40px; height: 40px; border-radius: 11px; display: grid; place-items: center;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  color: #fff; font-weight: 700; font-size: 20px;
}
.brand-text { display: flex; flex-direction: column; line-height: 1.15; }
.brand-text strong { font-size: 16px; }
.brand-text span { font-size: 11px; color: var(--muted); letter-spacing: .3px; }
/* Sidebar menu search */
.nav-search { position: relative; margin: 4px 12px 2px; flex-shrink: 0; }
.nav-search-ico { position: absolute; left: 10px; top: 50%; transform: translateY(-50%); font-size: 12px; opacity: .6; pointer-events: none; }
.nav-search input { width: 100%; box-sizing: border-box; padding: 8px 10px 8px 30px; font-size: 13px; border-radius: 9px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--text); }
.nav-search input:focus { outline: none; border-color: var(--brand); }
/* Edit-menu mode: draggable rows + hide toggles */
.nav-editbar { display: flex; gap: 6px; align-items: center; padding: 0 4px 6px; flex-wrap: wrap; }
.nav-edit-list { display: flex; flex-direction: column; gap: 3px; }
.nav-edit-row { display: flex; align-items: center; gap: 8px; padding: 7px 8px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border); cursor: grab; font-size: 13px; }
.nav-edit-row.dragging { opacity: .5; border-style: dashed; }
.nav-edit-row.off { opacity: .45; }
.nav-edit-row .ne-grip { color: var(--muted); }
.nav-edit-row .ne-label { flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nav-edit-row .ne-hide { background: none; border: none; cursor: pointer; font-size: 13px; padding: 2px; line-height: 1; }
.nav { flex: 1; padding: 6px 12px; overflow-y: auto; }
.nav-group {
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .8px;
  color: var(--muted); margin: 16px 10px 6px;
}
.nav-item {
  width: 100%; text-align: left; border: none; background: transparent;
  color: var(--text); padding: 10px 12px; border-radius: 10px; cursor: pointer;
  font-size: 13.5px; display: flex; align-items: center; gap: 11px; margin-bottom: 2px;
  transition: background .15s, color .15s;
}
.nav-item span { width: 18px; text-align: center; opacity: .7; }
.nav-item:hover { background: var(--surface-2); }
.nav-item.active { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand-dark); font-weight: 600; }
@media (prefers-color-scheme: dark) { .nav-item.active { color: #5eead4; } }
/* A screen that sits under a menu entry (e.g. Receive Goods under Purchasing) */
.nav-item.nav-sub { padding: 7px 12px 7px 30px; font-size: 12.8px; margin-top: -2px; position: relative; }
.nav-item.nav-sub::before { content: ""; position: absolute; left: 19px; top: 0; bottom: 0; width: 1px; background: var(--border, #e2e8f0); opacity: .8; }
.nav-item.nav-sub span { width: 16px; font-size: 12px; }

/* Department-grouped nav (collapsible accordion) */
.nav-dept-sec { margin-top: 4px; }
.nav-dept {
  width: 100%; display: flex; align-items: center; gap: 10px; cursor: pointer;
  border: none; background: transparent; color: var(--muted);
  padding: 9px 12px; border-radius: 10px; font-weight: 600;
  font-size: 10.5px; text-transform: uppercase; letter-spacing: .7px;
}
.nav-dept:hover { background: var(--surface-2); color: var(--text); }
.nav-dept .nd-ico { width: 18px; text-align: center; opacity: .8; }
.nav-dept .nd-label { flex: 1; text-align: left; }
.nav-dept .nd-chev { transition: transform .18s; opacity: .6; font-size: 13px; }
.nav-dept-sec.open .nav-dept .nd-chev { transform: rotate(90deg); }
.nav-dept-items { display: none; padding-left: 6px; margin-bottom: 4px; }
.nav-dept-sec.open .nav-dept-items { display: block; }
/* Sub-section label inside a department group (e.g. Finance > Receivables). */
.nav-subhead {
  font-size: 9.5px; text-transform: uppercase; letter-spacing: .6px;
  font-weight: 700; color: var(--muted); opacity: .75;
  padding: 8px 12px 3px; margin-top: 2px;
}
.nav-dept-items > .nav-subhead:first-child { margin-top: 0; }
/* A sub group as a dropdown (the owner, Oct 2026): the heading opens and closes it. */
.nav-sg-head {
  display: flex; align-items: center; gap: 6px; width: 100%; border: none; background: transparent;
  cursor: pointer; text-align: left; border-radius: 8px; font-family: inherit;
}
.nav-sg-head:hover { background: var(--surface-2); opacity: 1; color: var(--text); }
.nav-sg-head .sg-label { flex: 1; }
.nav-sg-head .sg-n { font-size: 9.5px; font-weight: 600; letter-spacing: 0; opacity: .8;
  background: var(--surface-2); border-radius: 999px; padding: 0 6px; }
.nav-sg-head .nd-chev, .nav-kp-tog .nd-chev { transition: transform .18s; opacity: .7; font-size: 13px; text-transform: none; }
.nav-sg.open > .nav-sg-head .nd-chev, .nav-sg.q-open > .nav-sg-head .nd-chev,
.nav-kp.open > .nav-kp-row .nd-chev, .nav-kp.q-open > .nav-kp-row .nd-chev { transform: rotate(90deg); }
.nav-sg-items, .nav-kp-kids { display: none; }
.nav-sg.open > .nav-sg-items, .nav-sg.q-open > .nav-sg-items,
.nav-kp.open > .nav-kp-kids, .nav-kp.q-open > .nav-kp-kids { display: block; }
.nav-sg-items { padding-left: 4px; }
/* An entry with a sub menu: the entry, and a › that opens its sub menu. */
.nav-kp-row { display: flex; align-items: center; gap: 2px; }
.nav-kp-row > .nav-item { flex: 1; min-width: 0; }
.nav-kp-tog {
  flex: 0 0 auto; width: 28px; height: 30px; border: none; background: transparent; color: var(--muted);
  border-radius: 8px; cursor: pointer; margin-bottom: 2px;
}
.nav-kp-tog:hover { background: var(--surface-2); color: var(--text); }
.nav-searching .nav-kp-tog { visibility: hidden; }
/* Blueprint roadmap stub — a not-yet-built Finance screen, shown dimmed with a
   small "soon" tag so the target module map is visible without faking it. */
.nav-item.nav-soon { display: flex; align-items: center; gap: 6px; opacity: .55; }
.nav-item.nav-soon:hover { opacity: .8; background: var(--surface-2); }
.nav-item.nav-soon .ns-label { flex: 1; text-align: left; }
.nav-item.nav-soon .soon-badge {
  font-size: 8.5px; font-weight: 700; letter-spacing: .5px; text-transform: uppercase;
  color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--border); padding: 1px 5px; border-radius: 6px;
}
/* Branch switcher shared by the ledger reports (Income Statement, TB, BS…). */
.fin-branchbar { display: flex; align-items: center; gap: 8px; margin-bottom: 14px; flex-wrap: wrap; }
.fin-branchbar .fbb-label { font-size: 12.5px; color: var(--muted); font-weight: 600; }
.fin-branchbar select { padding: 6px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; }
/* Employee documents card in the staff profile — type-first upload. */
.staff-doc-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-top: 6px; background: var(--surface-2); }
.staff-doc-card .sdc-head { font-weight: 600; font-size: 13.5px; margin-bottom: 2px; }
.staff-doc-card .sdc-upload { display: flex; flex-direction: column; gap: 5px; margin-top: 8px; border-top: 1px dashed var(--border); padding-top: 10px; }
.staff-doc-card .sdc-lbl { font-size: 11.5px; color: var(--muted); font-weight: 600; }
.staff-doc-card .sdc-upload select { padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 13px; max-width: 320px; }
.staff-doc-card .sdc-upload button { align-self: flex-start; }
.sidebar-foot { padding: 16px 20px; border-top: 1px solid var(--border); }
.ai-badge {
  font-size: 12px; color: var(--accent); background: color-mix(in srgb, var(--accent) 10%, transparent);
  padding: 8px 10px; border-radius: 9px; margin-bottom: 10px;
}
.ai-badge em { color: var(--muted); font-style: normal; font-size: 11px; }
.sidebar-foot small { color: var(--muted); font-size: 11px; }

/* ---------- Main ---------- */
.main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.topbar {
  display: flex; justify-content: space-between; align-items: center;
  padding: 20px 28px; border-bottom: 1px solid var(--border);
  background: color-mix(in srgb, var(--surface) 70%, transparent);
  backdrop-filter: blur(8px); position: sticky; top: 0; z-index: 5;
}
.topbar h1 { font-size: 20px; font-weight: 650; }
.muted { color: var(--muted); font-size: 12.5px; }
.topbar-right { display: flex; align-items: center; gap: 14px; }
.avatar {
  width: 38px; height: 38px; border-radius: 50%; background: var(--accent);
  color: #fff; display: grid; place-items: center; font-weight: 600; font-size: 13px;
}
.content { padding: 26px 28px; }

/* ---------- Buttons ---------- */
.btn {
  border: none; border-radius: 10px; padding: 9px 16px; font-size: 13px; font-weight: 600;
  cursor: pointer; background: var(--brand); color: #fff; transition: filter .15s, transform .05s;
}
.btn:hover { filter: brightness(1.06); }
.btn:active { transform: translateY(1px); }
.btn.ghost { background: var(--surface-2); color: var(--text); }
.icon-btn { border: none; background: transparent; font-size: 18px; cursor: pointer; color: var(--muted); }

/* ---------- Notifications / Action Center ---------- */
.theme-toggle { font-size: 15px; padding: 9px 12px; line-height: 1; }

/* ---------- Quick-add floating action button ---------- */
/* Below the modal layers (overlay 50, sub-overlay 70), not above them: at 70 the
   round + button floated ON TOP of an open modal and, once the commission card
   grew to 1400px, physically covered its "Save rates" button. A "new record"
   shortcut has no business sitting over a dialog anyway. :has() then hides it
   outright so it does not linger dimmed behind the scrim; where :has() is
   missing the z-index alone already keeps it out of the way. */
.fab-wrap { position: fixed; right: 28px; bottom: 28px; z-index: 45; display: flex; flex-direction: column; align-items: flex-end; gap: 12px; }
body:has(#modalOverlay:not([hidden])) .fab-wrap,
body:has(#subOverlay:not([hidden])) .fab-wrap { display: none; }
.fab {
  width: 56px; height: 56px; border-radius: 50%; border: none; cursor: pointer;
  background: var(--brand); color: #fff; font-size: 28px; line-height: 1;
  box-shadow: 0 6px 20px rgba(15,23,42,.28); transition: transform .18s, filter .15s;
}
.fab:hover { filter: brightness(1.06); }
.fab-wrap.open .fab { transform: rotate(45deg); }
.fab-menu { display: flex; flex-direction: column; gap: 8px; align-items: flex-end; }
.fab-menu[hidden] { display: none; }
.fab-item {
  display: inline-flex; align-items: center; gap: 8px; white-space: nowrap;
  background: var(--surface); color: var(--text); border: 1px solid var(--border);
  border-radius: 999px; padding: 9px 16px 9px 14px; font-size: 13px; font-weight: 600;
  cursor: pointer; box-shadow: var(--shadow); animation: fab-pop .16s ease;
}
.fab-item:hover { border-color: var(--brand); color: var(--brand-dark); }
.fab-ico { font-size: 15px; }
@keyframes fab-pop { from { opacity: 0; transform: translateY(6px); } to { opacity: 1; transform: translateY(0); } }
@media (max-width: 640px) { .fab-wrap { right: 18px; bottom: 18px; } }
.notif { position: relative; }
.notif-bell { position: relative; font-size: 16px; padding: 9px 12px; }
.notif-bell.has-alerts { animation: notif-wiggle 2s ease-in-out infinite; }
@keyframes notif-wiggle { 0%,92%,100% { transform: rotate(0); } 94% { transform: rotate(-12deg); } 96% { transform: rotate(10deg); } 98% { transform: rotate(-6deg); } }
.notif-badge {
  position: absolute; top: -4px; right: -4px; min-width: 18px; height: 18px; padding: 0 4px;
  background: var(--danger); color: #fff; border-radius: 9px; font-size: 11px; font-weight: 700;
  line-height: 18px; text-align: center; box-shadow: 0 0 0 2px var(--surface);
}
.notif-badge[hidden] { display: none; }
.notif-panel {
  position: absolute; top: calc(100% + 8px); right: 0; width: 300px; z-index: 60;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: 0 12px 32px rgba(0,0,0,.18); overflow: hidden;
}
.notif-panel[hidden] { display: none; }
.notif-head { padding: 12px 14px; font-weight: 700; font-size: 13px; border-bottom: 1px solid var(--border); }
.notif-item {
  display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  padding: 11px 14px; background: transparent; border: none; border-bottom: 1px solid var(--border);
  cursor: pointer; color: var(--text); font-size: 13px;
}
.notif-item:last-child { border-bottom: none; }
.notif-item:hover { background: var(--surface-2); }
.notif-dot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; background: var(--muted); }
.notif-dot.danger { background: var(--danger); }
.notif-dot.warn { background: var(--warn); }
.notif-dot.info { background: var(--brand); }
.notif-label { flex: 1; }
.notif-go { color: var(--muted); font-size: 16px; }
.notif-empty { padding: 20px 14px; text-align: center; color: var(--muted); font-size: 13px; }

/* ---------- KPI cards ---------- */
.kpi-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 16px; margin-bottom: 26px; }
/* Five tiles on one row on a laptop (the GRN register, Oct 2026). */
.kpi-grid.kpi-5 { grid-template-columns: repeat(auto-fill, minmax(175px, 1fr)); }
/* six tiles on one row of a 1366 laptop (the GRN register, Oct 2026) */
.kpi-grid.kpi-6 { grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); }
.kpi-grid.kpi-7 { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.kpi {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 18px; box-shadow: var(--shadow); position: relative; overflow: hidden;
}
.kpi::before { content: ""; position: absolute; left: 0; top: 0; bottom: 0; width: 4px; background: var(--brand); opacity: .8; }
.kpi .label { color: var(--muted); font-size: 12px; margin-bottom: 8px; }
.kpi .value { font-size: 26px; font-weight: 700; letter-spacing: -.5px; }
.kpi .sub { font-size: 11.5px; color: var(--muted); margin-top: 4px; }
.kpi.accent::before { background: var(--accent); }
.kpi.warn::before { background: var(--warn); }
.kpi.success::before { background: var(--success); }
.kpi.danger::before { background: var(--danger); }

/* ---------- Panels / charts ---------- */
.panel-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 16px; }
.panel {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 20px; box-shadow: var(--shadow);
}
.panel h3 { font-size: 14px; margin-bottom: 16px; }
.bar-row { display: flex; align-items: center; gap: 12px; margin-bottom: 12px; }
.bar-row .name { width: 120px; font-size: 12.5px; color: var(--muted); flex-shrink: 0; }
.bar-track { flex: 1; height: 10px; background: var(--surface-2); border-radius: 6px; overflow: hidden; }
.bar-fill { height: 100%; background: linear-gradient(90deg, var(--brand), var(--accent)); border-radius: 6px; }
.bar-row .amt { width: 90px; text-align: right; font-size: 12.5px; font-weight: 600; }

/* ---------- Tables ---------- */
.table-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; gap: 10px; }
.th-actions { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
/* overflow-x:auto, not hidden: a table wider than its box used to be CLIPPED
   with no way to reach the cut-off columns — the New Purchase Order line
   editor lost Unit price, Tax % and Total inside a 520px modal. Scrolling
   is the safety net; the layouts themselves should still fit. */
.table-wrap { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); overflow-x: auto; overflow-y: hidden; box-shadow: var(--shadow); }
/* A table box given a height limit scrolls inside it — overflow-y: hidden above would cut
   the lower rows off with no way to reach them (the Locations window, Oct 2026). */
.table-wrap[style*="max-height"] { overflow-y: auto; }
/* A scrolling table keeps its header row in view — the commission statement's
   Date · Treatment · … row stays put while the cases scroll beneath it (owner,
   Sep 2026: "while scrolling down, dont move the date, treatment row"). */
/* Attendance period tables: the header frozen while the rows scroll inside the box. */
.att-period-bar { display: flex; gap: 8px; justify-content: flex-end; flex-wrap: wrap; margin: 0 0 8px; }
@media (min-width: 641px) { .table-wrap.att-freeze.sticky-head { max-height: 70vh; overflow: auto; } }
/* The cumulative Late / OT rows under Day by day — held at the bottom of the box while frozen. */
.att-total td { background: var(--surface-2); border-top: 1px solid var(--border); white-space: nowrap; }
.att-grand td { border-top: 2px solid var(--text); }
.table-wrap.att-freeze.sticky-head tfoot .att-grand td { position: sticky; bottom: 0; z-index: 2; }
.table-wrap.sticky-head thead th { position: sticky; top: 0; z-index: 2; background: var(--surface-2); box-shadow: inset 0 -1px 0 var(--border); }
table { width: 100%; border-collapse: collapse; }
th, td { text-align: left; padding: 12px 16px; font-size: 13px; border-bottom: 1px solid var(--border); }
th { color: var(--muted); font-weight: 600; font-size: 11.5px; text-transform: uppercase; letter-spacing: .4px; background: var(--surface-2); }
tbody tr:last-child td { border-bottom: none; }
tr:hover td { background: color-mix(in srgb, var(--brand) 4%, transparent); }
.chip { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 11px; font-weight: 600; }
.chip.green { background: color-mix(in srgb, var(--success) 15%, transparent); color: var(--success); }
.chip.amber { background: color-mix(in srgb, var(--warn) 15%, transparent); color: var(--warn); }
.chip.red { background: color-mix(in srgb, var(--danger) 15%, transparent); color: var(--danger); }
.chip.blue { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); }
.chip.gray { background: var(--surface-2); color: var(--muted); }
.chip.teal { background: color-mix(in srgb, var(--brand) 15%, transparent); color: var(--brand-dark); }
.chip.orange { background: color-mix(in srgb, #f97316 16%, transparent); color: #f97316; }
.chip.purple { background: color-mix(in srgb, #7c3aed 15%, transparent); color: #7c3aed; }

/* ---------- Forms / modal ---------- */
.modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.5); display: grid; place-items: center; z-index: 50; }
.modal-overlay[hidden] { display: none; }
/* The nested layer sits above the form that opened it, with its own
   scrim, so the half-typed PO underneath is visibly still there. */
.sub-overlay { z-index: 70; background: rgba(15, 23, 42, .42); }
.sub-overlay .modal { width: min(680px, 94vw); }
.sub-overlay .modal.wide { width: min(920px, 96vw); }
.modal { background: var(--surface); border-radius: 16px; width: min(520px, 92vw); box-shadow: var(--shadow); overflow: hidden; }
/* Wide variant for grids that need several columns (e.g. the bulk career-counts
   table). Opt-in per modal; openModal clears it so the next modal is normal. */
.modal.wide { width: min(920px, 96vw); }
/* Extra-wide, for the one genuinely column-heavy report: the doctor's worked
   commission statement (date → treatment → price → discount → received →
   deduction → net → rate → earning). The owner, Sep 2026: "create a wider
   picture where we can clearly see the commissions, and dont have to scroll
   left to right" — at 920px those columns did not fit and the table grew its
   own horizontal scrollbar. Written with .wide so a card that somehow misses
   this rule still lands on the wide width, never the 520px default. */
.modal.wide.xwide { width: min(1400px, 98vw); }
/* The statement itself: tighter than a normal mini table so every column is
   read at a glance, and money never wraps mid-figure. */
.stmt-table th, .stmt-table td { padding: 5px 7px; font-size: 11.5px; }
/* Money never wraps mid-figure. HEADINGS may — the owner's own column names
   ("Clinical Deduction (Rs)", "Card Comm Deduction (Rs)") are long, and held on
   one line each they would push the statement back into a sideways scrollbar
   the moment a case carried all four deductions. */
.stmt-table td.num, .stmt-table td .num { white-space: nowrap; }
.stmt-table th.num { white-space: normal; line-height: 1.25; }
.stmt-table .ded-parts { display: block; line-height: 1.5; white-space: nowrap; }
/* A click on the backdrop shakes the card (it no longer closes) to point the
   user back at Cancel / ✕. */
.modal-nudge { animation: modalNudge .28s cubic-bezier(.36,.07,.19,.97); }
@keyframes modalNudge {
  0%,100% { transform: translateX(0); }
  20% { transform: translateX(-7px); } 40% { transform: translateX(6px); }
  60% { transform: translateX(-4px); } 80% { transform: translateX(2px); }
}
.modal-head { display: flex; justify-content: space-between; align-items: center; padding: 18px 22px; border-bottom: 1px solid var(--border); }
.modal-body { padding: 22px; max-height: 70vh; overflow-y: auto; }

/* The KPI row on an employee's profile. Deliberately outside the work-record
   strip above it, which only exists for clinicians — KPIs belong to everyone. */
.staff-kpi-strip { display: flex; justify-content: space-between; align-items: center;
  gap: 10px; margin-bottom: 12px; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface-2); }
.staff-kpi-strip small { font-size: 12px; }

/* ---------- A modal you can move, stretch and expand ---------- */
/* The owner (Sep 2026), on the Commission window: "we need this commission
   window stretchable, movable, expandable." A worked statement of every case a
   doctor has ever done does not fit in a fixed 70vh box, and you cannot compare
   it with the profile behind it if the box will not move.
   Opt-in per modal (flexModal()), never global: a two-field confirm has nothing
   to gain from a drag handle. */
.modal.flexi { display: flex; flex-direction: column; max-height: 92vh; position: relative; }
.modal.flexi .modal-body { flex: 1 1 auto; max-height: none; min-height: 0; }
/* Grab it by the title bar. touch-action:none so an iPad drags the window
   instead of scrolling the page underneath it. */
.modal.flexi .modal-head { cursor: move; user-select: none; touch-action: none; }
.modal.flexi .modal-head .icon-btn { cursor: pointer; }
/* Once moved or stretched it leaves the centring grid and holds its own place. */
/* Once it is floating the height is the user's, not the 92vh default — without
   this, stretching downwards silently does nothing and the grip feels broken. */
.modal.flexi.floating { position: fixed; margin: 0; width: auto; max-height: none; }
.modal.flexi.maximized { left: 1vw !important; top: 1vh !important;
  width: 98vw !important; height: 98vh !important; max-height: 98vh; }
.modal-grip { position: absolute; right: 0; bottom: 0; width: 26px; height: 26px;
  cursor: nwse-resize; touch-action: none; z-index: 2; }
/* The corner is drawn rather than left invisible — a handle nobody can see is a
   handle nobody uses. */
.modal-grip::after { content: ""; position: absolute; right: 5px; bottom: 5px;
  width: 11px; height: 11px; border-right: 2px solid var(--muted);
  border-bottom: 2px solid var(--muted); opacity: .55; border-radius: 0 0 3px 0; }
.modal-grip:hover::after { opacity: 1; }
.modal-head-acts { display: flex; align-items: center; gap: 2px; }
/* Windows stack: a card opened from another card shows ← to go back to it (✕ does the same). */
.modal-head .modal-back { margin-right: 8px; font-size: 18px; flex: none; }
.modal-head .modal-back + h3 { margin-right: auto; }
/* A phone is already full-width: there is nowhere to move a window to, and a
   drag handle there would only fight the scroll. */
@media (max-width: 719px) {
  .modal.flexi .modal-head { cursor: default; touch-action: auto; }
  .modal-grip, .modal-expand { display: none; }
  .modal.flexi.floating { position: static; width: min(520px, 92vw); }
  .modal.flexi.wide.floating { width: min(920px, 96vw); }
}
.field { margin-bottom: 14px; }
.field label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.field input, .field select, .field textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface-2); color: var(--text); font-size: 13.5px; font-family: inherit;
}
.field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.modal-actions { display: flex; justify-content: flex-end; gap: 10px; margin-top: 6px; }
.form-actions { display: flex; justify-content: flex-end; align-items: center; flex-wrap: wrap; gap: 10px; margin-top: 12px; }

.loading { color: var(--muted); padding: 40px; text-align: center; }
.empty { color: var(--muted); padding: 30px; text-align: center; }

.report-section { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin: 6px 0 12px; }

/* ---------- My Day ---------- */
.md-hero { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 16px; margin-bottom: 20px; }
.md-hero h2 { font-size: 22px; }
.md-chips { display: flex; flex-wrap: wrap; gap: 10px; }
.md-chip { display: flex; flex-direction: column; align-items: center; min-width: 66px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; box-shadow: var(--shadow); }
.md-chip.accent { border-color: color-mix(in srgb, var(--accent) 45%, var(--border)); }
.md-chip.success { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.md-chip.warn { border-color: color-mix(in srgb, var(--warn) 45%, var(--border)); }
.md-chip.danger { border-color: color-mix(in srgb, var(--danger) 45%, var(--border)); }
.md-chip-n { font-size: 20px; font-weight: 700; }
.md-chip-l { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }
.md-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.md-list { display: flex; flex-direction: column; }
.md-appt, .md-row { display: flex; align-items: center; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.md-appt:last-child, .md-row:last-child { border-bottom: none; }
.md-appt { cursor: pointer; }
.md-appt:hover { background: var(--surface-2); }
.md-time { font-weight: 700; font-size: 12.5px; white-space: nowrap; }
.md-who { display: flex; flex-direction: column; flex: 1; }
.md-who small { color: var(--muted); font-size: 11.5px; }
.md-row strong { flex: 1; }
.md-row.row-warn { background: color-mix(in srgb, var(--warn) 8%, transparent); border-radius: 6px; padding-left: 6px; padding-right: 6px; }

/* ---------- Today at a glance strip ---------- */
.today-strip {
  background: linear-gradient(135deg, var(--brand), var(--brand-dark));
  border-radius: var(--radius); padding: 16px 20px; margin-bottom: 22px; color: #fff;
  box-shadow: var(--shadow);
}
.today-head { display: flex; align-items: baseline; justify-content: space-between; gap: 12px; margin-bottom: 14px; }
.today-head > span:first-child { font-size: 15px; font-weight: 700; letter-spacing: .2px; }
.today-date { font-size: 12.5px; opacity: .85; }
.today-stats { display: flex; flex-wrap: wrap; gap: 10px; }
.today-stat {
  flex: 1 1 120px; background: rgba(255,255,255,.14); border-radius: 12px; padding: 12px 14px;
  display: flex; flex-direction: column; gap: 2px; backdrop-filter: blur(2px);
}
.today-stat.danger { background: rgba(220,38,38,.35); box-shadow: inset 0 0 0 1px rgba(255,255,255,.25); }
.today-stat.success { background: rgba(22,163,74,.30); }
.ts-icon { font-size: 16px; }
.ts-val { font-size: 21px; font-weight: 700; line-height: 1.1; }
.ts-label { font-size: 11.5px; opacity: .9; text-transform: uppercase; letter-spacing: .4px; }
@media (max-width: 640px) {
  .today-stats { flex-wrap: nowrap; overflow-x: auto; -webkit-overflow-scrolling: touch; padding-bottom: 4px; }
  .today-stat { flex: 0 0 130px; }
}
.report-filter { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 12px; margin-bottom: 18px; }
.preset-row, .custom-row { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; }
.chip-btn {
  border: 1px solid var(--border); background: var(--surface); color: var(--muted);
  border-radius: 999px; padding: 6px 14px; font-size: 12.5px; font-weight: 600; cursor: pointer;
  transition: all .15s;
}
.chip-btn:hover { border-color: var(--brand); color: var(--brand-dark); }
.chip-btn.active { background: var(--brand); border-color: var(--brand); color: #fff; }
.custom-row input[type="date"] {
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  border-radius: 8px; padding: 6px 10px; font-size: 13px; font-family: inherit;
}
@media print { .report-filter, .custom-row, .menu-btn, .sidebar, .topbar-right, .fab-wrap { display: none !important; } }
.sc-dim { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--brand); margin-bottom: 6px; }

/* ---------- Documents (§14) ---------- */
.doc-list { display: flex; flex-direction: column; gap: 8px; }
.doc-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--surface-2); border-radius: 9px; border-left: 3px solid var(--brand); }
.doc-item a { color: var(--brand); text-decoration: none; }
.doc-item a:hover { text-decoration: underline; }
.doc-item small { color: var(--muted); }
/* Case photos & X-rays as a date-grouped gallery, opened in the viewer. */
.doc-day { margin-bottom: 16px; }
.doc-day-head { font-weight: 700; font-size: 13px; margin: 0 0 8px; padding-bottom: 5px; border-bottom: 1px solid var(--border); }
.doc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)); gap: 10px; }
.doc-tile { margin: 0; cursor: zoom-in; background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; overflow: hidden; }
.doc-tile img { width: 100%; height: 132px; object-fit: cover; display: block; background: #0b1220; }
.doc-tile:hover img { filter: brightness(1.1); }
.doc-tile figcaption { padding: 6px 8px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
/* Portal v2 Phase 4: the Share box on a file or photo of the patient record — a real, clickable
   tick, never squeezed to nothing by the tile's overflow:hidden. */
.doc-share { display: inline-flex; align-items: center; gap: 4px; font-size: 11px; color: var(--muted); cursor: pointer; white-space: nowrap; flex: none; margin-left: auto; }
.doc-share input { width: auto; margin: 0; accent-color: var(--brand); }
.doc-files { display: flex; flex-direction: column; gap: 8px; margin-top: 14px; }
/* Full-screen in-app image viewer with a close button. */
.img-viewer { position: fixed; inset: 0; background: rgba(2,6,23,.92); display: flex; align-items: center; justify-content: center; z-index: 500; padding: 24px; }
.img-viewer[hidden] { display: none; }
.img-viewer img { max-width: 96vw; max-height: 92vh; object-fit: contain; border-radius: 6px; box-shadow: var(--shadow); }
.img-viewer-close { position: fixed; top: 18px; right: 20px; width: 44px; height: 44px; border-radius: 50%; border: none; background: rgba(255,255,255,.16); color: #fff; font-size: 22px; line-height: 1; cursor: pointer; display: flex; align-items: center; justify-content: center; }
.img-viewer-close:hover { background: rgba(255,255,255,.3); }

/* ---------- Prescriptions (§13.19) ---------- */
.rx-list { display: flex; flex-direction: column; gap: 8px; }
.rx-item { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; padding: 10px 12px; background: var(--surface-2); border-radius: 9px; border-left: 3px solid var(--accent); }
.rx-item small { color: var(--muted); }

/* ---------- Odontogram (§13.7) ---------- */
.odontogram-panel { margin-bottom: 18px; }
.odontogram { display: flex; flex-direction: column; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.arch { display: flex; gap: 5px; justify-content: center; min-width: min-content; }
.tooth {
  position: relative;
  width: 34px; height: 46px; flex-shrink: 0; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface-2); color: var(--text); cursor: pointer; display: flex; flex-direction: column;
  align-items: center; justify-content: space-between; padding: 3px 0; transition: transform .05s, border-color .15s;
}
.tooth:hover { border-color: var(--brand); transform: translateY(-1px); }
.odontogram-panel .panel-head { align-items: center; flex-wrap: wrap; gap: 8px; }
.arch-add { display: flex; gap: 6px; flex-wrap: wrap; }
.tooth.has-tx { border-color: #f97316; box-shadow: inset 0 0 0 1px #f97316; }
.tooth.tx-done { border-color: #16a34a; }
.tooth .tdot { position: absolute; top: 3px; right: 3px; width: 6px; height: 6px; border-radius: 50%; background: #f97316; }
.tooth .tdot.done { background: #16a34a; }
.tooth.has-note::after { content: "•"; position: absolute; bottom: 1px; left: 4px; font-size: 13px; line-height: 1; color: var(--muted); }
.tooth.tooth-picked { outline: 3px solid var(--brand); outline-offset: 1px; }
.multi-tooth-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; margin: -4px 0 10px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); }
.multi-tooth-bar[hidden] { display: none; }

/* Compact tooth picker inside the Add Treatment modal */
.teeth-bar { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; }
.teeth-chips { display: flex; gap: 4px; flex-wrap: wrap; }
.tooth-picker { margin-top: 10px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); display: flex; flex-direction: column; gap: 6px; overflow-x: auto; }
.tp-controls { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 4px; }
.tp-arch { display: flex; gap: 4px; justify-content: center; min-width: min-content; }
.tp-tooth { min-width: 30px; height: 34px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); font-size: 12px; font-weight: 600; cursor: pointer; }
.tp-tooth:hover { border-color: var(--brand); }
.tp-tooth.sel { background: var(--brand); color: #fff; border-color: var(--brand); }

/* Planned Treatments banner — unmissable, orange until completed */
.planned-banner { border-left: 4px solid #f97316; background: color-mix(in srgb, #f97316 7%, transparent); }
.planned-banner h3 { color: #f97316; }
.planned-list { display: flex; flex-direction: column; gap: 8px; margin-top: 8px; }
.planned-row { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 8px 10px; border-radius: 8px; background: var(--surface); }
.planned-row .pl-main { display: flex; align-items: center; gap: 10px; min-width: 0; flex-wrap: wrap; }
.pl-tooth { display: inline-flex; align-items: center; justify-content: center; min-width: 26px; height: 22px; padding: 0 6px; border-radius: 6px; background: #f97316; color: #fff; font-weight: 700; font-size: 12px; }
.pl-tooth.pl-general { background: var(--surface-2); color: var(--muted); }
.pl-name { font-weight: 600; }
.pl-price { font-size: 12.5px; }
.pl-actions { display: flex; gap: 6px; flex-shrink: 0; }
.tooth .tnum { font-size: 9px; color: var(--muted); }
.tooth .tcond { font-size: 12px; font-weight: 700; }
/* condition colours */
.t-Caries { background: color-mix(in srgb, var(--danger) 22%, var(--surface-2)); border-color: var(--danger); }
.t-Filled { background: color-mix(in srgb, var(--accent) 22%, var(--surface-2)); border-color: var(--accent); }
.t-Crown { background: color-mix(in srgb, var(--warn) 26%, var(--surface-2)); border-color: var(--warn); }
.t-Missing { opacity: .4; text-decoration: line-through; }
.t-Implant { background: color-mix(in srgb, var(--brand) 26%, var(--surface-2)); border-color: var(--brand); }
.t-RootCanal { background: color-mix(in srgb, #a855f7 26%, var(--surface-2)); border-color: #a855f7; }
.t-Bridge { background: color-mix(in srgb, var(--warn) 18%, var(--surface-2)); border-color: var(--warn); }
.t-Fractured { background: color-mix(in srgb, #f97316 26%, var(--surface-2)); border-color: #f97316; }
.tooth-legend { display: flex; flex-wrap: wrap; gap: 12px; margin-top: 14px; padding-top: 12px; border-top: 1px solid var(--border); }
.tooth-legend .leg { display: flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--muted); }
.tooth-legend .leg i { width: 14px; height: 14px; border-radius: 4px; border: 1px solid var(--border); display: inline-block; }

/* ---------- Clinical safety alert (§7.14) ---------- */
.med-alert {
  display: flex; gap: 12px; align-items: flex-start; margin-bottom: 16px;
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 40%, transparent);
  border-left: 4px solid var(--danger); border-radius: 12px; padding: 14px 16px;
}
.med-alert-icon { font-size: 20px; line-height: 1.2; }
.med-alert-body strong { color: var(--danger); font-size: 14.5px; }
.med-alert-tag { font-size: 11px; font-weight: 700; color: var(--danger); border: 1px solid var(--danger); border-radius: 999px; padding: 1px 8px; margin-left: 6px; }
.med-alert-notes { font-size: 12.5px; color: var(--text); margin-top: 4px; opacity: .85; }

/* ---------- API catalog code ---------- */
td code { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12px; background: var(--surface-2); padding: 2px 6px; border-radius: 5px; }

/* ---------- OKRs ---------- */
.okr-list { display: flex; flex-direction: column; gap: 14px; }
.okr-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 14px; }
.okr-prog { display: flex; align-items: center; gap: 8px; }
.okr-prog-num { font-size: 20px; font-weight: 700; color: var(--brand); }
.krs { display: flex; flex-direction: column; gap: 10px; margin-bottom: 12px; }
.kr-row { display: grid; grid-template-columns: 1fr 140px 42px auto; gap: 12px; align-items: center; }
.kr-desc { font-size: 13px; }
.kr-bar { height: 8px; background: var(--surface-2); border-radius: 5px; overflow: hidden; }
.kr-fill { height: 100%; background: linear-gradient(90deg, var(--brand), var(--accent)); border-radius: 5px; }
.kr-pct { font-size: 12.5px; font-weight: 600; text-align: right; }
@media (max-width: 640px) { .kr-row { grid-template-columns: 1fr; } }

/* ---------- Membership cards ---------- */
.mem-price { font-size: 24px; font-weight: 700; margin: 4px 0 10px; }
.mem-price span { font-size: 13px; font-weight: 400; color: var(--muted); }
.mem-benefits { font-size: 13px; color: var(--muted); }

/* ---------- SOP library ---------- */
.sop-card { cursor: pointer; transition: border-color .15s; }
.sop-card:hover { border-color: var(--brand); }
.sop-open { color: var(--brand); font-size: 12.5px; font-weight: 600; margin-top: 12px; }
.sop-content { white-space: pre-wrap; font-family: inherit; font-size: 13.5px; line-height: 1.6; background: var(--surface-2); padding: 14px 16px; border-radius: 10px; margin: 0; }

/* ---------- Campaign cards ---------- */
.cmp-metrics { display: grid; grid-template-columns: repeat(3, 1fr); gap: 12px; }
.cmp-metric { display: flex; flex-direction: column; gap: 3px; background: var(--surface-2); padding: 10px 12px; border-radius: 9px; }
.cmp-metric span { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.cmp-metric strong { font-size: 15px; }
@media (max-width: 560px) { .cmp-metrics { grid-template-columns: repeat(2, 1fr); } }

/* ---------- Incident register ---------- */
.incident-list { display: flex; flex-direction: column; gap: 12px; }
.incident-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; }
.incident-head small { color: var(--muted); }
.incident-chips { display: flex; gap: 6px; flex-shrink: 0; }
.incident-desc { font-size: 13px; margin: 10px 0; color: var(--text); opacity: .9; }

/* ---------- Patient clinical record ---------- */
tr.clickable { cursor: pointer; }
.row-open { color: var(--brand); font-weight: 600; font-size: 12px; }
#backBtn { margin-bottom: 16px; }
.pd-header {
  background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 22px; box-shadow: var(--shadow); margin-bottom: 18px;
  display: grid; grid-template-columns: auto 1fr; grid-template-areas: "avatar meta" "grid grid"; gap: 16px 18px;
}
.pd-avatar { grid-area: avatar; width: 60px; height: 60px; border-radius: 16px; background: linear-gradient(135deg, var(--brand), var(--accent)); color: #fff; display: grid; place-items: center; font-size: 22px; font-weight: 700; }
.pd-meta { grid-area: meta; align-self: center; }
.pd-meta h2 { font-size: 22px; margin-bottom: 8px; }
.pd-chips { display: flex; gap: 8px; }
.pd-grid { grid-area: grid; display: grid; grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); gap: 14px; border-top: 1px solid var(--border); padding-top: 16px; }
.pd-field { display: flex; flex-direction: column; gap: 3px; }
.pd-field span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.pd-field strong { font-size: 13.5px; font-weight: 500; }
.pd-columns { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; align-items: start; }
.panel-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 14px; }
.panel-head h3 { margin: 0; }
.panel-head .btn { padding: 6px 12px; font-size: 12px; }
.head-actions { display: flex; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }
.item-acts { white-space: nowrap; }
.item-acts .mini-btn { padding: 3px 7px; margin-left: 2px; }
.plan-head-right { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; justify-content: flex-end; }

.pd-grid-mini { grid-template-columns: repeat(auto-fit, minmax(140px, max-content)); gap: 22px; }
/* No overflow rule: the tabs WRAP, so nothing needs scrolling — and an
   overflow-x:auto here turned the tabs' -1px bottom margin into a 1px vertical
   overflow, which drew a scrollbar beside the tabs (the owner, Oct 2026). */
.pd-tabs { display: flex; gap: 2px; flex-wrap: wrap; border-bottom: 1px solid var(--border); margin: 18px 0; }
.pd-tab-btn { border: none; background: transparent; color: var(--muted); padding: 11px 16px; cursor: pointer; font-size: 14px; font-weight: 600; border-bottom: 2px solid transparent; white-space: nowrap; margin-bottom: -1px; border-radius: 8px 8px 0 0; }
.pd-tab-btn:hover { color: var(--text); background: var(--surface-2); }
.pd-tab-btn.active { color: var(--brand); border-bottom-color: var(--brand); }
.tab-flag { display: inline-block; padding: 1px 7px; border-radius: 10px; background: #f97316; color: #fff; font-size: 11px; font-weight: 700; margin-left: 4px; }
.tab-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; background: var(--brand); margin-left: 3px; vertical-align: middle; }

/* Treatment Plans — proposal (quotation) vs accepted treatment, kept visibly
   apart. Proposed is orange (quote only, nothing billed); Accepted is green. */
.plan-tabs { display: flex; gap: 8px; margin: 2px 0 14px; }
.plan-tab { flex: 1; border: 1.5px solid var(--border); background: transparent; color: var(--muted);
  padding: 9px 14px; cursor: pointer; font-size: 13.5px; font-weight: 700; border-radius: 10px; white-space: nowrap; }
.plan-tab:hover { color: var(--text); background: var(--surface-2); }
.plan-tab .pt-n { display: inline-block; min-width: 20px; padding: 1px 7px; border-radius: 10px;
  background: var(--surface-2); font-size: 11.5px; margin-left: 6px; }
.plan-tab.pt-proposed.active { color: #f97316; border-color: #f97316;
  background: color-mix(in srgb, #f97316 10%, transparent); }
.plan-tab.pt-proposed.active .pt-n { background: #f97316; color: #fff; }
.plan-tab.pt-accepted.active { color: #16a34a; border-color: #16a34a;
  background: color-mix(in srgb, #16a34a 10%, transparent); }
.plan-tab.pt-accepted.active .pt-n { background: #16a34a; color: #fff; }
.plan-tab.pt-rejected.active { color: var(--danger); border-color: var(--danger);
  background: color-mix(in srgb, var(--danger) 10%, transparent); }

/* Privilege checklist (Users → 🔐 Privileges) — department accordion:
   the master tick grants the department, the row drops down its modules. */
.priv-dept { border: 1px solid var(--border); border-radius: 10px; margin: 0 0 8px; overflow: hidden; }
.priv-dept-head { display: flex; align-items: center; gap: 9px; padding: 9px 12px; cursor: pointer; }
.priv-dept-head:hover { background: var(--surface-2); }
.priv-dept-name { font-size: 13px; flex: 1; }
.pd-count { font-size: 11.5px; }
.pd-arrow { color: var(--muted); font-size: 12px; }
.priv-dept-body { padding: 2px 12px 8px; border-top: 1px solid var(--border); }
.priv-row { display: flex; align-items: center; gap: 12px; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.priv-row:last-child { border-bottom: none; }
.priv-name { flex: 1; min-width: 0; }
.priv-row .dept-check { white-space: nowrap; font-size: 12px; }
.priv-quick { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 12px;
  background: color-mix(in srgb, var(--brand) 5%, transparent); }

/* Smile Rewards tier badge — the luxury marque on the patient header */
.tier-badge { display: inline-flex; align-items: center; gap: 6px; padding: 5px 14px;
  border-radius: 999px; font-family: Georgia, "Times New Roman", serif;
  font-size: 12.5px; font-weight: 700; letter-spacing: 1.6px;
  color: #fff; text-shadow: 0 1px 2px rgba(0,0,0,.25);
  box-shadow: inset 0 1px 0 rgba(255,255,255,.35), 0 2px 8px rgba(0,0,0,.18); }
.tier-badge em { font-style: normal; font-family: -apple-system, "Segoe UI", Roboto, sans-serif;
  font-size: 11px; font-weight: 800; letter-spacing: .4px; opacity: .95;
  border-left: 1px solid rgba(255,255,255,.45); padding-left: 8px; }
.tier-badge.tb-platinum { background: linear-gradient(135deg, #6d7b8d, #aebccd 45%, #8e9db0 55%, #5c6a7c); }
.tier-badge.tb-gold { background: linear-gradient(135deg, #a37b1e, #e6c157 45%, #c99f35 55%, #8f6a14); }
.tier-badge.tb-silver { background: linear-gradient(135deg, #7c8792, #b9c2cb 45%, #9aa5b0 55%, #6b7681); }
.tier-badge.tb-blue { background: linear-gradient(135deg, #0e5f58, #14b8a6 50%, #0c7268); }

/* Patient loyalty — the visible mechanism on the patient record */
.lp-cols { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; }
@media (max-width: 760px) { .lp-cols { grid-template-columns: 1fr; } }
.lp-row { display: flex; align-items: baseline; gap: 8px; padding: 5px 0; border-bottom: 1px solid var(--border); font-size: 12.5px; }
.lp-row:last-child { border-bottom: none; }
.lp-row > span:first-child { flex: 1; min-width: 0; }
.lp-pts.pos { color: var(--success); }
.lp-pts.neg { color: var(--danger); }

/* Prescription pad — line editor (New Prescription + Settings templates).
   Small and dense like medyCN's consumption-time row. */
.rx-line { border: 1px solid var(--border); border-radius: 9px; padding: 7px 10px; margin-bottom: 8px; }
.rx-line-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin-bottom: 6px; font-size: 13px; }
.rx-line-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(62px, 1fr)); gap: 6px; }
.rx-line-grid label { display: flex; flex-direction: column; gap: 2px; font-size: 10.5px; color: var(--muted); font-weight: 600; }
.rx-line-grid input, .rx-line-grid select { width: 100%; padding: 5px 7px; border: 1px solid var(--border);
  border-radius: 7px; background: var(--surface); color: var(--text); font-size: 12.5px; }
.rx-line-grid .rx-notes { grid-column: span 2; }
.rx-qty { font-size: 11px; margin-top: 5px; }
.rx-med-row { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  padding: 8px 2px; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.rx-med-row:last-child { border-bottom: none; }
.rx-med-row.off > span:first-child { opacity: .55; }

/* Treatment journeys — multi-visit pathways */
.journey { border: 1px solid var(--border); border-radius: 11px; padding: 14px; margin-bottom: 14px; }
.journey.j-active { border-left: 4px solid #f97316; background: color-mix(in srgb, #f97316 4%, transparent); }
.journey-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin-bottom: 10px; flex-wrap: wrap; }
.j-stages { display: flex; flex-direction: column; gap: 6px; }
.j-stage { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border-radius: 8px; font-size: 13.5px; flex-wrap: wrap; }
.j-stage .j-mark { width: 18px; text-align: center; font-weight: 700; }
.j-stage .j-name { flex: 1; min-width: 140px; }
.j-stage .j-due { color: var(--muted); font-size: 12.5px; }
.j-done { color: var(--muted); }
.j-done .j-mark { color: #16a34a; }
.j-current { background: color-mix(in srgb, #f97316 10%, transparent); font-weight: 600; }
.j-current .j-mark { color: #f97316; }
.j-pending { opacity: .75; }
.j-preview { margin: 4px 0 12px; padding: 10px 12px; background: var(--surface-2); border-radius: 9px; font-size: 12.5px; color: var(--muted); }
.j-preview-row { padding: 1px 0; }

/* Commission ladder editor */
.comm-rule { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.comm-scope { margin-bottom: 6px; font-size: 13px; }

/* Doctor loyalty */
.loy-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(310px, 1fr)); gap: 14px; }
.loy-card { display: flex; flex-direction: column; gap: 8px; }
.loy-top { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; }
.loy-badge { color: #fff; font-size: 11px; font-weight: 700; padding: 3px 10px; border-radius: 20px; letter-spacing: .3px; white-space: nowrap; }
.loy-points { display: flex; align-items: baseline; gap: 8px; }
.loy-num { font-size: 26px; font-weight: 700; }
.loy-next { font-size: 12px; }
.loy-perks { font-size: 12px; background: var(--surface-2); border-radius: 8px; padding: 7px 10px; }
.loy-comm { font-size: 12px; }
.loy-bd { display: flex; gap: 5px; flex-wrap: wrap; }
.loy-acts { display: flex; gap: 6px; flex-wrap: wrap; margin-top: 2px; }
.loy-qual { font-size: 12px; }
/* .bar-track is flex:1 for the horizontal rows it was written for; inside this
   column card that made it grow VERTICALLY whenever a taller neighbour
   stretched the row. Pin it back to a bar. */
.loy-card .bar-track { flex: none; height: 10px; }
.loy-held { border-color: #f59e0b; }
.loy-hold { font-size: 12px; background: #fef3c7; color: #92400e; border-radius: 8px; padding: 7px 10px; line-height: 1.45; }
:root[data-theme="dark"] .loy-hold { background: #4a3410; color: #fcd34d; }
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) .loy-hold { background: #4a3410; color: #fcd34d; }
}
.lab-remake { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 8px; }
.lq-row { font-size: 13px; line-height: 2.1; background: var(--surface-2); border-radius: 8px; padding: 8px 12px; }

/* Smart treatment picker — search opens inside the Treatment field itself */
.tx-combo { position: relative; }
.tx-list { position: absolute; top: 100%; left: 0; right: 0; z-index: 250;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); max-height: 260px; overflow-y: auto; margin-top: 4px; }
.tx-cat { position: sticky; top: 0; padding: 6px 12px; font-size: 10.5px; font-weight: 700;
  text-transform: uppercase; letter-spacing: .5px; color: var(--muted);
  background: var(--surface-2); border-bottom: 1px solid var(--border); }
.tx-item { display: flex; justify-content: space-between; align-items: center; gap: 10px;
  width: 100%; text-align: left; padding: 9px 12px; background: none; border: none;
  border-bottom: 1px solid var(--border); cursor: pointer; color: var(--text); font-size: 13.5px; }
.tx-item:last-child { border-bottom: none; }
.tx-item:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.tx-item small { color: var(--muted); white-space: nowrap; }

/* Team directory + doctor profile */
.staff-dot { display: inline-block; width: 11px; height: 11px; border-radius: 50%; }
/* Employee photos: a small round avatar in the directory, a bigger one in the
   edit form (falls back to initials until a photo is uploaded). */
.staff-photo-sm { width: 30px; height: 30px; border-radius: 50%; object-fit: cover; display: block; background: var(--surface-2); }
.staff-photo-sm.ring { border: 2px solid var(--muted); box-sizing: border-box; }
.staff-photo-edit { display: flex; align-items: center; gap: 14px; margin: 2px 0 14px; }
.staff-photo-av { width: 64px; height: 64px; border-radius: 50%; overflow: hidden; flex-shrink: 0;
  display: flex; align-items: center; justify-content: center; background: var(--surface-2);
  color: var(--muted); font-weight: 700; font-size: 20px; border: 1px solid var(--border); }
.staff-photo-av img { width: 100%; height: 100%; object-fit: cover; }
/* Item images: the picker/stock-list thumbnail and the item form's preview. */
.item-thumb { width: 34px; height: 34px; border-radius: 6px; object-fit: cover; vertical-align: middle; margin-right: 6px; background: var(--surface-2, #f3f4f6); }
.item-img-av { width: 64px; height: 64px; border-radius: 10px; overflow: hidden; flex-shrink: 0; display: flex; align-items: center; justify-content: center; font-size: 26px; background: var(--surface-2, #f3f4f6); border: 1px solid var(--border, #e5e7eb); }
.item-img-av img { width: 100%; height: 100%; object-fit: cover; }
tr.row-off { opacity: .55; }
/* Category band that groups the directory by role (Doctors, Front Desk, …). */
tr.cat-row td { background: var(--surface-2); font-weight: 600; font-size: 12px;
  letter-spacing: .03em; text-transform: uppercase; color: var(--muted);
  padding-top: 12px; padding-bottom: 6px; border-bottom: 2px solid var(--border); }
tr.cat-row:hover td { background: var(--surface-2); }
.day-picks { display: flex; gap: 6px; flex-wrap: wrap; }
.day-pick { display: inline-flex; align-items: center; gap: 5px; padding: 6px 10px; border: 1px solid var(--border);
  border-radius: 8px; font-size: 12.5px; cursor: pointer; background: var(--surface-2); }
.day-pick input { margin: 0; }
.day-pick:has(input:checked) { border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.color-picks { display: flex; gap: 8px; flex-wrap: wrap; align-items: center; }
.color-pick { width: 30px; height: 30px; border-radius: 8px; cursor: pointer; position: relative;
  border: none; box-shadow: inset 0 0 0 2px transparent; }
.color-pick input { position: absolute; inset: 0; opacity: 0; cursor: pointer; }
.color-pick:has(input:checked) { box-shadow: 0 0 0 2px var(--surface), 0 0 0 4px var(--text); }
.color-input { width: 46px; height: 32px; padding: 0; border: 1px solid var(--border); border-radius: 8px; background: none; cursor: pointer; }

.lab-list { display: flex; flex-direction: column; gap: 8px; max-height: 220px; overflow-y: auto; }
.lab-row { background: var(--surface-2); border-radius: 9px; padding: 9px 12px; }

/* Invoice modal (patient Accounts tab) */
/* The invoice modal's summary. The owner (Sep 2026): "Description should be on
   the same line with the amount — Subtotal Rs 5,000.00, Discount Rs 500.00…".
   It had been picking up the invoice PAGE's .inv-totals (further down this
   file), which stacks a small caps label above a 20px figure — right for three
   side-by-side tiles in a page header, wrong for a six-row summary you read
   down. Its own class now, so the two can never collide again. */
.inv-sum { margin: 12px 0 4px; display: flex; flex-direction: column; gap: 4px;
  max-width: 320px; margin-left: auto; }
.inv-sum > div { display: flex; justify-content: space-between; align-items: baseline;
  gap: 16px; font-size: 13.5px; }
.inv-sum > div > span { color: var(--muted); }
.inv-sum > div > strong { font-variant-numeric: tabular-nums; }
.inv-sum .inv-sum-bal { border-top: 2px solid var(--brand); margin-top: 3px; padding-top: 6px;
  font-weight: 700; font-size: 15px; }
.inv-sum .inv-sum-bal > span { color: var(--text); }
.pay-row { display: flex; justify-content: space-between; gap: 10px; font-size: 13px; padding: 5px 0; border-bottom: 1px dashed var(--border); }
.inv-pay { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.inv-pay input[name="amount"] { flex: 1; min-width: 110px; }
.mini .num, .mini th.num { text-align: right; }

/* In-app confirm dialog (native confirm() is unreliable in embedded browsers) */
.uiconfirm-wrap { position: fixed; inset: 0; background: rgba(0,0,0,.45); display: flex; align-items: center; justify-content: center; z-index: 400; padding: 20px; }
.uiconfirm { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 20px 22px; max-width: 420px; width: 100%; box-shadow: var(--shadow); }
.uiconfirm p { margin: 0 0 16px; font-size: 14.5px; line-height: 1.45; white-space: pre-line; }
.uiconfirm-btns { display: flex; gap: 10px; justify-content: flex-end; }

/* Journey pathway editor */
.jt-head, .jt-row { display: grid; grid-template-columns: 20px 1fr 68px 118px auto; gap: 6px; align-items: center; }
.jt-head { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; margin: 10px 0 4px; }
.jt-row { margin-bottom: 6px; }
.jt-row input { padding: 8px 10px; }
.jt-handle { cursor: grab; color: var(--muted); text-align: center; user-select: none; font-size: 15px; line-height: 1; }
.jt-handle:active { cursor: grabbing; }
.jt-acts { display: flex; gap: 2px; }
.jt-row.jt-dragging { opacity: .4; }
.jt-row.jt-over { outline: 2px dashed var(--brand, #0f766e); outline-offset: 1px; border-radius: 6px; }

/* A field the system auto-selected and the current user may not change (no override
   authority): reads as locked, not broken. */
.auto-locked { opacity: .72; cursor: not-allowed; background: var(--surface-2, #f1f5f9); }

/* Aligner journey tracker — package/tray/pattern chips + a wear-progress bar. */
.al-track { margin: 4px 0 8px; padding: 8px 10px; border: 1px solid var(--line, #e2e8f0); border-radius: 8px; background: var(--surface-2, #f8fafc); }
.al-chips { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.al-chip { font-size: 11.5px; background: var(--surface, #fff); border: 1px solid var(--line, #e2e8f0); border-radius: 999px; padding: 2px 9px; white-space: nowrap; }
.al-prog { margin-top: 8px; }
.al-bar { height: 8px; border-radius: 999px; background: var(--line, #e2e8f0); overflow: hidden; }
.al-bar span { display: block; height: 100%; background: var(--brand, #0f766e); border-radius: 999px; }
.al-prog-lbl { font-size: 12px; color: var(--text); margin-top: 4px; }
.al-prog-lbl.muted { color: var(--muted); }

/* Toast — bottom-center confirmation of automatic actions */
.toast { position: fixed; left: 50%; bottom: 26px; transform: translateX(-50%) translateY(20px); background: var(--text); color: var(--surface); padding: 11px 18px; border-radius: 11px; font-size: 13.5px; box-shadow: var(--shadow); opacity: 0; pointer-events: none; transition: all .25s ease; z-index: 300; max-width: 90vw; }
.toast.show { opacity: 1; transform: translateX(-50%) translateY(0); }

/* Uploads + lab attachments */
.upl-prog { height: 6px; background: var(--surface-2); border-radius: 4px; overflow: hidden; margin: 8px 0; }
.upl-bar { height: 100%; width: 40%; background: var(--brand); border-radius: 4px; animation: uplSlide 1.1s ease-in-out infinite; }
@keyframes uplSlide { 0% { margin-left: -40%; } 100% { margin-left: 100%; } }
.lab-file { display: flex; justify-content: space-between; align-items: center; gap: 10px; padding: 7px 10px;
  background: var(--surface-2); border-radius: 8px; margin-bottom: 6px; font-size: 13px; }
.lab-upl { display: flex; gap: 8px; align-items: center; margin-top: 8px; flex-wrap: wrap; }
.lab-upl input[type=file] { flex: 1; min-width: 150px; font-size: 12px; }

/* Laboratory job detail */
.lab-steps { display: flex; gap: 6px; flex-wrap: wrap; }
.lab-step.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.lab-thread { display: flex; flex-direction: column; gap: 8px; max-height: 260px; overflow-y: auto; padding: 4px 0; }
.lab-msg { background: var(--surface-2); border-radius: 9px; padding: 8px 12px; font-size: 13.5px; }
.lab-msg-head { display: flex; justify-content: space-between; gap: 10px; margin-bottom: 3px; }
.lab-send { display: flex; gap: 8px; margin-top: 10px; }
.lab-send input { flex: 1; }
.pd-tab-panel { display: none; }
.pd-tab-panel.active { display: block; animation: fadeIn .18s ease; }

/* ---- Lab portal (/lab) ---- */
.lab-wrap { max-width: 860px; margin: 0 auto; }
.lab-head { display: flex; align-items: baseline; justify-content: space-between; margin-bottom: 14px; }
.lab-head h2 { margin: 0; }
.lab-cards { display: grid; gap: 12px; }
.lab-card { background: var(--surface); border: 1px solid var(--border); border-radius: 14px; padding: 15px 17px; }
.lab-card-top { display: flex; align-items: center; justify-content: space-between; gap: 10px; margin-bottom: 6px; }
.lab-meta { font-size: 13.5px; margin-bottom: 11px; }
.lab-step { display: inline-flex; align-items: center; font-size: 12px; padding: 4px 10px; border-radius: 999px;
  border: 1px solid var(--border); background: var(--surface-2); color: var(--muted); white-space: nowrap; }
.lab-step.done { color: var(--brand); border-color: color-mix(in srgb, var(--brand) 40%, transparent); }
.lab-step.now { background: var(--brand); color: #fff; border-color: var(--brand); font-weight: 600; }
.lab-step.click { cursor: pointer; }
.lab-step.click:hover { background: var(--brand); color: #fff; border-color: var(--brand); }
.lab-arrow { color: var(--muted); font-size: 12px; padding: 0 1px; }
.lab-card-foot { display: flex; gap: 8px; margin-top: 12px; flex-wrap: wrap; }
.btn.small { padding: 6px 12px; font-size: 13px; }
.lab-msg.mine { background: color-mix(in srgb, var(--brand) 12%, var(--surface-2)); }
.lab-msg-who { font-size: 11.5px; color: var(--muted); margin-bottom: 3px; }
.lab-msg-form { display: flex; gap: 8px; margin-top: 12px; }
.lab-msg-form input { flex: 1; }
@media (max-width: 560px) { .lab-steps { gap: 3px; } .lab-arrow { display: none; } }
.pd-tab-panel .pd-columns { margin-top: 0; }
@keyframes fadeIn { from { opacity: 0; transform: translateY(4px); } to { opacity: 1; transform: none; } }

.note { border-left: 3px solid var(--accent); padding: 10px 14px; margin-bottom: 12px; background: var(--surface-2); border-radius: 0 9px 9px 0; }
.note-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 6px; }
.note-head small { color: var(--muted); font-size: 11px; }
.note p { font-size: 13px; }
.soap { display: flex; flex-direction: column; gap: 6px; }
.soap-row { display: flex; gap: 10px; align-items: baseline; }
.soap-row span { flex-shrink: 0; width: 18px; height: 18px; border-radius: 5px; background: var(--accent); color: #fff; font-size: 11px; font-weight: 700; display: grid; place-items: center; }
.soap-row p { font-size: 12.5px; margin: 0; }

.plan { border: 1px solid var(--border); border-radius: 11px; padding: 14px; margin-bottom: 14px; }
.plan.plan-active { border-left: 4px solid #f97316; background: color-mix(in srgb, #f97316 4%, transparent); }
.plan-head { display: flex; justify-content: space-between; align-items: flex-start; margin-bottom: 10px; }
.plan-head small { color: var(--muted); }
.plan-foot { display: flex; align-items: center; justify-content: space-between; gap: 10px; border-top: 1px solid var(--border); padding-top: 10px; flex-wrap: wrap; }
.plan-foot .muted { font-size: 13px; }
.btn.plan-approve { background: var(--success, #16a34a); }
.plan-approved { border-top: 1px solid var(--border); padding-top: 10px; color: var(--success, #16a34a); font-weight: 600; font-size: 13px; }
table.mini { width: 100%; margin: 8px 0; }
table.mini th, table.mini td { padding: 6px 8px; font-size: 12px; }
table.mini th { text-transform: none; letter-spacing: 0; }
.plan-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 8px; }
.mini-btn { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 7px; padding: 4px 10px; font-size: 11.5px; cursor: pointer; }
.mini-btn:hover { border-color: var(--brand); color: var(--brand); }
.mini-btn[disabled] { opacity: .4; cursor: not-allowed; }
.mini-btn[disabled]:hover { border-color: var(--border); color: var(--muted); }
.mini-btn.on { background: var(--brand); color: #fff; border-color: var(--brand); }

/* A single "☑ I agree to…" row: a bordered tick box in the brand colour with the
   sentence beside it, standing on its own between two fields. Never inside a
   .field — that rule stretches every input to 100% width, which is what made
   the New Patient form's Welcome SMS box look broken (Sep 2026). */
.tick-row { display: flex; align-items: center; gap: 12px; margin: 2px 0 16px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); font-size: 13.5px; color: var(--text); line-height: 1.35; cursor: pointer; }
.tick-row input[type="checkbox"] { width: 20px; height: 20px; min-width: 20px; margin: 0; accent-color: var(--brand); cursor: pointer; }
.tick-row small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.fa-hidden-tick { display: inline-flex; align-items: center; gap: 6px; height: 38px; padding: 0 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); font-size: 13px; color: var(--text); cursor: pointer; white-space: nowrap; }
.fa-hidden-tick input[type="checkbox"] { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
.consent-row { display: flex; justify-content: space-between; align-items: center; padding: 10px 0; border-bottom: 1px solid var(--border); gap: 10px; }
.consent-row:last-child { border-bottom: none; }
.consent-row small { display: block; color: var(--muted); font-size: 11px; margin-top: 2px; }
.consent-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; }

.item-row { display: grid; grid-template-columns: 1fr 70px 90px auto; gap: 8px; margin-bottom: 8px; }
.item-row select, .item-row input { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); font-size: 12.5px; }
/* Package steps: free-text description + price + remove */
.item-row.step-row { grid-template-columns: 1fr 90px auto; }

/* Receive stock (GRN). The owner (Sep 2026): "resize GRN, remove the left
   right scroll, rather try to make window wider and bigger, seen in one
   glance." Nine controls per delivery line never fitted the default 520px
   card, so the row grew its own sideways scrollbar and half the columns sat
   off-screen. On the xwide card (1400px) they all fit on one line — tighter
   padding, and a header strip above so each box is identifiable without
   hovering for its tooltip. */
.grn-row { grid-template-columns: minmax(220px, 1fr) 104px 96px 72px 112px 180px 30px;
  gap: 6px; align-items: center; }
.grn-row select, .grn-row input { padding: 7px 8px; font-size: 12px; }
/* The GRN's purchase-order picker: every open order for the chosen supplier,
   tickable, several at once (the owner, Sep 2026). A scrolling box rather than
   a long list, so a supplier with twenty open orders cannot push the delivery
   lines off the card. */
.grn-po-box { display: flex; flex-wrap: wrap; gap: 6px; max-height: 108px; overflow-y: auto;
  border: 1px solid var(--border); border-radius: 8px; padding: 8px; background: var(--surface-2); }
.grn-po { display: flex; gap: 6px; align-items: center; font-size: 12px; cursor: pointer;
  border: 1px solid var(--border); border-radius: 7px; padding: 4px 9px; background: var(--surface); }
.grn-po:hover { border-color: var(--brand); }
.grn-po small { display: block; font-size: 10.5px; }

.grn-head { display: grid; grid-template-columns: minmax(220px, 1fr) 104px 96px 72px 112px 180px 30px;
  gap: 6px; margin-bottom: 4px; color: var(--muted); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .04em; }
/* PO-backed receiving rows (the owner, Sep 2026): read-only item / pending /
   PO no, a whole-number received qty filled from the batch popup, the rate,
   an item-wise discount % and the line total; then Total discount / Total
   value at the foot. */
.grn-head-po, .grn-po-row { display: grid;
  grid-template-columns: minmax(170px, 1.6fr) 74px 104px 96px 88px 72px 64px 104px 112px 30px;
  gap: 6px; align-items: center; }
.grn-head-po { margin-bottom: 4px; color: var(--muted); font-size: 10.5px;
  text-transform: uppercase; letter-spacing: .04em; }
.grn-po-row { margin-bottom: 6px; }
.grn-po-row .grn-ro { font-size: 12px; padding: 4px 4px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.grn-po-row .grn-ro.num { text-align: right; font-variant-numeric: tabular-nums; }
.grn-po-row .grn-qty-btn { padding: 6px 6px; font-size: 12px; width: 100%; white-space: nowrap; }
.grn-po-row select, .grn-po-row input { padding: 7px 8px; font-size: 12px; }
.grn-foot { margin: 4px 0 12px; font-size: 13px; }
.grn-foot[hidden] { display: none; }
.grn-foot .po-sum { margin-top: 4px; }
.grn-foot strong { font-variant-numeric: tabular-nums; }
.batch-row { display: grid; grid-template-columns: 1fr 96px 150px 30px; gap: 6px; align-items: center; margin-bottom: 6px; }
.batch-row.no-exp { grid-template-columns: 1fr 96px 30px; }
.batch-head { display: grid; grid-template-columns: 1fr 96px 150px 30px; gap: 6px; margin-bottom: 4px;
  color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; }
.batch-row input { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface-2); color: var(--text); font-size: 13px; font-family: inherit; min-width: 0; }

/* ---------- Recalls worklist ---------- */
.recall-groups { display: flex; flex-direction: column; gap: 20px; }
.recall-group h3 { font-size: 14px; margin-bottom: 12px; }
.recall-row { display: grid; grid-template-columns: 180px 1fr auto; gap: 14px; align-items: center;
  background: var(--surface); border: 1px solid var(--border); border-radius: 11px; padding: 12px 16px;
  margin-bottom: 8px; box-shadow: var(--shadow); }
.recall-when { display: flex; flex-direction: column; gap: 5px; align-items: flex-start; }
.recall-when strong { font-size: 13.5px; }
.recall-who strong { font-size: 13.5px; display: block; }
.recall-who small { color: var(--muted); font-size: 12px; }
.recall-actions { display: flex; align-items: center; gap: 8px; flex-shrink: 0; flex-wrap: wrap; justify-content: flex-end; }
.recall-log-meta { display: block; margin-top: 4px; font-size: 11.5px; color: var(--brand-dark); }
.recall-log-meta.muted { color: var(--muted); }
.mini-btn.ghost { background: var(--surface-2); }
tr.row-alert td { background: color-mix(in srgb, var(--danger) 8%, transparent); }
/* A delivery whose supplier has been paid (GRN register, Sep 2026: "highlight the payment done"). */
tr.row-paid td { background: color-mix(in srgb, var(--success) 8%, transparent); }
/* The GRN card's header facts (Sep 2026): label over value, as many across as fit. */
.grn-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(150px, 1fr)); gap: 10px 16px; margin: 4px 0 12px; }
.grn-facts .k { font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); }
.grn-facts .v { font-size: 13.5px; font-weight: 600; }
.grn-facts .v small { font-weight: 400; color: var(--muted); }
.grn-pix { display: flex; flex-wrap: wrap; gap: 8px; }
.grn-pix .pic { display: flex; flex-direction: column; align-items: center; gap: 4px; width: 118px; font-size: 11px; }
.grn-pix .pic img { width: 118px; height: 88px; object-fit: cover; border-radius: 6px; border: 1px solid var(--border); }
.grn-pix .pic .doc { width: 118px; height: 88px; display: flex; align-items: center; justify-content: center; border-radius: 6px; border: 1px solid var(--border); background: var(--surface-2); font-size: 28px; }
tr.row-warn td { background: color-mix(in srgb, var(--warn) 9%, transparent); }
tr.fee-cat td { background: var(--surface-2); font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); }

/* ---------- Task board (Kanban) ---------- */
.kanban { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.kanban-col { background: var(--surface-2); border-radius: 12px; padding: 10px; }
.kanban-head { font-size: 12px; font-weight: 700; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); padding: 4px 6px 10px; }
.kanban-cards { display: flex; flex-direction: column; gap: 10px; }
.kanban-empty { color: var(--muted); text-align: center; padding: 14px; font-size: 13px; }
.task-card { background: var(--surface); border: 1px solid var(--border); border-left: 3px solid var(--accent); border-radius: 9px; padding: 10px 12px; box-shadow: var(--shadow); }
.task-card.overdue { border-left-color: var(--danger); }
.task-top { display: flex; gap: 6px; margin-bottom: 6px; }
.task-title { font-size: 13.5px; font-weight: 600; line-height: 1.35; }
.task-desc { font-size: 12px; color: var(--muted); margin-top: 3px; }
.task-meta { font-size: 11.5px; color: var(--muted); margin-top: 8px; }
.task-actions { display: flex; gap: 6px; margin-top: 10px; flex-wrap: wrap; }
@media (max-width: 760px) { .kanban { grid-template-columns: 1fr; } }

/* ---------- Monthly targets ---------- */
.target-card { display: flex; flex-direction: column; }
.target-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.target-nums { margin: 8px 0 10px; }
.target-actual { font-size: 26px; font-weight: 800; }
.target-bar { position: relative; height: 12px; background: var(--surface-2); border-radius: 8px; overflow: hidden; }
.target-fill { height: 100%; border-radius: 8px; transition: width .3s; background: var(--brand); }
.target-fill.green { background: var(--success); } .target-fill.amber { background: var(--warn); } .target-fill.red { background: var(--danger); }
.target-pace { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--text); opacity: .55; z-index: 2; }

/* ---------- Waiting room board ---------- */
.wr-board { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; align-items: start; }
.wr-col { background: var(--surface-2); border-radius: 12px; padding: 10px; }
.wr-head { font-size: 13px; font-weight: 700; padding: 6px 10px; border-radius: 8px; margin-bottom: 10px; display: flex; justify-content: space-between; align-items: center; }
.wr-head.blue { background: color-mix(in srgb, var(--accent) 16%, transparent); color: var(--accent); }
.wr-head.amber { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.wr-head.green { background: color-mix(in srgb, var(--success) 16%, transparent); color: var(--success); }
.wr-head span { background: var(--surface); border-radius: 20px; min-width: 22px; text-align: center; padding: 1px 7px; font-size: 12px; }
.wr-cards { display: flex; flex-direction: column; gap: 10px; }
.wr-empty { color: var(--muted); text-align: center; padding: 16px; font-size: 13px; }
.wr-card { background: var(--surface); border: 1px solid var(--border); border-radius: 9px; padding: 11px 12px; box-shadow: var(--shadow); cursor: pointer; transition: transform .05s; }
.wr-card:active { transform: scale(.98); }
.wr-top { display: flex; justify-content: space-between; align-items: center; }
.wr-time { font-weight: 700; font-size: 13px; }
.wr-name { font-size: 15px; font-weight: 600; margin-top: 4px; }
.wr-sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
@media (max-width: 760px) { .wr-board { grid-template-columns: 1fr; } }

/* ---------- Patient tags / segments ---------- */
.chip.tag-chip { background: color-mix(in srgb, var(--accent) 15%, transparent); color: var(--accent); border: 1px solid color-mix(in srgb, var(--accent) 30%, transparent); }
.tag-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin-bottom: 14px; }
.tag-picks { display: flex; flex-wrap: wrap; gap: 8px; }

/* ---------- Patient communication log ---------- */
.comm-list { display: flex; flex-direction: column; }
.comm-item { display: flex; gap: 10px; padding: 10px 0; border-bottom: 1px solid var(--border); }
.comm-item:last-child { border-bottom: none; }
.comm-ico { font-size: 15px; line-height: 1.4; }
.comm-line { font-size: 12.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.comm-line .muted { font-size: 11.5px; }
.comm-summary { font-size: 13px; margin: 3px 0; }
.comm-by { font-size: 11px; }

.dc-total { display: flex; justify-content: space-between; align-items: center; margin-top: 10px; padding-top: 10px; border-top: 2px solid var(--brand); font-size: 15px; color: var(--brand-dark); }

/* ---------- Duplicate check ---------- */
.dup-groups { display: flex; flex-direction: column; gap: 14px; }
.dup-group { padding: 14px 16px; }
.dup-reason { margin-bottom: 10px; display: flex; align-items: center; gap: 8px; }
.dup-member { display: grid; grid-template-columns: 1fr auto; align-items: center; gap: 4px 12px; padding: 10px 0; border-bottom: 1px solid var(--border); cursor: pointer; }
.dup-member:last-child { border-bottom: none; }
.dup-member:hover { background: var(--surface-2); }
.dup-member small { grid-column: 1; }
.dup-member .row-open { grid-row: 1 / span 2; grid-column: 2; color: var(--brand); font-size: 12.5px; }

/* ---------- Command palette (⌘K) ---------- */
.cmdk-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.45); z-index: 200; display: flex; align-items: flex-start; justify-content: center; padding-top: 12vh; backdrop-filter: blur(2px); }
.cmdk { width: min(560px, 92vw); background: var(--surface); border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 20px 60px rgba(0,0,0,.35); overflow: hidden; }
.cmdk-input { width: 100%; border: none; border-bottom: 1px solid var(--border); background: transparent; color: var(--text); padding: 16px 18px; font-size: 15px; font-family: inherit; outline: none; }
.cmdk-list { max-height: 52vh; overflow-y: auto; padding: 6px; }
.cmdk-item { display: flex; align-items: center; gap: 10px; padding: 9px 12px; border-radius: 8px; cursor: pointer; font-size: 13.5px; }
.cmdk-item.active { background: color-mix(in srgb, var(--brand) 14%, transparent); }
.cmdk-ico { width: 20px; text-align: center; }
.cmdk-label { font-weight: 600; }
.cmdk-sub { margin-left: auto; color: var(--muted); font-size: 11.5px; white-space: nowrap; }
.cmdk-empty { padding: 18px; text-align: center; color: var(--muted); font-size: 13px; }
.cmdk-foot { display: flex; gap: 16px; padding: 8px 14px; border-top: 1px solid var(--border); font-size: 11px; color: var(--muted); }

/* ---------- Team performance ---------- */
.team-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(300px, 1fr)); gap: 16px; }
.team-card { display: flex; flex-direction: column; gap: 12px; }
.team-top { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.team-prodbar { display: flex; align-items: center; gap: 10px; }
.team-prodbar .bar-track { flex: 1; }
.team-prodbar .amt { font-size: 13px; font-weight: 700; white-space: nowrap; }
.team-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(80px, 1fr)); gap: 10px; }
.team-stats > div { display: flex; flex-direction: column; gap: 2px; }
.team-stats .ts-n { font-size: 16px; font-weight: 700; }
.team-stats .ts-l { font-size: 10.5px; color: var(--muted); text-transform: uppercase; letter-spacing: .3px; }

/* Staff roster */
.roster-table { table-layout: fixed; }
.roster-table th, .roster-table td { text-align: center; }
.roster-table th.rc-name { text-align: left; width: 150px; }
.roster-table thead th { font-size: 12px; line-height: 1.3; }
.roster-table td.rc-cell { cursor: pointer; height: 44px; padding: 4px; border-radius: 6px; transition: background .12s; position: relative; }
.roster-table td.rc-cell:hover { background: var(--hover, rgba(127,127,127,.12)); }
.roster-table .rc-name { font-size: 13px; }
.roster-table .sh-lbl { font-size: 13px; font-weight: 600; }
.rc-cell.sh-on .sh-lbl { color: var(--accent); }
.rc-cell.sh-off .sh-lbl { color: var(--muted); font-weight: 500; }
.rc-cell .sh-dot { position: absolute; top: 3px; right: 5px; color: var(--warn, #d08700); font-size: 14px; line-height: 1; }
.roster-table .rc-today { background: color-mix(in srgb, var(--accent) 10%, transparent); }
/* Frozen header (owner, Oct 2026, with a line drawn under the day row: "We need
   freezing option here"). The Staff / Mon 28 … Sun 04 row stays in view while the
   staff scroll beneath it. `overflow: clip` (not hidden/auto) keeps the rounded
   border WITHOUT making the wrap its own scroller, so the header sticks to the
   PAGE scroll, just under the sticky top bar (--topbar-h, measured by the view).
   A sticky cell must be opaque, so today's tint is mixed onto the header colour
   instead of laid over it, and the row line is a shadow (borders do not travel
   with a sticky cell under border-collapse). */
.table-wrap.roster-wrap { overflow: clip; }
.roster-table thead th { position: sticky; top: var(--topbar-h, 79px); z-index: 4; background: var(--surface-2); box-shadow: inset 0 -1px 0 var(--border); }
.roster-table thead th.rc-today { background: color-mix(in srgb, var(--accent) 10%, var(--surface-2)); }
.rc-nav { display: flex; gap: 6px; }

/* Case-acceptance pipeline */
.btn.tiny { padding: 4px 10px; font-size: 12px; border-radius: 6px; }
.row-actions { white-space: nowrap; text-align: right; }
.row-actions .btn.tiny { margin-left: 4px; }
.att-set { display: flex; flex-wrap: wrap; gap: 4px; justify-content: flex-end; }
/* The register's Mark — worked out on the server, highlighted here, never a button. */
.att-mark { display: inline-block; padding: 3px 10px; border-radius: 999px; font-size: 12px; font-weight: 600;
  border: 1px solid var(--border); color: var(--muted); background: transparent; opacity: .55;
  cursor: default; user-select: none; }
.att-mark.on { opacity: 1; font-weight: 700; }
.att-mark.on.green { background: color-mix(in srgb, var(--success) 18%, transparent); color: var(--success); border-color: var(--success); }
.att-mark.on.amber { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); border-color: var(--warn); }
.att-mark.on.red { background: color-mix(in srgb, var(--danger) 18%, transparent); color: var(--danger); border-color: var(--danger); }
.att-mark.on.blue { background: color-mix(in srgb, var(--accent) 18%, transparent); color: var(--accent); border-color: var(--accent); }
.stars { color: #f5a623; letter-spacing: 1px; font-size: 15px; }
.dept-checks { display: grid; grid-template-columns: 1fr 1fr; gap: 8px 14px; }
.dept-check { display: flex; align-items: center; gap: 8px; font-size: 14px; cursor: pointer; padding: 4px 0; }
.dept-check input { width: 16px; height: 16px; }
/* General ledger entries */
.gl-entry { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin-bottom: 10px; }
.gl-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 6px; font-weight: 600; }
.gl-lines { width: 100%; font-size: 13px; }
.gl-lines td { padding: 3px 6px; }
@media (max-width: 560px) { .dept-checks { grid-template-columns: 1fr; } }
/* Treatments catalog */
.tx-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 12px; }
.tx-card { border: 1px solid var(--border); border-radius: 10px; padding: 12px; cursor: pointer; transition: border-color .12s, background .12s; }
.tx-card:hover { border-color: var(--accent); background: var(--surface-2); }
.tx-top { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; }
.tx-price { font-weight: 700; white-space: nowrap; color: var(--accent); }
.tx-desc { font-size: 12.5px; margin: 6px 0; line-height: 1.4; }
.tx-meta { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 12px; margin-top: 6px; }
a.pat-link { color: var(--accent); text-decoration: none; font-weight: 600; cursor: pointer; }
a.pat-link:hover { text-decoration: underline; }

/* Revenue forecast — week bars */
.fc-bar { position: relative; display: flex; align-items: center; min-width: 140px; height: 26px; background: var(--track, rgba(127,127,127,.12)); border-radius: 6px; overflow: hidden; }
.fc-fill { position: absolute; left: 0; top: 0; bottom: 0; background: color-mix(in srgb, var(--accent) 30%, transparent); border-radius: 6px; }
.fc-bar span { position: relative; padding: 0 10px; font-size: 13px; font-weight: 700; white-space: nowrap; }
.chip-inline { display: inline-block; padding: 0 6px; border-radius: 6px; font-size: 14px; }
.chip-inline.green { color: var(--success); } .chip-inline.amber { color: var(--warn); } .chip-inline.red { color: var(--danger); }

/* ---------- Leave calendar (Gantt timeline) ---------- */
.leave-cal { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius); padding: 8px 14px; box-shadow: var(--shadow); overflow: hidden; }
.lc-row { display: grid; grid-template-columns: 150px 1fr; align-items: center; gap: 12px; padding: 5px 0; }
.lc-label { overflow: hidden; }
.lc-label strong { font-size: 13px; display: block; white-space: nowrap; text-overflow: ellipsis; overflow: hidden; }
.lc-label small { font-size: 11px; color: var(--muted); }
.lc-track { position: relative; height: 26px; background: var(--surface-2); border-radius: 6px;
  background-image: repeating-linear-gradient(90deg, transparent, transparent calc(100%/9 - 1px), var(--border) calc(100%/9 - 1px), var(--border) calc(100%/9)); }
.lc-axisrow .lc-track { background: transparent; height: 20px; }
.lc-axis { overflow: visible; }
.lc-wk { position: absolute; top: 2px; font-size: 10px; color: var(--muted); transform: translateX(2px); white-space: nowrap; }
.lc-bar { position: absolute; top: 3px; height: 20px; border-radius: 5px; font-size: 10px; color: #fff;
  line-height: 20px; padding: 0 6px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; box-shadow: 0 1px 3px rgba(0,0,0,.2); }
.lc-bar.blue { background: var(--accent); } .lc-bar.red { background: var(--danger); }
.lc-bar.purple { background: #7c3aed; } .lc-bar.teal { background: var(--brand); } .lc-bar.gray { background: var(--muted); }
.lc-bar.green { background: #16a34a; }
.lc-bar.pending { opacity: .95; background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.28), rgba(255,255,255,.28) 5px, transparent 5px, transparent 10px); }
.lc-today { position: absolute; top: -2px; bottom: -2px; width: 2px; background: var(--danger); z-index: 3; }
.lc-legend { display: flex; flex-wrap: wrap; gap: 16px; margin-top: 14px; font-size: 12px; color: var(--text); }
.lc-leg { display: inline-flex; align-items: center; gap: 6px; }
.lc-dot { width: 12px; height: 12px; border-radius: 3px; display: inline-block; }
.lc-dot.blue { background: var(--accent); } .lc-dot.red { background: var(--danger); }
.lc-dot.purple { background: #7c3aed; } .lc-dot.teal { background: var(--brand); } .lc-dot.green { background: #16a34a; }
.lc-dot.pending { background-image: repeating-linear-gradient(45deg, rgba(255,255,255,.5), rgba(255,255,255,.5) 3px, transparent 3px, transparent 6px); }

/* ---------- Message templates ---------- */
.tmpl-card { display: flex; flex-direction: column; gap: 10px; }
.tmpl-card.tmpl-off { opacity: .6; }
.tmpl-meta { display: flex; gap: 6px; flex-wrap: wrap; }
.tmpl-subj { font-size: 12.5px; }
.tmpl-body { font-size: 13px; line-height: 1.55; background: var(--surface-2); border-radius: 8px; padding: 10px 12px; color: var(--text); flex: 1; }
.tmpl-actions { display: flex; gap: 8px; }
.merge-tag { display: inline-block; background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand-dark); border-radius: 4px; padding: 0 4px; font-size: 11.5px; font-weight: 600; font-family: ui-monospace, monospace; }
:root[data-theme="dark"] .merge-tag { color: #5eead4; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .merge-tag { color: #5eead4; } }
.recall-history { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; margin: 0 0 8px; padding: 6px 12px; }
.rc-entry { display: flex; gap: 10px; padding: 9px 0; border-bottom: 1px solid var(--border); }
.rc-entry:last-child { border-bottom: none; }
.rc-ico { font-size: 15px; line-height: 1.4; }
.rc-line { font-size: 12.5px; }
.rc-line .muted { margin-left: 6px; font-size: 11.5px; }
.rc-note { font-size: 12.5px; margin: 2px 0; }
.rc-by { font-size: 11px; }
@media (max-width: 720px) { .recall-row { grid-template-columns: 1fr; } }

/* ---------- Appointment calendar ---------- */
.cal-head { display: flex; justify-content: space-between; align-items: center; margin-bottom: 12px; flex-wrap: wrap; gap: 8px 10px; }
.cal-nav { display: flex; align-items: center; gap: 8px; }
.cal-nav .btn { padding: 8px 12px; }
.cal-range { font-size: 14px; font-weight: 700; margin-left: 8px; }
.calendar { display: grid; grid-template-columns: repeat(7, 1fr); gap: 10px; }
.cal-col { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; overflow: hidden; min-height: 220px; }
.cal-col.is-today { border-color: var(--brand); box-shadow: 0 0 0 1px var(--brand); }
.cal-day { padding: 10px; text-align: center; border-bottom: 1px solid var(--border); background: var(--surface-2); }
.cal-day strong { display: block; font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .5px; }
.cal-day span { font-size: 18px; font-weight: 600; }
.cal-col.is-today .cal-day span { color: var(--brand); }
.cal-cards { padding: 8px; display: flex; flex-direction: column; gap: 7px; }
.cal-empty { color: var(--border); text-align: center; padding: 10px 0; }
.appt { border-left: 3px solid var(--muted); background: var(--surface-2); border-radius: 0 8px 8px 0; padding: 7px 9px; display: flex; flex-direction: column; gap: 1px; }
.appt strong { font-size: 12.5px; }
.appt span { font-size: 12px; }
.appt small { font-size: 10.5px; color: var(--muted); }
.appt.green { border-left-color: var(--success); }
.appt.amber { border-left-color: var(--warn); }
.appt.blue { border-left-color: var(--accent); }
.appt.red { border-left-color: var(--danger); }
.appt.clickable { cursor: pointer; transition: background .12s, transform .05s; }
.appt.clickable:hover { background: color-mix(in srgb, var(--brand) 12%, var(--surface-2)); }
.appt.clickable:active { transform: scale(.98); }
.appt-detail .ad-row { display: flex; justify-content: space-between; align-items: center; gap: 12px; padding: 8px 0; border-bottom: 1px solid var(--border); font-size: 13.5px; }
.appt-detail .ad-actions { display: flex; flex-wrap: wrap; gap: 8px; margin-top: 16px; }
.ad-lab-row { display: flex; align-items: center; gap: 8px; padding: 5px 0; font-size: 13px; flex-wrap: wrap; }
.appt-detail .ad-actions .btn { flex: 1 1 auto; }
.answer-note { margin-top: 8px; font-size: 12px; }
@media (max-width: 900px) { .calendar { grid-template-columns: repeat(2, 1fr); } }

/* Daily appointment number — reception's tracking aid ("number 04 is next").
   One look, everywhere the appointment appears. */
.appt-no { display: inline-block; min-width: 20px; text-align: center; padding: 1px 4px;
  border-radius: 6px; background: color-mix(in srgb, var(--brand) 16%, transparent);
  color: var(--brand); font-size: 10.5px; font-weight: 800; letter-spacing: .3px; }

/* --- medyCN-style calendar: counters, view toggle, time grid, side panel --- */
.cal-counters { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 12px; }
.cal-counter { font-size: 11.5px; font-weight: 600; padding: 3px 9px; border-radius: 999px; white-space: nowrap; }
.cal-counter b { font-weight: 800; margin-right: 2px; }
/* A counter with people behind it opens a list of them. */
.cal-counter.clickable { cursor: pointer; }
.cal-counter.clickable:hover { filter: brightness(1.08); }
.cal-counter.on { outline: 2px solid currentColor; outline-offset: 1px; }
/* medyCN arrangement: one slim line of pills spread across the full width,
   above the calendar — scrolls sideways on a phone rather than stacking. */
.cal-counters-top { flex-wrap: nowrap; overflow-x: auto; margin: 0 0 10px; gap: 5px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.cal-counters-top::-webkit-scrollbar { display: none; }
.cal-counters-top .cal-counter { flex: 1 1 0; text-align: center; padding: 4px 8px; }
/* Patient finder — fills the toolbar's spare width; no extra height on desktop */
.cal-search { position: relative; flex: 1 1 190px; min-width: 0; max-width: 340px; }
.cal-search input {
  width: 100%; padding: 9px 12px 9px 32px; font-size: 13.5px;
  border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface) url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2.2' stroke-linecap='round'><circle cx='11' cy='11' r='7'/><path d='M20 20l-3.6-3.6'/></svg>") no-repeat 9px center / 15px;
  color: var(--text);
}
.cal-search input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.cal-search-results {
  position: absolute; top: calc(100% + 6px); left: 0; right: 0; z-index: 130;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
  box-shadow: var(--shadow); overflow: hidden; max-height: 300px; overflow-y: auto;
}
.cs-row { display: flex; flex-direction: column; gap: 1px; width: 100%; text-align: left;
  padding: 10px 13px; background: none; border: none; cursor: pointer; color: var(--text);
  border-bottom: 1px solid var(--border); }
.cs-row:last-child { border-bottom: none; }
.cs-row:hover { background: color-mix(in srgb, var(--brand) 10%, transparent); }
.cs-row strong { font-size: 13.5px; font-weight: 600; }
.cs-row small { font-size: 11.5px; color: var(--muted); }
.cs-empty { padding: 12px 13px; font-size: 13px; color: var(--muted); }

.cal-staff { border: 1px solid var(--border); border-radius: 9px; background: var(--surface); color: var(--text); padding: 8px 10px; font-size: 13px; font-weight: 600; cursor: pointer; max-width: 190px; }
.cal-staff:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.cal-toggle { display: flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.cal-mode { border: none; background: transparent; color: var(--muted); padding: 8px 14px; cursor: pointer; font-size: 13px; font-weight: 600; text-transform: capitalize; }
.cal-mode.on { background: var(--brand); color: #fff; }
.cal-body { display: grid; grid-template-columns: 1fr; align-items: start; }
.cal-main { min-width: 0; }   /* let the time grid scroll inside, not stretch the page */

/* time grid (day + week) */
.tg-wrap { overflow: auto; max-height: calc(100vh - 210px); min-height: 460px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.tg { display: flex; min-width: min-content; }
.tg-gutter { flex: 0 0 52px; padding-top: 36px; position: sticky; left: 0; z-index: 3; background: var(--surface); }
.tg-hour { font-size: 10.5px; color: var(--muted); text-align: right; padding-right: 7px; border-top: 1px solid transparent; }
.tg-cols { flex: 1 1 0; min-width: 132px; border-left: 1px solid var(--border); }
.tg-daylabel { position: sticky; top: 0; z-index: 2; height: 36px; display: flex; align-items: center; justify-content: center; gap: 5px; font-size: 12.5px; font-weight: 700; background: var(--surface-2); border-bottom: 1px solid var(--border); cursor: pointer; }
.tg-daylabel.is-today { color: #fff; background: var(--brand); }
.tg-col { position: relative; background:
  repeating-linear-gradient(to bottom, transparent 0 71px, var(--border) 71px 72px); }
.tg-col.is-today { background-color: color-mix(in srgb, var(--brand) 5%, transparent); }
.tg-block { position: absolute; overflow: hidden; border-radius: 8px; padding: 4px 8px; font-size: 12px; line-height: 1.3;
  background: var(--surface-2); border-left: 3px solid var(--muted); cursor: pointer;
  box-shadow: 0 1px 3px rgba(0,0,0,.16); transition: filter .12s, transform .06s, box-shadow .12s; }
.tg-block strong { display: block; font-size: 12px; font-weight: 700; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-block small { display: block; color: var(--muted); font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.tg-block .tgb-time { font-weight: 700; margin-right: 5px; opacity: .85; }
.tg-block.green { border-left-color: var(--success); background: color-mix(in srgb, var(--success) 14%, var(--surface-2)); }
.tg-block.amber { border-left-color: var(--warn); background: color-mix(in srgb, var(--warn) 14%, var(--surface-2)); }
.tg-block.blue { border-left-color: var(--accent); background: color-mix(in srgb, var(--accent) 14%, var(--surface-2)); }
.tg-block.red { border-left-color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, var(--surface-2)); text-decoration: line-through; }
/* Doctor-coloured block: text colour is set inline (chosen for contrast); the
   sub-line and status dot ride on top of the doctor's fill. */
.tg-block.tg-colored { border-left-width: 0; }
.tg-block.tg-colored small { color: inherit; opacity: .9; }
.tg-block.tg-colored .tgb-time { opacity: .95; }
.tg-block.tg-colored strong { color: inherit; }
.tg-block.tg-colored .appt-no { background: rgba(255,255,255,.26); color: inherit; }
.tg-block.tg-cancel { text-decoration: line-through; opacity: .6; }
/* Drag-to-move / drag-to-resize (live bookings only). The whole block is a
   grab handle; a thin grip at the bottom edge resizes it. touch-action:none so
   a drag on a phone moves the booking instead of scrolling the grid. */
.tg-block.tg-draggable { cursor: grab; touch-action: none; }
.tg-block.tg-dragging { cursor: grabbing; z-index: 6; box-shadow: 0 8px 22px rgba(0,0,0,.34); filter: brightness(1.04); opacity: .95; transition: none; }
.tg-resize { position: absolute; left: 0; right: 0; bottom: 0; height: 9px; cursor: ns-resize; touch-action: none; }
.tg-resize::after { content: ""; position: absolute; left: 50%; bottom: 3px; width: 26px; height: 3px; transform: translateX(-50%); border-radius: 3px; background: currentColor; opacity: .35; }
.tg-block.tg-draggable:hover .tg-resize::after { opacity: .6; }
/* Blocked time — reserved, no patient: a hatched grey band. */
.tg-block.tg-blocked { color: var(--muted); border-left: 3px solid var(--muted); cursor: pointer;
  background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 6px, color-mix(in srgb, var(--muted) 22%, var(--surface-2)) 6px, color-mix(in srgb, var(--muted) 22%, var(--surface-2)) 12px); }
.m-chip.tg-blocked { background: repeating-linear-gradient(45deg, var(--surface-2), var(--surface-2) 5px, color-mix(in srgb, var(--muted) 20%, var(--surface-2)) 5px, color-mix(in srgb, var(--muted) 20%, var(--surface-2)) 10px); color: var(--muted); }
/* Today's flow: cancelled struck through, blocked greyed, a hide toggle. */
.flow-row.flow-off { opacity: .55; text-decoration: line-through; }
.flow-row.flow-blocked { opacity: .8; }
.flow-row.flow-blocked strong { color: var(--muted); letter-spacing: .04em; }
.flow-hide { display: flex; align-items: center; gap: 6px; font-size: 12px; color: var(--muted); padding: 6px 12px; cursor: pointer; }
.tg-dot { display: inline-block; width: 7px; height: 7px; border-radius: 50%; margin-right: 4px;
  vertical-align: middle; box-shadow: 0 0 0 1px rgba(255,255,255,.6); }
.tg-block:hover { filter: brightness(1.09); z-index: 4; box-shadow: 0 4px 12px rgba(0,0,0,.24); transform: translateY(-1px); }
/* Compact agenda for a busy slot (2+ overlapping) — readable full names, no slivers */
.tg-cluster { position: absolute; left: 1%; width: 98%; overflow: hidden; border-radius: 8px;
  background: var(--surface); border: 1px solid var(--border); box-shadow: 0 1px 3px rgba(0,0,0,.14);
  padding: 1px 0; display: flex; flex-direction: column; }
.tg-crow { display: flex; align-items: center; gap: 5px; height: 19px; padding: 0 6px;
  cursor: pointer; font-size: 11.5px; line-height: 19px; white-space: nowrap; }
.tg-crow:hover { background: var(--surface-2); }
.tg-crow b { font-weight: 700; font-variant-numeric: tabular-nums; flex-shrink: 0; }
.tg-cdot { width: 9px; height: 9px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.12); }
.tg-cname { overflow: hidden; text-overflow: ellipsis; min-width: 0; }
.tg-crow.off { opacity: .5; text-decoration: line-through; }
.tg-crow.tg-cblocked { color: var(--muted); font-style: italic; }
.tg-cmore { height: 18px; line-height: 18px; padding: 0 6px; font-size: 11px; font-weight: 700;
  color: var(--brand-dark); cursor: pointer; background: color-mix(in srgb, var(--brand) 9%, transparent); }
.tg-cmore:hover { background: color-mix(in srgb, var(--brand) 16%, transparent); }
@media (prefers-color-scheme: dark) { .tg-cmore { color: #5eead4; } }
/* "+N more" slot list (modal) */
.slot-list { display: flex; flex-direction: column; }
.slot-li { display: flex; align-items: center; gap: 10px; padding: 11px 6px; cursor: pointer;
  border-bottom: 1px solid var(--border); border-radius: 8px; }
.slot-li:hover { background: var(--surface-2); }
.slot-li:last-child { border-bottom: none; }
.slot-li b { flex-shrink: 0; font-variant-numeric: tabular-nums; }
.slot-li-main { display: flex; flex-direction: column; min-width: 0; }
.slot-li-main strong { font-size: 14px; }
.slot-li.off { opacity: .55; }
.slot-li.off .slot-li-main strong { text-decoration: line-through; }
/* Doctor colour legend — click a doctor to scope the board to them. */
.cal-legend { display: flex; flex-wrap: wrap; gap: 5px 10px; padding: 8px 2px 2px; }
.cal-legend-item { display: inline-flex; align-items: center; gap: 5px; font-size: 11.5px; color: var(--text);
  background: transparent; border: 1px solid transparent; border-radius: 999px; padding: 2px 8px 2px 5px; cursor: pointer; }
.cal-legend-item:hover { background: var(--surface-2); }
.cal-legend-item.on { border-color: var(--brand); background: var(--surface-2); font-weight: 600; }
.cal-legend-dot { width: 11px; height: 11px; border-radius: 50%; flex-shrink: 0; box-shadow: 0 0 0 1px rgba(0,0,0,.15); }
/* Appointment report: summary beside the drill-down, stacking on phones. */
.report-2col { display: grid; grid-template-columns: minmax(200px, 290px) 1fr; gap: 16px; align-items: start; }
.report-2col tr.row-sel { background: color-mix(in srgb, var(--brand) 16%, var(--surface)); }
@media (max-width: 780px) { .report-2col { grid-template-columns: 1fr; } }
/* Bookings-per-user bar chart (no library — flex bars). */
.ar-chart { display: flex; flex-direction: column; gap: 6px; }
.ar-others { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px 14px; font-size: 12.5px; margin: -4px 0 10px; }
.ar-every { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; color: var(--text); cursor: pointer; }
.ar-every input { width: auto; margin: 0; }
.ar-bar-row { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; align-items: center; gap: 10px; padding: 2px 4px; border-radius: 6px; }
.ar-bar-row.row-sel { background: color-mix(in srgb, var(--brand) 16%, var(--surface)); }
.ar-bar-name { font-size: 12.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.ar-bar-track { background: var(--surface-2); border-radius: 999px; height: 14px; overflow: hidden; }
.ar-bar-fill { display: block; height: 100%; background: var(--brand); border-radius: 999px; min-width: 2px; }
.ar-bar-val { font-size: 12.5px; font-weight: 600; min-width: 2.5em; text-align: right; }
.tg-col[data-date] { cursor: cell; touch-action: pan-y; }
.tg-ghost { position: absolute; left: 2%; width: 96%; z-index: 4; pointer-events: none;
  background: color-mix(in srgb, var(--brand) 22%, transparent); border: 1.5px dashed var(--brand);
  border-radius: 7px; display: flex; align-items: flex-start; justify-content: center;
  font-size: 11px; font-weight: 700; color: var(--brand); padding-top: 2px; }

/* month grid */
.cal-month { border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface); }
.m-head { display: grid; grid-template-columns: repeat(7, 1fr); background: var(--surface-2); border-bottom: 1px solid var(--border); }
.m-head div { padding: 8px; text-align: center; font-size: 11px; font-weight: 700; color: var(--muted); text-transform: uppercase; }
.m-grid { display: grid; grid-template-columns: repeat(7, 1fr); }
.m-cell { min-height: 92px; border-top: 1px solid var(--border); border-left: 1px solid var(--border); padding: 4px; font-size: 11px; }
.m-cell:nth-child(7n+1) { border-left: none; }
.m-cell.m-out { opacity: .38; }
.m-cell.is-today { background: color-mix(in srgb, var(--brand) 6%, transparent); }
.m-daynum { font-weight: 700; margin-bottom: 3px; cursor: pointer; width: 22px; height: 22px; display: flex; align-items: center; justify-content: center; border-radius: 6px; }
.m-daynum:hover { background: var(--brand); color: #fff; }
.m-chip { border-radius: 5px; padding: 1.5px 5px; margin-bottom: 2px; cursor: pointer; white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
  background: var(--surface-2); border-left: 2px solid var(--muted); }
.m-chip.green { border-left-color: var(--success); }
.m-chip.amber { border-left-color: var(--warn); }
.m-chip.blue { border-left-color: var(--accent); }
.m-chip.red { border-left-color: var(--danger); text-decoration: line-through; }
.m-more { color: var(--brand); cursor: pointer; font-weight: 600; padding: 1px 5px; }

/* Mobile reception: one-hand usable calendar */
.tg-gutter { position: sticky; left: 0; z-index: 3; background: var(--bg); }
@media (max-width: 700px) {
  .cal-counters { flex-wrap: nowrap; overflow-x: auto; padding-bottom: 4px; -webkit-overflow-scrolling: touch; scrollbar-width: none; }
  .cal-counters::-webkit-scrollbar { display: none; }
  .cal-counter { flex: 0 0 auto; font-size: 12px; padding: 6px 10px; }
  .cal-head { gap: 8px; }
  .cal-nav { gap: 5px; flex-wrap: wrap; }
  .cal-nav .btn { padding: 8px 10px; font-size: 13px; }
  .cal-range { font-size: 12.5px; margin-left: 2px; flex-basis: 100%; order: 5; }
  .cal-mode { padding: 8px 12px; font-size: 12.5px; }
  /* Phone: the finder takes its own full-width line — deliberate, not cramped */
  .cal-search { flex: 1 1 100%; max-width: none; order: 4; }
  .cal-search input { padding: 10px 12px 10px 32px; }
  .tg-wrap { max-height: 68vh; }
  .tg-block { font-size: 10.5px; padding: 2px 5px; }
  .tg-daylabel { font-size: 11px; height: 30px; }
  /* Week: each day column is sized (inline) to its busiest slot so a lane stays
     wide enough to read; the grid scrolls sideways to reach a packed day. */
  .tg-week .tg-gutter { flex: 0 0 34px; }
  .tg-week .tg-hour { font-size: 9px; padding-right: 3px; }
  .tg-week .tg-daylabel { font-size: 11px; }
  .tg-week .tg-block { font-size: 11px; padding: 3px 6px; border-radius: 6px; border-left-width: 3px; }
  .tg-week .tg-block strong { white-space: normal; line-height: 1.18; }  /* let the name wrap so more of it shows */
  .tg-week .tg-block small { display: none; }   /* time is encoded by position; tap for details */
  .m-cell { min-height: 64px; font-size: 10px; padding: 2px; }
  .m-chip { padding: 1px 3px; }
  .m-daynum { width: 19px; height: 19px; font-size: 10.5px; }
  .cal-side { max-height: none; }
  .side-appt { padding: 11px 6px; }           /* bigger touch rows */
  .side-act .btn.tiny { padding: 8px 12px; font-size: 12.5px; }
  .cal-body { gap: 12px; margin-bottom: 70px; }  /* clear the floating + button */
}

/* In-treatment (chair) colour for blocks + chips */
.tg-block.teal { border-left-color: var(--brand); background: color-mix(in srgb, var(--brand) 16%, var(--surface-2)); }
.m-chip.teal { border-left-color: var(--brand); }
.appt.teal { border-left-color: var(--brand); }

/* Patient-flow: narrow DOCKED panel beside the calendar on wide screens */
.flow-dock { display: none; }
@media (min-width: 1000px) {
  .cal-body { grid-template-columns: 1fr 268px; gap: 14px; }
  .flow-dock { display: block; grid-column: 2; grid-row: 1; background: var(--surface);
    border: 1px solid var(--border); border-radius: 12px; padding: 12px;
    max-height: 660px; overflow-y: auto; }
  .cal-main { grid-column: 1; grid-row: 1; }
  .flow-handle, .flow-drawer { display: none; }   /* slide tab is for small screens */
}
.flow-sel { font-size: 10.5px; padding: 3px 4px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface-2); color: var(--text); max-width: 108px; cursor: pointer; }
.flow-sel.amber { border-color: var(--warn); color: var(--warn); }
.flow-sel.teal { border-color: var(--brand); color: var(--brand); }
.flow-sel.green { border-color: var(--success); color: var(--success); }
.flow-sel.blue { border-color: var(--accent); color: var(--accent); }
.flow-sel.red { border-color: var(--danger); color: var(--danger); }
/* In the dock/drawer the counters stay ONE small line (medyCN), scrolling
   sideways if they must — never a stack of tall pills. */
.flow-dock .cal-counters, .flow-drawer .cal-counters {
  flex-wrap: nowrap; overflow-x: auto; padding-bottom: 2px;
  -webkit-overflow-scrolling: touch; scrollbar-width: none; }
.flow-dock .cal-counters::-webkit-scrollbar, .flow-drawer .cal-counters::-webkit-scrollbar { display: none; }

/* Patient-flow slide tab — medyCN-style narrow rail on the right edge */
.flow-handle { position: fixed; right: 0; top: 38%; z-index: 120; writing-mode: vertical-rl;
  background: var(--brand); color: #fff; border: none; border-radius: 10px 0 0 10px;
  padding: 14px 8px; font-size: 13px; font-weight: 700; cursor: pointer; letter-spacing: .5px;
  box-shadow: var(--shadow); transition: right .22s ease; }
.flow-handle.open { right: min(292px, 86vw); }
.flow-drawer { position: fixed; right: 0; top: 14%; z-index: 115; width: min(292px, 86vw);
  max-height: 72vh; overflow-y: auto; background: var(--surface); border: 1px solid var(--border);
  border-right: none; border-radius: 14px 0 0 14px; box-shadow: var(--shadow); padding: 14px;
  transform: translateX(105%); transition: transform .22s ease; }
.flow-drawer.open { transform: translateX(0); }
.flow-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; margin-bottom: 10px; }
.flow-drawer .cal-counters { margin-bottom: 10px; }
.flow-drawer .cal-counter { font-size: 11px; padding: 3px 8px; }
.flow-row { display: flex; align-items: center; gap: 7px; padding: 6px 2px; border-top: 1px solid var(--border); }
.flow-t { flex: 0 0 36px; font-weight: 700; font-size: 11.5px; }
.flow-t small { display: block; color: var(--muted); font-weight: 400; font-size: 10px; }
.flow-since { display: inline-block; width: max-content; margin-top: 2px; padding: 1px 7px;
  border-radius: 6px; font-size: 10px; font-weight: 700; }
.flow-since.amber { background: color-mix(in srgb, var(--warn) 16%, transparent); color: var(--warn); }
.flow-since.teal { background: color-mix(in srgb, var(--brand) 16%, transparent); color: var(--brand); }
/* Waiting-experience bands: watch=amber, alert=orange, escalate=red. */
.flow-since.orange { background: color-mix(in srgb, #ea580c 18%, transparent); color: #c2410c; }
.flow-since.red { background: color-mix(in srgb, var(--danger, #dc2626) 18%, transparent); color: var(--danger, #dc2626); }
/* The one-tap flow action button (Check In / Start Treatment / …). */
.flow-next { margin-top: 4px; display: inline-flex; align-items: center; gap: 4px;
  background: var(--brand); color: #fff; border: none; border-radius: 8px;
  padding: 4px 10px; font-size: 11.5px; font-weight: 700; cursor: pointer; width: max-content; }
.flow-next:hover { filter: brightness(1.06); }
.flow-next:disabled { opacity: .5; cursor: default; }
.flow-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.flow-main small { font-size: 10.5px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.flow-row .btn.tiny { padding: 5px 9px; font-size: 11px; white-space: nowrap; }

/* today side panel */
.cal-side { background: var(--surface); border: 1px solid var(--border); border-radius: 12px; padding: 12px; max-height: 640px; overflow-y: auto; }
.side-head { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; padding-bottom: 10px; border-bottom: 1px solid var(--border); margin-bottom: 8px; }
.side-appt { display: flex; align-items: center; gap: 10px; padding: 9px 6px; border-bottom: 1px solid var(--border); }
.side-appt:last-child { border-bottom: none; }
.side-time { flex: 0 0 44px; font-weight: 700; font-size: 12.5px; }
.side-main { flex: 1; min-width: 0; display: flex; flex-direction: column; }
.side-name { font-weight: 600; font-size: 12.5px; cursor: pointer; color: var(--brand);
  white-space: normal; overflow-wrap: anywhere; line-height: 1.25; }
.side-name:hover { text-decoration: underline; }
.side-act .btn.tiny { padding: 5px 10px; font-size: 11.5px; }

/* ---------- Invoice detail ---------- */
.inv-header { grid-template-columns: 1fr auto; grid-template-areas: "meta totals"; align-items: center; }
.inv-totals { grid-area: totals; display: flex; gap: 24px; }
.inv-totals > div { display: flex; flex-direction: column; align-items: flex-end; }
.inv-totals span { font-size: 11px; color: var(--muted); text-transform: uppercase; letter-spacing: .4px; }
.inv-totals strong { font-size: 20px; }
.inv-balance strong { color: var(--warn); }
.inv-balance.clear strong { color: var(--success); }
.pay-form { margin-top: 14px; border-top: 1px solid var(--border); padding-top: 14px; }
.pay-form .btn { width: 100%; }
.paid-badge { margin-top: 14px; text-align: center; color: var(--success); font-weight: 600; background: color-mix(in srgb, var(--success) 12%, transparent); padding: 10px; border-radius: 9px; }
.plan-pick { display: flex; flex-direction: column; gap: 10px; }
.plan-option { text-align: left; border: 1px solid var(--border); background: var(--surface-2); border-radius: 11px; padding: 12px 14px; cursor: pointer; display: flex; flex-direction: column; gap: 2px; transition: border-color .15s; color: var(--text); }
.plan-option:hover { border-color: var(--brand); }
.plan-option span { font-size: 12.5px; color: var(--muted); }
.plan-option em { font-size: 12px; color: var(--brand); font-style: normal; margin-top: 2px; }

/* ---------- AI Advisor ---------- */
.advisor { display: grid; grid-template-columns: 1fr; gap: 16px; max-width: 900px; }
.advisor-insights h3, .advisor-chat h3 { margin-bottom: 14px; }
.insight-list { display: flex; flex-direction: column; gap: 10px; }
.insight { display: flex; gap: 12px; align-items: flex-start; padding: 12px 14px; border-radius: 11px; background: var(--surface-2); border-left: 3px solid var(--muted); }
.insight span { font-size: 18px; line-height: 1.2; }
.insight p { font-size: 13px; }
.insight.warn { border-left-color: var(--warn); }
.insight.danger { border-left-color: var(--danger); }
.insight.info { border-left-color: var(--accent); }
.ask-row { display: flex; gap: 10px; margin-bottom: 14px; }
.ask-row input { flex: 1; padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); font-size: 14px; font-family: inherit; }
.ask-row input:focus { outline: none; border-color: var(--brand); }
.chips { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 16px; }
.suggest { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 999px; padding: 7px 14px; font-size: 12.5px; cursor: pointer; transition: all .15s; }
.suggest:hover { border-color: var(--brand); color: var(--brand); }
.answer { background: var(--surface-2); border-radius: 12px; padding: 18px; min-height: 60px; }
.answer-text { font-size: 14.5px; line-height: 1.6; }
.advisor-note { font-size: 12px; color: var(--muted); background: color-mix(in srgb, var(--accent) 8%, transparent); padding: 12px 14px; border-radius: 10px; }

/* ---------- Login screen ---------- */
.login-screen {
  position: fixed; inset: 0; display: grid; place-items: center; padding: 20px; z-index: 100;
  background:
    radial-gradient(60vw 60vh at 12% -10%, color-mix(in srgb, var(--brand) 14%, transparent), transparent 70%),
    radial-gradient(50vw 50vh at 105% 110%, color-mix(in srgb, var(--brand) 10%, transparent), transparent 70%),
    var(--bg);
}
.login-screen[hidden] { display: none; }
.login-card {
  background: var(--surface); border: 1px solid var(--border); border-radius: 18px;
  box-shadow: var(--shadow); padding: 36px; width: min(400px, 94vw); text-align: center;
  animation: login-in .35s ease-out both;
}
@keyframes login-in { from { opacity: 0; transform: translateY(10px); } to { opacity: 1; transform: none; } }
@media (prefers-reduced-motion: reduce) { .login-card { animation: none; } }
.login-mark { width: 56px; height: 56px; border-radius: 15px; font-size: 28px; margin: 0 auto 16px; }
.login-card h1 { font-size: 22px; margin-bottom: 4px; }
.login-card > .muted { margin-bottom: 22px; }
.login-card form { text-align: left; }
.login-card .field input { padding: 12px 14px; font-size: 14px; }
.login-btn { width: 100%; padding: 12px; font-size: 14.5px; margin-top: 6px; }
.login-error { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); padding: 10px 12px; border-radius: 9px; font-size: 12.5px; margin-bottom: 12px; }
.demo-accounts { margin-top: 24px; border-top: 1px solid var(--border); padding-top: 18px; }
.demo-accounts .muted { font-size: 12px; margin-bottom: 12px; }
.demo-accounts code { background: var(--surface-2); padding: 1px 6px; border-radius: 5px; font-size: 11.5px; }
.demo-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 8px; }
.demo { border: 1px solid var(--border); background: var(--surface-2); color: var(--text); border-radius: 9px; padding: 9px 10px; font-size: 12.5px; cursor: pointer; transition: all .15s; }
.demo:hover { border-color: var(--brand); color: var(--brand); }

/* ---------- Patient portal ---------- */
.plan-steps { width: 100%; border-collapse: collapse; margin: 8px 0 4px; font-size: 12.5px; }
.plan-steps td { padding: 4px 6px; border-bottom: 1px solid var(--border); }
.plan-steps tr:last-child td { border-bottom: none; }
.portal-link { color: var(--brand); text-decoration: none; font-weight: 600; }
.portal-link:hover { text-decoration: underline; }
.portal-header {
  display: flex; justify-content: space-between; align-items: center;
  padding: 16px 28px; border-bottom: 1px solid var(--border); background: var(--surface);
  position: sticky; top: 0; z-index: 5;
}
.portal-user { display: flex; align-items: center; gap: 14px; font-size: 13.5px; }
.portal-main { max-width: 960px; margin: 0 auto; padding: 26px 28px; display: flex; flex-direction: column; gap: 18px; }
.portal-welcome h2 { font-size: 22px; }
.portal-main .panel { margin: 0; }
.portal-contact { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 14px; }
.portal-contact > div { display: flex; flex-direction: column; gap: 2px; }
.portal-contact span { font-size: 11px; text-transform: uppercase; letter-spacing: .3px; }
.portal-contact strong { font-size: 14px; }

/* ---------- Portal request modal ---------- */
.req-modal-overlay { position: fixed; inset: 0; background: rgba(15,23,42,.5); display: grid; place-items: center; z-index: 60; }
.req-modal { background: var(--surface); border: 1px solid var(--border); border-radius: 16px; padding: 24px; width: min(440px, 92vw); box-shadow: var(--shadow); }
.req-modal h3 { margin-bottom: 16px; }

/* ---------- Branch selector ---------- */
.branch-select {
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); color: var(--text); font-size: 13px; font-family: inherit;
  cursor: pointer; max-width: 160px;
}
.branch-select:focus { outline: none; border-color: var(--brand); }
@media (max-width: 900px) { .branch-select { display: none; } }

/* ---------- Global search ---------- */
.search-box { position: relative; }
.search-box input {
  width: 220px; padding: 8px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface-2); color: var(--text); font-size: 13px; font-family: inherit;
}
.search-box input:focus { outline: none; border-color: var(--brand); width: 260px; }
.search-results {
  position: absolute; top: calc(100% + 6px); right: 0; width: 320px; max-height: 380px; overflow-y: auto;
  background: var(--surface); border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow);
  z-index: 40; padding: 6px;
}
.search-results[hidden] { display: none; }
.search-item {
  width: 100%; display: flex; align-items: center; gap: 10px; padding: 9px 10px; border: none;
  background: transparent; color: var(--text); border-radius: 8px; cursor: pointer; text-align: left;
}
.search-item:hover { background: var(--surface-2); }
.s-icon { width: 20px; text-align: center; opacity: .6; }
.s-text { flex: 1; display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.s-text strong { font-size: 13px; }
.s-text small { font-size: 11.5px; color: var(--muted); }
.s-type { font-size: 10px; text-transform: uppercase; letter-spacing: .4px; color: var(--muted); background: var(--surface-2); padding: 2px 7px; border-radius: 999px; }
.search-empty { padding: 16px; text-align: center; color: var(--muted); font-size: 12.5px; }
@media (max-width: 820px) { .search-box { display: none; } }

/* ---------- User chip / logout ---------- */
.user-chip { display: flex; align-items: center; gap: 9px; background: transparent; border: none; cursor: pointer; padding: 4px 6px; border-radius: 10px; color: inherit; font: inherit; }
.user-chip:hover { background: var(--surface-2); }
.user-meta { display: flex; flex-direction: column; line-height: 1.2; }
.user-meta strong { font-size: 12.5px; }
.user-meta span { font-size: 11px; color: var(--muted); }
@media (max-width: 720px) { .user-meta { display: none; } }

/* ---------- Menu button + backdrop (mobile) ---------- */
.menu-btn { display: none; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: 20px; line-height: 1; border-radius: 10px; width: 40px; height: 40px; cursor: pointer; flex-shrink: 0; }
/* Back button: return to the previous screen. Hidden on the first screen
   (nothing to go back to) via the [hidden] attribute, shown the moment there
   is history. Matches the topbar's pill styling. */
.back-btn { display: inline-flex; align-items: center; gap: 4px; background: var(--surface-2); border: 1px solid var(--border); color: var(--text); font-size: 13px; font-weight: 600; line-height: 1; border-radius: 10px; height: 40px; padding: 0 14px; cursor: pointer; flex-shrink: 0; transition: background .12s, border-color .12s; }
.back-btn:hover { background: var(--surface-3, var(--surface-2)); border-color: var(--brand); color: var(--brand); }
.back-btn[hidden] { display: none; }
.nav-backdrop { display: none; }

/* ---------- Collapsed sidebar (e.g. reception, MEDYCN-style full-width diary) ----------
   The sidebar drops out of the flow and slides in only when summoned, so the
   main area spans the whole screen. Reuses the mobile drawer machinery below. */
#app.nav-collapsed .sidebar {
  position: fixed; top: 0; left: 0; height: 100vh; width: 260px; z-index: 200;
  transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.4);
}
#app.nav-collapsed.nav-open .sidebar { transform: translateX(0); }
#app.nav-collapsed.nav-open .nav-backdrop {
  display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 150;
}
#app.nav-collapsed .menu-btn { display: block; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .menu-btn { display: block; }
  .topbar { flex-wrap: wrap; padding: 14px 16px; gap: 12px; }
  .topbar-title { flex: 1; min-width: 0; }
  .topbar h1 { font-size: 17px; }
  #view-sub { display: none; }
  .content { padding: 16px; }

  /* Sidebar becomes a slide-in drawer */
  .sidebar {
    position: fixed; top: 0; left: 0; height: 100vh; width: 260px; z-index: 200;
    transform: translateX(-100%); transition: transform .22s ease; box-shadow: 0 0 40px rgba(0,0,0,.4);
  }
  #app.nav-open .sidebar { transform: translateX(0); }
  #app.nav-open .nav-backdrop {
    display: block; position: fixed; inset: 0; background: rgba(0,0,0,.5); z-index: 150;
  }
  .main { width: 100%; }

  /* Topbar right controls: keep essentials, wrap nicely */
  .topbar-right { gap: 8px; }
  .user-chip .user-meta { display: none; }
  #refreshBtn { display: none; }
}
@media (max-width: 480px) {
  .kpi-grid { grid-template-columns: 1fr 1fr; }
  .kpi .value { font-size: 22px; }
}

/* ---------- Purchase-order summary ---------- */
/* The owner: "clearly display a summary showing Subtotal, Discount, Shipping
   Charge, VAT, and Final Total separately for easy verification." Right-aligned
   in a narrow column so the figures stack under one another and can be read
   straight down against the supplier's quotation. */
.po-sum{margin:12px 0 0 auto; width:min(320px,100%); font-size:14px}
.po-sum-row{display:flex; justify-content:space-between; gap:18px; padding:5px 0;
  font-variant-numeric:tabular-nums}
.po-sum-row span:first-child{color:var(--muted)}
.po-sum-row.grand{border-top:2px solid var(--brand); margin-top:5px; padding-top:9px;
  font-size:16px; color:var(--text)}
.po-sum-row.grand span:first-child{color:var(--text); font-weight:600}
.po-sum-base{font-size:12px; text-align:right; margin-top:4px}

/* ---------- Discount: a unit and a number ---------- */
/* Suppliers quote "5% off" as readily as a rupee figure, so the unit sits with
   the value rather than being baked into the label. */
/* A master-list dropdown with its "add a new one" button beside it. The button
   must never squeeze the select on a narrow screen, so the select takes the
   slack and the button keeps its own size. */
.ms-inline{display:flex; gap:6px; align-items:center}
.ms-inline select{flex:1 1 auto; min-width:0}
.ms-inline .mini-btn{flex:0 0 auto}
.alias-row input, .attr-row input{min-width:0}
.disc-row{display:flex; gap:8px; align-items:center}
.disc-row select{flex:0 0 auto; width:72px; text-align:center}
.disc-row input{flex:1 1 auto; min-width:0}

/* ---------- Purchase-order attachments ---------- */
/* The supplier's quotation, filed with the order it justifies. Listed rather
   than carded: the approver is scanning for "is there one, and what is it",
   not admiring a gallery. */
.po-atts{display:flex; flex-direction:column; gap:8px}
.po-att{display:flex; align-items:center; gap:9px; flex-wrap:wrap;
  padding:8px 10px; background:var(--surface-2); border-radius:6px; font-size:13.5px}
.po-att-name{font-weight:600; color:var(--brand); text-decoration:none; min-width:0;
  overflow:hidden; text-overflow:ellipsis; white-space:nowrap; max-width:100%}
.po-att-name:hover{text-decoration:underline}
.po-att-meta{font-size:12px; margin-left:auto; white-space:nowrap}
button.po-q{font-size:12px}
@media (max-width:560px){ .po-att-meta{margin-left:0; width:100%} }

/* ---------- The daily till count ---------- */
/* The owner's gap: Daily Cash-Up showed what the system EXPECTED and nothing
   else, so a short drawer left no record. The three figures read across —
   system, counted, difference — and the difference is the one that carries
   colour, because it is the only one anybody acts on. */
.cc-panel{margin-top:14px}
.cc-head{display:flex; align-items:center; justify-content:space-between; gap:12px; margin-bottom:12px}
.cc-head h3{margin:0}
.cc-grid{display:grid; grid-template-columns:repeat(auto-fit,minmax(170px,1fr)); gap:14px 22px; align-items:start}
.cc-fig{display:flex; flex-direction:column; gap:4px; min-width:0}
.cc-fig strong{font-size:21px; font-variant-numeric:tabular-nums}
.cc-fig input{font-size:18px; font-variant-numeric:tabular-nums; text-align:right}
.cc-lbl{font-size:11.5px; text-transform:uppercase; letter-spacing:.4px; color:var(--muted); font-weight:600}
.cc-var{font-size:17px; font-weight:600; font-variant-numeric:tabular-nums}
.cc-var.ok{color:var(--success)}
.cc-var.over{color:var(--warn)}
.cc-var.short{color:var(--danger)}
.cc-reason{margin:10px 0 0; font-size:13.5px; color:var(--muted)}
/* The reason appears only when the drawer doesn't tie, so it needs its own
   breathing room rather than crowding the figures above it. */
.cc-panel .field{margin-top:14px; margin-bottom:0}
td .cc-var{font-size:13.5px}

/* ---------- Quantity + its unit of measure ---------- */
/* The owner: "Qty field should clearly display the quantity along with its unit
   of measurement." A bare 3 on a purchase order is ambiguous to the supplier —
   three boxes or three pieces? — so the unit sits against the number, and an
   item with no unit set says so rather than staying silently blank. */
.qty-cell{display:flex; align-items:center; gap:6px; min-width:0}
.qty-cell input{flex:1 1 auto; min-width:0}
.qty-unit{
  flex:0 0 auto; font-size:11.5px; color:var(--muted); white-space:nowrap;
  max-width:9ch; overflow:hidden; text-overflow:ellipsis;
}
button.qty-unset{
  font-family:inherit; background:none; border:0; padding:0; cursor:pointer;
  text-decoration:underline dotted; text-underline-offset:2px;
}
button.qty-unset:hover{color:var(--brand)}
.qty-pack{display:block; font-size:11px; color:var(--muted); margin-top:2px}
@media (max-width:640px){
  /* In card mode the row already has the width, so let the unit breathe. */
  .line-edit .qty-cell{justify-content:flex-end}
  .qty-unit{max-width:none}
  .qty-pack{text-align:right}
}

/* ---------- Multi-select dropdown (filter bars) ---------- */
/* The owner, on Payments received: "rather this type of filter, give drop downs
   under tabs of doctor and treatment." Four always-open list boxes pushed the
   table below the fold and each showed four of a hundred-odd options through a
   letterbox. These stay CLOSED until asked, and open a searchable checklist —
   still several choices at once, which is the point of the filter. */
.ms-wrap { position: relative; }
.ms-btn {
  width: 100%; display: flex; align-items: center; justify-content: space-between; gap: 8px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 13.5px;
  cursor: pointer; text-align: left;
}
.ms-btn:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
.ms-btn[aria-expanded="true"] { border-color: var(--brand); }
.ms-sum { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-sum.ms-empty { color: var(--muted); }
.ms-chev { flex-shrink: 0; color: var(--muted); font-size: 11px; transition: transform .15s; }
.ms-btn[aria-expanded="true"] .ms-chev { transform: rotate(180deg); }
.ms-panel {
  position: absolute; z-index: 60; top: calc(100% + 4px); left: 0; min-width: 100%; width: max-content;
  max-width: min(340px, 86vw); background: var(--surface); border: 1px solid var(--border);
  border-radius: 10px; box-shadow: 0 12px 32px rgba(15, 23, 42, .22); padding: 8px;
}
.ms-search { width: 100%; margin-bottom: 6px; }
.ms-acts { display: flex; gap: 6px; margin-bottom: 6px; }
.ms-acts button {
  flex: 1; padding: 4px 8px; font-size: 11.5px; font-family: inherit; cursor: pointer;
  border: 1px solid var(--border); border-radius: 7px; background: var(--surface-2); color: var(--muted);
}
.ms-acts button:hover { color: var(--text); border-color: var(--brand); }
.ms-list { max-height: 240px; overflow-y: auto; }
.ms-opt {
  display: flex; align-items: center; gap: 9px; padding: 6px 8px; border-radius: 7px;
  font-size: 13px; color: var(--text); cursor: pointer;
}
.ms-opt:hover { background: color-mix(in srgb, var(--brand) 9%, transparent); }
.ms-opt input { width: auto; margin: 0; flex-shrink: 0; }
.ms-opt span { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.ms-none-match { padding: 10px 8px; font-size: 12.5px; color: var(--muted); }
@media (max-width: 640px) {
  /* On a phone the panel is the width of the field, not of the longest option. */
  .ms-panel { width: 100%; max-width: none; }
  .ms-list { max-height: 45vh; }
}

/* ---------- Line-item editors inside a modal ---------- */
/* A form you have to scroll sideways to fill in is a form people mis-fill. The
   PO / quote line editor sizes its inputs to the column instead of to a fixed
   pixel width, so every field is reachable at any modal width, and each line
   becomes a labelled card on a phone (see .responsive-table below). */
.line-edit th, .line-edit td { padding: 8px 10px; }
.line-edit th:first-child, .line-edit td:first-child { padding-left: 12px; }
.line-edit th:last-child, .line-edit td:last-child { padding-right: 12px; }
/* The PO form's Lines heading with "+ Add ▾" beside it (Sep 2026) — the menu
   offers Item / Service / Others and drops just under the button. */
.po-lines-head { display: flex; justify-content: space-between; align-items: center; gap: 10px; margin: 6px 0 6px; }
.po-add { position: relative; }
.po-add-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 6; min-width: 280px; display: flex; flex-direction: column;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px; padding: 4px; box-shadow: 0 10px 28px rgba(0,0,0,.14); }
.po-add-menu[hidden] { display: none; }      /* `display:flex` above would otherwise override the hidden attribute */
.po-add-menu button { text-align: left; background: none; border: 0; padding: 8px 10px; border-radius: 8px; font: inherit; color: var(--text); cursor: pointer; }
.po-add-menu button:hover { background: var(--surface-2); }
.po-add-menu button small { display: block; color: var(--muted); font-size: 11.5px; margin-top: 1px; }
.po-line .pl-kind { margin-right: 6px; vertical-align: middle; }
.po-line .pl-desc { width: 100%; min-width: 160px; }
.line-edit input, .line-edit select { width: 100%; min-width: 0; box-sizing: border-box; padding: 7px 9px; font-size: 13px; }
.line-edit input[type="checkbox"] { width: auto; }
/* The description is the column people type most into, so it takes whatever the
   sized columns leave rather than being squeezed last. */
.line-edit .col-acct { width: 20%; }
.line-edit .col-qty { width: 9%; }
.line-edit .col-vat { width: 7%; text-align: center; }
.line-edit .col-price { width: 15%; }
.line-edit .col-tax { width: 11%; }
.line-edit .col-total { width: 14%; text-align: right; }
.line-edit .col-del { width: 38px; }
/* The PO's Qty cell carries a unit beside the number, so it needs the room;
   the supplier-bill table (which has an extra Account column) keeps 9%. */
.po-lines-tbl .col-qty { width: 12%; }
/* The Account dropdown after Item (Oct 2026) — "1200 · Inventory" needs ~190px, so
   the numeric columns give up a little and the Item column keeps the rest. */
.po-lines-tbl .col-acct { width: 22%; }
.po-lines-tbl .col-price { width: 13%; }
.po-lines-tbl .col-tax { width: 8%; }
.po-lines-tbl .col-total { width: 12%; }
@media (max-width: 640px) {
  /* Card mode: the label sits left, the input takes the rest of the row. The
     desktop column percentages must be dropped here or they survive into the
     stacked layout and squeeze Qty / Unit price / Tax % down to ~22px — narrow
     enough to see, too narrow to type into. */
  .line-edit .col-acct, .line-edit .col-qty, .line-edit .col-price, .line-edit .col-tax,
  .line-edit .col-vat, .line-edit .col-total, .line-edit .col-del { width: 100%; }
  .line-edit td { text-align: right; }
  .line-edit td input { max-width: 60%; min-width: 120px; text-align: right; }
  .line-edit td input[type="checkbox"] { min-width: 0; width: auto; }
  .line-edit td select { max-width: 62%; min-width: 140px; }
  .line-edit tr { padding-bottom: 6px; }
  .line-edit .col-del { justify-content: flex-end; }
}

/* ---------- Responsive tables -> cards on mobile ---------- */
@media (max-width: 640px) {
  .responsive-table { overflow: visible; border: none; background: transparent; box-shadow: none; }
  .responsive-table table, .responsive-table tbody, .responsive-table tr, .responsive-table td { display: block; width: 100%; }
  .responsive-table thead { display: none; }
  .responsive-table tr {
    background: var(--surface); border: 1px solid var(--border); border-radius: 12px;
    margin-bottom: 10px; padding: 4px 2px; box-shadow: var(--shadow);
  }
  .responsive-table tr.clickable { cursor: pointer; }
  .responsive-table td {
    display: flex; justify-content: space-between; align-items: center; gap: 14px;
    padding: 8px 14px; border: none; font-size: 13.5px; text-align: right;
  }
  .responsive-table td::before {
    content: attr(data-label); color: var(--muted); font-size: 11px; font-weight: 600;
    text-transform: uppercase; letter-spacing: .4px; text-align: left; flex-shrink: 0;
  }
  .responsive-table td:empty, .responsive-table td[data-label=""]:empty { display: none; }
  .responsive-table td .row-open { display: none; }
  .responsive-table tr:hover td { background: transparent; }
}

/* =========================================================================
   Remote Control panel (staff) — drives the waiting-room display
   ====================================================================== */
.rc-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 18px; align-items: start; }
.rc-call h3, .rc-announce h3 { margin: 0 0 12px; }
.rc-sub {
  font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .5px;
  color: var(--muted); margin: 16px 0 8px;
}
.rc-now {
  border: 1px solid var(--border); border-radius: 12px; padding: 16px 18px;
  background: var(--surface-2); text-align: center;
}
.rc-now.live { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 9%, transparent); }
.rc-now-label { font-size: 11px; font-weight: 700; text-transform: uppercase; letter-spacing: .6px; color: var(--muted); }
.rc-now-name { font-size: 22px; font-weight: 800; margin: 4px 0; }
.rc-now-room { color: var(--brand-dark); font-weight: 700; margin-bottom: 8px; }
.btn.small { padding: 5px 12px; font-size: 12px; }
.rc-chips { display: flex; flex-wrap: wrap; gap: 8px; }
.rc-chip {
  display: flex; flex-direction: column; align-items: flex-start; gap: 2px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 12px; cursor: pointer; text-align: left; color: var(--text);
  transition: border-color .15s, transform .05s;
}
.rc-chip:hover { border-color: var(--brand); }
.rc-chip:active { transform: translateY(1px); }
.rc-chip strong { font-size: 13.5px; }
.rc-chip span { font-size: 11.5px; color: var(--muted); }
.rc-manual { display: flex; gap: 8px; flex-wrap: wrap; }
.rc-manual input {
  flex: 1 1 140px; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); color: var(--text); font-size: 13px;
}
.rc-announce textarea {
  width: 100%; padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px;
  background: var(--surface); color: var(--text); font-size: 13.5px; font-family: inherit; resize: vertical;
}
.rc-announce-actions { display: flex; gap: 8px; margin-top: 10px; }
.rc-recent-wrap { margin-top: 8px; }
.rc-recent { list-style: none; margin: 0; padding: 0; }
.rc-recent li {
  display: flex; justify-content: space-between; padding: 7px 0;
  border-bottom: 1px solid var(--border); font-size: 13px;
}
.rc-recent li:last-child { border-bottom: none; }
@media (max-width: 860px) { .rc-grid { grid-template-columns: 1fr; } }

/* =========================================================================
   Public Waiting-Room Display (lobby screen) — /display
   ====================================================================== */
.display-body { margin: 0; }
.display-screen {
  min-height: 100vh; display: flex; flex-direction: column;
  background: var(--bg); color: var(--text);
}
.display-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 22px 40px; border-bottom: 1px solid var(--border);
}
.display-header .brand-mark { width: 48px; height: 48px; font-size: 22px; }
.display-header .brand-text strong { font-size: 22px; }
.display-header .brand-text span { font-size: 13px; }
.display-clock { font-size: 34px; font-weight: 800; letter-spacing: 1px; font-variant-numeric: tabular-nums; }
.display-main {
  flex: 1; display: grid; grid-template-columns: 2fr 1fr; gap: 28px; padding: 32px 40px; align-items: stretch;
}
.display-now {
  display: flex; flex-direction: column; align-items: center; justify-content: center;
  border: 2px solid var(--border); border-radius: 28px; background: var(--surface); text-align: center; padding: 40px;
}
.display-now-label {
  font-size: clamp(16px, 2vw, 24px); font-weight: 700; text-transform: uppercase;
  letter-spacing: 3px; color: var(--muted);
}
.display-now-name { font-size: clamp(44px, 8vw, 120px); font-weight: 900; line-height: 1.02; margin: 12px 0; }
.display-now-sub { font-size: clamp(18px, 2.4vw, 34px); color: var(--muted); }
.display-now.calling {
  border-color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, var(--surface));
}
.display-now.calling .display-now-label { color: var(--brand-dark); }
.display-now.calling .display-now-sub { color: var(--brand-dark); }
.display-now.flash { animation: display-flash 1.1s ease 2; }
@keyframes display-flash {
  0%, 100% { box-shadow: 0 0 0 0 color-mix(in srgb, var(--brand) 55%, transparent); }
  50% { box-shadow: 0 0 0 18px color-mix(in srgb, var(--brand) 0%, transparent); }
}
.display-side {
  border: 1px solid var(--border); border-radius: 24px; background: var(--surface); padding: 24px 26px; overflow: hidden;
}
.display-side h2 {
  margin: 0 0 16px; font-size: clamp(15px, 1.6vw, 22px); text-transform: uppercase;
  letter-spacing: 1.5px; color: var(--muted);
}
.display-recent { list-style: none; margin: 0; padding: 0; }
.display-recent li {
  display: flex; align-items: baseline; justify-content: space-between; gap: 12px;
  padding: 14px 0; border-bottom: 1px solid var(--border); font-size: clamp(20px, 2.2vw, 30px); font-weight: 700;
}
.display-recent li:last-child { border-bottom: none; }
.display-recent .dr-room { font-size: .7em; font-weight: 700; color: var(--brand-dark); }
.display-recent .muted { color: var(--muted); font-weight: 400; }
.display-banner {
  padding: 18px 40px; background: var(--brand); color: #fff;
  font-size: clamp(18px, 2.2vw, 30px); font-weight: 700; text-align: center;
}
.display-banner .banner-dot { animation: banner-pulse 1.4s ease-in-out infinite; margin-right: 8px; }
@keyframes banner-pulse { 0%, 100% { opacity: .35; } 50% { opacity: 1; } }
@media (max-width: 820px) {
  .display-main { grid-template-columns: 1fr; }
  .display-header { padding: 16px 20px; }
}

/* Payroll: a doctor being paid on a base that misses part of their work is an
   underpayment nobody would otherwise notice, so it is stated on the row. */
.pay-warn { color: #b45309; line-height: 1.4; display: inline-block; }
:root[data-theme="dark"] .pay-warn { color: #fbbf24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .pay-warn { color: #fbbf24; } }

/* The whole date field is the click target (see the delegated showPicker in
   app.js), so it should look like one — and the native icon should not be the
   only thing that appears interactive. */
input[type="date"] { cursor: pointer; }
input[type="date"]::-webkit-calendar-picker-indicator { cursor: pointer; opacity: .75; }
input[type="date"]:hover::-webkit-calendar-picker-indicator { opacity: 1; }

/* Outstanding balance on an invoice row — the number reception is asked for. */
.due-amt { color: #b45309; }
:root[data-theme="dark"] .due-amt { color: #fbbf24; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .due-amt { color: #fbbf24; } }

/* Case Sheet plan header: the invoice's PAYMENT state and the treatment's own
   state sit side by side, so each is labelled. A green "Completed" next to an
   invoice number otherwise reads as "invoice settled". */
.plan-status { display: inline-flex; align-items: center; gap: 5px; white-space: nowrap; }
.plan-status small { font-size: 11px; }

/* Per-department Settings pages: the things you set up once, each with a plain
   sentence saying what it is for, so nobody has to guess before clicking. */
.cfg-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.cfg-card { display: flex; align-items: center; gap: 14px; text-align: left; width: 100%;
  cursor: pointer; border: 1px solid var(--border); background: var(--surface);
  color: inherit; font: inherit; padding: 16px; border-radius: 12px; transition: border-color .15s, transform .15s; }
.cfg-card:hover { border-color: var(--brand); transform: translateY(-1px); }
.cfg-card p { margin: 3px 0 0; font-size: 12.5px; line-height: 1.45; }
.cfg-ico { font-size: 22px; flex: none; width: 40px; height: 40px; display: grid; place-items: center;
  background: var(--surface-2); border-radius: 10px; }
.cfg-go { margin-left: auto; font-size: 20px; opacity: .4; flex: none; }

/* Row "Actions ▾" dropdown (invoice actions, medyCN-style). Anchored to the
   button, above the modal layer so it is never clipped by a scrolling table. */
.row-menu { position: fixed; z-index: 1200; min-width: 208px; padding: 6px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: 0 12px 32px rgba(0,0,0,.35); display: flex; flex-direction: column; gap: 1px; }
.row-menu-item { display: flex; align-items: center; gap: 10px; width: 100%; text-align: left;
  background: none; border: 0; color: inherit; font: inherit; font-size: 13.5px;
  padding: 9px 12px; border-radius: 7px; cursor: pointer; }
.row-menu-item:hover { background: var(--surface-2); }
.row-menu-item.danger { color: #dc2626; }
:root[data-theme="dark"] .row-menu-item.danger { color: #f87171; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .row-menu-item.danger { color: #f87171; } }
.rm-ico { width: 18px; text-align: center; flex: none; }

/* Flags the field that stopped a save, so the message is not the only clue. */
.field-bad { border-color: #dc2626 !important; box-shadow: 0 0 0 3px rgba(220,38,38,.18); }

/* A voided invoice is not a paid one — never show it with the green tick. */
.void-badge { background: #6b7280 !important; }

/* Finance reports — the shared period bar (Oct 2026): presets, two dates, Apply */
.fin-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 10px 16px; margin: 0 0 14px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface); }
.fin-presets { display: flex; flex-wrap: wrap; gap: 0; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.fin-preset { border: 0; border-right: 1px solid var(--border); background: var(--surface); color: var(--text);
  padding: 8px 12px; font-size: 13px; cursor: pointer; min-height: 36px; }
.fin-preset:last-child { border-right: 0; }
.fin-preset:hover { background: var(--surface-2); }
.fin-preset.on { background: var(--brand); color: #fff; font-weight: 600; }
.fin-preset:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.fin-dates { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; }
.fin-dates label { display: flex; flex-direction: column; gap: 3px; font-size: 11.5px; color: var(--muted); }
.fin-dates input[type="date"] { padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); font-size: 13px; min-height: 36px; }
.fin-range-say { flex-basis: 100%; font-size: 12px; }
.fin-range-say:empty { display: none; }
.fin-exceptions { border: 1px solid var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface));
  border-radius: 10px; padding: 10px 14px; margin: 0 0 14px; font-size: 13px; }
.fin-exceptions ul { margin: 6px 0 0; padding-left: 18px; }
.fin-exceptions li { margin: 2px 0; }

/* ===== ⚡ Quick Log — phone-first, big tap targets ===== */
.ql { max-width: 560px; margin: 0 auto; }
.ql .warn-banner { background: color-mix(in srgb, var(--warn, #d97706) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--warn, #d97706) 40%, transparent);
  border-radius: 10px; padding: 10px 14px; margin-bottom: 12px; font-size: 13.5px; }
.ql-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
  gap: 10px; margin: 12px 0; }
.ql-btn { display: flex; flex-direction: column; align-items: center; justify-content: center;
  gap: 6px; padding: 18px 8px; font-size: 30px; border-radius: 14px; cursor: pointer;
  border: 1px solid var(--border); background: var(--surface); color: var(--text);
  transition: transform .05s ease; min-height: 104px; }
.ql-btn:active { transform: scale(.96); }
.ql-btn span { font-size: 13px; line-height: 1.25; text-align: center; }
.ql-appts { display: flex; flex-direction: column; gap: 6px; }
.ql-appt { display: flex; align-items: center; gap: 10px; padding: 9px 10px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); }
.ql-appt.mine { border-color: color-mix(in srgb, var(--success, #16a34a) 55%, transparent);
  background: color-mix(in srgb, var(--success, #16a34a) 7%, transparent); }
.ql-time { font-weight: 700; font-variant-numeric: tabular-nums; min-width: 46px; }
.ql-who { flex: 1; display: flex; flex-direction: column; }
.ql-who small { color: var(--muted, #6b7280); }
.ql-passfail { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; margin: 10px 0; }
.ql-passfail .btn { padding: 16px; font-size: 17px; }
.ql-pt { display: block; width: 100%; text-align: left; padding: 11px 12px; margin: 4px 0;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  color: var(--text); cursor: pointer; font-size: 14.5px; }
.ql-cards { display: flex; flex-direction: column; gap: 10px; margin-top: 12px; }
.ql-card { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px;
  background: var(--surface); }
.ql-card-h { font-weight: 700; margin-bottom: 4px; }
.ql-line { font-size: 13.5px; margin: 2px 0; }

/* Quick Log — My work life (Oct 2026): the self-service icons and their panels */
.ql-sec { margin: 16px 2px 0; font-size: 12px; font-weight: 700; letter-spacing: .4px;
  text-transform: uppercase; color: var(--muted, #6b7280); }
.ql-btn { position: relative; }
.ql-badge { position: absolute; top: 8px; right: 8px; min-width: 22px; height: 22px; padding: 0 6px;
  border-radius: 999px; background: var(--danger, #dc2626); color: #fff; font-size: 12px;
  font-weight: 700; line-height: 22px; text-align: center; font-variant-numeric: tabular-nums; }
.ql-range { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px; margin-bottom: 8px; }
.ql-range .field { flex: 1 1 140px; margin-bottom: 0; }
.ql-stats { display: grid; grid-template-columns: repeat(auto-fit, minmax(84px, 1fr)); gap: 8px; margin: 8px 0; }
.ql-stat { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; background: var(--surface);
  display: flex; flex-direction: column; align-items: center; }
.ql-stat b { font-size: 20px; font-variant-numeric: tabular-nums; }
.ql-stat span { font-size: 11px; color: var(--muted, #6b7280); }
.ql-stat.green b { color: var(--success, #16a34a); }
.ql-stat.amber b { color: var(--warn, #d97706); }
.ql-stat.red b { color: var(--danger, #dc2626); }
.ql-stat.blue b { color: var(--accent); }
.ql-grow { flex: 1; min-width: 0; }
.ql-acts { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: flex-end; }
.md-row.ql-today { background: color-mix(in srgb, var(--accent) 7%, transparent); border-radius: 6px;
  padding-left: 6px; padding-right: 6px; }
.ql-private { font-size: 12.5px; margin: 0 0 10px; padding: 8px 10px; border-radius: 8px;
  background: var(--surface-2); border: 1px solid var(--border); }
.ql-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ql-msg { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 6px 0;
  background: var(--surface); font-size: 13px; }
.ql-msg.new { border-color: color-mix(in srgb, var(--warn, #d97706) 55%, var(--border)); }
.ql-msg-h { display: flex; justify-content: space-between; align-items: flex-start; gap: 8px; margin-bottom: 4px; }
.ql-msg-body { white-space: pre-wrap; overflow-wrap: anywhere; }
.ql-reply { margin-top: 8px; padding: 6px 10px; border-left: 3px solid var(--success, #16a34a);
  background: var(--surface-2); border-radius: 0 8px 8px 0; }
.ql-rep-form { display: flex; flex-direction: column; gap: 6px; margin-top: 8px; }
.ql-rep-form[hidden] { display: none; }
.ql-rep-form textarea { width: 100%; }

/* Quick Log — my roster week strip */
.ql-week { display: flex; gap: 8px; overflow-x: auto; padding-bottom: 4px; }
.ql-day { min-width: 92px; flex: 0 0 auto; border: 1px solid var(--border); border-radius: 10px;
  padding: 8px 10px; background: var(--surface); display: flex; flex-direction: column; gap: 2px; }
.ql-day.today { border-color: var(--accent); box-shadow: 0 0 0 1px var(--accent) inset; }
.ql-day.off { opacity: .55; }
.ql-dow { font-size: 11px; color: var(--muted, #6b7280); font-weight: 700; letter-spacing: .3px; }
.ql-shift { font-size: 13px; font-weight: 600; }
.ql-note { font-size: 11px; color: var(--muted, #6b7280); }

/* ============================================================
   My Align — staff self-service portal (mobile-first PWA)
   ============================================================ */
.sp-header {
  position: sticky; top: 0; z-index: 10; display: flex; align-items: center;
  justify-content: space-between; gap: 12px; padding: 14px 16px;
  padding-top: calc(14px + env(safe-area-inset-top));
  background: color-mix(in srgb, var(--surface) 88%, transparent);
  backdrop-filter: blur(8px); border-bottom: 1px solid var(--border);
}
.sp-id { display: flex; align-items: center; gap: 11px; min-width: 0; }
.sp-avatar { width: 42px; height: 42px; border-radius: 50%; flex-shrink: 0;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark)); color: #fff;
  display: grid; place-items: center; font-weight: 700; font-size: 15px; }
.sp-id-text { display: flex; flex-direction: column; line-height: 1.2; min-width: 0; }
.sp-id-text strong { font-size: 15px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sp-id-text span { font-size: 12px; }
.sp-head-actions { display: flex; align-items: center; gap: 6px; flex-shrink: 0; }
.sp-icon-btn { padding: 8px 10px; font-size: 15px; line-height: 1; }
.sp-main { padding: 16px 16px 96px; max-width: 620px; margin: 0 auto; }

/* Bottom tab bar */
.sp-tabs {
  position: fixed; left: 0; right: 0; bottom: 0; z-index: 20; display: flex;
  background: var(--surface); border-top: 1px solid var(--border);
  padding-bottom: env(safe-area-inset-bottom);
}
.sp-tab { flex: 1 1 0; border: none; background: transparent; cursor: pointer;
  color: var(--muted); font-size: 11px; font-weight: 600; padding: 9px 4px 8px;
  display: flex; flex-direction: column; align-items: center; gap: 3px; }
.sp-tab span { font-size: 20px; line-height: 1; filter: grayscale(.4); opacity: .75; }
.sp-tab.on { color: var(--brand); }
.sp-tab.on span { filter: none; opacity: 1; }

/* Cards + hero */
.sp-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  padding: 16px; margin-bottom: 14px; box-shadow: var(--shadow); }
.sp-card h3 { font-size: 13px; text-transform: uppercase; letter-spacing: .5px; color: var(--muted); margin-bottom: 10px; }
.sp-hero { text-align: center; padding: 22px 16px; color: #fff;
  background: linear-gradient(135deg, var(--brand), var(--brand-dark)); border: none; }
.sp-hero .sp-grade { font-size: 13px; font-weight: 700; letter-spacing: .6px; text-transform: uppercase; opacity: .92; }
.sp-hero .sp-points { font-size: 44px; font-weight: 800; line-height: 1.05; margin: 4px 0; }
.sp-hero .sp-sub { font-size: 12.5px; opacity: .9; }
/* Progress bar to next grade */
.sp-bar { height: 9px; border-radius: 999px; background: rgba(255,255,255,.28); overflow: hidden; margin: 14px 0 6px; }
.sp-bar > i { display: block; height: 100%; background: #fff; border-radius: 999px; }
/* Stat tiles (pay/attendance) */
.sp-tiles { display: grid; grid-template-columns: repeat(2, 1fr); gap: 10px; }
.sp-tile { background: var(--surface-2); border-radius: 12px; padding: 12px; text-align: center; }
.sp-tile b { display: block; font-size: 22px; font-weight: 800; color: var(--text); }
.sp-tile small { font-size: 11px; color: var(--muted); }
/* List rows (leave, ledger) */
.sp-row { display: flex; align-items: center; justify-content: space-between; gap: 10px;
  padding: 11px 0; border-bottom: 1px solid var(--border); }
.sp-row:last-child { border-bottom: none; }
.sp-row .sp-row-main { min-width: 0; }
.sp-row .sp-row-main strong { display: block; font-size: 14px; }
.sp-row .sp-row-main small { color: var(--muted); font-size: 12px; }
.sp-empty { text-align: center; color: var(--muted); padding: 18px 0; font-size: 13px; }
.sp-fullbtn { width: 100%; justify-content: center; padding: 13px; font-size: 15px; border-radius: 12px; }
/* Profile fields */
.sp-field { display: flex; justify-content: space-between; gap: 12px; padding: 11px 0; border-bottom: 1px solid var(--border); }
.sp-field:last-child { border-bottom: none; }
.sp-field span { color: var(--muted); font-size: 13px; }
.sp-field strong { font-size: 14px; text-align: right; word-break: break-word; }

/* ============================================================
   Go-Live Readiness — the shared rollout checklist (Cup area)
   ============================================================ */
.gl { margin-bottom: 8px; }
.gl-meter { display: flex; align-items: center; gap: 16px; margin: 4px 0 20px;
  padding: 14px 18px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 14px; box-shadow: var(--shadow); }
.gl-pct { font-size: 30px; font-weight: 800; letter-spacing: -.01em; font-variant-numeric: tabular-nums; }
.gl-meter .target-bar { height: 12px; }
.gl-mono { font-family: ui-monospace, "SF Mono", Menlo, monospace; font-size: 12.5px; white-space: nowrap; }
.gl-depts { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 760px) { .gl-depts { grid-template-columns: 1fr; } }
.gl-card { background: var(--surface); border: 1px solid var(--border); border-radius: 16px;
  box-shadow: var(--shadow); overflow: hidden; display: flex; flex-direction: column; }
.gl-card.done { border-color: color-mix(in srgb, var(--success) 55%, var(--border)); }
.gl-card-h { display: flex; align-items: flex-start; gap: 12px; padding: 15px 16px 12px; }
.gl-ic { font-size: 22px; line-height: 1; }
.gl-card-id { display: flex; flex-direction: column; line-height: 1.25; min-width: 0; }
.gl-card-id strong { font-size: 16px; }
.gl-card-id small { font-size: 11.5px; }
.gl-card-act { margin-left: auto; display: flex; align-items: center; gap: 8px; flex-shrink: 0; }
.gl-cnt { flex-shrink: 0; font-family: ui-monospace, Menlo, monospace;
  font-size: 12px; font-variant-numeric: tabular-nums; padding: 3px 9px; border-radius: 999px;
  background: var(--surface-2); color: var(--muted); }
.gl-share { border: 1px solid var(--border); background: var(--surface-2); color: var(--muted);
  width: 30px; height: 30px; border-radius: 8px; cursor: pointer; font-size: 15px; line-height: 1; }
.gl-share:hover { border-color: var(--brand); color: var(--brand); }
.gl-lead { font-size: 11.5px; color: var(--brand-dark); font-weight: 600; }
@media (prefers-color-scheme: dark) { .gl-lead { color: #5eead4; } }
.gl-lead-btn { border: none; background: transparent; cursor: pointer; font-size: 11px;
  color: var(--muted); padding: 1px 4px; border-radius: 5px; }
.gl-lead-btn:hover { color: var(--brand); background: var(--surface-2); }
.gl-card.done .gl-cnt { background: color-mix(in srgb, var(--success) 16%, transparent);
  color: var(--success); font-weight: 700; }
.gl-cardbar { height: 4px; border-radius: 0; }
.gl-cardbar .target-fill { border-radius: 0; }
.gl-card.done .gl-cardbar .target-fill { background: var(--success); }
.gl-tasks { padding: 6px 8px 10px; }
.gl-task { position: relative; display: flex; align-items: flex-start; gap: 10px;
  padding: 9px 54px 9px 10px; border-radius: 10px; cursor: pointer; transition: background .12s; }
.gl-task:hover { background: var(--surface-2); }
.gl-task input { position: absolute; opacity: 0; width: 0; height: 0; }
.gl-box { flex-shrink: 0; width: 20px; height: 20px; margin-top: 1px; border-radius: 6px;
  border: 2px solid var(--border); position: relative; transition: background .15s, border-color .15s; }
.gl-task input:checked + .gl-box { background: var(--brand); border-color: var(--brand); }
.gl-task input:checked + .gl-box::after { content: ""; position: absolute; left: 5px; top: 1px;
  width: 6px; height: 11px; border: solid #fff; border-width: 0 2.5px 2.5px 0; transform: rotate(45deg); }
.gl-task input:focus-visible + .gl-box { outline: 2px solid var(--brand); outline-offset: 2px; }
.gl-txt { font-size: 14px; line-height: 1.45; }
.gl-task.on .gl-txt { color: var(--muted); text-decoration: line-through;
  text-decoration-color: color-mix(in srgb, var(--muted) 55%, transparent); }
.gl-assignee { display: inline-block; font-size: 11.5px; font-weight: 700; white-space: nowrap;
  color: var(--brand-dark); background: color-mix(in srgb, var(--brand) 12%, transparent);
  border-radius: 999px; padding: 1px 8px; margin-left: 2px; }
@media (prefers-color-scheme: dark) { .gl-assignee { color: #7ee8da; } }
.gl-assign { position: absolute; right: 30px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; cursor: pointer; font-size: 13px;
  opacity: 0; padding: 4px 5px; border-radius: 6px; }
.gl-task:hover .gl-assign { opacity: .65; }
.gl-assign:hover { opacity: 1; background: var(--surface-2); }
.gl-del { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: transparent; color: var(--muted); cursor: pointer; font-size: 14px;
  opacity: 0; padding: 4px 6px; border-radius: 6px; }
.gl-task:hover .gl-del { opacity: .8; }
.gl-del:hover { opacity: 1; color: var(--danger); background: var(--surface-2); }
.gl-add { padding: 6px 10px 2px; }
.gl-add input { width: 100%; border: 1px dashed var(--border); background: transparent;
  color: var(--text); border-radius: 9px; padding: 8px 10px; font: inherit; font-size: 13px; }
.gl-add input:focus { outline: none; border-color: var(--brand); border-style: solid; }
.gl-means { margin-top: auto; padding: 11px 16px 14px; font-size: 12.5px; color: var(--muted);
  border-top: 1px dashed var(--border); background: var(--surface-2); }
.gl-means b { color: var(--brand-dark); font-family: ui-monospace, Menlo, monospace;
  font-size: 10.5px; letter-spacing: .09em; text-transform: uppercase; }

/* ---- Action Required banner (Compliance + Maintenance) ---- */
.action-banner { display: flex; align-items: center; flex-wrap: wrap; gap: 10px;
  margin: 0 0 16px; padding: 11px 14px; border-radius: 10px;
  border: 1px solid color-mix(in srgb, var(--danger) 40%, var(--border));
  background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.action-banner.soon { border-color: color-mix(in srgb, var(--warn) 40%, var(--border));
  background: color-mix(in srgb, var(--warn) 8%, var(--surface)); }
.action-banner .ab-title { font-weight: 700; color: var(--danger); white-space: nowrap; }
.action-banner.soon .ab-title { color: var(--warn); }
.action-banner .ab-chips { display: flex; flex-wrap: wrap; gap: 6px; flex: 1; }
.cc-chip { border: 1px solid var(--border); background: var(--surface-2); color: var(--text);
  border-radius: 999px; padding: 4px 11px; font-size: 12.5px; font-weight: 600; cursor: pointer; }
.cc-chip:hover { border-color: var(--brand); }
.cc-chip.od { border-color: color-mix(in srgb, var(--danger) 45%, var(--border));
  color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.cc-chip.soon { border-color: color-mix(in srgb, var(--warn) 45%, var(--border));
  color: var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); }
.action-banner .ab-x { border: none; background: transparent; color: var(--muted);
  cursor: pointer; font-size: 15px; line-height: 1; padding: 2px 6px; }
.action-banner .ab-x:hover { color: var(--text); }
.linklike { border: none; background: transparent; color: var(--brand); cursor: pointer;
  font: inherit; padding: 0; text-decoration: underline; }

/* Searchable inventory item picker (Materials used, GRN, issue, transfer, BOM,
   count adjustment). Type to search by name / SKU / barcode; click to pick. */
.inv-pick { position: relative; }
.inv-results { position: absolute; top: 100%; left: 0; right: 0; z-index: 70;
  background: var(--surface); border: 1px solid var(--border); border-radius: 8px;
  max-height: 240px; overflow: auto; box-shadow: 0 8px 24px rgba(0,0,0,.16); margin-top: 3px; }
.inv-opt { padding: 8px 10px; cursor: pointer; border-bottom: 1px solid var(--border);
  font-size: 13px; color: var(--text); }
.inv-opt:last-child { border-bottom: 0; }
.inv-opt:hover, .inv-opt.on { background: var(--surface-2); }
.inv-opt small { color: var(--muted); }

/* Visual organisation chart (HR → Organisation structure → Chart). Classic
   pure-CSS tree: centred nodes joined by connector lines; scrolls sideways. */
.orgchart-scroll { overflow-x: auto; padding: 10px 4px 4px; }
.orgchart { display: inline-block; min-width: 100%; text-align: center; }
.orgchart ul { position: relative; padding-top: 18px; display: flex; justify-content: center; list-style: none; margin: 0; }
.orgchart li { position: relative; padding: 18px 8px 0; list-style: none; }
.orgchart li::before, .orgchart li::after { content: ""; position: absolute; top: 0; right: 50%;
  width: 50%; height: 18px; border-top: 1.5px solid var(--border); }
.orgchart li::after { right: auto; left: 50%; border-left: 1.5px solid var(--border); }
.orgchart li:only-child::before, .orgchart li:only-child::after { display: none; }
.orgchart li:first-child::before, .orgchart li:last-child::after { border: 0; }
.orgchart li:last-child::before { border-right: 1.5px solid var(--border); border-radius: 0 6px 0 0; }
.orgchart li:first-child::after { border-radius: 6px 0 0 0; }
.orgchart ul ul::before { content: ""; position: absolute; top: 0; left: 50%; width: 0; height: 18px;
  border-left: 1.5px solid var(--border); }
.orgchart .oc-node { display: inline-block; min-width: 120px; max-width: 200px; padding: 8px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); position: relative; top: 1px; }
.orgchart .oc-node.oc-mgr { border-color: var(--brand); box-shadow: 0 1px 4px color-mix(in srgb, var(--brand) 22%, transparent); }
.orgchart .oc-name { font-weight: 600; font-size: 13px; color: var(--text); }
.orgchart .oc-role { font-size: 11.5px; color: var(--muted); margin-top: 2px; }

/* Consent document view: render the sanitized snapshot as the formatted document
   the patient reads — <b> section headings become clean teal headings, line breaks
   preserved. Used by the Consent modal and mirrored inline by the print window. */
.cdoc{white-space:pre-wrap;font-size:12.5px;line-height:1.55;color:var(--text,#111)}
.cdoc b{display:block;color:#0f3d3a;font-weight:700;font-size:14px;margin:14px 0 4px}

/* Imaging Inbox: radiographs from the RAYSCAN / SmartDent bridge waiting to be
   assigned to a patient. A card grid with a preview thumbnail, so the person
   filing can see the image, its modality and capture time at a glance. */
.img-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(240px, 1fr)); gap: 14px; margin-top: 14px; }
.img-card { border: 1px solid var(--border); border-radius: 12px; background: var(--surface);
  overflow: hidden; display: flex; flex-direction: column; }
.img-thumb { background: #0b1120; aspect-ratio: 4/3; display: flex; align-items: center; justify-content: center; overflow: hidden; }
.img-thumb img { width: 100%; height: 100%; object-fit: contain; }
.img-ph { color: var(--muted); text-align: center; font-size: 28px; line-height: 1.2; }
.img-ph small { font-size: 11px; letter-spacing: .5px; }
.img-meta { padding: 10px 12px; display: flex; flex-direction: column; gap: 4px; flex: 1; }
.img-fn { font-size: 12px; font-weight: 600; color: var(--text); word-break: break-all; }
.img-meta .small, .setup-doc .small { font-size: 11.5px; }
.img-actions { display: flex; gap: 8px; align-items: center; padding: 0 12px 12px; }
.img-actions .btn { flex: 1; }
.img-assign-preview { background: #0b1120; border-radius: 10px; padding: 12px; margin-bottom: 12px; }
.checkline { display: flex; gap: 8px; align-items: flex-start; font-size: 12.5px; color: var(--text); margin: 8px 0; }
.checkline input { margin-top: 2px; }
.setup-doc p { font-size: 13px; color: var(--text); }
.setup-doc ol { margin: 10px 0 4px; padding-left: 20px; }
.setup-doc ol li { margin: 6px 0; }
.setup-doc code { background: var(--surface-2); border: 1px solid var(--border); border-radius: 5px; padding: 1px 5px; font-size: 11.5px; }

/* ===== Align Smile Rewards — the patient's card (Sep 2026) ==================
   The owner asked for premium, encouraging and extremely simple. So the card
   leads with ONE big number the patient owns, then how close the next tier is,
   then one thing worth doing next — and nothing else competes with those. */
.smile-hero{text-align:center;padding:14px 0 6px}
.smile-points{font-size:44px;font-weight:800;line-height:1;letter-spacing:-1px;
  color:var(--brand,#0f766e)}
.smile-sub{margin-top:6px;font-size:13px;color:var(--muted,#64748b)}
.smile-gift{margin:10px 0 0;padding:9px 12px;border-radius:10px;font-size:13px;
  background:rgba(234,179,8,.12);border:1px solid rgba(234,179,8,.35)}
.smile-rise{margin-top:14px}
.smile-rise-row{display:flex;justify-content:space-between;font-size:12px;
  font-weight:700;color:var(--muted,#64748b);margin-bottom:5px}
/* A hairline track with a rounded fill — a progress bar the patient reads at a
   glance, never a percentage they have to interpret. */
.smile-bar{height:9px;border-radius:99px;background:rgba(100,116,139,.18);overflow:hidden}
.smile-bar > i{display:block;height:100%;border-radius:99px;
  background:linear-gradient(90deg,#0f766e,#14b8a6)}
.smile-facts{display:grid;grid-template-columns:repeat(3,1fr);gap:8px;margin-top:14px;text-align:center}
.smile-facts > div{padding:10px 6px;border-radius:10px;background:rgba(100,116,139,.07)}
.smile-facts span{display:block;font-size:19px;font-weight:700}
.smile-facts small{display:block;margin-top:2px;font-size:11px;color:var(--muted,#64748b);line-height:1.3}
.smile-next{margin:12px 0 0;padding:10px 12px;border-radius:10px;font-size:13px;
  background:rgba(15,118,110,.08);border:1px solid rgba(15,118,110,.22)}
.smile-ways{margin-top:12px;font-size:13px}
.smile-ways summary{cursor:pointer;color:var(--brand,#0f766e);font-weight:600}
.smile-ways ul{margin:8px 0 0;padding-left:18px}
.smile-ways li{margin:3px 0}
.smile-ways li .muted{display:block;font-size:12px}
@media (max-width:420px){
  .smile-points{font-size:36px}
  .smile-facts{grid-template-columns:1fr;text-align:left}
  .smile-facts > div{display:flex;align-items:baseline;gap:8px}
  .smile-facts small{margin:0}
}

/* Patient portal — Find the right doctor (Sep 2026) */
.dg-areas{display:flex;flex-wrap:wrap;gap:6px;margin:8px 0 12px}
.dg-area{border:1px solid var(--border,#e2e8f0);background:var(--surface,#fff);color:inherit;border-radius:999px;padding:6px 12px;font-size:12.5px;cursor:pointer;font:inherit}
.dg-area.on{background:var(--brand,#0f766e);color:#fff;border-color:var(--brand,#0f766e)}
.dg-card{position:relative;border:1px solid var(--border,#e2e8f0);border-radius:12px;padding:12px;margin-bottom:10px;background:var(--surface,#fff)}
.dg-card.dg-rec{border-color:var(--brand,#0f766e);box-shadow:0 0 0 2px rgba(15,118,110,.14)}
.dg-ribbon{display:inline-block;background:var(--brand,#0f766e);color:#fff;font-size:11px;font-weight:600;border-radius:999px;padding:2px 10px;margin-bottom:8px}
.dg-row{display:flex;gap:12px;align-items:flex-start;flex-wrap:wrap}
.dg-photo{width:56px;height:56px;border-radius:50%;object-fit:cover;flex:none}
.dg-initials{display:flex;align-items:center;justify-content:center;color:#fff;font-weight:700;font-size:18px}
.dg-body{flex:1;min-width:200px}
.dg-stat{font-size:13px;margin-top:3px}
.dg-ask{white-space:nowrap;align-self:center}
.dg-foryou{background:rgba(15,118,110,.08);border-radius:10px;padding:10px 12px;margin-bottom:12px}
.dg-fy{display:flex;gap:10px;align-items:center;justify-content:space-between;flex-wrap:wrap;margin-top:6px;font-size:13.5px}

/* ── Clinic Communication Hub (Sep 2026) — tabs on top, list left, thread right ── */
.hub { display: flex; flex-direction: column; gap: 10px; height: calc(100vh - 240px); min-height: 480px; }
.hub-tabs { display: flex; gap: 6px; flex-wrap: wrap; }
.hub-tab { padding: 7px 12px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface); cursor: pointer;
  font-size: 12.5px; font-weight: 600; color: var(--muted); font-family: inherit; }
.hub-tab:hover { border-color: var(--brand); color: var(--text); }
.hub-tab.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.hub-body { display: grid; grid-template-columns: 330px 1fr; gap: 12px; flex: 1; min-height: 0; }
.hub-list, .hub-main { border: 1px solid var(--border); border-radius: 12px; background: var(--surface); display: flex; flex-direction: column; min-height: 0; overflow: hidden; }
.hub-search { padding: 10px; border-bottom: 1px solid var(--border); }
.hub-search input, .hub-search select { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 13px; }
.hub-filters { display: grid; gap: 6px; }
.hub-items { overflow: auto; flex: 1; }
.hub-section { padding: 8px 12px 4px; font-size: 11px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 700; }
.hub-item { padding: 10px 12px; border-bottom: 1px solid var(--border); cursor: pointer; display: flex; gap: 10px; align-items: center; }
.hub-item:hover, .hub-item.on { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.hub-item .who { font-weight: 600; font-size: 13px; }
.hub-item .sub { font-size: 12px; color: var(--muted); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.hub-item .when { font-size: 11px; color: var(--muted); white-space: nowrap; align-self: flex-start; }
.hub-avatar { width: 34px; height: 34px; border-radius: 50%; flex: none; display: flex; align-items: center; justify-content: center;
  font-size: 12px; font-weight: 700; color: #fff; background: linear-gradient(135deg, var(--brand), var(--brand-dark)); }
.hub-avatar.pat { background: linear-gradient(135deg, var(--accent), #4338ca); }
.hub-avatar.seg { background: var(--surface-2); color: var(--text); border: 1px solid var(--border); }
.hub-unread { background: var(--danger); color: #fff; border-radius: 999px; font-size: 10.5px; padding: 1px 7px; font-weight: 700; vertical-align: middle; }
.hub-head { padding: 12px 14px; border-bottom: 1px solid var(--border); display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.hub-msgs { flex: 1; overflow: auto; padding: 14px; display: flex; flex-direction: column; gap: 10px; background: var(--surface-2); }
.hub-msg { max-width: 78%; padding: 9px 12px; border-radius: 14px; background: var(--surface); border: 1px solid var(--border); font-size: 13.5px; line-height: 1.45; white-space: pre-wrap; word-break: break-word; }
.hub-msg.mine { align-self: flex-end; background: color-mix(in srgb, var(--brand) 14%, var(--surface)); border-color: color-mix(in srgb, var(--brand) 35%, transparent); }
.hub-msg .meta { font-size: 11px; color: var(--muted); margin-bottom: 3px; white-space: normal; }
.hub-msg.gone { font-style: italic; color: var(--muted); }
.hub-deliv { display: flex; gap: 4px; flex-wrap: wrap; margin-top: 6px; }
.hub-reply { padding: 10px 12px; border-top: 1px solid var(--border); display: flex; gap: 8px; align-items: flex-end; }
.hub-reply textarea { flex: 1; min-height: 44px; max-height: 160px; resize: vertical; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); color: var(--text); font: inherit; font-size: 13.5px; }
.hub-compose { padding: 14px; overflow: auto; }
.hub-empty { flex: 1; display: flex; align-items: center; justify-content: center; color: var(--muted); font-size: 13px; padding: 20px; text-align: center; }
.hub-privacy { font-size: 12.5px; background: color-mix(in srgb, var(--warn) 12%, transparent); border: 1px solid color-mix(in srgb, var(--warn) 40%, transparent); border-radius: 8px; padding: 8px 10px; margin: 0 0 10px; }
.hub-consent-row { display: flex; gap: 12px; flex-wrap: wrap; align-items: center; font-size: 12.5px; margin: 4px 0 10px; }
.hub-consent input { width: auto; margin-right: 4px; }
.hub-back { display: none; }
/* The floating + (quick add) sits bottom-right — exactly over the hub's Send
   button on a login that has it. The hub has its own compose; hide it there. */
body:has(#hubRoot) .fab-wrap { display: none; }
@media (max-width: 719px) {
  .hub { height: auto; min-height: 0; }
  .hub-body { grid-template-columns: 1fr; }
  .hub-list { max-height: 48vh; }
  .hub.hub-open .hub-list { display: none; }
  .hub-main { min-height: 65vh; }
  .hub-back { display: inline-block; }
  .hub-msg { max-width: 92%; }
}
/* the patient's side of the hub, on the portal */
.pm-msgs { display: flex; flex-direction: column; gap: 6px; margin: 8px 0; }
.pm-msg { background: var(--surface-2); border-radius: 10px; padding: 8px 10px; font-size: 13px; white-space: pre-wrap; word-break: break-word; }
.pm-msg.mine { background: color-mix(in srgb, var(--brand) 14%, var(--surface)); margin-left: 18%; }
.pm-reply { display: flex; gap: 6px; margin-top: 6px; }
.pm-reply input { flex: 1; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }

/* ── Online booking with PayHere (patient portal) ── */
.dg-actions { display: flex; flex-direction: column; gap: 6px; align-self: center; }
.dg-book { font-size: 12.5px; }
.book-modal { width: min(560px, 94vw); max-height: 92vh; overflow: auto; }
.book-week { font-size: 12.5px; margin: 0 0 8px; display: flex; flex-direction: column; gap: 2px; }
.book-days { display: flex; gap: 6px; flex-wrap: wrap; margin: 6px 0 10px; }
.book-day { border: 1px solid var(--border); background: var(--surface); border-radius: 10px; padding: 6px 10px; cursor: pointer; font: inherit; font-size: 12.5px; color: var(--text); display: flex; flex-direction: column; align-items: center; }
.book-day small { color: var(--muted); font-size: 10.5px; }
.book-day.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.book-slots { display: grid; grid-template-columns: repeat(auto-fill, minmax(88px, 1fr)); gap: 6px; }
.book-slots[hidden] { display: none; }   /* the class's grid must not beat the hidden attribute */
.book-slot { border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 8px 4px; cursor: pointer; font: inherit; font-size: 13px; color: var(--text); }
.book-slot.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.book-banner { border-radius: 10px; padding: 10px 14px; margin: 0 0 12px; font-size: 13.5px; background: var(--surface-2); border: 1px solid var(--border); }
.book-banner.ok { background: color-mix(in srgb, var(--success) 12%, transparent); border-color: color-mix(in srgb, var(--success) 40%, transparent); }
.book-banner.warn { background: color-mix(in srgb, var(--warn) 12%, transparent); border-color: color-mix(in srgb, var(--warn) 40%, transparent); }
.book-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.book-actions .btn { padding: 4px 9px; font-size: 12px; white-space: nowrap; }

/* GRN for Fixed Assets (Oct 2026): an asset row keeps the delivery grid's nine
   cells EXACTLY as a stock row does — so the heading strip above it lines up with
   its boxes (the first cut gave it a grid of its own and every heading sat over
   the wrong cell) — and the machine's record (serial, model, warranty certificate,
   category) sits on a second line that spans the row. */
.grn-asset-fields { grid-column: 1 / -1; display: grid; grid-template-columns: 96px repeat(4, minmax(0, 1fr)); gap: 6px; align-items: center; }
.grn-asset-fields input, .grn-asset-fields select { padding: 5px 6px; font-size: 11.5px; min-width: 0; }
.grn-asset-cap { color: var(--muted); font-size: 10.5px; text-transform: uppercase; letter-spacing: .04em; white-space: nowrap; }
/* "Fixed asset order — only its own line(s) are received here" (Oct 2026). */
.grn-assetonly { border: 1px solid var(--border); border-left: 3px solid var(--warn); background: var(--surface-2);
  border-radius: 8px; padding: 10px 12px; margin: 6px 0 12px; font-size: 12.5px; }
.grn-assetonly[hidden] { display: none; }   /* the class's own display must not beat the hidden attribute */

/* ---- All-on-X Treatment Packages (Oct 2026) ---------------------------- */
.aox-tabs { margin-top: 4px; }
.aox-arches { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; margin-bottom: 6px; }
.aox-arch { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px 2px; background: var(--surface); }
.aox-arch .tick-row { margin-bottom: 10px; }
.aox-preview { margin: 4px 0 14px; }
.aox-prev-arch { border: 1px solid var(--border); border-radius: 9px; padding: 8px 12px; margin-bottom: 8px; background: var(--surface-2); font-size: 13px; }
.aox-prev-arch ul { margin: 6px 0 0; padding-left: 18px; }
.aox-prev-arch li { margin: 2px 0; }
.aox-case .aox-head { display: flex; justify-content: space-between; gap: 18px; flex-wrap: wrap; align-items: flex-start; margin-bottom: 12px; }
.aox-pt { font-size: 17px; font-weight: 700; }
.aox-money { display: grid; grid-template-columns: repeat(4, minmax(110px, auto)); gap: 4px 18px; text-align: right; }
.aox-money div { display: flex; flex-direction: column; font-size: 12px; }
.aox-money strong { font-size: 15px; font-variant-numeric: tabular-nums; }
.aox-warn { color: var(--warn); }
.aox-h { margin: 18px 0 8px; font-size: 13.5px; }
.aox-inc { margin: 0 0 4px; font-size: 13px; }
.aox-inc summary { cursor: pointer; color: var(--muted); }
.aox-inc ul { margin: 6px 0 0; padding-left: 18px; columns: 2; }
.aox-sib { cursor: pointer; border: none; font: inherit; }
.aox-stages { display: grid; gap: 8px; }
.aox-stage { display: flex; gap: 12px; padding: 10px 12px; border: 1px solid var(--border); border-left: 4px solid var(--border); border-radius: 9px; background: var(--surface); }
.aox-stage.aox-InProgress { border-left-color: var(--accent); }
.aox-stage.aox-Done { border-left-color: var(--success); background: color-mix(in srgb, var(--success) 5%, var(--surface)); }
.aox-stage-no { flex: 0 0 26px; height: 26px; border-radius: 50%; background: var(--surface-2); color: var(--muted); display: flex; align-items: center; justify-content: center; font-weight: 700; font-size: 13px; }
.aox-stage.aox-Done .aox-stage-no { background: var(--success); color: #fff; }
.aox-stage.aox-InProgress .aox-stage-no { background: var(--accent); color: #fff; }
.aox-stage-main { flex: 1; min-width: 0; }
.aox-stage-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.aox-note { margin-top: 4px; padding: 6px 9px; border-radius: 7px; background: var(--surface-2); font-size: 12.5px; white-space: pre-wrap; }
.aox-visits { list-style: none; margin: 6px 0 0; padding: 0; font-size: 12.5px; }
.aox-visits li { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 2px 0; }
.aox-stage-acts { margin-top: 8px; display: flex; gap: 6px; flex-wrap: wrap; }
.aox-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 18px; }
.aox-pt-lbl { display: inline-flex; align-items: center; gap: 4px; margin: 0 8px 2px 0; font-size: 12px; white-space: nowrap; }
.aox-settings .field input[type="number"] { max-width: 100%; }
@media (max-width: 720px) {
  .aox-arches { grid-template-columns: 1fr; }
  .aox-money { grid-template-columns: repeat(2, 1fr); text-align: left; }
  .aox-inc ul { columns: 1; }
}
.aox-settings input.aox-st-name { min-width: 230px; }
.aox-settings input.aox-st-note { min-width: 140px; }
.aox-pay { border: 1px solid var(--border); border-radius: 10px; padding: 12px 14px; background: var(--surface-2); }
.aox-paywarn { margin: 0 0 8px; padding: 6px 10px; border-radius: 7px; font-size: 12.5px; background: color-mix(in srgb, var(--warn) 14%, transparent); color: var(--warn); }
.aox-money.aox-paygrid { grid-template-columns: repeat(4, minmax(120px, 1fr)); text-align: left; gap: 10px 18px; }
@media (max-width: 720px) { .aox-money.aox-paygrid { grid-template-columns: repeat(2, 1fr); } }

/* Asset Tagging (Oct 2026): the tag box is sized to its tag in JS (tagWidth, in ch);
   these only lay out the cell and the prefix bar. */
.tag-cell { display: flex; align-items: center; gap: 6px; }
.tag-cell .tagIn { min-width: 0; font-variant-numeric: tabular-nums; }
.tag-prefix-bar { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 12px 0 4px; }
.tag-prefix-bar .tag-next { flex-basis: 100%; font-size: 12px; min-height: 16px; }

/* Scanning (Oct 2026): the scan bar above the Fixed Assets screens, the phone-camera dialog,
   and the row a scanned label points at. Colour is never the only signal - the message
   itself begins with a tick or a warning sign. */
.fa-scanbar { display: flex; align-items: flex-end; gap: 10px; flex-wrap: wrap; margin: 0 0 12px; }
.fa-scanbar .field { flex: 1 1 280px; max-width: 440px; margin: 0; }
.scan-msg { flex: 1 1 100%; font-size: 13px; min-height: 18px; }
.scan-msg.ok, .scan-status.ok { color: var(--success); }
.scan-msg.bad, .scan-status.bad { color: var(--danger); }
.scan-cam { display: flex; flex-direction: column; gap: 8px; }
.scan-view { position: relative; background: #000; border-radius: 12px; overflow: hidden; min-height: 150px; }
.scan-view video { display: block; width: 100%; max-height: 52vh; object-fit: cover; }
.scan-reticle { position: absolute; left: 6%; right: 6%; top: 50%; border-top: 2px solid var(--danger); opacity: .85; pointer-events: none; }
.scan-status { font-size: 13px; min-height: 18px; }
.scan-manual { display: flex; gap: 8px; }
.scan-manual input { flex: 1; min-width: 0; padding: 10px 12px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface-2); color: var(--text); font-size: 13.5px; font-family: inherit; }
.scan-log { list-style: none; margin: 0; padding: 0; max-height: 150px; overflow: auto; font-size: 12.5px; }
.scan-log li { padding: 4px 0; border-bottom: 1px solid var(--border); }
.scan-log li.bad { color: var(--danger); }
tr.row-found > td { background: color-mix(in srgb, var(--brand) 16%, transparent); }
tr.row-found > td:first-child { box-shadow: inset 3px 0 0 var(--brand); }

/* Doctors' working hours on the staff form (Oct 2026): a tab per clinic, a row per weekday.
   Not a .field - `.field input` would stretch the checkboxes and time boxes to full width. */
.wh-field { margin-bottom: 14px; }
.wh-field > label { display: block; font-size: 12px; color: var(--muted); margin-bottom: 5px; }
.wh-tabs { display: flex; gap: 6px; flex-wrap: wrap; margin-bottom: 8px; }
.wh-tab { padding: 6px 12px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface-2);
  color: var(--text); font: inherit; font-size: 13px; cursor: pointer; }
.wh-tab[aria-selected="true"] { border-color: var(--brand); color: var(--brand); font-weight: 600;
  background: color-mix(in srgb, var(--brand) 12%, transparent); }
.wh-grid { display: flex; flex-direction: column; gap: 6px; }
.wh-day { display: grid; grid-template-columns: 84px 1fr; gap: 8px; align-items: start; }
.wh-day .day-pick { justify-self: start; }
.wh-wins { display: flex; flex-direction: column; gap: 6px; align-items: flex-start; min-height: 34px; justify-content: center; }
.wh-win { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.wh-win input[type="time"] { width: auto; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 13.5px; }
.wh-off { color: var(--muted); font-size: 12.5px; }
.wh-tools { display: flex; gap: 8px; flex-wrap: wrap; margin-top: 10px; }
.wh-note { font-size: 12px; margin-top: 8px; }
.wh-err { color: var(--danger); font-size: 12.5px; min-height: 16px; margin-top: 4px; }

/* Visits added for one patient in the Start Treatment Journey window (Oct 2026) */
.jx-row { display: grid; grid-template-columns: 1fr 76px 104px 30px 30px; gap: 6px; align-items: center; margin: 0 0 6px; }
.jx-row input {
  width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px;
  background: var(--surface-2); color: var(--text); font-size: 13.5px; font-family: inherit;
}
.jx-row .jx-date { font-size: 11.5px; white-space: nowrap; }
@media (max-width: 520px) { .jx-row { grid-template-columns: 1fr 64px 30px 30px; } .jx-row .jx-date { display: none; } }
.j-add { padding: 6px 0 2px; }
/* The + that adds a visit once more — on the Start window's rows and the running card */
.j-again, .jx-again { font-weight: 700; color: var(--brand); min-width: 28px; }
.j-stage .j-again { padding: 2px 8px; }
.j-stage .j-edit { padding: 2px 8px; color: var(--muted); }

/* GRN hand-typed line (Oct 2026): Item · Received (the batch window) · Rate ·
   Disc % · Total · Location — the same shape as an order row. */
.grn-row .grn-qty-btn { padding: 6px 6px; font-size: 12px; width: 100%; white-space: nowrap; }
.grn-row .grn-ro { font-size: 12px; padding: 4px 4px; white-space: nowrap; }
.grn-row .grn-ro.num { text-align: right; font-variant-numeric: tabular-nums; }

/* The note written when a journey visit was done (Oct 2026) — also on the Case Sheet. */
.j-note { flex-basis: 100%; margin: 2px 0 2px 26px; font-size: 12.5px; color: var(--text); white-space: pre-line; }

/* GRN card ✎ Edit — the lines, correctable (Oct 2026). A locked box says why. */
.ge-table td { vertical-align: top; }
.ge-table input, .ge-table select {
  width: 100%; min-width: 0; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); color: var(--text); font: inherit; font-size: 12.5px;
}
.ge-table input:disabled, .ge-table select:disabled { opacity: .55; cursor: not-allowed; }
.ge-table .ge-qty, .ge-table .ge-disc, .ge-table .ge-tax { width: 76px; }
.ge-table .ge-rate { width: 104px; }
.ge-table .ge-batch { width: 130px; }
.ge-table .ge-exp { width: 146px; }
.ge-table .ge-loc { width: 150px; }
.ge-lock { display: block; max-width: 280px; color: var(--warn); font-size: 11.5px; line-height: 1.35; margin-top: 3px; }

/* Supplier bill — Disc % / Tax % columns and the shipping row (Oct 2026) */
.line-edit .col-pct { width: 84px; }
.ap-ship-row { display: flex; gap: 14px; align-items: flex-end; flex-wrap: wrap; margin-top: 10px; }
.ap-ship-row .field { width: 200px; margin-bottom: 0; }
.ap-ship-row .tick-row { margin: 0; }

/* Attendance -> Time terminals: a reader's staff counts as a row of chips that
   wrap as whole chips on a phone, never mid-word (Oct 2026). */
.ros-bits { display: inline-flex; flex-wrap: wrap; gap: 4px; align-items: center; }
.ros-bits > * { white-space: nowrap; }

/* Staff form: the other departments a head heads (Oct 2026). Inside the
   Department .field, so the checkboxes are told not to stretch. */
.head-depts { margin-top: 6px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 9px; background: var(--surface-2); }
.head-depts[hidden] { display: none; }
.head-dept-list { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 4px; }
.field .head-dept { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; font-weight: 400; margin: 0; }
.field .head-dept input { width: auto; margin: 0; }

/* The bill's 3-way match (Oct 2026): subtotal / VAT / final side by side for
   PO, GRN and Bill, plus the item-by-item quantities. Tight cells so four
   money columns fit a phone without a sideways scroll. */
.tw-panel table th, .tw-panel table td { padding: 6px 8px; }
.tw-panel .tw-sum td:not(:first-child) { white-space: nowrap; font-variant-numeric: tabular-nums; }
.tw-panel small { font-size: 11.5px; }

/* Booking a recall as the next appointment (Oct 2026): the line on the form
   saying which recall it is for. */
.appt-recall-for { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; font-size: 13px;
  background: var(--surface-2); border-left: 3px solid var(--brand); }


/* Create Debit Note (Oct 2026): the inline error line and the Quick return warning. */
.dn-err { color: var(--danger); font-size: 13px; margin: 8px 0 0; }
.dn-err[hidden] { display: none; }
/* Create Debit Note: the invoices the items came from, listed (Oct 2026). */
.dn-inv-list { min-height: 38px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface-2); font-size: 13px; line-height: 1.5; }
.ri-qty { width: 90px; text-align: right; }
.ri-qty.bad { border-color: var(--danger); outline: 1px solid var(--danger); }
.qr-warn { font-size: 12.5px; margin: 8px 0 0; padding: 8px 10px; border-radius: 8px;
  border: 1px solid var(--warn); background: color-mix(in srgb, var(--warn) 10%, transparent); }
/* The PO card (Oct 2026: "enlarge the PO interface view"): on the wide card the
   figures stay on one line; only the item's own description wraps. */
.po-lines-view td:not(:first-child), .po-lines-view th:not(:first-child) { white-space: nowrap; }

/* The GRN register's Billed chip opens the delivery's payment voucher(s) (Oct 2026). */
button.chip.grn-billed { border: 0; cursor: pointer; font-family: inherit; white-space: nowrap; }
button.chip.grn-billed:hover { outline: 2px solid color-mix(in srgb, var(--success) 40%, transparent); }
button.chip.grn-billed:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.pv-copy { display: flex; flex-wrap: wrap; justify-content: space-between; align-items: center; gap: 10px;
  padding: 10px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); margin-bottom: 8px; }
.pv-copy-hd { font-size: 13px; line-height: 1.6; min-width: 0; }
.pv-copy-act { display: flex; gap: 6px; flex-wrap: wrap; }
.pv-copy-act a.btn { text-decoration: none; }

/* GRN edit card (Oct 2026): a line marked for removal, and the item picker. */
.ge-table .ge-item { width: 100%; min-width: 220px; }
.ge-table tr.ge-removing td { opacity: .55; }
.ge-table tr.ge-removing td:first-child, .ge-table tr.ge-removing td:last-child { opacity: 1; }
.ge-table tr.ge-removing .ge-item { text-decoration: line-through; }
.ge-removed-note { display: block; color: var(--danger); margin-top: 3px; }
.ge-removed-note[hidden] { display: none; }

/* A KPI tile that is also a filter (GRN register, Oct 2026). */
button.kpi.kpi-btn { font: inherit; color: inherit; text-align: left; cursor: pointer; width: 100%; }
button.kpi.kpi-btn:hover { border-color: var(--brand); }
button.kpi.kpi-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
button.kpi.kpi-btn.on { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent), var(--shadow); }

/* Purchase Returns register — a row with a return document opens it (Oct 2026). */
tr.row-click { cursor: pointer; }
tr.row-click:hover td { background: var(--surface-2); }

/* Phase 4 — what goes into the real system (Oct 2026) */
.pc-page { max-width: 1100px; display: flex; flex-direction: column; gap: 14px; }
.pc-section > summary { cursor: pointer; list-style: none; }
.pc-section > summary::-webkit-details-marker { display: none; }
.pc-section > summary h3 { display: inline; }
.pc-section > summary::before { content: "▸ "; color: var(--muted); }
.pc-section[open] > summary::before { content: "▾ "; }
.pc-hint { margin: 8px 0 10px; }
.pc-actions { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.pc-table td { vertical-align: top; }
.pc-table .pc-tick { width: 52px; text-align: center; }
.pc-table .pc-tick input { width: 20px; height: 20px; accent-color: var(--brand); cursor: pointer; }
.pc-table tr.pc-out td:not(.pc-tick) { opacity: .55; }
.pc-detail { font-size: 12px; margin-top: 2px; }
.pc-flag { display: inline-block; margin: 2px 0; white-space: normal; }
.pc-warn { color: var(--danger); }
.pc-entry[hidden] { display: none; }
.pc-plan-grid { margin-top: 6px; }
.pc-warnings { margin: 8px 0; padding-left: 20px; color: var(--warn); }
.pc-stale[hidden] { display: none; }
.pc-stale { color: var(--warn); }

/* Reconcile · cash — IOUs paid in cash not yet on the register (Oct 2026) */
.rc-unrec { padding: 10px 12px; margin: 8px 0; border: 1px solid var(--border); background: var(--surface-2); }
.rc-unrec-row { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; padding: 4px 0; border-top: 1px solid var(--border); font-size: 13px; }
.rc-ledger.ok { color: var(--success); }
.rc-ledger.bad { color: var(--danger); }
.rc-unrec-row > span:first-child { flex: 1 1 200px; }
.rc-unrec-amt { color: var(--danger); font-variant-numeric: tabular-nums; white-space: nowrap; }
.rc-float-hint { font-size: 12.5px; margin: 6px 0; padding: 8px 10px; border-left: 3px solid var(--warn); background: var(--surface-2); }
.rc-cash-gap { font-size: 13px; margin: 6px 0 8px; padding: 8px 10px; border-left: 3px solid var(--border); background: var(--surface-2); }
.rc-cash-gap.ok { border-left-color: var(--success); }
.rc-cash-gap.bad { border-left-color: var(--danger); }
.rc-cash-gap .mini-btn { margin-left: 6px; }
.sp-edit .sp-name { width: 100%; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: inherit; font: inherit; }
.sp-edit .sp-name:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.mini-btn.danger:hover { border-color: var(--danger); color: var(--danger); }
/* Expenses (several lines) on New Banking Entry — one row per expense (Oct 2026). */
.bx-lines { margin: 4px 0 12px; }
.bx-lines[hidden] { display: none; }
.bt-bal { font-size: 12px; margin-top: 4px; color: var(--muted); line-height: 1.45; }
.bt-bal strong { color: var(--text); }
.bt-bal strong.neg, .bt-bal-after.neg { color: var(--danger); }
.bt-bal-after { color: var(--brand); font-weight: 600; white-space: nowrap; }
.bt-bal-warn { color: var(--warn); font-weight: 600; margin-top: 2px; }
.bx-head, .bx-row { display: grid; grid-template-columns: minmax(130px, 1.1fr) minmax(170px, 1.5fr) minmax(130px, 1.5fr) minmax(90px, 0.8fr) 34px; gap: 8px; align-items: center; }
.bx-head { font-size: 11.5px; color: var(--muted); padding: 0 2px 4px; }
.bx-row { margin-bottom: 6px; }
.bx-row select, .bx-row input { width: 100%; padding: 9px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); color: inherit; font: inherit; min-width: 0; }
.bx-row .bx-amt { text-align: right; font-variant-numeric: tabular-nums; }
.bx-row select:focus, .bx-row input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.bx-foot { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; font-size: 13px; }
.bx-foot strong { font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .bx-head { display: none; }
  .bx-row { grid-template-columns: 1fr 110px 34px; padding: 8px; border: 1px solid var(--border); border-radius: 10px; }
  .bx-row .bx-cat, .bx-row .bx-led { grid-column: 1 / -1; }
  .bx-row .bx-desc { grid-column: 1 / 2; }
}
.bx-led-auto { color: var(--muted); }

/* Group headings over the chart of accounts (Oct 2026): a heading row, then its
   accounts, then a subtotal. A heading carries no figure of its own. */
.gl-grp td { font-weight: 700; background: var(--surface-2); color: var(--text); padding-top: 9px; padding-bottom: 9px; }
.gl-grp-0 td { letter-spacing: .03em; font-size: 12.5px; }
.gl-grp-1 td { padding-left: 22px; font-size: 12.5px; }
.gl-sub td { font-weight: 600; border-top: 1px solid var(--border); }
/* Fold a group / a parent account (the owner, Oct 2026: "dropdown for each group, sub group"). */
tr.gl-hid { display: none !important; }
tr.gl-grp[data-gkey] { cursor: pointer; user-select: none; }
.gl-fold { border: 0; background: none; color: var(--muted); cursor: pointer; font-size: 12px; line-height: 1;
  width: 18px; height: 18px; padding: 0; margin: 0 4px 0 0; border-radius: 4px; vertical-align: middle; }
.gl-fold:hover { color: var(--brand); background: var(--surface); }
.gl-fold:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
tr.gl-shut > td:first-child .gl-fold { color: var(--brand); }
.gl-foldbar { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.gl-foldline { display: flex; justify-content: flex-end; margin: 4px 0 6px; }
.gl-sub td:nth-child(2) { color: var(--muted); }
.pl-result-wrap { margin-top: 12px; }
.pl-result td { background: var(--surface-2); font-size: 14px; padding-top: 12px; padding-bottom: 12px; }
.pl-result td .muted { font-weight: 400; font-size: 12px; margin-left: 6px; }
.pl-result .pl-pos { color: var(--success); }
.pl-result .pl-neg { color: var(--danger); }

/* DSD case — treatment after the plan (Oct 2026) */
.dsd-tx-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 0 12px; }
.dsd-tx-grid .field small { display: block; margin-top: 2px; }
.kpi-actual { color: var(--brand); }

/* Inter, served from the ERP itself (frontend/fonts, SIL OFL) — never fetched
   from outside. Used by the filter cards (Oct 2026, the owner: "a clean
   professional UI with a modern font such as inter"). */
@font-face { font-family: "Inter"; font-style: normal; font-weight: 400; font-display: swap; src: url("/fonts/inter-400.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 500; font-display: swap; src: url("/fonts/inter-500.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 600; font-display: swap; src: url("/fonts/inter-600.woff2") format("woff2"); }
@font-face { font-family: "Inter"; font-style: normal; font-weight: 700; font-display: swap; src: url("/fonts/inter-700.woff2") format("woff2"); }

/* A filter card (the IRN board first, Oct 2026): white, rounded, a light grey
   border and a soft shadow; every label above its box, every box the same
   height, Apply / Reset at the end; the body folds away behind a toggle. */
.filter-card {
  font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  background: var(--surface); border: 1px solid var(--border); border-radius: 14px;
  box-shadow: var(--shadow);
  margin: 4px 0 16px; overflow: hidden;
}
.filter-card .fc-head { display: flex; align-items: center; justify-content: space-between; gap: 10px; padding: 12px 18px; }
.filter-card .fc-title { font-weight: 600; font-size: 14px; color: var(--text); display: inline-flex; align-items: center; gap: 8px; }
.filter-card .fc-count { font-weight: 500; font-size: 11.5px; padding: 2px 8px; border-radius: 999px; background: color-mix(in srgb, var(--brand) 12%, transparent); color: var(--brand); }
.filter-card .fc-toggle {
  font: inherit; font-size: 13px; font-weight: 500; color: var(--brand); background: transparent;
  border: 1px solid var(--border); border-radius: 8px; padding: 6px 12px; cursor: pointer;
}
.filter-card .fc-toggle:hover { background: var(--surface-2); }
.filter-card .fc-toggle:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 2px; }
.filter-card .fc-body {
  display: grid; grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 14px 16px;
  align-items: end; padding: 16px 18px 18px; border-top: 1px solid var(--border);
}
.filter-card .fc-body[hidden] { display: none; }
.filter-card .fc-field { display: flex; flex-direction: column; gap: 6px; min-width: 0; }
.filter-card .fc-field label { font-size: 12px; font-weight: 500; color: var(--muted); letter-spacing: .01em; }
.filter-card .fc-field select, .filter-card .fc-field input {
  font: inherit; font-size: 13.5px; height: 38px; box-sizing: border-box; width: 100%; min-width: 0;
  padding: 0 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text);
}
.filter-card .fc-field select:focus, .filter-card .fc-field input:focus {
  outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent);
}
.filter-card .fc-range { grid-column: span 2; }
.filter-card .fc-range-row { display: flex; align-items: center; gap: 8px; }
.filter-card .fc-range-row input { flex: 1; }
.filter-card .fc-dash { font-size: 12.5px; color: var(--muted); }
.filter-card .fc-wide { grid-column: span 2; }
.filter-card .fc-actions { grid-column: span 2; display: flex; justify-content: flex-end; align-items: end; gap: 8px; }
.filter-card .fc-actions .btn { font: inherit; font-weight: 600; height: 38px; padding: 0 18px; }
@media (max-width: 560px) {
  .filter-card .fc-range, .filter-card .fc-wide, .filter-card .fc-actions { grid-column: auto; }
  .filter-card .fc-body { grid-template-columns: 1fr; }
  .filter-card .fc-actions .btn { flex: 1; }
}

/* Clinic Wise Inventory's filters (Oct 2026): one horizontal line — Location,
   From, To, Apply, Reset — then the stock list, its group, the period columns
   and the search on a second line; both wrap on a phone. */
.ci-card .ci-row { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 12px 14px; padding: 14px 18px; }
.ci-card .ci-row + .ci-row { border-top: 1px solid var(--border); }
.ci-card .ci-loc { flex: 1 1 220px; max-width: 320px; }
.ci-card .ci-date { flex: 0 1 160px; }
.ci-card .ci-list, .ci-card .ci-group { flex: 0 1 200px; }
.ci-card .ci-group[hidden] { display: none; }
.ci-card .ci-search { flex: 1 1 200px; }
.ci-card .ci-btns { display: flex; gap: 8px; }
.ci-card .ci-btns .btn { font: inherit; font-weight: 600; height: 38px; padding: 0 18px; }
.rc-filter { margin-bottom: 12px; }
.roster-table.rc-range thead th:not(.rc-name) { white-space: nowrap; font-size: 11px; padding-left: 4px; padding-right: 4px; }
.roster-table.rc-range td.rc-cell { font-size: 10.5px; padding: 6px 3px; }
.roster-table.rc-range .sh-lbl { font-size: 11px; }
/* The range scrolls in its own box, so the heading does not stick to the page there. */
.roster-table.rc-range thead th { position: static; }
.roster-table.rc-range th.rc-name { position: sticky; left: 0; z-index: 3; background: var(--surface-2); }
/* A range of days: at least 62px a day; past the screen's width it scrolls inside its
   own box (a phone, or a long range) rather than squeezing the days unreadable. */
.roster-table.rc-range { width: max(100%, calc(150px + var(--rc-n, 7) * 62px)); }
.table-wrap.roster-wrap.rc-range-wrap { overflow-x: auto; }
@media (max-width: 760px) {
  .rc-filter .rc-fbtns { width: 100%; }
  .rc-filter .rc-fbtns .btn { flex: 1 1 auto; }
  .rc-filter #rcAssign { flex-basis: 100%; }
}
.rc-filter .rc-fbtns { flex-wrap: wrap; }
.rc-filter .rc-fnote { padding: 0 18px 12px; font-size: 12.5px; }
.ci-card .ci-cols { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; min-height: 38px; }
.ci-card .ci-cols-label { font-size: 12px; font-weight: 500; color: var(--muted); }
.ci-card .ci-tick { display: inline-flex; align-items: center; gap: 6px; font-size: 13.5px; color: var(--text); cursor: pointer; }
.ci-card .ci-tick input { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
#ciTable tr.ci-group td { background: var(--surface-2); font-weight: 600; }
@media (max-width: 560px) {
  .ci-card .ci-loc, .ci-card .ci-date, .ci-card .ci-list, .ci-card .ci-group, .ci-card .ci-search { flex: 1 1 100%; max-width: none; }
  .ci-card .ci-btns { flex: 1 1 100%; }
  .ci-card .ci-btns .btn { flex: 1; }
}

/* One material line of the New item request (IRN) — Item, Unit, Qty, Priority on
   one line; on a phone the item takes its own line and the rest share the next. */
.field-row.irn-req-row { grid-template-columns: minmax(0, 1fr) 100px 90px 140px 34px; }
.irn-req-del { align-self: start; margin-top: 30px; padding: 6px 0; width: 34px; }
@media (max-width: 560px) {
  .field-row.irn-req-row { grid-template-columns: 1fr 1fr 1fr 34px; }
  .field-row.irn-req-row > .field:first-child { grid-column: 1 / -1; }
}

/* Stock Overview (Oct 2026): New item / Labels / CSV inline; the filters as
   Clinic Wise Inventory's card; batches open under a row. */
.inv-actions { display: flex; gap: 6px; flex-wrap: wrap; }
.inv-card .inv-grp { flex: 0 1 190px; }
.inv-card .inv-sel { flex: 0 1 150px; }
.inv-card .inv-expand { height: 38px; margin-left: auto; font-weight: 600; }
.inv-card .inv-expand:disabled { opacity: .5; cursor: default; }
#invTable th.inv-tg, #invTable td.inv-tg { width: 1%; white-space: nowrap; }
#invTable .inv-cat { font-size: 12px; }
#invTable tr.inv-batch-row > td { background: var(--surface-2); padding-top: 4px; padding-bottom: 8px; }
/* Stock Overview views (Oct 2026): category / generic / item wise, rows taken off for a print. */
.inv-viewbar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 8px; }
.inv-views { display: inline-flex; flex-wrap: wrap; gap: 4px; padding: 3px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.inv-views .btn { padding: 6px 12px; }
.inv-viewbar .chip .linklike { margin-left: 6px; font-size: 12px; }
#invTable .inv-hide { color: var(--muted); padding: 2px 6px; margin-right: 3px; }
#invTable .inv-hide:hover { color: var(--danger); border-color: var(--danger); }
#invTable tr.inv-grp-row > td { border-top: 1px solid var(--border); }
#invTable tr.inv-grp-row.open > td { background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
#invTable .inv-grp-name { font-weight: 600; text-align: left; }
#invTable td.inv-grp-acts { white-space: nowrap; }
#invTable td.inv-grp-acts .mini-btn.on { border-color: var(--brand); color: var(--brand); }
#invTable tr.inv-grp-items > td { background: var(--surface-2); padding: 4px 6px 10px; }
.inv-subwrap { width: 0; min-width: 100%; overflow-x: auto; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); }
.inv-subtable { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.inv-subtable th { background: var(--surface-2); font-size: 11.5px; position: static; }
.inv-subtable td.inv-tg, .inv-subtable th.inv-tg { width: 1%; white-space: nowrap; }
#invTable tr.inv-grp-total > td { border-top: 2px solid var(--border); font-weight: 600; }
.inv-batches { width: auto; min-width: 420px; border-collapse: collapse; font-size: 12.5px; }
.inv-batches th, .inv-batches td { padding: 4px 12px 4px 0; border: 0; text-align: left; white-space: nowrap; }
.inv-batches th { color: var(--muted); font-weight: 500; font-size: 11.5px; }
@media (max-width: 560px) {
  .inv-card .inv-grp, .inv-card .inv-sel { flex: 1 1 100%; max-width: none; }
  .inv-card .inv-expand { margin-left: 0; flex: 1 1 100%; }
  .inv-batches { min-width: 0; width: 100%; }
  #invTable tr.inv-batch-row > td:first-child { display: none; }
  #invTable tr.inv-grp-items > td:first-child { display: none; }
  #invTable tr.inv-grp-items > td { padding: 4px 0 8px; }
}

/* The IRN dashboard (Oct 2026): summary cards — a count and a value in one
   card, clickable for the detail underneath — inside the same white card as
   the filters, folded away by the toggle in its right corner. */
.irn-dash .irn-dash-body { padding: 14px 18px 18px; border-top: 1px solid var(--border); }
/* The IRN screen's two tabs, in its left corner (Oct 2026), and the dashboard's dates. */
.irn-left { display: flex; align-items: center; gap: 12px; flex-wrap: wrap; }
.irn-tabs { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); }
.irn-tab { border: 0; background: transparent; color: var(--muted); padding: 8px 14px; font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; min-height: 38px; }
.irn-tab + .irn-tab { border-left: 1px solid var(--border); }
.irn-tab { white-space: nowrap; }
.irn-actions { display: flex; gap: 6px; flex-wrap: wrap; min-width: 0; max-width: 100%; }
@media (max-width: 640px) {
  .irn-head { flex-direction: column; align-items: stretch; gap: 10px; }
  .irn-left, .irn-actions { width: 100%; }
  .irn-tabs { width: 100%; flex-wrap: wrap; } .irn-tab { flex: 1 1 auto; }
  .irn-actions .irn-approver { max-width: 100%; flex: 1 1 100%; }
}
.irn-tab.on { background: var(--brand); color: #fff; }
/* The red count on an IRN tab — what is waiting for this login. */
.tab-badge { display: inline-flex; align-items: center; justify-content: center; min-width: 18px; height: 18px; padding: 0 5px; margin-left: 4px; border-radius: 9px; background: var(--danger); color: #fff; font-size: 11px; font-weight: 700; line-height: 1; vertical-align: 1px; font-variant-numeric: tabular-nums; }
.irn-tab.on .tab-badge { box-shadow: 0 0 0 2px #fff; }
.irn-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.irn-dash .irn-dash-dates { justify-content: flex-start; flex-wrap: wrap; gap: 8px 10px; }
.irn-dash .irn-dash-dates label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.irn-dash .irn-dash-dates input[type="date"] { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.irn-dash .irn-dash-range { font-size: 12.5px; margin-left: auto; }
.irn-dash .irn-dash-body[hidden] { display: none; }
.irn-dash .dash-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; }
/* One horizontal line of cards, in the viewer's order, locked until "Arrange cards" (Oct 2026). */
.irn-dash .dash-grid.one-line { grid-template-columns: none; grid-auto-flow: column; grid-auto-columns: minmax(116px, 1fr);
  gap: 8px; overflow-x: auto; padding: 3px 3px 6px; }
.irn-dash .dash-grid.one-line .dash-card { padding: 10px 9px; }
.irn-dash .dash-grid.one-line .dash-card .dc-sub { font-size: 11.5px; }
.irn-dash .dash-grid.one-line .prio-chip { font-size: 10.5px; padding: 1px 5px; }
.irn-dash .dash-grid.one-line .dash-card .dc-title { font-size: 11.5px; padding-right: 22px; }
.irn-dash .dash-grid.one-line .dash-card .dc-icon { width: 20px; height: 20px; top: 8px; right: 6px; font-size: 11px; }
.irn-dash .dash-grid.one-line .dash-card .dc-num { font-size: 24px; }
.irn-dash-arrange { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin: 0 0 8px; font-size: 12.5px; min-height: 26px; }
.irn-dash-arrange .irn-dash-arrange-btns { margin-left: auto; display: flex; gap: 6px; }
.dash-card.arranging { cursor: grab; border-style: dashed; user-select: none; }
.dash-card.arranging.dragging { opacity: .45; }
.dash-card.arranging.drop-before { box-shadow: -4px 0 0 0 var(--brand); }
.dash-card.arranging.drop-after { box-shadow: 4px 0 0 0 var(--brand); }
.dash-card .dc-arrange { display: flex; gap: 4px; margin-top: auto; padding-top: 6px; }
.dash-card .dc-arrange .mini-btn { padding: 2px 8px; }
/* The Purchase Order dashboard (Oct 2026): four cards above the list; the table's
   own head carries the item-wise switch in its right corner. */
.po-dash { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 12px; margin: 4px 0 12px; }
.po-dash .dash-card .dc-num { font-size: 24px; }
@media (max-width: 900px) { .po-dash { grid-template-columns: repeat(2, minmax(0, 1fr)); } }
@media (max-width: 560px) { .po-dash { gap: 8px; } .po-dash .dash-card .dc-num { font-size: 19px; } .po-dash .dash-card .dc-icon { display: none; } .po-dash .dash-card .dc-title { padding-right: 0; } }
.po-table-head { align-items: center; gap: 10px; flex-wrap: wrap; }
.po-items-table td.num, .po-items-table th.num { text-align: right; }
.grn-qty-btn.grn-need-exp { border-color: var(--warn); color: var(--warn); }
.dash-card {
  font: inherit; text-align: left; cursor: pointer; position: relative;
  background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 12px;
  padding: 14px 16px; display: flex; flex-direction: column; gap: 4px; min-width: 0;
  transition: border-color .12s, box-shadow .12s;
}
.dash-card:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); }
.dash-card:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 2px; }
.dash-card.on { border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.dash-card .dc-title { font-size: 13px; font-weight: 600; padding-right: 40px; }
.dash-card .dc-icon {
  position: absolute; top: 12px; right: 12px; width: 30px; height: 30px; border-radius: 8px;
  display: grid; place-items: center; font-size: 14px; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 10%, transparent);
}
.dash-card .dc-num { font-size: 28px; font-weight: 700; line-height: 1.15; font-variant-numeric: tabular-nums; margin-top: 4px; }
.dash-card .dc-sub { font-size: 12px; color: var(--muted); font-variant-numeric: tabular-nums; }
.dash-card.warn .dc-icon { color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent); }
.dash-card .dc-prio { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 2px; }
.prio-chip { display: inline-block; font-size: 11px; font-weight: 600; padding: 1px 7px; border-radius: 999px; white-space: nowrap; }
.prio-chip.Emergency { background: color-mix(in srgb, var(--danger) 14%, transparent); color: var(--danger); }
.prio-chip.Urgent { background: color-mix(in srgb, var(--warn) 18%, transparent); color: var(--warn); }
.prio-chip.Normal { background: var(--surface-2); color: var(--muted); }
.irn-dash .dash-detail { margin-top: 16px; }
.irn-dash .dash-detail[hidden] { display: none; }
.irn-dash .dash-detail-head { display: flex; justify-content: space-between; align-items: baseline; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.irn-dash .dash-detail-head h4 { margin: 0; font-size: 14px; }
.irn-dash .dash-detail-head .irn-dash-find { margin-left: auto; }
.irn-dash .dash-detail tr[data-dashirn] { cursor: pointer; }
.irn-dash .dash-detail tr[data-dashirn]:hover td { background: var(--surface-2); }
.irn-dash .dash-detail td.num, .irn-dash .dash-detail th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
@media (max-width: 560px) {
  .irn-dash .dash-grid { grid-template-columns: 1fr 1fr; gap: 8px; }
  .dash-card { padding: 10px 12px; }
  .dash-card .dc-num { font-size: 22px; }
  .dash-card .dc-icon { display: none; }
  .dash-card .dc-title { padding-right: 0; }
}
.irn-approver { font: inherit; font-size: 12.5px; height: 36px; max-width: min(240px, 100%); min-width: 0; padding: 0 8px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }

/* An IRN order card whose items are folded away (Oct 2026). */
[data-irnitems][hidden] { display: none; }

/* An issue round the clinic has confirmed — light cream-green (Oct 2026). */
:root { --round-ok: #f2f8e6; --round-ok-border: #cfe3b4; }
:root[data-theme="dark"] { --round-ok: #1c2a1a; --round-ok-border: #36502c; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --round-ok: #1c2a1a; --round-ok-border: #36502c; } }
.panel.irn-round.round-ok { background: var(--round-ok); border-color: var(--round-ok-border); }
.panel.irn-round.round-ok table.mini td { background: transparent; }

/* IRN issue dialog — whole units and a named collector (Oct 2026) */
.iss-err { margin: 0 0 10px; padding: 8px 12px; border-radius: 8px; font-size: 13px;
  color: var(--danger); background: color-mix(in srgb, var(--danger) 10%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent); }
.iss-err[hidden] { display: none; }
input[data-issqty].bad { border-color: var(--danger); box-shadow: 0 0 0 2px color-mix(in srgb, var(--danger) 25%, transparent); }

/* IRN — the doctor a material is for (Oct 2026) */
.doc-chip { display: inline-flex; align-items: center; gap: 3px; padding: 1px 7px; border-radius: 999px;
  font-size: 11px; font-weight: 600; white-space: nowrap; color: var(--brand);
  background: color-mix(in srgb, var(--brand) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--brand) 30%, transparent); }
.irn-doctag { display: inline-flex; margin-top: 4px; max-width: 100%; }
.irn-doctag select { max-width: 240px; font-size: 12.5px; }
.irn-doctag [hidden] { display: none; }
.irn-doctag { gap: 4px; flex-wrap: wrap; }
.irn-tags { display: flex; flex-direction: column; gap: 4px; margin-top: 4px; }
.irn-tags:empty { display: none; }
.irn-tagrow { display: inline-flex; align-items: center; gap: 4px; flex-wrap: wrap; max-width: 100%; }
.irn-tagrow select { max-width: 220px; font-size: 12.5px; }
.irn-tagrow input[data-rtagq] { width: 64px; font-size: 12.5px; }
.irn-tagk { font-size: 14px; }

/* A sub-account sits inside its parent on every ledger screen (Oct 2026). */
tr[data-sub] > td:first-child { padding-left: 28px; white-space: nowrap; }
tr[data-sub] > td:first-child::before { content: "↳ "; color: var(--muted); }

/* Manual journal ✎ Correct card — the "Move to" picker in each line (Oct 2026). */
.jc-to { width: 100%; min-width: 150px; max-width: 320px; padding: 7px 8px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.jc-to:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
@media (max-width: 600px) { .jc-to { min-width: 0; max-width: 120px; } }

/* Material Return — the IRN screen's third tab (Oct 2026): the cards, the
   packages, the table and the two forms. */
.mrn-dash .irn-dash-body { border-top: 0; }
.mrn-dash .dash-card.mrn-reasons { cursor: default; }
.mrn-dash .dash-card.mrn-reasons:hover { border-color: var(--border); }
.mrn-reason-chip { border: 1px solid transparent; background: var(--surface-2); color: var(--muted); font: inherit; font-size: 11px; font-weight: 600; cursor: pointer; }
.mrn-reason-chip:hover { border-color: color-mix(in srgb, var(--brand) 45%, var(--border)); color: var(--text); }
.mrn-reason-chip.on { background: var(--brand); color: #fff; }
.mrn-reason-chip:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.mrn-bar { align-items: center; gap: 10px; flex-wrap: wrap; margin-top: 4px; }
.mrn-bar-right { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.mrn-mode .irn-tab { min-height: 34px; padding: 6px 12px; font-size: 13px; }
.mrn-card { margin: 0 0 12px; }
.mrn-card-top { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 3px; }
.mrn-card-top .mrn-no { font-size: 16px; }
.mrn-card-top .irn-pkg-loc { --pk: var(--brand); }
.mrn-card-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; }
.mrn-card-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; justify-content: flex-end; }
.mrn-card .table-wrap { margin-top: 8px; }
.mrn-card [data-mrnitems][hidden] { display: none; }
.mrn-lines td.num, .mrn-lines th.num, .mrn-table td.num, .mrn-table th.num, .mrn-recv td.num, .mrn-recv th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.mrn-lines tfoot td, .mrn-table tfoot td { font-weight: 600; border-top: 1px solid var(--border); }
.mrn-row { display: grid; grid-template-columns: minmax(0, 1fr) 150px 160px 36px; gap: 0 10px; align-items: end;
  padding: 10px 0; border-bottom: 1px dashed var(--border); }
.mrn-row .field { margin-bottom: 6px; }
.mrn-row .mrn-x { align-self: center; margin-top: 14px; }
.mrn-row .mrn-note { grid-column: span 2; }
.mrn-recv input, .mrn-recv select, .mrn-edit input, .mrn-edit select { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); width: 100%; min-width: 0; }
.mrn-recv input[data-rq] { width: 76px; }
.mrn-recv td { vertical-align: top; }
.mrn-recv input.mrn-qbox { width: 70px; }
.mrn-recv input[data-rwhy] { min-width: 150px; }
.mrn-recv tr.mrn-rejecting td { background: color-mix(in srgb, var(--danger) 7%, transparent); }
/* Receipt history under a return (MRN-1001-R1, -R2 …), the store's and the clinic's view alike. */
.mrn-receipts { margin-top: 10px; border-top: 1px dashed var(--border); padding-top: 8px; }
.mrn-receipts-head { font-weight: 600; font-size: 12.5px; margin-bottom: 6px; }
.mrn-receipt { border: 1px solid var(--border); border-left: 3px solid var(--success); border-radius: 8px; padding: 7px 10px; margin-bottom: 6px;
  background: var(--surface-2); font-size: 12.5px; }
.mrn-receipt.rej { border-left-color: var(--danger); }
.mrn-receipt ul { margin: 4px 0 0; padding-left: 18px; }
.mrn-receipt .chip { margin-left: 4px; }
.mrn-rej { color: var(--danger); }
.cops-who .field[hidden] { display: none; }
tr.dash-rcpt-lines[hidden] { display: none; }
tr.dash-rcpt-lines > td { background: var(--surface-2); }
@media (max-width: 640px) {
  .mrn-row { grid-template-columns: minmax(0, 1fr) 140px; }
  .mrn-row .mrn-x { grid-column: 2; grid-row: 1; justify-self: end; }
  .mrn-row .mrn-note { grid-column: 1 / -1; }
  .mrn-bar-right { width: 100%; }
  .mrn-dash .dash-card.mrn-reasons { grid-column: 1 / -1; }
}

/* Clinic Wise Operation (Oct 2026): the room header, the room's menu as a
   horizontal bar (the owner: "The menu ... must come as horizontal bar"), and
   the panels under it. */
.cops-head { display: flex; justify-content: space-between; align-items: center; gap: 12px; flex-wrap: wrap; margin-bottom: 12px; }
.cops-title { font-size: 20px; font-weight: 700; }
.cops-room { display: flex; align-items: center; gap: 8px; }
.cops-room select { font: inherit; font-size: 14px; height: 40px; padding: 0 10px; min-width: 180px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); color: var(--text); }
.cops-off { border-color: var(--warn); margin-bottom: 12px; }
.cops-menu { display: flex; flex-wrap: wrap; gap: 4px; padding: 6px; margin-bottom: 14px; border: 1px solid var(--border);
  border-radius: 12px; background: var(--surface); }
@media (max-width: 640px) { .cops-menu { flex-wrap: nowrap; overflow-x: auto; scrollbar-width: thin; } }
.cops-tab { flex: 0 0 auto; display: inline-flex; align-items: center; gap: 6px; border: 0; background: transparent; color: var(--text);
  font: inherit; font-size: 13.5px; font-weight: 600; padding: 9px 12px; border-radius: 9px; cursor: pointer; white-space: nowrap; min-height: 40px; }
.cops-tab:hover { background: var(--surface-2); }
.cops-tab.on { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); }
.cops-menu-tools { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; padding-left: 6px; }
.cops-tab.arranging { cursor: grab; border: 1px dashed var(--border); user-select: none; }
.cops-tab.arranging.dragging { opacity: .45; }
.cops-tab.arranging.drop-before { box-shadow: -4px 0 0 0 var(--brand); }
.cops-tab.arranging.drop-after { box-shadow: 4px 0 0 0 var(--brand); }
.cops-tab-arr { display: inline-flex; gap: 2px; margin-left: 4px; }
.cops-tab-arr .mini-btn { padding: 0 5px; min-height: 22px; font-size: 11px; }
.cops-flow h4 { margin: 12px 0 6px; }
.cops-flow-b { padding: 8px 10px; margin-bottom: 8px; }
.cops-flow-steps { margin: 6px 0 4px 18px; padding: 0; font-size: 12.5px; }
.cops-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.cops-badge { display: inline-block; min-width: 18px; padding: 0 5px; border-radius: 999px; background: var(--danger); color: #fff;
  font-size: 11px; line-height: 18px; text-align: center; }
.cops-h2 { font-size: 18px; margin: 0 0 12px; }
.cops-h { font-size: 14px; margin: 16px 0 8px; }
.cops-panel { margin-bottom: 14px; }
.cops-panel h3 { margin: 0 0 10px; font-size: 15px; }
.cops-panel p { margin: 6px 0; }
.cops-quick { display: grid; grid-template-columns: repeat(auto-fit, minmax(178px, 1fr)); gap: 12px; }
/* Quick Operations: one big coloured button each (Oct 2026). */
.cops-qop { --qc: #4f46e5; --qc2: #7c3aed; position: relative; display: flex; align-items: center; gap: 12px; min-height: 78px;
  padding: 14px 16px; border: 0; border-radius: 14px; cursor: pointer; text-align: left; color: #fff; font: inherit;
  background: linear-gradient(135deg, var(--qc), var(--qc2)); box-shadow: 0 6px 16px -8px var(--qc);
  transition: transform .12s ease, box-shadow .12s ease, filter .12s ease; }
.cops-qop:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -8px var(--qc); filter: brightness(1.05); }
.cops-qop:focus-visible { outline: 3px solid var(--qc); outline-offset: 3px; }
.cops-qop .qop-ic { flex: none; width: 46px; height: 46px; border-radius: 12px; display: grid; place-items: center; font-size: 24px;
  background: rgba(255,255,255,.22); }
.cops-qop .qop-txt { display: flex; flex-direction: column; gap: 2px; min-width: 0; flex: 1; }
.cops-qop .qop-txt strong { font-size: 15.5px; line-height: 1.2; }
.cops-qop .qop-txt small { font-size: 12px; opacity: .9; line-height: 1.25; }
.cops-qop .qop-go { font-size: 20px; opacity: .85; }
.cops-qop .qop-n { position: absolute; top: -8px; right: -6px; min-width: 24px; height: 24px; padding: 0 7px; border-radius: 12px;
  background: #dc2626; color: #fff; font-size: 12.5px; font-weight: 700; display: grid; place-items: center; box-shadow: 0 0 0 2px var(--surface); }
.cops-qop.qop-order { --qc: #2563eb; --qc2: #4f46e5; }
.cops-qop.qop-ask { --qc: #0d9488; --qc2: #0891b2; }
.cops-qop.qop-incoming { --qc: #ea580c; --qc2: #d97706; }
.cops-qop.qop-consume { --qc: #c026d3; --qc2: #9333ea; }
.cops-qop.qop-receive { --qc: #16a34a; --qc2: #059669; }
@media (max-width: 640px) { .cops-quick { grid-template-columns: 1fr 1fr; } .cops-qop { min-height: 70px; padding: 12px; gap: 8px; }
  .cops-qop .qop-ic { width: 38px; height: 38px; font-size: 20px; } .cops-qop .qop-txt small, .cops-qop .qop-go { display: none; } }
.cops-two { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 14px; }
.cops-two > .panel { min-width: 0; }
.cops-tiles { margin-bottom: 14px; }
/* Expiry Items (Oct 2026): the dashboard card and the tab's state cards. */
.cops-exp-card.exp-bad, .cops-exp-tiles .exp-bad { border-color: var(--danger); }
.cops-exp-card.exp-bad .value, .cops-exp-tiles .exp-bad .value { color: var(--danger); }
.cops-exp-card.exp-warn, .cops-exp-tiles .exp-warn { border-color: var(--warn); }
.cops-exp-card.exp-warn .value, .cops-exp-tiles .exp-warn .value { color: var(--warn); }
.cops-exp-note { margin: 0 0 10px; font-size: 12.5px; }
.cops-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin-bottom: 12px; }
.cops-range { justify-content: flex-start; }
/* Material Returns filter line (Oct 2026): dates, status, reason, item / SKU, view, CSV. */
.cops-ret-filters { justify-content: flex-start; align-items: flex-end; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; padding: 10px 12px; }
.cops-ret-filters label { display: inline-flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.cops-ret-filters input, .cops-ret-filters select { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--border);
  border-radius: 8px; background: var(--surface); color: var(--text); min-height: 34px; }
.cops-ret-filters .cops-ret-item input { min-width: 200px; }
.cops-ret-filters label.cops-tick { flex-direction: row; align-items: center; gap: 6px; padding-bottom: 7px; }
.cops-ret-filters label.cops-tick input { width: auto; padding: 0; }
@media (max-width: 640px) { .cops-ret-filters label, .cops-ret-filters .cops-ret-item input { width: 100%; min-width: 0; } }
.cops-range label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.cops-range input, .cops-range select { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: var(--text); }
.cops-table td.num, .cops-table th.num, .cops-lines td.num, .cops-lines th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.cops-table tfoot td { font-weight: 600; border-top: 1px solid var(--border); }
.cops-in { color: var(--success); } .cops-out { color: var(--danger); }
/* A pending material the clinic took off its own order (Oct 2026) */
.irn-clin-rm { color: var(--warn); font-weight: 600; }
.cops-rm { margin-top: 3px; font-size: 11px; padding: 1px 7px; }
.cops-rm-tick { display: inline-flex; align-items: center; gap: 3px; margin: 3px 6px 0 0; font-size: 11px; color: var(--muted); cursor: pointer; white-space: nowrap; }
.cops-rm-tick input { width: 15px; height: 15px; margin: 0; accent-color: var(--danger); }
.cops-doc-link { white-space: nowrap; font-weight: 600; }
.cops-mach-acts { white-space: nowrap; }
.cops-mach-acts .mini-btn { margin: 1px 2px; }
.cops-mach-alerts { border-left: 4px solid var(--warn); }
.cops-mach-rec .appt-detail { display: grid; grid-template-columns: repeat(auto-fill, minmax(260px, 1fr)); gap: 6px 18px; }
.cops-mach-rec .appt-detail-row { display: flex; gap: 10px; align-items: baseline; }
.cops-mach-rec .appt-detail-row > span:first-child { min-width: 110px; font-size: 12px; }
.cops-mach-alerts ul { margin: 4px 0 0; padding-left: 18px; }
.cops-mach-alerts li { margin: 4px 0; }
.iss-to { margin-top: 4px; }
.iss-to .irn-tagrow select { max-width: 170px; }
.cops-tr { margin-bottom: 12px; }
.cops-tr-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 10px; flex-wrap: wrap; margin-bottom: 8px; }
.cops-actions { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.cops-row { display: grid; grid-template-columns: minmax(0, 1fr) 100px 36px; gap: 0 10px; align-items: end; padding: 8px 0; border-bottom: 1px dashed var(--border); }
.cops-row.has-prio, .cops-row.has-reason { grid-template-columns: minmax(0, 1fr) 100px 160px 36px; }
.cops-row .field { margin-bottom: 4px; }
.cops-row .cops-note { grid-column: 1 / -2; }
.cops-row .cops-x { align-self: center; margin-top: 14px; grid-column: -2; grid-row: 1; }
.cops-addcount { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; }
.cops-addcount select { flex: 1 1 220px; min-width: 0; }
@media (max-width: 640px) {
  .cops-row, .cops-row.has-prio, .cops-row.has-reason { grid-template-columns: minmax(0, 1fr) 90px; }
  .cops-row .cops-x { grid-column: 2; grid-row: 1; justify-self: end; }
  .cops-row .cops-note { grid-column: 1 / -1; }
  .cops-room, .cops-room select { width: 100%; }
}

/* The Income Statement's clinic-wide note (Oct 2026): what a one-clinic P&L leaves out. */
.is-cw-note { margin-top: 14px; padding: 10px 14px; border: 1px solid color-mix(in srgb, var(--warn) 45%, var(--border));
  background: color-mix(in srgb, var(--warn) 8%, var(--surface)); border-radius: 10px; font-size: 13px; line-height: 1.5; }

/* IRN board — each order a package of its own (Oct 2026). Revised the same month
   (the owner: "make clear white for order package background ... reduce the length
   of the order package and change its color ... separate from the background with
   outline color"): the board is plain white, each package is outlined and striped
   in its STATUS colour (the Clinic Wise Operation cards' palette) with a light tint
   of it behind the header, and the header is two compact lines. */
.irn-board { background: var(--surface); border: 1px solid var(--border); border-radius: var(--radius);
  padding: 12px; display: flex; flex-direction: column; gap: 12px; }
.irn-board > .empty { background: var(--surface); border-radius: 10px; }
.panel.irn-pkg { --pk: var(--muted); margin: 0; padding: 0; overflow: hidden; background: var(--surface);
  border: 1.5px solid color-mix(in srgb, var(--pk) 55%, var(--border)); border-left: 6px solid var(--pk);
  border-radius: 10px; box-shadow: 0 1px 3px color-mix(in srgb, var(--pk) 18%, transparent); }
.panel.irn-pkg.pk-await { --pk: var(--warn); }
.panel.irn-pkg.pk-appr { --pk: var(--accent); }
.panel.irn-pkg.pk-short { --pk: var(--danger); }
.panel.irn-pkg.pk-issued { --pk: var(--brand); }
.panel.irn-pkg.pk-done { --pk: var(--success); }
.panel.irn-pkg.pk-rej { --pk: var(--danger); }
.panel.irn-pkg.pk-off { --pk: var(--muted); }
.irn-pkg-head { padding: 8px 14px 7px; background: color-mix(in srgb, var(--pk) 11%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--pk) 25%, var(--border)); }
.irn-pkg-top { display: flex; align-items: center; gap: 8px 10px; flex-wrap: wrap; }
.irn-pkg-no { font-size: 16.5px; font-weight: 800; letter-spacing: .01em; color: color-mix(in srgb, var(--pk) 60%, var(--text)); }
.irn-pkg-loc { font-size: 13px; font-weight: 600; color: var(--text); background: var(--surface);
  border: 1px solid color-mix(in srgb, var(--pk) 35%, var(--border)); border-radius: 999px; padding: 1px 10px; }
/* The order's location opens that room on Clinic Wise Operation. */
.irn-loc-go { cursor: pointer; font-family: inherit; line-height: 1.5; }
.irn-loc-go:hover, .irn-loc-go:focus-visible { border-color: var(--brand); color: var(--brand);
  background: color-mix(in srgb, var(--brand) 8%, var(--surface)); outline: none; }
.irn-pkg-actions { margin-left: auto; display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.irn-pkg-actions .mini-btn, .irn-pkg-actions .btn.tiny { padding: 3px 9px; font-size: 12px; }
.irn-pkg-meta { margin-top: 4px; font-size: 12.5px; color: var(--muted); line-height: 1.45; }
.irn-pkg-meta strong { color: var(--text); font-weight: 600; }
.irn-pkg-meta .chip { font-size: 11px; padding: 1px 7px; }
.irn-pkg-meta small { font-size: 12px; }
.irn-pkg-warn { color: var(--danger); font-weight: 600; }
.irn-pkg-body { padding: 4px 14px 8px; background: var(--surface); }
.irn-pkg-body > .table-wrap { margin-top: 2px; border: 0; border-radius: 0; box-shadow: none; }
.irn-pkg-body table.mini td:nth-child(4) { white-space: nowrap; }
.irn-pkg-body > .table-wrap[hidden] { display: none; }
.irn-pkg-body table.mini th { padding: 5px 8px; font-size: 11.5px; }
.irn-pkg-body table.mini td { padding: 5px 8px; font-size: 13px; line-height: 1.3; }
.irn-pkg-body table.mini tbody tr:last-child td { border-bottom: 0; }
.filter-card[hidden] { display: none; }
#irnFilterToggle.on { background: color-mix(in srgb, var(--brand) 12%, var(--surface)); border-color: var(--brand); color: var(--brand); }
@media (max-width: 640px) {
  .irn-board { padding: 8px; gap: 10px; }
  .irn-pkg-head { padding: 8px 10px 6px; }
  .irn-pkg-body { padding: 4px 10px 8px; }
  .irn-pkg-actions { margin-left: 0; justify-content: flex-start; width: 100%; }
}

/* The item's name, made by itself from its parts (Oct 2026). */
.it-name-out { display: block; min-height: 38px; padding: 9px 12px; border: 1px dashed var(--border);
  border-radius: 8px; background: var(--surface-2); font-weight: 600; word-break: break-word; }
.it-name-out.empty { font-weight: 400; color: var(--muted); }

/* IRN → Pending Items (Oct 2026) */
.pend-panel { padding: 14px; }
.pend-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin-bottom: 12px; }
.pend-bar input[type=search] { flex: 1 1 240px; min-height: 38px; padding: 0 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; }
.pend-bar select { min-height: 38px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); padding: 0 10px; font: inherit; }
.pend-bar .pend-hidden-tick { margin: 0; }
.pend-bar .pend-sum { margin-left: auto; font-size: 12.5px; }
.pend-table td { vertical-align: top; }
.pend-table select.pend-sup { max-width: 200px; }
.pend-table .pend-acts { white-space: nowrap; }
.pend-table tr.row-picked td { background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.pend-foot { position: sticky; bottom: 0; display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between;
  margin-top: 12px; padding: 10px 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
@media (max-width: 640px) { .pend-bar .pend-sum { margin-left: 0; } .pend-table .pend-acts { white-space: normal; } }
.pend-table input[type=number], .pend-table input[type=text], .pend-table select { min-height: 32px; padding: 3px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }

/* A room return line says where it goes back to (Oct 2026) */
.cops-row .cops-src { grid-column: 1 / -1; font-size: 12px; margin-top: -2px; }
.cops-row .cops-src:empty { display: none; }

/* ── Inventory dashboard trends (Oct 2026) — a categorical palette for the
   hand-drawn charts, one set per theme. */
:root {
  --c1: #0d9488; --c2: #6366f1; --c3: #d97706; --c4: #16a34a; --c5: #db2777;
  --c6: #0284c7; --c7: #9333ea; --c8: #ca8a04; --c9: #94a3b8;
}
:root[data-theme="dark"] {
  --c1: #2dd4bf; --c2: #818cf8; --c3: #fbbf24; --c4: #4ade80; --c5: #f472b6;
  --c6: #38bdf8; --c7: #c084fc; --c8: #facc15; --c9: #64748b;
}
@media (prefers-color-scheme: dark) {
  :root:not([data-theme="light"]) {
    --c1: #2dd4bf; --c2: #818cf8; --c3: #fbbf24; --c4: #4ade80; --c5: #f472b6;
    --c6: #38bdf8; --c7: #c084fc; --c8: #facc15; --c9: #64748b;
  }
}
.tr-controls { display: flex; flex-wrap: wrap; gap: 10px 16px; align-items: center; margin-bottom: 10px; }
.tr-controls > label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.tr-controls select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font-size: 13px; }
.tr-seg { display: inline-flex; border: 1px solid var(--border); border-radius: 9px; overflow: hidden; }
.tr-seg button { border: 0; background: var(--surface); color: var(--text); padding: 6px 11px; font-size: 12.5px; cursor: pointer; }
.tr-seg button + button { border-left: 1px solid var(--border); }
.tr-seg button.on { background: var(--brand); color: #fff; font-weight: 600; }
.tr-seg button:focus-visible, .tr-show input:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.tr-tick input { width: auto; }
.tr-shows { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 12px; }
.tr-show { display: inline-flex; align-items: center; gap: 6px; padding: 5px 10px; border: 1px solid var(--border); border-radius: 999px; font-size: 12.5px; cursor: pointer; background: var(--surface); }
.tr-show input { width: auto; margin: 0; }
.tr-dot { display: inline-block; width: 10px; height: 10px; border-radius: 50%; background: var(--tr-c, var(--brand)); margin-right: 6px; vertical-align: middle; flex: none; }
.tr-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 12px; margin-bottom: 14px; }
.tr-card { border: 1px solid var(--border); border-top: 3px solid var(--tr-c); border-radius: 12px; padding: 10px 12px; background: var(--surface); }
.tr-card-h { font-size: 12px; color: var(--muted); display: flex; align-items: center; }
.tr-card-v { font-size: 20px; font-weight: 700; margin-top: 4px; font-variant-numeric: tabular-nums; white-space: nowrap; }
.tr-card-s { font-size: 11.5px; }
.tr-card-c { font-size: 11.5px; margin-top: 5px; line-height: 1.4; }
.tr-chg { display: inline-block; font-size: 11.5px; font-weight: 600; padding: 1px 6px; border-radius: 6px; white-space: nowrap; }
.tr-chg.up { color: var(--success); background: color-mix(in srgb, var(--success) 13%, transparent); }
.tr-chg.down { color: var(--danger); background: color-mix(in srgb, var(--danger) 12%, transparent); }
.tr-chg.gray { color: var(--muted); background: var(--surface-2); }
.tr-chg.blue { color: var(--accent); background: color-mix(in srgb, var(--accent) 13%, transparent); }
.tr-grid2 { display: grid; grid-template-columns: repeat(auto-fill, minmax(420px, 1fr)); gap: 14px; }
.tr-box { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px 6px; background: var(--surface); min-width: 0; }
.tr-box-h { display: flex; justify-content: space-between; align-items: baseline; gap: 8px; flex-wrap: wrap; font-size: 13px; margin-bottom: 4px; }
.tr-box-h .muted { font-size: 12px; }
.tr-chart { position: relative; }
.tr-chart svg { display: block; width: 100%; overflow: visible; }
.tr-chart .tr-grid { stroke: var(--border); stroke-width: 1; }
.tr-chart .tr-zero { stroke: var(--muted); stroke-opacity: .5; }
.tr-chart .tr-ax { fill: var(--muted); font-size: 10.5px; font-variant-numeric: tabular-nums; }
.tr-chart .tr-hit { fill: transparent; cursor: crosshair; }
.tr-chart .tr-hit.on { fill: var(--text); fill-opacity: .05; }
.tr-tip { position: absolute; top: 4px; z-index: 5; background: var(--surface); border: 1px solid var(--border); border-radius: 9px; box-shadow: var(--shadow); padding: 7px 9px; font-size: 12px; pointer-events: none; min-width: 170px; }
.tr-tip[hidden] { display: none; }
.tr-tip > div { display: flex; align-items: center; gap: 6px; margin-top: 3px; }
.tr-tip > div b { margin-left: auto; padding-left: 10px; font-variant-numeric: tabular-nums; }
.tr-tip i, .tr-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; flex: none; }
.tr-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; margin: 4px 0 6px; }
.tr-legend span { display: inline-flex; align-items: center; gap: 5px; }
.tr-foot { font-size: 11.5px; margin: 10px 0 0; line-height: 1.5; }
.tr-loc { margin-top: 18px; border-top: 1px solid var(--border); padding-top: 14px; }
.tr-loc h4 { margin: 0 0 10px; font-size: 15px; }
.tr-table { margin-top: 8px; max-height: 340px; overflow: auto; }
.tr-table td.num, .tr-table th.num { text-align: right; white-space: nowrap; }
@media (max-width: 640px) {
  .tr-grid2 { grid-template-columns: 1fr; }
  .tr-controls > label { flex-wrap: wrap; }
}

/* Patient Growth — Patient Enquiries (Oct 2026) */
.enq-due { color: var(--danger); font-weight: 600; }
.enq-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; }
.enq-name { font-size: 19px; font-weight: 700; }
.enq-chips { margin: 6px 0; display: flex; gap: 6px; flex-wrap: wrap; align-items: center; }
.enq-action { font-size: 13.5px; color: var(--muted); }
.enq-action.enq-due { color: var(--danger); }
.enq-btns { display: flex; gap: 8px; flex-wrap: wrap; }
.enq-btns .btn { text-decoration: none; }
.enq-warn { margin: 12px 0 0; padding: 10px 14px; border-radius: 9px; font-size: 13px;
  background: color-mix(in srgb, var(--warn) 12%, transparent); color: var(--text);
  border: 1px solid color-mix(in srgb, var(--warn) 35%, transparent); }
.enq-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(160px, 1fr)); gap: 10px 18px; }
.enq-fact { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.enq-fact span { font-size: 12px; color: var(--muted); }
.enq-fact strong { font-weight: 600; overflow-wrap: anywhere; }
.enq-best { margin: 14px 0 0; padding: 10px 14px; border-radius: 9px; background: var(--surface-2); font-size: 13.5px; }
.enq-why { margin: 8px 0 0; padding-left: 18px; color: var(--muted); font-size: 13px; }
.enq-callform { margin: 12px 0 16px; background: var(--surface-2); }
.enq-results { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; max-height: 220px; overflow-y: auto; }
.enq-res { font: inherit; font-size: 13px; padding: 7px 10px; border-radius: 8px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); cursor: pointer; text-align: left; min-height: 36px; }
.enq-res:hover { border-color: var(--brand); }
.enq-res[aria-pressed="true"] { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 14%, var(--surface));
  box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent); }
.enq-res:focus-visible { outline: 2px solid color-mix(in srgb, var(--brand) 45%, transparent); outline-offset: 2px; }
.enq-res[hidden] { display: none; }
/* Patient Growth — Call Plan (Oct 2026) */
.cp-who { display: flex; gap: 6px; flex-wrap: wrap; }
.cp-who .chip-btn[disabled] { opacity: .45; cursor: not-allowed; }
.cp-week { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 10px; }
.cp-day { border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface); min-width: 0; }
.cp-day-empty { background: var(--surface-2); }
.cp-day-head { display: flex; justify-content: space-between; align-items: center; gap: 6px; }
.cp-day ul { list-style: none; margin: 8px 0 0; padding: 0; font-size: 12.5px; }
.cp-day li { padding: 3px 0; display: flex; justify-content: space-between; gap: 6px; align-items: center; }
.cp-day li a { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.enq-qc-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 12px; flex-wrap: wrap; margin-bottom: 4px; }
.cp-day li a, .enq-warn a { color: var(--brand); text-decoration: none; font-weight: 500; }
.cp-day li a:hover, .enq-warn a:hover { text-decoration: underline; }

/* PO Analyze (Oct 2026) — one section per item on the order. */
.pan-top { display: flex; flex-wrap: wrap; gap: 10px 18px; align-items: center; justify-content: space-between; }
.pan-pick { display: flex; flex-wrap: wrap; gap: 10px; }
.pan-pick label { display: flex; align-items: center; gap: 6px; font-size: 13px; color: var(--muted); }
.pan-pick select { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: inherit; }
.pan-flags { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 10px 0 4px; font-size: 13px; }
.pan-item { border: 1px solid var(--border); border-radius: 12px; padding: 14px 16px; margin-top: 14px; background: var(--surface); }
.pan-head { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; justify-content: space-between; }
.pan-head h4 { margin: 0; font-size: 15.5px; }
.pan-item h5 { margin: 14px 0 6px; font-size: 13px; text-transform: none; }
.pan-verdict { margin: 6px 0 10px; font-size: 13.5px; }
.pan-facts { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 8px; }
.pan-fact { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; min-width: 0; }
.pan-fact .label { font-size: 11.5px; color: var(--muted); }
.pan-fact .value { font-size: 15px; font-weight: 600; font-variant-numeric: tabular-nums; overflow-wrap: anywhere; }
.pan-fact .sub { font-size: 11.5px; color: var(--muted); overflow-wrap: anywhere; }
.pan-tip { margin-top: 10px; padding: 8px 12px; border-radius: 10px; font-size: 13px;
  background: color-mix(in srgb, var(--success) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--success) 35%, var(--border)); }
.pan-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 14px; }
@media (max-width: 760px) { .pan-grid { grid-template-columns: 1fr; } }
.pan-t td, .pan-t th { white-space: nowrap; }
.pan-t td:first-child { white-space: normal; }
.pan-this td { background: color-mix(in srgb, var(--brand) 7%, transparent); }
.pan-empty { margin: 4px 0; font-size: 13px; }
.pan-item details { margin-top: 8px; }
.pan-item summary { cursor: pointer; font-size: 13px; font-weight: 600; padding: 4px 0; }
.pan-bars { display: flex; gap: 6px; align-items: flex-end; height: 92px; margin-top: 10px; padding-top: 14px; }
.pan-bar { flex: 1 1 0; min-width: 18px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; position: relative; }
.pan-bar span { width: 100%; max-width: 34px; background: var(--brand); border-radius: 4px 4px 0 0; }
.pan-bar small { font-size: 10.5px; color: var(--muted); margin-top: 3px; }
.pan-bar em { position: absolute; top: -14px; font-size: 10px; font-style: normal; color: var(--muted); }
.pan-alt { border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; margin-top: 8px; }
.pan-alt.cheaper { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.pan-alt-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.pan-alt-best { font-size: 12.5px; margin-top: 4px; }
/* Clinic Wise Operation → Order Materials: what the approver changed (Oct 2026) */
.ord-changes { margin-top: 10px; border: 1px solid var(--border); border-left: 3px solid var(--warn); border-radius: 8px; padding: 7px 10px; background: var(--surface-2); }
.ord-changes-head { font-weight: 600; font-size: 12.5px; margin-bottom: 4px; }
.ord-change ul { margin: 3px 0 6px; padding-left: 18px; font-size: 13px; }
.ord-change li.rej { color: var(--danger); }
/* Clinic Wise Operation → Order Materials: one compact card per order, told
   apart by a coloured stripe and header tint for its status (Oct 2026). */
.cops-ord-list { display: flex; flex-direction: column; gap: 10px; }
.cops-ord { --pk: var(--muted); background: var(--surface); border: 1px solid color-mix(in srgb, var(--pk) 35%, var(--border));
  border-left: 5px solid var(--pk); border-radius: 10px; box-shadow: var(--shadow); overflow: hidden; }
.cops-ord.pk-await { --pk: var(--warn); }
.cops-ord.pk-appr { --pk: var(--accent); }
.cops-ord.pk-short { --pk: var(--danger); }
.cops-ord.pk-issued { --pk: var(--brand); }
.cops-ord.pk-done { --pk: var(--success); }
.cops-ord.pk-rej { --pk: var(--danger); }
.cops-ord.pk-off { --pk: var(--muted); }
.cops-ord-head { display: grid; grid-template-columns: auto 1fr auto; align-items: center; gap: 4px 14px;
  padding: 7px 12px; background: color-mix(in srgb, var(--pk) 11%, var(--surface));
  border-bottom: 1px solid color-mix(in srgb, var(--pk) 25%, var(--border)); }
.cops-ord-id { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; }
.cops-ord-no { font-size: 15.5px; font-weight: 800; color: color-mix(in srgb, var(--pk) 55%, var(--text)); letter-spacing: .01em; }
.cops-ord-count { font-size: 12px; color: var(--muted); }
.cops-ord-count .qty-pend { font-size: 11.5px; }
.cops-ord-meta { font-size: 12px; color: var(--muted); min-width: 0; }
.cops-ord-meta strong { color: var(--text); font-weight: 600; }
.cops-ord-hist { padding: 2px 8px; font-size: 11.5px; }
.cops-ord-acts { display: flex; gap: 6px; align-items: center; justify-content: flex-end; flex-wrap: wrap; }
.cops-ord-acts .mini-btn { padding: 2px 8px; font-size: 11.5px; }
.staff-chip { background: color-mix(in srgb, var(--accent) 12%, var(--surface)); }
.ol-list { max-height: 52vh; overflow: auto; border: 1px solid var(--border); border-radius: 10px; }
.ol-row { display: flex; gap: 10px; align-items: center; padding: 6px 10px; border-bottom: 1px solid var(--border); cursor: pointer; }
.ol-row:last-child { border-bottom: 0; }
.ol-row input { width: 18px; height: 18px; accent-color: var(--brand); flex: none; }
.ol-row .ol-name { flex: 1; min-width: 0; }
.ol-row[hidden] { display: none; }
.ol-tools { display: flex; gap: 8px; flex-wrap: wrap; align-items: end; margin: 0 0 8px; }
.ol-tools .field { margin: 0; flex: 1 1 180px; }
.cops-ord-body { padding: 0 12px 6px; }
.cops-ord .cops-lines { width: 100%; margin: 0; }
.cops-lot-row > td { padding-top: 0 !important; background: var(--surface-2); }
.cops-lots { width: 100%; margin: 0 0 4px; font-size: 12.5px; }
.cops-lots th { font-size: 11px; }
.cops-ord .cops-lines th { padding: 5px 8px; font-size: 11px; }
.cops-ord .cops-lines td { padding: 4px 8px; font-size: 12.5px; line-height: 1.3; }
.cops-ord .cops-lines th.num, .cops-ord .cops-lines td.num { width: 82px; }
.cops-ord .cops-lines tbody tr:last-child td { border-bottom: 0; }
.cops-ord .ord-changes { margin: 4px 0 6px; }
@media (max-width: 760px) {
  .cops-ord-head { grid-template-columns: 1fr auto; }
  .cops-ord-meta { grid-column: 1 / -1; grid-row: 2; }
  .cops-ord .cops-lines th.num, .cops-ord .cops-lines td.num { width: auto; }
}
.cops-ord-table td:nth-child(1), .cops-ord-table td:nth-child(2) { white-space: nowrap; }
/* IRN dashboard — search the open card's table (Oct 2026) */
.irn-dash-find { display: inline-flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.irn-dash-find input[type="search"] { width: 220px; }
.irn-dash-find input, .irn-dash-find select { font: inherit; font-size: 13px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.irn-dash-find input:disabled, .irn-dash-find select:disabled { opacity: .55; }
.irn-dash-find small.bad { color: var(--danger); }
@media (max-width: 640px) { .irn-dash-find, .irn-dash-find input[type="search"], .irn-dash-find select { width: 100%; } }

/* IRN issue — several batches at once, each with its own quantity (Oct 2026) */
.iss-batches { display: flex; flex-direction: column; gap: 4px; margin-bottom: 4px; min-width: 300px; }
.iss-b { display: grid; grid-template-columns: 18px minmax(0, 1fr) 76px; gap: 8px; align-items: center;
  padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); cursor: pointer; font-size: 12.5px; }
.iss-b:has(input[data-bpick]:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.iss-b.off { opacity: .55; cursor: not-allowed; }
.iss-b input[data-bpick] { width: 16px; height: 16px; margin: 0; accent-color: var(--brand); }
.iss-b-name { min-width: 0; line-height: 1.35; overflow-wrap: anywhere; }
.iss-b-name small { display: block; }
.iss-b input[data-bqty], input.iss-total { width: 76px; text-align: right; background: var(--surface); color: var(--text);
  border: 1px solid var(--border); border-radius: 6px; padding: 4px 6px; }
.iss-b input[data-bqty]:disabled { background: var(--surface-2); }
input.iss-total { background: var(--surface-2); font-weight: 600; }
input.bad { border-color: var(--danger) !important; }
@media (max-width: 640px) {
  /* The issue dialog stacks each material on a phone so every batch's box shows. */
  .iss-table thead { display: none; }
  .iss-table, .iss-table tbody, .iss-table tr, .iss-table td { display: block; width: 100%; box-sizing: border-box; }
  .iss-table tr { border-bottom: 1px solid var(--border); padding: 8px 0; }
  .iss-table td { text-align: left !important; padding: 3px 10px; border: 0; }
  .iss-table td[data-label]::before { content: attr(data-label) ": "; color: var(--muted); font-size: 11.5px; }
  .iss-table td[data-label] br { display: none; }
  .iss-batches { min-width: 0; }
}
.iss-pending { color: var(--warn); }
.iss-cant { margin-top: 4px; font-size: 11px; white-space: nowrap; color: var(--danger); }
/* A quantity still pending on a material order — red on every order package
   (IRN board, history, table, dashboard, issue dialog, Clinic Wise Operation;
   the owner, Oct 2026: "pending qty highlight in red color"). */
/* IRN dashboard: the PO qty beside a material still owed opens its orders. */
.irn-poqty { font-weight: 700; color: var(--accent); }
.qty-pend, .iss-pending.qty-pend {
  display: inline-block; min-width: 1.6em; padding: 1px 7px; border-radius: 999px;
  color: var(--danger); font-weight: 700; text-align: center;
  background: color-mix(in srgb, var(--danger) 12%, transparent);
  border: 1px solid color-mix(in srgb, var(--danger) 35%, transparent);
  font-variant-numeric: tabular-nums; white-space: nowrap;
}

/* Payroll worksheet (Oct 2026): salary from attendance — the day-by-day card. */
.pay-days-sec { margin: 0 0 12px; }
.pay-days-sec h4 { margin: 0 0 4px; font-size: 13.5px; }
.pay-days-sec table.mini td { padding: 3px 8px 3px 0; }
.pay-sheet td:first-child { min-width: 170px; }
.pay-sheet .chip { white-space: nowrap; }
/* Payroll worksheet frozen: the sheet scrolls inside its own box with the headings at the
   top and the Person column on the left (desktop; on a phone the rows are cards). */
@media (min-width: 641px) {
  .table-wrap.pay-freeze.sticky-head { max-height: 72vh; overflow: auto; }
  .table-wrap.pay-freeze.sticky-head tbody td:first-child { position: sticky; left: 0; z-index: 1; background: var(--surface); box-shadow: inset -1px 0 0 var(--border); }
  .table-wrap.pay-freeze.sticky-head thead th:first-child { left: 0; z-index: 3; box-shadow: inset -1px -1px 0 var(--border); }
}

/* ── Floating windows (Inventory Analyze, Oct 2026): panels dragged by the
   title bar, resized from the corner, folded, widened. Below 760px they stack. */
.fwin-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 0 0 10px; font-size: 12.5px; }
.fwin-desk { position: relative; isolation: isolate; min-height: 360px; }
.fwin { position: absolute; display: flex; flex-direction: column; background: var(--surface); border: 1px solid var(--border);
  border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; resize: both; min-width: 260px; min-height: 44px; }
.fwin.collapsed { resize: none; }
.fwin.dragging { opacity: .94; box-shadow: 0 14px 34px rgba(15, 23, 42, .22); }
.fwin-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; padding: 9px 12px;
  background: var(--surface-2); border-bottom: 1px solid var(--border); cursor: move; user-select: none; touch-action: none; }
.fwin.collapsed .fwin-head { border-bottom: 0; }
.fwin-title { font-weight: 600; font-size: 14px; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; min-width: 0; }
.fwin-ctl { display: flex; gap: 4px; flex: none; }
.fwin-btn { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 6px; width: 32px; height: 30px;
  cursor: pointer; font-size: 14px; line-height: 1; }
.fwin-btn:hover { border-color: var(--brand); }
.fwin-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.fwin-body { flex: 1 1 auto; overflow: auto; padding: 12px; min-height: 0; }
.fwin-body[hidden] { display: none; }
.fwin-desk.fwin-static { height: auto !important; min-height: 0; }
.fwin-desk.fwin-static .fwin { position: static; width: auto !important; height: auto !important; resize: none; margin-bottom: 12px; }
.fwin-desk.fwin-static .fwin-head { cursor: default; }
.fwin-desk.fwin-static .fwin-body { max-height: 75vh; }
@media (max-width: 760px) { .fwin-hint { display: none; } }
@media (prefers-reduced-motion: no-preference) { .fwin { transition: box-shadow .15s; } }

/* The bulk purchase plan inside its window. */
.ia-controls { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 8px; }
.ia-controls .field { margin: 0; flex: 0 1 170px; }
.ia-controls #iaShow { min-width: 210px; }
.ia-controls .ia-search { flex: 1 1 220px; max-width: 320px; }
.ia-ctl-btns { display: flex; gap: 6px; padding-bottom: 1px; }
.ia-summary { font-size: 12.5px; margin: 4px 0 8px; display: flex; flex-wrap: wrap; gap: 4px 6px; align-items: center; }
.ia-table-wrap { overflow: auto; }
.ia-table { min-width: 900px; }
.ia-sub-line { font-size: 11px; color: var(--muted); margin-top: 2px; white-space: nowrap; }
.ia-table td { vertical-align: top; }
.ia-table th.num, .ia-table td.num { white-space: nowrap; }
.ia-open { background: none; border: 0; padding: 0; color: var(--text); font: inherit; font-weight: 600; cursor: pointer; text-align: left; }
.ia-open:hover { color: var(--brand); }
.ia-open:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; border-radius: 3px; }
.ia-name { min-width: 170px; max-width: 240px; }
.ia-brs { font-size: 11.5px; min-width: 130px; }
.ia-br { display: block; white-space: nowrap; }
.ia-qty { width: 64px; text-align: right; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.ia-sup { max-width: 190px; width: 100%; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 12px; }
.ia-price-row { display: flex; align-items: center; gap: 4px; margin-top: 4px; font-size: 11.5px; }
.ia-price { width: 96px; text-align: right; padding: 3px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font-size: 12px; }
.ia-table tr.row-picked > td { background: color-mix(in srgb, var(--brand) 8%, var(--surface)); }
.ia-table tr.ia-group > td { background: var(--surface-2); }
.ia-table tr.ia-sub .ia-name { padding-left: 22px; }
.ia-table tr.ia-detail > td { background: color-mix(in srgb, var(--surface-2) 60%, var(--surface)); }
.ia-detail-grid { display: grid; grid-template-columns: minmax(280px, 1fr) minmax(240px, 1fr); gap: 16px; padding: 4px 0; }
.ia-detail-grid h5 { margin: 4px 0 6px; font-size: 12.5px; }
.ia-list { margin: 0 0 6px; padding-left: 18px; font-size: 12px; }
.ia-bars { width: 140px; }
.ia-bar { display: block; height: 6px; border-radius: 3px; margin: 2px 0; min-width: 1px; }
.ia-bar.in, .ia-key.in { background: var(--brand); }
.ia-bar.out, .ia-key.out { background: var(--warn); }
.ia-key { display: inline-block; width: 10px; height: 6px; border-radius: 3px; vertical-align: middle; }
.ia-basket-card { margin-top: 10px; border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; background: var(--surface-2); }
.ia-basket-go { display: flex; gap: 10px; flex-wrap: wrap; align-items: flex-end; margin-top: 8px; }
.ia-basket-go .field { margin: 0; }
@media (max-width: 760px) { .ia-detail-grid { grid-template-columns: 1fr; } }

/* Inventory Analyze → 🧭 Inventory insights (Oct 2026) */
.ins-filters { padding: 10px 12px; margin-bottom: 10px; }
.ins-frow { display: flex; gap: 8px 10px; flex-wrap: wrap; align-items: flex-end; margin-bottom: 8px; }
.ins-frow .field { margin: 0; flex: 0 1 160px; min-width: 130px; }
.ins-frow .field.ins-wide { flex: 1 1 220px; }
.ins-btns { display: flex; gap: 6px; padding-bottom: 1px; }
.ins-scope { display: flex; justify-content: space-between; gap: 6px 14px; flex-wrap: wrap; font-size: 12.5px; padding-top: 6px; border-top: 1px solid var(--border); }
.ins-tabs { display: flex; flex-wrap: wrap; gap: 4px; margin: 0 0 10px; border-bottom: 1px solid var(--border); }
.ins-tabs button { border: 0; background: none; color: var(--muted); padding: 8px 10px; font: inherit; font-size: 13px; cursor: pointer; border-bottom: 2px solid transparent; margin-bottom: -1px; }
.ins-tabs button.on { color: var(--brand); border-bottom-color: var(--brand); font-weight: 600; }
.ins-tabs button:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.ins-kpis { margin-bottom: 12px; gap: 10px; }
.ins-kpis .kpi { padding: 10px 12px; }
.ins-kpis .ins-val { font-size: 19px; font-variant-numeric: tabular-nums; }
.kpi.ins-red { border-color: var(--danger); }
.kpi.ins-amber { border-color: var(--warn); }
.ins-sec { border: 1px solid var(--border); border-radius: 10px; margin: 0 0 10px; background: var(--surface); }
.ins-sec > summary { cursor: pointer; padding: 9px 12px; font-weight: 600; font-size: 13.5px; list-style-position: inside; }
.ins-sec[open] > summary { border-bottom: 1px solid var(--border); }
.ins-sec-body { padding: 10px 12px; }
.ins-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 12px; }
.ins-chart h4, .ins-tbar h4, .ins-item h4 { margin: 4px 0 6px; font-size: 12.5px; }
.ins-legend { display: flex; gap: 12px; flex-wrap: wrap; font-size: 12px; margin-bottom: 4px; }
.ins-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 3px; margin-right: 5px; vertical-align: -1px; }
.ins-tbar { display: flex; gap: 8px; align-items: center; flex-wrap: wrap; margin-bottom: 6px; font-size: 12.5px; }
.ins-find { flex: 0 1 240px; min-width: 150px; padding: 5px 8px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); }
.ins-table { font-size: 12px; }
.ins-table th.num, .ins-table td.num { white-space: nowrap; font-variant-numeric: tabular-nums; }
.ins-sort { border: 0; background: none; padding: 0; font: inherit; color: inherit; cursor: pointer; text-transform: inherit; letter-spacing: inherit; text-align: inherit; }
.ins-sort:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.ins-sub { font-size: 11px; }
.ins-pager { display: flex; gap: 8px; align-items: center; justify-content: flex-end; margin-top: 6px; font-size: 12px; }
.ins-note { font-size: 12px; margin: 0 0 8px; }
.ins-bad { color: var(--danger); }
.ins-good { color: var(--success); }
.ins-table tr.ins-group > td { background: var(--surface-2); font-weight: 600; }
.ins-alerts, .ins-quality, .ins-method { margin: 0; padding-left: 20px; font-size: 13px; line-height: 1.6; }
.ins-al-red { color: var(--danger); }
.ins-al-amber { color: var(--warn); }
.ins-recon { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ins-recon > div { border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; display: flex; flex-direction: column; font-size: 12px; font-variant-numeric: tabular-nums; }
.ins-recon-eq { border-color: var(--brand) !important; }
.ins-grid2 { display: grid; grid-template-columns: repeat(auto-fit, minmax(320px, 1fr)); gap: 0 10px; }
.ins-facts { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 6px; margin: 6px 0 10px; }
.ins-facts > div { border: 1px solid var(--border); border-radius: 8px; padding: 6px 9px; display: flex; flex-direction: column; font-size: 12.5px; }
@media (max-width: 760px) { .ins-frow .field { flex: 1 1 140px; } .ins-kpis .ins-val { font-size: 17px; } }

/* Editing a return on the IRN screen: a material taken off reads struck through (Oct 2026). */
.mrn-edit tr.mrn-dropped td:first-child { text-decoration: line-through; color: var(--muted); }
.mrn-edit input[data-enote] { min-width: 160px; }
.mrn-edit input.mrn-qbox { width: 70px; }

/* The IRN Requests tab as Packages / Table / Issues (Oct 2026). */
.irn-req-bar { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 12px 0 8px; }
.irn-board.irn-board-flat { padding: 0; background: transparent; }
.irn-order-table tr.irn-trow { cursor: pointer; }
.irn-order-table tr.irn-trow:hover td, .irn-order-table tr.irn-trow.open td { background: var(--surface-2); }
.irn-order-table td.irn-caret { width: 18px; color: var(--muted); }
.irn-order-table tr.irn-tsub > td { background: var(--surface-2); padding: 10px 14px 12px 32px; }
.irn-issue-block { margin: 0 0 10px; }
.irn-issue-block table { margin-top: 6px; max-width: 640px; }
button.chip.irn-ino { border: none; cursor: pointer; font: inherit; font-size: 11.5px; margin: 1px 0; }
.irn-issue-table td { vertical-align: top; }

/* The IRN dashboard's cards stand apart from the page (the owner, Oct 2026: "change
   the summary card color to distinguish from background"): each card carries its own
   colour (--dc, from the chart palette, both themes) as a soft tint, a coloured top
   edge and its icon. */
.irn-dash .dash-card { --dc: var(--brand);
  background: color-mix(in srgb, var(--dc) 9%, var(--surface));
  border-color: color-mix(in srgb, var(--dc) 32%, var(--border));
  border-top: 3px solid var(--dc); box-shadow: 0 1px 2px color-mix(in srgb, var(--dc) 14%, transparent); }
.irn-dash .dash-card.dc-all { --dc: var(--c1); }
.irn-dash .dash-card.dc-approved { --dc: var(--c4); }
.irn-dash .dash-card.dc-pending { --dc: var(--c5); }
.irn-dash .dash-card.dc-issued { --dc: var(--c6); }
.irn-dash .dash-card.dc-awaiting { --dc: var(--c3); }
.irn-dash .dash-card.dc-priority { --dc: #dc2626; }
.irn-dash .dash-card.dc-unconfirmed { --dc: var(--c7); }
.irn-dash .dash-card.dc-returns { --dc: var(--c2); }
.irn-dash .dash-card .dc-icon, .irn-dash .dash-card.warn .dc-icon { color: var(--dc); background: color-mix(in srgb, var(--dc) 16%, transparent); }
.irn-dash .dash-card .dc-num { color: color-mix(in srgb, var(--dc) 70%, var(--text)); }
.irn-dash .dash-card:hover { border-color: var(--dc); background: color-mix(in srgb, var(--dc) 14%, var(--surface)); }
.irn-dash .dash-card.on { border-color: var(--dc); background: color-mix(in srgb, var(--dc) 18%, var(--surface));
  box-shadow: 0 0 0 3px color-mix(in srgb, var(--dc) 24%, transparent); }

/* Data & Backup (Oct 2026 audit): two download buttons side by side; the
   off-site form's error / success line. */
.bk-dl { display: flex; flex-wrap: wrap; gap: 8px; }
.os-form .field-row { display: grid; grid-template-columns: 1fr 1fr; gap: 10px; }
@media (max-width: 560px) { .os-form .field-row { grid-template-columns: 1fr; } }

/* IRN history card (Oct 2026): the location beside the number, the order's own actions */
.irn-hist-loc { font-size: 13px; font-weight: 600; color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--surface));
  border-radius: 999px; padding: 2px 10px; margin-left: 6px; white-space: nowrap; }
.irn-hist-acts { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 0 0 12px; }

/* Room Stock — the viewer's columns (Oct 2026) */
.cops-cols { display: grid; grid-template-columns: repeat(auto-fill, minmax(210px, 1fr)); gap: 8px; }
.cops-col { display: flex; align-items: center; justify-content: space-between; gap: 6px; padding: 6px 8px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.cops-col.on { border-color: var(--brand); }
.cops-col label { display: flex; align-items: center; gap: 6px; font-size: 13px; }
.cops-col input { width: auto; }
.cops-table .linklike[data-chistitem] { text-align: left; padding: 0; font: inherit; }

/* Stock Transfer - Branch — the working screen's own tabs and preview parts (Oct 2026). */
.stx-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 14px; }
.stx-tab { border: 1px solid var(--border); background: var(--surface); color: var(--muted); padding: 7px 12px; border-radius: 9px;
  font: inherit; font-weight: 600; font-size: 13px; cursor: pointer; min-height: 36px; white-space: nowrap; }
.stx-tab.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.stx-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.stx-preview { border: 1px dashed var(--warn); background: color-mix(in srgb, var(--warn) 9%, var(--surface)); color: var(--text);
  border-radius: 10px; padding: 9px 12px; margin-bottom: 12px; font-size: 13px; }
.stx-pv { font-size: 10.5px; padding: 1px 6px; vertical-align: middle; }
.stx-small { font-size: 12px; margin: 6px 0 12px; }
.stx-gaps { margin-top: 14px; font-size: 13px; } .stx-gaps summary { cursor: pointer; font-weight: 600; }
.stx-gaps ul { margin: 8px 0 6px 18px; padding: 0; }
.stx-form { padding: 14px; }
.stx-hits { display: flex; flex-direction: column; gap: 4px; margin-top: 6px; max-height: 260px; overflow-y: auto; }
.stx-hits:empty { display: none; }
.stx-hit { text-align: left; border: 1px solid var(--border); background: var(--surface); border-radius: 8px; padding: 7px 10px; font: inherit; cursor: pointer; }
.stx-hit:hover, .stx-hit:focus-visible { border-color: var(--brand); outline: none; }
input.stx-qty { width: 92px; }
.stx-alloc { display: flex; gap: 6px; margin-bottom: 4px; flex-wrap: wrap; }
.stx-alloc select { max-width: 320px; }
.stx-cmp-row > td { background: var(--surface-2); }
.stx-timeline { margin: 0 0 12px 18px; padding: 0; font-size: 13px; } .stx-timeline li { margin-bottom: 4px; }
@media (max-width: 640px) { .stx-tab { flex: 1 1 auto; } .stx-alloc select { max-width: 100%; } }
.stx-form td select { max-width: 220px; } .stx-form td input:not(.stx-qty) { width: 150px; }

/* A flagged row (Purchase Order, Oct 2026): a red line down the start of the row
   instead of a red tint over it — overdue, or waiting to be approved. */
tr.row-flag > td:first-child { box-shadow: inset 4px 0 0 var(--danger); }
.po-pend { color: var(--danger); }
@media (max-width: 640px) {
  /* On a phone the row is a card: the line runs down the card's own edge. */
  .responsive-table tr.row-flag { box-shadow: inset 4px 0 0 var(--danger), var(--shadow); }
  .responsive-table tr.row-flag > td:first-child { box-shadow: none; }
  .responsive-table tr.row-flag.ok { box-shadow: inset 4px 0 0 var(--success), var(--shadow); }
  .responsive-table tr.row-flag.ok > td:first-child { box-shadow: none; }
}
/* …and a green line for a settled row (the GRN register's paid deliveries). */
tr.row-flag.ok > td:first-child { box-shadow: inset 4px 0 0 var(--success); }

/* ===== Inventory notification panel (Oct 2026) ===== */
.inv-nt-head { flex-wrap: wrap; gap: 8px; }
.inv-nt-tabs, .inv-nt-cats { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.inv-nt-cats { margin: 4px 0 10px; }
.inv-nt-pill { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 5px 12px; font-size: 12.5px; cursor: pointer; }
.inv-nt-pill b { font-variant-numeric: tabular-nums; margin-left: 3px; }
.inv-nt-pill.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.inv-nt-pill:focus-visible, .inv-nt:focus-visible, .inv-remind-row:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.inv-nt-list { display: flex; flex-direction: column; gap: 8px; max-height: 460px; overflow-y: auto; padding-right: 2px; }
.inv-nt { display: flex; gap: 10px; align-items: flex-start; padding: 10px 12px; border: 1px solid var(--border); border-left: 4px solid var(--muted); border-radius: 10px; background: var(--surface); cursor: pointer; }
.inv-nt:hover { background: var(--surface-2); }
.inv-nt.sev-danger { border-left-color: var(--danger); }
.inv-nt.sev-warn { border-left-color: var(--warn); }
.inv-nt.sev-action { border-left-color: var(--accent); }
.inv-nt.seen { opacity: .72; }
.inv-nt.seen .inv-nt-title { font-weight: 500; }
.inv-nt-ico { font-size: 20px; line-height: 1.2; }
.inv-nt-main { flex: 1; min-width: 0; }
.inv-nt-title { font-weight: 600; font-size: 13.5px; overflow-wrap: anywhere; }
.inv-nt-dot { display: inline-block; width: 8px; height: 8px; border-radius: 50%; background: var(--danger); margin-right: 6px; vertical-align: 1px; }
.inv-nt-body { font-size: 12.5px; color: var(--muted); margin-top: 2px; overflow-wrap: anywhere; }
.inv-nt-meta { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-top: 6px; font-size: 11.5px; }
.inv-nt-acts { display: flex; gap: 4px; flex-shrink: 0; }
.inv-nt-foot { font-size: 12px; margin-top: 10px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.inv-nt-hbar { display: flex; flex-wrap: wrap; gap: 8px; align-items: flex-end; }
.inv-nt-hbar label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); }
.inv-nt-hbar label.grow { flex: 1; min-width: 160px; }
.inv-nt-hbar input, .inv-nt-hbar select, .inv-nt-foot input { padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.inv-nt-hist { max-height: 520px; overflow-y: auto; }
.inv-remind { position: fixed; right: 18px; bottom: 64px; width: min(380px, calc(100vw - 32px)); z-index: 48; background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--danger); border-radius: 12px; box-shadow: var(--shadow); padding: 12px; }
.inv-remind-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; font-size: 13.5px; }
.inv-remind-list { display: flex; flex-direction: column; gap: 6px; margin: 10px 0; max-height: 46vh; overflow-y: auto; }
.inv-remind-row { display: flex; gap: 8px; text-align: left; border: 1px solid var(--border); border-left: 3px solid var(--muted); border-radius: 8px; padding: 7px 9px; background: var(--surface); color: var(--text); cursor: pointer; font-size: 12.5px; }
.inv-remind-row.sev-danger { border-left-color: var(--danger); }
.inv-remind-row.sev-warn { border-left-color: var(--warn); }
.inv-remind-row.sev-action { border-left-color: var(--accent); }
.inv-remind-row:hover { background: var(--surface-2); }
.inv-remind-foot { display: flex; justify-content: flex-end; gap: 8px; }
body:has(.modal-overlay:not([hidden])) .inv-remind { display: none; }
.inv-remind-ctl { display: flex; gap: 4px; flex-shrink: 0; }
/* The card minimised: a small count in the bottom-right corner, beside the + button. */
.inv-remind-pill { position: fixed; right: 96px; bottom: 36px; z-index: 48; display: inline-flex; align-items: center; gap: 6px;
  padding: 8px 14px; border: 1px solid var(--border); border-left: 4px solid var(--danger); border-radius: 999px;
  background: var(--surface); color: var(--text); box-shadow: var(--shadow); cursor: pointer; font-size: 13px; font-weight: 600; }
.inv-remind-pill:hover { background: var(--surface-2); }
.inv-remind-pill:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.inv-remind-pill-n { min-width: 20px; padding: 1px 6px; border-radius: 999px; background: var(--danger); color: #fff; font-size: 12px; text-align: center; }
.inv-remind-pill-t { color: var(--muted); font-weight: 500; }
body.env-demo .inv-remind-pill { bottom: 72px; }
body:has(.modal-overlay:not([hidden])) .inv-remind-pill { display: none; }
@media (max-width: 640px) { .inv-remind-pill { right: 86px; bottom: 26px; } body.env-demo .inv-remind-pill { bottom: 62px; } .inv-remind-pill-t { display: none; } }
@media (max-width: 640px) { .inv-nt { flex-wrap: wrap; } .inv-nt-acts { width: 100%; justify-content: flex-end; } }

/* ---- My notebook (Oct 2026) ---- */
.nb-take { display: flex; align-items: center; justify-content: space-between; gap: 8px; margin: 10px 0 6px;
  padding: 12px 14px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface);
  box-shadow: var(--shadow); color: var(--muted); cursor: text; }
.nb-take:focus-visible, .nb-card:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.nb-bar { margin-bottom: 4px; }
.nb-sec { font-size: 11px; text-transform: uppercase; letter-spacing: .04em; margin: 10px 2px 4px; }
.nb-grid { columns: 240px; column-gap: 12px; }
.nb-card { break-inside: avoid; display: block; margin: 0 0 12px; padding: 10px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); cursor: pointer; overflow: hidden; transition: box-shadow .15s; }
.nb-card:hover { box-shadow: var(--shadow); }
.nb-title { font-weight: 600; margin: 2px 0 6px; word-break: break-word; }
.nb-body { white-space: pre-wrap; word-break: break-word; max-height: 220px; overflow: hidden; font-size: 13.5px; }
.nb-items { list-style: none; margin: 0; padding: 0; font-size: 13.5px; }
.nb-items li { margin: 2px 0; }
.nb-items li.done label { text-decoration: line-through; color: var(--muted); }
.nb-items label { display: flex; gap: 6px; align-items: flex-start; cursor: pointer; }
.nb-items input { width: auto; margin-top: 3px; }
.nb-imgs { display: grid; gap: 2px; margin: -10px -12px 8px; overflow: hidden; }
.nb-imgs.n2, .nb-imgs.n4 { grid-template-columns: 1fr 1fr; }
.nb-imgs.n3 { grid-template-columns: 1fr 1fr 1fr; }
.nb-imgs img { width: 100%; max-height: 180px; object-fit: cover; display: block; }
.nb-labels { display: flex; flex-wrap: wrap; gap: 4px; margin-top: 8px; }
.nb-labels:empty { display: none; }
.nb-foot { display: flex; justify-content: space-between; align-items: center; margin-top: 8px; min-height: 26px; }
.nb-acts { opacity: .35; transition: opacity .15s; }
.nb-card:hover .nb-acts, .nb-card:focus-within .nb-acts { opacity: 1; }
@media (hover: none) { .nb-acts { opacity: 1; } }
.nb-lockface { text-align: center; font-size: 26px; padding: 18px 4px 6px; }
.nb-lockface small { font-size: 12px; line-height: 1.4; display: inline-block; margin-top: 6px; }
.nb-lockface { line-height: 1; }
.nb-ed { margin: -4px; padding: 12px; border-radius: 10px; }
.nb-ed-title { width: 100%; border: none; background: transparent; font-size: 17px; font-weight: 600; padding: 4px 2px 8px; color: inherit; }
.nb-ed-title:focus, .nb-ed-body:focus, .nb-ed-it:focus, .nb-ed-new:focus { outline: none; box-shadow: inset 0 -2px 0 var(--brand); }
.nb-ed-body { width: 100%; border: none; background: transparent; resize: vertical; font: inherit; color: inherit; padding: 4px 2px; min-height: 140px; }
.nb-ed-item { display: flex; align-items: center; gap: 8px; padding: 2px 0; }
.nb-ed-item input[type=checkbox] { width: auto; }
.nb-ed-it, .nb-ed-new { flex: 1; border: none; background: transparent; padding: 5px 2px; color: inherit; font: inherit; }
.nb-ed-imgs { display: flex; flex-wrap: wrap; gap: 8px; margin: 10px 0; }
.nb-ed-imgs figure { position: relative; margin: 0; }
.nb-ed-imgs img { width: 120px; height: 90px; object-fit: cover; border-radius: 6px; display: block; border: 1px solid var(--border); }
.nb-ed-imgs button { position: absolute; top: 2px; right: 2px; background: var(--surface); }
.nb-ed-row { display: flex; flex-wrap: wrap; gap: 10px; margin: 10px 0 6px; }
.nb-ed-row label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); flex: 1 1 180px; }
.nb-ed-row input, .nb-ed-row select { padding: 7px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text, inherit); }
.nb-swatches { display: flex; flex-wrap: wrap; gap: 6px; margin: 8px 0; }
.nb-sw { width: 26px; height: 26px; border-radius: 50%; border: 2px solid var(--border); cursor: pointer; padding: 0; }
.nb-sw.on { border-color: var(--brand); box-shadow: 0 0 0 2px var(--brand); }
.nb-ed-tools { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 6px; }
.nb-c-none, .nb-sw.nb-c-none { background: var(--surface); }
.nb-c-red { --nbc: #f28b82; } .nb-c-orange { --nbc: #fbbc04; } .nb-c-yellow { --nbc: #fff475; }
.nb-c-green { --nbc: #ccff90; } .nb-c-teal { --nbc: #a7ffeb; } .nb-c-blue { --nbc: #aecbfa; }
.nb-c-purple { --nbc: #d7aefb; } .nb-c-pink { --nbc: #fdcfe8; } .nb-c-brown { --nbc: #e6c9a8; } .nb-c-gray { --nbc: #9aa0a6; }
[class*="nb-c-"]:not(.nb-c-none) { background: color-mix(in srgb, var(--nbc) var(--nbp, 40%), var(--surface)); }
.nb-sw[class*="nb-c-"]:not(.nb-c-none) { background: var(--nbc); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) { --nbp: 18%; } }
:root[data-theme="dark"] { --nbp: 18%; }

/* ---- Clinic Wise Operation — the owner's gold design (Oct 2026) ----
   One framed card: cream with gold in the light theme, near-black with gold in the dark. */
.cops-hero { --gold: #b8892f; --gold-hi: #e8c77a; --gold-lo: #a8741f; --hero-bg: linear-gradient(135deg, #fffdf8 0%, #f8f0e1 100%);
  --hero-ink: #3a2f1f; --hero-sub: #7a6a52; --hero-line: #e3d3b2; --tab-hover: rgba(184,137,47,.12); --tab-ink: #3a2f1f;
  position: relative; overflow: hidden; margin-bottom: 14px; padding: 14px 16px 10px; border-radius: 14px;
  background: var(--hero-bg); border: 1.5px solid var(--hero-line); box-shadow: 0 2px 10px rgba(120,90,30,.10); color: var(--hero-ink); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cops-hero {
  --hero-bg: linear-gradient(135deg, #17140f 0%, #0f0d0a 100%); --hero-ink: #f3ead8; --hero-sub: #c8b896;
  --hero-line: #5a4523; --tab-hover: rgba(232,199,122,.10); --tab-ink: #efe4cc; } }
:root[data-theme="dark"] .cops-hero { --hero-bg: linear-gradient(135deg, #17140f 0%, #0f0d0a 100%); --hero-ink: #f3ead8;
  --hero-sub: #c8b896; --hero-line: #5a4523; --tab-hover: rgba(232,199,122,.10); --tab-ink: #efe4cc; }
.cops-hero::after { content: ""; position: absolute; top: 0; right: 0; width: 70px; height: 70px; pointer-events: none;
  background: linear-gradient(225deg, var(--gold) 0 14%, transparent 14% 22%, var(--gold-hi) 22% 25%, transparent 25%); opacity: .85; }
.cops-hero .cops-head { margin-bottom: 10px; padding-bottom: 10px; border-bottom: 1px solid var(--hero-line); padding-right: 40px; }
.cops-id { display: flex; align-items: center; gap: 12px; }
.cops-logo { color: var(--gold); display: inline-flex; font-size: 28px; line-height: 1; }
.cops-hero .cops-title { color: var(--hero-ink); font-size: 20px; }
.cops-branch { color: var(--gold); font-size: 14px; font-weight: 700; }
.cops-code { color: var(--hero-sub); font-size: 13px; font-weight: 600; }
.cops-who { color: var(--hero-sub); }
.cops-hero .cops-room label { color: var(--gold); font-weight: 600; }
.cops-hero .cops-room select { background: transparent; color: var(--hero-ink); border: 1.5px solid var(--gold); min-width: 260px; }
.cops-hero .cops-room select option, .cops-hero .cops-room select optgroup { background: var(--surface); color: var(--text); }
.cops-hero .cops-menu { border: 0; background: transparent; padding: 0; margin: 0; gap: 4px 6px; }
.cops-hero .cops-tab { color: var(--tab-ink); font-weight: 500; border-radius: 8px; padding: 8px 14px; }
.cops-hero .cops-tab > span[aria-hidden] { color: var(--gold); }
.cops-hero .cops-tab:hover { background: var(--tab-hover); }
.cops-hero .cops-tab.on { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #2a1e08; font-weight: 700;
  box-shadow: 0 1px 4px rgba(120,80,10,.30), inset 0 1px 0 rgba(255,255,255,.45); }
.cops-hero .cops-tab.on > span[aria-hidden] { color: #2a1e08; }
.cops-hero .cops-tab:focus-visible { outline-color: var(--gold); }
.cops-hero .cops-badge { background: #e53935; box-shadow: 0 0 0 2px rgba(255,255,255,.6); }
.cops-hero .cops-menu-tools .mini-btn { border: 1.5px solid var(--gold); color: var(--gold); background: transparent; border-radius: 8px; }
.cops-hero .cops-menu-tools .mini-btn:not(.ghost) { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #2a1e08; }
.cops-hero .cops-menu-tools small { color: var(--hero-sub); }
.cops-hero .cops-tab.arranging { border-color: var(--gold); }
@media (max-width: 640px) { .cops-hero { padding: 12px; } .cops-hero .cops-room select { min-width: 0; } .cops-hero::after { width: 44px; height: 44px; } }
/* Clinic Wise Operation — 🎨 Customise (Oct 2026): a colour theme per login. Every shade is mixed
   from one colour (--cops-accent, set on <body>), light and dark alike. Gold is the standard and
   uses the rules above unchanged. */
.cops.cops-themed .cops-hero { --gold: var(--cops-accent); --gold-hi: color-mix(in srgb, var(--cops-accent) 55%, #fff);
  --gold-lo: color-mix(in srgb, var(--cops-accent) 80%, #000);
  --hero-bg: linear-gradient(135deg, color-mix(in srgb, var(--cops-accent) 4%, #fff) 0%, color-mix(in srgb, var(--cops-accent) 13%, #fff) 100%);
  --hero-ink: color-mix(in srgb, var(--cops-accent) 22%, #1b1b1b); --hero-sub: color-mix(in srgb, var(--cops-accent) 35%, #5d5d5d);
  --hero-line: color-mix(in srgb, var(--cops-accent) 30%, #fff); --tab-hover: color-mix(in srgb, var(--cops-accent) 12%, transparent);
  --tab-ink: color-mix(in srgb, var(--cops-accent) 22%, #1b1b1b); box-shadow: 0 2px 10px color-mix(in srgb, var(--cops-accent) 16%, transparent); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cops.cops-themed .cops-hero {
  --hero-bg: linear-gradient(135deg, color-mix(in srgb, var(--cops-accent) 12%, #131313) 0%, color-mix(in srgb, var(--cops-accent) 5%, #0d0d0d) 100%);
  --hero-ink: color-mix(in srgb, var(--cops-accent) 12%, #f2f2f2); --hero-sub: color-mix(in srgb, var(--cops-accent) 30%, #b5b5b5);
  --hero-line: color-mix(in srgb, var(--cops-accent) 45%, #222); --tab-ink: color-mix(in srgb, var(--cops-accent) 10%, #ececec);
  --gold: color-mix(in srgb, var(--cops-accent) 75%, #fff); } }
:root[data-theme="dark"] .cops.cops-themed .cops-hero {
  --hero-bg: linear-gradient(135deg, color-mix(in srgb, var(--cops-accent) 12%, #131313) 0%, color-mix(in srgb, var(--cops-accent) 5%, #0d0d0d) 100%);
  --hero-ink: color-mix(in srgb, var(--cops-accent) 12%, #f2f2f2); --hero-sub: color-mix(in srgb, var(--cops-accent) 30%, #b5b5b5);
  --hero-line: color-mix(in srgb, var(--cops-accent) 45%, #222); --tab-ink: color-mix(in srgb, var(--cops-accent) 10%, #ececec);
  --gold: color-mix(in srgb, var(--cops-accent) 75%, #fff); }
.cops.cops-themed .cops-hero .cops-tab.on { background: var(--cops-accent); color: #fff; box-shadow: 0 2px 6px color-mix(in srgb, var(--cops-accent) 35%, transparent); }
.cops.cops-themed .cops-hero .cops-tab.on > span[aria-hidden] { color: #fff; }
.cops.cops-themed .cops-hero .cops-menu-tools .mini-btn:not(.ghost), .cops.cops-themed .cops-cust-btn { background: var(--cops-accent); color: #fff; }
.cops.cops-themed .cops-ab.on { color: var(--cops-accent); background: color-mix(in srgb, var(--cops-accent) 12%, transparent); }
body.cops-page.cops-themed-page .main { background: linear-gradient(180deg, color-mix(in srgb, var(--cops-accent) 4%, #fff) 0%, color-mix(in srgb, var(--cops-accent) 10%, #fff) 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.cops-page.cops-themed-page .main {
  background: linear-gradient(180deg, color-mix(in srgb, var(--cops-accent) 8%, #121212) 0%, color-mix(in srgb, var(--cops-accent) 4%, #0e0e0e) 100%); } }
:root[data-theme="dark"] body.cops-page.cops-themed-page .main {
  background: linear-gradient(180deg, color-mix(in srgb, var(--cops-accent) 8%, #121212) 0%, color-mix(in srgb, var(--cops-accent) 4%, #0e0e0e) 100%); }
.cops.cops-noflourish .cops-hero::after { display: none; }
.cops.cops-zoom-l { zoom: 1.1; }
.cops.cops-zoom-xl { zoom: 1.22; }
.cops.cops-dense .cops-body .panel { padding: 12px 14px; }
.cops.cops-dense .cops-body td, .cops.cops-dense .cops-body th { padding-top: 4px; padding-bottom: 4px; }
.cops.cops-dense .cops-hero { padding-top: 10px; padding-bottom: 10px; }
.cops.cops-roomy .cops-body .panel { padding: 22px 24px; }
.cops.cops-roomy .cops-body td, .cops.cops-roomy .cops-body th { padding-top: 12px; padding-bottom: 12px; }
.cops.cops-roomy .cops-body button { min-height: 40px; }
.cops-emblem { font-size: 30px; line-height: 1; }
.cops-line { color: var(--hero-ink); font-size: 14px; font-weight: 600; margin-top: 2px; }
.cops-hero .cops-cust-btn { border: 1.5px solid var(--gold); color: var(--hero-ink); background: transparent; border-radius: 8px; min-height: 40px; padding: 0 12px; }
.cops-hero .cops-cust-btn:hover { background: var(--tab-hover); }
/* The Customise window. */
.cc-sec { border: 1px solid var(--border); border-radius: 12px; padding: 12px 14px; margin-bottom: 12px; background: var(--surface); }
.cc-sec h4 { margin: 0 0 10px; font-size: 15px; }
.cc-label { font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 4px 0 6px; }
.cc-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 14px; margin-top: 8px; }
.cc-swatches { display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 8px; }
.cc-sw { display: inline-flex; align-items: center; gap: 6px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 999px; cursor: pointer; font-size: 13px; background: var(--surface); }
.cc-sw:has(input[type="radio"]:checked) { border-color: var(--brand); box-shadow: 0 0 0 2px color-mix(in srgb, var(--brand) 30%, transparent); }
.cc-sw input[type="radio"] { margin: 0; }
.cc-sw input[type="color"] { width: 30px; height: 24px; padding: 0; border: 0; background: none; cursor: pointer; }
.cc-dot { width: 18px; height: 18px; border-radius: 50%; border: 1px solid rgba(0,0,0,.15); }
.cc-emb { font-size: 20px; line-height: 1; min-width: 22px; text-align: center; }
.cc-tabs td { vertical-align: middle; padding: 4px 6px; }
.cc-tabs .cc-ord { white-space: nowrap; width: 1%; }
.cc-tabs .cc-ord .mini-btn { padding: 0 6px; min-height: 26px; }
.cc-tabs .cc-ic { width: 64px; text-align: center; font-size: 17px; }
.cc-tabs .cc-lb { width: 100%; min-width: 160px; }
.cc-tabs small { display: block; margin-top: 2px; }
/* Clinic Wise Operation — the views (Oct 2026). The View picker sits beside the Room picker. */
.cops-hero .cops-head { gap: 10px 16px; }
.cops-hero .cops-look select { min-width: 210px; }
.cops-head .cops-room + .cops-look { margin-left: -4px; }
/* Compact: icons only, a slimmer card. */
.look-compact .cops-hero { padding-top: 10px; padding-bottom: 10px; }
.look-compact .cops-who { display: none; }
.look-compact .cops-tab-l { position: absolute; width: 1px; height: 1px; overflow: hidden; clip: rect(0 0 0 0); white-space: nowrap; }
.look-compact .cops-hero .cops-tab { padding: 7px 10px; font-size: 17px; }
.look-compact .cops-hero .cops-tab .cops-badge { font-size: 10px; }
/* Touch tiles: the menu as big square buttons, larger controls in the body. */
.look-touch .cops-hero .cops-menu { display: grid; grid-template-columns: repeat(auto-fill, minmax(124px, 1fr)); gap: 8px; }
.look-touch .cops-hero .cops-tab { flex-direction: column; justify-content: center; text-align: center; min-height: 86px;
  padding: 12px 8px; font-size: 14px; gap: 6px; border: 1px solid var(--hero-line); border-radius: 12px; position: relative; white-space: normal; }
.look-touch .cops-hero .cops-tab > span[aria-hidden] { font-size: 26px; }
.look-touch .cops-hero .cops-tab .cops-badge { position: absolute; top: 6px; right: 6px; }
.look-touch .cops-hero .cops-menu-tools { grid-column: 1 / -1; justify-content: flex-end; }
.look-touch .cops-body button, .look-touch .cops-body select, .look-touch .cops-body input:not([type="checkbox"]):not([type="radio"]) { min-height: 42px; font-size: 15px; }
.look-touch .cops-body .mini-btn { min-height: 36px; font-size: 14px; padding: 4px 12px; }
.look-touch .cops-body table { font-size: 15px; }
.look-touch .cops-body td, .look-touch .cops-body th { padding-top: 10px; padding-bottom: 10px; }
/* Side menu: the sections in a column on the left, the work on the right. */
.cops-shell { display: grid; grid-template-columns: 232px minmax(0, 1fr); gap: 16px; align-items: start; }
.cops-hero.cops-side { position: sticky; top: calc(var(--topbar-h, 64px) + 10px); padding: 10px; max-height: calc(100vh - var(--topbar-h, 64px) - 24px); overflow-y: auto; }
.cops-hero.cops-side::after { display: none; }
.cops-side .cops-menu { flex-direction: column; flex-wrap: nowrap; align-items: stretch; }
.cops-hero.cops-side .cops-tab { justify-content: flex-start; width: 100%; text-align: left; }
.cops-side .cops-tab .cops-badge { margin-left: auto; }
.cops-side .cops-menu-tools { margin: 8px 0 0; padding: 8px 0 0; border-top: 1px solid var(--hero-line); }
@media (max-width: 900px) {
  .cops-shell { grid-template-columns: 1fr; }
  .cops-hero.cops-side { position: static; max-height: none; }
  .cops-side .cops-menu { flex-direction: row; overflow-x: auto; }
  .cops-hero.cops-side .cops-tab { width: auto; }
}
/* App: a launcher of coloured tiles on Home, a bar at the bottom, ‹ Home on every section. */
.look-app .cops-hero { padding: 12px 14px; }
.look-app .cops-hero .cops-head { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.look-app .cops-who { display: none; }
.cops-launch { display: grid; grid-template-columns: repeat(auto-fill, minmax(96px, 1fr)); gap: 12px; margin: 0 0 18px; }
.cops-tile { position: relative; display: flex; flex-direction: column; align-items: center; gap: 7px; padding: 12px 6px 10px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; color: var(--text); font: inherit; cursor: pointer;
  box-shadow: var(--shadow); min-height: 104px; }
.cops-tile:hover { border-color: var(--tc); }
.cops-tile:focus-visible { outline: 2px solid var(--tc); outline-offset: 2px; }
.cops-tile.on { border-color: var(--tc); box-shadow: 0 0 0 2px color-mix(in srgb, var(--tc) 40%, transparent); }
.cops-tile-ic { width: 50px; height: 50px; border-radius: 14px; display: inline-flex; align-items: center; justify-content: center; font-size: 24px;
  background: color-mix(in srgb, var(--tc) 16%, var(--surface)); color: var(--tc); }
.cops-tile-l { font-size: 12.5px; line-height: 1.25; text-align: center; font-weight: 600; }
.cops-tile .cops-badge { position: absolute; top: 6px; right: 8px; }
.cops-home { margin-right: 6px; vertical-align: middle; }
.cops-appbar { position: sticky; bottom: 0; z-index: 40; display: flex; justify-content: space-around; gap: 2px; margin: 18px -4px 0;
  padding: 6px 84px calc(6px + env(safe-area-inset-bottom, 0px)) 6px; background: var(--surface); border: 1px solid var(--border);
  border-radius: 16px 16px 0 0; box-shadow: 0 -4px 16px rgba(0,0,0,.08); }
body.env-demo .cops-appbar { bottom: 34px; }
.cops-ab { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 2px; padding: 6px 2px; border: 0; background: transparent;
  color: var(--muted); font: inherit; cursor: pointer; border-radius: 10px; min-height: 52px; }
.cops-ab:hover { background: var(--surface-2); color: var(--text); }
.cops-ab.on { color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, transparent); }
.cops-ab:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.cops-ab-ic { position: relative; font-size: 21px; line-height: 1; }
.cops-ab-ic .cops-badge { position: absolute; top: -6px; right: -14px; font-size: 10px; }
.cops-ab-l { font-size: 11px; font-weight: 600; max-width: 100%; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 640px) {
  .look-app .cops-hero .cops-room { width: 100%; }
  .cops-launch { grid-template-columns: repeat(3, 1fr); gap: 10px; }
  .cops-appbar { margin-left: -12px; margin-right: -12px; padding-right: 78px; }
}

/* Icon buttons: the header and square icons in the middle of the screen; nothing else until
   one is pressed. The name is the tooltip / spoken label. */
.look-icons .cops-hero .cops-head { margin-bottom: 0; padding-bottom: 0; border-bottom: 0; }
.cops-icons-stage { min-height: 58vh; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 14px; padding: 24px 0; }
.cops-icongrid { display: grid; grid-template-columns: repeat(auto-fit, 112px); justify-content: center; gap: 18px; width: 100%; max-width: 780px; }
.cops-iconbtn { position: relative; width: 112px; aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; padding: 0;
  background: var(--surface); border: 1.5px solid color-mix(in srgb, var(--tc) 45%, var(--border)); border-radius: 22px; cursor: pointer;
  box-shadow: var(--shadow); transition: transform .12s ease, box-shadow .12s ease; }
.cops-iconbtn:hover { transform: translateY(-2px); border-color: var(--tc); box-shadow: 0 6px 18px color-mix(in srgb, var(--tc) 25%, transparent); }
.cops-iconbtn:focus-visible { outline: 3px solid var(--tc); outline-offset: 3px; }
.cops-iconbtn-ic { width: 72px; height: 72px; border-radius: 18px; display: inline-flex; align-items: center; justify-content: center; font-size: 40px; line-height: 1;
  background: color-mix(in srgb, var(--tc) 16%, var(--surface)); }
.cops-iconbtn .cops-badge { position: absolute; top: 8px; right: 8px; }
.cops-icons-hint { margin: 0; font-size: 12.5px; text-align: center; }
.cops-icons-back { margin-right: 6px; vertical-align: middle; }
@media (prefers-reduced-motion: reduce) { .cops-iconbtn { transition: none; } .cops-iconbtn:hover { transform: none; } }
@media (max-width: 640px) {
  .cops-icons-stage { min-height: 50vh; padding: 14px 0; }
  .cops-icongrid { grid-template-columns: repeat(3, 1fr); gap: 12px; }
  .cops-iconbtn { width: 100%; border-radius: 18px; }
  .cops-iconbtn-ic { width: 58px; height: 58px; font-size: 32px; border-radius: 15px; }
}

/* ⧉ The floating notebook (Oct 2026) — over every Inventory screen, under any dialog
   (modal 50), above the + button (45). ⏰ The note reminder card sits at the top right. */
.nb-float { position: fixed; z-index: 46; display: flex; flex-direction: column; background: var(--surface);
  border: 1px solid var(--border); border-top: 4px solid var(--brand); border-radius: 12px; box-shadow: var(--shadow);
  min-width: 300px; min-height: 160px; max-width: calc(100vw - 16px); max-height: calc(100vh - 56px); resize: both; overflow: hidden; }
.nb-float.dragging { opacity: .92; user-select: none; }
.nb-float-bar { display: flex; align-items: center; gap: 8px; padding: 6px 8px 6px 12px; cursor: move; touch-action: none;
  background: var(--surface-2); border-bottom: 1px solid var(--border); user-select: none; }
.nb-float-bar strong { font-size: 14px; white-space: nowrap; }
.nb-float-hint { font-size: 11.5px; flex: 1; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.nb-float-btns { display: flex; gap: 2px; margin-left: auto; }
.nb-float-btns .mini-btn { min-width: 32px; min-height: 30px; }
.nb-float-btns .mini-btn[hidden] { display: none; }
.nb-float-body { flex: 1; overflow: auto; padding: 4px 12px 12px; }
.nb-float-body .nb-grid { grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); }
.nb-float.min { resize: none; min-height: 0; height: auto !important; width: 260px !important; min-width: 0; }
.nb-float.min .nb-float-body, .nb-float.min .nb-float-hint { display: none; }
.nb-float.min .nb-float-bar { border-bottom: 0; }
.nb-float.max { resize: none; left: 8px !important; right: 8px; top: calc(var(--topbar-h, 56px) + 8px) !important; bottom: 8px;
  width: auto !important; height: auto !important; max-height: none; }
@media (max-width: 759px) {
  .nb-float { left: 8px !important; right: 8px; top: auto !important; bottom: 8px; width: auto !important; height: 70vh !important; resize: none; min-width: 0; }
  .nb-float.min { height: auto !important; width: auto !important; }
  .nb-float.max { top: calc(var(--topbar-h, 56px) + 8px) !important; height: auto !important; }
  .nb-float-bar { cursor: default; }
  .nb-float-hint { display: none; }
}
.nb-rem-done { text-decoration: line-through; }
.nb-ed-rem { align-items: end; }
.nb-ed-rem small { align-self: center; }
.nb-remind { position: fixed; right: 18px; top: calc(var(--topbar-h, 56px) + 10px); width: min(380px, calc(100vw - 32px)); z-index: 48;
  background: var(--surface); border: 1px solid var(--border); border-top: 4px solid var(--warn); border-radius: 12px; box-shadow: var(--shadow); padding: 12px; }
.nb-remind-list { display: flex; flex-direction: column; gap: 8px; margin: 8px 0; max-height: 46vh; overflow: auto; }
.nb-remind-row { display: flex; justify-content: space-between; gap: 8px; align-items: flex-start; padding: 8px 10px;
  border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); font-size: 13px; overflow-wrap: anywhere; }
.nb-remind-acts { display: flex; flex-direction: column; gap: 4px; flex: none; }
.nb-remind-snz { font-size: 12.5px; display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.nb-remind-snz select { padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: inherit; }
.nb-remind .inv-remind-foot { justify-content: space-between; align-items: center; flex-wrap: wrap; }
@media (max-width: 759px) { body.env-demo .nb-float { bottom: 42px; } }

/* Clinic Wise Operation — the page behind the cards in light gold, matching its gold header
   (body.cops-page is set by go() for this screen only). Dark theme: a warm near-black. */
body.cops-page .main { background: linear-gradient(180deg, #fdf8ee 0%, #f7ecd6 100%); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.cops-page .main { background: linear-gradient(180deg, #16130d 0%, #120f0a 100%); } }
:root[data-theme="dark"] body.cops-page .main { background: linear-gradient(180deg, #16130d 0%, #120f0a 100%); }
/* The top bar keeps exactly its usual colour here (the owner: "Don't change the color of this part"):
   it is see-through elsewhere, so over the gold it is given the colour it shows on every other screen. */
body.cops-page .topbar { background: color-mix(in srgb, var(--surface) 70%, var(--bg)); }

/* Stock Overview (Oct 2026): summary cards, the item drawer's tabs and month bars. */
.kpi-grid.inv-kpis { margin: 0 0 12px; gap: 8px; grid-template-columns: repeat(auto-fit, minmax(108px, 1fr)); }
.kpi-grid.inv-kpis .kpi { padding: 10px 10px; }
.kpi-grid.inv-kpis .kpi { min-width: 0; }
.kpi-grid.inv-kpis .kpi .value { font-size: 18px; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.kpi-grid.inv-kpis .kpi .value.money { font-size: 14.5px; }
.kpi-grid.inv-kpis .kpi .sub { font-size: 11.5px; }
.so-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.so-tab { font: inherit; font-size: 13px; padding: 6px 12px; border-radius: 999px; border: 1px solid var(--border);
  background: var(--surface); color: var(--text); cursor: pointer; }
.so-tab:hover { border-color: var(--brand); }
.so-tab.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.so-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.so-bars { display: flex; align-items: flex-end; gap: 6px; height: 130px; padding: 4px 0; overflow-x: auto; }
.so-bar { flex: 1 0 34px; max-width: 64px; display: flex; flex-direction: column; align-items: center; justify-content: flex-end; height: 100%; gap: 2px; font-size: 11px; }
.so-bar span { width: 70%; min-height: 2px; max-height: calc(100% - 32px); background: var(--brand); border-radius: 4px 4px 0 0; }
.inv-warn ul li { margin: 3px 0; }

/* Stock Overview, pass 2 (Oct 2026, the owner's spec section 3): black and gold —
   charcoal headings with a thin gold rule, gold dividers, a soft gold picked row.
   The tokens below are scoped to the screen; both themes read them. */
.inv-gold { --so-gold: #b8913a; --so-gold-soft: rgba(201, 162, 74, .16); --so-gold-line: rgba(184, 145, 58, .45);
  --so-head: #2b2a27; --so-head-ink: #f3e3bd; }
.inv-gold .kpi-grid.inv-kpis .kpi { border-top: 2px solid var(--so-gold-line); }
.inv-gold .kpi-grid.inv-kpis .kpi.on, .inv-gold .kpi-grid.inv-kpis button.kpi.on { box-shadow: 0 0 0 2px var(--so-gold); }
.inv-gold .inv-card { border-top: 2px solid var(--so-gold-line); }
.inv-gold .inv-card .ci-row + .ci-row { border-top: 1px solid var(--so-gold-line); padding-top: 10px; }
/* The table itself reads like Clinic Wise Inventory's All locations list (the owner, Oct 2026:
   "replace stock overview table look also like this for clear visible identification"): a light
   heading row with small grey capitals, plain row lines, the material's name in bold. */
.inv-gold #invTable > thead > tr > th { background: var(--surface-2); color: var(--muted); border-bottom: 1px solid var(--border); font-weight: 600; }
.inv-gold #invTable > thead > tr > th.sorted { color: var(--brand); }
.inv-gold #invTable > tbody > tr[data-invrow] > td { border-bottom-color: var(--border); }
.inv-gold #invTable > tbody > tr[data-invrow]:hover > td { background: color-mix(in srgb, var(--brand) 4%, var(--surface)); }
.inv-gold #invTable > tbody > tr[data-invrow] > td.inv-name { font-weight: 600; }
.inv-gold #invTable > thead > tr > th, .inv-gold #invTable > tbody > tr[data-invrow] > td { padding: 9px 10px; }
.inv-gold #invTable > tbody > tr[data-invrow] > td:not(.inv-name) { white-space: nowrap; }
.inv-gold #invTable > tbody > tr.inv-sel > td { background: color-mix(in srgb, var(--brand) 9%, var(--surface)); }
.inv-gold #invTable > tbody > tr.inv-sel > td.inv-name { box-shadow: inset 3px 0 0 var(--brand); }
.inv-th { position: relative; cursor: pointer; user-select: none; white-space: nowrap; }
.inv-grip { position: absolute; top: 0; right: 0; width: 7px; height: 100%; cursor: col-resize; }
.inv-grip:hover { background: var(--so-gold-line); }
.inv-pager { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 8px 0 0; font-size: 13px; }
.inv-pager .inv-per { display: inline-flex; align-items: center; gap: 6px; }
.inv-pager .inv-per select { padding: 4px 8px; }
.inv-pager .inv-pages { display: inline-flex; align-items: center; gap: 8px; margin-left: auto; }
.inv-vr { display: flex; gap: 6px; }
.inv-vr input { min-width: 0; width: 100%; }
.inv-fold-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; }
.inv-gold .inv-rec, .inv-gold .inv-rep { margin: 0 0 12px; padding: 10px 14px; border-left: 3px solid var(--so-gold); }
.inv-rec-sec { margin: 10px 0 0; padding-top: 8px; border-top: 1px solid var(--so-gold-line, var(--border)); }
.inv-rec-sec h4 { margin: 0 0 2px; font-size: 13.5px; }
.inv-rec-sec p { margin: 0 0 4px; font-size: 12px; }
.inv-rec-sec ul { margin: 0; padding-left: 18px; font-size: 13px; }
.inv-rep-btns { display: flex; flex-wrap: wrap; gap: 6px; margin: 10px 0; }
.inv-rep-btns .btn { padding: 6px 12px; font-size: 13px; }
.inv-rep-charts { display: grid; grid-template-columns: repeat(auto-fit, minmax(300px, 1fr)); gap: 16px; }
.inv-rep-charts h4 { margin: 0 0 6px; font-size: 13px; }
.so-hbar { display: grid; grid-template-columns: minmax(90px, 160px) 1fr auto; gap: 8px; align-items: center; font-size: 12px; margin: 3px 0; }
.so-hbar .lbl { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.so-hbar .bar { background: var(--surface-2); border-radius: 4px; height: 12px; overflow: hidden; }
.so-hbar .bar i { display: block; height: 100%; background: linear-gradient(90deg, #d8b45e, #b8913a); border-radius: 4px; }
.so-hbar .val { font-variant-numeric: tabular-nums; white-space: nowrap; }
.so-price .so-bar span { background: #b8913a; }
.inv-colpick { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 6px 14px; }
.inv-row-menu { position: fixed; z-index: 47; background: var(--surface); border: 1px solid var(--border); border-top: 2px solid #b8913a;
  border-radius: 10px; box-shadow: var(--shadow); padding: 6px; min-width: 240px; display: flex; flex-direction: column; }
.inv-row-menu[hidden] { display: none; }
.inv-row-menu button { font: inherit; font-size: 13px; text-align: left; background: none; border: 0; color: var(--text);
  padding: 7px 10px; border-radius: 6px; cursor: pointer; }
.inv-row-menu button:hover, .inv-row-menu button:focus-visible { background: rgba(201, 162, 74, .16); outline: none; }
.inv-row-menu hr { border: 0; border-top: 1px solid var(--border); margin: 4px 2px; }
/* The table scrolls inside its own box with its headings and the item column held (desktop). */
@media (min-width: 641px) {
  .inv-scroll { max-height: 72vh; overflow: auto; }
  .inv-scroll > table { border-collapse: separate; border-spacing: 0; }
  .inv-scroll > table > thead > tr > th { position: sticky; top: 0; z-index: 3; }
  .inv-scroll > table > thead > tr > th.inv-tg, .inv-scroll > table > tbody > tr > td.inv-tg { position: sticky; left: 0; z-index: 2; width: 84px; min-width: 84px; background: var(--surface); }
  .inv-scroll > table > thead > tr > th.inv-name, .inv-scroll > table > tbody > tr[data-invrow] > td.inv-name { position: sticky; left: 84px; z-index: 2; background: var(--surface); min-width: 200px; }
  .inv-scroll > table > thead > tr > th.inv-tg, .inv-scroll > table > thead > tr > th.inv-name { z-index: 4; }
  .inv-gold .inv-scroll > table > thead > tr > th.inv-tg, .inv-gold .inv-scroll > table > thead > tr > th.inv-name { background: var(--surface-2); }
  .inv-gold #invTable > tbody > tr.row-alert > td.inv-tg, .inv-gold #invTable > tbody > tr.row-alert > td.inv-name { background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
  .inv-gold #invTable > tbody > tr.inv-sel > td.inv-tg, .inv-gold #invTable > tbody > tr.inv-sel > td.inv-name { background: color-mix(in srgb, var(--brand) 9%, var(--surface)); }
  .inv-gold #invTable > tbody > tr[data-invrow]:hover > td.inv-tg, .inv-gold #invTable > tbody > tr[data-invrow]:hover > td.inv-name { background: color-mix(in srgb, var(--brand) 4%, var(--surface)); }
  .inv-scroll > table > tbody > tr[data-invrow] > td.inv-name { box-shadow: inset -1px 0 0 var(--border); }
}
@media (max-width: 640px) { .inv-grip { display: none; } .inv-pager .inv-pages { margin-left: 0; } }
/* Stock Overview — columns moved by dragging their headings while unlocked (Oct 2026). */
#invTable th.inv-movable { cursor: grab; outline: 1px dashed var(--brand); outline-offset: -3px; }
#invTable th.inv-dragging { opacity: .45; }
#invTable th.inv-drop-l { box-shadow: inset 3px 0 0 var(--so-gold, var(--brand)); }
#invTable th.inv-drop-r { box-shadow: inset -3px 0 0 var(--so-gold, var(--brand)); }
.inv-arrange-note { margin: 0 0 6px; padding: 6px 10px; font-size: 12.5px; border-radius: 8px; background: var(--so-gold-soft, var(--surface-2)); border: 1px dashed var(--so-gold, var(--brand)); }
.inv-arrange-note[hidden] { display: none; }
@media (max-width: 640px) { .inv-arrange-note, #invArrange { display: none; } }

/* 🧮 The inventory calculator: an icon above the + button, a floating window, a pill in the corner. */
.calc-dock, .calc-pill { position: fixed; right: 30px; bottom: 96px; z-index: 45; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); box-shadow: var(--shadow); cursor: pointer; font: inherit; }
.calc-dock { width: 48px; height: 48px; border-radius: 50%; font-size: 22px; line-height: 1; padding: 0; }
.calc-pill { display: inline-flex; align-items: center; gap: 6px; max-width: 260px; min-height: 40px; padding: 6px 14px; border-radius: 999px;
  font-weight: 600; font-variant-numeric: tabular-nums; }
.calc-pill-v { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
/* 📝 the notebook's icon, just above the calculator's (inventory department only). */
.nb-dock { position: fixed; right: 30px; bottom: 152px; z-index: 45; width: 48px; height: 48px; border-radius: 50%;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font-size: 22px; line-height: 1; padding: 0;
  cursor: pointer; box-shadow: var(--shadow); }
.nb-dock:hover { background: var(--surface-2); }
.nb-dock:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
body.env-demo .nb-dock { bottom: 188px; }
body:has(.modal-overlay:not([hidden])) .nb-dock, body:has(.fab-wrap.open) .nb-dock { display: none; }
@media (max-width: 640px) { .nb-dock { right: 22px; bottom: 140px; } body.env-demo .nb-dock { bottom: 176px; } }
@media print { .nb-dock { display: none !important; } }
.calc-dock:hover, .calc-pill:hover { background: var(--surface-2); }
.calc-dock:focus-visible, .calc-pill:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
body.env-demo .calc-dock, body.env-demo .calc-pill { bottom: 132px; }
body:has(.modal-overlay:not([hidden])) .calc-dock, body:has(.modal-overlay:not([hidden])) .calc-pill,
body:has(.fab-wrap.open) .calc-dock, body:has(.fab-wrap.open) .calc-pill { display: none; }
@media (max-width: 640px) { .calc-dock, .calc-pill { right: 22px; bottom: 84px; } body.env-demo .calc-dock, body.env-demo .calc-pill { bottom: 120px; } }
@media print { .calc-dock, .calc-pill, .calc-win { display: none !important; } }
.calc-win { position: fixed; z-index: 49; width: 284px; min-width: 240px; min-height: 260px; max-width: calc(100vw - 16px);
  max-height: calc(100vh - 56px); display: flex; flex-direction: column; background: var(--surface); resize: both;
  border: 1px solid var(--border); border-radius: 14px; box-shadow: 0 18px 48px rgba(0,0,0,.22); overflow: hidden; container-type: inline-size; }
.calc-win.big { width: min(480px, calc(100vw - 16px)) !important; height: min(720px, calc(100vh - 56px)) !important; resize: none; }
.calc-win:focus { outline: none; }
.calc-win.dragging { opacity: .93; user-select: none; }
.calc-bar { display: flex; align-items: center; gap: 6px; padding: 6px 6px 6px 12px; cursor: move; touch-action: none; border-bottom: 1px solid var(--border);
  background: var(--surface-2); }
.calc-bar strong { font-size: 13.5px; white-space: nowrap; }
.calc-modes { display: flex; gap: 2px; padding: 3px; background: var(--surface-2); border: 1px solid var(--border); border-radius: 999px; }
.calc-mode { flex: 1; border: 1px solid transparent; background: none; color: var(--muted); font: inherit; font-size: clamp(11px, 3.9cqi, 14px); padding: 3px 6px; border-radius: 999px; cursor: pointer; }
.calc-mode.on { background: var(--surface); border-color: var(--border); color: var(--brand); font-weight: 600; }
.calc-body { flex: 1; min-height: 0; padding: 8px; overflow: auto; display: flex; flex-direction: column; gap: 6px; }
.calc-screen { background: var(--surface-2); border: 1px solid var(--border); border-radius: 10px; padding: 8px 10px; text-align: right; }
.calc-expr { font-size: 12.5px; color: var(--muted); min-height: 18px; word-break: break-all; }
.calc-val { font-size: clamp(20px, 9cqi, 40px); font-weight: 600; font-variant-numeric: tabular-nums; line-height: 1.2; word-break: break-all; }
.calc-val.live { color: var(--muted); }
.calc-val.err { color: var(--danger); font-size: 16px; padding: 6px 0; }
.calc-line { display: flex; justify-content: space-between; align-items: center; font-size: 11.5px; margin-top: 2px; }
.calc-flags { color: var(--brand); font-weight: 600; letter-spacing: .03em; }
.calc-keys { display: grid; grid-template-columns: repeat(5, 1fr); gap: clamp(3px, 1.4cqi, 7px); }
.calc-k { min-height: clamp(30px, 11cqi, 54px); border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 8px; font: inherit; font-size: clamp(12px, 4.4cqi, 20px);
  cursor: pointer; padding: 0 2px; }
.calc-k:hover { background: var(--surface-2); }
.calc-k:active { transform: scale(.97); }
.calc-k:focus-visible, .calc-eq:focus-visible, .calc-mode:focus-visible, .calc-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.calc-k.num { background: var(--surface-2); font-weight: 600; font-size: clamp(14px, 5.2cqi, 24px); }
.calc-k.op { color: var(--brand); font-weight: 700; font-size: clamp(15px, 5.6cqi, 26px); }
.calc-sci-keys .calc-k, .calc-biz-keys .calc-k { font-size: clamp(11px, 3.8cqi, 17px); min-height: clamp(26px, 9cqi, 44px); color: var(--muted); }
.calc-eq { min-height: clamp(34px, 12cqi, 56px); border: 0; border-radius: 9px; background: var(--brand); color: #fff; font: inherit; font-size: 20px; font-weight: 700; cursor: pointer; }
.calc-eq:hover { filter: brightness(1.06); }
.calc-sci-keys, .calc-biz-keys, .calc-biz { display: none; }
.calc-win[data-mode="sci"] .calc-sci-keys, .calc-win[data-mode="biz"] .calc-biz-keys { display: grid; }
.calc-win[data-mode="biz"] .calc-biz { display: flex; }
.calc-biz { gap: 10px; align-items: center; flex-wrap: wrap; font-size: 12.5px; }
.calc-biz label { display: inline-flex; align-items: center; gap: 4px; color: var(--muted); }
.calc-biz input { width: 58px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); font: inherit; text-align: right; }
.calc-gt { margin-left: auto; font-weight: 600; font-variant-numeric: tabular-nums; }
.calc-tabs { display: flex; flex-wrap: wrap; align-items: center; gap: 4px; border-top: 1px solid var(--border); padding-top: 6px; }
.calc-tab { border: 0; background: none; color: var(--muted); font: inherit; font-size: 12.5px; padding: 3px 8px; border-radius: 6px; cursor: pointer; }
.calc-tab.on { background: var(--surface-2); color: var(--text); font-weight: 600; }
.calc-keep { margin-left: auto; font-size: 11.5px; color: var(--muted); display: inline-flex; align-items: center; gap: 4px; white-space: nowrap; }
.calc-keep select { font: inherit; font-size: 11.5px; padding: 2px 4px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.calc-panel { max-height: 40cqi; min-height: 40px; overflow: auto; }
.calc-list { display: flex; flex-direction: column; }
.calc-row { display: grid; grid-template-columns: 1fr auto; gap: 0 8px; align-items: center; text-align: left; border: 0; border-bottom: 1px solid var(--border);
  background: none; color: var(--text); font: inherit; padding: 5px 2px; cursor: pointer; }
button.calc-row:hover { background: var(--surface-2); }
.calc-row-e { font-size: 11.5px; color: var(--muted); overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.calc-row strong { font-variant-numeric: tabular-nums; text-align: right; }
.calc-row small { grid-column: 1 / -1; font-size: 10.5px; }
.calc-mrow { cursor: default; grid-template-columns: 1fr auto; }
.calc-mval { font-weight: 600; font-size: 15px; font-variant-numeric: tabular-nums; text-align: left; }
.calc-macts { display: flex; gap: 2px; grid-row: 1 / span 2; grid-column: 2; }
.calc-macts .mini-btn { min-width: 30px; }
.calc-mrow small { grid-column: 1; }
.calc-panel-foot { display: flex; justify-content: space-between; align-items: center; padding-top: 4px; font-size: 11.5px; }
.calc-empty { font-size: 12px; margin: 6px 2px; }
@media (max-width: 759px) {
  .calc-win, .calc-win.big { left: 8px !important; right: 8px; top: auto !important; bottom: 8px; width: auto !important; height: auto !important; max-height: 82vh; resize: none; }
  .calc-bar { cursor: default; }
  .calc-win [data-cw="big"] { display: none; }
  body.env-demo .calc-win { bottom: 42px; }
}

/* 🗂 Items & masters (Oct 2026) — one window for the stock lists. */
.im-tabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 10px; }
.im-tab { border: 1px solid var(--border); background: var(--surface-2); color: inherit; border-radius: 999px;
  padding: 6px 12px; font: inherit; font-size: 13px; cursor: pointer; }
.im-tab:hover { border-color: var(--brand); }
.im-tab.on { background: var(--brand); border-color: var(--brand); color: #fff; font-weight: 600; }
.im-tab:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.im-err.ok { color: var(--success); }
.im-bar { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 4px 0 8px; }
.im-bar input[type="search"] { flex: 1 1 220px; min-width: 160px; }
.im-bar select, .im-bar input { height: 34px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px;
  background: var(--surface); color: inherit; font: inherit; font-size: 13px; }
.im-sp { flex: 1 1 auto; }
.im-tickbar { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; padding: 6px 10px; margin: 0 0 8px;
  background: color-mix(in srgb, var(--brand) 9%, var(--surface)); border: 1px solid var(--border); border-radius: 10px; }
.im-tickbar[hidden] { display: none; }
.im-tickbar strong { margin-right: 4px; }
.im-note { font-size: 12px; margin: 0 0 8px; }
.im-table td, .im-table th { vertical-align: middle; }
.im-table .im-ck { width: 30px; text-align: center; }
.im-table tr.im-on td { background: color-mix(in srgb, var(--brand) 7%, var(--surface)); }
.im-acts { white-space: nowrap; text-align: right; }
.im-uses { font-size: 12px; max-width: 260px; }
.im-inline { display: inline-flex; gap: 4px; align-items: center; }
.im-inline input { height: 30px; padding: 2px 6px; border: 1px solid var(--brand); border-radius: 6px; font: inherit; min-width: 180px;
  background: var(--surface); color: inherit; }
.im-num { width: 90px; text-align: right; }
.im-table input.im-num { height: 30px; padding: 2px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: inherit; font: inherit; }
.im-add input, .im-add select { width: 100%; min-width: 80px; height: 30px; padding: 2px 6px; border: 1px solid var(--border);
  border-radius: 6px; background: var(--surface); color: inherit; font: inherit; font-size: 12.5px; }
.im-scope { border: 1px solid var(--border); border-radius: 12px; padding: 10px 12px; margin: 0 0 12px; background: var(--surface); }
.im-scope h4 { margin: 0 0 6px; font-size: 14px; }
.im-ckl { display: inline-flex; gap: 6px; align-items: center; font-size: 13px; }
.im-ckl input { width: auto; height: auto; }
@media (max-width: 640px) {
  .im-bar input[type="search"] { flex-basis: 100%; }
  .im-tab { padding: 5px 9px; font-size: 12px; }
}
/* A tabbed card keeps ONE size whichever tab is open (the owner, Oct 2026: "when
   select each tab interface is change to different size ... keep interface in
   fixed size"). The body is a fixed height and scrolls inside; the tab row stays
   at the top of it. */
.modal.fixed-size:not(.maximized) .modal-body { height: 70vh; max-height: 70vh; }
.modal.fixed-size .so-tabs, .modal.fixed-size .im-tabs { position: sticky; top: 0; z-index: 3;
  background: var(--surface); padding-top: 4px; padding-bottom: 8px; }

/* Stock Overview (Oct 2026, the owner): the card keeps one live search and Reset; every
   dropdown is in the 🔍 Filters window, opened from the bottom line beside Move columns. */
.inv-card .inv-search-row .inv-live { flex: 1 1 420px; }
.inv-card .inv-search-row .inv-live input { font-size: 14px; }
.inv-fchips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 12px; }
.inv-fchips[hidden] { display: none; }
.inv-fchip { display: inline-flex; align-items: center; gap: 4px; }
.inv-fchip button { font-weight: 700; padding: 0 2px; }
.inv-card .inv-filt-btn[aria-pressed="true"] { border-color: var(--brand); }
.filter-card.inv-filt-dlg { border: 0; box-shadow: none; background: transparent; margin: 0; border-radius: 0; }
.ci-card.inv-filt-dlg .ci-row { padding: 10px 0; }
.inv-filt-acts { display: flex; flex-wrap: wrap; justify-content: flex-end; gap: 8px; padding-top: 12px; border-top: 1px solid var(--border); }

/* 🕘 Items & masters → History, and ✂ Break pack (Oct 2026). */
.im-hist-bar label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.im-table .im-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.im-table .im-old { color: var(--danger); }
.im-table .im-new { color: var(--success); font-weight: 600; }
.im-hist-one { margin: 0 0 6px; }
.pb-pick input[type="search"], .pb-ex input { width: 100%; height: 38px; padding: 6px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.pb-to { border: 1px solid var(--border); border-radius: 10px; padding: 8px 12px 10px; margin: 10px 0; }
.pb-to legend { font-size: 12.5px; color: var(--muted); padding: 0 4px; }
.pb-new[hidden], .pb-ex[hidden] { display: none; }
.pb-new, .pb-ex { margin: 4px 0 8px 30px; }
.pb-h { margin: 12px 0 6px; font-size: 14px; }
.pb-table .pb-k { width: 90px; height: 32px; text-align: right; padding: 2px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); }
.pb-table tr.pb-dead td { color: var(--muted); }
.pb-sum { margin: 10px 0 4px; padding: 8px 12px; border-radius: 8px; background: var(--surface-2); }
.pb-hint { font-size: 12.5px; margin: 6px 0 0; }
.pb-hist { margin-top: 12px; }
.so-info-acts { display: flex; flex-wrap: wrap; gap: 8px; margin: 12px 0 0; }
/* The material card's Info tab: the picture beside the details, each label beside its value. */
.so-info { display: grid; grid-template-columns: 240px minmax(0, 1fr); gap: 20px; align-items: start; }
.so-info-pic { border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); padding: 10px; display: flex; flex-direction: column; gap: 8px; align-items: stretch; }
.so-info-pic img { width: 100%; aspect-ratio: 1 / 1; object-fit: contain; background: #fff; border-radius: 8px; }
.so-pic-none { aspect-ratio: 1 / 1; display: flex; align-items: center; justify-content: center; font-size: 64px; background: var(--surface); border-radius: 8px; opacity: .55; }
.so-pic-cap { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; justify-content: space-between; font-size: 12px; color: var(--muted); }
.so-pic-nav { display: inline-flex; gap: 4px; align-items: center; }
.so-pic-src { font-size: 11px; color: var(--muted); line-height: 1.35; overflow-wrap: anywhere; }
.so-info-tbl { border-top: 1px solid var(--border); }
.so-info-row { display: grid; grid-template-columns: 170px minmax(0, 1fr); gap: 12px; padding: 8px 4px; border-bottom: 1px solid var(--border); align-items: baseline; }
.so-info-row > span { color: var(--muted); font-size: 13px; }
.so-info-row > strong { text-align: left; overflow-wrap: anywhere; }
.so-info-about { margin-top: 14px; }
.so-info-about h4 { margin: 0 0 6px; font-size: 14px; }
.so-info-about p { margin: 0 0 6px; line-height: 1.5; }
.so-about-src { font-size: 12px; }
@media (max-width: 640px) {
  .so-info { grid-template-columns: 1fr; }
  .so-info-pic { max-width: 260px; }
  .so-info-row { grid-template-columns: 120px minmax(0, 1fr); }
}
/* Reconciliation / Reports & analytics in their own window (Oct 2026). */
.inv-panel-win > .panel { border: 0; box-shadow: none; padding: 0; margin: 0; background: transparent; }
.inv-actions .inv-rec-btn .chip { margin-left: 4px; padding: 1px 7px; font-size: 11px; }

/* 📒 Day Book (Oct 2026). */
.db-strip { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.db-strip-btns { display: flex; flex-wrap: wrap; gap: 8px; }
.db-bar label { display: inline-flex; align-items: center; gap: 6px; font-size: 12.5px; color: var(--muted); }
.db-bar .db-day { margin: 0 6px; }
.db-bar .btn.on { border-color: var(--brand); color: var(--brand); }
.db-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 4px 0 10px; }
.db-chip { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 4px 10px; font-size: 12.5px; cursor: pointer; }
.db-chip strong { margin-left: 4px; color: var(--brand); }
.db-chip.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--surface)); }
.db-table .db-row { cursor: pointer; }
.db-table .db-row:hover td, .db-sum .db-row:hover td { background: color-mix(in srgb, var(--brand) 7%, transparent); }
.db-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.db-when { white-space: nowrap; font-variant-numeric: tabular-nums; }
.db-empty { padding: 24px 0; text-align: center; }
.db-foot, .db-skip { font-size: 12px; margin: 8px 0 0; }
.db-cal { display: grid; grid-template-columns: repeat(7, minmax(0, 1fr)); gap: 6px; margin: 8px 0 12px; }
.db-cal-h { font-size: 11.5px; color: var(--muted); text-align: center; text-transform: uppercase; letter-spacing: .04em; }
.db-cal-cell { min-height: 78px; border: 1px solid var(--border); border-radius: 10px; padding: 6px 8px; text-align: left; display: flex; flex-direction: column; gap: 2px;
  background: color-mix(in srgb, var(--brand) calc(var(--heat, 0) * 38%), var(--surface)); color: var(--text); cursor: pointer; font: inherit; }
.db-cal-cell.off { border: 0; background: transparent; cursor: default; }
.db-cal-cell.future { opacity: .45; cursor: default; }
.db-cal-cell.today { border: 2px solid var(--brand); }
.db-cal-cell .db-cal-n { font-size: 12px; color: var(--muted); }
.db-cal-cell strong { font-size: 18px; line-height: 1.1; }
.db-cal-cell small { font-size: 10.5px; color: var(--muted); line-height: 1.25; overflow: hidden; max-height: 2.6em; }
.db-kpis { margin: 6px 0 12px; }
.db-sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(min(100%, 440px), 1fr)); gap: 12px; }
.db-sum { padding: 12px 14px; margin: 0; }
.db-sum h4 { margin: 0 0 8px; font-size: 14px; }
.db-sum-wide { grid-column: 1 / -1; }
.db-sum .db-row { cursor: pointer; }
.db-barcell { width: 30%; }
.db-bar-fill { display: block; height: 8px; border-radius: 4px; background: var(--brand); min-width: 2px; }
.db-grp { display: flex; justify-content: space-between; padding: 4px 0; border-bottom: 1px solid var(--border); font-size: 13px; }
.db-days { display: flex; align-items: flex-end; gap: 3px; height: 130px; overflow-x: auto; padding-bottom: 2px; }
.db-dbar { flex: 1 1 14px; max-width: 36px; height: 100%; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; gap: 2px; border: 0; background: transparent; cursor: pointer; padding: 0; color: var(--muted); }
.db-dbar span { width: 100%; background: color-mix(in srgb, var(--brand) 70%, transparent); border-radius: 3px 3px 0 0; }
.db-dbar small { font-size: 9.5px; }
@media (max-width: 640px) { .db-cal-cell { min-height: 54px; padding: 4px; } .db-cal-cell small { display: none; } .db-cal-cell strong { font-size: 14px; } }

/* 📋 Physical stock window (Oct 2026) */
.ps-filters, .ps-hbar, .ps-pick { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin: 10px 0; }
.ps-f { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); min-width: 150px; }
.ps-f > input, .ps-f > select { font-size: 14px; padding: 7px 9px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.ps-f.ps-grow, .ps-f.ps-note { flex: 1 1 220px; }
.ps-file { display: flex; flex-direction: column; gap: 4px; font-size: 12px; color: var(--muted); }
.ps-sum { margin: 10px 0; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); border: 1px solid var(--border); }
.ps-sum.bad { border-color: var(--danger); }
.ps-steps { margin: 12px 0 0 18px; font-size: 13px; }
.ps-sheet { margin: 8px 0; }
.ps-kpis { margin: 10px 0; }
.ps-kpis .value.neg { color: var(--danger); }
.ps-probs { border: 1px solid var(--danger); border-radius: 10px; padding: 8px 12px; margin: 8px 0; color: var(--danger); font-size: 13px; }
.ps-probs ul { margin: 6px 0 0 16px; color: var(--text); }
.ps-table { max-height: 46vh; }
tr.ps-short td:nth-child(5), tr.ps-short td:nth-child(6) { color: var(--danger); font-weight: 600; }
tr.ps-over td:nth-child(5), tr.ps-over td:nth-child(6) { color: var(--success); font-weight: 600; }
.ps-reason { width: 100%; min-width: 150px; padding: 5px 7px; border: 1px solid var(--border); border-radius: 7px; background: var(--surface); color: var(--text); }
.ps-adj { margin: 10px 0; padding: 10px 12px; }
.ps-adj-head { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; }
.ps-adj-act { margin-left: auto; display: flex; gap: 6px; }
.ps-adj-meta { font-size: 12.5px; margin: 4px 0; }
.ps-h4 { margin: 16px 0 6px; }

/* ✂ Break pack — one batch, and the new pieces item's own form (Oct 2026) */
.pb-table .pb-rad { width: 34px; text-align: center; }
.pb-table tbody tr { cursor: pointer; }
.pb-table tbody tr.pb-dead { cursor: default; }
.pb-table tbody tr.pb-on td { background: color-mix(in srgb, var(--brand) 9%, var(--surface)); }
.pb-qty { max-width: 260px; margin-top: 10px; }
.pb-ni { padding: 8px 10px; border: 1px dashed var(--border); border-radius: 9px; margin: 4px 0 8px; font-size: 13px; }
.pb-ni-name { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin-bottom: 2px; }
.pb-ni-row { display: grid; grid-template-columns: 1fr 2fr 1fr; gap: 10px; }
.pb-ni-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 0 12px; }
.pb-ni-prev { margin: 2px 0 10px; }
@media (max-width: 560px) { .pb-ni-row { grid-template-columns: 1fr; } }

/* 🏦 Interest Payable by Deal No (Oct 2026) */
.ibd-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: flex-end; margin-bottom: 10px; }
.ibd-acts { margin-left: auto; display: flex; gap: 8px; }
.ibd-table tr.ibd-none td { color: var(--warn); }
.ibd-table tr.ibd-lines > td { background: var(--surface-2); padding: 6px 10px; }
tr.gl-deal td { font-size: 12.5px; background: color-mix(in srgb, var(--brand) 5%, var(--surface)); }
tr.gl-deal td:first-child { padding-left: 22px; }

/* ⬆ Import a supplier invoice (Oct 2026) */
.ii-target { display: grid; gap: 6px; margin-bottom: 10px; }
.ii-grid, .ii-map, .ibe-map { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 0 12px; }
.ii-grid .ii-wide { grid-column: 1 / -1; }
.ii-file { display: flex; flex-wrap: wrap; gap: 12px; align-items: flex-end; margin: 6px 0; }
.ii-hint { font-size: 12.5px; }
.ii-h { margin: 14px 0 6px; }
.ii-sample { max-height: 30vh; }
.ii-made { margin: 10px 0; padding: 8px 12px; border: 1px dashed var(--brand); border-radius: 10px; font-size: 13px; }
.ii-table { max-height: 44vh; }
.ii-table tr.ii-bad td { background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.ii-table tr.ii-out td { opacity: .5; }
.ii-why { color: var(--danger); font-size: 12px; margin-top: 3px; }
.kpi .value.neg { color: var(--danger); }

/* Expiry Stock — the store and the clinic shelves, a card per location (Oct 2026) */
.exp-src { display: flex; gap: 6px; flex-wrap: wrap; align-items: center; margin: 8px 0 4px; }
.exp-src .mini-btn.on { background: var(--brand); color: #fff; border-color: var(--brand); }
.chip-x { border: 0; background: transparent; color: inherit; cursor: pointer; padding: 0 0 0 4px; font-size: 11px; }
.exp-locs-wrap { margin: 8px 0 4px; }
.exp-locs-title { font-weight: 600; font-size: 13px; margin: 0 0 6px; }
.exp-locs-title .muted { font-weight: 400; font-size: 12px; }
.exp-locs { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.exp-loc { text-align: left; background: var(--surface); border: 1px solid var(--border); border-left: 4px solid var(--border);
  border-radius: 10px; padding: 8px 10px; cursor: pointer; color: inherit; font: inherit; display: flex; flex-direction: column; gap: 3px; }
.exp-loc:hover { border-color: var(--brand); }
.exp-loc:focus-visible { outline: 2px solid var(--brand); outline-offset: 2px; }
.exp-loc.has-soon { border-left-color: var(--warn); }
.exp-loc.has-exp { border-left-color: var(--danger); }
.exp-loc.on { box-shadow: 0 0 0 2px var(--brand); }
.exp-loc-head { display: flex; gap: 6px; align-items: center; min-width: 0; }
.exp-loc-head b { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.exp-loc-sub { font-size: 11.5px; }
.exp-loc-num { font-size: 20px; font-weight: 700; font-variant-numeric: tabular-nums; }
.exp-loc-num span { font-size: 12px; font-weight: 400; color: var(--muted); }
.exp-loc-chips { display: flex; gap: 4px; flex-wrap: wrap; min-height: 4px; }

/* Clinic Wise Inventory — press a quantity to see where it is (Oct 2026) */
.ci-qty { background: none; border: 0; padding: 0 2px; color: var(--brand); font: inherit; font-weight: 600; cursor: pointer;
  text-decoration: underline dotted; text-underline-offset: 3px; font-variant-numeric: tabular-nums; }
.ci-qty:hover, .ci-qty:focus-visible { text-decoration-style: solid; outline: none; }
.ci-pin { background: none; border: 0; padding: 0; cursor: pointer; font-size: 13px; opacity: .65; }
.ci-pin:hover, .ci-pin:focus-visible { opacity: 1; }
.ci-place { margin: 0 0 10px; padding: 10px 12px; }
.ci-place.on { box-shadow: 0 0 0 2px var(--brand); }
.ci-place-head { display: flex; gap: 10px; flex-wrap: wrap; align-items: baseline; margin: 0 0 6px; }
.ci-src { display: flex; flex-direction: column; gap: 4px; max-height: 220px; overflow: auto; }
.ci-route { margin: 6px 0; padding: 8px 10px; border-radius: 8px; background: var(--surface-2); font-size: 13px; }
.ci-src-wrap { margin: 0 0 8px; }
.ci-src-label { font-size: 12.5px; font-weight: 600; color: var(--muted); margin: 0 0 6px; }
.ci-src-row { display: flex; align-items: center; gap: 10px; padding: 7px 10px; border: 1px solid var(--border); border-radius: 8px; cursor: pointer; }
.ci-src-row input { width: auto; margin: 0; flex: 0 0 auto; }
.ci-src-row span { flex: 1 1 auto; }
.ci-src-row:has(input:checked) { border-color: var(--brand); background: var(--surface-2); }

/* Clinic Wise Inventory — 🧾 All in one / 📍 All locations (Oct 2026) */
.ci-tabs { display: inline-flex; border: 1px solid var(--border); border-radius: 10px; overflow: hidden; background: var(--surface); margin: 0 0 12px; }
.ci-tab { border: 0; background: transparent; color: var(--muted); padding: 8px 16px; font: inherit; font-weight: 600; font-size: 13.5px; cursor: pointer; min-height: 38px; white-space: nowrap; }
.ci-tab + .ci-tab { border-left: 1px solid var(--border); }
.ci-tab.on { background: var(--brand); color: #fff; }
.ci-tab:focus-visible, .ci-sub:focus-visible, .ci-x:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ci-unit { font-size: 11px; }
tr.ci-loc-row { cursor: pointer; }
tr.ci-loc-row:hover > td { background: var(--surface-2); }
tr.ci-loc-row:focus-visible { outline: 2px solid var(--brand); outline-offset: -2px; }
.ci-loc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin: 0 0 12px; }
.ci-loc-head .ci-loc-period { margin-left: auto; }
/* A location's materials: Qty · Rate · Value under each movement (Oct 2026) */
#cdTable th.ci-grp-h { text-align: center; border-bottom: 1px solid var(--border); }
#cdTable .ci-grp-start { border-left: 2px solid var(--border); }
#cdTable th.ci-sub-h { font-size: 11px; }
/* ⚖ Compare locations */
.ci-cmp-locs { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 4px 12px; max-height: 160px; overflow: auto;
  padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); margin-bottom: 8px; }
.ci-flow-table td { vertical-align: top; }
/* ◀ ▶ to the location before / after, and a list to jump (Oct 2026) */
.ci-loc-nav { display: flex; align-items: center; gap: 6px; flex-wrap: wrap; }
.ci-loc-nav:empty { display: none; }
.ci-loc-nav .ci-loc-arrow { min-width: 44px; min-height: 40px; padding: 6px 10px; font-size: 16px; line-height: 1; }
.ci-loc-nav select { min-height: 40px; max-width: 260px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.ci-loc-nav .ci-loc-count { font-size: 12px; white-space: nowrap; }
@media (max-width: 640px) { .ci-loc-nav { width: 100%; } .ci-loc-nav select { flex: 1; min-width: 0; max-width: none; } }
.ci-loc-period { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 10px; }
.ci-loc-period label, .ci-loc-tools label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); font-weight: 600; }
.ci-loc-period input, .ci-loc-period select, .ci-loc-tools select, .ci-loc-tools input:not([type=checkbox]) { min-height: 36px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.ci-subtabs { display: flex; flex-wrap: wrap; gap: 6px; margin: 14px 0 10px; border-bottom: 1px solid var(--border); padding-bottom: 8px; }
.ci-sub { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 999px; padding: 6px 14px; font: inherit; font-size: 13px; font-weight: 600; cursor: pointer; min-height: 34px; }
.ci-sub.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.ci-loc-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 0 0 6px; }
.ci-loc-tools .ci-loc-search { flex: 1 1 200px; }
.ci-loc-tools .ci-loc-search input { width: 100%; box-sizing: border-box; }
.ci-loc-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.ci-ticks { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
.ci-x { border: 1px solid var(--border); background: var(--surface); color: var(--text); border-radius: 6px; padding: 2px 7px; font: inherit; font-size: 12px; cursor: pointer; white-space: nowrap; }
tr.ci-batch-row > td { background: var(--surface-2); padding: 6px 10px 10px 34px; }
.ci-batches table { width: 100%; }
.ci-freq-chips { display: flex; flex-wrap: wrap; gap: 6px; margin: 0 0 12px; }
.ci-legend { display: flex; flex-wrap: wrap; gap: 6px 14px; font-size: 12px; color: var(--muted); margin-top: 4px; }
.ci-legend i { display: inline-block; width: 10px; height: 10px; border-radius: 2px; margin-right: 5px; vertical-align: -1px; }
.ci-colpick { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; margin: 0 0 12px; }
@media (max-width: 640px) {
  .ci-loc-btns { margin-left: 0; }
  .ci-tabs { display: flex; }
  .ci-tab { flex: 1 1 0; padding: 8px 10px; }
  tr.ci-batch-row > td { padding-left: 10px; }
}
.ci-colpick .tick-row { margin: 0; padding: 7px 10px; }
.ci-loc-tools .ci-ticks label { flex-direction: row; align-items: center; gap: 5px; color: var(--text); font-weight: 500; font-size: 13px; }

/* 🗑 Record wastage — why first, the short-expiry list (Oct 2026) */
.wf-exp-tools { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; margin: 0 0 8px; }
.wf-exp-tools label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); font-weight: 600; }
.wf-exp-tools select, .wf-exp-tools .wf-exp-q input { min-height: 36px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.wf-exp-tools .wf-exp-q { flex: 1 1 180px; }
.wf-exp-tools .wf-exp-q input { width: 100%; box-sizing: border-box; }
.wf-exp-tools .wf-all { flex-direction: row; align-items: center; gap: 6px; color: var(--text); font-weight: 500; font-size: 13px; padding-bottom: 8px; }
.wf-exp-tools .wf-all input { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.wf-exp-wrap { max-height: 46vh; overflow: auto; }
.wf-exp-wrap input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
.wf-qty { width: 84px; min-height: 32px; padding: 4px 6px; border: 1px solid var(--border); border-radius: 6px; background: var(--surface); color: var(--text); text-align: right; font: inherit; }
.wf-qty:disabled { opacity: .5; }

/* 🗑 Written off register — filters, views, voucher actions (Oct 2026) */
.wo-filters { display: flex; flex-wrap: wrap; align-items: flex-end; gap: 8px 12px; padding: 10px 14px; border-bottom: 1px solid var(--border); }
.wo-filters label { display: flex; flex-direction: column; gap: 3px; font-size: 12px; color: var(--muted); font-weight: 600; }
.wo-filters input, .wo-filters select { min-height: 36px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; font-size: 13px; }
.wo-filters .wo-q { flex: 1 1 220px; }
.wo-filters .wo-q input { width: 100%; box-sizing: border-box; }
.wo-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 12px; padding: 8px 14px; }
.wo-btns { display: flex; flex-wrap: wrap; gap: 6px; margin-left: auto; }
.wo-filters .wo-btns { margin-left: 0; }
.wo-views { display: inline-flex; gap: 4px; }
.wo-acts { white-space: nowrap; }
.wo-acts .mini-btn + .mini-btn { margin-left: 4px; }
.wo-hist { font-size: 12px; color: var(--muted); border: 1px solid var(--border); border-radius: 8px; padding: 8px 10px; margin: 0 0 10px; }
.wo-hist strong { color: var(--text); display: block; margin-bottom: 4px; }
#swTable input[type="checkbox"] { width: 18px; height: 18px; margin: 0; accent-color: var(--brand); }
@media (max-width: 640px) { .wo-btns { margin-left: 0; } }

/* Clinic Wise Inventory → All in one (Oct 2026): closing stock per branch, quantities in
   red, a ▾ filter on every heading, and a ▸ row of every place an item sits. */
.ci-aio .ci-card .ci-aio-search { flex: 2 1 280px; }
.ci-aio .ci-card .fc-field { flex: 1 1 170px; }
.ci-aio .ci-card .ci-aio-avail { flex: 1 1 230px; }
.ci-aio-chips { display: flex; flex-wrap: wrap; gap: 6px; padding: 0 18px 12px; }
.ci-aio-chips:empty { display: none; }
.ci-aio-chip button { border: 0; background: none; color: inherit; cursor: pointer; padding: 0 0 0 4px; font: inherit; }
.ci-aio-qty, .ci-aio .ci-qty { color: var(--danger); font-weight: 700; font-variant-numeric: tabular-nums; }
.ci-aio .ci-qty { background: none; border: 0; padding: 0; cursor: pointer; text-decoration: underline dotted; font: inherit; font-weight: 700; }
.ci-aio-zero { opacity: .55; font-weight: 600; }
.ci-aio-rooms { display: block; font-size: 11px; white-space: nowrap; }
.ci-aio-table td.num, .ci-aio-table th.num { text-align: right; }
.ci-hcell { display: inline; }
.ci-hcell .ci-hf { margin-left: 3px; vertical-align: middle; }
.ci-hf { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 6px; width: 22px; height: 22px;
  padding: 0; font-size: 11px; line-height: 1; cursor: pointer; }
.ci-hf:hover, .ci-hf:focus-visible { color: var(--brand); border-color: var(--brand); outline: none; }
.ci-hf.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.ci-aio-x { border: 1px solid var(--border); background: var(--surface-2); border-radius: 6px; width: 24px; height: 24px; padding: 0;
  cursor: pointer; color: var(--text); font-size: 11px; }
.ci-aio-x[aria-expanded="true"] { background: var(--brand); color: #fff; border-color: var(--brand); }
.ci-aio mark { background: color-mix(in srgb, var(--warn) 35%, transparent); color: inherit; border-radius: 3px; padding: 0 1px; }
.ci-aio-sub > td { background: var(--surface-2); padding: 10px 14px !important; }
.ci-aio-where { display: flex; flex-direction: column; gap: 8px; }
.ci-aio-subt { width: 100%; border-collapse: collapse; font-size: 12.5px; background: var(--surface); border: 1px solid var(--border); border-radius: 8px; }
.ci-aio-subt th, .ci-aio-subt td { padding: 5px 8px; border-bottom: 1px solid var(--border); text-align: left; }
.ci-aio-subt .num { text-align: right; }
.ci-aio-where-foot { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; }
.ci-aio-expired { color: var(--danger); font-weight: 600; }
.ci-aio-soon { color: var(--warn); font-weight: 600; }
.ci-hpop { position: fixed; z-index: 46; background: var(--surface); color: var(--text); border: 1px solid var(--border); border-radius: 10px;
  box-shadow: var(--shadow); padding: 10px; display: flex; flex-direction: column; gap: 8px; font-size: 13px; }
.ci-hpop-head { font-weight: 700; }
.ci-hpop-sort, .ci-hpop-btns { display: flex; gap: 6px; }
.ci-hpop-sort .btn, .ci-hpop-btns .btn { flex: 1; padding: 6px 8px; font-size: 12.5px; }
.ci-hpop-find, .ci-hpop-range input { width: 100%; padding: 6px 8px; border: 1px solid var(--border); border-radius: 6px;
  background: var(--surface); color: var(--text); font: inherit; }
.ci-hpop-list { max-height: 220px; overflow: auto; display: flex; flex-direction: column; gap: 2px; border: 1px solid var(--border);
  border-radius: 6px; padding: 4px 6px; }
.ci-hpop-list label, .ci-hpop-all, .ci-hpop-modes label { display: flex; align-items: center; gap: 6px; cursor: pointer; }
.ci-hpop-list label[hidden] { display: none; }
.ci-hpop-list small { margin-left: auto; }
.ci-hpop-list input, .ci-hpop-all input, .ci-hpop-modes input { width: auto; margin: 0; }
.ci-hpop-modes { display: flex; gap: 12px; flex-wrap: wrap; }
.ci-hpop-range { display: flex; gap: 8px; }
.ci-hpop-range label { flex: 1; display: flex; flex-direction: column; gap: 2px; font-size: 12px; color: var(--muted); }
@media (max-width: 640px) {
  .ci-aio-subt thead { display: none; }
  .ci-aio-subt tr { display: block; border-bottom: 1px solid var(--border); padding: 4px 0; }
  .ci-aio-subt td { display: flex; justify-content: space-between; gap: 10px; border: 0; }
  .ci-aio-subt td::before { content: attr(data-label); color: var(--muted); font-size: 12px; }
}
.ci-aio-table th, .ci-aio-table td { padding: 8px 7px; }
.ci-aio-table th { font-size: 10.5px; }
.ci-aio-table td[data-label="Item"] { min-width: 170px; }
.ci-aio-table td[data-label="Code"] { white-space: nowrap; }
.ci-aio-table td[data-label="Item"] .ci-aio-x { margin-right: 4px; vertical-align: middle; }
.ci-hf { width: 18px; height: 18px; font-size: 9px; }
/* All locations list: "has a value in" ticks, ✕ to take a row off for now, the column card */
.cl-has-row { align-items: center; }
.cl-has { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 14px; flex: 1 1 520px; }
.cl-has-mode { flex: 0 1 260px; }
.cl-x-col { width: 34px; text-align: center; }
.cl-x { border: 1px solid var(--border); background: var(--surface); color: var(--muted); border-radius: 6px; width: 24px; height: 24px;
  padding: 0; cursor: pointer; font-size: 12px; line-height: 1; }
.cl-x:hover, .cl-x:focus-visible { color: var(--danger); border-color: var(--danger); outline: none; }
.cl-cols-grid { display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 4px 12px; }
.cl-cols-btns { display: flex; flex-wrap: wrap; gap: 8px; justify-content: flex-end; margin-top: 14px; }
@media (max-width: 640px) { #clTable tfoot { display: none; } .cl-has-mode { flex: 1 1 100%; } }
/* The location's name stands out (the owner, Oct 2026: "the goodown name make it highlighted ...
   identifiable font size with different look"). */
/* The location's heading (the owner, Oct 2026: "change the look how location name display on
   interface"): a card of its own across the screen — a coloured icon tile by kind, the name large
   in the text colour, its code as a badge, the branch and the period as chips. */
.ci-loc-title { --lk: var(--brand); display: flex; align-items: center; gap: 16px; margin: 0 0 12px; padding: 16px 20px;
  background: var(--surface); border: 1px solid var(--border); border-radius: 16px; box-shadow: var(--shadow);
  border-top: 4px solid var(--lk); min-width: 0; }
.ci-loc-title.ci-lk-store { --lk: var(--accent); }
.ci-loc-title.ci-lk-chair { --lk: var(--success); }
.ci-loc-title.ci-lk-company { --lk: var(--warn); }
.ci-loc-icon { flex: 0 0 auto; width: 56px; height: 56px; border-radius: 14px; display: grid; place-items: center; font-size: 28px;
  background: color-mix(in srgb, var(--lk) 14%, var(--surface)); border: 1px solid color-mix(in srgb, var(--lk) 30%, var(--border)); }
.ci-loc-txt { min-width: 0; flex: 1 1 auto; }
.ci-loc-kicker { font-size: 11.5px; font-weight: 700; letter-spacing: .08em; text-transform: uppercase; color: color-mix(in srgb, var(--lk) 75%, var(--text)); }
.ci-loc-name { margin: 0; font-size: 24px; line-height: 1.2; font-weight: 800; letter-spacing: -.01em; color: var(--text);
  display: flex; flex-wrap: wrap; align-items: center; gap: 4px 10px; overflow-wrap: anywhere; }
.ci-loc-code { font-size: 13px; font-weight: 700; color: color-mix(in srgb, var(--lk) 80%, var(--text));
  background: color-mix(in srgb, var(--lk) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--lk) 35%, var(--border));
  border-radius: 8px; padding: 2px 9px; letter-spacing: .05em; font-variant-numeric: tabular-nums; }
.ci-loc-meta { margin-top: 8px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 8px; }
.ci-loc-chip { display: inline-flex; align-items: center; gap: 5px; font-size: 12.5px; color: var(--muted); background: var(--surface-2);
  border: 1px solid var(--border); border-radius: 999px; padding: 3px 11px; }
.ci-loc-branch { font-weight: 700; color: var(--text); }
#cdTable td.ci-val, #cdTable th.ci-val, #cmTable td.ci-val, #cmTable th.ci-val { background: color-mix(in srgb, var(--brand) 5%, transparent); }
@media (max-width: 640px) { .ci-loc-name { font-size: 20px; } .ci-loc-title { padding: 12px 14px; gap: 12px; } .ci-loc-icon { width: 44px; height: 44px; font-size: 22px; } #cdTable tfoot { display: none; } }
#cdTable td.ci-val .ci-v, #cmTable td.ci-val .ci-v, #cmpTable .ci-v { display: block; font-size: 11px; color: var(--muted); font-weight: 600; white-space: nowrap; }
#cdTable td[data-label="Code"] { white-space: nowrap; }

/* 📦 Opening stock per store / location (Oct 2026) */
.os-place-now { margin: 6px 0 10px; padding: 8px 12px; border-left: 4px solid var(--brand); background: var(--surface-2); border-radius: 8px; }
.os-miss { display: grid; gap: 6px; margin-bottom: 8px; }
.os-table { max-height: 46vh; }
.os-up { color: var(--success); font-weight: 600; }
.os-down { color: var(--danger); font-weight: 600; }
.os-zero td { color: var(--muted); }
.os-warn { color: var(--warn); font-size: 12px; margin-top: 2px; }


/* Stock Transfer - Branch narrowed to the header's branch (Oct 2026) */
.stx-scope { margin: 0 0 12px; padding: 8px 12px; border-left: 4px solid var(--brand); border-radius: 8px;
  background: color-mix(in srgb, var(--brand) 8%, var(--surface)); font-size: 12.5px; }

/* GRN register — GRN wise / Item wise switch and the item-wise find box (Oct 2026). */
.grn-view-bar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; justify-content: space-between; margin: 0 0 10px; }
.grn-view-sw { display: inline-flex; gap: 6px; flex-wrap: wrap; }
.grn-item-find { display: inline-flex; gap: 6px; align-items: center; flex: 1 1 260px; justify-content: flex-end; }
.grn-item-find input { flex: 1 1 220px; max-width: 360px; min-width: 0; padding: 9px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); color: inherit; font: inherit; font-size: 14px; }
.grn-item-find input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }
.grn-items-table td.num, .grn-items-table th.num { white-space: nowrap; }
#grnItemsHost[hidden] { display: none; }
[data-pendopen], .inv-pend { white-space: nowrap; }

/* Stock Overview's tools as a ribbon (the owner, Oct 2026: "keep this all button on different
   design of ribbon that can easily access") — grouped, icon above the word, a caption per group. */
.inv-ribbon { display: flex; flex-wrap: wrap; align-items: stretch; margin: 4px 0 14px; background: var(--surface);
  border: 1px solid var(--border); border-radius: 12px; box-shadow: var(--shadow); overflow: hidden; }
.rb-group { display: flex; flex-direction: column; padding: 6px 6px 0; border-right: 1px solid var(--border); }
.rb-group:last-child { border-right: 0; }
.rb-btns { display: flex; gap: 2px; flex: 1; align-items: stretch; }
.rb-btn { display: flex; flex-direction: column; align-items: center; justify-content: flex-start; gap: 5px;
  min-width: 78px; max-width: 116px; padding: 8px 8px 7px; border: 1px solid transparent; border-radius: 9px;
  background: transparent; color: var(--text); font: inherit; font-size: 12px; font-weight: 600; line-height: 1.2;
  text-align: center; cursor: pointer; transition: background-color .12s, border-color .12s; }
.rb-btn:hover { background: var(--surface-2); border-color: var(--border); }
.rb-btn:focus-visible { outline: 2px solid var(--brand); outline-offset: 1px; }
.rb-btn:disabled { opacity: .55; cursor: progress; }
.rb-ic { font-size: 22px; line-height: 1; }
.rb-btn.primary { background: color-mix(in srgb, var(--brand) 13%, transparent); color: var(--brand);
  border-color: color-mix(in srgb, var(--brand) 38%, transparent); }
.rb-btn.primary:hover { background: color-mix(in srgb, var(--brand) 20%, transparent); }
.rb-btn.warn { border-color: color-mix(in srgb, var(--warn) 45%, transparent); }
.rb-btn .chip { margin-left: 3px; padding: 1px 6px; font-size: 10.5px; }
.rb-cap { margin-top: 4px; padding: 4px 0 5px; border-top: 1px dashed var(--border); color: var(--muted);
  font-size: 10.5px; font-weight: 600; letter-spacing: .06em; text-transform: uppercase; text-align: center; }
@media (max-width: 640px) {
  .inv-ribbon { flex-wrap: nowrap; overflow-x: auto; }
  .rb-group { flex: 0 0 auto; }
  .rb-btn { min-width: 66px; font-size: 11px; }
  .rb-ic { font-size: 20px; }
}
/* The item card's other descriptions and the pages the web search found (Oct 2026). */
.so-more { margin: 8px 0 0; }
.so-more summary { cursor: pointer; font-weight: 600; font-size: 12.5px; color: var(--brand); }
.so-more-item { margin: 6px 0 0; padding: 6px 0 0; border-top: 1px dashed var(--border); }
.so-more-item p { margin: 0 0 2px; }
.so-more ul { margin: 6px 0 0 18px; padding: 0; font-size: 12.5px; }
.so-more li { margin: 2px 0; overflow-wrap: anywhere; }
/* The ribbon shows only the buttons chosen (Oct 2026). */
.rb-btn[hidden], .rb-group[hidden] { display: none; }
.rb-custom-group { margin-left: auto; border-left: 1px solid var(--border); }
.rb-custom-group .rb-btn { color: var(--muted); }
.rb-pick { display: grid; grid-template-columns: repeat(auto-fit, minmax(170px, 1fr)); gap: 12px; }
.rb-pick-group .rb-cap { border-top: 0; margin: 0 0 4px; padding: 0; text-align: left; }
.rb-tick { margin: 4px 0; }

/* The Inventory Dashboard as windows (Oct 2026). */
.dash-mode-bar { margin: 16px 0 10px; }
.dash-mode { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; }
.dash-hint { font-size: 12px; }
.dash-desk .fwin-body > .panel { border: 0; box-shadow: none; margin: 0; padding: 0; background: transparent; }
.dash-stacked .dash-stack-panel { margin-top: 16px; }
.dash-stacked .dash-stack-panel > .panel { border: 0; box-shadow: none; margin: 0; padding: 0; }
/* The payment windows. */
.pay-sum { display: flex; flex-wrap: wrap; gap: 8px; align-items: center; margin: 0 0 8px; font-size: 12.5px; }
.pay-table td { vertical-align: top; }
.pay-table .pay-group td { background: var(--surface-2); font-weight: 700; font-size: 11.5px; letter-spacing: .04em; text-transform: uppercase; color: var(--muted); }
.pay-poked { font-size: 11.5px; margin-top: 3px; }
.mini-btn.danger-btn { color: var(--danger); border-color: color-mix(in srgb, var(--danger) 45%, transparent); }
.mini-btn.danger-btn:hover { background: color-mix(in srgb, var(--danger) 10%, transparent); }
/* Clinic Wise Inventory → 🏷 Tagged */
.ct-views { display: flex; flex-wrap: wrap; gap: 6px; }
#ctTable td.num, #ctTable td .chip, #ctTable td .linklike { white-space: nowrap; }
#ctTable .ct-tog { text-decoration: none; font-weight: 700; padding: 0 4px; }
#ctTable .ct-subwrap > td { padding: 0 0 8px 22px; background: var(--surface-2); }
#ctTable .ct-subtable { margin: 0; background: var(--surface); }
#ctTable .ct-subtable th { background: var(--surface-2); }

/* 👀 Peep — a material's branches, suppliers and a draft PO (Oct 2026) */
.chip.inv-peep { cursor: pointer; border: 0; font: inherit; font-size: 12px; }
.chip.inv-peep:hover { filter: brightness(0.95); text-decoration: underline; }
.peep-h { margin: 14px 0 6px; font-size: 14px; }
tr.peep-here td { background: color-mix(in srgb, var(--brand) 8%, transparent); }
.peep-form { margin-top: 14px; padding: 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.peep-merge { margin-bottom: 12px; }

/* 🔁 Convert one item into another (Stock Overview, Oct 2026) */
.cv-to { display: flex; gap: 8px; align-items: center; }
.cv-to input { flex: 1; min-width: 0; padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); }
.cv-to-info { margin: 6px 0 4px; min-height: 1em; }
.cv-grid { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: 0 12px; }
.cv-sum { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: 8px; margin: 8px 0; padding: 10px 12px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.cv-sum > div { display: flex; flex-direction: column; gap: 2px; font-size: 13px; }
.cv-sum > div strong { font-variant-numeric: tabular-nums; }
.cv-sum > .muted, .cv-sum > span { grid-column: 1 / -1; }
@media (max-width: 640px) {
  .cv-grid, .cv-sum { grid-template-columns: 1fr 1fr; }
  .cv-to { flex-wrap: wrap; }
}

/* Stock Overview summary cards — arranged, then locked (Oct 2026) */
.inv-card-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: 0 0 6px; font-size: 12px; }
.inv-card-bar .inv-card-bar-btns { margin-left: auto; display: flex; gap: 6px; }
.kpi-grid.inv-kpis.arranging .kpi { border: 1.5px dashed var(--border); cursor: grab; position: relative; }
.kpi-grid.inv-kpis .inv-card-arr.dragging { opacity: .45; }
.kpi-grid.inv-kpis .inv-card-arr.drop-before { box-shadow: inset 3px 0 0 var(--brand); }
.kpi-grid.inv-kpis .inv-card-arr.drop-after { box-shadow: inset -3px 0 0 var(--brand); }
.inv-card-ctl { display: flex; gap: 4px; margin-top: 6px; }
.inv-card-ctl .mini-btn { padding: 2px 6px; }

/* A login working outside its home branch (Oct 2026): the header picker says so. */
#branchSelect.branch-off-home { border-color: var(--warn); box-shadow: 0 0 0 2px color-mix(in srgb, var(--warn) 35%, transparent); }

/* A material's movements card (Oct 2026): From · To · Apply · All time on one
   line, inside the modal — no outer margin, no shadow. */
.im-filter { margin: 0 0 12px; box-shadow: none; }
.im-filter .ci-row { padding: 12px 14px; }

/* One opening-stock upload in full (Oct 2026) */
.os-view-facts { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 0 0 12px; }
.os-view-facts .btn { margin-left: auto; }
.os-view-kpis { margin: 0 0 10px; }
.os-view-filter { margin: 4px 0 10px; box-shadow: none; }
.os-view-filter .ci-row { padding: 10px 14px; align-items: flex-end; }
.os-view-empty { margin: 0 0 6px; }
.os-view-q { flex: 1 1 260px; }
.os-view-table { max-height: 58vh; }
.os-view-table td { white-space: nowrap; }
.os-view-table td:nth-last-child(1), .os-view-table td:nth-last-child(7) { white-space: normal; min-width: 180px; }
.os-up { color: var(--success); font-weight: 600; }
.os-down { color: var(--danger); font-weight: 600; }
.os-view tr.os-r-out td { opacity: .7; }
@media (max-width: 640px) { .os-view-facts .btn { margin-left: 0; } }
.os-view-kpis .kpi .value { font-size: 20px; white-space: nowrap; }

/* Inventory Dashboard — a graph's point opens what made it (Oct 2026) */
.tr-drill .tr-hit { cursor: pointer; }
.tr-tip-go { display: block; margin-top: 4px; font-style: normal; font-size: 11px; color: var(--brand); }
.trd-head { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 14px; margin: 0 0 10px; }
.trd-head .tr-dot { width: 12px; height: 12px; }
.trd-total { font-size: 18px; font-weight: 700; margin-left: auto; }
.trd-nav { display: flex; gap: 6px; }
.trd-filter { margin: 4px 0 10px; box-shadow: none; }
.trd-filter .ci-row { padding: 10px 14px; align-items: flex-end; }
.trd-q { flex: 1 1 260px; }
.trd-table { max-height: 58vh; }
@media (max-width: 640px) { .trd-total { margin-left: 0; width: 100%; } }

/* Inventory Reports (Oct 2026) — catalogue on the left, the report on the right */
.ivr { display: grid; grid-template-columns: 290px minmax(0, 1fr); gap: 16px; align-items: start; }
.ivr > * { min-width: 0; }
.ivr input[type=search] { padding: 8px 10px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.ivr-filters .fc-field { min-width: 0; }
.ivr-filters input, .ivr-filters select { max-width: 100%; }
.ivr-side { position: sticky; top: calc(var(--topbar-h, 64px) + 8px); max-height: calc(100vh - var(--topbar-h, 64px) - 24px); overflow: auto; padding: 12px; }
.ivr-side input[type=search] { width: 100%; margin-bottom: 10px; }
.ivr-sub { font-size: 11px; text-transform: uppercase; letter-spacing: .05em; margin: 6px 0 4px; }
.ivr-cat { border-top: 1px solid var(--border); }
.ivr-cat-h { display: flex; justify-content: space-between; gap: 8px; width: 100%; padding: 9px 4px; background: none; border: 0; color: var(--text); font-weight: 600; text-align: left; cursor: pointer; font-size: 13px; }
.ivr-cat-list { display: none; padding: 0 0 8px; }
.ivr-cat.open .ivr-cat-list { display: block; }
.ivr-rep { display: block; width: 100%; text-align: left; padding: 6px 8px; margin: 1px 0; border: 0; border-radius: 6px; background: none; color: var(--text); cursor: pointer; font-size: 12.5px; }
.ivr-rep:hover { background: var(--surface-2); }
.ivr-rep.on { background: color-mix(in srgb, var(--brand) 14%, transparent); color: var(--brand); font-weight: 600; }
.ivr-recent { margin-bottom: 8px; }
.ivr-side-foot { border-top: 1px solid var(--border); padding-top: 10px; margin-top: 6px; font-size: 12px; }
.ivr-head { display: flex; flex-wrap: wrap; justify-content: space-between; gap: 10px; align-items: flex-start; margin-bottom: 10px; }
.ivr-head h3 { margin: 0 0 2px; }
.ivr-head p { margin: 0; }
.ivr-out-btns { display: flex; gap: 6px; flex-wrap: wrap; }
.ivr-filters { margin-bottom: 12px; box-shadow: none; }
.ivr-filters .ci-row { padding: 12px 14px 6px; align-items: flex-end; flex-wrap: wrap; }
.ivr-filters .ivr-wide { flex: 1 1 260px; }
.ivr-branch { padding: 0 14px 10px; font-size: 12px; }
.ivr-meta { margin: 0 0 10px; font-size: 13px; }
.ivr-kpis { margin-bottom: 10px; }
.ivr-kpis .kpi .value { font-size: 20px; }
.ivr-ban { padding: 8px 12px; border-radius: 8px; background: var(--surface-2); margin: 0 0 8px; font-size: 12.5px; }
.ivr-miss { background: color-mix(in srgb, var(--warn) 14%, transparent); }
.ivr-est { background: color-mix(in srgb, var(--accent, var(--brand)) 14%, transparent); font-weight: 600; }
.ivr-chart { margin: 4px 0 12px; }
.ivr-tablebar { display: flex; flex-wrap: wrap; gap: 10px; align-items: center; margin: 0 0 8px; }
.ivr-tablebar input[type=search] { flex: 1 1 220px; }
.ivr-pager { display: flex; gap: 6px; align-items: center; margin-left: auto; }
.ivr-table { max-height: 66vh; }
.ivr-table th[data-ivsort] { cursor: pointer; user-select: none; }
.ivr-table tr.ivr-link { cursor: pointer; }
.ivr-table tr.ivr-link:hover td { background: var(--surface-2); }
.ivr-go { color: var(--brand); font-weight: 600; }
.ivr-welcome { text-align: left; }
@media (max-width: 900px) {
  .ivr { grid-template-columns: 1fr; }
  .ivr-side { position: static; max-height: none; }
  .ivr-filters .ci-row > * { flex: 1 1 100%; }
  .ivr-pager { margin-left: 0; }
}

/* 🔎 Find a material — the stock columns (Oct 2026): nothing in stock reads red */
.br-zero { color: var(--danger); font-weight: 600; }
.irn-br-filters .field select { min-width: 0; }
.irn-else { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-top: 4px; font-size: 12.5px; }
.irn-else[hidden] { display: none; }

/* 🧭 IRN Route (Oct 2026): every step a material took from the store to the clinic room. */
.irn-route-list { display: flex; flex-direction: column; gap: 10px; }
.panel.irn-route { padding: 12px 14px; border-left: 4px solid var(--brand); }
.panel.irn-route.awaiting { border-left-color: var(--warn); }
.irn-route-head { display: flex; justify-content: space-between; gap: 10px; flex-wrap: wrap; align-items: flex-start; }
.route-steps { list-style: none; margin: 10px 0 0; padding: 0; display: grid; grid-template-columns: repeat(auto-fill, minmax(190px, 1fr)); gap: 8px; }
.route-steps li { display: flex; gap: 8px; align-items: flex-start; padding: 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface-2); font-size: 12.5px; }
.route-steps li.done { border-color: color-mix(in srgb, var(--success) 45%, var(--border)); }
.route-steps li.todo { opacity: .75; }
.route-steps .rs-dot { flex: none; width: 20px; height: 20px; border-radius: 50%; display: inline-flex; align-items: center; justify-content: center;
  font-size: 12px; background: var(--surface); border: 1px solid var(--border); }
.route-steps li.done .rs-dot { background: var(--success); color: #fff; border-color: var(--success); }
.cops-tagp h4 { margin: 0 0 6px; }
.tick-inline { display: inline-flex !important; flex-direction: row !important; align-items: center; gap: 6px; font-size: 12.5px; }
.tick-inline input[type="checkbox"] { width: 16px !important; height: 16px; min-height: 0; margin: 0; flex: none; padding: 0; }

/* IRN dashboard — a pending material the store can supply now (Oct 2026): light green. */
tr.row-ready > td { background: color-mix(in srgb, var(--success) 13%, var(--surface)); }
tr.row-ready.part > td { background: color-mix(in srgb, var(--success) 7%, var(--surface)); }
tr.row-ready > td:first-child { box-shadow: inset 4px 0 0 var(--success); }
tr.row-ready:hover > td { background: color-mix(in srgb, var(--success) 20%, var(--surface)); }
.ready-chip { margin-top: 3px; font-size: 11px; white-space: nowrap; }

/* Expiry Stock — how close a batch is to its expiry day (Oct 2026). */
.exp-bar { margin-top: 5px; width: 110px; max-width: 100%; height: 7px; border-radius: 99px;
  background: color-mix(in srgb, var(--muted) 18%, transparent); overflow: hidden; }
.exp-bar > span { display: block; height: 100%; border-radius: 99px; }
.exp-bar.green > span { background: var(--success); }
.exp-bar.amber > span { background: var(--warn); }
.exp-bar.red > span { background: var(--danger); }
.exp-bar.exp > span { background: repeating-linear-gradient(45deg, var(--danger) 0 6px,
  color-mix(in srgb, var(--danger) 70%, #000) 6px 12px); }

/* Stock Transfer - Branch — Create Request on the left, planning tabs on the right (Oct 2026). */
.stx-actions { display: flex; justify-content: space-between; align-items: center; gap: 10px; flex-wrap: wrap; margin: 4px 0 10px; }
.stx-create { display: inline-flex; align-items: center; gap: 9px; border: 0; border-radius: 999px; padding: 7px 18px 7px 7px;
  min-height: 42px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer; color: #fff;
  background: linear-gradient(135deg, #f59e0b, #ea580c); box-shadow: 0 3px 10px color-mix(in srgb, #ea580c 35%, transparent); }
.stx-create-ic { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: #fff; color: #ea580c; font-size: 18px; font-weight: 800; line-height: 1; }
.stx-create:hover:not(:disabled) { filter: brightness(1.06); }
.stx-create:disabled { opacity: .45; cursor: not-allowed; box-shadow: none; }
.stx-create.on { box-shadow: 0 0 0 3px color-mix(in srgb, #ea580c 40%, transparent), 0 3px 10px color-mix(in srgb, #ea580c 35%, transparent); }
.stx-create:focus-visible, .stx-plan-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.stx-plan { display: inline-flex; gap: 4px; padding: 4px; border-radius: 12px; border: 1px solid color-mix(in srgb, var(--accent) 45%, var(--border));
  background: color-mix(in srgb, var(--accent) 8%, var(--surface)); }
.stx-plan-btn { border: 0; background: transparent; color: var(--accent); font: inherit; font-weight: 600; font-size: 13px;
  padding: 6px 12px; border-radius: 9px; cursor: pointer; min-height: 34px; white-space: nowrap; }
.stx-plan-btn:hover { background: color-mix(in srgb, var(--accent) 14%, transparent); }
.stx-plan-btn.on { background: var(--accent); color: #fff; }
@media (max-width: 640px) { .stx-plan { flex: 1 1 100%; } .stx-plan-btn { flex: 1 1 0; white-space: normal; } }

/* Goods Received - GRN — ⬇ Export ▾ (Excel / CSV), Oct 2026. */
.grn-export { position: relative; display: inline-flex; margin-left: auto; }
.grn-export-menu { position: absolute; right: 0; top: calc(100% + 4px); z-index: 30; display: flex; flex-direction: column;
  min-width: 170px; padding: 4px; background: var(--surface); border: 1px solid var(--border); border-radius: 10px; box-shadow: var(--shadow); }
.grn-export-menu[hidden] { display: none; }
.grn-export-menu button { text-align: left; border: 0; background: transparent; color: var(--text); font: inherit;
  padding: 8px 10px; border-radius: 7px; cursor: pointer; }
.grn-export-menu button:hover, .grn-export-menu button:focus-visible { background: var(--surface-2); outline: none; }

/* Account pickers search as you type — General Ledger, journals (Oct 2026) */
.acct-combo input.acct-q { width: 100%; box-sizing: border-box; padding: 9px 36px 9px 12px; font: inherit; font-size: 13.5px;
  border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); }
.acct-combo input.acct-q:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 16%, transparent); }
.acct-clear { position: absolute; right: 6px; top: 50%; transform: translateY(-50%);
  border: none; background: var(--surface-2); color: var(--muted); border-radius: 50%;
  width: 24px; height: 24px; cursor: pointer; line-height: 1; }
.acct-clear[hidden] { display: none; }
.acct-clear:hover { color: var(--text); }
.acct-combo .tx-list { max-height: 360px; min-width: min(380px, 86vw); }
.acct-item > span { white-space: normal; }
.acct-sub { display: block; font-size: 11.5px; margin-top: 1px; }
.acct-item.on { background: color-mix(in srgb, var(--brand) 14%, transparent); }
.acct-item.off { opacity: .55; cursor: not-allowed; }
.acct-item.off .acct-sub { color: var(--warn); }
.gl-glacct { flex: 1 1 320px; justify-content: flex-end; }
.gl-acct-combo { width: min(440px, 100%); }
@media (max-width: 640px) { .gl-glacct { flex-basis: 100%; } .gl-acct-combo { width: 100%; } }

/* AP aging, supplier by supplier (Oct 2026) */
.apag-acct { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; flex-wrap: wrap; padding: 14px 16px; margin-bottom: 12px; border-left: 4px solid var(--brand); }
.apag-tie { display: grid; gap: 4px; text-align: right; font-size: 13.5px; }
.apag-pays { display: grid; grid-template-columns: repeat(auto-fit, minmax(220px, 1fr)); gap: 10px; margin-bottom: 12px; }
.apag-pays .kpi .label { white-space: normal; }
.apag-bar { flex-wrap: wrap; gap: 8px; margin: 12px 0 10px; align-items: center; }
.apag-bar .seg { display: inline-flex; gap: 4px; }
.apag-table td.num, .apag-table th.num { text-align: right; font-variant-numeric: tabular-nums; }
.apag-table tr.apag-sup td { border-top: 1px solid var(--border); }
.apag-table tr.apag-sub > td { background: var(--surface-2); padding-top: 4px; padding-bottom: 10px; }
.apag-table tfoot td { border-top: 2px solid var(--border); }
.apag-bills { font-size: 12.5px; }
.apag-bills td.num, .apag-bills th.num { text-align: right; font-variant-numeric: tabular-nums; }
@media (max-width: 640px) { .apag-tie { text-align: left; } .apag-bar .seg { margin-left: 0 !important; } }
.apag .kpi .value { font-size: 22px; white-space: nowrap; }
.apag-bar input[type="search"] { padding: 9px 12px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; }
.apag-bar input[type="search"]:focus { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.apag-link { color: var(--brand); text-decoration: none; }
.apag-link:hover { text-decoration: underline; }

/* Patient merge preview — both twins carry allergies / medical notes (CRM audit P3). */
.merge-join { margin-top: 8px; padding: 8px 10px; border: 1px solid var(--warn); border-left-width: 4px; border-radius: 8px; background: color-mix(in srgb, var(--warn) 8%, var(--surface)); font-size: 13px; }
.merge-join div { margin-top: 3px; overflow-wrap: anywhere; }
.merge-join.blocked { border-color: var(--danger); background: color-mix(in srgb, var(--danger) 8%, var(--surface)); }
.merge-join .mj-block { color: var(--danger); }

/* Attendance — a late arrival reads Present with a small late note (Oct 2026). */
.att-late-note { color: var(--warn); font-weight: 600; }

/* A portal date-of-birth change waiting for the desk (CRM audit). */
.pd-dob-req { margin: 12px 0 0; padding: 10px 14px; border: 1px solid var(--warn); border-left-width: 4px;
  border-radius: 10px; background: color-mix(in srgb, var(--warn) 9%, var(--surface)); font-size: 13.5px; line-height: 1.5; }
.pd-dob-acts { display: inline-flex; gap: 6px; margin-left: 8px; vertical-align: middle; }

/* DSD Excellence → Case workflow: search by patient above the table */
.dsd-case-find { display: flex; gap: 10px; align-items: center; flex-wrap: wrap; margin: 0 0 8px; }
.dsd-case-find input { flex: 1 1 260px; max-width: 420px; padding: 8px 12px; border: 1px solid var(--border);
  border-radius: 10px; background: var(--surface); color: var(--text); font: inherit; }
.dsd-case-find input:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 18%, transparent); }

/* ---- Quick packages from the tooth window: Implant / All-on-X / Aligners (Oct 2026) ---- */
.kit-bar { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; margin: 0 0 12px; padding: 8px 10px;
  border: 1px dashed var(--border); border-radius: 12px; background: var(--surface-2); }
.kit-bar-cap { font-size: 12px; color: var(--muted); font-weight: 600; text-transform: uppercase; letter-spacing: .04em; margin-right: 4px; }
.kit-open { display: inline-flex; align-items: center; gap: 6px; padding: 8px 14px; min-height: 40px; border-radius: 10px;
  border: 1px solid var(--border); background: var(--surface); color: var(--text); font-weight: 600; cursor: pointer; }
.kit-open span { font-size: 18px; line-height: 1; }
.kit-open:hover, .kit-open:focus-visible { border-color: var(--brand); outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 22%, transparent); }
.kit-row { margin: 0 0 12px; }
.kit-cap { font-weight: 700; font-size: 13px; margin: 0 0 6px; }
.kit-cap small { font-weight: 400; color: var(--muted); margin-left: 4px; }
.kit-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(150px, 1fr)); gap: 8px; }
.kit-tile { position: relative; display: flex; flex-direction: column; align-items: flex-start; gap: 3px; text-align: left;
  padding: 10px 12px; min-height: 58px; border-radius: 10px; border: 1.5px solid var(--border); background: var(--surface);
  color: var(--text); cursor: pointer; font: inherit; }
.kit-tile b { font-size: 13px; font-weight: 600; line-height: 1.25; }
.kit-tile span { font-size: 12.5px; color: var(--muted); font-variant-numeric: tabular-nums; }
.kit-tile i { font-style: normal; font-size: 10.5px; color: var(--brand); font-weight: 600; }
.kit-tile.match { border-style: dashed; }
.kit-tile:hover { border-color: var(--brand); }
.kit-tile:focus-visible { outline: none; box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 25%, transparent); }
.kit-tile.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 12%, var(--surface)); }
.kit-tile.on::after { content: "✓"; position: absolute; top: 6px; right: 8px; color: var(--brand); font-weight: 800; }
.kit-tile.on span { color: var(--text); }
.kit-tile:disabled { opacity: .45; cursor: not-allowed; }
.kit-total { margin: 4px 0 12px; padding: 10px 12px; border-radius: 10px; background: var(--surface-2); }
.kit-sum { display: flex; flex-direction: column; gap: 3px; font-size: 13px; }
.kit-sum span { display: flex; justify-content: space-between; gap: 12px; }
.kit-sum b { font-weight: 600; font-variant-numeric: tabular-nums; white-space: nowrap; }
.kit-grand { margin: 8px 0 4px; font-size: 14px; text-align: right; font-variant-numeric: tabular-nums; }
.kit-grand strong { font-size: 17px; color: var(--brand); white-space: nowrap; }
.kit-tabs { display: flex; gap: 6px; margin: 0 0 12px; flex-wrap: wrap; }
.kit-tab { padding: 8px 16px; min-height: 38px; border-radius: 999px; border: 1px solid var(--border); background: var(--surface);
  color: var(--text); font-weight: 600; cursor: pointer; }
.kit-tab.on { background: var(--brand); border-color: var(--brand); color: #fff; }
.aox-kit-proc ol { margin: 4px 0 8px; padding-left: 22px; font-size: 13px; }
.aox-kit-proc li { margin: 2px 0; }
.aox-kit-sched { margin: 6px 0 8px; padding: 8px 10px; border: 1px solid var(--border); border-radius: 10px; }
.aox-kit-sched table { width: 100%; }
.aox-kit-sched td { font-variant-numeric: tabular-nums; }
.aox-kit-inc { display: flex; flex-wrap: wrap; gap: 4px 12px; margin-top: 6px; font-size: 12px; color: var(--muted); }
.kit-aox-note { margin: 0 0 10px; padding: 8px 10px; border-radius: 10px; font-size: 13px;
  background: color-mix(in srgb, var(--brand) 9%, var(--surface)); border: 1px solid color-mix(in srgb, var(--brand) 35%, var(--border)); }
/* On the Case Sheet */
.aox-band { display: block; width: 100%; margin: 4px 0 8px; padding: 6px 10px; border-radius: 8px; text-align: left; cursor: pointer;
  font-size: 12.5px; color: var(--text); background: color-mix(in srgb, var(--brand) 10%, var(--surface));
  border: 1px solid color-mix(in srgb, var(--brand) 40%, var(--border)); }
.aox-band:hover { border-color: var(--brand); }
.aox-plans { display: flex; flex-direction: column; gap: 10px; margin: 0 0 12px; }
.aox-plans > .btn { align-self: flex-start; }
.aox-plan { padding: 10px 12px; border-radius: 12px; border: 1px solid var(--border); border-left: 4px solid var(--brand);
  background: var(--surface); cursor: pointer; }
.aox-plan.off { opacity: .6; border-left-color: var(--muted); }
.aox-plan:hover { border-color: var(--brand); }
.aox-plan-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 12px; font-size: 13px; }
.aox-plan-head strong { font-size: 14px; }
.aox-plan-paid { margin-left: auto; color: var(--muted); font-variant-numeric: tabular-nums; }
.aox-steps { display: flex; gap: 4px; list-style: none; margin: 8px 0; padding: 0; }
.aox-steps li { flex: 1 1 0; min-width: 0; display: flex; flex-direction: column; align-items: center; gap: 3px; font-size: 10.5px; color: var(--muted); text-align: center; }
.aox-steps li span { width: 24px; height: 24px; border-radius: 50%; display: grid; place-items: center; font-weight: 700; font-size: 11.5px;
  border: 2px solid var(--border); background: var(--surface); color: var(--muted); }
.aox-steps li em { font-style: normal; line-height: 1.2; overflow: hidden; display: -webkit-box; -webkit-line-clamp: 2; -webkit-box-orient: vertical; }
.aox-steps li.done span { background: var(--success); border-color: var(--success); color: #fff; }
.aox-steps li.cur span { border-color: var(--brand); color: var(--brand); }
.aox-steps li.cur em { color: var(--text); font-weight: 600; }
.aox-ms-row { display: flex; flex-wrap: wrap; gap: 6px; }
.aox-ms { display: inline-flex; flex-wrap: wrap; align-items: center; gap: 4px; padding: 4px 8px; border-radius: 8px; font-size: 12px;
  background: var(--surface-2); font-variant-numeric: tabular-nums; }
.aox-ms a { color: var(--brand); }
@media (max-width: 640px) {
  .kit-tiles { grid-template-columns: repeat(2, minmax(0, 1fr)); }
  .aox-steps li em { display: none; }
  .aox-plan-paid { margin-left: 0; }
}

/* Loans & Leases → Loan deals (Oct 2026) */
.ld-panel { margin: 4px 0 14px; padding: 14px 16px; }
.ld-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; }
.ld-head .btn { margin-left: auto; }
.ld-untag { background: var(--warn-soft, #f6ead5); border: 1px solid var(--border); border-radius: 10px; padding: 10px 12px; margin: 0 0 10px; font-size: 13px; }
.ld-untag .btn { margin-left: 8px; }
.ld-untag [hidden] { display: none; }
.ld-untag .table-wrap { margin-top: 8px; }
.ld-table td:first-child { white-space: nowrap; }

/* Clinic Wise Operation lists — a title on the left, every button in the right corner,
   filters folded behind 🔍 Filter, finished packages folded (Oct 2026). */
.cops-toolbar { display: flex; justify-content: space-between; align-items: center; gap: 10px 16px; flex-wrap: wrap; margin-bottom: 12px; }
.cops-tb-lead { display: flex; align-items: center; gap: 10px; flex-wrap: wrap; min-width: 0; }
.cops-tb-name { font-size: 15px; }
.cops-tb-sub { font-size: 12px; max-width: 360px; text-align: right; }
.cops-fchips { display: flex; flex-wrap: wrap; align-items: center; gap: 6px; margin: -4px 0 12px; font-size: 12.5px; }
.cops-fchip { display: inline-flex; align-items: center; gap: 4px; }
.cops-fchip button { font-weight: 700; padding: 0 2px; }
.cops-tb-acts { display: flex; align-items: center; justify-content: flex-end; gap: 8px; flex-wrap: wrap; margin-left: auto; }
.cops-tb-acts .irn-tabs { margin: 0; }
/* The one main action of each Clinic Wise Operation tab — the same indigo pill with a round
   white icon on every tab, unlike any other button there (Oct 2026). */
.cops-main-btn { display: inline-flex; align-items: center; gap: 9px; border: 0; border-radius: 999px;
  padding: 6px 18px 6px 6px; min-height: 40px; font: inherit; font-weight: 700; font-size: 14px; cursor: pointer;
  color: #fff; background: linear-gradient(135deg, #6366f1, #7c3aed);
  box-shadow: 0 3px 10px color-mix(in srgb, #7c3aed 35%, transparent); white-space: nowrap; }
.cops-main-ic { display: inline-grid; place-items: center; width: 28px; height: 28px; border-radius: 50%;
  background: #fff; color: #6d28d9; font-size: 16px; font-weight: 800; line-height: 1; }
.cops-main-btn:hover:not(:disabled) { filter: brightness(1.08); }
.cops-main-btn:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.cops-main-btn:disabled { opacity: .5; cursor: not-allowed; box-shadow: none; }
.cops-filt-btn.on { border-color: var(--brand); color: var(--brand); background: color-mix(in srgb, var(--brand) 9%, var(--surface)); }
.cops-filt-n { display: inline-block; min-width: 18px; padding: 0 5px; margin-left: 2px; border-radius: 9px; font-size: 11px; line-height: 18px;
  text-align: center; background: var(--brand); color: #fff; }
.cops-filt[hidden], .cops-fold-body[hidden] { display: none; }
.cops-ord.cops-folded { opacity: .9; }
.cops-ord.cops-folded .cops-ord-head { border-bottom: 0; }
.cops-fold-btn { padding: 2px 8px; font-size: 11.5px; }
@media (max-width: 640px) { .cops-tb-acts { justify-content: flex-start; margin-left: 0; } .cops-tb-sub { text-align: left; max-width: none; flex-basis: 100%; } }

/* Items & masters → Godown / location: stores or clinic chairs */
.im-locsw { display: flex; gap: 6px; flex-wrap: wrap; margin: 0 0 10px; }
.im-locsw .mini-btn.on { background: var(--brand); color: #fff; border-color: var(--brand); }

/* Chart of Accounts: hidden inactive accounts that still carry a balance (Oct 2026). */
.coa-hidden-bal { margin: 4px 0 10px; padding: 8px 12px; border-radius: 8px; font-size: 12.5px;
  background: color-mix(in srgb, var(--warn) 12%, var(--surface)); border: 1px solid color-mix(in srgb, var(--warn) 40%, var(--border)); }
/* Return receipt — frozen issued batch, value, the flow (Oct 2026) */
.mrn-recv td.mrn-frozen { background: var(--surface-2); color: var(--text); }
.mrn-recv td.mrn-val { font-weight: 600; }
.mrn-recv select[data-rlot] { max-width: 260px; margin-bottom: 4px; }
.mrn-flow-link { font-size: 12px; margin-top: 4px; }
.mrn-flow { list-style: none; margin: 0; padding: 0 0 0 4px; position: relative; }
.mrn-flow li { display: grid; grid-template-columns: 34px 1fr; gap: 10px; padding: 0 0 14px; position: relative; }
.mrn-flow li::before { content: ""; position: absolute; left: 16px; top: 30px; bottom: 0; width: 2px; background: var(--border); }
.mrn-flow li:last-child::before { display: none; }
.mrn-flow-ic { width: 32px; height: 32px; border-radius: 50%; display: grid; place-items: center; background: var(--surface-2); border: 1px solid var(--border); font-size: 15px; }
.dash-mat-hit { display: block; font-size: 11.5px; color: var(--brand); margin-top: 2px; }
.dash-mat-hit[hidden] { display: none; }
/* Room Stock — the material's name in plain dark text, a little larger (the owner, Oct 2026) */
.cops-table .linklike[data-chistitem] { color: var(--text); font-size: 14.5px; font-weight: 600; text-decoration: none; }
.cops-table .linklike[data-chistitem]:hover, .cops-table .linklike[data-chistitem]:focus-visible { color: var(--brand); text-decoration: underline; }
/* Clinic Wise Operation → Expiry Items: the time-to-expiry bar (Oct 2026) */
.cops-exp-left { min-width: 150px; }
.cops-exp-left .exp-bar { width: 150px; height: 9px; margin: 2px 0 4px; }
/* Room Stock — the material and what is on the shelf stay white; every extra column reads
   on a grey shade, so the closing stock stands apart from the other details (the owner,
   Oct 2026). A reorder row is marked by a red line at its start, not a tint. */
.cops-stk th:nth-child(-n+2), .cops-stk td:nth-child(-n+2) { background: var(--surface); }
.cops-stk th:nth-child(n+3), .cops-stk td:nth-child(n+3) { background: color-mix(in srgb, var(--text) 5%, var(--surface)); }
.cops-stk thead th:nth-child(n+3) { background: color-mix(in srgb, var(--text) 8%, var(--surface)); }
.cops-stk th:nth-child(2), .cops-stk td:nth-child(2) { border-right: 2px solid var(--border); }
.cops-stk tr.row-alert td { background-image: none; }
.cops-stk tr.row-alert td:first-child { box-shadow: inset 4px 0 0 var(--danger); }

/* Instruments & Machinery export: the column ticks, two lists side by side (one on a phone). */
.cops-eq-exp { display: grid; grid-template-columns: 1fr 1fr; gap: 6px 22px; }
.cops-eq-exp h4 { margin: 4px 0 6px; font-size: 13.5px; }
.cops-eq-exp h4 .linklike { font-size: 12px; font-weight: 500; }
.cops-eq-exp .tick-row.cops-eq-tick { margin: 2px 0; padding: 4px 0; }
.cops-eq-none[hidden], #copsEqMach[hidden], #copsEqIns[hidden] { display: none; }
@media (max-width: 640px) { .cops-eq-exp { grid-template-columns: 1fr; } }

/* Pending Actions as coloured action tiles (Oct 2026). */
.cops-pa-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(160px, 1fr)); gap: 10px; }
.cops-pa { --pc: #64748b; display: flex; gap: 10px; align-items: flex-start; text-align: left; padding: 12px; min-height: 92px;
  border: 1px solid color-mix(in srgb, var(--pc) 35%, var(--border)); border-left: 5px solid var(--pc); border-radius: 12px;
  background: color-mix(in srgb, var(--pc) 9%, var(--surface)); color: var(--text); font: inherit; cursor: pointer;
  transition: transform .12s ease, box-shadow .12s ease; }
.cops-pa:hover { transform: translateY(-1px); box-shadow: 0 6px 14px -8px var(--pc); }
.cops-pa:focus-visible { outline: 3px solid var(--pc); outline-offset: 2px; }
.cops-pa .pa-ic { flex: none; width: 34px; height: 34px; border-radius: 10px; display: grid; place-items: center; font-size: 18px;
  background: color-mix(in srgb, var(--pc) 18%, var(--surface)); }
.cops-pa .pa-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cops-pa .pa-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.cops-pa .pa-value { font-size: 19px; font-weight: 700; color: var(--pc); line-height: 1.2; overflow-wrap: anywhere; }
.cops-pa .pa-value small { font-size: 13px; font-weight: 600; color: var(--muted); }
.cops-pa .pa-sub { font-size: 12px; color: var(--muted); line-height: 1.35; }
.cops-pa .pa-bar { display: block; height: 6px; margin: 3px 0 4px; border-radius: 3px; background: color-mix(in srgb, var(--pc) 18%, var(--surface)); overflow: hidden; }
.cops-pa .pa-bar > span { display: block; height: 100%; background: var(--pc); border-radius: 3px; }
.cops-pa.pa-open { --pc: #d97706; }
.cops-pa.pa-clear { --pc: #16a34a; }
.cops-pa.pa-yes { --pc: #16a34a; }
.cops-pa.pa-no, .cops-pa.pa-full { --pc: #dc2626; }
.cops-pa.pa-month { --pc: #2563eb; }
.cops-pa.pa-act { --pc: #7c3aed; }
.cops-pa.pa-quiet { --pc: #64748b; }
.cops-mach-card .sub { line-height: 1.35; }
.ol-table input.ol-in, #olAll, #olOpenAll { width: 110px; padding: 6px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
#olAll { width: 80px; }
.cops-mach-card.exp-bad { border-color: var(--danger); }
.cops-mach-card.exp-bad .value { color: var(--danger); }
.cops-mach-card.exp-warn { border-color: var(--warn); }
.cops-mach-card.exp-warn .value { color: var(--warn); }

/* Clinic Wise Operation dashboard summary cards (Oct 2026): the Quick Operations look —
   a coloured icon tile, the figure, a coloured top edge; red / amber when something waits. */
.cops-sum-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(158px, 1fr)); gap: 12px; margin-bottom: 14px; }
.cops-sum { --sc: #4f46e5; --sc2: #7c3aed; position: relative; display: flex; gap: 12px; align-items: flex-start; text-align: left;
  padding: 16px 14px 14px; border: 1px solid var(--border); border-radius: 14px; background: var(--surface); color: var(--text);
  font: inherit; overflow: hidden; box-shadow: var(--shadow); }
.cops-sum::before { content: ""; position: absolute; left: 0; right: 0; top: 0; height: 4px; background: linear-gradient(90deg, var(--sc), var(--sc2)); }
button.cops-sum { cursor: pointer; transition: transform .12s ease, box-shadow .12s ease; }
button.cops-sum:hover { transform: translateY(-2px); box-shadow: 0 10px 22px -12px var(--sc); }
button.cops-sum:focus-visible { outline: 3px solid var(--sc); outline-offset: 2px; }
.cops-sum .sum-ic { flex: none; width: 44px; height: 44px; border-radius: 12px; display: grid; place-items: center; font-size: 21px;
  background: linear-gradient(135deg, var(--sc), var(--sc2)); box-shadow: 0 6px 14px -8px var(--sc); }
.cops-sum .sum-body { display: flex; flex-direction: column; gap: 2px; min-width: 0; }
.cops-sum .sum-label { font-size: 11.5px; text-transform: uppercase; letter-spacing: .04em; color: var(--muted); font-weight: 600; }
.cops-sum .sum-value { font-size: 22px; font-weight: 700; line-height: 1.2; overflow-wrap: anywhere; font-variant-numeric: tabular-nums; }
.cops-sum .sum-sub { font-size: 12px; color: var(--muted); line-height: 1.35; }
.cops-sum.sum-val { --sc: #2563eb; --sc2: #4f46e5; }
.cops-sum.sum-types { --sc: #0d9488; --sc2: #0891b2; }
.cops-sum.sum-alert { --sc: #ea580c; --sc2: #d97706; }
.cops-sum.sum-ord { --sc: #9333ea; --sc2: #c026d3; }
.cops-sum.sum-exp { --sc: #d97706; --sc2: #ca8a04; }
.cops-sum.sum-mach { --sc: #475569; --sc2: #334155; }
.cops-sum.sum-warn { --sc: #d97706; --sc2: #ea580c; border-color: color-mix(in srgb, var(--warn) 55%, var(--border)); }
.cops-sum.sum-warn .sum-value { color: var(--warn); }
.cops-sum.sum-bad { --sc: #dc2626; --sc2: #e11d48; border-color: color-mix(in srgb, var(--danger) 55%, var(--border)); }
.cops-sum.sum-bad .sum-value { color: var(--danger); }
@media (max-width: 640px) { .cops-sum-grid { grid-template-columns: 1fr 1fr; } .cops-sum { padding: 14px 10px 10px; gap: 8px; }
  .cops-sum .sum-ic { width: 36px; height: 36px; font-size: 18px; } .cops-sum .sum-value { font-size: 18px; } }
.cops-qop.qop-return { --qc: #e11d48; --qc2: #db2777; }
.cops-qop.qop-count { --qc: #0369a1; --qc2: #0e7490; }

/* Dashboard colours on Clinic Wise Operation (Oct 2026): the page behind the cards (🎨 Customise →
   Dashboard colours) and the tile behind each icon — white by default. */
body.cops-page.cops-dashbg-page .main { background: var(--cops-dash-bg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.cops-page.cops-dashbg-page .main {
  background: color-mix(in srgb, var(--cops-dash-bg) 7%, #12141a); } }
:root[data-theme="dark"] body.cops-page.cops-dashbg-page .main { background: color-mix(in srgb, var(--cops-dash-bg) 7%, #12141a); }
.cops.cops-ic-plain .cops-qop .qop-ic, .cops.cops-ic-plain .cops-sum .sum-ic, .cops.cops-ic-plain .cops-pa .pa-ic {
  background: var(--cops-ic-bg, #fff); box-shadow: 0 2px 6px -2px rgba(15, 23, 42, .25); }
.cops.cops-ic-plain .cops-pa .pa-ic { border: 1px solid color-mix(in srgb, var(--pc) 30%, transparent); }
.cops.cops-ic-soft .cops-qop .qop-ic { background: rgba(255,255,255,.22); box-shadow: none; }
.cops.cops-ic-soft .cops-sum .sum-ic { background: color-mix(in srgb, var(--sc) 16%, var(--surface)); box-shadow: none; }
.cops.cops-ic-none .cops-qop .qop-ic, .cops.cops-ic-none .cops-sum .sum-ic, .cops.cops-ic-none .cops-pa .pa-ic { background: transparent; box-shadow: none; border: 0; }
/* The Customise card's samples. */
.cc-dot.cc-dot-bg { border: 1px solid var(--border); }
.cc-dot.cc-dot-ic { display: inline-grid; place-items: center; font-size: 12px; background: linear-gradient(135deg, #2563eb, #4f46e5); }
.cc-dot.cc-dot-ic.cc-ic-plain { background: #fff; border: 1px solid var(--border); }
.cc-dot.cc-dot-ic.cc-ic-soft { background: #dbeafe; }
.cc-dot.cc-dot-ic.cc-ic-none { background: transparent; border: 1px dashed var(--border); }
.cc-dot.cc-dot-ic { width: 24px; height: 24px; }
/* A location held from ordering (Oct 2026): the reasons, in red, on Order Materials. */
.cops-block { margin: 8px 0 12px; padding: 12px 14px; border: 1px solid color-mix(in srgb, var(--danger) 45%, var(--border));
  border-left: 5px solid var(--danger); border-radius: 12px; background: color-mix(in srgb, var(--danger) 7%, var(--surface)); }
.cops-block strong { color: var(--danger); }
.cops-block ul { margin: 6px 0; padding-left: 20px; }
.cops-block small { color: var(--muted); }
.ol-tick { display: inline-flex; align-items: center; gap: 6px; white-space: nowrap; }
.ol-table input.ol-open { width: 70px; }

/* Clinic Wise Operation — the panels' own colour, chosen on 🎨 Customise */
body.cops-page.cops-panelbg-page .cops .panel.cops-panel { background: var(--cops-panel-bg); }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) body.cops-page.cops-panelbg-page .cops .panel.cops-panel {
  background: color-mix(in srgb, var(--cops-panel-bg) 9%, var(--surface)); } }
:root[data-theme="dark"] body.cops-page.cops-panelbg-page .cops .panel.cops-panel { background: color-mix(in srgb, var(--cops-panel-bg) 9%, var(--surface)); }

/* Clinic Wise Operation — summary card designs, chosen on 🎨 Customise (copsRootClasses → cops-card-*) */
.cops.cops-card-solid .cops-sum { background: linear-gradient(135deg, var(--sc), var(--sc2)); border-color: transparent; color: #fff; }
.cops.cops-card-solid .cops-sum::before { display: none; }
.cops.cops-card-solid .cops-sum .sum-label, .cops.cops-card-solid .cops-sum .sum-sub { color: rgba(255,255,255,.88); }
.cops.cops-card-solid .cops-sum .sum-value, .cops.cops-card-solid .cops-sum.sum-warn .sum-value,
.cops.cops-card-solid .cops-sum.sum-bad .sum-value, .cops.cops-card-solid .cops-sum .cops-out { color: #fff; }
.cops.cops-card-solid .cops-sum .sum-ic { background: rgba(255,255,255,.22); box-shadow: none; }
.cops.cops-card-outline .cops-sum { border: 2px solid var(--sc); box-shadow: none; background: transparent; }
.cops.cops-card-outline .cops-sum::before { display: none; }
.cops.cops-card-outline .cops-sum .sum-value { color: var(--sc); }
.cops.cops-card-side .cops-sum { padding-left: 18px; }
.cops.cops-card-side .cops-sum::before { right: auto; bottom: 0; width: 6px; height: auto; background: linear-gradient(180deg, var(--sc), var(--sc2)); }
.cops.cops-card-tile .cops-sum { flex-direction: column; align-items: center; text-align: center; gap: 8px; }
.cops.cops-card-tile .cops-sum .sum-body { align-items: center; }
.cops.cops-card-tile .cops-sum .sum-value { font-size: 28px; }
.cops.cops-card-minimal .cops-sum { box-shadow: none; }
.cops.cops-card-minimal .cops-sum::before, .cops.cops-card-minimal .cops-sum .sum-ic { display: none; }
.cops.cops-card-minimal .cops-sum .sum-value { color: var(--sc); font-size: 26px; }
.cops.cops-card-glass .cops-sum { background: linear-gradient(135deg, color-mix(in srgb, var(--sc) 14%, var(--surface)), color-mix(in srgb, var(--sc2) 6%, var(--surface)));
  border-color: color-mix(in srgb, var(--sc) 30%, var(--border)); }
.cops.cops-card-glass .cops-sum::before { display: none; }
.cops.cops-card-glass .cops-sum .sum-value { color: color-mix(in srgb, var(--sc) 80%, var(--text)); }
.cops.cops-card-glass .cops-sum.sum-bad .sum-value { color: var(--danger); }
.cc-cards { display: grid; grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); gap: 10px; }
.cc-card-opt { display: flex; flex-direction: column; gap: 6px; padding: 8px; border: 2px solid var(--border); border-radius: 12px; cursor: pointer; }
.cc-card-opt:has(input:checked) { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 6%, var(--surface)); }
.cc-card-opt input { position: absolute; opacity: 0; pointer-events: none; }
.cc-card-opt:focus-within { outline: 2px solid var(--brand); outline-offset: 2px; }
.cc-card-prev { display: block; pointer-events: none; }
.cc-card-prev .cops-sum { width: 100%; }
.cc-card-name { display: flex; flex-direction: column; font-size: 12.5px; }

/* Quick access buttons — designs chosen on 🎨 Customise (Oct 2026). Each keeps its own colour (--qc). */
.cops-quick.qop-style-outline .cops-qop { background: var(--surface); color: var(--text); border: 2px solid var(--qc); box-shadow: none; }
.cops-quick.qop-style-outline .cops-qop .qop-txt strong { color: var(--qc); }
.cops-quick.qop-style-soft .cops-qop { background: color-mix(in srgb, var(--qc) 12%, var(--surface)); color: var(--text); box-shadow: none;
  border: 1px solid color-mix(in srgb, var(--qc) 30%, transparent); }
.cops-quick.qop-style-soft .cops-qop .qop-txt strong { color: var(--qc); }
.cops-quick.qop-style-outline .cops-qop .qop-go, .cops-quick.qop-style-soft .cops-qop .qop-go { color: var(--qc); }
.cops-quick.qop-style-tile { grid-template-columns: repeat(auto-fill, minmax(132px, 1fr)); }
.cops-quick.qop-style-tile .cops-qop { flex-direction: column; justify-content: center; text-align: center; min-height: 118px; gap: 8px; }
.cops-quick.qop-style-tile .cops-qop .qop-txt { align-items: center; flex: none; }
.cops-quick.qop-style-tile .cops-qop .qop-txt small, .cops-quick.qop-style-tile .cops-qop .qop-go { display: none; }
.cops-quick.qop-style-compact { grid-template-columns: repeat(auto-fill, minmax(170px, 1fr)); gap: 8px; }
.cops-quick.qop-style-compact .cops-qop { min-height: 44px; padding: 8px 12px; gap: 8px; border-radius: 10px; }
.cops-quick.qop-style-compact .cops-qop .qop-ic { width: 30px; height: 30px; font-size: 16px; border-radius: 8px; }
.cops-quick.qop-style-compact .cops-qop .qop-txt strong { font-size: 14px; }
.cops-quick.qop-style-compact .cops-qop .qop-txt small, .cops-quick.qop-style-compact .cops-qop .qop-go { display: none; }
.cc-quick-tbl .cc-qshow { width: 1%; text-align: center; }
.cc-quick-tbl .cc-qshow input { width: 20px; height: 20px; accent-color: var(--brand); }
.cc-quick-tbl .cc-qic { width: 64px; text-align: center; font-size: 17px; }
.cc-quick-tbl .cc-qlb, .cc-quick-tbl .cc-qsub { width: 100%; min-width: 140px; }
.cc-qsw { flex-direction: column; align-items: stretch; gap: 6px; border-radius: 12px; }
.cc-qprev { display: block; pointer-events: none; min-width: 160px; }
.cc-qprev .cops-qop { width: 100%; min-height: 56px; padding: 10px 12px; }
/* A text icon (↩) on a white tile takes the button's colour, never white on white. */
.cops.cops-ic-plain .cops-qop .qop-ic { color: var(--qc); }
.cops-quick.qop-style-outline .cops-qop .qop-ic, .cops-quick.qop-style-soft .cops-qop .qop-ic { color: var(--qc); }
.cc-tabs input[type="text"] { padding: 5px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.cc-tabs input[type="text"]:focus { outline: none; border-color: var(--brand); box-shadow: 0 0 0 3px color-mix(in srgb, var(--brand) 20%, transparent); }
/* 🏷 Locations and their change history (Oct 2026). */
.hist-old { color: var(--danger); }
.hist-new { color: var(--success); font-weight: 600; }
.oloc-acts { white-space: nowrap; }
.oloc-acts .mini-btn { margin: 1px; }
.cops-frozen { display: flex; gap: 12px; align-items: flex-start; padding: 12px 16px; margin: 0 0 14px; border-radius: 12px;
  border: 1px solid color-mix(in srgb, #2563eb 40%, transparent); background: color-mix(in srgb, #2563eb 9%, var(--surface)); }
.cops-frozen .cf-ic { font-size: 26px; line-height: 1; }
.cops-frozen strong { display: block; color: #1d4ed8; }
:root[data-theme="dark"] .cops-frozen strong { color: #93c5fd; }
@media (prefers-color-scheme: dark) { :root:not([data-theme="light"]) .cops-frozen strong { color: #93c5fd; } }
/* Quick access icon shapes, chosen on 🎨 Customise (Oct 2026). */
.cops-quick.qop-shape-circle .cops-qop .qop-ic { border-radius: 50%; }
.cops-quick.qop-shape-square .cops-qop .qop-ic { border-radius: 3px; }
.cops-quick.qop-shape-leaf .cops-qop .qop-ic { border-radius: 16px 3px 16px 3px; }
.cops-quick.qop-shape-pill .cops-qop .qop-ic { border-radius: 999px; width: 60px; }
.cops-quick.qop-shape-hex .cops-qop .qop-ic { border-radius: 0; clip-path: polygon(25% 4%, 75% 4%, 100% 50%, 75% 96%, 25% 96%, 0 50%); box-shadow: none; }
.cops-quick.qop-shape-diamond .cops-qop .qop-ic { border-radius: 0; clip-path: polygon(50% 0, 100% 50%, 50% 100%, 0 50%); box-shadow: none; width: 52px; height: 52px; }
.cops-quick.qop-style-compact.qop-shape-diamond .cops-qop .qop-ic { width: 34px; height: 34px; }
.cops-quick.qop-style-compact.qop-shape-pill .cops-qop .qop-ic { width: 42px; }

/* Room Stock columns — apply to other locations by ticking (Oct 2026) */
.stk-apply { margin-top: 14px; padding: 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.stk-apply-head { display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; margin-bottom: 8px; }
.stk-apply-br { margin-top: 8px; }
.stk-apply-bn { font-weight: 700; font-size: 13px; margin-bottom: 4px; }
.stk-apply-k { display: grid; grid-template-columns: 130px 1fr; gap: 6px; align-items: start; margin: 3px 0; font-size: 12.5px; }
.stk-apply-list { display: flex; flex-wrap: wrap; gap: 6px; }
.stk-apply-loc { display: inline-flex; align-items: center; gap: 5px; padding: 4px 9px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); cursor: pointer; font-size: 12.5px; }
.stk-apply-loc input { width: auto; margin: 0; }
.stk-apply-loc.on { border-color: var(--brand); background: color-mix(in srgb, var(--brand) 10%, var(--surface)); }
.stk-apply-go { display: flex; justify-content: flex-end; margin-top: 10px; }
@media (max-width: 640px) { .stk-apply-k { grid-template-columns: 1fr; } }

/* Clinic Wise Operation — the top panel's design, its pieces' places and moving them (Oct 2026).
   The designs override the gold frame's own variables, in both themes (hence !important on the
   variables: the themed dark-mode rules above are more specific). */
.cops.cops-hs-flat .cops-hero { --hero-bg: var(--surface) !important; --hero-ink: var(--text) !important; --hero-sub: var(--muted) !important;
  --hero-line: var(--border) !important; --tab-ink: var(--text) !important; box-shadow: none; border-width: 1px; }
.cops.cops-hs-flat .cops-hero::after, .cops.cops-hs-outline .cops-hero::after, .cops.cops-hs-glass .cops-hero::after { display: none; }
.cops.cops-hs-outline .cops-hero { --hero-bg: var(--surface) !important; --hero-ink: var(--text) !important; --hero-sub: var(--muted) !important;
  --hero-line: color-mix(in srgb, var(--gold) 45%, var(--border)) !important; --tab-ink: var(--text) !important; border: 2px solid var(--gold); box-shadow: none; }
.cops.cops-hs-glass .cops-hero { --hero-bg: color-mix(in srgb, var(--gold) 12%, var(--surface)) !important; --hero-ink: var(--text) !important;
  --hero-sub: var(--muted) !important; --hero-line: color-mix(in srgb, var(--gold) 30%, var(--border)) !important; --tab-ink: var(--text) !important;
  border-color: color-mix(in srgb, var(--gold) 35%, var(--border)); box-shadow: 0 6px 18px color-mix(in srgb, var(--gold) 14%, transparent); }
.cops.cops-hs-band .cops-hero { --hero-bg: linear-gradient(135deg, var(--gold) 0%, var(--gold-lo) 100%) !important; --hero-ink: #fff !important;
  --hero-sub: rgba(255,255,255,.82) !important; --hero-line: rgba(255,255,255,.35) !important; --tab-ink: #fff !important;
  --tab-hover: rgba(255,255,255,.16) !important; border-color: transparent; }
.cops.cops-hs-band .cops-hero .cops-room label, .cops.cops-hs-band .cops-hero .cops-branch, .cops.cops-hs-band .cops-hero .cops-tab > span[aria-hidden] { color: #fff; }
.cops.cops-hs-band .cops-hero .cops-room select { border-color: rgba(255,255,255,.75); color: #fff; }
.cops.cops-hs-band .cops-hero .cops-cust-btn, .cops.cops-hs-band .cops-hero .cops-menu-tools .mini-btn { border-color: #fff; color: #fff; background: transparent; }
.cops.cops-hs-band .cops-hero .cops-tab.on { background: #fff; color: var(--gold-lo); }
.cops.cops-hs-band .cops-hero .cops-tab.on > span[aria-hidden] { color: var(--gold-lo); }
.cops.cops-hs-band .cops-hero::after { opacity: .35; }
.cops.cops-hs-dark .cops-hero { --hero-bg: linear-gradient(135deg, #1d1a14 0%, #0d0c09 100%) !important; --hero-ink: #f3ead8 !important;
  --hero-sub: #c8b896 !important; --hero-line: #4a3a1e !important; --tab-ink: #efe4cc !important; --tab-hover: rgba(232,199,122,.10) !important; }
.cops.cops-hs-split .cops-hero .cops-id { background: linear-gradient(135deg, var(--gold), var(--gold-lo)); color: #fff; padding: 8px 14px; border-radius: 10px; }
.cops.cops-hs-split .cops-hero .cops-id .cops-title, .cops.cops-hs-split .cops-hero .cops-id .cops-branch,
.cops.cops-hs-split .cops-hero .cops-id .cops-who, .cops.cops-hs-split .cops-hero .cops-id .cops-line, .cops.cops-hs-split .cops-hero .cops-logo { color: #fff; }
/* Where the dropdowns sit. */
.cops-head.cops-place-left { justify-content: flex-start; }
.cops-head.cops-place-centre { justify-content: center; }
.cops-head.cops-place-right { justify-content: flex-end; }
.cops-head.cops-place-below { justify-content: flex-start; }
.cops-head.cops-place-below > [data-hpiece="id"], .cops-head.cops-place-below > [data-hmove="id"] { flex-basis: 100%; }
/* Moving the pieces on the panel. */
.cops-head.cops-head-moving { justify-content: flex-start; }
.cops-hmove { display: inline-flex; align-items: center; gap: 6px; padding: 6px 8px; border: 1.5px dashed var(--gold, var(--brand)); border-radius: 10px; cursor: grab; background: color-mix(in srgb, var(--surface) 70%, transparent); }
.cops-hmove.dragging { opacity: .45; }
.cops-hmove.drop-on { outline: 3px solid var(--gold, var(--brand)); outline-offset: 2px; }
.cops-hmove-grip { color: var(--gold, var(--brand)); font-size: 16px; }
.cops-hmove-btns { display: inline-flex; gap: 2px; }
.cops-head-movebar { flex-basis: 100%; display: flex; align-items: center; gap: 10px; font-size: 12.5px; color: var(--hero-sub, var(--muted)); }
/* The previews and the order strip on 🎨 Customise. */
.cc-heros .cc-hero-prev { display: block; width: 100%; pointer-events: none; }
.cc-hero-prev .cops-hero { display: block; margin: 0; padding: 10px 12px; }
.cc-hero-prev .cops-head { display: flex; justify-content: space-between; align-items: center; gap: 8px; margin: 0; padding: 0 22px 0 0; border: 0; }
.cc-hero-prev .cops-title { font-size: 14px; font-weight: 700; }
.cc-hero-prev .cops-room { gap: 5px; font-size: 11.5px; }
.cc-hero-sel { padding: 2px 8px; border: 1.5px solid var(--gold); border-radius: 6px; font-size: 11.5px; }
.cops.cops-hs-band .cc-hero-sel { border-color: rgba(255,255,255,.8); }
.cc-hero-prev .cops-hero::after { width: 30px; height: 30px; }
.cc-hpieces { display: flex; flex-wrap: wrap; gap: 8px; margin: 4px 0 10px; }
.cc-hpiece { display: inline-flex; align-items: center; gap: 4px; padding: 5px 6px 5px 10px; border: 1px solid var(--border); border-radius: 999px; background: var(--surface); font-size: 13px; }
@media (max-width: 640px) { .cops-hmove { width: 100%; flex-wrap: wrap; } }

/* The top panel's size, chosen on 🎨 Customise (Oct 2026). */
.cops .cops-hero { zoom: var(--cops-hero-zoom, 1); }
.cc-hero-prev .cops-hero { zoom: 1; }
#ccHeroSize { width: 100%; accent-color: var(--brand); }
/* "Align — black & gold": the clinic's card — black, gold waves on the right, the logo. */
.cops.cops-hs-brand .cops-hero { --gold: #d9a441; --gold-hi: #f3d27a; --gold-lo: #a8741f;
  --hero-bg: linear-gradient(120deg, #141414 0%, #0b0b0b 100%) !important; --hero-ink: #ffffff !important;
  --hero-sub: #d8c79f !important; --hero-line: rgba(217,164,65,.45) !important; --tab-ink: #f4ecd8 !important;
  --tab-hover: rgba(243,210,122,.14) !important; border-color: #3a2c12; box-shadow: 0 4px 18px rgba(0,0,0,.35); }
.cops { --cops-wave-svg: url("data:image/svg+xml;utf8,<svg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 300 100' preserveAspectRatio='none'><defs><linearGradient id='g' x1='0' y1='0' x2='1' y2='1'><stop offset='0' stop-color='%23f7dd8a'/><stop offset='.45' stop-color='%23d39b2c'/><stop offset='.7' stop-color='%23f2cf6c'/><stop offset='1' stop-color='%23a8701c'/></linearGradient><linearGradient id='h' x1='0' y1='0' x2='0' y2='1'><stop offset='0' stop-color='%23fff2bf'/><stop offset='1' stop-color='%23c78a24'/></linearGradient></defs><path d='M150 0 C205 30 175 70 235 100 L300 100 L300 0 Z' fill='url(%23g)'/><path d='M122 0 C180 32 150 72 212 100' fill='none' stroke='url(%23h)' stroke-width='3.2'/><path d='M135 0 C192 32 162 72 224 100' fill='none' stroke='%23000' stroke-opacity='.55' stroke-width='2'/><path d='M108 0 C165 34 136 74 198 100' fill='none' stroke='url(%23g)' stroke-width='1.6' stroke-opacity='.9'/><path d='M170 0 C222 28 196 68 252 100' fill='none' stroke='%23fff6cc' stroke-opacity='.55' stroke-width='1.4'/></svg>"); }
.cops.cops-waves .cops-hero::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: min(var(--cops-wave-w, 46%), 640px); pointer-events: none;
  background: no-repeat right center / 100% 100% var(--cops-wave-svg); }
.cops.cops-waves .cops-hero::after { display: none; }
.cops.cops-waves .cops-hero > *, .cops .cops-hero.cops-hero-photo > * { position: relative; z-index: 1; }
.cops.cops-waves .cops-hero .cops-head { padding-right: min(calc(var(--cops-wave-w, 46%) * .65), 360px); }
.cops.cops-waves .cops-hero .cops-head > * { position: relative; }
.cops.cops-hs-brand .cops-hero .cops-room label, .cops.cops-hs-brand .cops-hero .cops-branch { color: var(--gold-hi); }
.cops.cops-hs-brand .cops-hero .cops-room select { background: rgba(0,0,0,.35); color: #fff; border-color: var(--gold); }
.cops.cops-hs-brand .cops-hero .cops-logo { color: var(--gold-hi); }
.cops.cops-hs-brand .cops-hero .cops-cust-btn { border-color: var(--gold); color: #fff; background: rgba(0,0,0,.35); }
.cops.cops-hs-brand .cops-hero .cops-tab.on { background: linear-gradient(180deg, var(--gold-hi), var(--gold)); color: #1a1205; }
.cops.cops-hs-brand .cops-hero .cops-tab.on > span[aria-hidden] { color: #1a1205; }
.cops.cops-hs-brand .cops-hero .cops-tab > span[aria-hidden] { color: var(--gold-hi); }
.cops.cops-hs-brand .cops-hero .cops-menu-tools .mini-btn { border-color: var(--gold); color: var(--gold-hi); }
.cops-brand-mark { display: inline-flex; align-items: center; padding-right: 14px; margin-right: 4px; border-right: 1px solid rgba(217,164,65,.5); }
.cops-brand-mark .align-logo { height: 42px; width: auto; display: block; }
.cc-hero-prev .cops-brand-mark .align-logo { height: 24px; }
.cc-hero-prev.cops-hs-brand .cops-hero::before { content: ""; position: absolute; top: 0; right: 0; bottom: 0; width: 46%; pointer-events: none;
  background: no-repeat right center / 100% 100% var(--cops-wave-svg); }
.cc-hero-prev.cops-hs-brand .cops-hero::after { display: none; }
.cc-hero-prev.cops-hs-brand .cops-hero > * { position: relative; z-index: 1; }
.cc-hero-prev .cops.cops-hs-brand .cops-hero .cops-head, .cops.cops-hs-brand.cc-hero-prev .cops-hero .cops-head { padding-right: 30%; }
@media (max-width: 640px) {
  .cops.cops-waves .cops-hero::before { width: min(var(--cops-wave-w, 46%), 34%); opacity: .75; }
  .cops.cops-waves .cops-hero .cops-head { padding-right: 18%; }
  .cops-brand-mark .align-logo { height: 30px; }
}
/* The room's dashboard charts (Oct 2026). */
.cops-ins-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; }
.cops-ins-head h3 { margin: 0; flex: 1 1 auto; }
.cops-ins-head label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.cops-ins-head select, .cops-ins h4 select { font: inherit; font-size: 13px; padding: 4px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); max-width: 260px; }
.cops-ins-type { display: inline-flex; gap: 4px; }
.cops-ins-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 16px; }
@media (max-width: 900px) { .cops-ins-grid { grid-template-columns: 1fr; } }
.cops-ins h4 { margin: 0 0 6px; font-size: 14px; display: flex; flex-wrap: wrap; align-items: center; gap: 6px 10px; }
.cops-ins-rank tr[data-insitem] { cursor: pointer; }
.cops-ins-rank tr.on td { background: color-mix(in srgb, var(--brand) 10%, var(--surface)); font-weight: 600; }
.cops-ins-bar { width: 26%; }
.cops-ins-bar span { display: block; height: 8px; border-radius: 4px; background: var(--c2, var(--brand)); min-width: 3px; }
.cops-ins-click .tr-hit { cursor: pointer; }
.cops-day-sum { display: flex; flex-wrap: wrap; align-items: center; gap: 10px 16px; margin-bottom: 12px; }
.cops-day-sum > div:not(.cops-day-arrow) { display: flex; flex-direction: column; padding: 8px 14px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.cops-day-sum b { font-size: 18px; font-variant-numeric: tabular-nums; }
.cops-day-arrow { font-size: 20px; color: var(--muted); }
.cops-day-kinds { display: grid; grid-template-columns: repeat(auto-fill, minmax(230px, 1fr)); gap: 6px 14px; margin-bottom: 12px; }
.cops-day-k { display: flex; justify-content: space-between; gap: 10px; padding: 6px 10px; border-left: 3px solid var(--border); background: var(--surface-2); border-radius: 6px; font-size: 13px; }

/* Logo, gold waves and pictures (Oct 2026, 🎨 Customise → Logo, gold waves & pictures). */
.cops-logo-slot { display: contents; }
.cops-art-logo { display: inline-flex; align-items: center; flex: 0 0 auto; }
.cops-art-logo .align-logo, .cops-art-logo img { height: var(--cops-logo-h, 42px); width: auto; max-width: 360px; display: block; object-fit: contain; }
.cops-art-logo.at-after { border-right: 0; padding-right: 0; margin-right: 0; padding-left: 14px; margin-left: 4px; border-left: 1px solid rgba(217,164,65,.5); }
.cops-art-logo.at-right { border: 0; padding: 0; margin: 0; }
.cops-art-logo.plate { background: #fff; border-radius: 10px; padding: 6px 10px; border: 0; box-shadow: 0 1px 4px rgba(0,0,0,.18); }
.cops-art-logo.plate.at-before { margin-right: 10px; }
.cops-art-logo.plate.at-after { margin-left: 10px; }
.cops-art-logo:not(.plate) .align-logo { filter: none; }
.cops .cops-hero > .cops-logo-slot.cops-logo-right-slot { display: block; position: absolute; top: 12px; right: 16px; z-index: 2; }
.cops.cops-logo-at-right .cops-hero .cops-head { padding-right: calc(var(--cops-logo-h, 42px) * 4 + 30px); }
/* The Align logo is white — on a light panel it needs a dark ground. */
.cops:not(.cops-hs-brand):not(.cops-hs-dark):not(.cops-hs-band) .cops-hero:not(.cops-hero-photo) .cops-art-logo:not(.plate) .align-logo {
  background: #111; border-radius: 8px; padding: 4px 8px; box-sizing: content-box; }
/* Tab names that run over the gold waves keep a shadow so they still read. */
.cops.cops-waves:is(.cops-hs-brand, .cops-hs-dark, .cops-hs-band) .cops-hero .cops-tab:not(.on),
.cops .cops-hero.cops-hero-photo:not(.cops-hero-photo-light) .cops-tab:not(.on) { text-shadow: 0 1px 3px rgba(0,0,0,.75); }
/* A picture behind the top panel, under a veil. */
.cops .cops-hero.cops-hero-photo { background: linear-gradient(var(--cops-hero-veil, rgba(0,0,0,.45)), var(--cops-hero-veil, rgba(0,0,0,.45))),
  var(--cops-hero-img) center / cover no-repeat !important; --hero-ink: #fff !important; --hero-sub: #ece4d2 !important; --tab-ink: #fff !important; }
.cops .cops-hero.cops-hero-photo .cops-room select { background: rgba(0,0,0,.35); color: #fff; }
.cops .cops-hero.cops-hero-photo.cops-hero-photo-light { --hero-ink: #1c1710 !important; --hero-sub: #4a3f2c !important; --tab-ink: #1c1710 !important; }
.cops .cops-hero.cops-hero-photo.cops-hero-photo-light .cops-room select { background: rgba(255,255,255,.6); color: #1c1710; }
/* Gold waves in the corner of the dashboard panels. */
.cops.cops-panel-waves .panel.cops-panel { position: relative; isolation: isolate; overflow: hidden; }
.cops.cops-panel-waves .panel.cops-panel::after { content: ""; position: absolute; top: 0; right: 0; width: min(170px, 38%); height: 100%; max-height: 110px;
  z-index: -1; pointer-events: none; opacity: .55; background: no-repeat right top / 100% 100% var(--cops-wave-svg); }
.cops.cops-panel-waves .cops-sum { position: relative; isolation: isolate; overflow: hidden; }
.cops.cops-panel-waves .cops-sum::after { content: ""; position: absolute; top: 0; right: 0; width: 28%; height: 100%; z-index: -1;
  pointer-events: none; opacity: .32; background: no-repeat right top / 100% 100% var(--cops-wave-svg); }
/* A picture behind the cards — the page, softened by the page's own colour. */
body.cops-page.cops-pageimg-page .main { background: linear-gradient(color-mix(in srgb, var(--bg) var(--cops-page-dim, 55%), transparent),
  color-mix(in srgb, var(--bg) var(--cops-page-dim, 55%), transparent)), var(--cops-page-img) center / cover no-repeat !important; }
body.cops-page.cops-pageimg-page.cops-pageimg-fixed .main { background-attachment: fixed !important; }
@media (max-width: 760px) { body.cops-page.cops-pageimg-page.cops-pageimg-fixed .main { background-attachment: scroll !important; }
  .cops.cops-logo-at-right .cops-hero .cops-head { padding-right: 12px; }
  .cops .cops-hero > .cops-logo-slot.cops-logo-right-slot { position: relative; top: 0; right: 0; display: flex; justify-content: flex-end; margin-bottom: 6px; } }
/* The Customise card's logo / picture boxes. */
.cc-art-row { display: flex; flex-wrap: wrap; align-items: center; gap: 12px; margin: 6px 0 10px; }
.cc-art-btns { display: flex; flex-wrap: wrap; align-items: center; gap: 8px; flex: 1 1 260px; }
.cc-art-btns small { flex-basis: 100%; }
.cc-logo-box, .cc-pic-box { display: inline-flex; align-items: center; justify-content: center; width: 180px; height: 72px; border: 1px dashed var(--border);
  border-radius: 10px; background: var(--surface-2); overflow: hidden; font-size: 12px; }
.cc-logo-box img { max-width: 168px; max-height: 60px; object-fit: contain; }
.cc-logo-box .cc-logo-dark { background: #111; border-radius: 8px; padding: 6px 10px; display: inline-flex; }
.cc-logo-box .align-logo { height: 40px; width: auto; }
.cc-pic-box img { width: 100%; height: 100%; object-fit: cover; }
.cc-file { cursor: pointer; }
/* 🎨 Customise: Back to the standard / Cancel / Save stay at the bottom of the window while the
   sections scroll (the owner, Oct 2026: "freeze this option to the interface"). */
.cc-card > .form-actions { position: sticky; bottom: -22px; z-index: 5; margin: 14px -22px -22px; padding: 12px 22px;
  background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -6px 14px rgba(0,0,0,.07); }
.cc-art input[type="range"] { width: 100%; accent-color: var(--brand); }
/* Inventory Analyze → 📍 Location analysis (Oct 2026). */
.ia-loc-head { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin-bottom: 10px; }
.ia-loc-head label, .ia-loc-filter label { display: inline-flex; align-items: center; gap: 6px; font-size: 13px; }
.ia-loc-period { font-size: 12px; flex: 1 1 auto; }
.ia-loc-kpis { margin-bottom: 10px; }
.ia-loc-kpis .sub { font-size: 12px; color: var(--muted); margin-top: 2px; }
.ia-loc-charts { display: grid; grid-template-columns: 1fr; gap: 16px; margin-bottom: 10px; }
@media (min-width: 900px) { .ia-loc-charts { grid-template-columns: 1fr 1fr; } }
.ia-loc-charts h4, #iaLocItemChart h4 { margin: 0 0 6px; font-size: 13.5px; }
.ia-loc-filter { display: flex; flex-wrap: wrap; align-items: center; gap: 8px 14px; margin: 6px 0 8px; }
.ia-loc-table td.num, .ia-loc-table th.num { text-align: right; white-space: nowrap; font-variant-numeric: tabular-nums; }
.ia-loc-table tbody tr[data-iaopen] { cursor: pointer; }
.ia-loc-table tbody tr[data-iaopen]:hover, .ia-loc-table tbody tr[data-iaopen]:focus { background: var(--surface-2); outline: none; }
.ia-loc-title { display: flex; align-items: center; gap: 10px; margin-bottom: 8px; }
.ia-loc-title h4 { margin: 0; font-size: 16px; }
.ia-loc-tabs { display: flex; flex-wrap: wrap; gap: 6px; align-items: center; margin: 6px 0; }
.ia-loc-tabs input[type="search"] { flex: 1 1 200px; min-width: 160px; }
.ia-loc-note { font-size: 12.5px; margin: 4px 0 8px; }
.ia-loc-brands { display: flex; flex-wrap: wrap; gap: 6px; margin-bottom: 8px; }
.ia-loc-item { text-align: left; }
.ia-up { color: var(--danger); font-weight: 600; }
.ia-down { color: var(--success); font-weight: 600; }
/* 🎨 Customise → the outline round the panels and cards (Oct 2026). */
body.cops-page.cops-panelline-page .cops .panel, body.cops-page.cops-panelline-page .cops .cops-sum,
body.cops-page.cops-panelline-page .cops .dash-card {
  border: var(--cops-panel-line-w, 2px) solid var(--cops-panel-line) !important; }
.cc-dot.cc-dot-line { background: var(--surface); border: 3px solid var(--border); }
.cc-dot.cc-line-std { border-width: 1px; }
.cc-dot.cc-line-theme { border-color: var(--brand); }
.cc-dot.cc-line-none { border-style: dashed; border-width: 1px; }

/* Stock view & ordering rights per location (IRN → 🔐 Authorization, Oct 2026). */
.or-table th { white-space: normal; vertical-align: bottom; min-width: 120px; }
.or-table .or-all { display: flex; gap: 4px; margin-top: 4px; }
.or-table .or-cell .ol-tick input:not(:checked) + span { color: var(--danger); font-weight: 600; }
.irn-not-allowed { font-size: 12px; color: var(--muted); }

/* Clinic Wise Operation look — the editor with a live preview (IRN → 🔐 Authorization, Oct 2026). */
.modal.cl-modal { max-width: min(1680px, 98vw); width: 98vw; }
.cl-split { display: grid; grid-template-columns: minmax(380px, 520px) minmax(0, 1fr); gap: 14px; align-items: start; }
.cl-split > * { min-width: 0; }
.cl-edit { max-height: 76vh; overflow-y: auto; padding-right: 4px; }
.cl-live { position: sticky; top: 0; border: 1px solid var(--border); border-radius: 12px; overflow: hidden; background: var(--surface-2); }
.cl-live-head { padding: 8px 12px; font-size: 13px; border-bottom: 1px solid var(--border); background: var(--surface); }
.cl-live iframe { display: block; width: 100%; height: 72vh; border: 0; background: var(--bg); }
.cl-target { display: flex; flex-direction: column; gap: 2px; margin-bottom: 10px; }
.cl-changes { padding: 8px 12px; font-size: 12.5px; border-bottom: 1px solid var(--border); background: var(--surface); max-height: 22vh; overflow-y: auto; }
.cl-chg-head { display: flex; flex-wrap: wrap; align-items: center; justify-content: space-between; gap: 6px; margin-bottom: 6px; }
.cl-chg-list { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 3px; }
.cl-chg { width: 100%; text-align: left; background: var(--surface-2); border: 1px solid var(--border); border-left: 3px solid var(--brand); border-radius: 8px; padding: 4px 8px; font: inherit; color: var(--text); cursor: pointer; }
.cl-chg:hover, .cl-chg:focus-visible { border-color: var(--brand); outline: none; }
.cl-chg-what { font-weight: 600; }
.cl-chg-from { color: var(--muted); text-decoration: line-through; }
.cl-chg-to { font-weight: 600; color: var(--brand); }
@keyframes copsPvPulse { 0% { box-shadow: 0 0 0 0 rgba(37, 99, 235, .0); } 25% { box-shadow: 0 0 0 4px rgba(37, 99, 235, .85), 0 0 0 10px rgba(37, 99, 235, .25); } 100% { box-shadow: 0 0 0 0 rgba(37, 99, 235, 0); } }
.cops-pv-flash { animation: copsPvPulse 2.4s ease-out; outline: 3px dashed #2563eb !important; outline-offset: 3px; }
.cops-pv-tag { position: fixed; left: 50%; top: 10px; transform: translate(-50%, -20px); opacity: 0; z-index: 60; max-width: 92vw; background: #1e3a8a; color: #fff; font-size: 13px; font-weight: 600; padding: 7px 14px; border-radius: 999px; box-shadow: 0 6px 20px rgba(0,0,0,.25); transition: opacity .25s, transform .25s; pointer-events: none; }
.cops-pv-tag.show { opacity: 1; transform: translate(-50%, 0); }
@media (prefers-reduced-motion: reduce) { .cops-pv-flash { animation: none; } .cops-pv-tag { transition: none; } }
.cl-top { display: grid; gap: 8px; padding: 10px 12px; margin: 0 0 12px; border: 1px solid var(--border); border-radius: 12px; background: var(--surface-2); }
.cl-top .field { margin: 0; }
.cl-status { margin: 0; font-size: 12.5px; }
.cl-tpl { display: flex; flex-direction: column; gap: 6px; margin: 10px 0 4px; padding: 10px; border: 1px solid var(--border); border-radius: 10px; background: var(--surface-2); }
.cl-tpl-row { display: flex; gap: 6px; align-items: center; }
.cl-tpl-row select { flex: 1; min-width: 0; padding: 7px 8px; border: 1px solid var(--border); border-radius: 8px; background: var(--surface); color: var(--text); font: inherit; }
.cl-tpl-msg { font-size: 12px; }
.cl-tpl-msg.bad { color: var(--danger); }
/* The preview frame keeps its height while it redraws (no jump). */
body.cops-preview-mode.cops-pv-busy .main { min-height: var(--cops-pv-h, auto); }
.cl-also summary { cursor: pointer; font-size: 13px; }
.cl-also-list { display: grid; gap: 6px; margin-top: 6px; max-height: 220px; overflow-y: auto; }
.cl-also-br { display: flex; flex-wrap: wrap; gap: 4px 12px; align-items: center; }
/* The look editor's window: the editor column and the preview scroll inside it, and ↺ Back to the
   standard / Cancel / Save are a footer of the window itself (Nov 2026: "Freeze save cancel button to
   main interface"). */
.modal.cl-modal .modal-body { display: flex; flex-direction: column; max-height: 86vh; overflow: hidden; padding-bottom: 0; }
.cl-modal .cl-split { flex: 1 1 auto; min-height: 0; grid-template-rows: minmax(0, 1fr); align-items: stretch; }
.cl-modal .cl-edit { max-height: none; min-height: 0; overflow-y: auto; overflow-x: hidden; }
.cl-modal .cl-live { display: flex; flex-direction: column; min-height: 0; }
.cl-modal .cl-live iframe { flex: 1 1 auto; height: auto; min-height: 280px; }
.form-actions.cl-actions { flex: none; position: static; margin: 12px -22px 0; padding: 12px 22px;
  background: var(--surface); border-top: 1px solid var(--border); box-shadow: 0 -6px 14px rgba(0,0,0,.07); }
@media (max-width: 1000px) {
  .cl-split { grid-template-columns: 1fr; }
  .cl-edit { max-height: none; overflow: visible; }
  .cl-live { position: static; }
  .cl-live iframe { height: 60vh; }
  .cl-modal .cl-split { overflow-y: auto; overflow-x: hidden; grid-template-rows: none; align-items: start; }
  .cl-modal .cl-edit { overflow: visible; }
  .cl-modal .cl-live iframe { flex: none; height: 60vh; }
}
/* Inside the preview frame: the screen only. */
body.cops-preview-mode .sidebar, body.cops-preview-mode .topbar, body.cops-preview-mode .fab-wrap,
body.cops-preview-mode #envBanner, body.cops-preview-mode .calc-dock, body.cops-preview-mode #calcWin,
body.cops-preview-mode #calcPill, body.cops-preview-mode .nb-dock, body.cops-preview-mode #nbFloat,
body.cops-preview-mode #nbRemind, body.cops-preview-mode #invRemind, body.cops-preview-mode #invRemindPill,
body.cops-preview-mode .nav-backdrop { display: none !important; }
body.cops-preview-mode, body.cops-preview-mode * { cursor: default !important; }