/* ========================================================================
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 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; }
/* 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; }
.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 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"). */
.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; }
/* 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; }
.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); }
/* 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; }
.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,") 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-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; }
/* ===== ⚡ 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 — 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; }
.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-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); }