: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;}
.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 compression — the header now carries 6 nav items plus a sync
   badge, subscription chip, doctor info, help, dark mode, and sign-out.
   That no longer fits at full size on common laptop widths (1366–1536px),
   so this tier now covers a much wider range than it originally needed to. ── */
@media(max-width:1700px) and (min-width:961px){
  .tnav-clinic{display:none;}
  .tnav-divider{display:none;}
  .tnav-brand{margin-right:0.75rem;}
  .nav-item{padding:0.38rem 0.55rem;font-size:0.78rem;gap:0.25rem;}
  .nav-item .ni{display:none;}
  .tnav-right{gap:0.35rem;}
  .tnav-signout{padding:0.28rem 0.5rem;font-size:0.74rem;}
}
/* Extra-tight tier — trims the sync badge's timestamp and doctor
   qualification line so the row still fits down to ~1100px. */
@media(max-width:1150px) and (min-width:961px){
  .sync-last-suffix{display:none;}
  .tnav-dqual{display:none;}
  #sub-chip-wrap{display:none!important;}
}
/* 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 medium screens — show just the avatar circle */
@media(max-width:960px){
  .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);}
/* 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);}
.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{transform:scale(0.95) translateY(16px);opacity:0;}to{transform:none;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;}
/* 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;}
.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;border-left:3px solid #162B55;}
  .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;}
.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;}
#mob-header-nav{display:none!important;}
/* ── 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;transform:translateY(-6px) scale(0.97);}to{opacity:1;transform:translateY(0) scale(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;}}
</style>
@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;
  }
  .pcare-features-grid{display:none !important;}
  #pcare-login-left>div:nth-child(4),
  #pcare-login-left>div:nth-child(5){display:none !important;}
  #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"] .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"] .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-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-closed{background:#F8FAFC;opacity:0.6;}
.sched-slot-time.sched-slot-closed{color:#CBD5E1;}
.sched-slot-closed-label{font-size:0.72rem;color:#94A3B8;font-style:italic;padding-top:0.4rem;}
.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;gap:0.4rem;margin-top:0.5rem;flex-wrap:wrap;}
[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(4,1fr);gap:0.9rem}
.snap-item-lbl{font-size:0.68rem;color:var(--text-light);margin-bottom:0.2rem}
.snap-item-val{font-size:0.85rem;font-weight:700;color:var(--text)}
.snap-item-sub{font-size:0.72rem;color:var(--text-light);margin-top:0.1rem}
@media(max-width:640px){.snap-grid{grid-template-columns:1fr 1fr;row-gap:0.75rem}}
[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;}