/* Clinic look: white, calm, large touch targets. Three palettes to choose from (html[data-look]).
   The X-ray workspace keeps its own dark colours from styles.css. */

/* ---- shared: always light for the clinic screens ---- */
html:root[data-look]{
  color-scheme:light;
  --bg:#f5f8fa; --surface:#ffffff; --surface-2:#eef3f6; --line:#dde5ea;
  --fg:#17313a; --muted:#64788a; --ok:#16794a; --ok-soft:#dcf3e6; --warn:#9a5b00; --warn-soft:#fdf0d8; --bad:#c0362c;
  --shadow:0 1px 2px rgba(16,42,60,.06),0 4px 14px rgba(16,42,60,.06);
  --r:10px;
}
html:root[data-look="a"]{ --accent:#0f8a80; --accent-2:#0b6f67; --accent-fg:#fff; --accent-soft:#e1f4f1; --head:#ffffff; --head-fg:var(--fg); }
html:root[data-look="b"]{ --accent:#2563c9; --accent-2:#1d4fa3; --accent-fg:#fff; --accent-soft:#e6efff; --head:#2563c9; --head-fg:#ffffff; --bg:#f4f7fc; }
html:root[data-look="c"]{ --accent:#0f8a80; --accent-2:#0b6f67; --accent-fg:#fff; --accent-soft:#e1f4f1; --head:#0f3d45; --head-fg:#e6f5f3; }

html[data-look] body{font-size:15px;background:var(--bg)}
html[data-look] .ic{width:18px;height:18px;fill:none;stroke:currentColor;stroke-width:1.9;stroke-linecap:round;stroke-linejoin:round;flex:0 0 auto}

/* buttons */
html[data-look] .btn{border-radius:var(--r);padding:10px 14px;border-color:var(--line);transition:background .15s,border-color .15s,box-shadow .15s}
html[data-look] .btn:hover{border-color:var(--accent);color:var(--accent)}
html[data-look] .btn.primary{background:var(--accent);border-color:var(--accent);color:var(--accent-fg);box-shadow:0 2px 6px color-mix(in srgb,var(--accent) 30%,transparent)}
html[data-look] .btn.primary:hover{background:var(--accent-2);color:var(--accent-fg)}
html[data-look] .btn.big{padding:13px 20px;font-size:16px}
html[data-look] .btn.sm{padding:6px 10px}

/* header */
html[data-look] header.top{background:var(--head);color:var(--head-fg);border-bottom:1px solid var(--line);box-shadow:var(--shadow);position:sticky;top:0;z-index:20}
html[data-look] header.top .wrap{padding-block:10px;max-width:1280px}
html[data-look] .brand .mark{width:38px;height:38px;border-radius:11px;font-size:14px;background:linear-gradient(135deg,var(--accent),#14b8a6)}
html[data-look] .brand{font-size:16px}
html[data-look] .brand small{color:inherit;opacity:.7}
html[data-look] .search input{padding:10px 14px;border-radius:99px;background:var(--surface-2);border-color:transparent;font-family:var(--f-ui)}
html[data-look] .search input:focus{background:#fff;border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
html[data-look] .search .btn{border-radius:99px}
html[data-look] .nav{gap:4px}
html[data-look] .nav .btn,html[data-look] #logoutBtn{border-color:transparent;background:transparent;color:inherit}
html[data-look] .nav .btn:hover,html[data-look] #logoutBtn:hover{background:var(--accent-soft);color:var(--accent)}
html[data-look] .nav .btn.on{background:var(--accent-soft);color:var(--accent)}
html[data-look] .me b{font-size:13px}
html[data-look] .me span{color:inherit;opacity:.7}

/* look b: blue header band */
html[data-look="b"] header.top{border-bottom:0}
html[data-look="b"] .brand .mark{background:#fff;color:var(--accent)}
html[data-look="b"] .search input{background:rgba(255,255,255,.95);color:var(--fg)}
html[data-look="b"] .search .btn{background:rgba(255,255,255,.15);border-color:rgba(255,255,255,.4);color:#fff}
html[data-look="b"] .nav .btn:hover,html[data-look="b"] #logoutBtn:hover,html[data-look="b"] .nav .btn.on{background:rgba(255,255,255,.18);color:#fff}

/* look c: dark teal side menu */
@media (min-width:900px){
  html[data-look="c"] #appView:not([hidden]){display:grid;grid-template-columns:240px minmax(0,1fr);min-height:100vh}
  html[data-look="c"] header.top{height:100vh;border:0;box-shadow:none;align-self:start;position:sticky;top:0;overflow-y:auto}
  html[data-look="c"] header.top .wrap{flex-direction:column;align-items:stretch;flex-wrap:nowrap;height:100%;padding:20px 14px;gap:16px}
  html[data-look="c"] .search{flex:0 0 auto;flex-direction:column}
  html[data-look="c"] .search input{background:rgba(255,255,255,.1);color:#fff}
  html[data-look="c"] .search input::placeholder{color:rgba(255,255,255,.55)}
  html[data-look="c"] .search .btn{background:rgba(255,255,255,.1);border-color:transparent;color:#fff;justify-content:center}
  html[data-look="c"] .nav{flex-direction:column;flex:1}
  html[data-look="c"] .nav .btn{justify-content:flex-start;padding:12px 14px}
  html[data-look="c"] .nav .btn:hover,html[data-look="c"] #logoutBtn:hover,html[data-look="c"] .nav .btn.on{background:rgba(255,255,255,.12);color:#fff}
  html[data-look="c"] .nav .btn.on{box-shadow:inset 3px 0 0 #5eead4}
  html[data-look="c"] .me{padding:10px 14px;border-top:1px solid rgba(255,255,255,.12)}
  html[data-look="c"] #logoutBtn{justify-content:flex-start}
  html[data-look="c"] main.wrap{max-width:1180px;width:100%;padding:24px 28px}
}
@media (max-width:899px){
  html[data-look="c"] .search input{background:rgba(255,255,255,.1);color:#fff}
  html[data-look="c"] .search .btn{color:#fff;background:transparent;border-color:rgba(255,255,255,.3)}
}

/* content */
html[data-look] main.wrap{padding-block:22px;gap:18px;max-width:1280px}
html[data-look] .panel,html[data-look] .pt,html[data-look] .stat,html[data-look] .login-card,html[data-look] .qc,html[data-look] .prow,html[data-look] .inv{border-color:var(--line);box-shadow:var(--shadow)}
html[data-look] .panel{border-radius:16px;padding:20px}
html[data-look] .panel-h h2{font-size:18px}
html[data-look] .pt{border-radius:16px;padding:20px 22px;border-left:5px solid var(--accent)}
html[data-look] .pt h1{font-size:22px}
html[data-look] .mr{background:var(--accent-soft);color:var(--accent-2);font-weight:600}
html[data-look] .tabs{gap:6px;border-bottom:0}
html[data-look] .tab{border:1px solid transparent;border-radius:99px;padding:9px 16px;font-size:15px}
html[data-look] .tab[aria-selected="true"]{background:var(--accent);color:var(--accent-fg);border-color:var(--accent)}
html[data-look] .tab[aria-selected="true"] .n{background:rgba(255,255,255,.25);color:inherit}
html[data-look] table{font-size:14px}
html[data-look] th{background:var(--surface-2);color:var(--muted);padding:10px}
html[data-look] th:first-child{border-top-left-radius:8px}html[data-look] th:last-child{border-top-right-radius:8px}
html[data-look] td{padding:10px}
html[data-look] tbody tr:hover td{background:#fafcfd}
html[data-look] .prow{border-radius:12px;padding:14px 16px}
html[data-look] .prow:hover{border-color:var(--accent);background:#fbfefe}

/* dashboard */
html[data-look] .stats{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:12px}
html[data-look] .stat{border-radius:16px;padding:14px 16px;position:relative;overflow:hidden}
html[data-look] .stat::before{content:"";position:absolute;inset:0 auto 0 0;width:4px;background:var(--accent)}
html[data-look] .stat span{font-size:12px;letter-spacing:.06em}
html[data-look] .stat b{font-size:26px;color:var(--fg)}
html[data-look] .stat b.bad{color:var(--bad)}
html[data-look] .stat:nth-child(2)::before{background:#f59e0b}
html[data-look] .stat:nth-child(3)::before{background:#3b82f6}
html[data-look] .stat:nth-child(4)::before{background:#22a06b}
html[data-look] .col{background:var(--surface-2);border-radius:16px;padding:12px;gap:10px}
html[data-look] .col h3{font-size:13px}
html[data-look] .col h3 span{background:var(--surface);border-radius:99px;padding:0 9px;color:var(--fg)}
html[data-look] .qc{border-radius:14px;padding:14px}
html[data-look] .tok{display:grid;place-items:center;width:40px;height:40px;border-radius:12px;background:var(--accent-soft);color:var(--accent-2);font-size:18px}
html[data-look] .qc-h b{font-size:16px}

/* dialogs and forms */
html[data-look] .modal{background:rgba(15,35,45,.45);backdrop-filter:blur(2px)}
html[data-look] .dlg{border-radius:18px;padding:24px;box-shadow:0 20px 50px rgba(16,42,60,.25)}
html[data-look] .dlg h3{font-size:19px}
html[data-look] .fld label{font-size:13px;color:#4b6070}
html[data-look] .fld input,html[data-look] .fld select,html[data-look] .fld textarea,html[data-look] .line input{padding:11px 12px;border-radius:10px;background:#fff;font-size:15px}
html[data-look] .fld input:focus,html[data-look] .fld select:focus,html[data-look] .fld textarea:focus{border-color:var(--accent);outline:none;box-shadow:0 0 0 3px var(--accent-soft)}
html[data-look] .pick button{padding:11px 14px;border-radius:10px;background:#fff}

/* sign in */
html[data-look] .login{background:linear-gradient(160deg,var(--accent-soft),var(--bg) 55%)}
html[data-look] .login-card{border-radius:20px;padding:32px;gap:16px;width:min(400px,100%)}
html[data-look] .login-card .btn.primary{justify-content:center;padding:13px;font-size:16px}

html[data-look] .toast{background:var(--fg);color:#fff;border-radius:12px;padding:12px 18px;box-shadow:var(--shadow)}
html[data-look] .badge{margin-left:2px}

/* keep pages packed at the top (side-menu layout gives main the full screen height) */
html[data-look] main.wrap,html[data-look] .panel{align-content:start}
@media (max-width:899px){
  html[data-look="c"] .nav .btn:hover,html[data-look="c"] #logoutBtn:hover,html[data-look="c"] .nav .btn.on{background:rgba(255,255,255,.14);color:#fff}
}

/* appointments */
.appts{display:grid;gap:8px}
.appt{display:flex;flex-wrap:wrap;align-items:center;gap:8px 14px;border:1px solid var(--line);border-radius:12px;padding:10px 14px;background:var(--surface)}
.appt .t{font-weight:700;font-variant-numeric:tabular-nums;color:var(--accent-2);min-width:72px}
.appt .grow{flex:1 1 120px}
.appt.cancelled,.appt.missed{opacity:.55}
.btn.wa{background:#e7f8ee;border-color:#bfe8cf;color:#137a3e;text-decoration:none}
.btn.wa:hover{background:#d3f2e0;color:#0f6332;border-color:#9fdcb8}
.btn.on{background:var(--accent-soft);border-color:var(--accent);color:var(--accent-2)}

/* printing an open window (e.g. the desk's day collection) prints just that window */
@media print{
  body:has(#modal:not([hidden])) #appView{display:none!important}
  .modal{position:static;background:none!important;backdrop-filter:none!important;padding:0}
  .dlg{box-shadow:none!important;border:0;max-height:none;width:100%}
  .dlg .foot{display:none}
}

/* full patient register */
table.register tbody tr{cursor:pointer}
table.register tbody tr:hover td{background:var(--accent-soft)}
table.register td:first-child{white-space:nowrap}

/* old copy warning (after the data moved to the clinic PC) and Wi-Fi address */
.moved{position:fixed;left:0;right:0;bottom:0;z-index:60;background:#c0362c;color:#fff;padding:10px 18px;font-size:15px;text-align:center;box-shadow:0 -4px 14px rgba(0,0,0,.2)}
.moved[hidden]{display:none}
.lanlist{display:flex;flex-wrap:wrap;gap:10px}
.lanlist code{font-size:22px;font-weight:700;padding:10px 16px;border-radius:12px;background:var(--accent-soft);color:var(--accent-2);user-select:all}
body:has(#movedBar:not([hidden])){padding-bottom:46px}

/* prescriptions */
.rxrows{display:grid;gap:8px}
.rxrow{display:grid;grid-template-columns:minmax(150px,1.6fr) minmax(110px,1fr) minmax(80px,.7fr) minmax(90px,.8fr) minmax(120px,1.1fr) auto;gap:8px;align-items:end;padding:10px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.rxrow .fld{min-width:0}
@media (max-width:700px){ .rxrow{grid-template-columns:1fr 1fr} .rxrow .fld:first-child{grid-column:1/-1} }
.rx-sheet{page:rx;display:grid;gap:12px;color:#17313a;font-size:15px}
.rx-head{display:flex;justify-content:space-between;gap:12px;border-bottom:3px solid #0f8a80;padding-bottom:8px}
.rx-head b{display:block;font-size:22px;color:#0f6b63}.rx-head span{color:#555}
.rx-doc{text-align:right}.rx-doc b{font-size:16px;color:#17313a}
.rx-pt{display:flex;flex-wrap:wrap;gap:6px 18px;padding:8px 10px;background:#f2f7f8;border-radius:8px}
.rx-mark{font-size:30px;font-weight:700;color:#0f6b63;line-height:1}
.rx-list{margin:0;padding-left:22px;display:grid;gap:8px}
.rx-list li b{display:block;font-size:16px}.rx-list li span{color:#444}
.rx-adv{border-top:1px dashed #bbb;padding-top:8px}
.rx-sign{margin-top:28px;justify-self:end;border-top:1px solid #333;padding-top:4px;min-width:160px;text-align:center;color:#555;font-size:13px}
@page rx{size:A5;margin:10mm}

/* month report */
.mbars{display:flex;align-items:flex-end;gap:3px;height:150px;padding:8px 4px 0;border-bottom:1px solid var(--line)}
.mbar{flex:1;display:flex;flex-direction:column;justify-content:flex-end;align-items:center;height:100%;min-width:0}
.mbar i{display:block;width:100%;max-width:22px;background:var(--accent);border-radius:4px 4px 0 0;min-height:1px}
.mbar span{font-size:10px;color:var(--muted);margin-top:3px}
.grid2{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:14px}
@media print{ body:has(#modal[hidden]) header.top, body:has(#modal[hidden]) .nav{display:none!important} body:has(#modal[hidden]) #appView{display:block!important} .mbar i{print-color-adjust:exact;-webkit-print-color-adjust:exact} }
html[data-look] .stat b{white-space:nowrap;font-size:clamp(18px,2vw,26px)}
.deptlist{display:flex;flex-wrap:wrap;gap:8px}
.deptitem{display:inline-flex;align-items:center;gap:6px;padding:6px 6px 6px 14px;border-radius:99px;background:var(--accent-soft);color:var(--accent-2);font-weight:600}
.deptitem:only-child,.deptitem:not(:has(button)){padding-right:14px}

/* prescription pad (clinic format) */
.rxcase{display:grid;gap:8px;padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2)}
.rxcase textarea{min-height:40px}
.teeth{padding:12px;border:1px solid var(--line);border-radius:12px;background:var(--surface-2);display:grid;gap:6px}
.teeth-head{display:flex;flex-wrap:wrap;align-items:center;gap:8px}.teeth-head .seg{margin-left:auto;display:flex;gap:6px}
.tlabels{display:grid;grid-template-columns:1fr 1fr;font-size:12px;font-weight:700;color:var(--muted,#667)}.tlabels span:last-child{text-align:right}
.tgrid{display:grid;grid-template-columns:1fr 1fr}.tgrid[hidden]{display:none}
.tq{display:flex;gap:4px;padding:6px}.tq.ur,.tq.lr{justify-content:flex-end;border-right:2px solid var(--fg,#222)}.tq.ur,.tq.ul{border-bottom:2px solid var(--fg,#222)}
.tooth{font:inherit;font-size:13px;min-width:34px;height:34px;padding:0;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:inherit;cursor:pointer}
.tooth.on{background:var(--accent,#0f8a80);border-color:var(--accent,#0f8a80);color:#fff;font-weight:700}
@media (max-width:760px){.tooth{min-width:26px;height:30px;font-size:11px}.tq{gap:2px;padding:4px 2px}}
.rx-teeth{display:flex;align-items:center;gap:10px;margin:4px 0}.rx-teeth span{font-weight:700;font-size:13px}.rx-teeth em{font-style:normal;font-size:12px;color:#555}
.tcross{display:grid;grid-template-columns:auto auto;min-width:140px}.tcross i{font-style:normal;padding:1px 8px;min-height:18px;min-width:60px;font-weight:700}
.tcross .ur,.tcross .lr{text-align:right;border-right:1.5px solid #222}.tcross .ur,.tcross .ul{border-bottom:1.5px solid #222}
.rxchips{display:flex;flex-wrap:wrap;gap:6px;margin:2px 0 6px}
.rxchip{font:inherit;font-size:13px;padding:4px 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:inherit;cursor:pointer}
.rxchip.on{background:var(--accent,#0f8a7e);border-color:var(--accent,#0f8a7e);color:#fff}
.rxchip.add{border-style:dashed;opacity:.8}
.rxpad{gap:6px;font-size:14px}
.rx-top{display:flex;justify-content:space-between;align-items:flex-start;gap:12px;border-bottom:3px solid #0f8a80;padding-bottom:8px;margin-bottom:4px}
.rx-clinic b{display:block;font-size:20px;color:#0f6b63}.rx-clinic span{color:#555}
.rx-doc{text-align:right;display:grid}.rx-doc b{font-size:17px}.rx-doc span{font-size:13px;color:#333;font-weight:600}
.rrow{display:flex;gap:10px}.rrow .rf{flex:1}.rrow .rf.w2{flex:2}
.rf{display:flex;align-items:flex-end;gap:6px;min-height:24px}
.rf span{font-weight:700;white-space:nowrap;font-size:13px}
.rf i{flex:1;font-style:normal;border-bottom:1px solid #444;min-height:18px;padding:0 4px;white-space:pre-wrap}
.rx-inv{margin-top:6px}.rx-inv b{font-size:13px;letter-spacing:.04em}.rx-inv div{min-height:22px;white-space:pre-wrap}
.rxpad .rx-mark{font-size:26px;margin-top:4px}
.rx-tbl{width:100%;border-collapse:collapse;font-size:14px}
.rx-tbl th{background:none!important;color:#888!important;font-weight:600;font-size:12px;text-align:left;padding:2px 6px!important;border-bottom:1px solid #ddd}
.rx-tbl td{padding:5px 6px!important;vertical-align:top;border-bottom:1px dotted #ccc}
.rxpad .rx-sign{margin-top:30px;border-top:0;font-weight:700;color:#222;font-size:15px}
.urdu{font-family:'Jameel Noori Nastaleeq','Noto Nastaliq Urdu','Urdu Typesetting','Noto Naskh Arabic','Segoe UI','Arial',sans-serif}
textarea.urdu{font-size:16px;line-height:1.9}
.chk{display:flex;align-items:center;gap:8px;font-weight:600}
/* As on the printed Dental pad: signature on the left, Urdu care list in the bottom-right corner. */
.rx-bottom{display:flex;justify-content:space-between;align-items:flex-start;gap:14px}
.rx-bottom .rx-sign{align-self:flex-start;white-space:nowrap}.rx-bottom .rx-sign:only-child{margin-left:auto}
.rx-care{width:60%;margin-left:auto;padding-top:4px;font-size:12px;line-height:1.7;text-align:right}
.rx-care b{display:block;font-size:14px;margin-bottom:2px}
.rx-care ul{margin:0;padding:0 16px 0 0;list-style:none}
.rx-care li{break-inside:avoid;position:relative}.rx-care li::before{content:'☆';position:absolute;right:-15px}
@media (max-width:700px){.rx-care{width:75%}}
.dentalpad .rx-brand{font-size:24px;letter-spacing:.03em;color:#111}
.dentalpad .rx-top{border-bottom:2px solid #111}
.rx-box{border:1.5px solid #222;padding:6px 8px;display:grid;gap:6px}
.rx-rxhead{display:flex;justify-content:space-between;align-items:center;margin-top:4px}.rx-rxhead .rx-mark{font-size:24px;border:1.5px solid #222;padding:0 6px;line-height:1.2}.rx-rxhead i{font-weight:700;font-style:italic}
.rx-plain td{border-bottom:0!important}.rx-plain td:last-child{text-align:right;width:40%}
.rx-foot{border-top:1px solid #ccc;padding-top:4px;font-size:12px;color:#555;text-align:center}
@media print{
  .rxpad{font-size:11px;gap:3px}
  .rxpad .rf{min-height:18px}.rxpad .rf span{font-size:10.5px}.rxpad .rf i{min-height:14px}
  .rxpad .rx-clinic b{font-size:16px}.rxpad .rx-doc b{font-size:14px}.rxpad .rx-doc span{font-size:10.5px}
  .rxpad .rx-tbl{font-size:11.5px}.rxpad .rx-tbl td{padding:3px 4px!important}
  .rxpad .rx-mark{font-size:20px;margin-top:2px}
  .rxpad .rx-sign{margin-top:22px;font-size:12px}
  .rxpad .rx-foot{font-size:10px}
  .dentalpad .rx-brand{font-size:19px}.dentalpad .rx-box{gap:2px;padding:4px 6px}.rx-rxhead .rx-mark{font-size:17px}
  .rxpad .rrow .rf:not(.w2) i{white-space:nowrap}
  .rxpad .rx-teeth span,.rxpad .rx-inv b{font-size:10.5px}.rxpad .tcross i{min-height:13px;font-size:10.5px}.rxpad .rx-tbl th{font-size:9.5px}
  .rxpad .rx-care{font-size:8.4px;line-height:1.35;padding-top:0;width:62%}.rxpad .rx-care b{font-size:10px;margin:0}.rxpad .rx-sign{margin-top:10px}
  .rxpad:has(.rx-care){gap:1px}.rxpad:has(.rx-care) .rf{min-height:15px}.rxpad:has(.rx-care) .rx-inv div{min-height:12px}.rxpad:has(.rx-care) .rx-top{padding-bottom:4px}
  .dlg:has(.rxpad){padding:0 4px!important}
  .rxpad{padding:0 3px}
  .toast{display:none!important}
}

/* Duplicate MR guard */
.btnrow{display:flex;gap:8px;flex-wrap:wrap;align-items:center}
.dupbox{border:1px solid #e0b252;background:#fff8e6;border-radius:10px;padding:10px 12px;display:grid;gap:8px}
.duprow{display:flex;justify-content:space-between;align-items:center;gap:10px;border-top:1px solid #f0dca8;padding-top:8px}
.duppair{border:1px solid var(--line,#ddd);border-radius:10px;padding:10px 12px;margin-bottom:10px;display:grid;gap:8px}
.dupsides{display:grid;grid-template-columns:1fr 1fr;gap:12px}
@media (max-width:600px){.dupsides{grid-template-columns:1fr}.duprow{flex-direction:column;align-items:flex-start}}

/* Patient pick list (Dispense, sale correction) */
.pickbox{display:grid;gap:4px;max-height:220px;overflow:auto;border:1px solid var(--line);border-radius:10px;padding:4px;margin-top:-6px}
.pickrow{display:block;width:100%;text-align:left;background:none;border:0;border-radius:8px;padding:8px 10px;cursor:pointer;font:inherit;color:inherit}
.pickrow:hover{background:var(--surface-2)}
.pickrow.on{background:var(--accent-soft);outline:2px solid var(--accent)}
.pickrow:disabled{opacity:.5;cursor:default}
.rx-vco{display:block;font-size:12px;letter-spacing:.04em;margin-bottom:2px}
.padlist{display:grid;grid-template-columns:repeat(auto-fill,minmax(230px,1fr));gap:6px 14px}