/* VitaLoop — "Doctors Desk" theme · Direction C (Counter Touch). Re-skins the live app. */
@import url('https://fonts.googleapis.com/css2?family=Outfit:wght@500;600;700;800&family=Plus+Jakarta+Sans:wght@400;500;600;700&display=swap');
:root{
  --bg:#eef0f5; --page:#eef0f5; --panel:#ffffff; --canvas2:#f6f7fb;
  --glass:rgba(255,255,255,.66); --glass-blur:14px;
  --ink:#1e2030; --muted:#5c6478; --soft:#94a3b8;
  --line:rgba(15,23,42,.08); --line2:rgba(15,23,42,.05); --row:#f6f7fb;
  --accent:#10b981; --accent-ink:#0e9f6e; --accent-d:#0e9f6e; --tint:#e7f8f1; --accent-soft:#e7f8f1; --accent2:#0d9488;
  --ok:#10b981; --okbg:#e7f8f1; --warn:#f59e0b; --warnbg:#fef3e2; --bad:#f43f5e; --badbg:#fff0f2;
  --rose:#f43f5e; --rose-soft:#fff0f2; --cyan:#06b6d4; --violet:#8b5cf6; --violet-soft:#f1ecfe; --amber:#f59e0b; --sky:#0ea5e9; --danger:#ef4444;
  --radius:16px; --shadow:0 8px 24px rgba(16,24,40,.08); --shadow-sm:0 2px 8px rgba(16,24,40,.06);
}
*{box-sizing:border-box}
html,body{margin:0;height:100%}
body{font-family:"Plus Jakarta Sans",-apple-system,BlinkMacSystemFont,"Segoe UI",Roboto,sans-serif;color:var(--ink);font-size:14px;line-height:1.45;-webkit-font-smoothing:antialiased;
  background:radial-gradient(1100px 560px at 12% -8%, color-mix(in srgb,var(--accent) 16%,transparent), transparent),
             radial-gradient(900px 520px at 102% 4%, color-mix(in srgb,var(--accent2) 14%,transparent), transparent),
             var(--page); background-attachment:fixed}
h1,h2,h3,h4{font-family:"Outfit",sans-serif;margin:0 0 .35em}
a{color:var(--accent-ink);text-decoration:none}
.muted{color:var(--muted)} .soft{color:var(--soft)} .right{text-align:right} .center{text-align:center}
.mono{font-family:"SF Mono",Menlo,Consolas,monospace;font-size:12.5px}
.num{font-variant-numeric:tabular-nums}

