:root{--primary:#1D6FD8;--primary-dark:#162B55;--primary-light:#EFF6FF;--primary-mid:#BFDBFE;--success:#059669;--success-light:#D1FAE5;--warning:#D97706;--warning-light:#FEF3C7;--danger:#DC2626;--danger-light:#FEE2E2;--bg:#F0F5FF;--text:#1A2B3C;--text-mid:#4A5568;--text-light:#718096;--border:#DBEAFE;--sidebar-w:252px;--radius:14px;}
*,*::before,*::after{box-sizing:border-box;margin:0;padding:0;}
body{font-family:'DM Sans',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:var(--bg);color:var(--text);min-height:100vh;line-height:1.5;}
.view{display:none!important;}.view.active{display:flex!important;}
#setupView,#loginView{min-height:100vh;flex-direction:column;align-items:center;justify-content:center;padding:2rem 1rem;background:linear-gradient(145deg,#162B55 0%,#1D6FD8 45%,#3B82F6 100%);position:relative;overflow:hidden;} #cloudAuthView{min-height:100vh;flex-direction:row;align-items:stretch;padding:0;background:#f4f7f8;overflow:hidden;}
#setupView::before,#loginView::before{content:'';position:absolute;width:600px;height:600px;border-radius:50%;background:rgba(255,255,255,0.04);top:-200px;right:-200px;}
#setupView::after,#loginView::after{content:'';position:absolute;width:400px;height:400px;border-radius:50%;background:rgba(255,255,255,0.04);bottom:-150px;left:-100px;}
.auth-card{background:white;border-radius:24px;padding:2.5rem 2.25rem;width:520px;max-width:96vw;box-shadow:0 24px 64px rgba(0,0,0,0.18);position:relative;z-index:1;}
.auth-logo{text-align:center;margin-bottom:1.75rem;}
.auth-logo .logo-box{width:68px;height:68px;background:var(--primary-light);border-radius:20px;display:inline-flex;align-items:center;justify-content:center;font-size:2rem;margin-bottom:0.75rem;border:3px solid var(--primary-mid);}
.auth-logo h1{font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:1.8rem;font-weight:900;color:var(--primary-dark);}
.auth-logo p{color:var(--text-light);font-size:0.875rem;margin-top:0.2rem;}
.doctor-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:0.875rem;margin-top:1.5rem;}
.doctor-card{border:2px solid var(--border);border-radius:16px;padding:1.25rem 1rem;text-align:center;cursor:pointer;transition:all 0.2s;}
.doctor-card:hover{border-color:var(--primary);background:var(--primary-light);transform:translateY(-3px);}
.doctor-card .doc-avatar{width:54px;height:54px;background:var(--primary-light);border-radius:50%;display:inline-flex;align-items:center;justify-content:center;font-size:1.1rem;font-weight:800;color:var(--primary);margin-bottom:0.6rem;border:2px solid var(--primary-mid);}
.doctor-card h3{font-size:0.82rem;font-weight:700;color:var(--text);}
.doctor-card p{font-size:0.72rem;color:var(--text-light);margin-top:0.2rem;}
.form-group{margin-bottom:1.1rem;}
.form-group label{display:block;font-size:0.72rem;font-weight:700;color:var(--text-mid);text-transform:uppercase;letter-spacing:0.06em;margin-bottom:0.35rem;}
.form-group input,.form-group select,.form-group textarea{width:100%;padding:0.6rem 0.9rem;border:1.5px solid var(--border);border-radius:10px;font-family:inherit;font-size:0.88rem;color:var(--text);background:white;transition:border-color 0.2s;outline:none;}
.form-group input:focus,.form-group select:focus,.form-group textarea:focus{border-color:var(--primary);box-shadow:0 0 0 3px rgba(10,126,140,0.1);}
.form-group textarea{resize:vertical;min-height:68px;}
.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.875rem;}
.form-grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:0.875rem;}
.form-required{color:var(--danger);}
.btn{padding:0.62rem 1.4rem;border-radius:10px;border:none;font-family:inherit;font-size:0.875rem;font-weight:600;cursor:pointer;transition:all 0.2s;display:inline-flex;align-items:center;gap:0.4rem;white-space:nowrap;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;}
.btn:active{transform:scale(0.97);}
.btn-primary{background:var(--primary);color:white;}.btn-primary:hover{background:var(--primary-dark);}
.btn-secondary{background:var(--primary-light);color:var(--primary);border:1.5px solid var(--primary-mid);}.btn-secondary:hover{background:var(--primary-mid);}
.btn-danger{background:var(--danger-light);color:var(--danger);}.btn-danger:hover{background:#FECACA;}
.btn-ghost{background:transparent;color:var(--text-mid);border:1.5px solid var(--border);}.btn-ghost:hover{background:var(--bg);}
.btn-success{background:var(--success-light);color:var(--success);border:1.5px solid #A7F3D0;}.btn-success:hover{background:#A7F3D0;}
.btn-warning{background:var(--warning-light);color:var(--warning);border:1.5px solid #FDE68A;}.btn-warning:hover{background:#FDE68A;}
.btn-sm{padding:0.42rem 0.9rem;font-size:0.8rem;border-radius:8px;}
.btn-full{width:100%;justify-content:center;}
.sdiv{font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:0.72rem;font-weight:900;text-transform:uppercase;letter-spacing:0.08em;color:var(--primary);padding:0.6rem 0 0.4rem;margin:0.25rem 0 0.9rem;border-bottom:2px solid var(--primary-light);display:flex;align-items:center;gap:0.4rem;}
.symptom-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.3rem 1rem;margin-bottom:0.5rem;}
.symptom-check{display:flex;align-items:center;gap:0.5rem;font-size:0.84rem;color:var(--text);padding:0.25rem 0;cursor:pointer;}
.symptom-check input{width:16px;height:16px;accent-color:var(--primary);cursor:pointer;flex-shrink:0;}
@media (max-width:420px){.symptom-grid{grid-template-columns:1fr;}}
/* Pairs of sections that are each tall but not wide — ANC Schedule/Visit
   Log, Screening/Ultrasounds, Vaccines/Previous Pregnancies, the Gynec
   symptom checklists — side by side once there's room, so a desktop
   window isn't just one long mobile-width column stretched down the
   middle of the screen. Single column below the breakpoint (phones,
   narrow windows) keeps today's behavior exactly as-is. */
.wide-2col{display:block;}
.wide-2col>.w2c-panel+.w2c-panel{margin-top:1rem;}
@media (min-width:900px){
  .wide-2col{display:grid;grid-template-columns:1fr 1fr;gap:0 1.75rem;align-items:start;}
  .wide-2col>.w2c-panel+.w2c-panel{margin-top:0;}
}
.collapse-header{display:flex;align-items:center;justify-content:space-between;cursor:pointer;padding:0.7rem 1rem;background:var(--primary-light);border-radius:10px;border:1.5px solid var(--primary-mid);user-select:none;}
.collapse-header h3{font-size:0.875rem;font-weight:700;color:var(--primary-dark);}
.collapse-header .chevron{transition:transform 0.3s;color:var(--primary);font-size:0.75rem;font-style:normal;}
.collapse-header.expanded .chevron{transform:rotate(90deg);}
.collapse-body{display:none;padding:1.25rem;background:#FAFCFF;border-radius:0 0 10px 10px;border:1.5px solid var(--primary-mid);border-top:none;margin-bottom:0.5rem;}
.collapse-body.open{display:block;}
#appView{flex-direction:column;min-height:100vh;}
/* ── LEGACY SIDEBAR (hidden — replaced by top nav) ── */
.sidebar{display:none!important;}
/* ── TOP NAV ── */
#app-topnav{
  position:fixed;top:0;left:0;right:0;height:58px;z-index:200;
  background:var(--primary-dark);
  display:flex;align-items:center;
  padding:0 1.5rem;gap:0;
  border-bottom:1px solid rgba(255,255,255,0.1);
  box-shadow:0 2px 12px rgba(0,0,0,0.25);
}
.tnav-brand{display:flex;align-items:center;gap:0.55rem;flex-shrink:0;margin-right:1.5rem;text-decoration:none;}
.tnav-appname{font-family:'Nunito',-apple-system,sans-serif;font-size:1.1rem;font-weight:900;color:white;letter-spacing:-0.3px;}
.tnav-divider{color:rgba(255,255,255,0.2);font-size:1rem;margin:0 0.5rem;font-weight:300;}
.tnav-clinic{font-size:0.82rem;font-weight:600;color:rgba(255,255,255,0.6);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:180px;}
.tnav-nav{display:flex;align-items:center;gap:0.15rem;flex:1;min-width:0;overflow-x:auto;overflow-y:hidden;scrollbar-width:none;-ms-overflow-style:none;}
.tnav-nav::-webkit-scrollbar{display:none;}
.tnav-right{display:flex;align-items:center;gap:0.5rem;flex-shrink:0;}
/* Nav items — horizontal top-nav style */
.nav-item{display:flex;align-items:center;gap:0.4rem;padding:0.42rem 0.85rem;border-radius:8px;cursor:pointer;font-size:0.82rem;font-weight:500;color:rgba(255,255,255,0.62);transition:all 0.18s;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;white-space:nowrap;}
.nav-item:hover{background:rgba(255,255,255,0.1);color:white;}
.nav-item.active{background:rgba(255,255,255,0.16);color:white;font-weight:700;}
.nav-item .ni{font-size:0.95rem;}
/* Doctor block in top nav */
.tnav-doctor{display:flex;align-items:center;gap:0.55rem;padding:0.3rem 0.65rem;border-radius:8px;border:1px solid rgba(255,255,255,0.12);background:rgba(255,255,255,0.06);cursor:default;flex-shrink:0;}
.tnav-av{width:32px;height:32px;border-radius:50%;background:rgba(255,255,255,0.2);display:flex;align-items:center;justify-content:center;font-size:0.72rem;font-weight:800;color:white;flex-shrink:0;border:1.5px solid rgba(255,255,255,0.35);cursor:default;}
.tnav-doc-info{display:flex;flex-direction:column;min-width:0;}
.tnav-dname{font-size:0.78rem;font-weight:700;color:white;line-height:1.2;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.tnav-dqual{font-size:0.65rem;color:rgba(255,255,255,0.5);line-height:1.2;margin-top:0.05rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
/* Hide doctor text on true mobile — show just the avatar circle before the
   simplified mobile treatment below (name only, no avatar) takes over. This
   used to run all the way up to 960px for the old single-row header; now
   that the two-row layout gives row 1 its own space from 769px up, it only
   needs to apply within the actual mobile band. */
@media(max-width:768px){
  .tnav-doc-info{display:none;}
  .tnav-dqual{display:none;}
  .tnav-doctor{padding:0.3rem 0.4rem;}
  .tnav-clinic{max-width:100px;}
}
.tnav-signout{background:transparent;border:1px solid rgba(255,255,255,0.2);color:rgba(255,255,255,0.6);padding:0.3rem 0.75rem;border-radius:8px;font-size:0.78rem;font-weight:600;cursor:pointer;transition:all 0.18s;font-family:inherit;white-space:nowrap;}
.tnav-signout:hover{background:rgba(255,255,255,0.1);color:white;}
.tnav-hamburger{display:none;background:rgba(255,255,255,0.1);border:none;color:white;padding:0.3rem 0.6rem;border-radius:8px;cursor:pointer;flex-direction:column;gap:4px;align-items:center;justify-content:center;min-width:36px;min-height:36px;-webkit-tap-highlight-color:rgba(255,255,255,0.2);}
/* ── Two-row header (tablet + desktop) ──
   Brand, doctor identity, and the utility cluster (sync/install/help/
   theme/sign-out) share a top row; the 6 nav links get a full-width row
   of their own underneath. This is the standing layout above the mobile
   breakpoint — not a narrow-width fallback — so nav links never compete
   with the utility cluster for space and can't get silently scrolled out
   of view. Mobile (<=768px) keeps its existing single-row + hamburger
   pattern untouched. */
@media(min-width:769px){
  #app-topnav{height:auto;flex-wrap:wrap;align-content:flex-start;padding:0;}
  .tnav-brand{order:1;padding:0.6rem 0 0.6rem 1.5rem;margin-right:0.75rem;}
  .tnav-doctor{order:2;}
  .tnav-right{order:3;flex:1;justify-content:flex-end;padding:0.6rem 1.5rem 0.6rem 0;}
  .tnav-nav{
    order:4;flex-basis:100%;width:100%;
    background:rgba(0,0,0,0.14);
    padding:0.35rem 1.5rem;
    border-top:1px solid rgba(255,255,255,0.08);
  }
}
/* Narrow tablet band — row 1 (brand + doctor + utility cluster) can still
   get tight here even with nav on its own row below. Trim the least
   essential text first (clinic name, doctor's qualification line) so the
   doctor's actual NAME — the one thing worth protecting — doesn't get
   squeezed down to nothing. */
@media(min-width:769px) and (max-width:1010px){
  .tnav-clinic{display:none;}
  .tnav-divider{display:none;}
  .tnav-dqual{display:none;}
}
/* Main content — full width, offset for fixed top nav */
.main{margin-left:0;flex:1;display:flex;flex-direction:column;min-height:100vh;padding-top:58px;}
.topbar{background:white;border-bottom:1px solid var(--border);padding:0.75rem 2rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:58px;z-index:50;box-shadow:0 1px 4px rgba(0,0,0,0.04);}
/* Re-apply the taller two-row-header offset here — it must come AFTER the
   unconditional .main/.topbar rule above (same specificity, so source
   order decides the winner) or the 58px value silently wins at every
   width and the header ends up overlapping/hiding the page's own topbar
   (title, search box, "+ Add" button) underneath it. This is what caused
   the search bar to disappear: the offset rule existed but was ordered
   too early to ever actually apply. */
@media(min-width:769px){
  /* --tnav-h is the header's real height, kept current by core.js: on a
     tablet the utility buttons can wrap onto a second line and the header
     grows taller than 112px, which used to hide the Add Patient row. */
  .main{padding-top:var(--tnav-h,112px);}
  .topbar{top:var(--tnav-h,112px);}
}
.topbar h1{font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:1.15rem;font-weight:800;color:var(--text);}
.topbar-right{display:flex;gap:0.75rem;align-items:center;}
.search-box{position:relative;display:flex;align-items:center;width:fit-content;}
.search-box .si{position:absolute;left:0.85rem;color:var(--text-light);font-size:0.85rem;pointer-events:none;}
.search-input{padding:0.52rem 1rem 0.52rem 2.4rem;border:1.5px solid var(--border);border-radius:10px;font-family:inherit;font-size:0.85rem;width:260px;outline:none;transition:border-color 0.2s;}
.search-input:focus{border-color:var(--primary);}
/* Full-width search when in patients topbar */
.search-box[style*="width:100"]{width:100%;}
.search-box[style*="width:100"] .search-input{width:100%;box-sizing:border-box;}
.page-section{display:none;flex-direction:column;flex:1;}
.page-section.active{display:flex;}
.page-body{padding:1.75rem 2rem;flex:1;}
.stats-row{display:grid;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem;}
.stat-card{background:white;border-radius:var(--radius);padding:1.1rem 1.25rem;border:1px solid var(--border);display:flex;align-items:center;gap:1rem;}
.stat-icon{width:46px;height:46px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;flex-shrink:0;}
.stat-val{font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:1.6rem;font-weight:800;color:var(--text);line-height:1;}
.stat-lbl{font-size:0.75rem;color:var(--text-light);margin-top:0.2rem;}
/* ── Reception queue stat cards: small, subtle, clickable filters ── */
.rq-stats-row{gap:0.45rem;}
.rq-stat-card{
  padding:0.4rem 0.6rem;gap:0.4rem;border-radius:9px;
  cursor:pointer;user-select:none;-webkit-tap-highlight-color:transparent;
  transition:border-color 0.15s,box-shadow 0.15s,background 0.15s;
}
.rq-stat-card:hover{border-color:var(--primary-mid);box-shadow:0 2px 8px rgba(0,0,0,0.06);}
.rq-stat-card:active{background:var(--bg);}
.rq-stat-card.rq-filter-active{border-color:var(--primary);background:var(--primary-light);box-shadow:0 0 0 1px var(--primary) inset;}
.rq-stat-card .stat-icon{width:26px;height:26px;border-radius:7px;font-size:0.8rem;}
.rq-stat-card .stat-val{font-size:0.95rem;}
.rq-stat-card .stat-lbl{font-size:0.62rem;margin-top:0.05rem;}
@media(max-width:480px){
  .rq-stats-row{grid-template-columns:1fr 1fr;}
  .rq-stat-card{padding:0.35rem 0.5rem;gap:0.35rem;}
  .rq-stat-card .stat-icon{width:22px;height:22px;font-size:0.7rem;}
  .rq-stat-card .stat-val{font-size:0.85rem;}
  .rq-stat-card .stat-lbl{font-size:0.58rem;}
}
.card{background:white;border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;}
.card-header{padding:1rem 1.5rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.card-header h2{font-size:0.95rem;font-weight:700;}
table{width:100%;border-collapse:collapse;}
thead tr{background:var(--bg);}
th{padding:0.65rem 1.25rem;text-align:left;font-size:0.7rem;font-weight:800;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-light);}
td{padding:0.875rem 1.25rem;font-size:0.855rem;border-top:1px solid var(--border);vertical-align:middle;}
tbody tr{transition:background 0.15s;cursor:pointer;}
tbody tr:hover{background:#F7FBFC;}
.pt-cell{display:flex;align-items:center;gap:0.75rem;}
.pt-av{width:36px;height:36px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:0.78rem;font-weight:800;flex-shrink:0;}
.av-m{background:#DBEAFE;color:#1D4ED8;}.av-f{background:#FCE7F3;color:#9D174D;}
.pt-name{font-weight:600;color:var(--text);}
.pt-parent{font-size:0.74rem;color:var(--text-light);margin-top:0.1rem;}
.badge{display:inline-flex;padding:0.18rem 0.6rem;border-radius:20px;font-size:0.72rem;font-weight:700;}
.badge-blue{background:#DBEAFE;color:#1E40AF;}.badge-pink{background:#FCE7F3;color:#9D174D;}
.badge-green{background:var(--success-light);color:#065F46;}.badge-orange{background:var(--warning-light);color:#92400E;}
.badge-teal{background:var(--primary-light);color:var(--primary-dark);}.badge-red{background:var(--danger-light);color:var(--danger);}
.empty{text-align:center;padding:3.5rem 2rem;color:var(--text-light);}
.empty .ei{font-size:2.75rem;margin-bottom:0.875rem;}
.empty h3{font-size:1.05rem;font-weight:700;color:var(--text);margin-bottom:0.4rem;}
.empty p{font-size:0.85rem;margin-bottom:1.25rem;}
.modal-overlay{display:none;position:fixed;inset:0;background:rgba(10,20,40,0.55);z-index:200;align-items:center;justify-content:center;padding:1rem;}
.modal-overlay.open{display:flex !important;}
.modal{background:white;border-radius:22px;width:700px;max-width:100%;max-height:92vh;overflow-y:auto;box-shadow:0 28px 80px rgba(0,0,0,0.22);animation:modalIn 0.22s ease;position:relative;isolation:isolate;}
.modal-wide{width:920px;}
@keyframes modalIn{from{opacity:0;}to{opacity:1;}}
.modal-header{padding:1.4rem 1.75rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;background:white;z-index:10;border-radius:22px 22px 0 0;}
.modal-header h2{font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:1.15rem;font-weight:800;}
.modal-close{width:32px;height:32px;border-radius:8px;border:none;background:var(--bg);cursor:pointer;font-size:1rem;display:flex;align-items:center;justify-content:center;color:var(--text-light);}
.modal-close:hover{background:var(--danger-light);color:var(--danger);}
.modal-body{padding:1.5rem 1.75rem;}
.modal-footer{padding:1rem 1.75rem;border-top:1px solid var(--border);display:flex;justify-content:flex-end;gap:0.75rem;position:sticky;bottom:0;background:white;border-radius:0 0 22px 22px;}
.profile-hero{display:none!important;}
/* Compact patient meta bar shown in topbar */
.prof-meta-bar{display:flex;align-items:center;gap:0.4rem;flex-wrap:wrap;margin-top:0.2rem;}
.prof-meta-pill{display:inline-flex;align-items:center;gap:0.25rem;font-size:0.71rem;color:var(--text-mid);background:var(--primary-light);border:1px solid var(--primary-mid);border-radius:5px;padding:0.12rem 0.45rem;font-weight:500;white-space:nowrap;}
.prof-module-row{display:inline-flex;align-items:center;gap:0.35rem;margin-top:0.45rem;color:var(--text-mid);}
.prof-module-row select{border:1px solid var(--primary-mid);background:var(--primary-light);color:var(--text-mid);border-radius:5px;padding:0.2rem 0.5rem;font:inherit;font-size:0.78rem;font-weight:600;cursor:pointer;outline:none;min-height:28px;}
/* Patient name clickable */
.prof-name-btn{cursor:pointer;display:inline-flex;align-items:center;gap:0.5rem;border:none;background:none;font-family:inherit;padding:0;text-align:left;}
.prof-name-btn h1{font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:1.25rem;font-weight:800;color:var(--text);}
.prof-name-btn:hover h1{color:var(--primary);text-decoration:underline;text-underline-offset:3px;}
.prof-name-btn .info-badge{font-size:0.68rem;color:white;background:var(--primary);border-radius:5px;padding:0.12rem 0.4rem;font-weight:700;flex-shrink:0;}
/* Patient info modal grid */
.pi-grid{display:grid;grid-template-columns:1fr 1fr;gap:0.9rem 1.5rem;padding:1.25rem 1.5rem;}
.pi-item label{font-size:0.67rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-light);display:block;margin-bottom:0.2rem;}
.pi-item p{font-size:0.88rem;color:var(--text);font-weight:500;margin:0;}
.pi-item.full{grid-column:1/-1;}
/* Tabs full width to match content below */
.tabs-wrap{display:flex;gap:0.2rem;background:white;border-radius:12px;padding:0.35rem;border:1px solid var(--border);margin-bottom:1.5rem;width:100%;flex-wrap:wrap;box-sizing:border-box;}
.tab-btn{padding:0.5rem 1.1rem;border-radius:9px;border:none;font-family:inherit;font-size:0.82rem;font-weight:600;cursor:pointer;color:var(--text-mid);background:transparent;transition:all 0.18s;display:flex;align-items:center;gap:0.35rem;}
.tab-btn.active{background:var(--primary);color:white;}
.tab-btn:hover:not(.active){background:var(--bg);}
.tab-content{display:none;}.tab-content.active{display:block;}
.info-card{background:white;border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;}
.info-card-header{padding:0.875rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.info-card-header h3{font-size:0.875rem;font-weight:700;display:flex;align-items:center;gap:0.4rem;}
.info-card-body{padding:1.1rem 1.25rem;}
.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:0.875rem;}
.info-item label{font-size:0.68rem;font-weight:700;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-light);}
.info-item p{font-size:0.875rem;font-weight:500;color:var(--text);margin-top:0.2rem;}
.visit-card{border:1px solid var(--border);border-radius:12px;margin-bottom:1rem;overflow:hidden;}
.visit-card-head{padding:0.75rem 1.1rem;background:var(--bg);display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid var(--border);}
.visit-card-body{padding:0.875rem 1.1rem;}
.visit-row{margin-bottom:0.6rem;}
.visit-row label{font-size:0.66rem;font-weight:800;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-light);display:block;margin-bottom:0.15rem;}
.visit-row p{font-size:0.855rem;color:var(--text);}
.vitals-row{display:flex;gap:1.5rem;flex-wrap:wrap;margin-bottom:0.75rem;padding-bottom:0.75rem;border-bottom:1px solid var(--border);}
.vital-item label{font-size:0.66rem;font-weight:700;text-transform:uppercase;color:var(--text-light);display:block;}
.vital-item span{font-weight:600;font-size:0.8rem;color:var(--text);}
.drug-search-wrap{position:relative;flex:1;}
.drug-dropdown{position:absolute;top:calc(100% + 4px);left:0;right:0;background:white;border:1.5px solid var(--border);border-radius:12px;box-shadow:0 8px 32px rgba(0,0,0,0.12);max-height:300px;overflow-y:auto;z-index:500;display:none;}
/* Autocomplete for complaint / diagnosis */
.ac-wrap{position:relative;}
.ac-dropdown{position:absolute;top:calc(100% + 2px);left:0;right:0;background:white;border:1.5px solid var(--primary-mid);border-radius:10px;box-shadow:0 6px 24px rgba(0,0,0,0.13);max-height:220px;overflow-y:auto;z-index:600;display:none;}
.ac-item{padding:0.55rem 0.9rem;cursor:pointer;font-size:0.84rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:0.5rem;touch-action:manipulation;}
.ac-item:last-child{border-bottom:none;}
.ac-item:hover,.ac-item:active{background:var(--primary-light);}
.ac-item-text{flex:1;color:var(--text);}
.ac-item-count{font-size:0.68rem;background:var(--bg);padding:0.1rem 0.4rem;border-radius:10px;color:var(--text-light);font-weight:700;flex-shrink:0;}
.ac-header{padding:0.3rem 0.9rem;font-size:0.62rem;font-weight:800;text-transform:uppercase;background:var(--bg);color:var(--text-light);letter-spacing:0.07em;}
.dd-category{padding:0.3rem 0.9rem;font-size:0.62rem;font-weight:800;text-transform:uppercase;background:var(--bg);color:var(--text-light);}
.dd-item{padding:0.6rem 0.9rem;cursor:pointer;border-top:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.dd-item:hover{background:var(--primary-light);}
.dd-item-left strong{font-size:0.875rem;font-weight:700;display:block;}
.dd-item-left span{font-size:0.75rem;color:var(--text-light);}
.dd-item-right{font-size:0.7rem;background:var(--bg);padding:0.15rem 0.5rem;border-radius:20px;color:var(--text-light);font-weight:600;white-space:nowrap;}
.dd-empty{padding:1rem;text-align:center;color:var(--text-light);font-size:0.85rem;font-style:italic;}
.rx-table-outer{overflow-x:auto;border:1.5px solid var(--primary-mid);border-radius:12px;margin-top:0.5rem;}
.rx-table{width:100%;border-collapse:collapse;min-width:680px;}
.rx-table thead tr{background:var(--primary-light);}
.rx-table th{padding:0.5rem 0.75rem;text-align:left;font-size:0.68rem;font-weight:800;text-transform:uppercase;color:var(--primary-dark);}
.rx-table td{padding:0.5rem 0.6rem;border-top:1px solid var(--border);vertical-align:middle;}
.rx-input{width:90px;padding:0.3rem 0.5rem;border:1.5px solid var(--border);border-radius:7px;font-family:inherit;font-size:0.82rem;outline:none;}
.rx-medicine-input{width:230px;}
.rx-input:focus{border-color:var(--primary);}
.rx-drag-handle{cursor:grab;color:var(--text-light);font-size:0.85rem;margin-right:0.2rem;user-select:none;touch-action:none;padding:0.3rem 0.35rem;display:inline-block;}
.rx-row-dragging{opacity:0.4;}
.rx-row-dragover{box-shadow:inset 0 2px 0 var(--primary),inset 0 -2px 0 var(--primary);}
.rx-select{padding:0.3rem 0.4rem;border:1.5px solid var(--border);border-radius:7px;font-family:inherit;font-size:0.78rem;background:white;outline:none;cursor:pointer;max-width:160px;}
.rx-drug-brand{font-weight:700;font-size:0.85rem;}
.rx-drug-info{font-size:0.72rem;color:var(--text-light);margin-top:0.1rem;}
.rx-empty{text-align:center;padding:1.5rem;color:var(--text-light);font-size:0.85rem;font-style:italic;}
.dd-item mark{background:#FEF08A;border-radius:2px;padding:0 1px;font-style:normal;}
.dd-item-left strong{font-size:0.875rem;font-weight:700;display:block;}
.dd-item-left span{font-size:0.75rem;color:var(--text-light);margin-top:0.1rem;display:block;}
.rx-hist-item{padding:0.75rem 1rem;border:1px solid var(--border);border-radius:10px;margin-bottom:0.5rem;display:flex;align-items:center;gap:1rem;flex-wrap:wrap;}
/* IMMUNIZATION */
.immun-legend{display:flex;gap:1.25rem;flex-wrap:wrap;padding:0.75rem 1.25rem;background:var(--bg);border-bottom:1px solid var(--border);}
.legend-item{display:flex;align-items:center;gap:0.4rem;font-size:0.75rem;font-weight:600;color:var(--text-mid);}
.legend-dot{width:10px;height:10px;border-radius:2px;flex-shrink:0;}
.immun-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:0.875rem;padding:1rem 1.25rem;}
.immun-stat{background:var(--bg);border:1px solid var(--border);border-radius:12px;padding:0.75rem 1rem;text-align:center;}
.immun-stat .is-val{font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:1.4rem;font-weight:800;line-height:1;}
.immun-stat .is-lbl{font-size:0.7rem;color:var(--text-light);margin-top:0.15rem;}
.immun-scroll{overflow-x:auto;-webkit-overflow-scrolling:touch;}
.immun-tbl{width:100%;border-collapse:collapse;min-width:720px;}
.immun-tbl thead tr{background:var(--bg);border-bottom:2px solid var(--border);}
.immun-tbl thead th{padding:0.6rem 0.75rem;text-align:left;font-size:0.68rem;font-weight:800;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-light);white-space:nowrap;}
.th-age{min-width:140px;}.th-vax{min-width:200px;}.th-due{min-width:120px;}.th-given{min-width:100px;}.th-brand{min-width:120px;}.th-act{min-width:90px;text-align:right;}
.age-td{vertical-align:top;padding:0.875rem;border-right:2px solid var(--border);}
.vrow td{padding:0.5rem 0.75rem;border-top:1px solid #F0F5FF;vertical-align:middle;font-size:0.83rem;}
.vrow:hover td{background:#f7fbfc!important;}
.age-label-main{font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-weight:800;font-size:0.85rem;color:var(--text);}
.age-calc-date{font-size:0.7rem;color:var(--text-light);margin-top:0.2rem;}
.age-prog{font-size:0.68rem;font-weight:700;margin-top:0.35rem;}
.cust-badge{font-size:0.58rem;background:var(--warning-light);color:var(--warning);padding:0.1rem 0.35rem;border-radius:4px;font-weight:800;margin-left:0.3rem;letter-spacing:0.04em;}
.global-badge{font-size:0.58rem;background:#EDE9FE;color:#6D28D9;padding:0.1rem 0.35rem;border-radius:4px;font-weight:800;margin-left:0.3rem;}
.vax-detail-header{background:var(--primary-light);border-radius:12px;padding:1rem;margin-bottom:1.25rem;display:flex;align-items:center;gap:0.75rem;}
.vax-detail-icon{width:44px;height:44px;border-radius:10px;display:flex;align-items:center;justify-content:center;font-size:1.3rem;background:white;flex-shrink:0;border:1.5px solid var(--primary-mid);}
.vax-detail-name{font-weight:800;font-size:1rem;color:var(--primary-dark);}
.vax-detail-sub{font-size:0.8rem;color:var(--text-mid);margin-top:0.15rem;}
.admin-reg-row{border:1px solid var(--border);border-radius:12px;padding:1rem 1.25rem;margin-bottom:0.75rem;background:white;transition:box-shadow 0.15s;}
.admin-reg-row:hover{box-shadow:0 2px 10px rgba(22,43,85,0.08);}
.admin-status-pill{display:inline-flex;align-items:center;padding:0.18rem 0.65rem;border-radius:20px;font-size:0.7rem;font-weight:700;text-transform:uppercase;letter-spacing:0.05em;}
.asp-pending{background:#FEF3C7;color:#92400E;}
.asp-approved{background:#D1FAE5;color:#065F46;}
.asp-rejected{background:#FEE2E2;color:#991B1B;}
.asp-cancelled{background:#F1F5F9;color:#475569;}
.asp-none{background:#F1F5F9;color:#64748B;text-transform:none;letter-spacing:0;}
.admin-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:0.6rem;margin-bottom:1rem;}
.admin-row-top{display:flex;align-items:flex-start;justify-content:space-between;gap:0.75rem;flex-wrap:wrap;}
.admin-row-main{flex:1 1 240px;min-width:0;}
.admin-row-side{display:flex;flex-direction:column;align-items:flex-end;gap:0.35rem;}
@media (max-width:600px){
  .admin-stats{grid-template-columns:repeat(3,1fr);gap:0.4rem;}
  .admin-stats>div{padding:0.5rem 0.3rem !important;}
  .admin-row-side{flex-direction:row;flex-wrap:wrap;align-items:center;width:100%;}
  .admin-reg-row{padding:0.875rem;}
}
.admin-pending-note{display:flex;align-items:center;justify-content:space-between;gap:0.75rem;flex-wrap:wrap;background:#FEF3C7;border:1.5px solid #FCD34D;color:#92400E;border-radius:10px;padding:0.75rem 1rem;margin-bottom:1rem;font-size:0.88rem;}
.admin-search{display:flex;gap:0.5rem;margin-bottom:0.5rem;}
.admin-search input{flex:1;min-width:0;font-size:16px;}
.admin-chips{display:flex;gap:0.4rem;flex-wrap:wrap;margin-bottom:0.75rem;}
.admin-list-head{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;margin:0.5rem 0 0.6rem;font-size:0.88rem;}
.admin-hint{color:var(--text-light);font-size:0.85rem;font-style:italic;padding:0.4rem 0;}
.admin-new{display:inline-block;background:#7C3AED;color:#fff;font-size:0.6rem;font-weight:800;padding:0.1rem 0.4rem;border-radius:6px;vertical-align:middle;letter-spacing:0.05em;}
.admin-pending-banner{position:fixed;top:12px;left:50%;transform:translateX(-50%);z-index:9999;display:flex;align-items:center;gap:0.6rem;flex-wrap:wrap;justify-content:center;max-width:min(94vw,640px);background:#FEF3C7;border:1.5px solid #FCD34D;color:#92400E;border-radius:12px;padding:0.5rem 0.5rem 0.5rem 1rem;box-shadow:0 8px 24px rgba(0,0,0,0.15);font-size:0.88rem;}
.toast{position:fixed;bottom:1.75rem;right:1.75rem;padding:0.8rem 1.4rem;border-radius:12px;font-size:0.85rem;font-weight:600;z-index:999;transform:translateY(80px);opacity:0;transition:all 0.3s cubic-bezier(0.34,1.56,0.64,1);display:flex;align-items:center;gap:0.5rem;max-width:340px;box-shadow:0 8px 24px rgba(0,0,0,0.15);}
.toast.show{transform:translateY(0);opacity:1;}
.toast.success{background:#064E3B;color:white;}.toast.error{background:#7F1D1D;color:white;}.toast.info{background:var(--primary-dark);color:white;}
.d-flex{display:flex;}.ai-center{align-items:center;}.gap-2{gap:0.5rem;}
.mt-15{margin-top:1.5rem;}.text-muted{color:var(--text-light);}.text-sm{font-size:0.8rem;}
::-webkit-scrollbar{width:5px;height:5px;}::-webkit-scrollbar-track{background:transparent;}::-webkit-scrollbar-thumb{background:var(--border);border-radius:10px;}
#rx-print-area{display:none;}
@media print{
  body>*:not(#rx-print-area){display:none!important;}
  #rx-print-area{display:block!important;font-family:'Times New Roman',serif;color:#000;padding:8mm 12mm;font-size:10pt;}
  .rp-letterhead-spacer{display:block;} /* height set inline when header is OFF */
  .rp-header-band{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:4mm;padding-bottom:3mm;border-bottom:1px solid #ccc;}
  .rp-clinic-block{display:flex;align-items:center;gap:3mm;}
  .rp-clinic-logo{width:14mm;height:14mm;object-fit:contain;flex-shrink:0;}
  .rp-clinic-name{font-family:Arial,sans-serif;font-size:16pt;font-weight:bold;color:#162B55;margin-bottom:1mm;}
  .rp-clinic-addr,.rp-clinic-contact{font-size:9pt;color:#333;margin:0.5mm 0;}
  .rp-doctor-block{text-align:right;}
  .rp-doctor-name{font-size:13pt;font-weight:bold;color:#162B55;}
  .rp-doctor-qual{font-size:9pt;color:#333;margin-top:1mm;}
  .rp-doctor-reg{font-size:8.5pt;color:#555;}
  .rp-hline{border:none;border-top:2px solid #162B55;margin:3mm 0;}
  .rp-hline-thin{border:none;border-top:0.5px solid #ccc;margin:2.5mm 0;}
  .rp-patient-row{display:flex;gap:8mm;flex-wrap:wrap;font-size:9.5pt;margin:2mm 0;}
  .rp-diagnosis{font-size:10pt;margin:2mm 0;padding:2mm 3mm;background:#EFF6FF;}
  .rp-rx-symbol{font-size:30pt;color:#162B55;font-family:'Times New Roman';line-height:1;margin:3mm 0 2mm;}
  .rp-drug-row{display:flex;gap:4mm;margin-bottom:5mm;page-break-inside:avoid;}
  .rp-drug-num{font-size:11pt;font-weight:bold;min-width:6mm;}
  .rp-drug-name{font-size:12pt;font-weight:bold;}
  .rp-drug-generic{font-size:9.5pt;font-weight:normal;color:#444;}
  .rp-drug-sig{font-size:10pt;color:#222;margin-top:1mm;}
  .rp-vax-section{margin-top:4mm;}
  .rp-vax-title{font-size:10.5pt;font-weight:bold;margin-bottom:2mm;}
  .rp-vax-tbl{width:100%;border-collapse:collapse;}
  .rp-vax-tbl th{font-size:9pt;font-weight:bold;padding:1.5mm 2mm;border-bottom:1px solid #999;text-align:left;}
  .rp-vax-tbl td{font-size:9.5pt;padding:1.5mm 2mm;border-bottom:0.5px solid #ddd;}
  .rp-advice{font-size:9.5pt;margin:3mm 0;white-space:pre-wrap;}
  .rp-footer{display:flex;justify-content:space-between;align-items:flex-end;margin-top:8mm;padding-top:4mm;border-top:0.5px solid #ccc;}
  .rp-followup{font-size:9.5pt;}
  .rp-sign{text-align:right;}
  .rp-sign-line{border-top:1px solid #000;width:50mm;margin-left:auto;padding-top:1.5mm;}
  .rp-sign-name{font-size:10.5pt;font-weight:bold;}
  .rp-sign-qual{font-size:8.5pt;color:#333;}
  .rp-no-rx{font-style:italic;color:#888;font-size:9.5pt;}
.rp-growth-section{margin-top:3mm;}
.rp-growth-section{margin-top:3mm;}
}
@media(max-width:780px){
  .stats-row,.immun-stats{grid-template-columns:1fr 1fr;}
  .settings-grid{grid-template-columns:1fr;}
  .form-grid,.form-grid-4{grid-template-columns:1fr;}
  .page-body{padding:0.875rem;}
  .topbar{padding:0.65rem 0.875rem;}
  .topbar h1{font-size:1rem;}
  .profile-hero{flex-direction:column;align-items:flex-start;gap:0.75rem;padding:1rem;}
  .tabs-wrap{overflow-x:auto;width:100%;flex-wrap:nowrap;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .tabs-wrap::-webkit-scrollbar{display:none;}
  .tab-btn{white-space:nowrap;flex-shrink:0;font-size:0.78rem;padding:0.42rem 0.8rem;}
  .modal-overlay{padding:0;padding-top:58px;align-items:flex-start;}
  .modal,.modal-wide{
    width:100%;max-width:100%;
    height:calc(100vh - 58px);
    height:calc(100dvh - 58px);
    max-height:calc(100vh - 58px);
    max-height:calc(100dvh - 58px);
    border-radius:0;overflow:hidden;
    display:flex;flex-direction:column;
  }
  .modal-header{border-radius:0;flex-shrink:0;position:static;}
  .modal-body{flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;overscroll-behavior:contain;}
  .modal-footer{
    border-radius:0;flex-shrink:0;position:static;bottom:auto;
    padding-bottom:calc(0.875rem + env(safe-area-inset-bottom, 0px));
  }
  .form-grid-4{grid-template-columns:1fr 1fr;}
  #tab-overview>div{grid-template-columns:1fr!important;}
  .visit-card-head{flex-direction:column;align-items:flex-start;gap:0.4rem;}
  .search-input{width:130px;font-size:0.8rem;}
  .topbar-right .btn-sm{padding:0.38rem 0.6rem;font-size:0.74rem;}
}
@media(max-width:480px){
  .main{margin-left:0;padding-top:58px;}
  .main{margin-top:0;}
  .topbar{top:58px;}
  .page-body{padding:0.75rem 0.75rem 1.5rem;overflow-x:hidden;}
  /* Stats row: 2-column on phones */
  .stats-row{grid-template-columns:1fr 1fr;gap:0.6rem;}
  .stat-card{padding:0.75rem 0.875rem;gap:0.6rem;}
  .stat-icon{width:38px;height:38px;font-size:1.1rem;}
  .stat-val{font-size:1.25rem;}
  /* Topbar */
  .topbar{padding:0.6rem 0.75rem;gap:0.4rem;flex-wrap:wrap;}
  .topbar h1{font-size:0.95rem;white-space:nowrap;}
  .topbar-right{gap:0.4rem;flex-wrap:wrap;}
  .search-box{width:100%;}
  .search-input{width:100%!important;font-size:0.82rem;}
  /* Patient table: make it scrollable */
  #pt-list-wrap{overflow-x:visible;}
  /* Cards and modals */
  .card-header{padding:0.75rem 0.875rem;flex-wrap:wrap;gap:0.5rem;}
  .card-header h2{font-size:0.875rem;}
  /* Profile hero */
  .profile-hero{padding:0.875rem;gap:0.625rem;}
  .hero-av{width:56px;height:56px;font-size:1.35rem;border-radius:14px;}
  .hero-info h2{font-size:1.15rem;}
  .hero-meta{gap:0.75rem;}
  /* Tabs */
  .tabs-wrap{gap:0.15rem;padding:0.25rem;}
  .tab-btn{padding:0.38rem 0.65rem;font-size:0.74rem;}
  /* Visit cards */
  .visit-card-head{flex-direction:column;align-items:flex-start;gap:0.5rem;}
  .visit-card-body{padding:0.75rem;}
  .vitals-row{gap:0.75rem;}
  /* Immun stats */
  .immun-stats{grid-template-columns:1fr 1fr;}
  /* Settings */
  .settings-grid{grid-template-columns:1fr;}
  /* Info grid */
  .info-grid{grid-template-columns:1fr;}
  /* Rx table wrapper */
  .rx-table-outer{font-size:0.78rem;}
  /* Queue cards */
  .queue-card{flex-wrap:wrap;gap:0.5rem;}
  .q-actions{flex-direction:row;flex-wrap:wrap;}
  /* Share sheet */
  .share-sheet{padding:1.25rem 1rem;}
  .share-actions{grid-template-columns:1fr 1fr;gap:0.5rem;}
  /* Toast */
  .toast{bottom:5.5rem;right:0.75rem;left:0.75rem;max-width:100%;font-size:0.8rem;}
  /* Disable modal entry animation on mobile — prevents compositing layer touch-miss */
  .modal,.share-sheet{animation:none!important;}
  /* Modal footer — static inside flex-column modal, always visible */
  .modal-footer{position:static;background:white;z-index:auto;padding:1rem 1.25rem;padding-bottom:calc(1rem + env(safe-area-inset-bottom, 0px));}
  /* Large tap targets */
  .modal-footer .btn{min-height:48px;padding:0.85rem 1.25rem;font-size:0.9rem;}
  /* One-handed mode: stack footer buttons full-width, primary action at the
     bottom (thumb's natural resting spot) instead of a cramped right-aligned
     row. Every modal-footer across the app puts its btn-ghost Cancel first
     and its btn-primary action last in the DOM, so a plain column stack
     — no reordering needed — puts the primary action last = bottom = easiest
     one-handed reach, exactly where it should be for a receptionist juggling
     a phone/tablet with one hand. */
  .modal-footer{flex-direction:column;align-items:stretch;}
  .modal-footer .btn{width:100%;justify-content:center;}
  /* Vitals grid: single column on small phones */
  .form-grid-4{grid-template-columns:1fr 1fr;}
  /* Share buttons larger tap targets */
  .share-btn{min-height:72px;}
}
.mobile-nav{
  display:none;position:fixed;bottom:0;left:0;right:0;z-index:150;
  background:var(--primary-dark);border-top:1px solid rgba(255,255,255,0.1);
  padding:0.4rem 0 env(safe-area-inset-bottom,0.4rem);
}
.mobile-nav-item{
  flex:1;display:flex;flex-direction:column;align-items:center;gap:0.18rem;
  padding:0.35rem 0.2rem;cursor:pointer;color:rgba(255,255,255,0.6);
  font-size:0.58rem;font-weight:600;text-transform:uppercase;letter-spacing:0.04em;transition:color 0.18s;
  touch-action:manipulation;-webkit-tap-highlight-color:rgba(255,255,255,0.1);
  user-select:none;-webkit-user-select:none;
}
.mobile-nav-item.active,.mobile-nav-item:hover{color:white;}
.mobile-nav-item .mni{font-size:1.2rem;line-height:1;}

/* ── BILLING MODULE ──────────────────────────────────────────────── */
.inv-status-pill{display:inline-flex;align-items:center;gap:0.3rem;padding:0.22rem 0.7rem;border-radius:20px;font-size:0.7rem;font-weight:800;letter-spacing:0.04em;}
.isp-paid{background:#D1FAE5;color:#065F46;}
.isp-unpaid{background:#FEE2E2;color:#991B1B;}
.isp-partial{background:#FEF3C7;color:#92400E;}
.inv-type-badge{display:inline-block;font-size:0.62rem;padding:0.1rem 0.4rem;border-radius:10px;font-weight:700;}
.itb-consultation{background:#DBEAFE;color:#1E40AF;}
.itb-procedure{background:#F3E8FF;color:#7C3AED;}
.itb-vaccine{background:#D1FAE5;color:#065F46;}
.itb-medicine{background:#FEF3C7;color:#92400E;}
.bill-items-table{width:100%;border-collapse:collapse;font-size:0.83rem;}
.bill-items-table th{text-align:left;padding:0.45rem 0.5rem;font-size:0.68rem;font-weight:800;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-mid);border-bottom:2px solid var(--border);background:var(--bg);}
.bill-items-table td{padding:0.38rem 0.5rem;border-bottom:1px solid var(--border);vertical-align:middle;}
.bill-items-table tr:last-child td{border-bottom:none;}
.bill-input{border:1.5px solid var(--border);border-radius:7px;padding:0.28rem 0.5rem;font-family:inherit;font-size:0.85rem;outline:none;transition:border-color 0.15s;}
.bill-input:focus{border-color:var(--primary);}
.bill-totals{margin-top:1rem;background:var(--bg);border-radius:10px;padding:0.875rem 1rem;font-size:0.875rem;}
.bill-totals-row{display:flex;justify-content:space-between;align-items:center;padding:0.2rem 0;color:var(--text-mid);}
.bill-totals-row.grand{font-size:1.05rem;font-weight:800;color:var(--text);border-top:2px solid var(--border);margin-top:0.5rem;padding-top:0.6rem;}
.bill-totals-row.discount-row{color:var(--text-mid);}
.bcat-dd{position:absolute;background:white;border:1.5px solid var(--primary-mid);border-radius:10px;z-index:400;box-shadow:0 8px 24px rgba(0,0,0,0.14);max-height:200px;overflow-y:auto;min-width:200px;left:0;top:calc(100% + 3px);}
.bcat-dd-item{padding:0.55rem 0.875rem;cursor:pointer;font-size:0.85rem;transition:background 0.12s;border-bottom:1px solid var(--border);}
.bcat-dd-item:last-child{border-bottom:none;}
.bcat-dd-item:hover{background:var(--primary-light);}
.bcat-dd-item .bcat-name{font-weight:600;color:var(--text);}
.bcat-dd-item .bcat-price{font-size:0.75rem;color:var(--text-light);margin-top:0.1rem;}
.inv-row{display:flex;align-items:center;gap:0.875rem;padding:0.7rem 1.25rem;border-top:1px solid var(--border);cursor:pointer;transition:background 0.15s;}
.inv-row:first-child{border-top:none;}
.inv-row:hover{background:var(--primary-light);}
.inv-row-info{flex:1;min-width:0;}
.inv-row-num{font-size:0.72rem;font-weight:800;color:var(--primary-dark);letter-spacing:0.04em;}
.inv-row-patient{font-weight:700;font-size:0.875rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.inv-row-meta{font-size:0.74rem;color:var(--text-light);margin-top:0.1rem;}
.inv-row-right{text-align:right;flex-shrink:0;}
.inv-row-total{font-size:0.95rem;font-weight:800;color:var(--text);}
.inv-bal-chip{font-size:0.7rem;font-weight:700;padding:0.15rem 0.5rem;border-radius:8px;margin-top:0.2rem;display:inline-block;}
.ibc-due{background:#FEE2E2;color:#991B1B;}
.ibc-clear{background:#D1FAE5;color:#065F46;}
.bl-tab-btn{padding:0.45rem 1rem;border:none;font-family:inherit;font-size:0.82rem;font-weight:700;cursor:pointer;background:transparent;color:var(--text-mid);border-bottom:2.5px solid transparent;transition:all 0.18s;}
.bl-tab-btn.active{color:var(--primary);border-bottom-color:var(--primary);}
.bl-tabs-wrap{display:flex;gap:0;border-bottom:1.5px solid var(--border);margin-bottom:1.25rem;overflow-x:auto;scrollbar-width:none;max-width:100%;}
.bl-tabs-wrap::-webkit-scrollbar{display:none}
.bl-tab-btn{white-space:nowrap;flex-shrink:0}
.inv-patient-selected{background:var(--primary-light);border-radius:8px;padding:0.5rem 0.875rem;font-size:0.875rem;font-weight:600;color:var(--primary-dark);display:flex;align-items:center;justify-content:space-between;border:1.5px solid var(--primary-mid);}
@media(max-width:640px){
  .bill-items-table th:nth-child(4),.bill-items-table td:nth-child(4){display:none;}
  .bill-items-table th:nth-child(5),.bill-items-table td:nth-child(5){display:none;}
}

html{scroll-behavior:smooth;}
*{-webkit-tap-highlight-color:transparent;}

/* ── CLOUD AUTH VIEW ── */
.cloud-auth-tabs{display:flex;gap:0;margin-bottom:1.5rem;border-radius:12px;overflow:hidden;border:1.5px solid var(--primary-mid);}
.cloud-tab{flex:1;padding:0.65rem 1rem;border:none;font-family:inherit;font-size:0.875rem;font-weight:700;cursor:pointer;background:var(--primary-light);color:var(--primary-dark);transition:all 0.18s;}
.cloud-tab.active{background:var(--primary);color:white;}
.auth-divider{display:flex;align-items:center;gap:0.75rem;margin:1rem 0;color:var(--text-light);font-size:0.8rem;}
.auth-divider::before,.auth-divider::after{content:'';flex:1;height:1px;background:var(--border);}
/* ── SYNC STATUS BADGE ── */
.sync-badge{
  display:inline-flex;align-items:center;gap:0.35rem;
  font-size:0.72rem;font-weight:700;padding:0.28rem 0.7rem;
  border-radius:20px;cursor:pointer;transition:all 0.2s;
  border:1.5px solid transparent;
}
.sync-badge.synced{background:#D1FAE5;color:#065F46;border-color:#A7F3D0;}
.sync-badge.syncing{background:#DBEAFE;color:#1E40AF;border-color:#BFDBFE;animation:pulse-sync 1s infinite;}
.sync-badge.offline{background:var(--warning-light);color:#92400E;border-color:#FDE68A;}
.sync-badge.error{background:var(--danger-light);color:var(--danger);border-color:#FECACA;}
.sync-badge.local{background:var(--bg);color:var(--text-light);border-color:var(--border);}
.sync-last-suffix{opacity:0.75;margin-left:0.3rem;font-weight:500;}
.sync-last-suffix:empty{margin-left:0;}
@keyframes pulse-sync{0%,100%{opacity:1;}50%{opacity:0.6;}}
/* ── SYNC DOT ── */
.sync-dot{width:7px;height:7px;border-radius:50%;flex-shrink:0;}
.synced .sync-dot{background:#059669;}
.syncing .sync-dot{background:#3B82F6;}
.offline .sync-dot{background:#D97706;}
.error .sync-dot{background:#DC2626;}
.local .sync-dot{background:#CBD5E1;}
/* ── SUBSCRIPTION CHIP (sidebar) ── */
.sub-chip{display:inline-flex;align-items:center;gap:0.3rem;font-size:0.7rem;font-weight:800;padding:0.22rem 0.6rem;border-radius:20px;letter-spacing:0.2px;white-space:nowrap;}
.sub-chip-ok{background:#D1FAE5;color:#065F46;}
.sub-chip-warn{background:#FEF3C7;color:#92400E;}
.sub-chip-urgent{background:#FEE2E2;color:#991B1B;}
/* ── SUBSCRIPTION LAPSED BAR (fixed bottom) ── */
.sub-lapsed-bar{position:fixed;bottom:0;left:0;right:0;z-index:200;background:linear-gradient(90deg,#7F1D1D,#991B1B);color:white;display:flex;align-items:center;justify-content:space-between;gap:1rem;padding:0.6rem 1.25rem;font-size:0.82rem;font-weight:700;box-shadow:0 -4px 20px rgba(0,0,0,0.25);}
.sub-lapsed-bar a{color:#FCA5A5;text-decoration:underline;cursor:pointer;font-weight:800;}
@media(max-width:768px){.sub-lapsed-bar{left:0;bottom:0;}}
/* ── CLOUD SECTION IN SETTINGS ── */
.cloud-info-card{background:linear-gradient(135deg,#EFF6FF 0%,#EFF6FF 100%);border:1.5px solid var(--primary-mid);border-radius:var(--radius);overflow:hidden;}


/* ── PDF SHARE MODAL ── */
.share-modal-overlay{display:none;position:fixed;inset:0;background:rgba(10,20,40,0.55);z-index:300;align-items:flex-end;justify-content:center;}
.share-modal-overlay.open{display:flex;}
.share-sheet{background:white;border-radius:24px 24px 0 0;padding:1.5rem;width:100%;max-width:520px;animation:slideUp 0.25s ease;position:relative;isolation:isolate;}
@keyframes slideUp{from{transform:translateY(100%);}to{transform:translateY(0);}}
.share-title{font-family:'Nunito',-apple-system,sans-serif;font-size:1.1rem;font-weight:800;color:var(--text);margin-bottom:1.25rem;text-align:center;}
.share-preview{background:var(--bg);border-radius:12px;padding:0.875rem 1rem;margin-bottom:1.25rem;font-size:0.8rem;color:var(--text-mid);border:1px solid var(--border);}
.share-preview strong{color:var(--text);display:block;margin-bottom:0.2rem;font-size:0.875rem;}
.share-actions{display:grid;grid-template-columns:1fr 1fr;gap:0.75rem;margin-bottom:0.75rem;}
.share-btn{display:flex;flex-direction:column;align-items:center;gap:0.4rem;padding:1rem 0.5rem;border-radius:14px;border:1.5px solid var(--border);background:white;cursor:pointer;transition:all 0.18s;font-family:inherit;touch-action:manipulation;-webkit-tap-highlight-color:transparent;user-select:none;-webkit-user-select:none;}
.share-btn:hover{transform:translateY(-2px);box-shadow:0 4px 12px rgba(0,0,0,0.1);}
.share-btn .sb-icon{font-size:1.75rem;line-height:1;}
.share-btn .sb-label{font-size:0.78rem;font-weight:700;color:var(--text-mid);}
.share-btn.whatsapp{border-color:#25D366;background:#F0FFF4;}
.share-btn.whatsapp .sb-label{color:#128C7E;}
.share-btn.print-btn{border-color:var(--primary-mid);background:var(--primary-light);}
.share-btn.print-btn .sb-label{color:var(--primary-dark);}

/* ── QUEUE / RECEPTION ─────────────────────────────── */
.queue-card{background:white;border-radius:14px;border:1px solid var(--border);padding:1rem 1.25rem;margin-bottom:0.75rem;display:flex;align-items:flex-start;gap:1rem;transition:box-shadow 0.2s;}
.queue-card:hover{box-shadow:0 4px 16px rgba(0,0,0,0.08);}
.queue-card.status-waiting{border-left:4px solid #D97706;}
.queue-card.status-with_doctor{border-left:4px solid var(--primary);}
.queue-card.status-done{border-left:4px solid #059669;opacity:0.7;}
.queue-card.status-ready_for_billing{border-left:4px solid #7C3AED;}
.q-token{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-family:'Nunito',-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;font-size:1.1rem;font-weight:900;flex-shrink:0;color:white;}
.q-token.status-waiting{background:#D97706;}
.q-token.status-with_doctor{background:var(--primary);}
.q-token.status-done{background:#059669;}
.q-token.status-ready_for_billing{background:#7C3AED;}
.q-info{flex:1;min-width:0;}
.q-name{font-weight:700;font-size:0.95rem;color:var(--text);}
.q-meta{font-size:0.76rem;color:var(--text-light);margin-top:0.2rem;}
.q-vitals{display:flex;gap:0.75rem;flex-wrap:wrap;margin-top:0.5rem;}
.q-vital{font-size:0.74rem;background:var(--bg);padding:0.2rem 0.5rem;border-radius:6px;color:var(--text-mid);font-weight:600;}
.q-actions{display:flex;flex-direction:column;gap:0.4rem;flex-shrink:0;}
.status-pill{display:inline-flex;align-items:center;gap:0.3rem;padding:0.2rem 0.65rem;border-radius:20px;font-size:0.7rem;font-weight:800;letter-spacing:0.04em;}
.sp-waiting{background:#FEF3C7;color:#92400E;}
.sp-with_doctor{background:var(--primary-light);color:var(--primary-dark);}
.sp-done{background:var(--success-light);color:#065F46;}
.sp-ready_for_billing{background:#EDE9FE;color:#5B21B6;}
/* ── Reception queue table (replaces the old stacked cards) ── */
.queue-table{width:100%;border-collapse:collapse;background:white;border-radius:14px;overflow:hidden;border:1px solid var(--border);}
.queue-table thead th{text-align:left;font-size:0.68rem;font-weight:800;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-light);background:var(--bg);padding:0.6rem 0.9rem;border-bottom:1px solid var(--border);}
.queue-table tbody td{padding:0.65rem 0.9rem;font-size:0.85rem;color:var(--text);border-bottom:1px solid var(--border);vertical-align:middle;}
.queue-table tbody tr.q-row:last-child td{border-bottom:none;}
.queue-table tbody tr.q-row:hover{background:var(--bg);}
.queue-table tr.status-waiting{border-left:3px solid #D97706;}
.queue-table tr.status-with_doctor{border-left:3px solid var(--primary);}
.queue-table tr.status-done{opacity:0.6;}
.queue-table tr.status-ready_for_billing{border-left:3px solid #7C3AED;}
.q-token-cell{width:1%;white-space:nowrap;}
.queue-table .q-token{width:34px;height:34px;border-radius:9px;font-size:0.78rem;}
.q-name-link{font-weight:700;cursor:pointer;text-decoration:underline;text-decoration-style:dotted;-webkit-tap-highlight-color:transparent;}
.q-name-link:hover{color:var(--primary);}
.q-action-cell{white-space:nowrap;text-align:right;}
.q-note-row td{padding:0 0.9rem 0.6rem 0.9rem;border-bottom:1px solid var(--border);}
.q-note{font-size:0.74rem;color:var(--text-light);background:var(--bg);border-radius:8px;padding:0.4rem 0.65rem;}
@media(max-width:640px){
  .queue-table{display:block;overflow-x:auto;-webkit-overflow-scrolling:touch;white-space:nowrap;}
}
/* doctor queue panel */

/* checkin modal search */
.ci-patient-result{padding:0.65rem 0.875rem;border-radius:10px;border:1.5px solid var(--border);margin-bottom:0.4rem;cursor:pointer;transition:all 0.15s;}
.ci-patient-result:hover{border-color:var(--primary);background:var(--primary-light);}
.ci-selected{background:var(--primary-light);border-color:var(--primary);border-radius:12px;padding:0.875rem;margin-bottom:0.875rem;}
/* dob mode toggle */
.dob-mode-wrap{display:flex;gap:0;margin-bottom:0.5rem;border-radius:8px;overflow:hidden;border:1.5px solid var(--border);}
.dob-mode-btn{flex:1;padding:0.4rem 0.5rem;border:none;font-family:inherit;font-size:0.8rem;font-weight:600;cursor:pointer;background:white;color:var(--text-mid);transition:all 0.15s;}
.dob-mode-btn.active{background:var(--primary);color:white;}
.approx-preview{font-size:0.78rem;color:var(--primary);font-weight:600;margin-top:0.35rem;padding:0.3rem 0.5rem;background:var(--primary-light);border-radius:6px;display:none;}

/* ── PWA Install Banner ── */
#pwa-install-bar{position:fixed;bottom:0;left:0;right:0;z-index:1000;background:#162B55;color:white;display:none;align-items:center;gap:0.75rem;padding:0.75rem 1.25rem;box-shadow:0 -4px 20px rgba(0,0,0,0.3);}
#pwa-install-bar .pwa-icon{width:36px;height:36px;border-radius:8px;background:white;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
#pwa-install-bar .pwa-text{flex:1;min-width:0;}
#pwa-install-bar .pwa-text strong{display:block;font-size:0.85rem;font-weight:700;}
#pwa-install-bar .pwa-text span{font-size:0.75rem;color:rgba(255,255,255,0.65);}
/* ── Follow-up badge ── */
.followup-badge{display:inline-flex;align-items:center;gap:0.25rem;font-size:0.7rem;font-weight:700;padding:0.15rem 0.5rem;border-radius:20px;white-space:nowrap;}
.fub-due{background:#FEF3C7;color:#92400E;border:1px solid #FCD34D;}
.fub-overdue{background:#FEE2E2;color:#991B1B;border:1px solid #FECACA;}
.fub-ok{background:#D1FAE5;color:#065F46;border:1px solid #A7F3D0;}
/* Reception · Follow-ups Due: one card per patient, name first */
.fu-chips{display:flex;gap:0.4rem;overflow-x:auto;padding:0.6rem 0 0.35rem;scrollbar-width:none;}
.fu-chips::-webkit-scrollbar{display:none;}
.fu-chip{flex-shrink:0;padding:0.35rem 0.8rem;border-radius:999px;font:inherit;font-size:0.8rem;font-weight:700;cursor:pointer;border:1.5px solid var(--border);background:white;color:var(--text-mid);white-space:nowrap;}
.fu-chip.on{border-color:var(--primary);background:var(--primary-light);color:var(--primary);}
.fu-range-note{font-size:0.75rem;color:var(--text-light);padding-bottom:0.25rem;}
.fu-dates{display:grid;grid-template-columns:minmax(0,1fr) minmax(0,1fr);gap:0.5rem;max-width:420px;padding-bottom:0.25rem;}
.fu-dates label{min-width:0;display:flex;flex-direction:column;gap:0.2rem;font-size:0.72rem;font-weight:700;color:var(--text-light);text-transform:uppercase;letter-spacing:0.04em;}
.fu-dates input{width:100%;min-width:0;padding:0.45rem 0.5rem;border:1.5px solid var(--border);border-radius:8px;font:inherit;font-size:0.85rem;text-transform:none;letter-spacing:0;color:var(--text);}
.fu-group{margin-top:0.6rem;}
.fu-group-h{font-size:0.72rem;font-weight:800;letter-spacing:0.05em;text-transform:uppercase;color:var(--text-light);padding:0.25rem 0;}
.fu-group-h span{display:inline-block;margin-left:0.3rem;padding:0 0.4rem;border-radius:999px;background:var(--bg);color:var(--text-mid);}
.fu-list{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0.6rem;}
.fu-card{border:1.5px solid var(--border);border-radius:12px;padding:0.7rem 0.8rem;display:flex;flex-direction:column;gap:0.3rem;background:white;min-width:0;}
.fu-top{display:flex;align-items:flex-start;justify-content:space-between;gap:0.5rem;}
.fu-name{font-weight:800;font-size:0.95rem;color:var(--text);cursor:pointer;overflow-wrap:anywhere;line-height:1.3;}
.fu-sub{font-size:0.78rem;color:var(--text-light);display:flex;flex-wrap:wrap;gap:0.25rem;align-items:center;}
.fu-tag{font-size:0.66rem;font-weight:800;padding:0.1rem 0.4rem;border-radius:6px;background:var(--primary-light);color:var(--primary);}
.fu-note{font-size:0.8rem;color:var(--text-mid);background:var(--bg);border-radius:8px;padding:0.35rem 0.5rem;overflow-wrap:anywhere;}
.fu-acts{display:flex;flex-wrap:wrap;gap:0.4rem;margin-top:0.2rem;}
.fu-btn{display:inline-flex;align-items:center;gap:0.3rem;padding:0.4rem 0.7rem;border-radius:8px;font:inherit;font-size:0.78rem;font-weight:700;cursor:pointer;text-decoration:none;white-space:nowrap;border:1px solid transparent;}
.fu-call{background:#DBEAFE;color:#1E40AF;border-color:#BFDBFE;}
.fu-wa{background:#DCFCE7;color:#15803D;border-color:#BBF7D0;}
.fu-q{background:white;color:var(--primary);border-color:var(--border);}
/* Wide screens: each follow-up is one row — name | note | actions */
@media(min-width:900px){
  .fu-list{grid-template-columns:1fr;gap:0.45rem;}
  .fu-card{display:grid;grid-template-columns:minmax(240px,1.1fr) minmax(0,1.6fr) auto;grid-template-rows:auto auto;column-gap:1.25rem;row-gap:0.15rem;align-items:center;padding:0.55rem 0.9rem;}
  .fu-top{grid-column:1;grid-row:1;}
  .fu-sub{grid-column:1;grid-row:2;}
  .fu-note{grid-column:2;grid-row:1 / span 2;align-self:center;}
  .fu-acts{grid-column:3;grid-row:1 / span 2;margin-top:0;flex-wrap:nowrap;}
}
/* Reception's header (title, date, Check In) is tall on a phone: let it scroll away */
@media(max-width:480px){.topbar-scrolls-on-phone{position:static;}.fu-chips{display:grid;grid-template-columns:1fr 1fr;overflow:visible;}.fu-chip{text-align:center;}.fu-list{grid-template-columns:1fr;}.fu-acts .fu-btn{flex:1;justify-content:center;}}
#mob-header-nav{display:none!important;}
/* Full-screen scrim behind the mobile dropdown — blocks any tap on
   underlying page content (banners, buttons, etc.) from being mistaken for
   a tap on the menu, and gives a large, obvious "tap outside to close"
   target instead of relying only on a document-level click listener. */
#mob-menu-backdrop{display:none;position:fixed;inset:0;background:rgba(15,23,42,0.4);z-index:340;}
#mob-menu-backdrop.open{display:block;}
/* ── MOBILE DROPDOWN — repositioned below new top nav ── */
#mob-menu-dropdown{
  display:none;
  position:fixed;top:58px;left:0.75rem;
  width:220px;
  z-index:350;
  background:var(--primary-dark);
  border-radius:14px;
  border:1px solid rgba(255,255,255,0.15);
  box-shadow:0 12px 32px rgba(0,0,0,0.55);
  padding:0.5rem 0.5rem 0.6rem;
  overflow:hidden;
}
/* Sync/subscribed/install status widgets relocated here from the header on
   mobile (see _relocateHeaderForMobile in dom-utils.js). Sync + Subscribed
   sit side by side as two equal small boxes; Install App full-width below. */
.mob-dd-status-group{
  display:flex;flex-direction:column;gap:0.5rem;align-items:stretch;
  padding:0.4rem 0.4rem 0.7rem;
  margin-bottom:0.35rem;
  border-bottom:1px solid rgba(255,255,255,0.14);
}
.mob-dd-status-row{display:flex;gap:0.5rem;align-items:stretch;}
.mob-dd-status-row .sync-badge{flex:1;justify-content:center;box-sizing:border-box;}
.mob-dd-status-row #sub-chip-wrap{flex:1;display:flex!important;justify-content:center;box-sizing:border-box;}
.mob-dd-status-row #sub-chip-wrap .sub-chip{width:100%;text-align:center;box-sizing:border-box;}
.mob-dd-status-group #pwa-install-btn{width:100%;box-sizing:border-box;justify-content:center;}
/* ── RESPONSIVE TOP NAV ── */
@media(max-width:768px){
  .tnav-nav{display:none;}
  .tnav-clinic{display:none;}
  .tnav-divider{display:none;}
  .tnav-signout{display:none;}
  .tnav-hamburger{display:flex;}
  #mob-menu-btn{display:flex;margin-right:0.6rem;}
  #app-topnav{padding:0 0.875rem;}
  .sub-lapsed-bar{bottom:0;}
  /* Doctor identity stays visible on mobile, simplified to just the name
     (no avatar circle, no qualification line, no pill background), moved
     via JS to sit right after the logo (see _relocateHeaderForMobile) so
     the header reads: menu | PediCare | Doctor Name, all packed together. */
  .tnav-doctor{
    display:flex;border:none;background:none;padding:0;
    margin-left:0.6rem;max-width:34vw;overflow:hidden;
  }
  .tnav-doc-info{display:flex;}
  .tnav-av{display:none;}
  .tnav-dqual{display:none;}
  .tnav-dname{
    font-size:0.8rem;font-weight:700;color:white;
    white-space:nowrap;overflow:hidden;text-overflow:ellipsis;
  }
}
.mob-hdr-brand{
  display:flex;align-items:center;gap:0.45rem;
  color:white;font-family:'Nunito',-apple-system,sans-serif;
  font-weight:900;font-size:0.92rem;flex-shrink:0;
}
.mob-hdr-actions{display:flex;gap:0.1rem;align-items:center;}
.mhb{
  background:transparent;
  border:none;outline:none;
  -webkit-appearance:none;appearance:none;
  color:rgba(255,255,255,0.6);
  display:flex;flex-direction:column;align-items:center;justify-content:center;gap:0.08rem;
  padding:0.2rem 0.45rem;
  border-radius:9px;
  cursor:pointer;
  font-family:inherit;
  font-size:0.5rem;font-weight:700;
  text-transform:uppercase;letter-spacing:0.05em;
  min-width:48px;min-height:44px;
  -webkit-tap-highlight-color:rgba(255,255,255,0.2);
  transition:background 0.15s,color 0.15s;
}
.mhb:active,.mhb.mhb-active{background:rgba(255,255,255,0.2);color:white;}
.mhb-ico{font-size:1.15rem;line-height:1;display:block;}
.mhb-signout{color:rgba(255,190,190,0.8);}
.mhb-signout:active{background:rgba(200,80,80,0.25);}

/* ── HAMBURGER TOGGLE BUTTON ── */
#mob-menu-btn:active{background:rgba(255,255,255,0.2);}
.hbr-wrap{display:flex;flex-direction:column;gap:4px;align-items:flex-start;}
#mob-menu-btn .hbr{
  display:block;width:18px;height:2px;
  background:white;border-radius:2px;
  transition:transform 0.25s,opacity 0.2s,width 0.2s;
}
#mob-menu-btn.open .hbr:nth-child(1){transform:translateY(6px) rotate(45deg);}
#mob-menu-btn.open .hbr:nth-child(2){opacity:0;transform:scaleX(0);}
#mob-menu-btn.open .hbr:nth-child(3){transform:translateY(-6px) rotate(-45deg);}

/* mob-menu-dropdown CSS defined above in responsive section */
#mob-menu-dropdown.open{display:block;animation:mobMenuSlide 0.2s ease;}
@keyframes mobMenuSlide{from{opacity:0;}to{opacity:1;}}
.mob-dd-item{
  display:flex;flex-direction:row;align-items:center;
  justify-content:flex-start;gap:0.75rem;
  width:100%;padding:0.8rem 1rem;
  border-radius:10px;border:none;
  background:transparent;
  color:rgba(255,255,255,0.7);
  font-family:inherit;font-size:0.92rem;font-weight:600;
  text-align:left;text-transform:none;letter-spacing:0;
  cursor:pointer;min-width:0;min-height:0;
  -webkit-tap-highlight-color:rgba(255,255,255,0.15);
  transition:background 0.15s,color 0.15s;
}
.mob-dd-item:active,.mob-dd-item.mhb-active{background:rgba(255,255,255,0.13);color:white;}
.mob-dd-item .mhb-ico{font-size:1.2rem;line-height:1;flex-shrink:0;}
.mob-dd-signout{color:rgba(255,190,190,0.8)!important;}
.mob-dd-signout:active{background:rgba(200,80,80,0.2)!important;}

/* ── TODAY / CALENDAR PATIENT LIST ───────────────────────────── */
.today-section-label{
  padding:0.45rem 1.25rem 0.35rem;
  font-size:0.65rem;font-weight:800;text-transform:uppercase;letter-spacing:0.09em;
  color:var(--text-light);background:var(--bg);
  border-top:1px solid var(--border);
}
.today-section-label:first-child{border-top:none;}
.today-pt-row{
  display:flex;align-items:center;gap:0.75rem;
  padding:0.7rem 1.25rem;
  border-top:1px solid var(--border);
  cursor:pointer;
  transition:background 0.15s;
  touch-action:manipulation;
  -webkit-tap-highlight-color:rgba(10,126,140,0.08);
  user-select:none;-webkit-user-select:none;
}
.today-pt-row:first-child{border-top:none;}
.today-pt-row:hover,.today-pt-row:active{background:var(--primary-light);}
.today-pt-av{
  width:38px;height:38px;border-radius:10px;
  display:flex;align-items:center;justify-content:center;
  font-size:0.82rem;font-weight:800;flex-shrink:0;color:white;
}
.today-pt-av.av-m{background:#1D4ED8;}
.today-pt-av.av-f{background:#9D174D;}
.today-pt-info{flex:1;min-width:0;}
.today-pt-name{font-weight:700;font-size:0.88rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.today-pt-sub{font-size:0.74rem;color:var(--text-light);margin-top:0.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.today-q-token{
  width:30px;height:30px;border-radius:8px;
  display:flex;align-items:center;justify-content:center;
  font-size:0.68rem;font-weight:900;flex-shrink:0;color:white;
}
/* Calendar result list reuses .today-pt-row */

/* ── MOBILE PATIENT CARDS ─────────────────────────────────────── */
@media(max-width:480px){
  #pt-list-wrap table{display:none;}
  .pt-mob-list{display:block;}
}
@media(min-width:481px){
  .pt-mob-list{display:none;}
}
.pt-mob-card{
  border-top:1px solid var(--border);
  background:white;
}
.pt-mob-card:first-child{border-top:none;}
.pt-mob-row{
  display:flex;align-items:center;gap:0.75rem;
  padding:0.75rem 1rem;
  cursor:pointer;
  -webkit-tap-highlight-color:rgba(10,126,140,0.08);
  user-select:none;-webkit-user-select:none;
}
.pt-mob-row:active{background:var(--primary-light);}
.pt-mob-av{
  width:44px;height:44px;border-radius:50%;
  display:flex;align-items:center;justify-content:center;
  font-size:1rem;font-weight:800;flex-shrink:0;color:white;
}
.pt-mob-av.av-m{background:#1D4ED8;}
.pt-mob-av.av-f{background:#9D174D;}
.pt-mob-info{flex:1;min-width:0;}
.pt-mob-name{font-weight:700;font-size:0.93rem;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pt-mob-sub{font-size:0.78rem;color:var(--text-light);margin-top:0.15rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.pt-mob-chev{color:var(--text-light);font-size:0.75rem;flex-shrink:0;transition:transform 0.22s;}
.pt-mob-chev.open{transform:rotate(180deg);}
.pt-mob-expand{
  display:none;
  padding:0.65rem 1rem 0.85rem 1rem;
  background:#FAFCFF;
  border-top:1px solid var(--border);
}
.pt-mob-expand.open{display:block;}
.pt-mob-meta{display:flex;flex-wrap:wrap;gap:0.35rem 0.75rem;margin-bottom:0.75rem;font-size:0.78rem;color:var(--text-mid);}
.pt-mob-meta span{display:flex;align-items:center;gap:0.25rem;}
.pt-mob-actions{display:flex;gap:0.5rem;}
/* ═══ ANALYTICS ═══════════════════════════════════════════ */
.an-range-btn{padding:0.38rem 0.85rem;border-radius:20px;border:1.5px solid var(--border);background:white;font-family:inherit;font-size:0.78rem;font-weight:600;color:var(--text-mid);cursor:pointer;transition:all 0.18s;white-space:nowrap;touch-action:manipulation;-webkit-tap-highlight-color:transparent;}
.an-range-btn:hover{border-color:var(--primary);color:var(--primary);}
.an-range-btn.active{background:var(--primary);border-color:var(--primary);color:white;}
.an-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem;margin-bottom:1.25rem;}
.an-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:1.25rem;margin-bottom:1.25rem;}
.an-card{background:white;border-radius:var(--radius);border:1px solid var(--border);overflow:hidden;}
.an-card-hd{padding:0.875rem 1.25rem;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;}
.an-card-hd h3{font-size:0.875rem;font-weight:700;color:var(--text);}
.an-card-bd{padding:1.25rem;}
.an-legend{display:flex;flex-wrap:wrap;gap:0.35rem 1rem;margin-top:0.875rem;}
.an-leg-item{display:flex;align-items:center;gap:0.35rem;font-size:0.75rem;color:var(--text-mid);}
.an-leg-dot{width:10px;height:10px;border-radius:3px;flex-shrink:0;}
.an-stat-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:0.5rem;margin-bottom:1.25rem;}
.an-stat{background:white;border-radius:9px;border:1px solid var(--border);padding:0.5rem 0.6rem;text-align:center;}
.an-stat-val{font-family:'Nunito',sans-serif;font-size:1.05rem;font-weight:900;color:var(--primary-dark);line-height:1.1;}
.an-stat-lbl{font-size:0.62rem;color:var(--text-light);margin-top:0.15rem;}
.an-stat-sub{font-size:0.58rem;color:var(--text-mid);margin-top:0.1rem;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;}
.an-no-data{text-align:center;padding:2.5rem 1rem;color:var(--text-light);}
.an-no-data .ei{font-size:2.5rem;margin-bottom:0.75rem;}
.an-doctor-toggle{display:flex;align-items:center;gap:0.5rem;font-size:0.78rem;color:var(--text-mid);cursor:pointer;flex-shrink:0;}
.an-doctor-toggle input{accent-color:var(--primary);width:14px;height:14px;cursor:pointer;}
@media(max-width:900px){.an-grid,.an-grid-3{grid-template-columns:1fr;}.an-stat-cards{grid-template-columns:1fr 1fr;}}
@media(max-width:480px){.an-stat-cards{grid-template-columns:1fr 1fr;}.an-range-btn{font-size:0.72rem;padding:0.32rem 0.65rem;}}
@keyframes aboutSlideIn{from{opacity:0;transform:translateY(28px) scale(0.97)}to{opacity:1;transform:none}}
#pcare-login-left{background:linear-gradient(150deg,#071428 0%,#162B55 40%,#1D6FD8 75%,#60A5FA 100%);min-height:100vh;flex:0 0 52%;display:flex;flex-direction:column;justify-content:center;padding:3.5rem 3.5rem 3rem;position:relative;overflow:hidden;}
#pcare-login-left::before{content:'';position:absolute;width:500px;height:500px;border-radius:50%;background:rgba(255,255,255,0.04);top:-180px;right:-180px;pointer-events:none;}
#pcare-login-left::after{content:'';position:absolute;width:320px;height:320px;border-radius:50%;background:rgba(255,255,255,0.04);bottom:-100px;left:-80px;pointer-events:none;}
.pcare-feature{display:flex;align-items:flex-start;gap:1rem;margin-bottom:1.25rem;animation:featureIn 0.5s ease both;}
.pcare-feature-icon{width:42px;height:42px;border-radius:12px;background:rgba(255,255,255,0.12);display:flex;align-items:center;justify-content:center;font-size:1.2rem;flex-shrink:0;backdrop-filter:blur(4px);}
.pcare-feature-text strong{display:block;color:#fff;font-size:0.9rem;font-weight:700;margin-bottom:0.15rem;}
.pcare-feature-text span{color:rgba(255,255,255,0.62);font-size:0.78rem;line-height:1.45;}
@keyframes featureIn{from{opacity:0;transform:translateX(-16px)}to{opacity:1;transform:none}}
.pcare-feature:nth-child(1){animation-delay:0.1s}.pcare-feature:nth-child(2){animation-delay:0.2s}.pcare-feature:nth-child(3){animation-delay:0.3s}.pcare-feature:nth-child(4){animation-delay:0.4s}.pcare-feature:nth-child(5){animation-delay:0.5s}
#pcare-login-right{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem 2.5rem;background:#f4f7f8;min-height:100vh;overflow-y:auto;}
.pcare-auth-card{background:white;border-radius:20px;padding:2.25rem 2rem;width:100%;max-width:400px;box-shadow:0 8px 40px rgba(6,89,101,0.10);}
.pcare-logo-row{display:flex;align-items:center;gap:0.75rem;margin-bottom:1.75rem;}
.pcare-logo-box{width:44px;height:44px;background:linear-gradient(135deg,#162B55,#1D6FD8);border-radius:12px;display:flex;align-items:center;justify-content:center;flex-shrink:0;}
@media(max-width:768px){
  #cloudAuthView{flex-direction:column !important;}
  #pcare-login-left{
    flex:0 0 auto !important;
    min-height:auto !important;
    padding:1.25rem 1.25rem 1rem !important;
  }
  /* Phones: keep the pitch and every feature (tap "See it" for screenshots), compact */
  #pcare-login-left>div:nth-child(4){font-size:0.8rem !important;margin-bottom:0.9rem !important;}
  .pcare-features-grid{display:block !important;}
  .pcare-feature{margin-bottom:0.2rem;gap:0.7rem;align-items:center;}
  .pcare-feature-icon{width:32px;height:32px;border-radius:9px;font-size:0.95rem;}
  .pcare-feature-text strong{font-size:0.84rem;margin-bottom:0;}
  .pcare-feature-text span{display:none;}
  #pcare-login-right{
    flex:1 1 auto !important;
    min-height:auto !important;
    padding:1rem 1rem 2rem !important;
    display:flex !important;
    align-items:flex-start !important;
    justify-content:center !important;
  }
  .pcare-auth-card{width:100% !important;max-width:100% !important;box-shadow:none !important;border-radius:16px !important;}
}

/* ── Mobile nav: header hamburger + dropdown (bottom tab bar removed) ── */
.mob-tabbar{display:none !important;}
.mob-dd-active{background:rgba(255,255,255,0.13);color:white;}
/* Larger touch targets everywhere on mobile — app-like tap comfort */
@media(max-width:768px){
  button, .btn, .nav-item, input[type="checkbox"], input[type="radio"], select, .tab-btn{
    min-height:40px;
  }
  .btn-sm{min-height:36px;}
  input, select, textarea{font-size:16px;} /* prevents iOS auto-zoom on focus */
}

/* ══════════════════════════════════════════════════════════════
   MOBILE APP-LIKE OVERHAUL
   Priority: feel like a native app, not a shrunk website
   ══════════════════════════════════════════════════════════════ */

/* ── GLOBAL MOBILE POLISH ─────────────────────────────────── */
@media(max-width:768px){
  /* Prevent pull-to-refresh interfering with scroll */
  html{overscroll-behavior-y:contain;}
  body{-webkit-text-size-adjust:100%;overscroll-behavior-y:contain;}

  /* Top nav: compact, app-bar style */
  #app-topnav{
    height:52px;padding:0 0.75rem !important;
    display:flex;align-items:center;
  }
  .tnav-brand{gap:0.4rem;}
  .tnav-appname{font-size:0.95rem;}
  .tnav-right{gap:0.35rem;}
  .sync-badge{padding:0.2rem 0.5rem;font-size:0.65rem;}
  .sync-last-suffix{display:none;}
  #sub-chip-wrap .sub-chip{font-size:0.62rem;padding:0.15rem 0.45rem;}

  /* Main area adjusts for shorter nav */
  .main{padding-top:52px;}
  .topbar{top:52px;}

  /* Dropdown from hamburger — full-width slide-down */
  #mob-menu-dropdown{
    position:fixed;top:52px;left:0;right:0;
    width:auto;max-width:100%;
    border-radius:0 0 16px 16px;
    padding:0.25rem 0.5rem 0.75rem;
    box-shadow:0 12px 40px rgba(0,0,0,0.4);
  }
  .mob-dd-item{
    padding:0.75rem 1rem;border-radius:10px;
    font-size:0.95rem;gap:0.6rem;
    min-height:44px;
  }

  /* Hide nav-help on desktop area (it's in dropdown now) */
  #nav-help{display:none !important;}
}

/* ── TOPBAR & ACTION BUTTONS — APP STYLE ──────────────────── */
@media(max-width:480px){
  .topbar{
    top:52px;padding:0.5rem 0.75rem !important;
    gap:0.35rem;
    border-bottom:1px solid var(--border);
    box-shadow:none;
  }
  .topbar h1{font-size:0.92rem;font-weight:800;}

  /* Action buttons in topbar: pill-shaped, even spacing */
  .topbar-right{gap:0.35rem;}
  .topbar-right .btn,
  .topbar-right .btn-sm{
    padding:0.4rem 0.65rem;font-size:0.72rem;border-radius:8px;
    min-height:36px;white-space:nowrap;
  }

  /* Patient page: header buttons drop to their own full-width row */
  .pat-top-row{flex-wrap:wrap;}
  .pat-top-row .topbar-right{
    width:100%;flex-wrap:nowrap;overflow-x:auto;
    -webkit-overflow-scrolling:touch;scrollbar-width:none;
  }
  .pat-top-row .topbar-right::-webkit-scrollbar{display:none;}
  .pat-top-row .topbar-right .btn-sm{
    flex:1;text-align:center;justify-content:center;
    font-size:0.65rem;padding:0.28rem 0.35rem;min-height:30px;
  }

  /* Patient chart: Back + Name row */
  .d-flex.ai-center.gap-2{gap:0.35rem;}
  .d-flex.ai-center.gap-2 .btn-ghost{padding:0.3rem 0.5rem;font-size:0.72rem;}
  .prof-name-btn h1{font-size:0.95rem !important;max-width:180px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap;}

  /* Patient meta pills (age, blood, phone) */
  .prof-meta-bar{gap:0.25rem !important;overflow-x:auto;flex-wrap:nowrap !important;-webkit-overflow-scrolling:touch;scrollbar-width:none;padding-bottom:2px;}
  .prof-meta-bar::-webkit-scrollbar{display:none;}
  .prof-meta-pill{font-size:0.7rem !important;padding:0.2rem 0.5rem !important;white-space:nowrap;flex-shrink:0;}

  /* Patients list topbar */
  .search-box{min-width:0 !important;max-width:100% !important;}
  .search-input{padding:0.45rem 0.75rem 0.45rem 2rem !important;font-size:0.82rem !important;border-radius:10px;}
}

/* ── TABS — horizontal scroll, no wrap ────────────────────── */
@media(max-width:768px){
  .tabs-wrap{
    display:flex !important;flex-wrap:nowrap !important;
    overflow-x:auto;-webkit-overflow-scrolling:touch;
    gap:0.2rem;padding:0.35rem 0.4rem;
    scrollbar-width:none;
    border-bottom:1px solid var(--border);
    background:white;
    position:sticky;top:calc(52px + 1px);z-index:40;
  }
  .tabs-wrap::-webkit-scrollbar{display:none;}
  .tab-btn{
    white-space:nowrap;flex-shrink:0;
    padding:0.42rem 0.75rem;font-size:0.76rem;
    border-radius:8px;min-height:36px;
    border:1.5px solid transparent;
  }
  .tab-btn.active{border-color:var(--primary-mid);}
}

/* ── VISIT FORM — sticky save bar at bottom ───────────────── */
@media(max-width:768px){
  /* Dock the save bar to bottom of screen */
  #visit-form-save-bar{
    position:fixed !important;bottom:0;left:0;right:0;
    z-index:100;
    background:white !important;
    border-top:1px solid var(--border);
    border-bottom:none !important;
    box-shadow:0 -4px 20px rgba(0,0,0,0.08);
    padding:0.5rem 0.75rem !important;
    padding-bottom:calc(0.5rem + env(safe-area-inset-bottom, 0px)) !important;
    flex-wrap:nowrap !important;
    gap:0.35rem !important;
    justify-content:stretch;
  }
  #visit-form-save-bar .btn{
    flex:1;min-height:44px;font-size:0.73rem;
    padding:0.5rem 0.3rem;border-radius:10px;
    justify-content:center;white-space:nowrap;
  }
  /* Give form body bottom padding so content doesn't hide behind sticky bar */
  #tab-visit-form .info-card-body{
    padding-bottom:calc(80px + env(safe-area-inset-bottom, 0px)) !important;
  }
  /* Drug search: dropdown visible above keyboard */
  .drug-dropdown{max-height:200px;}
}

/* ── VISIT CARDS (history) — compact mobile cards ─────────── */
@media(max-width:480px){
  .visit-card{margin-bottom:0.75rem;border-radius:10px;}
  .visit-card-head{
    padding:0.6rem 0.75rem;
    flex-direction:column !important;
    align-items:flex-start !important;
    gap:0.35rem;
  }
  .visit-card-head .prof-meta-pill{font-size:0.68rem;}
  .visit-card-head .topbar-right,
  .visit-card-head > div:last-child{
    display:flex;gap:0.3rem;flex-wrap:wrap;width:100%;
  }
  .visit-card-head .btn-sm{
    flex:1;min-width:0;font-size:0.7rem;
    padding:0.35rem 0.4rem;justify-content:center;
    min-height:36px;border-radius:8px;
  }
  .visit-card-body{padding:0.6rem 0.75rem;}
}

/* ── INFO CARDS (overview, settings) — tighter on mobile ──── */
@media(max-width:480px){
  .info-card-header{
    padding:0.65rem 0.75rem;flex-wrap:wrap;gap:0.35rem;
  }
  .info-card-header h3{font-size:0.85rem;}
  .info-card-header .btn-sm{
    padding:0.3rem 0.55rem;font-size:0.7rem;min-height:34px;
  }
  .info-card-body{padding:0.75rem;}
  .info-grid{gap:0.75rem;}
  .info-item{font-size:0.82rem;}
}

/* ── MODALS — true full-screen on mobile ──────────────────── */
@media(max-width:480px){
  .modal-overlay{padding:0 !important;padding-top:52px !important;align-items:flex-start !important;}
  .modal,.modal-wide{
    width:100% !important;max-width:100% !important;
    height:calc(100vh - 52px) !important;
    height:calc(100dvh - 52px) !important;
    max-height:none !important;
    border-radius:0 !important;
    display:flex;flex-direction:column;
    animation:none !important;
  }
  .modal-header{
    padding:0.75rem 0.875rem;border-radius:0 !important;
    flex-shrink:0;position:static !important;
  }
  .modal-header h2{font-size:0.95rem;}
  .modal-body{
    flex:1;overflow-y:auto;-webkit-overflow-scrolling:touch;
    overscroll-behavior:contain;padding:0.875rem;
  }
  .modal-footer{
    flex-shrink:0;position:static !important;
    padding:0.75rem 0.875rem;
    padding-bottom:calc(0.75rem + env(safe-area-inset-bottom, 0px));
    border-top:1px solid var(--border);background:white;
    display:flex;gap:0.5rem;
  }
  .modal-footer .btn{flex:1;min-height:48px;font-size:0.88rem;justify-content:center;}
  .modal-close{
    width:36px;height:36px;min-width:36px;
    display:flex;align-items:center;justify-content:center;
    font-size:1.2rem;border-radius:10px;
  }
}

/* ── PATIENT LIST — mobile cards ──────────────────────────── */
@media(max-width:480px){
  .pt-mob-card{
    padding:0.65rem 0.75rem;
    border-radius:0;
    border-bottom:1px solid var(--border);
  }
  .pt-mob-card:active{background:var(--primary-light);}
}

/* ── RECEPTION QUEUE — card layout on mobile ──────────────── */
@media(max-width:480px){
  .queue-card{
    padding:0.65rem 0.75rem;border-radius:10px;
    flex-direction:column;align-items:flex-start;gap:0.5rem;
  }
  .q-actions{
    width:100%;display:flex;gap:0.35rem;
  }
  .q-actions .btn{flex:1;min-height:40px;justify-content:center;font-size:0.78rem;}
}

/* ── BILLING — compact invoice on mobile ──────────────────── */
@media(max-width:480px){
  .bill-items-table{font-size:0.75rem;}
  .bill-items-table th{padding:0.3rem 0.4rem;font-size:0.62rem;}
  .bill-items-table td{padding:0.3rem 0.4rem;}
  .bill-input{padding:0.25rem 0.4rem;font-size:0.78rem;}
  .bill-totals{padding:0.625rem 0.75rem;font-size:0.8rem;}
}

/* ── STATS ROW — uniform 2-col cards ──────────────────────── */
@media(max-width:480px){
  .stat-card{
    border-radius:10px;padding:0.65rem 0.75rem;
    gap:0.5rem;min-height:0;
  }
  .stat-val{font-size:1.15rem;line-height:1.2;}
  .stat-label{font-size:0.65rem;}
}

/* ── SHARE SHEET — bottom sheet style ─────────────────────── */
@media(max-width:480px){
  .share-modal-overlay{align-items:flex-end !important;}
  .share-sheet{
    border-radius:20px 20px 0 0 !important;
    max-height:85vh;overflow-y:auto;
    padding:1.25rem 1rem;
    padding-bottom:calc(1rem + env(safe-area-inset-bottom, 0px));
  }
}

/* ── IMMUNIZATION TABLE — horizontal scroll ───────────────── */
@media(max-width:480px){
  #tab-immunization .info-card-body{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .immun-table-wrap{min-width:600px;}
}

/* ── GROWTH CHARTS — full-width SVGs ──────────────────────── */
@media(max-width:480px){
  #tab-growth svg{width:100% !important;height:auto !important;}
}

/* ── SETTINGS — stacked cards ─────────────────────────────── */
@media(max-width:480px){
  .settings-grid{grid-template-columns:1fr !important;gap:0.75rem;}
  .sc-toggle{padding:0.65rem 0.75rem;}
  .sc-toggle h3{font-size:0.85rem;}
}

/* ── TOAST — above sticky save bar ────────────────────────── */
@media(max-width:480px){
  .toast{
    bottom:auto !important;top:60px;
    right:0.5rem;left:0.5rem;
    max-width:100%;border-radius:10px;
    font-size:0.8rem;z-index:9999;
  }
}

/* ── PROFILE HERO — hide on mobile (info is in topbar) ────── */
@media(max-width:768px){
  .profile-hero{display:none !important;}
}

/* ── FORM ELEMENTS — app-sized inputs ─────────────────────── */
@media(max-width:480px){
  input[type="text"],input[type="email"],input[type="tel"],
  input[type="number"],input[type="date"],input[type="password"],
  select,textarea{
    font-size:16px !important;/* prevents iOS zoom */
    padding:0.55rem 0.75rem;
    border-radius:10px;
    min-height:44px;
    box-sizing:border-box;
  }
  textarea{min-height:60px;}
  .form-group label{font-size:0.7rem;margin-bottom:0.3rem;}
  .form-group{margin-bottom:0.65rem;}
  .form-grid{gap:0.65rem;}

  /* Autocomplete dropdowns — above keyboard */
  .ac-dropdown{max-height:180px;}
  .ac-item{padding:0.6rem 0.75rem;font-size:0.85rem;min-height:44px;}
}

/* ── RX TABLE (prescription) — compact mobile ─────────────── */
@media(max-width:480px){
  .rx-table-outer{overflow-x:auto;-webkit-overflow-scrolling:touch;}
  .rx-table-outer table{font-size:0.75rem;}
  .rx-table-outer th{padding:0.3rem 0.4rem;font-size:0.62rem;}
  .rx-table-outer td{padding:0.3rem 0.4rem;}
  .rx-table-outer input,.rx-table-outer select{font-size:0.78rem;min-height:36px;padding:0.25rem 0.4rem;}
  .rx-medicine-input{width:min(72vw,320px);}
}

/* ── SECTION DIVIDERS — tighter spacing ───────────────────── */
@media(max-width:480px){
  .sdiv{padding:0.4rem 0 0.3rem;margin:0.15rem 0 0.6rem;font-size:0.68rem;}
}

/* ── SUB-LAPSED BAR — above sticky save bar ───────────────── */
@media(max-width:768px){
  .sub-lapsed-bar{bottom:0 !important;left:0;right:0;font-size:0.75rem;padding:0.5rem 0.75rem;}
}

/* ── PWA INSTALL BAR — app-like prompt ────────────────────── */
@media(max-width:480px){
  #pwa-install-bar{padding:0.5rem 0.75rem;font-size:0.82rem;}
}

/* ═══════════════════════════════════════════════════
   DARK MODE — toggled via header button, persisted in
   localStorage('pc_theme'). Applied as data-theme="dark"
   on <html> (set inline in <head> before paint, see each
   page's boot script, and toggled live by toggleDarkMode()
   in dom-utils.js).
   ═══════════════════════════════════════════════════ */
[data-theme="dark"]{
  --primary-light:#0F2647;--primary-mid:#1E3A66;
  --success-light:#0B3B2E;--warning-light:#4A3308;--danger-light:#4A1A1A;
  --bg:#0B1220;--text:#E5EAF2;--text-mid:#B8C2D4;--text-light:#8592A8;--border:#233450;
}
[data-theme="dark"] body{background:var(--bg);color:var(--text);}
/* Surfaces that were hardcoded to white — swap to a dark card surface */
[data-theme="dark"] .auth-card,
[data-theme="dark"] .form-group input,[data-theme="dark"] .form-group select,[data-theme="dark"] .form-group textarea,
[data-theme="dark"] .topbar,
[data-theme="dark"] .stat-card,
[data-theme="dark"] .card,
[data-theme="dark"] .modal,
[data-theme="dark"] .modal-header,
[data-theme="dark"] .modal-footer,
[data-theme="dark"] .tabs-wrap,
[data-theme="dark"] .info-card,
[data-theme="dark"] #imm-docs-wrap .pdoc-card,
[data-theme="dark"] .drug-dropdown,
[data-theme="dark"] .ac-dropdown,
[data-theme="dark"] .rx-select,
[data-theme="dark"] .vax-detail-icon,
[data-theme="dark"] .admin-reg-row,
[data-theme="dark"] .bcat-dd,
[data-theme="dark"] .share-sheet,
[data-theme="dark"] .share-btn,
[data-theme="dark"] .queue-card,
[data-theme="dark"] .fu-card,
[data-theme="dark"] .fu-chip,
[data-theme="dark"] .fu-q,
[data-theme="dark"] .fu-dates input,
[data-theme="dark"] .queue-table,
[data-theme="dark"] .dob-mode-btn,
[data-theme="dark"] #pwa-install-bar .pwa-icon,
[data-theme="dark"] .an-range-btn,
[data-theme="dark"] .an-card,
[data-theme="dark"] .an-stat,
[data-theme="dark"] .pcare-auth-card{
  background:#141E30;color:var(--text);
}
[data-theme="dark"] .rx-table-outer,
[data-theme="dark"] .rx-table thead{background:#141E30;}
[data-theme="dark"] .rx-table th{color:var(--text-mid);}
[data-theme="dark"] input,[data-theme="dark"] select,[data-theme="dark"] textarea{color:var(--text);}
[data-theme="dark"] .doctor-card:hover{background:var(--primary-light);}
[data-theme="dark"] ::-webkit-scrollbar-track{background:#0B1220;}
[data-theme="dark"] ::-webkit-scrollbar-thumb{background:#334463;}
/* Dark toggle button in the header */
.tnav-theme-btn{background:rgba(255,255,255,0.1);border:none;color:white;width:36px;height:36px;border-radius:8px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-size:1rem;flex-shrink:0;-webkit-tap-highlight-color:transparent;}
.tnav-theme-btn:hover{background:rgba(255,255,255,0.18);}

/* ── APPOINTMENT SCHEDULING ── */
#sched-week-strip{display:flex;gap:0.5rem;overflow-x:auto;padding:0.25rem 0 0.5rem;}
.sched-nav-group{display:flex;align-items:center;gap:0.4rem;flex-wrap:wrap;}
.sched-nav-group #sched-jump-date{padding:0.35rem 0.5rem;border:1.5px solid var(--border);border-radius:8px;font-family:inherit;font-size:0.8rem;color:var(--text);}
.sched-day-chip{flex:1;min-width:64px;background:white;border:1.5px solid var(--border);border-radius:12px;padding:0.5rem 0.4rem;text-align:center;cursor:pointer;transition:all 0.15s;}
.sched-day-chip:hover{border-color:var(--primary-mid);}
.sched-day-chip.active{background:var(--primary);border-color:var(--primary);}
.sched-day-chip.active .sdc-dow,.sched-day-chip.active .sdc-num{color:white;}
.sched-day-chip.today:not(.active){border-color:var(--primary);}
.sdc-dow{font-size:0.68rem;font-weight:700;color:var(--text-light);text-transform:uppercase;}
.sdc-num{font-size:1.1rem;font-weight:800;color:var(--text);margin-top:0.1rem;}
.sdc-count{font-size:0.68rem;font-weight:700;color:var(--primary);margin-top:0.2rem;background:var(--primary-light);border-radius:8px;padding:0.05rem 0.4rem;display:inline-block;}
.sched-day-chip.active .sdc-count{background:rgba(255,255,255,0.25);color:white;}
.sdc-count-empty{background:transparent!important;color:var(--text-light)!important;}
.sched-slot-row{display:flex;border-top:1px solid var(--border);padding:0.5rem 0;gap:0.75rem;align-items:flex-start;}
.sched-slot-row:first-child{border-top:none;}
.sched-slot-time{width:72px;flex-shrink:0;font-size:0.75rem;font-weight:700;color:var(--text-light);padding-top:0.4rem;}
.sched-slot-body{flex:1;display:flex;flex-direction:column;gap:0.4rem;}
.sched-add-slot{align-self:flex-start;background:none;border:1.5px dashed var(--border);color:var(--text-light);border-radius:8px;padding:0.3rem 0.7rem;font-size:0.75rem;cursor:pointer;font-family:inherit;}
.sched-add-slot:hover{border-color:var(--primary);color:var(--primary);}
.sched-slot-row-unavailable{opacity:0.55;}
.sched-slot-time-unavailable{color:var(--text-light);}
.sched-slot-unavailable-label{font-size:0.72rem;color:var(--text-light);font-style:italic;padding:0.3rem 0;}
.sched-block-card{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;background:repeating-linear-gradient(45deg,#F3F4F6,#F3F4F6 8px,#EBEDF0 8px,#EBEDF0 16px);border:1.5px dashed var(--border);border-radius:10px;padding:0.4rem 0.7rem;font-size:0.78rem;color:var(--text-mid);}
.sched-session-header{font-size:0.75rem;font-weight:800;color:var(--primary);text-transform:uppercase;letter-spacing:.04em;padding:0.75rem 0 0.4rem;border-top:1.5px solid var(--primary-mid);margin-top:0.25rem;}
.sched-session-header:first-child{margin-top:0;border-top:none;}
.sched-appt-card{border-radius:10px;padding:0.5rem 0.7rem;}
.sched-appt-top{display:flex;justify-content:space-between;align-items:center;gap:0.5rem;font-size:0.85rem;}
.sched-appt-status{font-size:0.68rem;font-weight:800;text-transform:uppercase;}
.sched-appt-reason{font-size:0.78rem;color:var(--text-mid);margin-top:0.15rem;}
.sched-appt-meta{font-size:0.7rem;color:var(--text-light);margin-top:0.15rem;}
.sched-appt-actions{display:flex;flex-direction:column;gap:0.4rem;margin-top:0.5rem;}
.sched-appt-actions-row{display:flex;gap:0.4rem;}
[data-theme="dark"] .sched-day-chip{background:#141E30;}

/* ── TODAY'S SNAPSHOT — always-visible triage strip above the patient tabs ── */
#today-snapshot{margin:0.6rem 0 0.9rem}
.snap-card{background:#fff;border:1.5px solid var(--primary-mid);border-radius:12px;padding:0.85rem 1.1rem}
.snap-hd{font-size:0.68rem;font-weight:700;color:var(--primary);text-transform:uppercase;letter-spacing:0.05em;margin-bottom:0.65rem}
.snap-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:0.9rem}
.snap-grid>div{min-width:0}
.snap-tile{cursor:pointer;border-radius:8px;padding:0.15rem;margin:-0.15rem;transition:background 0.12s;}
.snap-tile:hover,.snap-tile:active{background:var(--primary-light);}
.snap-item-lbl{font-size:0.68rem;color:var(--text-light);margin-bottom:0.2rem}
.settings-chip-row{display:flex;gap:0.5rem;overflow-x:auto;padding-bottom:0.5rem;-webkit-overflow-scrolling:touch;scrollbar-width:thin;}
.settings-chip-row::-webkit-scrollbar{height:6px;}
.settings-chip-row::-webkit-scrollbar-thumb{background:var(--border);border-radius:3px;}
.settings-chip-row::-webkit-scrollbar-thumb:hover{background:var(--text-light);}
.settings-chip{flex:0 0 auto;background:var(--bg);border:1.5px solid var(--border);border-radius:20px;padding:0.4rem 0.9rem;font-size:0.82rem;font-weight:600;color:var(--text-mid);cursor:pointer;white-space:nowrap;}
.settings-chip:hover{border-color:var(--primary-mid);color:var(--primary);}
.settings-sections-trigger{display:none;align-items:center;gap:0.4rem;background:var(--bg);border:1.5px solid var(--border);border-radius:10px;padding:0.55rem 0.9rem;font-size:0.85rem;font-weight:700;color:var(--text);cursor:pointer;width:100%;justify-content:center;}
.settings-sections-menu{flex-direction:column;background:white;border:1.5px solid var(--border);border-radius:10px;margin-top:0.5rem;overflow:hidden;}
.settings-sections-menu button{text-align:left;padding:0.7rem 0.9rem;border:none;background:transparent;font-size:0.85rem;color:var(--text-mid);cursor:pointer;border-bottom:1px solid var(--border);width:100%;}
.settings-sections-menu button:last-child{border-bottom:none;}
.settings-sections-menu button:active,.settings-sections-menu button:hover{background:var(--primary-light);color:var(--primary);}
@media(max-width:640px){
  .settings-chip-row{display:none;}
  .settings-sections-trigger{display:flex;}
}
.snap-item-val{font-size:0.85rem;font-weight:700;color:var(--text);white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:100%}
.snap-item-sub{font-size:0.72rem;color:var(--text-light);margin-top:0.1rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
/* Mobile: a horizontal scroll-strip of compact cards (same pattern as the
   appointments day-strip) instead of squeezing every tile into a cramped
   2-column grid — each stays short (one truncated line) and tapping it
   jumps to the tab with the full detail, so nothing needs to wrap. */
@media(max-width:640px){
  .snap-grid{display:flex;grid-template-columns:none;overflow-x:auto;gap:0.6rem;padding-bottom:0.25rem;-webkit-overflow-scrolling:touch;scrollbar-width:none;}
  .snap-grid::-webkit-scrollbar{display:none;}
  .snap-grid>div{flex:0 0 132px;min-width:132px;}
  .snap-tile{background:var(--bg);border:1.5px solid var(--border);border-radius:10px;padding:0.55rem 0.65rem;margin:0;}
}
[data-theme="dark"] .snap-card{background:#141E30;}
[data-theme="dark"] .skel-block{background:linear-gradient(90deg,#233450 25%,#2E4162 37%,#233450 63%);background-size:400px 100%;}

/* ── SKELETON LOADING — shown as the page's static default content, replaced
   the instant the real render function runs. No JS timing logic needed. ── */
@keyframes skel-shimmer{0%{background-position:-200px 0}100%{background-position:200px 0}}
.skel-block{background:linear-gradient(90deg,#E2E8F0 25%,#F1F5F9 37%,#E2E8F0 63%);background-size:400px 100%;animation:skel-shimmer 1.4s infinite linear;border-radius:6px;}
.skel-row{display:flex;align-items:center;gap:0.75rem;padding:0.7rem 0;border-bottom:1px solid var(--border);}
.skel-row:last-child{border-bottom:none;}
.skel-avatar{width:38px;height:38px;border-radius:50%;flex-shrink:0;}
.skel-lines{flex:1;min-width:0;}
.skel-line-1{width:55%;height:12px;margin-bottom:7px;}
.skel-line-2{width:32%;height:9px;}
.gs-result-row:hover{background:var(--bg);}

/* About us window: opens at its top and scrolls inside itself (long text on phones) */
#modal-about{overflow-y:auto!important;align-items:flex-start!important;overscroll-behavior:contain;-webkit-overflow-scrolling:touch;padding:1rem!important}
#modal-about>div{margin:auto!important;flex:none}
body.about-open{overflow:hidden}

/* Billing → Price List */
.cat-add-btns{display:flex;gap:0.5rem;flex-wrap:wrap}
.cat-chips{display:flex;gap:0.5rem;flex-wrap:wrap;padding:0.75rem 1.25rem 0.25rem}
.cat-chip{border:1.5px solid var(--border);background:var(--card,#fff);color:var(--text-mid);border-radius:999px;padding:0.3rem 0.8rem;font:inherit;font-size:0.8rem;font-weight:700;cursor:pointer;min-height:34px}
.cat-chip.on{background:var(--primary-light);border-color:#BFDBFE;color:var(--primary)}
.cat-group{padding:0.75rem 1.25rem 0.25rem;font-size:0.7rem;font-weight:800;letter-spacing:0.08em;text-transform:uppercase;color:var(--text-light)}
.cat-suggest{margin:0.5rem 1.25rem 0.9rem;background:#ECFDF5;border:1px dashed #A7F3D0;border-radius:12px;padding:0.65rem 0.8rem;display:flex;flex-direction:column;gap:0.5rem}
.cat-suggest b{font-size:0.8rem;color:#065F46}
.cat-sugs{display:flex;gap:0.4rem;flex-wrap:wrap}
.cat-sug{background:#fff;border:1.5px solid #A7F3D0;color:#065F46;border-radius:999px;padding:0.25rem 0.7rem;font:inherit;font-size:0.78rem;font-weight:700;cursor:pointer;min-height:32px}
.cat-kind-seg{display:flex;gap:0.4rem;flex-wrap:wrap}
.cat-kind{border:1.5px solid var(--border);background:#fff;color:var(--text-mid);border-radius:10px;padding:0.4rem 0.75rem;font:inherit;font-size:0.84rem;font-weight:700;cursor:pointer;min-height:38px}
.cat-kind.on{border-color:#059669;background:#ECFDF5;color:#065F46}
.inv-quick{display:flex;gap:0.4rem;flex-wrap:wrap;margin-bottom:0.6rem}
.inv-quick-btn{background:#ECFDF5;border:1.5px solid #A7F3D0;color:#065F46;border-radius:999px;padding:0.3rem 0.75rem;font:inherit;font-size:0.8rem;font-weight:700;cursor:pointer;min-height:34px}
.bcat-kind{font-size:0.62rem;font-weight:800;border-radius:6px;padding:1px 6px;margin-left:4px;vertical-align:middle;background:#F1F5F9;color:#475569}
.bcat-kind.bk-svc{background:#ECFDF5;color:#065F46}

@media (max-width:600px){
  .cat-head{display:none!important}
  .cat-row{flex-wrap:wrap;gap:0.35rem 0.6rem!important;padding:0.7rem 1rem!important}
  .cat-row-name{flex:1 1 calc(100% - 40px)!important}
  .cat-row>div[style*="width:70px"]{width:auto!important;margin-left:auto}
  .cat-row>div[style*="width:32px"]{display:none}
}
/* ── Dental module (shared/dental.js) ── */
.dn-alerts{display:flex;flex-wrap:wrap;gap:0.35rem 0.5rem;align-items:center;background:#FEF2F2;border:1.5px solid #FECACA;color:#991B1B;border-radius:10px;padding:0.55rem 0.8rem;margin-bottom:0.75rem;font-size:0.84rem}
.dn-alerts span{background:white;border:1px solid #FECACA;border-radius:999px;padding:0.05rem 0.55rem;font-weight:700}
.dn-seg{display:inline-flex;border:1.5px solid var(--border);border-radius:10px;overflow:hidden}
.dn-seg button{border:0;background:transparent;color:var(--text-mid);font:inherit;font-size:0.8rem;font-weight:700;padding:0.35rem 0.75rem;cursor:pointer}
.dn-seg button.on{background:var(--primary);color:white}
.dn-legend{display:flex;flex-wrap:wrap;gap:0.3rem 0.9rem;font-size:0.75rem;color:var(--text-mid);margin-bottom:0.6rem}
.dn-legend i{display:inline-block;width:11px;height:11px;border-radius:3px;margin-right:4px;vertical-align:-1px;border:1px solid #94A3B8}
.dn-lg-caries{background:#EF4444}.dn-lg-filled{background:#3B82F6}.dn-lg-crown{border:2.5px solid #C08A12!important}.dn-lg-rct{background:#6D28D9;border-radius:50%!important}.dn-lg-miss{background:#E2E8F0}.dn-lg-imp{border:1.5px dashed #6D28D9!important}.dn-lg-plan{border:1.5px dashed #F59E0B!important;border-radius:50%!important}
.dn-chart{display:flex;flex-direction:column;gap:4px;overflow-x:auto}
.dn-arch{display:grid;grid-template-columns:1fr 1fr;min-width:0}
.dn-half{display:grid;grid-template-columns:repeat(var(--n,8),minmax(0,1fr));gap:3px;padding:3px 4px}
.dn-half.l{border-right:2px solid var(--primary-mid)}
.dn-arch.up .dn-half{border-bottom:2px solid var(--primary-mid)}
.dn-qlabel{display:grid;grid-template-columns:1fr 1fr;font-size:0.66rem;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-light)}
.dn-qlabel span:last-child{text-align:right}
.dn-tooth{display:flex;flex-direction:column;align-items:center;gap:2px;cursor:pointer;border-radius:7px;padding:3px 0;background:transparent;border:1.5px solid transparent;min-width:0;color:var(--text);font:inherit}
.dn-tooth:hover{background:var(--primary-light)}.dn-tooth.sel{border-color:var(--primary);background:var(--primary-light)}
.dn-tooth svg{width:100%;max-width:38px;height:auto;display:block}
.dn-no{font-size:0.74rem;font-weight:800;line-height:1;font-variant-numeric:tabular-nums}
.dn-no.plan{color:#B45309}
.dn-arch.down .dn-tooth{flex-direction:column-reverse}
.dn-surf{fill:white;stroke:#94A3B8;stroke-width:1.2}
.dn-surf.caries{fill:#EF4444}.dn-surf.filled{fill:#3B82F6}.dn-surf.dn-miss{fill:#E2E8F0}
.dn-x{stroke:#718096;stroke-width:2.2}.dn-crown{fill:none;stroke:#C08A12;stroke-width:3.2}
.dn-imp{fill:none;stroke:#6D28D9;stroke-width:1.6;stroke-dasharray:3 2}.dn-rct{fill:#6D28D9}
.dn-ring{fill:none;stroke:#F59E0B;stroke-width:1.8;stroke-dasharray:4 2.5}
.dn-detail{display:grid;grid-template-columns:minmax(140px,180px) 1fr;gap:1rem;border-top:1px solid var(--border);padding-top:0.9rem;margin-top:0.75rem}
.dn-big{display:flex;flex-direction:column;align-items:center;gap:0.4rem}
.dn-big svg{width:100%;max-width:160px;height:auto}
.dn-big .dn-surf{cursor:pointer}.dn-big .dn-surf:hover{stroke:var(--primary);stroke-width:2.5}
.dn-big text{font-size:6px;font-weight:800;fill:#718096;pointer-events:none}
.dn-cap{font-size:0.74rem;color:var(--text-light);text-align:center}
.dn-dd{display:flex;flex-direction:column;gap:0.7rem;min-width:0}
.dn-dd h4{margin:0;font-size:1rem;font-weight:800}
.dn-code{font-weight:800;color:var(--primary);font-size:0.88rem}
.dn-lbl{font-size:0.7rem;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-mid);margin-bottom:0.3rem}
.dn-chips{display:flex;flex-wrap:wrap;gap:0.35rem}
.dn-chip{border:1.5px solid var(--border);background:white;color:var(--text-mid);border-radius:999px;padding:0.28rem 0.7rem;font:inherit;font-size:0.8rem;font-weight:700;cursor:pointer}
.dn-chip.on{background:var(--primary-light);border-color:var(--primary);color:var(--primary)}
.dn-chip.caries.on{background:#FEE2E2;border-color:#DC2626;color:#DC2626}
.dn-hist{font-size:0.82rem;color:var(--text-mid);display:flex;flex-direction:column;gap:0.3rem}
.dn-hist time{color:var(--text-light);font-variant-numeric:tabular-nums;margin-right:0.4rem}
.dn-mh{display:grid;grid-template-columns:repeat(auto-fill,minmax(170px,1fr));gap:0.45rem}
.dn-mh label{margin:0;min-height:0;text-transform:none;letter-spacing:0;display:flex;gap:0.5rem;align-items:center;border:1.5px solid var(--border);border-radius:10px;padding:0.5rem 0.65rem;font-size:0.84rem;font-weight:600;cursor:pointer}
.dn-mh label.yes{border-color:#DC2626;background:#FEF2F2;color:#991B1B}
.dn-mh input{width:17px;height:17px;accent-color:#DC2626}
.dn-sum{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:0.6rem;margin-bottom:0.75rem}
.dn-sum div{background:var(--bg);border-radius:10px;padding:0.55rem 0.75rem}
.dn-sum span{display:block;font-size:0.72rem;color:var(--text-light);font-weight:700}
.dn-sum b{font-size:1.05rem;font-variant-numeric:tabular-nums}
.dn-tbl-wrap{overflow-x:auto;border:1.5px solid var(--border);border-radius:12px}
.dn-tbl{width:100%;border-collapse:collapse;font-size:0.85rem}
.dn-tbl th{font-size:0.68rem;font-weight:800;letter-spacing:0.06em;text-transform:uppercase;color:var(--text-light);text-align:left;padding:0.5rem 0.65rem;background:var(--primary-light);white-space:nowrap}
.dn-tbl td{padding:0.55rem 0.65rem;border-top:1px solid var(--border);vertical-align:top}
.dn-tno{font-weight:800;color:var(--primary);white-space:nowrap}
.dn-num{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.dn-acts{white-space:nowrap;text-align:right}
.dn-st{display:inline-block;border-radius:999px;padding:0.1rem 0.55rem;font-size:0.72rem;font-weight:800;white-space:nowrap}
.dn-st-done{background:#D1FAE5;color:#065F46}.dn-st-prog{background:#EDE9FE;color:#6D28D9}.dn-st-plan{background:#FEF3C7;color:#92400E}.dn-st-prop{background:#EDF2F7;color:#718096}
.dn-add-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:0 0.75rem}
.dn-add-grid .dn-wide{grid-column:span 2}
.dn-check{display:flex;gap:0.5rem;align-items:center;font-size:0.84rem;font-weight:600;cursor:pointer}
.dn-check input{width:17px;height:17px;accent-color:var(--primary)}
.dn-work-list{display:flex;flex-direction:column;gap:0.5rem}
.dn-work{border:1.5px solid var(--border);border-radius:12px;padding:0.55rem 0.75rem}
.dn-work.on{border-color:var(--primary);background:var(--primary-light)}
.dn-w-top{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:0.6rem;align-items:center;cursor:pointer}
.dn-w-top input{width:18px;height:18px;accent-color:var(--primary)}
.dn-w-body{display:none;flex-direction:column;gap:0.4rem;margin-top:0.5rem}
.dn-work.on .dn-w-body{display:flex}
.dn-w-note{width:100%;border:1.5px solid var(--border);border-radius:8px;padding:0.45rem 0.6rem;font:inherit;font-size:0.85rem;resize:vertical}
.dn-add-details{margin-top:0.6rem}
.dn-add-details summary{cursor:pointer;color:var(--primary);font-weight:700;font-size:0.85rem;padding:0.35rem 0}
@media(max-width:640px){
  .dn-detail{grid-template-columns:1fr}
  .dn-sum{grid-template-columns:repeat(2,minmax(0,1fr))}
  .dn-add-grid{grid-template-columns:1fr 1fr}
  .dn-add-grid .dn-wide{grid-column:1 / -1}
  .dn-half{gap:1px;padding:2px 1px}
  .dn-no{font-size:0.6rem}
  .dn-tbl th:nth-child(3),.dn-tbl td:nth-child(3){display:none}
  .dn-mh{grid-template-columns:1fr 1fr}
  .dn-mh label{padding:0.4rem 0.5rem;font-size:0.8rem}
}
[data-theme="dark"] .dn-surf{fill:#1E2F50;stroke:#5B6F92}
[data-theme="dark"] .dn-surf.caries{fill:#EF4444}[data-theme="dark"] .dn-surf.filled{fill:#3B82F6}[data-theme="dark"] .dn-surf.dn-miss{fill:#2A3A58}
[data-theme="dark"] .dn-chip,[data-theme="dark"] .dn-alerts span{background:transparent}
[data-theme="dark"] .dn-alerts,[data-theme="dark"] .dn-mh label.yes{background:#431818;color:#FCA5A5;border-color:#7F1D1D}
/* ── Dental clinic screens (shared/dental-clinic.js) ── */
.dc-chips{display:flex;gap:0.4rem;overflow-x:auto;padding:0.25rem 0 0.6rem;scrollbar-width:none}
.dc-chips::-webkit-scrollbar{display:none}
.dc-chip{flex-shrink:0;display:inline-flex;align-items:center;gap:0.4rem;border:1.5px solid var(--border);background:white;color:var(--text-mid);border-radius:999px;padding:0.25rem 0.7rem 0.25rem 0.3rem;font:inherit;font-size:0.8rem;font-weight:700;cursor:pointer}
.dc-chip.on{border-color:var(--primary);background:var(--primary-light);color:var(--primary)}
.dc-av{width:22px;height:22px;border-radius:50%;display:inline-flex;align-items:center;justify-content:center;color:white;font-size:0.6rem;font-weight:900;flex-shrink:0}
.dc-cal{display:grid;grid-template-columns:48px repeat(var(--cols,1),minmax(150px,1fr));overflow-x:auto}
.dc-ch{padding:0.4rem 0.5rem;border-bottom:1.5px solid var(--border);display:flex;align-items:center;gap:0.4rem;font-size:0.84rem;font-weight:800;position:sticky;top:0;background:white;z-index:2;min-width:0}
.dc-ch span:last-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.dc-times,.dc-col{position:relative}
.dc-col{border-left:1px solid var(--border)}
.dc-tlab{position:absolute;left:0;right:6px;text-align:right;font-size:0.68rem;color:var(--text-light);font-variant-numeric:tabular-nums;transform:translateY(-6px)}
.dc-brk-lab{font-weight:800;transform:none}
.dc-hl{position:absolute;left:0;right:0;border-top:1px solid #EDF2F7}
.dc-hl.half{border-top-style:dashed}
.dc-brk{position:absolute;left:0;right:0;background:repeating-linear-gradient(135deg,#F5F8FD,#F5F8FD 6px,white 6px,white 12px)}
.dc-free{position:absolute;left:3px;right:3px;border-radius:7px;border:1.5px dashed transparent;background:transparent;color:transparent;font:inherit;font-size:0.7rem;font-weight:700;cursor:pointer}
.dc-free:hover,.dc-free:focus-visible{border-color:var(--primary-mid);color:var(--primary);background:var(--primary-light)}
.dc-appt{position:absolute;left:3px;right:3px;border-radius:8px;border:0;border-left:3px solid;padding:3px 7px;text-align:left;font:inherit;font-size:0.72rem;line-height:1.3;overflow:hidden;cursor:pointer;display:flex;flex-direction:column;color:var(--text)}
.dc-appt b{font-size:0.78rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-appt b span{font-weight:500}
.dc-r{white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.dc-m{color:var(--text-light);font-size:0.68rem}
.dc-blk{position:absolute;left:3px;right:3px;border-radius:7px;background:repeating-linear-gradient(135deg,#FEE2E2,#FEE2E2 6px,#FEF2F2 6px,#FEF2F2 12px);color:#991B1B;font-size:0.7rem;font-weight:700;padding:3px 7px;overflow:hidden}
.dc-ov{position:fixed;inset:0;z-index:9000;background:rgba(15,23,42,0.5);display:flex;align-items:center;justify-content:center;padding:1rem}
.dc-ov-card{background:white;border-radius:14px;padding:0.9rem;width:100%;max-width:420px;box-shadow:0 20px 60px rgba(0,0,0,0.3)}
.dc-ov-h{display:flex;align-items:center;justify-content:space-between;gap:0.5rem;margin-bottom:0.6rem}
@media(min-width:641px){.dc-chips{display:none}}
@media(max-width:640px){
  .dc-cal{grid-template-columns:44px minmax(0,1fr)}
  .dc-cal>.dc-ch:not(.dc-show),.dc-cal>.dc-col:not(.dc-show){display:none}
}
[data-theme="dark"] .dc-ch,[data-theme="dark"] .dc-ov-card,[data-theme="dark"] .dc-chip{background:var(--card-bg,#13203A)}
.dc-chips.dc-chips-all{display:flex;flex-wrap:wrap}
.dc-pay{display:grid;grid-template-columns:minmax(0,1.2fr) minmax(0,1.6fr) auto auto;gap:0.9rem;align-items:center;border:1.5px solid var(--border);border-radius:12px;padding:0.6rem 0.8rem}
.dc-pay-who{display:flex;align-items:center;gap:0.5rem;min-width:0}
.dc-pay-who b{display:block;font-size:0.9rem}.dc-pay-who small{display:block;color:var(--text-light);font-size:0.74rem}
.dc-pay-who .dc-av{width:30px;height:30px;font-size:0.7rem}
.dc-meter{height:9px;background:#EDF2F7;border-radius:999px;overflow:hidden;margin-bottom:0.2rem}
.dc-meter i{display:block;height:100%;border-radius:999px}
.dc-pay-pct{display:flex;flex-direction:column;font-size:0.68rem;font-weight:800;text-transform:uppercase;letter-spacing:0.04em;color:var(--text-light);gap:0.15rem;margin:0}
.dc-pay-pct input{width:78px;padding:0.35rem 0.5rem;border:1.5px solid var(--border);border-radius:8px;font:inherit;font-size:0.85rem;text-transform:none}
.dc-pay-out{text-align:right;min-width:92px}.dc-pay-out b{display:block;font-size:1.02rem;font-variant-numeric:tabular-nums}.dc-pay-out small{color:var(--text-light);font-size:0.72rem}
.dc-recep{display:grid;grid-template-columns:repeat(auto-fit,minmax(300px,1fr));gap:1rem;margin-top:1rem}
.dc-mini{display:grid;grid-template-columns:minmax(0,1fr) auto auto;gap:0.6rem;align-items:center;border:1.5px solid var(--border);border-radius:10px;padding:0.5rem 0.65rem}
.dc-mini b{font-size:0.88rem}
.dc-amt{font-weight:800;color:var(--danger);font-variant-numeric:tabular-nums}
@media(max-width:640px){.dc-pay{grid-template-columns:1fr auto}.dc-pay-mid{grid-column:1 / -1;grid-row:2}.dc-pay-pct{grid-row:3}.dc-pay-out{grid-row:3}}
.fu-book{background:#EDE9FE;color:#6D28D9;border-color:#DDD6FE;}

/* Patient documents: vaccination card / old prescriptions (v151) */
.pdoc-card{border:1.5px solid var(--border);border-radius:10px;padding:0.7rem 0.9rem;margin:0.75rem 1.25rem 0.25rem;display:flex;flex-direction:column;gap:0.6rem}
.pdoc-head{display:flex;gap:0.5rem;align-items:baseline;flex-wrap:wrap;font-size:0.88rem}.pdoc-head span{font-size:0.75rem;color:var(--text-light)}
.pdoc-strip{display:flex;gap:0.75rem;flex-wrap:wrap}
.pdoc{display:flex;flex-direction:column;gap:0.2rem;width:96px;font-size:0.72rem;color:var(--text-light)}
.pdoc-th{width:96px;height:116px;border:1px solid var(--border);border-radius:8px;padding:0;overflow:hidden;background:var(--bg);cursor:zoom-in;display:flex;align-items:center;justify-content:center}
.pdoc-th.new{outline:2.5px solid #F2C94C;outline-offset:2px}
.pdoc-th img{width:100%;height:100%;object-fit:cover;display:block}
.pdoc-pdf{background:#E5484D;color:#fff;font-weight:800;font-size:0.75rem;width:100%;height:100%;display:flex;align-items:center;justify-content:center}
.pdoc-new{font-weight:800;color:#B45309;background:#FEF3C7;border-radius:999px;padding:0 0.45rem;width:max-content}
.pdoc-rm{border:none;background:none;color:#DC2626;font-size:0.72rem;padding:0.15rem 0;cursor:pointer;text-align:left;width:max-content}
.pdoc-vax{display:grid;grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:0.2rem 1.5rem;font-size:0.84rem}
.pdoc-vrow{display:flex;align-items:center;gap:0.5rem 0.75rem;flex-wrap:wrap;min-height:2rem}.pdoc-vax label{display:flex;align-items:center;gap:0.5rem;cursor:pointer}.pdoc-vax small{color:var(--text-light)}
.pdoc-vax input[type=date]{padding:0.25rem 0.4rem;border:1.5px solid var(--border);border-radius:6px;font-family:inherit;background:var(--bg);color:inherit}
.inv-file{border:none;background:#EFF6FF;color:#1D6FD8;font-weight:700;font-size:0.76rem;border-radius:6px;padding:0.15rem 0.5rem;cursor:pointer;white-space:nowrap}
#imm-docs-wrap .pdoc-card{margin:0 0 1rem;background:white}
.pdoc-vax input[type=date]{width:160px !important;flex:none}
.pdoc-vax input[type=checkbox]{width:auto;flex:none}

/* Registration certificate box — Settings → Doctors and the setup page (v151) */
.vb{border:1.5px solid var(--border);background:var(--bg);border-radius:10px;padding:0.8rem 1rem;display:flex;flex-direction:column;gap:0.6rem;margin-top:0.25rem}
.vb.todo{border-color:#FCD34D;background:#FFFBEB}
.vb-h{display:flex;align-items:center;gap:0.5rem;flex-wrap:wrap;font-size:0.88rem}
.vb-chip{font-size:0.72rem;font-weight:800;border-radius:999px;padding:0.1rem 0.6rem}
.vb-chip.ok{background:#D1FAE5;color:#047857}.vb-chip.wait{background:#FEF3C7;color:#92400E}.vb-chip.bad{background:#FEE2E2;color:#B91C1C}
.vb-sub{font-size:0.78rem;color:var(--text-light)}
.vb-note{font-size:0.8rem;color:#991B1B;background:#FEF2F2;border-radius:8px;padding:0.4rem 0.6rem}
.vb-drop{display:block;border:2px dashed #BFDBFE;border-radius:10px;padding:0.9rem;text-align:center;cursor:pointer;background:white;font-size:0.82rem;color:var(--text-light)}
.vb-drop b{color:#1D6FD8}.vb-drop input{display:none}
.vb-row{display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center}
[data-theme="dark"] .vb.todo{background:#2A230E;border-color:#7A5A10}
[data-theme="dark"] .vb-drop{background:transparent}
.pdoc-card.empty{padding:0.55rem 0.9rem}
.pdoc-add{margin-left:auto;font-size:0.8rem;font-weight:700;color:#1D6FD8;background:#EFF6FF;border:1.5px solid #BFDBFE;border-radius:8px;padding:0.3rem 0.7rem;cursor:pointer;white-space:nowrap}
.pdoc-add.busy{opacity:0.6;pointer-events:none}.pdoc-add.busy::after{content:' …'}
[data-theme="dark"] .pdoc-add{background:#15294D;border-color:#2A4A80;color:#93C5FD}
.ixr-kind{font-weight:700;font-size:0.8rem;padding:0.2rem 0.4rem;border:1.5px solid var(--border);border-radius:6px;background:var(--bg);color:inherit;font-family:inherit;max-width:100%;width:auto !important;margin-bottom:0.15rem}

/* Settings > Activity log */
.al-filters{display:flex;gap:0.5rem;flex-wrap:wrap;margin-bottom:0.75rem}
.al-filters select,.al-filters input{min-width:0;font-size:0.82rem;padding:0.4rem 0.6rem;border:1.5px solid var(--border);border-radius:8px;background:var(--card,#fff);color:var(--text)}
.al-tbl{overflow-x:auto}
.al-table{width:100%;min-width:520px;border-collapse:collapse}
.al-table th{font-size:0.7rem;text-transform:uppercase;letter-spacing:0.06em;color:var(--text-light);text-align:left;padding:0.4rem 0.5rem;border-bottom:1px solid var(--border)}
.al-table td{padding:0.5rem;border-bottom:1px solid var(--border);font-size:0.82rem;vertical-align:top}
.al-when{white-space:nowrap;color:var(--text-mid);font-variant-numeric:tabular-nums}
.al-pill{display:inline-block;font-size:0.72rem;font-weight:700;padding:0.12rem 0.5rem;border-radius:999px;background:var(--primary-light);color:var(--primary)}
.al-pill.bad{background:#FDECEA;color:#C0392B}
.al-det{color:var(--text-light);font-size:0.78rem}
.fu-btn.fu-x{background:transparent;color:var(--text-light);border:1px solid var(--border)}
.fu-btn.fu-x:hover{color:#C0392B;border-color:#C0392B}

/* Patient chart > Privacy & records */
.pr-sec{padding:0.9rem 0;border-top:1px solid var(--border)}.pr-sec:first-child{border-top:0;padding-top:0}
.pr-sec h3{font-size:0.9rem;margin:0 0 0.35rem}
.pr-mute{font-size:0.8rem;color:var(--text-light);margin:0.35rem 0}
.pr-row{display:flex;gap:0.5rem;flex-wrap:wrap;align-items:center;margin-top:0.4rem}
.pr-row input{flex:1;min-width:180px;padding:0.45rem 0.65rem;border:1.5px solid var(--border);border-radius:8px;font:inherit;font-size:0.85rem;background:var(--card,#fff);color:var(--text)}
.pr-pill{display:inline-block;font-size:0.75rem;font-weight:700;padding:0.15rem 0.6rem;border-radius:999px}
.pr-pill.ok{background:#E3F6EE;color:#0E8F5B}.pr-pill.warn{background:#FFF3DC;color:#B26A00}.pr-pill.bad{background:#FDECEA;color:#C0392B}
.pr-act{display:grid;grid-template-columns:auto 1fr auto;gap:0.6rem;font-size:0.78rem;padding:0.2rem 0;border-bottom:1px solid var(--border)}

/* Settings > Privacy status */
.ps-block{margin-top:1rem;padding-top:0.9rem;border-top:1px solid var(--border)}
.ps-h{font-weight:800;font-size:0.85rem;margin-bottom:0.3rem}
.ps-line{font-size:0.85rem;color:var(--text-mid);margin-bottom:0.4rem}
.ps-due{color:#B26A00;font-weight:700}
.ps-note{font-size:0.78rem;color:var(--text-light);margin-top:0.5rem}
.ps-list{display:flex;flex-wrap:wrap;gap:0.4rem 0.9rem;margin-top:0.5rem;font-size:0.82rem}
.ps-list a{color:var(--primary);text-decoration:none;font-weight:600}
.ps-list[hidden]{display:none}