/* ═══════════════════════════════════════════════════════════════════
   Clinic app — visual polish layer (ui-polish.css)
   Loaded after the app's own styles. Keeps the layout, the navy sidebar
   and the teal accent; makes type, spacing, labels, tables, forms and
   buttons consistent. Remove the <link> to ui-polish.css to undo.
   ═══════════════════════════════════════════════════════════════════ */
@font-face{font-family:'Clinic Sans';src:url(chart/fonts/plex-sans-400.woff2) format('woff2');font-weight:400;font-display:swap}
@font-face{font-family:'Clinic Sans';src:url(chart/fonts/plex-sans-500.woff2) format('woff2');font-weight:500;font-display:swap}
@font-face{font-family:'Clinic Sans';src:url(chart/fonts/plex-sans-600.woff2) format('woff2');font-weight:600 800;font-display:swap}
@font-face{font-family:'Clinic Sans';src:url(chart/fonts/plex-arabic-400.woff2) format('woff2');font-weight:400;unicode-range:U+0600-06FF,U+FB50-FDFF,U+FE70-FEFF;font-display:swap}
@font-face{font-family:'Clinic Sans';src:url(chart/fonts/plex-arabic-600.woff2) format('woff2');font-weight:500 800;unicode-range:U+0600-06FF,U+FB50-FDFF,U+FE70-FEFF;font-display:swap}

:root{
  --font-sans:'Clinic Sans','IBM Plex Sans',system-ui,-apple-system,'Segoe UI',sans-serif;
  --font-brand:var(--font-sans); --serif:var(--font-sans); --sans:var(--font-sans); --mono:var(--font-sans);
  --bg:#F4F6F6; --bg2:#ECF0EF; --border:#DCE2E1; --border2:#E8EDEC;
  --ink:#16222A; --ink2:#33424B; --muted:#66757C; --faint:#98A5AB;
  --r:6px; --r2:8px; --r3:12px;
  --focus:#0A8F83;
}
html,body{font-family:var(--font-sans)!important;background:var(--bg);color:var(--ink)}
body,input,select,textarea,button{font-family:var(--font-sans)!important;font-feature-settings:normal}
[style*="font-family:var(--serif)"],[style*="font-family: var(--serif)"],[style*="var(--mono)"],[style*="Syne"],[style*="monospace"]{font-family:var(--font-sans)!important}

/* ── labels: sentence case, no tracking (the app writes many in capitals) ── */
.lbl,.fl,th,.stat-lbl,.sb-sec,.info-k,.b,.cal-dh,.appt-mon,.rep-section,.rep-filter-group label,.hikv .k,.rep-hist-field label,
.sb-brand-text .s,.filter-group label,.feat-desc,.stab,.ptab,
[style*="text-transform:uppercase"],[style*="text-transform: uppercase"]{text-transform:none!important;letter-spacing:normal!important}
[style*="font-weight:800"],[style*="font-weight: 800"]{font-weight:600!important}
[style*="font-style:italic"]{font-style:normal!important}
:focus-visible{outline:2px solid var(--focus);outline-offset:2px}