/* ---------- login ---------- */
.login-wrap{display:flex;align-items:center;justify-content:center;min-height:100vh}
.login-card{background:var(--glass);backdrop-filter:blur(var(--glass-blur));border-radius:20px;box-shadow:var(--shadow);padding:34px;width:368px;border:1px solid var(--line)}
.brand-row{display:flex;align-items:center;gap:12px;margin-bottom:6px}
.logo{width:42px;height:42px;border-radius:13px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;display:grid;place-items:center;font-weight:800;font-size:21px;font-family:Outfit;box-shadow:0 4px 12px color-mix(in srgb,var(--accent) 35%,transparent)}
.brand-name{font-family:Outfit;font-size:20px;font-weight:800}
.brand-sub{font-size:10px;color:var(--soft);letter-spacing:.6px;text-transform:uppercase;font-weight:700}
.login-card label{display:block;font-size:11px;color:var(--muted);margin:14px 0 5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.login-hint{margin-top:16px;font-size:12px;color:var(--muted);background:var(--canvas2);border-radius:10px;padding:11px 13px}
.login-hint code{color:var(--accent-ink)}

/* ---------- shell ---------- */
.shell{display:grid;grid-template-columns:248px 1fr;grid-template-rows:60px 1fr;height:100vh;grid-template-areas:"side top" "side main"}
.sidebar{grid-area:side;background:var(--panel);border-right:1px solid var(--line);padding:16px 12px;overflow:auto;display:flex;flex-direction:column;gap:2px}
.sidebar>.logo{margin:2px 6px 6px}
.brand-blk{display:flex;align-items:center;gap:11px;padding:2px 6px 14px;border-bottom:1px solid var(--line2);margin-bottom:6px}
.brand-blk .bt{font-family:Outfit;font-weight:800;font-size:16px;line-height:1.1}
.brand-blk .bt span{display:block;font-size:9px;color:var(--soft);letter-spacing:.6px;text-transform:uppercase;font-weight:700;margin-top:3px}
.nav-group{font-size:10px;font-weight:800;letter-spacing:.6px;text-transform:uppercase;color:var(--soft);margin:13px 12px 5px}
.nav-item{display:flex;align-items:center;gap:11px;padding:10px 12px;border-radius:11px;color:var(--muted);font-weight:600;font-size:14px;cursor:pointer;border:1px solid transparent}
.nav-item:hover{background:var(--bg)}
.nav-item.active{background:var(--accent-soft);color:var(--accent-ink);border-color:color-mix(in srgb,var(--accent) 25%,transparent)}
.nav-ico{width:20px;height:20px;display:inline-flex;align-items:center;justify-content:center}
.nav-ico svg{width:18px;height:18px}
.nav-ico.rose{color:var(--rose)} .nav-ico.cyan{color:var(--cyan)} .nav-ico.emerald{color:var(--ok)} .nav-ico.violet{color:var(--violet)} .nav-ico.amber{color:var(--amber)} .nav-ico.indigo{color:#6366f1} .nav-ico.sky{color:var(--sky)} .nav-ico.accent{color:var(--accent)}
.sidefoot{margin-top:auto;display:flex;align-items:center;gap:10px;padding-top:12px;border-top:1px solid var(--line2)}

.topbar{grid-area:top;background:color-mix(in srgb,var(--panel) 88%,transparent);backdrop-filter:blur(8px);border-bottom:1px solid var(--line);display:flex;align-items:center;gap:14px;padding:0 20px;z-index:30}
.topbar .spacer{flex:1}
.topsearch{flex:1;max-width:520px;position:relative}
.topsearch input{width:100%;border:1px solid var(--line);background:var(--bg);border-radius:12px;padding:10px 12px 10px 38px;font:inherit;font-size:13.5px;color:var(--ink)}
.topsearch input:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.topsearch .mg{position:absolute;left:13px;top:9px;color:var(--soft);width:16px;height:16px}
.branch-select{border:1px solid var(--line);border-radius:11px;padding:9px 12px;background:var(--panel);color:var(--ink);font:inherit;font-size:13px;font-weight:600;max-width:300px}
.accentpick{display:flex;align-items:center;gap:7px;border:1px solid var(--line);padding:6px 11px;border-radius:22px;background:var(--panel)}
.accentpick .lab{font-size:11px;color:var(--muted);font-weight:700}
.dot{width:15px;height:15px;border-radius:50%;cursor:pointer;border:2px solid var(--panel);box-shadow:0 0 0 1px var(--line);padding:0}
.dot.on{box-shadow:0 0 0 2px var(--accent)}
.clock{display:flex;align-items:center;gap:6px;color:var(--muted);font-size:12.5px;font-weight:600;white-space:nowrap}
.user-chip{display:flex;align-items:center;gap:9px;font-size:13px}
.avatar{width:34px;height:34px;border-radius:11px;background:linear-gradient(135deg,var(--accent),var(--accent2));color:#fff;display:grid;place-items:center;font-weight:800;font-size:12px}
.role-tag{font-size:10px;background:var(--accent-soft);color:var(--accent-ink);border-radius:20px;padding:2px 8px;text-transform:uppercase;letter-spacing:.4px;font-weight:700}
.help-btn{width:34px;height:34px;border-radius:50%;border:1px solid var(--line);background:var(--panel);color:var(--accent-ink);font-weight:800;cursor:pointer}
.help-btn:hover{background:var(--accent-soft)}

.main{grid-area:main;overflow:auto;padding:20px 24px 96px}

/* ---------- bottom tab bar (Counter Touch) ---------- */
.tabbar{position:fixed;left:248px;right:0;bottom:0;height:66px;background:color-mix(in srgb,var(--panel) 94%,transparent);backdrop-filter:blur(12px);border-top:1px solid var(--line);display:flex;z-index:40;box-shadow:0 -6px 22px rgba(16,24,40,.06)}
.tabbar .tb{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:3px;cursor:pointer;color:var(--muted);font-size:11px;font-weight:700;border-top:2px solid transparent}
.tabbar .tb svg{width:22px;height:22px}
.tabbar .tb.on{color:var(--accent-ink);border-top-color:var(--accent)}
.tabbar .tb.on svg{color:var(--accent)}
@media(max-width:900px){.shell{grid-template-columns:0 1fr}.sidebar{display:none}.tabbar{left:0}.main{padding:16px 14px 92px}}

/* ---------- page + cards ---------- */
.page-head{display:flex;align-items:flex-end;gap:14px;margin-bottom:18px;flex-wrap:wrap}
.page-head h1{font-size:24px;font-weight:800}
.page-head .sub{color:var(--muted);font-size:12.5px;margin-bottom:3px}
.card{background:var(--glass);backdrop-filter:blur(var(--glass-blur));border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:18px 20px;margin-bottom:16px}
.card h3{font-size:15px;font-weight:750;display:flex;align-items:center;gap:8px}
.grid{display:grid;gap:14px}
.cols-2{grid-template-columns:1fr 1fr}.cols-3{grid-template-columns:repeat(3,1fr)}.cols-4{grid-template-columns:repeat(4,1fr)}
@media(max-width:1100px){.cols-4{grid-template-columns:1fr 1fr}.cols-3{grid-template-columns:1fr 1fr}}
.split{display:grid;grid-template-columns:1.6fr 1fr;gap:16px;align-items:start}
@media(max-width:1000px){.split{grid-template-columns:1fr}}

/* big number tiles / KPIs */
.kpi{background:var(--panel);border:1px solid var(--line);border-radius:18px;box-shadow:var(--shadow-sm);padding:18px 20px}
.kpi .label{font-size:11px;color:var(--soft);text-transform:uppercase;letter-spacing:.5px;font-weight:800}
.kpi .value{font-family:Outfit;font-size:30px;font-weight:800;margin-top:8px;letter-spacing:-.5px;line-height:1}
.kpi .foot{font-size:12.5px;color:var(--muted);margin-top:6px}
.kpi.accent{background:linear-gradient(150deg,var(--accent),var(--accent-d));color:#fff;border:0;box-shadow:0 10px 26px color-mix(in srgb,var(--accent) 34%,transparent)}
.kpi.accent .label,.kpi.accent .foot{color:#eafaf3}

table{width:100%;border-collapse:collapse;font-size:13.5px}
th{text-align:left;font-size:11px;text-transform:uppercase;letter-spacing:.4px;color:var(--soft);border-bottom:1px solid var(--line);padding:10px 11px;font-weight:800;white-space:nowrap}
td{padding:10px 11px;border-bottom:1px solid var(--line);vertical-align:middle}
tr:hover td{background:var(--row)}
table.tight td,table.tight th{padding:7px 9px}

.badge{display:inline-block;font-size:11px;font-weight:700;border-radius:20px;padding:3px 10px;letter-spacing:.2px}
.b-ok{background:var(--okbg);color:var(--ok)} .b-warn{background:var(--warnbg);color:var(--warn)} .b-bad{background:var(--badbg);color:var(--bad)}
.b-neutral{background:var(--accent-soft);color:var(--accent-ink)} .b-sched{background:var(--violet-soft);color:var(--violet)} .b-x{background:var(--badbg);color:var(--bad)} .b-h1{background:var(--warnbg);color:var(--warn)}

button,.btn{font-family:inherit;font-size:14px;border-radius:12px;border:1px solid var(--line);background:var(--panel);color:var(--ink);padding:11px 17px;cursor:pointer;font-weight:700;transition:.12s}
button:hover,.btn:hover{border-color:#cdd7e0}
button:active{transform:translateY(1px)}
.btn-primary{background:linear-gradient(135deg,var(--accent),var(--accent-d));border:0;color:#fff;box-shadow:0 6px 16px color-mix(in srgb,var(--accent) 32%,transparent)}
.btn-primary:hover{filter:brightness(1.05)}
.btn-ghost{background:transparent;border-color:transparent;color:var(--accent-ink);padding:8px 10px}
.btn-sm{padding:8px 13px;font-size:13px}
button:disabled{opacity:.5;cursor:not-allowed}
input,select,textarea{font-family:inherit;font-size:14px;border:1px solid var(--line);border-radius:11px;padding:10px 12px;width:100%;background:var(--bg);color:var(--ink)}
input:focus,select:focus,textarea:focus{outline:none;border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
textarea{resize:vertical;min-height:90px}
.field{margin-bottom:12px}.field label{display:block;font-size:11px;color:var(--muted);margin-bottom:5px;font-weight:700;text-transform:uppercase;letter-spacing:.4px}
.inline{display:flex;gap:10px;align-items:center;flex-wrap:wrap}
.search{max-width:360px}
.chips{display:flex;gap:8px;flex-wrap:wrap;margin-bottom:14px}
.chip{font-size:13px;border:1.5px solid var(--line);border-radius:22px;padding:8px 15px;cursor:pointer;background:var(--panel);color:var(--muted);font-weight:600}
.chip.active{background:var(--accent);border-color:var(--accent);color:#fff}
.tabs{display:flex;gap:8px;border-bottom:1px solid var(--line);margin-bottom:18px;flex-wrap:wrap}
.tab{padding:10px 16px;cursor:pointer;font-size:14px;font-weight:700;color:var(--muted);border-bottom:2px solid transparent}
.tab.active{color:var(--accent-ink);border-bottom-color:var(--accent)}
.seg{display:inline-flex;background:var(--bg);border:1px solid var(--line);border-radius:22px;padding:4px;gap:3px}
.seg button{border:0;background:none;border-radius:18px;padding:8px 18px;font:inherit;font-size:13px;font-weight:700;color:var(--muted);cursor:pointer}
.seg button.on{background:var(--accent);color:#fff}

.alert{border-radius:12px;padding:11px 14px;margin-bottom:9px;font-size:13.5px;border:1px solid}
.a-crit{background:var(--badbg);border-color:#f6c9d1;color:#b21e3c}
.a-warn{background:var(--warnbg);border-color:#ecd9a6;color:#9a6a08}
.a-info{background:var(--accent-soft);border-color:color-mix(in srgb,var(--accent) 25%,transparent);color:var(--accent-ink)}
.empty{color:var(--soft);text-align:center;padding:30px;font-size:13.5px}
.loader{padding:44px;text-align:center;color:var(--soft)}
.hl{background:#fff7d6}
pre.json{background:#0f2630;color:#cfe0e6;border-radius:12px;padding:14px;overflow:auto;font-size:12px;max-height:380px}

/* ---------- POS (wizard / Counter Touch) ---------- */
.wizsteps{display:flex;gap:8px;align-items:center;margin-left:auto}
.pos{display:grid;grid-template-columns:1.7fr 1fr;gap:16px;align-items:start}
@media(max-width:1000px){.pos{grid-template-columns:1fr}}
.search-lg{position:relative;margin-bottom:16px}
.search-lg input{width:100%;font-size:17px;padding:15px 16px 15px 44px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.search-lg input:focus{border-color:var(--accent);box-shadow:0 0 0 3px var(--accent-soft)}
.search-lg .mag{position:absolute;left:16px;top:15px;color:var(--soft);font-size:17px}
.results-pop{position:absolute;left:0;right:0;top:calc(100% + 6px);background:var(--panel);border:1px solid var(--line);border-radius:14px;box-shadow:var(--shadow);z-index:8;max-height:380px;overflow:auto}
.res-item{display:flex;align-items:center;justify-content:space-between;gap:10px;padding:13px 16px;cursor:pointer;border-bottom:1px solid var(--line)}
.res-item:last-child{border-bottom:none}
.res-item:hover,.res-item.hl{background:var(--accent-soft)}
.res-item .ri-price{font-weight:800;white-space:nowrap;font-family:Outfit}
.res-oos{color:var(--bad);font-size:11px;font-weight:700}
.cart-list{display:flex;flex-direction:column;gap:10px;min-height:120px}
.line{display:grid;grid-template-columns:1fr auto auto 30px;gap:14px;align-items:center;padding:14px;border:1px solid var(--line);border-radius:14px;background:var(--panel)}
.line .nm{font-weight:700;font-size:15px}
.stepper{display:inline-flex;align-items:center;border:1px solid var(--line);border-radius:11px;overflow:hidden}
.stepper button{border:0;background:var(--bg);width:38px;height:40px;font-size:20px;cursor:pointer;color:var(--ink);padding:0}
.stepper button:hover{background:var(--accent-soft)}
.stepper input{width:50px;height:40px;border:0;border-left:1px solid var(--line);border-right:1px solid var(--line);text-align:center;border-radius:0;font-weight:800;font-size:15px}
.line .lt{font-weight:800;min-width:84px;text-align:right;font-family:Outfit;font-size:15px}
.rm{border:0;background:transparent;color:var(--soft);cursor:pointer;font-size:18px}
.rm:hover{color:var(--bad)}
.summary{position:sticky;top:8px}
.sum-row{display:flex;justify-content:space-between;padding:6px 0;font-size:14px;color:var(--muted)}
.sum-row.grandt{border-top:1px solid var(--line);margin-top:8px;padding-top:12px;align-items:baseline;color:var(--ink)}
.bigtotal{font-family:Outfit;font-size:32px;font-weight:800;letter-spacing:-1px}
.tenders{display:flex;gap:10px;margin:4px 0}
.tender{flex:1;text-align:center;padding:14px;border:1.5px solid var(--line);border-radius:13px;cursor:pointer;font-weight:800;font-size:14px;background:var(--panel);color:var(--muted)}
.tender.active{background:var(--accent);border-color:var(--accent);color:#fff}
.pay-btn{width:100%;padding:16px;font-size:16px;border-radius:14px;margin-top:14px}
.receipt-line{display:flex;justify-content:space-between;gap:10px;padding:9px 0;border-bottom:1px dashed var(--line);font-size:13.5px}
.invoice{background:var(--canvas2);border:1px dashed var(--line);border-radius:12px;padding:14px}
.tot-row{display:flex;justify-content:space-between;padding:4px 0;font-size:13.5px}
.tot-row.grand{font-size:18px;font-weight:800;border-top:1px solid var(--line);margin-top:6px;padding-top:9px;font-family:Outfit}

/* ---------- dispensing ---------- */
.disp{display:grid;grid-template-columns:1fr 1.5fr;gap:16px;align-items:start}
@media(max-width:1000px){.disp{grid-template-columns:1fr}}
.q-list{display:flex;flex-direction:column;gap:10px}
.q-item{display:flex;align-items:center;gap:12px;padding:13px 14px;border:1px solid var(--line);border-radius:14px;cursor:pointer;background:var(--panel)}
.q-item:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.q-item.active{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}
.q-ava{width:42px;height:42px;border-radius:12px;background:var(--accent-soft);color:var(--accent-ink);display:grid;place-items:center;font-weight:800;flex:none;font-family:Outfit}
.q-item .who{font-weight:700;font-size:15px}
.rx-head{display:flex;align-items:center;gap:12px;margin-bottom:12px}
.rx-actionbar{display:flex;align-items:center;gap:14px;margin-top:16px;padding-top:16px;border-top:1px solid var(--line)}
.listitem{display:flex;align-items:center;gap:11px;padding:12px;border:1px solid var(--line);border-radius:12px;margin-bottom:9px;background:var(--panel);cursor:pointer}
.listitem:hover{border-color:color-mix(in srgb,var(--accent) 40%,var(--line))}
.listitem.on{border-color:var(--accent);box-shadow:0 0 0 2px var(--accent-soft)}

/* ---------- toast ---------- */
.toast{position:fixed;bottom:84px;left:50%;transform:translateX(-50%) translateY(60px);background:var(--ink);color:#fff;padding:12px 20px;border-radius:12px;font-size:13.5px;box-shadow:0 8px 28px rgba(0,0,0,.28);opacity:0;transition:.25s;z-index:60;max-width:560px}
.toast.show{opacity:1;transform:translateX(-50%) translateY(0)}
.toast.err{background:#b21e3c}.toast.ok{background:var(--accent-d)}

/* ---------- guided tour ---------- */
.tour-backdrop{position:fixed;inset:0;z-index:200;background:transparent}
.tour-spot{position:fixed;z-index:201;border-radius:12px;box-shadow:0 0 0 9999px rgba(12,24,32,.6);pointer-events:none;transition:.25s;border:2px solid var(--accent)}
.tour-card{position:fixed;z-index:202;background:var(--panel);border-radius:14px;box-shadow:0 14px 44px rgba(0,0,0,.3);width:340px;padding:18px;border:1px solid var(--line)}
.tour-card .step{font-size:11px;color:var(--soft);text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;font-weight:700}
.tour-card h4{font-size:17px;margin:0 0 6px}
.tour-card p{margin:0 0 14px;font-size:13.5px;color:var(--muted);line-height:1.5}
.tour-card .row{display:flex;align-items:center;gap:8px;justify-content:space-between}
.tour-dots{display:flex;gap:5px}.tour-dots i{width:6px;height:6px;border-radius:50%;background:var(--line)}.tour-dots i.on{background:var(--accent)}

/* ---- credit pill (topbar) ---- */
.credit-pill{display:inline-flex;align-items:center;gap:5px;font-size:13px;font-weight:700;padding:6px 11px;border-radius:999px;cursor:pointer;background:var(--accent-soft);color:var(--accent-d);border:1px solid color-mix(in srgb,var(--accent) 30%,transparent)}
.credit-pill:hover{filter:brightness(.97)}
.credit-pill.low{background:var(--warnbg);color:#9a6a00;border-color:color-mix(in srgb,var(--warn) 40%,transparent)}
.credit-pill.bad{background:var(--badbg);color:#b21e3c;border-color:color-mix(in srgb,var(--bad) 40%,transparent)}
.credit-pill .q{font-size:11px;opacity:.85}

/* ---- modal overlay (FHIR viewer etc.) ---- */
.modal-overlay{position:fixed;inset:0;z-index:120;background:rgba(12,24,32,.5);display:none;align-items:center;justify-content:center;padding:24px}
.modal-card{background:var(--panel);border:1px solid var(--line);border-radius:16px;box-shadow:0 24px 60px rgba(0,0,0,.32);width:min(720px,94vw);max-height:84vh;display:flex;flex-direction:column;overflow:hidden}
.modal-head{display:flex;align-items:center;justify-content:space-between;padding:14px 18px;border-bottom:1px solid var(--line)}
.modal-head h3{margin:0;font-size:15px}
.modal-body{padding:16px 18px;overflow:auto}
.modal-body .json{margin:0;background:var(--canvas2);border-radius:10px;padding:14px;font-size:12px;line-height:1.5;white-space:pre-wrap;word-break:break-word}

/* ---- 80mm thermal print (receipts + dosage labels) ---- */
#printArea{display:none}
@media print{
  body>*:not(#printArea){display:none!important}
  #printArea{display:block!important}
  @page{margin:4mm}
  .receipt80,.label80{width:72mm;font:11px/1.5 ui-monospace,SFMono-Regular,Menlo,monospace;color:#000}
  .receipt80 hr{border:0;border-top:1px dashed #000;margin:5px 0}
  .receipt80 .rc{text-align:center;margin:3px 0}
  .receipt80 .soft2{opacity:.75;font-size:10px}
  .receipt80 div{overflow:hidden}
  .label80{border:1.5px dashed #000;border-radius:2mm;padding:2.5mm;margin-bottom:3mm;page-break-inside:avoid}
}
.sub-tag .badge{margin-left:4px}