/* ── style block 1 of 3, from index.html ── */
/* ── iOS SAFARI RESET ── */
*{margin:0;padding:0;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-tap-highlight-color:transparent;}
:root{
--navy:#0f2547;--navy2:#1a3a6e;--teal:#00a896;--teal2:#02c4af;
--amber:#f4a261;--red:#e63946;--green:#2a9d8f;--purple:#6c63ff;
--cash:#16a34a;--online:#2563eb;
--bg:#f0f4f8;--card:#fff;--text:#1a202c;--muted:#718096;
--border:#e2e8f0;--shadow:0 2px 16px rgba(15,37,71,.10);--sidebar:240px;
--safe-top: env(safe-area-inset-top);
--safe-bottom: env(safe-area-inset-bottom);
--safe-left: env(safe-area-inset-left);
--safe-right: env(safe-area-inset-right);
}
html{height:-webkit-fill-available;}
body{
font-family:'DM Sans',sans-serif;background:var(--bg);color:var(--text);
min-height:100vh;min-height:-webkit-fill-available;
-webkit-text-size-adjust:100%;text-size-adjust:100%;
overflow-x:hidden;
}
/* Prevent iOS input zoom — all inputs must be 16px+ */
input,select,textarea,button{
font-size:16px !important; /* iOS zooms when < 16px */
font-family:'DM Sans',sans-serif;
-webkit-appearance:none;appearance:none;
border-radius:0; /* iOS adds rounded corners to inputs */
}
select{-webkit-appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='8' viewBox='0 0 12 8'%3E%3Cpath d='M1 1l5 5 5-5' stroke='%23718096' stroke-width='1.5' fill='none'/%3E%3C/svg%3E");background-repeat:no-repeat;background-position:right 10px center;padding-right:30px !important;}
/* ── LOGIN ── */
#loginScreen{
position:fixed;top:0;left:0;right:0;bottom:0;
background:-webkit-linear-gradient(135deg,var(--navy) 0%,var(--navy2) 55%,#0d3d4a 100%);
background:linear-gradient(135deg,var(--navy) 0%,var(--navy2) 55%,#0d3d4a 100%);
z-index:9999;display:-webkit-flex;display:flex;
-webkit-align-items:center;align-items:center;
-webkit-justify-content:center;justify-content:center;
padding:20px;padding-bottom:calc(20px + var(--safe-bottom));
overflow-y:auto;-webkit-overflow-scrolling:touch;
}
.login-box{background:#fff;border-radius:22px;padding:30px 24px;width:100%;max-width:420px;box-shadow:0 28px 80px rgba(0,0,0,.35);}
.login-logo{text-align:center;margin-bottom:20px;}
.login-logo .icon{font-size:2.4rem;margin-bottom:8px;}
.login-logo h1{font-family:'Playfair Display',serif;color:var(--navy);font-size:1.15rem;line-height:1.4;}
.login-logo p{color:var(--muted);font-size:13px;margin-top:3px;}
.login-tabs{display:-webkit-flex;display:flex;margin-bottom:18px;border:1.5px solid var(--border);border-radius:10px;overflow:hidden;}
.login-tab{-webkit-flex:1;flex:1;padding:10px 6px;text-align:center;font-size:13px;font-weight:600;cursor:pointer;color:var(--muted);background:transparent;border:none;-webkit-transition:.2s;transition:.2s;}
.login-tab.active{background:var(--navy);color:#fff;}
.login-msg{border-radius:9px;padding:10px 14px;font-size:13px;margin-bottom:12px;display:none;}
.msg-err{background:#fdeaea;color:var(--red);}
.msg-ok{background:#e6f7f5;color:var(--green);}
.msg-info{background:#fff3e8;color:#c97c3a;}
/* ── APP SHELL ── */
#appShell{display:none;min-height:100vh;}
#appShell.visible{display:-webkit-flex;display:flex;}
.sidebar{
width:var(--sidebar);background:var(--navy);color:#fff;
display:-webkit-flex;display:flex;
-webkit-flex-direction:column;flex-direction:column;
position:fixed;top:0;left:0;height:100%;height:-webkit-fill-available;
z-index:100;-webkit-transition:transform .3s;transition:transform .3s;
overflow-y:auto;-webkit-overflow-scrolling:touch;
padding-top:var(--safe-top);
padding-bottom:var(--safe-bottom);
}
.sidebar-logo{padding:18px 16px 14px;border-bottom:1px solid rgba(255,255,255,.1);}
.sidebar-logo h1{font-family:'Playfair Display',serif;font-size:14px;line-height:1.3;color:#fff;}
.sidebar-logo .sub{font-size:11px;color:rgba(255,255,255,.38);}
.role-pill{display:inline-block;margin-top:6px;padding:2px 9px;border-radius:10px;font-size:11px;font-weight:700;}
.role-pill.admin{background:rgba(244,162,97,.28);color:var(--amber);}
.role-pill.staff{background:rgba(0,168,150,.22);color:var(--teal2);}
.nav-section{padding:10px 0 3px 16px;font-size:10px;text-transform:uppercase;letter-spacing:1.5px;color:rgba(255,255,255,.28);font-weight:700;}
.nav-item{
display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;
gap:9px;padding:12px 16px;cursor:pointer;font-size:14px;font-weight:500;
color:rgba(255,255,255,.66);-webkit-transition:.2s;transition:.2s;
border-left:3px solid transparent;min-height:44px; /* iOS min touch target */
}
.nav-item:hover,.nav-item:active{background:rgba(255,255,255,.07);color:#fff;}
.nav-item.active{background:rgba(0,168,150,.15);color:var(--teal2);border-left-color:var(--teal2);}
.nav-item .icon{font-size:15px;width:19px;text-align:center;}
.sidebar-footer{margin-top:auto;padding:12px 16px;font-size:11px;color:rgba(255,255,255,.2);border-top:1px solid rgba(255,255,255,.07);}
.main{
margin-left:var(--sidebar);-webkit-flex:1;flex:1;
display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;
min-height:100vh;min-height:-webkit-fill-available;
/* ══ v10.24f — THE CAUSE OF EVERY "TOO WIDE" COMPLAINT ════════════
A flex item defaults to `min-width:auto`, which means it REFUSES to
shrink below the intrinsic width of its content. So one long line
anywhere inside — the low-stock banner listing 20 medicines — sized
this column to 2647px on a 1512px screen. Everything below inherited
that width: .content, .page, .card and .table-wrap all became 2613px,
so `overflow-x:auto` on the wrap had nothing to scroll (it was already
as wide as its content) and the sticky action column had nowhere to
stick. body{overflow-x:hidden} then hid the page scrollbar, so the
right-hand side was simply unreachable.
min-width:0 lets the column shrink to the viewport; the banner wraps,
the table gets a real width, and the wrap scrolls properly.
════════════════════════════════════════════════════ */
min-width:0;
}
.topbar{
background:#fff;border-bottom:1px solid var(--border);
padding:0 16px;padding-top:var(--safe-top);
height:calc(56px + var(--safe-top));
display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;
-webkit-justify-content:space-between;justify-content:space-between;
position:-webkit-sticky;position:sticky;top:0;z-index:50;
}
.topbar h2{font-size:15px;font-weight:700;color:var(--navy);}
.topbar-right{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:8px;}
.topbar-date{font-size:12px;color:var(--muted);}
/* ── BUTTONS ── */
.btn{
display:-webkit-inline-flex;display:inline-flex;
-webkit-align-items:center;align-items:center;
gap:5px;padding:10px 14px;border-radius:8px;
font-size:14px;font-weight:600;cursor:pointer;border:none;
-webkit-transition:.2s;transition:.2s;
white-space:nowrap;min-height:44px; /* iOS min touch target */
-webkit-appearance:none;appearance:none;
text-decoration:none;
}
.btn-primary{background:var(--teal);color:#fff;} .btn-primary:active{background:var(--teal2);}
.btn-navy{background:var(--navy);color:#fff;} .btn-navy:active{background:var(--navy2);}
.btn-outline{background:transparent;border:1.5px solid var(--border);color:var(--text);}
.btn-outline:active{border-color:var(--teal);color:var(--teal);}
.btn-red{background:var(--red);color:#fff;} .btn-green{background:var(--green);color:#fff;} .btn-amber{background:var(--amber);color:#fff;}
.btn-sm{padding:8px 12px;font-size:13px;min-height:36px;}
.btn-full{width:100%;-webkit-justify-content:center;justify-content:center;}
.content{padding:16px;-webkit-overflow-scrolling:touch;min-width:0;}
/* every page and card must also be allowed to shrink, or one wide child
re-inflates the column that min-width:0 just fixed. */
.page{min-width:0;}
.card{min-width:0;}
/* ── CARDS ── */
.card{background:var(--card);border-radius:14px;box-shadow:var(--shadow);border:1px solid var(--border);}
.card-header{padding:14px 15px 12px;border-bottom:1px solid var(--border);display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:space-between;justify-content:space-between;-webkit-flex-wrap:wrap;flex-wrap:wrap;gap:8px;}
.card-header h3{font-size:14px;font-weight:700;color:var(--navy);}
.card-body{padding:14px;}
/* ── STATS ── */
.stats-grid{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;gap:10px;margin-bottom:18px;}
.stat-card{background:var(--card);border-radius:13px;padding:14px;box-shadow:var(--shadow);border:1px solid var(--border);-webkit-flex:1 1 140px;flex:1 1 140px;min-width:130px;}
.stat-label{font-size:11px;text-transform:uppercase;letter-spacing:.7px;color:var(--muted);font-weight:700;margin-bottom:5px;}
.stat-value{font-size:1.35rem;font-weight:700;color:var(--navy);}
.sv-teal{color:var(--teal);}.sv-green{color:var(--green);}.sv-amber{color:var(--amber);}.sv-red{color:var(--red);}
.sv-cash{color:var(--cash);}.sv-online{color:var(--online);}
.stat-sub{font-size:11px;color:var(--muted);margin-top:2px;}
/* ── FORMS ── */
.form-grid{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;gap:10px;}
.form-grid > .form-group{-webkit-flex:1 1 calc(50% - 5px);flex:1 1 calc(50% - 5px);min-width:140px;}
.form-grid-1{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:10px;}
.form-group{display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:5px;}
.form-group.full{-webkit-flex:1 1 100%;flex:1 1 100%;width:100%;}
label{font-size:13px;font-weight:700;color:var(--navy);}
input,select,textarea{
padding:12px 11px;border:1.5px solid var(--border);
border-radius:8px;font-size:16px !important; /* prevents iOS zoom */
color:var(--text);background:#fff;
-webkit-transition:.2s;transition:.2s;width:100%;
-webkit-appearance:none;appearance:none;
}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--teal);-webkit-box-shadow:0 0 0 3px rgba(0,168,150,.1);box-shadow:0 0 0 3px rgba(0,168,150,.1);}
textarea{resize:vertical;min-height:65px;-webkit-overflow-scrolling:touch;}
input[type=checkbox]{
width:22px !important;height:22px !important;
-webkit-appearance:checkbox;appearance:checkbox;
accent-color:var(--teal);cursor:pointer;
flex-shrink:0;
}
/* ── TABLE ── */
.table-wrap{overflow-x:auto;-webkit-overflow-scrolling:touch;}
table{width:100%;border-collapse:collapse;font-size:13px;}
th{background:var(--bg);padding:9px 10px;text-align:left;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;color:var(--muted);border-bottom:2px solid var(--border);}
th.cash-col{color:var(--cash);} th.online-col{color:var(--online);}
td{padding:10px;border-bottom:1px solid var(--border);color:var(--text);vertical-align:middle;font-size:13px;}
tr:last-child td{border-bottom:none;}
.badge{display:inline-block;padding:4px 8px;border-radius:20px;font-size:11px;font-weight:700;}
.badge-green{background:#e6f7f5;color:var(--green);}
.badge-amber{background:#fff3e8;color:#c97c3a;}
.badge-red{background:#fdeaea;color:var(--red);}
.badge-navy{background:#e8eef7;color:var(--navy);}
.badge-purple{background:#f0eeff;color:var(--purple);}
.badge-cash{background:#dcfce7;color:var(--cash);}
.badge-online{background:#dbeafe;color:var(--online);}
.badge-pending{background:#fff3e8;color:#c97c3a;}
/* ── v9.86: laterality ── */
.rx-side{
padding:6px 13px;border:1.5px solid var(--border);background:#fff;color:var(--muted);
border-radius:18px;font-size:12.5px;font-weight:600;cursor:pointer;min-height:34px;
-webkit-transition:.15s;transition:.15s;
}
.rx-side:active{opacity:.75;}
.rx-side.on{background:var(--teal);border-color:var(--teal);color:#fff;}
/* ── v9.82: provisional / definitive diagnosis toggle ── */
.rx-dxt{
padding:8px 15px;border:1.5px solid var(--border);background:#fff;color:var(--muted);
border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;min-height:38px;
-webkit-transition:.15s;transition:.15s;
}
.rx-dxt:active{opacity:.75;}
.rx-dxt.on{background:var(--navy);border-color:var(--navy);color:#fff;}
#rx-dxtProv.on{background:var(--amber);border-color:var(--amber);color:#5a3a12;}
#rx-dxtDef.on{background:var(--green);border-color:var(--green);color:#fff;}
/* ── MED ROWS ── */
.med-row{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;gap:6px;padding:8px 0;border-bottom:1px solid var(--border);}
.med-row select{-webkit-flex:2 1 140px;flex:2 1 140px;}
.med-row .med-qty{-webkit-flex:0 0 60px;flex:0 0 60px;}
.med-row .med-price{-webkit-flex:1 1 75px;flex:1 1 75px;}
.med-row .med-disc{-webkit-flex:1 1 80px;flex:1 1 80px;}
.med-row .med-amt{-webkit-flex:1 1 75px;flex:1 1 75px;}
.med-row .med-stock{-webkit-flex:1 1 60px;flex:1 1 60px;font-size:12px;color:var(--muted);display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;}
.med-row .med-del{-webkit-flex:0 0 32px;flex:0 0 32px;}
.med-row-header{font-size:11px;font-weight:700;color:var(--muted);text-transform:uppercase;display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;gap:6px;}
/* ── MODAL ── */
.modal-overlay{
position:fixed;top:0;left:0;right:0;bottom:0;
background:rgba(15,37,71,.5);z-index:500;
display:-webkit-flex;display:flex;
-webkit-align-items:flex-start;align-items:flex-start;
-webkit-justify-content:center;justify-content:center;
padding:16px;padding-top:max(16px,var(--safe-top));
padding-bottom:max(16px,var(--safe-bottom));
overflow-y:auto;-webkit-overflow-scrolling:touch;
}
/* v9.99.1 — MODALS THAT OPEN ON TOP OF ANOTHER MODAL
Every .modal-overlay shares z-index:500, so when two are open at once the
winner is decided by document order alone — the one written LATER in the
HTML paints on top. Both of these sit earlier in the file than the modal
they open from, so they were appearing BEHIND it:
Templates → Review (packReviewModal is above packModal in the HTML)
History → Bill (billModal is above historyModal in the HTML)
Raising just these two is deliberate. Neither is ever the parent: the
template editor is never opened from the review sheet, and patient history
is never opened from a bill — a bill left open behind its own history list
is the reason viewBillById does not close it, so that you come back to the
list when the bill is shut. CSS only; no behaviour changed. */
#packReviewModal, #billModal { z-index:520; }
.modal{
background:#fff;border-radius:18px;width:100%;max-width:700px;
box-shadow:0 20px 60px rgba(0,0,0,.28);
margin:auto;
}
.modal-header{padding:16px 20px 13px;border-bottom:1px solid var(--border);display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:space-between;justify-content:space-between;position:-webkit-sticky;position:sticky;top:0;background:#fff;z-index:10;border-radius:18px 18px 0 0;}
.modal-header h3{font-size:15px;font-weight:700;color:var(--navy);}
.modal-body{padding:18px;}
.modal-footer{padding:13px 20px;border-top:1px solid var(--border);display:-webkit-flex;display:flex;gap:8px;-webkit-justify-content:flex-end;justify-content:flex-end;-webkit-flex-wrap:wrap;flex-wrap:wrap;border-radius:0 0 18px 18px;}
.close-btn{background:none;border:none;font-size:24px;cursor:pointer;color:var(--muted);padding:4px;min-width:36px;min-height:36px;-webkit-appearance:none;appearance:none;}
/* ── BILL ── */
.bill-preview{background:#fff;padding:20px;max-width:620px;margin:0 auto;font-size:13px;}
.bill-header{text-align:center;border-bottom:2.5px solid var(--navy);padding-bottom:12px;margin-bottom:12px;}
.bill-header h2{font-family:'Playfair Display',serif;color:var(--navy);font-size:1.15rem;line-height:1.3;}
.bill-header p{color:var(--muted);font-size:12px;margin-top:2px;}
.bill-info{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;gap:8px;margin-bottom:12px;font-size:13px;}
.bill-info-item{-webkit-flex:1 1 45%;flex:1 1 45%;display:-webkit-flex;display:flex;-webkit-flex-direction:column;flex-direction:column;gap:1px;}
.bill-info-item .lbl{font-weight:700;font-size:11px;color:var(--muted);text-transform:uppercase;}
.bill-table{width:100%;border-collapse:collapse;font-size:13px;margin:12px 0;}
.bill-table th{background:var(--navy);color:#fff;padding:7px 8px;text-align:left;font-size:12px;}
.bill-table td{padding:7px 8px;border-bottom:1px solid var(--border);font-size:13px;}
.bill-totals{border-top:2px solid var(--navy);padding-top:10px;margin-top:6px;}
.bill-row{display:-webkit-flex;display:flex;-webkit-justify-content:space-between;justify-content:space-between;font-size:14px;padding:3px 0;}
.bill-row.total{font-weight:700;font-size:15px;color:var(--navy);border-top:1px solid var(--border);margin-top:5px;padding-top:7px;}
.bill-row.paid{color:var(--green);font-weight:600;}
.bill-row.due{color:var(--red);font-weight:700;}
.bill-row.gst{color:var(--purple);}
/* ── DATE FILTER BAR ── */
.filter-bar{background:var(--card);border:1px solid var(--border);border-radius:12px;padding:12px 14px;margin-bottom:14px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:8px;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.filter-bar label{font-size:13px;font-weight:700;color:var(--navy);}
.quick-filters{display:-webkit-flex;display:flex;gap:6px;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.qf-btn{padding:8px 12px;border-radius:20px;font-size:13px;font-weight:600;cursor:pointer;border:1.5px solid var(--border);background:#fff;color:var(--muted);-webkit-transition:.2s;transition:.2s;min-height:36px;-webkit-appearance:none;appearance:none;}
.qf-btn.active{background:var(--teal);color:#fff;border-color:var(--teal);}
.date-range-inputs{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:6px;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.date-range-inputs input{width:140px;}
.date-range-inputs span{color:var(--muted);font-size:13px;}
/* ── TABS ── */
.tabs{display:-webkit-flex;display:flex;border-bottom:2px solid var(--border);margin-bottom:16px;overflow-x:auto;-webkit-overflow-scrolling:touch;}
.tab{padding:10px 16px;font-size:14px;font-weight:600;cursor:pointer;color:var(--muted);border-bottom:2.5px solid transparent;margin-bottom:-2px;white-space:nowrap;-webkit-transition:.2s;transition:.2s;min-height:44px;}
.tab.active{color:var(--teal);border-bottom-color:var(--teal);}
/* ── ALERTS ── */
.alert{padding:10px 13px;border-radius:9px;font-size:13px;margin-bottom:12px;line-height:1.55;overflow-wrap:anywhere;}
/* v10.24f: .alert used to be display:flex. Every word and every
inside became a flex item, so the low-stock list rendered as a row of
one-character columns the moment the page was correctly constrained.
It never showed before only because the whole column was oversized and
the row simply ran off the screen instead. Alerts are prose — block.
The one alert that genuinely needs a row (the cleanup banner) sets
display:flex inline, which still wins. */
.alert-red{background:#fdeaea;color:var(--red);border:1px solid #f5c6c6;}
.alert-amber{background:#fff3e8;color:#c97c3a;border:1px solid #f8d5b5;}
.alert-green{background:#e6f7f5;color:var(--green);border:1px solid #b5e5df;}
/* ── FOLLOW-UP CARDS ── */
.followup-card{background:#fff;border-radius:11px;border:1px solid var(--border);padding:12px;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:space-between;justify-content:space-between;gap:10px;margin-bottom:8px;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.followup-card.today{border-color:var(--amber);background:#fffbf5;}
.followup-card.overdue{border-color:var(--red);background:#fff8f8;}
/* ── CONFIRM DIALOG ── */
.confirm-box{position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(15,37,71,.55);z-index:600;display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;-webkit-justify-content:center;justify-content:center;padding:20px;}
.confirm-inner{background:#fff;border-radius:16px;padding:24px;max-width:360px;width:100%;text-align:center;box-shadow:0 20px 60px rgba(0,0,0,.28);}
.confirm-inner h3{font-size:16px;font-weight:700;color:var(--navy);margin-bottom:9px;}
.confirm-inner p{font-size:14px;color:var(--muted);margin-bottom:18px;line-height:1.5;}
.confirm-inner .btns{display:-webkit-flex;display:flex;gap:9px;-webkit-justify-content:center;justify-content:center;}
/* ── MISC ── */
.hidden{display:none !important;}
.page{display:none;} .page.active{display:block;}
.search-box{position:relative;} .search-box input{padding-left:35px;}
.search-box::before{content:'🔍';position:absolute;left:10px;top:50%;-webkit-transform:translateY(-50%);transform:translateY(-50%);font-size:14px;z-index:1;}
.empty{text-align:center;padding:32px 20px;color:var(--muted);}
.empty .icon{font-size:2rem;margin-bottom:7px;display:block;}
.empty p{font-size:14px;}
.stock-low{color:var(--red);font-weight:700;}.stock-ok{color:var(--green);}.stock-mid{color:var(--amber);}
.overlay-bg{display:none;position:fixed;top:0;left:0;right:0;bottom:0;background:rgba(0,0,0,.4);z-index:99;}
.overlay-bg.show{display:block;}
.hamburger{display:none;-webkit-flex-direction:column;flex-direction:column;gap:5px;cursor:pointer;padding:8px;min-height:44px;-webkit-justify-content:center;justify-content:center;}
.hamburger span{width:22px;height:2.5px;background:var(--navy);border-radius:2px;display:block;}
.divider{height:1px;background:var(--border);margin:12px 0;}
.tag{display:inline-block;padding:3px 8px;border-radius:6px;font-size:12px;font-weight:700;background:var(--bg);color:var(--muted);}
.admin-only-hint{font-size:12px;color:var(--muted);font-style:italic;padding:6px 0;}
.cash-amt{color:var(--cash);font-weight:700;}.online-amt{color:var(--online);font-weight:700;}
/* ── NEW VISIT LAYOUT ── */
.visit-layout{display:-webkit-flex;display:flex;gap:16px;-webkit-align-items:flex-start;align-items:flex-start;}
.visit-form{-webkit-flex:1;flex:1;min-width:0;}
.visit-summary{width:340px;-webkit-flex-shrink:0;flex-shrink:0;position:-webkit-sticky;position:sticky;top:calc(66px + var(--safe-top));}
/* ── RESPONSIVE ── */
@media(max-width:820px){
.sidebar{-webkit-transform:translateX(-100%);transform:translateX(-100%);}
.sidebar.open{-webkit-transform:translateX(0);transform:translateX(0);}
.main{margin-left:0;}
.form-grid > .form-group{-webkit-flex:1 1 100%;flex:1 1 100%;}
.form-group.full{-webkit-flex:1 1 100%;flex:1 1 100%;}
.content{padding:12px;}
.topbar{padding:0 12px;padding-top:var(--safe-top);height:calc(50px + var(--safe-top));}
.hamburger{display:-webkit-flex !important;display:flex !important;}
.visit-layout{-webkit-flex-direction:column-reverse;flex-direction:column-reverse;}
.visit-summary{width:100%;position:static;}
}
@media(max-width:480px){
.login-box{padding:22px 16px;}
.stat-card{-webkit-flex:1 1 calc(50% - 5px);flex:1 1 calc(50% - 5px);}
.bill-table{font-size:12px;}
.bill-table td,.bill-table th{padding:5px 6px;}
.topbar-date{display:none;}
}
@media print{
#loginScreen,#appShell .sidebar,#appShell .topbar,.no-print{display:none !important;}
.main{margin-left:0;}
.bill-preview{box-shadow:none;border:none;padding:0;}
}
.rev-btn{padding:7px 13px;border-radius:20px;font-size:13px;font-weight:600;
cursor:pointer;border:1.5px solid var(--border);background:#fff;
color:var(--muted);min-height:36px;transition:.2s;}
.rev-btn.active{background:var(--navy);color:#fff;border-color:var(--navy);}
.rev-btn:active{opacity:.85;}
/* PWA / App shell styles */
@media (display-mode: standalone) {
.topbar { padding-top: max(var(--safe-top), 20px); height: calc(60px + max(var(--safe-top), 20px)); }
body { user-select: none; -webkit-user-select: none; }
}
/* Prevent pull-to-refresh on iOS */
html { overscroll-behavior-y: contain; }
/* App-like tap highlight */
* { -webkit-tap-highlight-color: rgba(0,168,150,0.1); }
/* Smooth scrolling everywhere */
* { scroll-behavior: smooth; -webkit-overflow-scrolling: touch; }
/* Splash animation */
@keyframes spin { to { transform: rotate(360deg); } }
/* ══════════════════════════════════════════════════════
MOBILE-FIRST DESIGN — iPhone + Android compatible
Only activates on screens ≤ 768px — desktop unchanged
══════════════════════════════════════════════════════ */
/* ── Bottom nav hidden on desktop ── */
#bottomNav { display: none; }
/* v9.102 — specialty tags and the investigation list */
.spec-tag{display:inline-block;font-size:10px;font-weight:700;line-height:1;padding:3px 7px;border-radius:20px;margin-left:5px;vertical-align:middle;white-space:nowrap;background:#eef2f6;color:#5f7080;}
.spec-gynae{background:#f3ecfa;color:#6b3fa0;} .spec-obs{background:#fbecf3;color:#a03f74;}
.spec-ortho{background:#e8f3f1;color:#0a544e;} .spec-physio{background:#eaf6ef;color:#1b6b3a;}
.inv-grp{border:1px solid #e4ebf0;border-radius:10px;margin-bottom:9px;overflow:hidden;}
.inv-grp-h{background:#f6f9fb;padding:7px 11px;font-size:12px;font-weight:700;color:#14202b;}
.inv-row{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:9px;padding:7px 11px;border-top:1px solid #eef2f6;font-size:13px;}
.inv-row .inv-d{color:#8a99a6;font-size:12px;min-width:82px;}
.inv-row .inv-n{color:#8a99a6;font-size:11.5px;flex:1;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
@media (max-width: 768px) {
/* ══════════════════════════════════════════
MOBILE-FIRST — complete rewrite
Tested structure:
#appShell > .sidebar (fixed) + .main
.main > .topbar + .content
.content > .page divs
══════════════════════════════════════════ */
/* ── Safe area (iPhone notch/home bar) ── */
:root {
--safe-top: env(safe-area-inset-top, 0px);
--safe-bottom: env(safe-area-inset-bottom, 0px);
}
/* ── v9.70: the menu drawer works on phones again ──
This block used to say `.sidebar { display: none !important; }`.
The hamburger was still on screen and still called toggleSidebar(),
but a display:none element cannot slide in, so on a phone the button
did nothing and SEVEN pages became unreachable — Reception Desk
(where appointments are booked), Prescription, Follow-Ups, Medicines,
Daily Report, Settings and Join Requests. The bottom bar only ever
had five slots. The drawer is restored, above the bottom bar. */
.sidebar {
display: -webkit-flex !important; display: flex !important;
z-index: 10001 !important;
width: 82% !important; max-width: 300px !important;
}
.overlay-bg { z-index: 10000 !important; }
.main { margin-left: 0 !important; }
/* ── Content area: pad bottom for nav bar ── */
.content {
padding: 8px 10px calc(76px + var(--safe-bottom)) !important;
-webkit-overflow-scrolling: touch;
}
/* ── Topbar ── */
.topbar {
padding: 8px 12px !important;
height: auto !important;
min-height: 50px;
}
.topbar h1 { font-size: 13px !important; }
#syncBadge { font-size: 10px !important; padding: 2px 6px !important; }
/* ── Bottom navigation bar ── */
#bottomNav {
display: -webkit-flex !important;
display: flex !important;
position: fixed;
bottom: 0; left: 0; right: 0;
height: calc(60px + var(--safe-bottom));
padding-bottom: var(--safe-bottom);
background: #fff;
border-top: 1.5px solid #e2e8f0;
z-index: 9999;
box-shadow: 0 -2px 12px rgba(0,0,0,.08);
}
.bnav-item {
-webkit-flex: 1; flex: 1;
display: -webkit-flex; display: flex;
-webkit-flex-direction: column; flex-direction: column;
-webkit-align-items: center; align-items: center;
-webkit-justify-content: center; justify-content: center;
gap: 2px;
border: none; background: transparent;
color: #94a3b8; font-size: 10px; font-weight: 600;
font-family: inherit; cursor: pointer;
-webkit-tap-highlight-color: transparent;
padding: 6px 2px;
}
.bnav-icon { font-size: 22px; line-height: 1.2; }
.bnav-item.active { color: #0f2547; }
.bnav-item:active { opacity: .7; }
.bnav-add {
background: #0f2547 !important; color: #fff !important;
border-radius: 14px !important;
margin: 6px 3px !important;
-webkit-flex: 1.3 !important; flex: 1.3 !important;
box-shadow: 0 3px 10px rgba(15,37,71,.3) !important;
}
.bnav-add .bnav-icon { font-size: 24px !important; }
/* ── Cards ── */
.card { border-radius: 12px !important; margin-bottom: 10px !important; }
.card-body { padding: 10px !important; }
.card-header { padding: 10px 12px !important; font-size: 13px !important; }
/* ── Stats grid: 2 columns ── */
.stats-grid {
grid-template-columns: 1fr 1fr !important;
gap: 8px !important;
}
.stat-card { padding: 12px 10px !important; border-radius: 12px !important; }
.stat-value { font-size: 20px !important; }
.stat-label { font-size: 10px !important; }
/* ── Quick actions 2×2 grid ── */
.quick-actions {
display: -webkit-flex !important; display: flex !important;
-webkit-flex-wrap: wrap !important; flex-wrap: wrap !important;
gap: 8px !important; margin-bottom: 12px !important;
}
.quick-action-btn {
-webkit-flex: 1 1 calc(50% - 4px); flex: 1 1 calc(50% - 4px);
background: #fff; border: 1.5px solid #e2e8f0;
border-radius: 12px; padding: 14px 8px;
text-align: center; cursor: pointer;
font-size: 12px; font-weight: 700; color: #0f2547;
display: -webkit-flex; display: flex;
-webkit-flex-direction: column; flex-direction: column;
-webkit-align-items: center; align-items: center;
gap: 5px; box-shadow: 0 1px 4px rgba(0,0,0,.05);
-webkit-tap-highlight-color: transparent;
}
.quick-action-btn:active { opacity: .8; }
.qa-icon { font-size: 26px; line-height: 1; }
/* ── Forms: prevent iOS zoom (must be 16px) ── */
input, select, textarea {
font-size: 16px !important;
-webkit-appearance: none; appearance: none;
}
input[type="text"], input[type="number"], input[type="email"],
input[type="password"], input[type="tel"], input[type="date"],
input[type="search"], select {
height: 46px !important;
padding: 0 12px !important;
border-radius: 10px !important;
}
textarea {
min-height: 72px !important;
padding: 10px 12px !important;
border-radius: 10px !important;
}
.form-group { margin-bottom: 12px !important; }
.form-group label { font-size: 12px !important; font-weight: 700 !important; margin-bottom: 5px !important; display: block; }
.form-grid { grid-template-columns: 1fr !important; }
/* ── Buttons ── */
.btn {
min-height: 46px !important;
font-size: 14px !important;
border-radius: 10px !important;
-webkit-tap-highlight-color: transparent;
}
.btn:active { opacity: .8; }
.btn-sm { min-height: 38px !important; font-size: 12px !important; }
.btn-full, .btn-f {
width: 100% !important;
display: -webkit-flex !important; display: flex !important;
-webkit-justify-content: center !important; justify-content: center !important;
}
/* ── Tabs: horizontal scroll ── */
.tabs {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
-webkit-flex-wrap: nowrap !important; flex-wrap: nowrap !important;
padding-bottom: 2px;
scrollbar-width: none;
}
.tabs::-webkit-scrollbar { display: none; }
.tab {
min-width: max-content !important;
font-size: 12px !important;
padding: 7px 12px !important;
white-space: nowrap;
}
/* ── Tables: horizontal scroll ── */
.table-wrap {
overflow-x: auto !important;
-webkit-overflow-scrolling: touch;
}
table { min-width: 560px; }
/* ── Today visit cards (dashboard) ── */
#todayCardList { display: block; }
#todayTableWrap { display: none !important; }
.today-patient-card {
background: #fff;
border-radius: 12px; padding: 12px 14px;
margin-bottom: 8px;
box-shadow: 0 1px 4px rgba(0,0,0,.06);
border-left: 4px solid #2a9d8f;
cursor: pointer;
-webkit-tap-highlight-color: transparent;
}
.today-patient-card:active { opacity: .85; }
.today-patient-card.has-due { border-left-color: #e63946; }
.tpc-top { display:-webkit-flex;display:flex;justify-content:space-between;margin-bottom:6px; }
.tpc-name { font-size:14px;font-weight:700;color:#0f2547; }
.tpc-time { font-size:11px;color:#94a3b8; }
.tpc-mid { display:-webkit-flex;display:flex;gap:5px;flex-wrap:wrap;margin-bottom:8px; }
.tpc-service { font-size:11px;background:#f0f4f8;padding:2px 8px;border-radius:20px;color:#0f2547;font-weight:600; }
.tpc-bot { display:-webkit-flex;display:flex;justify-content:space-between;align-items:center; }
.tpc-amount { font-size:15px;font-weight:800;color:#0f2547; }
.tpc-status-paid { font-size:11px;color:#2a9d8f;font-weight:700; }
.tpc-status-due { font-size:11px;color:#e63946;font-weight:700; }
/* ── Patient mobile cards ── */
#patientCardList { display: block; }
#patientTableWrap { display: none !important; }
.patient-mobile-card {
background: #fff; border-radius: 12px;
padding: 12px 14px; margin-bottom: 8px;
box-shadow: 0 1px 4px rgba(0,0,0,.05);
border: 1px solid #e2e8f0;
}
.pmc-top { display:-webkit-flex;display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4px; }
.pmc-name { font-size:14px;font-weight:700;color:#0f2547; }
.pmc-visits { background:#0f2547;color:#fff;font-size:10px;font-weight:700;padding:2px 7px;border-radius:10px; }
.pmc-meta { font-size:11px;color:#94a3b8;margin-bottom:8px;line-height:1.6; }
.pmc-amounts { display:-webkit-flex;display:flex;gap:6px;flex-wrap:wrap;margin-bottom:8px; }
.pmc-amt-box { -webkit-flex:1;flex:1;min-width:60px;background:#f8fafc;border-radius:8px;padding:6px;text-align:center; }
.pmc-amt-label { font-size:9px;color:#94a3b8;font-weight:600;text-transform:uppercase; }
.pmc-amt-val { font-size:13px;font-weight:800;color:#0f2547; }
.pmc-amt-val.due-val { color:#e63946; }
.pmc-actions { display:-webkit-flex;display:flex;gap:8px; }
/* ── Follow-up cards ── */
.followup-card {
background: #fff; border-radius: 12px;
padding: 12px 14px; margin-bottom: 8px;
box-shadow: 0 1px 4px rgba(0,0,0,.05);
border: 1px solid #e2e8f0;
}
.followup-card.overdue { border-left: 4px solid #e63946; }
.followup-card.today { border-left: 4px solid #f4a261; }
/* ── New visit wizard ── */
.wizard-steps {
display: -webkit-flex; display: flex;
gap: 0; background: #f1f5f9;
border-radius: 10px; padding: 3px;
margin-bottom: 12px;
}
.wizard-step {
-webkit-flex:1; flex:1; text-align:center;
padding:8px 2px; font-size:11px; font-weight:700;
color:#94a3b8; border-radius:8px; cursor:pointer;
-webkit-tap-highlight-color: transparent;
}
.wizard-step.active { background:#0f2547; color:#fff; }
.wizard-step.done { color:#2a9d8f; }
/* Mobile wizard sticky footer */
#mobileWizardNav {
position: -webkit-sticky; position: sticky;
bottom: calc(62px + var(--safe-bottom));
background: #fff;
padding: 10px 0 4px;
border-top: 1px solid #e2e8f0;
z-index: 100;
display: flex; gap: 8px;
}
/* ── Bill modal: slide up from bottom ── */
.modal-overlay {
-webkit-align-items: flex-end !important;
align-items: flex-end !important;
}
.modal {
margin: 0 !important;
border-radius: 20px 20px 0 0 !important;
max-height: 92vh !important;
overflow-y: auto !important;
-webkit-overflow-scrolling: touch;
width: 100% !important;
max-width: 100% !important;
padding-bottom: var(--safe-bottom) !important;
}
.modal-footer {
position: -webkit-sticky; position: sticky;
bottom: 0; background: #fff;
padding: 10px 12px !important;
border-top: 1px solid #e2e8f0;
display: -webkit-flex !important; display: flex !important;
gap: 8px !important;
-webkit-flex-wrap: wrap !important; flex-wrap: wrap !important;
}
.modal-footer .btn {
-webkit-flex:1; flex:1;
min-width: 90px;
-webkit-justify-content:center; justify-content:center;
}
/* ── Stock page ── */
.stock-table th, .stock-table td { font-size: 12px !important; padding: 8px 6px !important; }
/* ── Report page ── */
.report-stats { grid-template-columns: 1fr 1fr !important; }
/* ── Settings page ── */
.settings-grid { grid-template-columns: 1fr !important; }
/* ── Medicine rows in new visit ── */
.med-row { -webkit-flex-wrap:wrap !important; flex-wrap:wrap !important; gap:6px !important; }
.med-row select { min-width:100% !important; }
/* ── Checkbox size ── */
input[type="checkbox"] { width:20px !important; height:20px !important; min-height:20px !important; }
/* ── Collapse Revenue panel on mobile by default ── */
#ptRevPanel { display: none; }
#ptRevToggle::after { content: " (tap to expand)"; font-size:10px; }
/* ── Page title in topbar ── */
#pageTitle { font-size:14px !important; }
/* ── Alert banners ── */
.alert { font-size:12px !important; padding:8px 10px !important; border-radius:8px !important; }
/* ── Empty state ── */
.empty { padding:24px 16px !important; }
.empty p { font-size:13px !important; }
/* Modals must clear the bottom nav */
.modal-overlay {
align-items: flex-start !important;
padding: 12px 12px calc(90px + var(--safe-bottom, 0px)) 12px !important;
overflow-y: auto !important;
}
.modal, .desk-contact-modal {
margin-top: auto;
margin-bottom: auto;
max-height: calc(100vh - 120px - var(--safe-bottom, 0px)) !important;
overflow-y: auto !important;
}
}
/* JS controls card/table visibility */
.qv-btn {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
gap: 8px;
padding: 16px 10px;
background: #f8fafc;
border: 2px solid #e2e8f0;
border-radius: 14px;
cursor: pointer;
font-family: inherit;
color: #0f2547;
transition: all .15s;
-webkit-tap-highlight-color: transparent;
}
.qv-btn:hover, .qv-btn:active {
background: #0f2547;
color: #fff;
border-color: #0f2547;
transform: scale(.97);
}
/* ══════════════════════════════════════════════════════════════════
v9.103 — THE TABLET FIX
------------------------------------------------------------------
The bug, exactly: the sidebar slid off-screen at max-width:820px,
but the bottom bar only appeared at max-width:768px. Everything in
between had NEITHER — no sidebar, no bottom bar, only a hamburger.
An iPad Air / iPad 10.9 in portrait is 820px wide, precisely inside
that gap, so every single navigation on the clinic's tablet cost
two taps: open the drawer, then choose.
This block covers ONLY 769–820px. Nothing above or below that range
is touched, so phones (<=768) and laptops (>820) render exactly as
they did in v9.102. The tablet now keeps a permanent sidebar — one
tap to anywhere, and no drawer to dismiss.
══════════════════════════════════════════════════════════════════ */
@media (min-width:769px) and (max-width:820px){
.sidebar{
-webkit-transform:translateX(0) !important; transform:translateX(0) !important;
width:208px !important;
}
.main{ margin-left:208px !important; }
.hamburger{ display:none !important; }
.overlay-bg{ display:none !important; }
#bottomNav{ display:none !important; }
.content{ padding:14px !important; }
/* 14 entries have to fit an 820px-tall screen without scrolling */
.nav-item{ padding:9px 14px; font-size:13.5px; min-height:40px; }
.nav-section{ padding:8px 0 2px 14px; }
.sidebar-logo{ padding:14px !important; }
.topbar{ padding:0 14px; }
}
/* ── v9.103 — quick actions above 768px ────────────────────────────
These six dashboard tiles were only ever styled inside the
max-width:768px block. Above it they had no styling at all, so on a
laptop and on the iPad they rendered as six bare unstyled lines at
the top of the dashboard. They are also the ONLY way in to My Desk,
Owner View and Day Review, so hiding them was not an option. Scoped
to min-width:769px, so the phone layout is untouched. */
@media (min-width:769px){
.quick-actions{
display:-webkit-flex; display:flex;
-webkit-flex-wrap:wrap; flex-wrap:wrap;
gap:10px; margin-bottom:14px;
}
.quick-action-btn{
-webkit-flex:1 1 148px; flex:1 1 148px;
background:#fff; border:1.5px solid var(--border);
border-radius:12px; padding:14px 10px; text-align:center; cursor:pointer;
font-size:13px; font-weight:700; color:var(--navy);
display:-webkit-flex; display:flex;
-webkit-flex-direction:column; flex-direction:column;
-webkit-align-items:center; align-items:center;
gap:6px; box-shadow:0 1px 4px rgba(0,0,0,.05); transition:.15s;
}
.quick-action-btn:hover{ border-color:var(--teal2); }
.quick-action-btn .qa-icon{ font-size:20px; }
}
/* ── style block 2 of 3, from index.html ── */
/* ── v9.32 prescription styles (namespaced rx-) ── */
#page-prescribe .rx-card{background:#fff;border:1px solid #e4ebf0;border-radius:14px;padding:16px;margin-bottom:12px;box-shadow:0 1px 3px rgba(20,32,43,.05);}
#page-prescribe .rx-h{font-size:11px;text-transform:uppercase;letter-spacing:.1em;color:#8a99a6;margin:0 0 12px;font-weight:700;}
#page-prescribe .rx-phead{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;flex-wrap:wrap;}
#page-prescribe .rx-pname{font-size:20px;font-weight:700;margin:0;color:#14202b;}
#page-prescribe .rx-pmeta{color:#5f7080;font-size:13px;margin-top:3px;}
#page-prescribe .rx-srctag{font-size:12px;background:#e8f3f1;color:#0a544e;padding:5px 12px;border-radius:30px;font-weight:600;white-space:nowrap;}
#page-prescribe .rx-pk-row{border:1px solid #e4ebf0;border-radius:11px;margin-bottom:7px;background:#fff;overflow:hidden;display:flex;flex-wrap:wrap;align-items:stretch;}
#page-prescribe .rx-pk-row.open{border-color:#00a896;}
#page-prescribe .rx-pk-nm{flex:1;min-width:0;padding:11px 12px;cursor:pointer;font-size:14.5px;font-weight:600;color:#14202b;display:flex;flex-direction:column;gap:2px;}
#page-prescribe .rx-pk-nm:active{background:#e6f7f4;}
#page-prescribe .rx-pk-nm small{font-weight:500;font-size:11.5px;color:#8a99a6;}
#page-prescribe .rx-pk-i{border:none;border-left:1px solid #e4ebf0;background:#f8fafb;width:46px;font-size:16px;color:#5f7080;cursor:pointer;}
#page-prescribe .rx-pk-det{flex-basis:100%;padding:10px 12px;border-top:1px solid #e4ebf0;background:#f8fafb;font-size:12.5px;line-height:1.55;color:#3d4d5c;}
/* ══ v9.100 — PATIENT TIMELINE ══════════════════════════════════════
Desktop-first on purpose. This is the screen a doctor reads with the
patient in front of them, so the priority is DENSITY: as much of the
story visible at once as the screen allows, with the things you must not
forget — allergies, active problems, trends — pinned where they cannot
scroll away. Below 1024px it becomes a single column and the pinned
panel moves to the top, because on a phone "above the fold" beats
"beside". */
#page-timeline .pt-head{display:flex;align-items:flex-start;gap:12px;flex-wrap:wrap;margin-bottom:14px;}
#page-timeline .pt-id{flex:1;min-width:200px;}
#page-timeline .pt-id h2{font-size:22px;margin:0;color:#14202b;}
#page-timeline .pt-sub{font-size:13px;color:#5f7080;margin-top:3px;}
#page-timeline .pt-acts{display:flex;gap:7px;flex-wrap:wrap;}
#page-timeline .pt-grid{display:grid;grid-template-columns:minmax(0,1fr) 320px;gap:18px;align-items:start;}
#page-timeline .pt-main{min-width:0;}
#page-timeline .pt-side{position:sticky;top:12px;display:flex;flex-direction:column;gap:10px;}
#page-timeline .pt-al{padding:10px 12px;border-radius:10px;font-size:13px;line-height:1.5;}
#page-timeline .pt-al.bad{background:#fdecec;color:#96222b;font-weight:700;border:1.5px solid #f5b5b5;}
#page-timeline .pt-al.ok{background:#e6f7f4;color:#0d6b64;font-weight:600;}
#page-timeline .pt-al.unk{background:#fff8ec;color:#8a5a00;}
#page-timeline .pt-box{border:1px solid #e4ebf0;border-radius:11px;padding:11px 12px;background:#fff;}
#page-timeline .pt-box h4{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:#8a99a6;font-weight:700;margin:0 0 7px;}
#page-timeline .pt-kv{display:flex;justify-content:space-between;gap:8px;font-size:12.5px;padding:2px 0;color:#5f7080;}
#page-timeline .pt-kv b{color:#14202b;}
#page-timeline .pt-prob{display:flex;justify-content:space-between;gap:8px;font-size:13px;padding:3px 0;border-bottom:1px solid #f2f6f8;}
#page-timeline .pt-prob:last-child{border-bottom:none;}
#page-timeline .pt-prob small{color:#8a99a6;font-size:11px;white-space:nowrap;}
#page-timeline .pt-trend{display:flex;align-items:center;justify-content:space-between;gap:6px;font-size:12px;padding:3px 0;color:#5f7080;}
#page-timeline .pt-trend b{font-size:13px;color:#14202b;white-space:nowrap;}
#page-timeline .pt-muted{font-size:12px;color:#8a99a6;}
#page-timeline .pt-chips{display:flex;gap:6px;flex-wrap:wrap;margin-bottom:12px;}
#page-timeline .pt-chip{padding:5px 12px;border-radius:20px;border:1.5px solid #e4ebf0;background:#fff;font-size:12.5px;font-weight:600;color:#5f7080;cursor:pointer;}
#page-timeline .pt-chip.on{background:#00a896;border-color:#00a896;color:#fff;}
#page-timeline .pt-card{border:1px solid #e4ebf0;border-left:4px solid #cfe0e6;border-radius:10px;background:#fff;margin-bottom:8px;overflow:hidden;}
#page-timeline .pt-card.open{border-left-color:#00a896;}
#page-timeline .pt-cardhead{display:flex;align-items:center;gap:12px;padding:10px 12px;cursor:pointer;}
#page-timeline .pt-cardhead:hover{background:#f8fafb;}
#page-timeline .pt-when{min-width:132px;display:flex;flex-direction:column;}
#page-timeline .pt-when b{font-size:13.5px;color:#14202b;}
#page-timeline .pt-when small{font-size:11px;color:#8a99a6;}
#page-timeline .pt-dx{flex:1;min-width:0;font-size:14px;font-weight:600;color:#14202b;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}
#page-timeline .pt-amt{font-size:12.5px;color:#5f7080;white-space:nowrap;}
#page-timeline .pt-caret{color:#8a99a6;font-size:12px;}
#page-timeline .pt-fu{font-size:11.5px;padding:4px 12px;font-weight:600;}
#page-timeline .pt-fu.ok{background:#e6f7f4;color:#0d6b64;}
#page-timeline .pt-fu.warn{background:#fff8ec;color:#8a5a00;}
#page-timeline .pt-fu.bad{background:#fdecec;color:#96222b;}
#page-timeline .pt-body{padding:4px 12px 12px;border-top:1px solid #f2f6f8;}
#page-timeline .pt-row{display:flex;gap:10px;padding:5px 0;font-size:13px;line-height:1.55;border-bottom:1px solid #f8fafb;}
#page-timeline .pt-row:last-of-type{border-bottom:none;}
#page-timeline .pt-row > span{flex:none;width:112px;font-size:10.5px;text-transform:uppercase;letter-spacing:.06em;color:#8a99a6;font-weight:700;padding-top:3px;}
#page-timeline .pt-row > div{flex:1;min-width:0;color:#3d4d5c;}
#page-timeline .pt-med{padding:1px 0;}
#page-timeline .pt-med small{color:#8a99a6;}
#page-timeline .pt-prog{padding:1px 8px;border-radius:20px;font-size:11px;font-weight:700;text-transform:uppercase;}
#page-timeline .pt-prog.better{background:#e6f7f4;color:#0d6b64;}
#page-timeline .pt-prog.same{background:#f2f6f8;color:#5f7080;}
#page-timeline .pt-prog.worse{background:#fdecec;color:#96222b;}
#page-timeline .pt-links{display:flex;gap:7px;flex-wrap:wrap;margin-top:10px;}
@media(max-width:1024px){
#page-timeline .pt-grid{grid-template-columns:1fr;}
#page-timeline .pt-side{position:static;order:-1;}
#page-timeline .pt-when{min-width:100px;}
#page-timeline .pt-row{flex-direction:column;gap:1px;}
#page-timeline .pt-row > span{width:auto;padding-top:0;}
}
#page-prescribe .rx-calc{margin-top:7px;padding:6px 9px;border-radius:7px;background:#eef7f6;color:#0d6b64;font-size:12px;font-weight:600;line-height:1.5;}
#page-prescribe .rx-calc.need{background:#fff8ec;color:#8a5a00;display:flex;align-items:center;gap:6px;flex-wrap:wrap;}
#page-prescribe .rx-out-row{display:flex;align-items:center;gap:8px;padding:7px 0;border-bottom:1px solid var(--border);}
#page-prescribe .rx-out-l{flex:1;min-width:0;display:flex;flex-direction:column;gap:1px;}
#page-prescribe .rx-out-l span{font-size:13.5px;font-weight:600;color:#14202b;}
#page-prescribe .rx-out-l small{font-size:11px;color:#8a99a6;}
#page-prescribe .rx-out-v{max-width:88px;padding:7px 9px;}
#page-prescribe .rx-out-u{font-size:11.5px;color:#8a99a6;min-width:38px;}
#page-prescribe .rx-trend{padding:10px 0;border-bottom:1px solid var(--border);}
#page-prescribe .rx-trend:last-child{border-bottom:none;}
#page-prescribe .rx-trend-h{display:flex;justify-content:space-between;align-items:baseline;gap:8px;font-size:13px;color:#5f7080;margin-bottom:2px;}
#page-prescribe .rx-trend-h b{font-size:15px;color:#14202b;white-space:nowrap;}
#page-prescribe .rx-trend-f{font-size:11px;color:#8a99a6;}
#page-prescribe .rx-pk-row.pending{border-style:dashed;background:#fdfcf8;}
#page-prescribe .rx-pk-row.pending .rx-pk-nm{color:#7a6a4a;font-weight:600;}
#page-prescribe .rx-pk-flag{font-size:10px;font-weight:700;text-transform:uppercase;letter-spacing:.05em;color:#8a5a00;background:#fff1d6;padding:2px 6px;border-radius:20px;margin-left:5px;white-space:nowrap;}
#page-prescribe .rx-pk-head{font-size:10.5px;text-transform:uppercase;letter-spacing:.08em;color:#8a99a6;font-weight:700;margin:14px 0 6px;}
#page-prescribe .rx-pk-ok{margin-top:6px;padding:6px 8px;border-radius:7px;background:#e6f7f4;color:#0d6b64;font-size:12px;font-weight:600;}
#page-prescribe .rx-pk-note{margin-top:6px;padding:6px 8px;border-radius:7px;background:#fff8ec;color:#8a5a00;font-size:12px;}
#page-prescribe .rx-spx-row{display:flex;gap:8px;}
#page-prescribe .rx-spx{flex:1;text-align:center;padding:11px 6px;border:1px solid #e4ebf0;border-radius:11px;background:#fff;cursor:pointer;font-weight:600;font-size:14px;color:#5f7080;transition:all .15s;}
#page-prescribe .rx-spx.on{background:#0d6b64;border-color:#0a544e;color:#fff;box-shadow:0 3px 10px rgba(13,107,100,.26);}
#page-prescribe .rx-inp{width:100%;padding:11px 13px;border:1px solid #e4ebf0;border-radius:11px;font-size:15px;font-family:inherit;background:#fff;color:#14202b;box-sizing:border-box;}
#page-prescribe textarea.rx-inp{resize:vertical;min-height:54px;}
#page-prescribe .rx-inp:focus{outline:none;border-color:#0d6b64;box-shadow:0 0 0 3px #e8f3f1;}
#page-prescribe .rx-vitals{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;gap:8px;}
.rx-vitals>div{-webkit-flex:1 1 30%;flex:1 1 30%;min-width:96px;}
.rx-vitals .rx-inp{width:100%;}
.rx-chips{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px;}
#page-prescribe .rx-chip{background:#f1f5f7;border:1px solid #e4ebf0;border-radius:22px;padding:7px 14px;font-size:13.5px;cursor:pointer;user-select:none;transition:all .13s;font-weight:500;}
#page-prescribe .rx-chip.on{background:#0d6b64;color:#fff;border-color:#0d6b64;}
#page-prescribe .rx-addfree{margin-top:10px;font-size:13.5px;color:#0a544e;cursor:pointer;background:none;border:none;padding:6px 0;font-weight:600;}
#page-prescribe .rx-results{border:1px solid #e4ebf0;border-radius:11px;margin-top:8px;overflow:hidden;max-height:220px;overflow-y:auto;display:none;box-shadow:0 4px 14px rgba(20,32,43,.1);}
#page-prescribe .rx-results.show{display:block;}
#page-prescribe .rx-res{padding:11px 13px;border-bottom:1px solid #eef3f6;cursor:pointer;font-size:14px;display:flex;justify-content:space-between;align-items:center;gap:10px;}
#page-prescribe .rx-res:last-child{border-bottom:none;}
#page-prescribe .rx-res small{color:#8a99a6;margin-left:4px;}
#page-prescribe .rx-stk{font-size:11px;color:#1c7a4d;font-weight:600;white-space:nowrap;}
#page-prescribe .rx-nostk{font-size:11px;color:#8a99a6;white-space:nowrap;}
#page-prescribe .rx-item{border:1px solid #e4ebf0;border-radius:12px;padding:12px 13px;margin-top:10px;background:#fcfdfd;}
#page-prescribe .rx-item-top{display:flex;justify-content:space-between;align-items:center;gap:8px;}
#page-prescribe .rx-mn{font-weight:600;font-size:15px;}
#page-prescribe .rx-fm{color:#8a99a6;font-weight:400;font-size:13px;}
#page-prescribe .rx-flag{font-size:11px;color:#b08a3e;font-weight:600;margin-left:5px;}
#page-prescribe .rx-rm{color:#a4231f;background:none;border:none;font-size:22px;cursor:pointer;line-height:1;padding:0 2px;}
#page-prescribe .rx-dl{font-size:11px;color:#8a99a6;text-transform:uppercase;letter-spacing:.07em;margin:11px 0 6px;font-weight:600;}
#page-prescribe .rx-picks{display:flex;flex-wrap:wrap;gap:7px;align-items:center;}
#page-prescribe .rx-pk{background:#f1f5f7;border:1px solid #e4ebf0;border-radius:9px;padding:6px 12px;font-size:13.5px;cursor:pointer;font-weight:500;}
#page-prescribe .rx-pk.on{background:#0d6b64;color:#fff;border-color:#0d6b64;}
#page-prescribe .rx-pk.rx-guess{background:transparent;border:1px dashed #0d6b64;color:#0d6b64;font-weight:500;}
#page-prescribe .rx-sum{margin-top:10px;padding-top:8px;border-top:1px solid #eef3f6;font-size:12.5px;color:#5f7080;line-height:1.5;}
#page-prescribe .rx-qty{background:#e6f2f0;color:#0d6b64;border-radius:6px;padding:1px 7px;font-weight:500;white-space:nowrap;}
#page-prescribe .rx-prov{font-size:11.5px;color:#8a99a6;margin-top:8px;}
#page-prescribe .rx-strength{border-style:dashed;}
@media print{ #page-prescribe .rx-sum,#page-prescribe .rx-prov{display:none;} }
#page-prescribe .rx-dur{max-width:110px;padding:7px 10px;font-size:13.5px;}
#page-prescribe .rx-regno{font-size:12.5px;color:#5f7080;font-weight:500;}
#page-prescribe .rx-recent-row{display:flex;justify-content:space-between;align-items:center;gap:10px;padding:10px 4px;border-bottom:1px solid #eef3f6;cursor:pointer;font-size:14px;}
#page-prescribe .rx-recent-row:last-child{border-bottom:none;}
/* ── v9.69: this patient's own past prescriptions ── */
#page-prescribe #rx-prevCard{border-left:4px solid #0d6b64;}
#page-prescribe .rx-prev{border:1px solid #e4ebf0;border-radius:10px;margin-bottom:8px;overflow:hidden;background:#fff;}
#page-prescribe .rx-prev.latest{border-color:#0d6b64;}
#page-prescribe .rx-prev-head{display:flex;justify-content:space-between;align-items:flex-start;gap:10px;padding:10px 12px;cursor:pointer;background:#f7fafb;}
#page-prescribe .rx-prev.latest .rx-prev-head{background:#eef7f5;}
#page-prescribe .rx-prev-when{font-size:14px;font-weight:700;color:#0f2547;}
#page-prescribe .rx-prev-ago{font-size:11.5px;color:#8a99a6;font-weight:500;}
#page-prescribe .rx-prev-dx{font-size:13px;color:#33505f;margin-top:2px;}
#page-prescribe .rx-prev-sum{font-size:11.5px;color:#8a99a6;margin-top:3px;}
#page-prescribe .rx-prev-chev{font-size:15px;color:#8a99a6;line-height:1;padding-top:2px;}
#page-prescribe .rx-prev-body{padding:2px 12px 12px;border-top:1px solid #eef3f6;}
#page-prescribe .rx-prev-lbl{font-size:10.5px;text-transform:uppercase;letter-spacing:.07em;color:#8a99a6;font-weight:700;margin:11px 0 4px;}
#page-prescribe .rx-prev-txt{font-size:13.5px;color:#22333f;line-height:1.5;}
#page-prescribe .rx-prev-med{font-size:13.5px;color:#22333f;padding:5px 0;border-bottom:1px dashed #eef3f6;}
#page-prescribe .rx-prev-med:last-child{border-bottom:none;}
#page-prescribe .rx-prev-med b{color:#0a544e;}
#page-prescribe .rx-prev-acts{display:flex;gap:8px;flex-wrap:wrap;margin-top:12px;}
#page-prescribe .rx-prev-btn{flex:1;min-width:150px;border:1px solid #0d6b64;background:#fff;color:#0d6b64;border-radius:9px;padding:9px 12px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;}
#page-prescribe .rx-prev-btn.fill{background:#0d6b64;color:#fff;}
#page-prescribe .rx-prev-tag{display:inline-block;background:#0d6b64;color:#fff;font-size:9.5px;font-weight:800;padding:2px 7px;border-radius:20px;margin-left:6px;vertical-align:middle;letter-spacing:.04em;}
/* print sheet */
.rxp-sheet{background:#fff;padding:8px 4px;}
.rxp-lh{display:flex;justify-content:space-between;align-items:flex-end;border-bottom:2px solid #0d6b64;padding-bottom:12px;}
.rxp-lh h3{margin:0;color:#0a544e;font-size:21px;}
.rxp-sub{font-size:11.5px;color:#5f7080;margin-top:3px;}
.rxp-r{text-align:right;font-size:12px;color:#5f7080;}
.rxp-prow{display:flex;justify-content:space-between;gap:14px;margin:14px 0 2px;font-size:13px;}
.rxp-pn{font-weight:700;font-size:15px;}
.rxp-clin{background:#f3f9f8;border-radius:9px;padding:10px 13px;margin:12px 0;font-size:12.5px;line-height:1.7;}
.rxp-clin b{color:#0a544e;}
.rxp-bigrx{font-size:26px;color:#0d6b64;font-weight:700;margin:0 0 2px;line-height:1;}
/* v10.22 — THE MEDICINE BLOCK, SHADED AS ONE
The tint is what lets a pharmacist find the ℞ section in one glance.
It costs nothing vertically: the 8px/11px padding replaces margin that
was already there — .rxp-bigrx lost its 8px top margin and the box
carries 8px of its own, so the sheet is the same height as before.
Shading the whole section once, rather than each clinical line
separately, is the difference between 44px of chrome per block and
44px for the entire prescription. */
.rxp-medbox{background:#f3f9f8;border-radius:9px;padding:8px 11px;margin:6px 0 4px;}
.rxp-medbox .rxp-tbl tr:last-child td{border-bottom:0;}
/* The diagnosis is the one line a pharmacist, a referring doctor and an
insurer all look for first. Capitals + weight, no extra vertical space. */
.rxp-dx{text-transform:uppercase;font-weight:700;letter-spacing:.02em;}
.rxp-tbl{width:100%;border-collapse:collapse;font-size:13px;}
.rxp-tbl td{padding:8px 4px;border-bottom:1px solid #e4ebf0;vertical-align:top;}
.rxp-dz{text-align:right;color:#5f7080;}
/* v10.24c: .rxp-dz was white-space:nowrap, so a long dose line ("Intra-articular,
right knee · Stat · given in clinic under all aseptic precautions") could not
wrap and squeezed the NAME column instead — printing "Pantoprazole 40 / mg
Tablet" and "Knee Brace / (hinged) Brace / / Support" broken across lines on a
legal document. Fixed widths, and the dose wraps rather than the drug name. */
.rxp-tbl{table-layout:fixed;}
.rxp-tbl td:first-child{width:44%;padding-right:10px;}
.rxp-tbl td:last-child{width:56%;}
.rxp-tbl td:first-child b{white-space:nowrap;}
.rxp-allergy{margin:8px 0;padding:7px 10px;border:1.5px solid #b23a3a;border-radius:6px;
background:#fdf1f1;color:#a11f1f;font-weight:800;font-size:12.5px;letter-spacing:.02em;}
.rxp-noallergy{margin:8px 0;padding:5px 10px;border-left:3px solid #7bb894;color:#3f6b52;font-size:11.5px;}
.rxp-fu{margin-top:12px;padding:7px 10px;border:1px dashed #9bb2c0;border-radius:6px;font-size:12px;color:#2a4a5e;}
.rxp-sig{margin-top:40px;text-align:right;font-size:13px;}
.rxp-ln{border-top:1.5px solid #14202b;display:inline-block;min-width:200px;padding-top:5px;text-align:center;}
.rxp-ln small{color:#8a99a6;font-size:11.5px;}
@media print{
body *{visibility:hidden;}
#rxPrintModal,#rxPrintModal *{visibility:visible;}
#rxPrintModal{position:absolute;inset:0;background:#fff;}
#rxPrintModal .modal-box{max-width:100%;box-shadow:none;}
/* v10.48: the action rows carry an inline display:flex (set by rxOpenPrint), which beat this
rule — so "Close" and "Print / Save PDF" were printing on every prescription. */
#rxPrintModal .modal-header,.rxp-actions{display:none !important;}
}
/* ══ v9.99.2 — PRINTING A BILL ═════════════════════════════════════
The block above hides every element and re-shows only the prescription
sheet. It is the last stylesheet in the file, so it also governed bills —
and nothing in it ever re-showed the bill. Printing one gave a blank page.
The bill also lives inside #billModal, a position:fixed overlay with
overflow:auto, so even when visible it would have been cut to a single
screenful while the PDF printed the whole thing. That is the difference
you saw between the print-out and the PDF.
Scoped to body.print-bill, set by printBill(), so the prescription rules
above are untouched. #appShell is hidden rather than merely made invisible:
visibility:hidden still occupies its space, which would have pushed the
bill onto page four or five behind blank sheets. */
@media print{
body.print-bill #appShell,
body.print-bill #loginScreen,
body.print-bill #historyModal,
body.print-bill #rxPrintModal,
body.print-bill #billModal .modal-header,
body.print-bill .no-print{ display:none !important; }
body.print-bill #billModal,
body.print-bill #billModal *{ visibility:visible !important; }
body.print-bill #billModal{
position:static !important; display:block !important;
background:#fff !important; padding:0 !important; margin:0 !important;
overflow:visible !important; z-index:auto !important;
}
body.print-bill #billModal .modal{
position:static !important; max-height:none !important;
overflow:visible !important; box-shadow:none !important;
margin:0 !important; border-radius:0 !important;
max-width:100% !important; width:100% !important;
}
body.print-bill #billModal .modal-body{
max-height:none !important; overflow:visible !important; padding:0 !important;
}
body.print-bill .bill-preview{ box-shadow:none; border:none; padding:0; }
body.print-bill .bill-table tr,
body.print-bill .bill-row{ page-break-inside:avoid; }
}
/* ── style block 3 of 3, from index.html ── */
/* ══════════════════════════════════════════════════════════════
v9.106 — prescribe page layout only.
Two columns on wide screens: quiet patient context on the left,
one working step at a time on the right. Below 1000px nothing
changes: every step shows and the page reads exactly as before.
No card, field, id or handler was altered to make this work.
To undo: delete this style block and the script block below it.
══════════════════════════════════════════════════════════════ */
#page-prescribe .rxcols{display:block;}
#page-prescribe .rxcol{min-width:0;}
#page-prescribe .rxstep-nav{display:none;}
@media (min-width:1000px){
#page-prescribe .rxcols{
display:grid;
grid-template-columns:300px minmax(0,1fr);
gap:0 16px;
align-items:start;
}
#page-prescribe .rxcol-b{max-width:760px;}
#page-prescribe .rxstep-nav{
display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;
gap:6px;margin:0 0 12px;-webkit-align-items:center;align-items:center;
}
#page-prescribe .rxstep-btn{
-webkit-appearance:none;appearance:none;cursor:pointer;
display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;gap:7px;
background:#fff;border:1px solid #e4ebf0;border-radius:10px;
padding:8px 13px;font:inherit;font-size:13.5px;color:#5b6b7a;
}
#page-prescribe .rxstep-btn:hover{border-color:#b9c7d2;}
#page-prescribe .rxstep-btn.on{background:#0d6b64;border-color:#0d6b64;color:#fff;}
#page-prescribe .rxstep-n{
display:-webkit-inline-flex;display:inline-flex;
-webkit-align-items:center;align-items:center;
-webkit-justify-content:center;justify-content:center;
width:19px;height:19px;border-radius:50%;
background:#eef3f6;color:#5b6b7a;font-size:11px;font-weight:600;
}
#page-prescribe .rxstep-btn.on .rxstep-n{background:rgba(255,255,255,.24);color:#fff;}
#page-prescribe .rxstep-all{
-webkit-appearance:none;appearance:none;cursor:pointer;
background:none;border:0;font:inherit;font-size:12.5px;color:#0d6b64;
padding:8px 4px;margin-left:auto;text-decoration:underline;
}
#page-prescribe .rxstep{display:none;}
#page-prescribe .rxstep.on{display:block;}
#page-prescribe .rxsteps-all .rxstep{display:block;}
}
@media print{
#page-prescribe .rxcols{display:block;}
#page-prescribe .rxstep{display:block !important;}
#page-prescribe .rxstep-nav{display:none !important;}
}
/* ── v10.06 folding ── */
/* ══════════════════════════════════════════════════════════════════
v10.06 — folding, so the page stops growing with the prescription.
══════════════════════════════════════════════════════════════════ */
/* ── A folded medicine ─────────────────────────────────────────── */
.rx-item.rx-fold{ padding-top:8px; padding-bottom:8px; cursor:pointer; }
.rx-item.rx-fold:hover{ border-color:#b9c7d2; }
.rx-item.rx-fold .rx-sum{ margin-top:0; }
.rx-item.rx-fold .rx-item-top{ margin-bottom:2px; }
.rx-fold-hint{
float:right; font-size:11px; color:#0d6b64; text-decoration:underline;
margin-left:8px; white-space:nowrap;
}
/* ── The sidebar toggle ────────────────────────────────────────── */
/* Fixed to the viewport and attached to , deliberately outside the
sidebar: a transformed parent would capture it and drag it off-screen
when the menu slides away. */
#sideToggle{
position:fixed; bottom:12px; left:174px;
width:28px; height:28px; line-height:1;
border:1px solid #e4ebf0; border-radius:8px;
background:#fff; color:#5b6b7a; font-size:13px; cursor:pointer;
display:none; /* only useful on a wide screen */
align-items:center; justify-content:center;
z-index:60; box-shadow:0 1px 4px rgba(20,32,43,.12);
transition:left .18s ease;
}
#sideToggle:hover{ border-color:#b9c7d2; color:#16202a; }
@media (min-width:769px){
#sideToggle{ display:flex; }
/* Collapsed: the menu slides out of the way and the page takes the
room. The toggle stays put so it can always be brought back. */
body.side-collapsed .sidebar{
-webkit-transform:translateX(-100%); transform:translateX(-100%);
}
body.side-collapsed .main{ margin-left:0 !important; }
/* Collapsed: the button walks to the edge and stays reachable. */
body.side-collapsed #sideToggle{ left:10px; }
.sidebar, .main{ transition:transform .18s ease, margin-left .18s ease; }
}
@media (prefers-reduced-motion:reduce){
.sidebar, .main{ transition:none; }
}
/* ── v10.08 eye diagrams ── */
/* ── v10.08 eye diagrams ─────────────────────────────────────── */
#rx-eyeCard .eye-row{display:-webkit-flex;display:flex;gap:10px;margin-top:8px;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
#rx-eyeCard .eye-box{-webkit-flex:1 1 190px;flex:1 1 190px;max-width:260px;text-align:center;}
#rx-eyeCard .eye-lbl{font-size:11px;letter-spacing:.05em;text-transform:uppercase;
color:#8a99a5;font-weight:700;margin-bottom:4px;}
#rx-eyeCard .eye-dia{width:100%;height:auto;display:block;background:#fbfdfd;
border:1px solid #e4ebf0;border-radius:12px;touch-action:manipulation;}
#rx-eyeCard .eye-dia:hover{border-color:#c3d4d2;}
#rx-eyeCard .eye-undo{margin-top:5px;background:none;border:0;color:#0d6b64;
font:inherit;font-size:12px;text-decoration:underline;cursor:pointer;}
#rx-eyeCard .eye-undo[disabled]{color:#b9c7d2;text-decoration:none;cursor:default;}
#rx-eyeCard .eye-dot{display:inline-block;width:9px;height:9px;border-radius:50%;
margin-right:5px;vertical-align:middle;}
#rx-eyeCard .eye-sum{margin-top:8px;font-size:12.5px;color:#48596a;
background:#f5f8fa;border-radius:8px;padding:7px 10px;}
@media print{
#rx-eyeCard .rx-picks,#rx-eyeCard .eye-undo{display:none !important;}
}
/* ── The diagram on the printed prescription ─────────────────── */
.rx-prev-eyes{display:-webkit-flex;display:flex;gap:14px;margin:6px 0 4px;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.rx-prev-eyes figure{margin:0;-webkit-flex:0 1 168px;flex:0 1 168px;text-align:center;}
.rx-prev-eyes figcaption{font-size:10px;letter-spacing:.05em;text-transform:uppercase;
color:#8a99a5;margin-bottom:3px;}
.rx-prev-eyes svg{width:100%;height:auto;display:block;border:1px solid #e4ebf0;border-radius:8px;background:#fff;}
@media print{
/* Keep the pair together on one page and force the colours through:
browsers strip background fills when printing unless told not to. */
.rx-prev-eyes{page-break-inside:avoid;break-inside:avoid;}
.rx-prev-eyes svg{
-webkit-print-color-adjust:exact; print-color-adjust:exact;
max-width:150px; border-color:#ccc;
}
}
/* ── v10.16 vascular diagrams ── */
/* ── v10.16 vascular examination diagrams ────────────────────── */
#rx-limbCard .vs-stage{text-align:center;margin-top:8px;}
#rx-limbCard .vs-dia{max-width:100%;height:auto;display:inline-block;
background:#fffdfb;border:1px solid #e4ebf0;border-radius:12px;touch-action:manipulation;}
#rx-limbCard .vs-dia:hover{border-color:#c3d4d2;}
#rx-limbCard .vs-dot{display:inline-block;width:9px;height:9px;border-radius:50%;
margin-right:5px;vertical-align:middle;}
#rx-limbCard .vs-legend{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;
gap:10px;margin-top:6px;font-size:11.5px;color:#48596a;}
#rx-limbCard .vs-legend span{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;}
#rx-limbCard .vs-hint{color:#9fb0bb;}
#rx-limbCard .vs-sum{margin-top:8px;font-size:12.5px;color:#48596a;
background:#f5f8fa;border-radius:8px;padding:7px 10px;}
/* On the prescription */
.rx-prev-limb{margin:6px 0 4px;text-align:center;}
.rx-prev-limb svg{max-width:210px;height:auto;border:1px solid #e4ebf0;border-radius:8px;background:#fff;}
@media print{
.rx-prev-limb{page-break-inside:avoid;break-inside:avoid;}
.rx-prev-limb svg{-webkit-print-color-adjust:exact;print-color-adjust:exact;max-width:180px;}
#rx-limbCard .rx-picks,#rx-limbCard .vs-legend{display:none !important;}
}
/* ── v10.17 growth chart ── */
/* ── v10.17 growth chart ─────────────────────────────────────── */
#rx-growthCard .pd-stage{text-align:center;margin-top:8px;}
#rx-growthCard .pd-chart{max-width:100%;height:auto;display:inline-block;
background:#fff;border:1px solid #e4ebf0;border-radius:12px;}
#rx-growthCard .pd-gap{display:inline-block;width:12px;}
#rx-growthCard .pd-z{margin-top:8px;padding:8px 11px;border-radius:8px;font-size:13px;}
#rx-growthCard .pd-z b{font-size:15px;}
#rx-growthCard .pd-ok{background:#e6f2ec;color:#245c44;}
#rx-growthCard .pd-warn{background:#fdf1dc;color:#7a5410;}
#rx-growthCard .pd-bad{background:#fbeceb;color:#8f1f19;}
#rx-growthCard .pd-sub{color:inherit;opacity:.75;font-size:11.5px;}
#rx-growthCard .pd-sub2{margin-top:6px;font-size:11.5px;color:#8a99a5;}
#rx-growthCard .pd-empty{font-size:12.5px;color:#8a99a5;padding:8px 0;}
#rx-growthCard .pd-unver{margin-top:8px;padding:8px 10px;font-size:11.5px;
background:#fdf1dc;border-left:3px solid #c8952a;border-radius:0 8px 8px 0;color:#5a3d06;}
.rx-prev-growth{margin:6px 0 4px;text-align:center;}
.rx-prev-growth svg{max-width:340px;height:auto;border:1px solid #e4ebf0;border-radius:8px;background:#fff;}
@media print{
.rx-prev-growth{page-break-inside:avoid;break-inside:avoid;}
.rx-prev-growth svg{-webkit-print-color-adjust:exact;print-color-adjust:exact;max-width:300px;}
#rx-growthCard .rx-picks{display:none !important;}
}
/* ══════════════════════════════════════════════════════════════════
v10.19 — ANALYSIS PAGE
The small-sample bands are deliberately not dismissable and not
subtle: an amber strip that stays put is the only thing that keeps
"68% improved" from being quoted out of a page where it rests on
eleven patients.
══════════════════════════════════════════════════════════════════ */
.an-filterbar{display:-webkit-flex;display:flex;gap:10px;-webkit-flex-wrap:wrap;flex-wrap:wrap;
-webkit-align-items:flex-end;align-items:flex-end;margin-bottom:14px;}
.an-filterbar .form-group{margin-bottom:0;min-width:130px;}
.an-card{margin-bottom:14px;}
.an-stats{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;gap:10px;margin-bottom:12px;}
.an-stat{-webkit-flex:1 1 120px;flex:1 1 120px;background:var(--bg,#f8fafc);border:1px solid var(--border,#e2e8f0);
border-radius:10px;padding:10px 12px;min-width:120px;}
.an-stat-v{font-size:1.25rem;font-weight:800;color:#0f2547;line-height:1.15;}
.an-stat-l{font-size:.72rem;color:var(--muted,#64748b);margin-top:3px;line-height:1.3;}
.an-stat-s{font-size:.66rem;color:var(--muted,#64748b);margin-top:2px;opacity:.85;}
.an-note{font-size:.74rem;color:var(--muted,#64748b);line-height:1.45;margin:8px 0 0;}
.an-excl{border-left:2px solid #b9700f;padding-left:8px;}
.an-muted{color:var(--muted,#64748b);font-size:.75rem;}
.an-hr{border:0;border-top:1px solid var(--border,#e2e8f0);margin:16px 0;}
.an-measure{font-size:.95rem;margin-bottom:8px;}
.an-unit{font-size:.72rem;color:var(--muted,#64748b);font-weight:400;}
.an-tag{font-size:.62rem;background:#fbeedd;color:#8a5406;border-radius:4px;padding:1px 5px;
vertical-align:middle;margin-left:4px;}
/* the small-sample rule, made visible */
.an-gate{font-size:.76rem;border-radius:8px;padding:8px 10px;margin:0 0 10px;line-height:1.45;}
.an-gate-hide{background:#f1f5f9;border:1px solid #cbd5e1;color:#475569;}
.an-gate-prov{background:#fbeedd;border:1px solid #e8c98f;color:#8a5406;font-weight:600;}
.an-bar{background:var(--border,#e2e8f0);border-radius:4px;height:7px;min-width:60px;overflow:hidden;}
.an-bar i{display:block;height:100%;background:#00a896;border-radius:4px;}
.an-split{width:100%;border-collapse:separate;border-spacing:6px 0;margin:10px 0 4px;}
.an-split td{text-align:center;border-radius:8px;padding:9px 4px;}
.an-split td b{display:block;font-size:1.15rem;line-height:1.1;}
.an-split td span{font-size:.68rem;opacity:.85;}
.an-good{background:#e6f2ec;color:#2e7d5b;}
.an-flat{background:#f1f5f9;color:#475569;}
.an-bad{background:#f8e6e7;color:#a8323a;}
@media (max-width:640px){
.an-stat{-webkit-flex:1 1 calc(50% - 10px);flex:1 1 calc(50% - 10px);min-width:0;}
.an-filterbar .form-group{min-width:calc(50% - 10px);}
}
/* v10.20 — system group headers in the template picker */
.rx-pk-sys{display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;
-webkit-justify-content:space-between;justify-content:space-between;
background:#eef4f4;border:1px solid #d7e4e3;border-radius:9px;
padding:9px 11px;margin:7px 0 4px;cursor:pointer;font-weight:700;
font-size:.86rem;color:#0b4a52;-webkit-user-select:none;user-select:none;}
.rx-pk-sys.open{background:#dceceb;border-color:#b9d5d3;}
.rx-pk-sys small{font-weight:600;color:#5e7480;font-size:.76rem;}
.rx-pk-sys:active{background:#cfe3e1;}
/* v10.20 — general-medicine calculated card */
.gm-row{border-top:1px solid #eef2f2;padding:8px 0;}
.gm-row:first-of-type{border-top:0;}
.gm-k{font-size:.74rem;color:#5e7480;font-weight:600;}
.gm-v{font-size:1.05rem;font-weight:800;color:#0f2547;line-height:1.2;}
.gm-n{font-size:.74rem;color:#5e7480;line-height:1.4;margin-top:2px;}
.gm-warn .gm-v{color:#a8323a;}
.gm-unver{background:#fbeedd;border:1px solid #e8c98f;color:#8a5406;border-radius:8px;
padding:8px 10px;font-size:.76rem;line-height:1.45;margin-bottom:10px;}
.gm-need{font-size:.75rem;color:#5e7480;margin-top:10px;font-style:italic;}
.gm-src{font-size:.68rem;color:#8ea3ac;margin-top:10px;line-height:1.4;}
.rx-pk-find{position:relative;margin:2px 0 8px;}
.rx-pk-find input{width:100%;}
.rx-pk-x{position:absolute;right:6px;top:50%;transform:translateY(-50%);border:0;background:transparent;
color:#5e7480;font-size:1rem;cursor:pointer;padding:4px 6px;}
/* v10.21 — first-run prescription guide */
.rxg-back{position:fixed;inset:0;background:rgba(14,36,48,.55);z-index:9000;
display:-webkit-flex;display:flex;-webkit-align-items:center;align-items:center;
-webkit-justify-content:center;justify-content:center;padding:18px;}
.rxg-back.hidden{display:none;}
.rxg-box{background:#fff;border-radius:16px;max-width:420px;width:100%;
padding:20px 20px 14px;box-shadow:0 18px 50px rgba(0,0,0,.28);}
.rxg-dots{display:-webkit-flex;display:flex;gap:5px;margin-bottom:14px;}
.rxg-dots i{flex:1;height:3px;border-radius:2px;background:#dbe6e5;display:block;}
.rxg-dots i.on{background:#12707a;}
.rxg-t{font-size:1.05rem;font-weight:800;color:#0e2430;margin:0 0 8px;line-height:1.3;}
.rxg-b{font-size:.88rem;color:#0e2430;line-height:1.55;margin:0 0 10px;}
.rxg-n{font-size:.78rem;color:#5e7480;line-height:1.5;margin:0 0 16px;
border-left:2px solid #cfe0df;padding-left:9px;}
.rxg-n:empty{display:none;}
.rxg-act{display:-webkit-flex;display:flex;gap:8px;}
.rxg-act .btn{flex:1;}
.rxg-skip{display:block;width:100%;margin-top:10px;border:0;background:transparent;
color:#8ea3ac;font-size:.76rem;padding:6px;cursor:pointer;font-family:inherit;}
/* v10.22 — the outcome trend strip on the printed sheet.
One line, no fill, hairline above. ~18px per measure against ~70px
for a plotted graph, and it survives a photocopy, a fax and a
thermal printer — none of which a thin line plot does. */
.rxp-trend{margin:6px 0 0;padding:6px 0 0;border-top:0.5px solid #dfe8e7;font-size:12px;line-height:1.55;}
/* v10.23 — dermatology body map and morphology picker */
.dm-wrap{display:-webkit-flex;display:flex;gap:14px;-webkit-align-items:flex-start;align-items:flex-start;margin:6px 0 10px;}
.dm-map{-webkit-flex:0 0 auto;flex:0 0 auto;max-width:260px;}
.dm-hint{font-size:10.5px;color:var(--muted,#64748b);line-height:1.4;margin-top:4px;}
.dm-side{-webkit-flex:1;flex:1;min-width:0;}
.dm-bsa{background:#eef4f4;border:1px solid #d7e4e3;border-radius:10px;padding:10px 12px;text-align:center;}
.dm-bsa span{display:block;font-size:1.5rem;font-weight:800;color:#0b4a52;line-height:1.1;}
.dm-bsa small{font-size:.68rem;color:#5e7480;}
.dm-sites{font-size:.75rem;color:#0e2430;line-height:1.5;margin-top:8px;}
.dm-g{margin-top:8px;}
.dm-gl{font-size:.68rem;font-weight:700;color:#5e7480;text-transform:uppercase;letter-spacing:.03em;margin-bottom:4px;}
.dm-row{display:-webkit-flex;display:flex;-webkit-flex-wrap:wrap;flex-wrap:wrap;gap:5px;}
.dm-chip{font-size:11.5px;padding:4px 9px;border-radius:14px;border:1px solid #d7e4e3;background:#fff;color:#0e2430;cursor:pointer;-webkit-user-select:none;user-select:none;}
.dm-chip.on{background:#12707a;border-color:#12707a;color:#fff;font-weight:600;}
.dm-unver{background:#fbeedd;border:1px solid #e8c98f;color:#8a5406;border-radius:8px;padding:8px 10px;font-size:.74rem;line-height:1.45;margin-bottom:8px;}
@media (max-width:520px){ .dm-wrap{-webkit-flex-direction:column;flex-direction:column;} .dm-map{max-width:100%;} }
/* ══ v10.24b — WIDE TABLES ════════════════════════════════
Two separate problems, both fixed here.
1. The action cells were `
`. A flex td leaves the
table's column-width algorithm, so it could not be shrunk and flex-wrap
never fired — the buttons pushed the table past the card.
2. `position:sticky` does NOT work on table cells while
`border-collapse:collapse` is in force: collapsed borders belong to the
table rather than the cells, and every engine handles it differently
(w3c/csswg-drafts#3136, closed as intended cross-browser behaviour).
The FIRST version of this fix set sticky and left border-collapse alone,
so in Chrome it did nothing whatsoever. Tables with a pinned column now
use border-collapse:separate and draw the row rule per cell.
══════════════════════════════════════════════════════ */
.cell-actions{display:-webkit-flex;display:flex;gap:4px;-webkit-flex-wrap:wrap;flex-wrap:wrap;}
.cell-sub{font-size:11px;color:var(--muted);margin-top:3px;line-height:1.4;}
.cell-unit{font-size:11.5px;color:var(--muted);}
@media(min-width:769px){
.table-wrap table{border-collapse:separate;border-spacing:0;}
.table-wrap table th{border-bottom:2px solid var(--border);}
.table-wrap table td{border-bottom:1px solid var(--border);}
.table-wrap table tr:last-child td{border-bottom:none;}
.table-wrap table td.col-actions,
.table-wrap table th:last-child{
position:-webkit-sticky;position:sticky;right:0;background:#fff;z-index:2;
box-shadow:-7px 0 8px -7px rgba(0,0,0,.20);
}
.table-wrap table th:last-child{background:var(--bg);}
.table-wrap table td.col-actions{min-width:150px;}
.table-wrap{scrollbar-width:thin;scrollbar-color:#c7d0dc transparent;}
.table-wrap::-webkit-scrollbar{height:9px;}
.table-wrap::-webkit-scrollbar-thumb{background:#c7d0dc;border-radius:5px;}
.table-wrap::-webkit-scrollbar-track{background:transparent;}
}
/* v10.24 — clinic stock on the prescriber's medicine card. Informational only:
it never blocks prescribing and never alters the sheet. */
.rx-stocknote{font-size:12.5px;line-height:1.5;margin-top:4px;padding:5px 8px;border-radius:7px;}
.rx-stocknote.low{background:#fff6e6;color:#8a5a00;border:1px solid #f0d9a8;}
.rx-stocknote.out{background:#fdeaea;color:#a3312c;border:1px solid #f0bdbb;}
/* v10.24r — psychiatry scales card (js/22-psych.js) */
.py-lead{font-size:.8rem;color:#2a4a5e;margin:4px 0 8px;line-height:1.45;}
.py-q{padding:8px 0;border-top:1px solid #e9f0ef;}
.py-qt{font-size:.82rem;font-weight:600;color:#0e2430;margin-bottom:5px;line-height:1.4;}
.py-total{margin-top:8px;font-size:.86rem;color:#0e2430;}
.py-flag{margin-top:8px;background:#fdf1f1;border:1.5px solid #b23a3a;color:#a11f1f;border-radius:8px;padding:8px 10px;font-size:.78rem;line-height:1.45;}
/* v10.24s — two phone-width overflows found on the pre-deploy render (both predate this build).
Specialty chips on the prescription page were a non-wrapping flex row: with
four or more specialties on, the row ran to 619px on a 390px phone and the
whole page scrolled sideways. The Doctors card in Settings had a row of
name + Edit + Remove that could not wrap either. */
#page-prescribe .rx-spx-row{flex-wrap:wrap;}
#page-prescribe .rx-spx{flex:1 1 110px;min-width:0;}
#doctorsList,#doctorsList *{min-width:0;overflow-wrap:anywhere;}
#doctorsList > div > div:first-child{flex-wrap:wrap;}
/* The Settings overflow was a