/* ── sidebar (navy kept) ── */
.sb-brand{padding:18px 18px 16px}
.sb-icon{background:var(--teal)!important;border-radius:9px;font-size:0!important;color:#fff}
.sb-icon svg{width:18px;height:18px}
.sb-brand-text .n{font-size:16px;font-weight:600;letter-spacing:-.01em}
.sb-brand-text .s{font-size:11.5px;color:rgba(255,255,255,.42);margin-top:3px}
.sb-nav{padding:10px 10px 14px;gap:1px}
.sb-sec{font-size:11.5px;font-weight:500;color:rgba(255,255,255,.38);padding:14px 10px 5px}
.nb{font-size:13.5px;padding:8px 10px;color:rgba(255,255,255,.62);gap:11px}
.nb:hover{color:#fff}
.nb.on{background:rgba(255,255,255,.08);color:#fff;font-weight:500;box-shadow:inset 3px 0 0 var(--teal2)}
.nb.on .ic{color:var(--teal2)}
.ic{width:17px;height:17px}
.nbcount{font-size:10.5px;font-weight:600;padding:1px 7px}
.sb-foot{padding:12px 10px}
#sb-user-name{font-size:13px!important}
#sb-user-role{font-size:11.5px!important;color:rgba(255,255,255,.45)!important}

/* ── top bar and page headers ── */
.tb{height:58px;padding:0 28px;gap:12px;background:var(--surface);border-bottom:1px solid var(--border)}
.tb-title{font-size:17px!important;font-weight:600!important;letter-spacing:-.01em;color:var(--ink)!important}
.tb-title span{font-size:inherit!important;font-weight:inherit!important;color:inherit!important}
.tb .btn-navy{background:var(--surface);color:var(--ink2);border:1px solid var(--border)!important}
.tb .btn-navy:hover{opacity:1;border-color:var(--ink2)}
.main-body{padding:24px 28px 40px}
.ph{margin-bottom:18px}
.pt{font-size:22px!important;font-weight:600;letter-spacing:-.015em;color:var(--ink)}
.ph-sub{font-size:13.5px;color:var(--muted)}
.ph.polish-notitle{justify-content:flex-end}

/* ── cards ── */
.card{border:1px solid var(--border);border-radius:12px;box-shadow:none;margin-bottom:16px}
.ch,.card-h{padding:13px 18px;border-bottom:1px solid var(--border2);gap:10px;min-height:50px}
.ct{font-size:14.5px;font-weight:600;color:var(--ink);letter-spacing:-.005em}
.cs{font-size:12.5px;color:var(--muted)}
.empty-state{color:var(--muted);font-size:13.5px;padding:36px 20px}

/* ── stat tiles ── */
.stat-grid{gap:14px}
.stat{border-radius:12px;padding:16px 18px;border:1px solid var(--border)}
.stat-val,.stat-num{font-family:var(--font-sans)!important;font-size:28px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.stat-lbl{font-size:13px;font-weight:500;color:var(--muted);margin-top:4px}

/* ── badges ── */
.b{font-size:11.5px;font-weight:500;padding:2px 9px;border-radius:6px}

/* ── buttons ── */
.btn{border-radius:8px;font-weight:500;font-size:13px;padding:8px 14px;gap:7px;line-height:1.3;transition:background .15s,border-color .15s,color .15s,opacity .15s}
.btn-sm{padding:6px 11px;font-size:12.5px}.btn-xs{padding:4px 8px;font-size:12px}
.btn-ghost{background:var(--surface);color:var(--ink2);border:1px solid var(--border)}
.btn-ghost:hover{border-color:var(--ink2);color:var(--ink)}
.btn-teal,.btn-navy{border:1px solid transparent}
.btn-teal:hover,.btn-navy:hover{opacity:.9}
.btn svg.pz{width:15px;height:15px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.btn.pz-iconly{padding:6px 8px}
/* WhatsApp outline buttons: neutral, with the icon in green */
.btn[style*="border-color:#25D366"],.btn[style*="border-color: #25D366"]{color:var(--ink2)!important;border-color:var(--border)!important}
.btn[style*="border-color:#25D366"] svg,.btn[style*="border-color: #25D366"] svg,.btn[title*="WhatsApp"] svg{color:#1FAF54}
.btn[style*="border-color:#25D366"]:hover{border-color:#1FAF54!important}

/* ── forms ── */
.fl,.lbl{font-size:12.5px;font-weight:500;color:var(--ink2);margin-bottom:5px}
.fg{gap:5px;margin-bottom:14px}
.fi,.fs,.linput{border:1px solid #CDD5D4;border-radius:8px;font-size:13.5px;background:var(--surface)}
.fs{background:var(--surface)}
.fi:focus,.fs:focus,.linput:focus{border-color:var(--teal);box-shadow:0 0 0 3px rgba(10,143,131,.12)}
.fi::placeholder,.linput::placeholder{color:#A3AFB4}

/* ── tables ── */
th{font-size:12.5px;font-weight:500;color:var(--muted);padding:10px 14px;border-bottom:1px solid var(--border);background:var(--surface)}
td{font-size:13.5px;color:var(--ink);padding:11px 14px;border-bottom:1px solid var(--border2)}
tr:hover td{background:#F8FAFA}

/* ── appointments rows (dashboard) ── */
.appt-row{padding:12px 18px;gap:14px}
.appt-title{font-size:14px;font-weight:600}
.appt-sub{font-size:12.5px;color:var(--muted)}
.appt-date-badge{background:var(--bg2);color:var(--ink);border-radius:8px;min-width:46px;padding:6px 8px}
.appt-day{font-size:17px;font-weight:600}
.appt-mon{font-size:11px;opacity:1;color:var(--muted)}

/* ── patients ── */
.pat-card{border-radius:12px;padding:14px 16px}
.pat-card:hover{transform:none;box-shadow:0 1px 0 rgba(0,0,0,.02);border-color:#B9C5C3}
.pat-name{font-size:14.5px;font-weight:600}
.pat-meta{font-size:12.5px}
.pat-doc{font-size:12px;font-weight:500}
.av{font-family:var(--font-sans)!important;font-weight:600}

/* ── calendar ── */
.cal-dh{font-size:12px;font-weight:500;color:var(--muted)}
.cal-cell{border-radius:8px}
.cal-num{font-weight:600;font-size:12.5px}
.cal-ev{font-size:11px;border-radius:4px;padding:1px 5px}

/* ── modals ── */
.mo{background:rgba(16,30,38,.45);backdrop-filter:none}
.mo-box{border-radius:14px;box-shadow:0 30px 70px -20px rgba(16,30,38,.45);animation:none}
.mo-h{padding:16px 22px}
.mo-t{font-size:16px;font-weight:600;letter-spacing:-.005em}
.mo-b{padding:20px 22px;gap:12px 14px}
.mo-f{padding:14px 22px;background:#F8FAFA;border-radius:0 0 14px 14px}

/* ── tabs and toggles ── */
.stab{font-size:13px;font-weight:500;border-radius:7px}
.ptab{font-size:13px;font-weight:500}
.feat-name{font-size:14px;font-weight:600}
.feat-desc{font-size:12.5px}

/* ── reports ── */
.rep-card{border:1px solid var(--border);border-radius:12px}
.rep-card:hover{box-shadow:none;border-color:var(--teal)}
.rep-icon{border-radius:10px}
.rep-title{font-size:14.5px;font-weight:600}
.rep-stat{border-top:1px solid var(--border);border-radius:12px;text-align:left}
.rep-stat-num{font-size:24px;font-weight:600}
.rep-section{font-size:13px;font-weight:600;color:var(--ink);border-bottom:1px solid var(--border)}

/* ── toasts ── */
.toast{border-radius:10px;font-weight:500}

/* ── sign-in screen (layout kept, decoration removed) ── */
.login-left::before,.login-right::before,.login-right::after{display:none!important}
.login-right{background:#F4F6F6!important}
.login-headline{font-size:36px;font-weight:600;letter-spacing:-.02em;line-height:1.15}
.login-headline em{font-style:normal!important;color:var(--teal2)}
.login-box{border-radius:14px;box-shadow:0 24px 60px -30px rgba(16,30,38,.35);border:1px solid var(--border)}
.login-box-title{font-size:24px!important;font-weight:600!important;letter-spacing:-.015em}
.lbtn{border-radius:8px;font-weight:600;font-size:14.5px}
.lbtn:hover{transform:none;box-shadow:none}
.eye svg{width:18px;height:18px}
@media (max-width:768px){.login-right{background:var(--navy)!important}.main-body{padding:14px}}

/* ── mobile bars ── */
.bn-item{font-size:10.5px;font-weight:500}
.mob-topbar-title{font-weight:600}
@media (prefers-reduced-motion:reduce){*{transition:none!important;animation:none!important}}

/* ── line icons put in place of emoji ── */
svg.pz{width:15px;height:15px;flex-shrink:0;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round;vertical-align:-2px}
svg.pz-glyph{width:1em;height:1em;max-width:26px;max-height:26px;stroke-width:1.6;color:var(--ink2);vertical-align:-.15em}
button.pz-iconly{color:var(--ink2)}
button.pz-iconly:hover{border-color:var(--ink2)!important}
.pz-wa svg.pz,.btn[title="WhatsApp"] svg.pz{color:#1FAF54}
.rep-icon{font-size:20px}
.rep-icon svg.pz-glyph{color:var(--ink)}
.empty-state svg.pz-glyph,[style*="font-size:40px"] > svg.pz-glyph,[style*="font-size:48px"] > svg.pz-glyph{max-width:30px;max-height:30px;color:var(--faint)}
.sb-sec.pz-hide{display:none}
.sb-nav > .nb:first-of-type{margin-top:6px}
a.btn,a.btn:hover{text-decoration:none}
/* filled WhatsApp buttons: outline, icon in green (same as the rest of the app) */
.btn-wa{background:var(--surface)!important;color:var(--ink2)!important;border:1px solid var(--border)!important}
.btn-wa:hover{border-color:#1FAF54!important}
.btn-wa svg{color:#1FAF54}