*{box-sizing:border-box;margin:0;padding:0;-webkit-tap-highlight-color:transparent}
body{font-family:-apple-system,BlinkMacSystemFont,'Segoe UI',Roboto,sans-serif;background:#E8EEF5;color:#2C4564;font-size:14px;height:100vh;display:flex;flex-direction:column;overflow:hidden}

/* HEADER */
.hd{background:#2C4564;color:#fff;padding:10px 13px;display:flex;justify-content:space-between;align-items:center;flex-shrink:0}
.hl{display:flex;align-items:center;gap:9px}
.hl img{width:26px;height:26px;border-radius:5px}
.ht{font-size:15px;font-weight:700;letter-spacing:.1px}
.hs{font-size:10px;opacity:.45;margin-top:1px}
/* v3.14.17: clickable version tag in header subtitle */
.ver-tag{display:inline-block;font-size:9px;font-weight:700;background:#E8EEF5;color:#2C4564;padding:1px 5px;border-radius:6px;margin-left:5px;cursor:pointer;opacity:.85;transition:all .15s;letter-spacing:.2px}
.ver-tag:hover{background:#4A6FA5;color:#fff;opacity:1}
.ver-tag.has-update{background:#4A6FA5;color:#fff;animation:verPulse 2s ease-in-out 2}
@keyframes verPulse{0%,100%{box-shadow:0 0 0 0 rgba(74,111,165,.5)}50%{box-shadow:0 0 0 4px rgba(74,111,165,0)}}
/* v3.14.17: What's New popover */
.wn-overlay{display:none;position:fixed;inset:0;background:rgba(20,30,50,.45);z-index:9998;align-items:center;justify-content:center;padding:20px;animation:wnFade .2s ease-out}
.wn-overlay.show{display:flex}
@keyframes wnFade{from{opacity:0}to{opacity:1}}
.wn-card{background:#fff;border-radius:14px;box-shadow:0 12px 40px rgba(20,30,50,.25);max-width:340px;width:100%;max-height:80vh;overflow:hidden;display:flex;flex-direction:column;animation:wnSlide .25s cubic-bezier(.2,.9,.3,1.2)}
@keyframes wnSlide{from{transform:translateY(20px) scale(.96);opacity:0}to{transform:translateY(0) scale(1);opacity:1}}
.wn-head{padding:16px 20px 12px;border-bottom:1px solid #EEF2F7;display:flex;align-items:center;gap:10px}
.wn-icon{width:32px;height:32px;border-radius:8px;background:linear-gradient(135deg,#4A6FA5,#6B96C4);display:flex;align-items:center;justify-content:center;color:#fff;font-size:18px;font-weight:700;flex-shrink:0}
.wn-head-text{flex:1;min-width:0}
.wn-title{font-size:13px;font-weight:700;color:#2C4564;line-height:1.2}
.wn-sub{font-size:10px;color:#6B7D96;margin-top:2px}
.wn-body{padding:14px 20px 16px;overflow-y:auto;font-size:11px;line-height:1.55;color:#374151}
.wn-body ul{margin:6px 0 6px 16px;padding:0}
.wn-body li{margin:4px 0}
.wn-body strong{color:#2C4564}
.wn-foot{padding:12px 20px 16px;display:flex;justify-content:flex-end;gap:8px;border-top:1px solid #EEF2F7}
.wn-btn{padding:8px 16px;background:#4A6FA5;color:#fff;border:none;border-radius:8px;font-size:11px;font-weight:700;cursor:pointer;font-family:inherit;transition:background .12s}
.wn-btn:hover{background:#3A5A8E}
/* v3.14.18: confirm modal button variants */
.wn-btn.cf-cancel{background:#E8EEF5;color:#2C4564}
.wn-btn.cf-cancel:hover{background:#c8d4e4}
.wn-btn.cf-danger{background:#B05858}
.wn-btn.cf-danger:hover{background:#914545}
.wn-icon.cf-danger-icon{background:linear-gradient(135deg,#B05858,#914545)}
.wn-icon.cf-warn-icon{background:linear-gradient(135deg,#E0A030,#B07820)}
.hr{display:flex;align-items:center;gap:7px}
.tbadge{font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px}
.online-ok{background:#D1FAE5;color:#065F46}.online-off{background:#FEE2E2;color:#991B1B}
.tb-ok{background:rgba(16,185,129,.2);color:#6EE7B7}
.tb-no{background:rgba(255,255,255,.1);color:rgba(255,255,255,.4)}
.gearb{background:none;border:none;color:rgba(255,255,255,.4);font-size:15px;cursor:pointer;padding:2px 5px;border-radius:3px;line-height:1}
.gearb:hover{color:#fff}

/* SETUP - matches patient form card style */
.setup{background:#fff;border-bottom:1px solid #c8d4e4;display:none;flex-shrink:0;overflow-y:auto;max-height:72vh}
.setup.show{display:block}
.si{padding:14px 13px}
.sblock{margin-bottom:13px;padding-bottom:13px;border-bottom:1px solid #E8EEF5}
.sblock:last-child{border-bottom:none;margin-bottom:0;padding-bottom:0}
.slbl{font-size:11px;font-weight:700;color:#5A7494;text-transform:uppercase;letter-spacing:.6px;margin-bottom:5px}
.shint{font-size:11px;color:#7B9AC7;line-height:1.5;margin-bottom:6px}
.shint code{background:#E8EEF5;padding:1px 5px;border-radius:3px;font-family:monospace;font-size:9px;word-break:break-all;color:#2C4564}
.sinp{width:100%;padding:10px 12px;border:1px solid #c8d4e4;border-radius:10px;font-size:13px;outline:none;background:#F5F7FA;color:#2C4564;margin-bottom:5px;font-family:inherit}
.sinp:focus{border-color:#2C4564;background:#fff}
.s2col{display:flex;gap:6px}
.s2col .sinp{flex:1;margin-bottom:0}
.sbr{display:flex;gap:8px;margin-top:6px;align-items:center}
.sbtn{padding:8px 14px;border:none;border-radius:8px;font-size:12px;font-weight:700;cursor:pointer;background:#2C4564;color:#fff;font-family:inherit}
.sbtn:hover{background:#1a2d45}
.sbtn.outline{background:#fff;color:#2C4564;border:1px solid #c8d4e4}
.sbtn.outline:hover{border-color:#2C4564}
/* v3.14.19: settings panel utility classes — replaces inline styles */
.sinp-sm{font-size:11px}
.sbtn-success{background:#10B981;color:#fff}
.sbtn-success:hover{background:#0E9F6E}
.sbtn-test{font-size:11px;padding:6px 10px}
.sbr-mt6{margin-top:6px}
.shint-mt8{margin-top:8px}
.sout-sm{font-size:10px}
.sout-md{font-size:11px;font-weight:600}
.cfg-grid-2{display:grid;grid-template-columns:1fr 1fr;gap:4px;margin-bottom:6px}
.cfg-grid-narrow{display:grid;grid-template-columns:80px 1fr;gap:4px}
.cfg-province{font-size:11px;padding:5px 6px}
/* v3.14.19: export menu dropdown — replaces long inline style */
.export-menu-trigger{position:relative;display:inline-block}
.tbtn-export{background:#5A7494;font-size:9px;padding:6px 8px}
.export-menu{display:none;position:absolute;right:0;top:100%;margin-top:2px;background:#fff;border:1px solid #D1D5DB;border-radius:8px;box-shadow:0 4px 12px rgba(0,0,0,0.1);z-index:99;min-width:140px;overflow:hidden}
.export-menu.show{display:block}
.export-menu-up{top:auto;bottom:100%;margin-top:0;margin-bottom:2px}
.export-menu-item.divider{border-bottom:1px solid #F3F4F6}
/* v3.14.19: print counter bar — replaces inline style */
.print-counter-bar{display:none;padding:5px 12px;background:#fff;border-bottom:1px solid #E8EEF5;font-size:11px;color:#6B7D96;text-align:right}
.print-counter-bar.show{display:block}
/* v3.14.19: header status indicators */
.offline-badge-warn{background:#F59E0B;color:#fff;cursor:pointer}
/* v3.14.20: force-release lock button — sits next to offlineBadge in header */
.force-release-btn{background:#B05858;color:#fff;border:0;font-size:10px;font-weight:700;padding:2px 8px;border-radius:10px;cursor:pointer;margin-left:2px}
.force-release-btn:hover{background:#914545}
.online-status{font-size:9px;padding:2px 6px;border-radius:4px;font-weight:600}
.sout{font-size:10px;color:#059669;font-weight:600}

/* TABS */
.tabs{display:flex;background:#fff;border-bottom:1px solid #c8d4e4;flex-shrink:0}
.tab{flex:1;padding:10px 0;text-align:center;font-size:13px;font-weight:700;color:#7B9AC7;cursor:pointer;border-bottom:2px solid transparent}
.tab.on{color:#2C4564;border-bottom-color:#2C4564}
.tab.ons{color:#2C4564;border-bottom-color:#2C4564}

/* LOAD BAR */
.topbar{padding:9px 12px;background:#fff;border-bottom:1px solid #c8d4e4;flex-shrink:0}
.trow{display:flex;gap:6px;margin-bottom:6px}
.trow:last-child{margin-bottom:0}
.trow input{flex:1;padding:10px 12px;border:1px solid #c8d4e4;border-radius:10px;font-size:14px;outline:none;background:#F5F7FA;color:#2C4564;font-family:inherit}
.trow input:focus{border-color:#2C4564;background:#fff}
.tbtn{padding:10px 14px;background:#2C4564;color:#fff;border:none;border-radius:10px;font-size:13px;font-weight:700;cursor:pointer;font-family:inherit;white-space:nowrap}
.tbtn:hover{background:#1a2d45}

/* PROGRESS */
.prog{padding:6px 12px 5px;background:#fff;border-bottom:1px solid #c8d4e4;flex-shrink:0;display:none}
.prog.show{display:block}
.fbs{display:flex;gap:4px;flex-wrap:wrap;margin-bottom:5px}
.fselRow{display:flex;gap:6px;margin-bottom:6px}
.fselRow>div{flex:1;min-width:0}
.fsel{width:100%;font-size:10.5px;font-weight:600;color:#2C4564;background:#F7F9FC;border:1px solid #dfe6f0;border-radius:7px;padding:4px 7px;cursor:pointer;-webkit-appearance:menulist}
.fsel:hover{border-color:#c8d4e4}
/* v178/179: minimal filter + slicer — small, quiet chips for BOTH the screener
   filter (.fb in filterBox) and the status slicer (.sfb in statusBox) */
.fb{padding:2px 8px;border-radius:7px;font-size:9.5px;font-weight:600;cursor:pointer;border:1px solid #dfe6f0;background:#F7F9FC;color:#6B7C93}
.fb:hover{border-color:#c8d4e4}
.fb.on{background:#2C4564;color:#fff;border-color:#2C4564}
.fbs{gap:3px}
.sfb{padding:2px 8px;border-radius:7px;font-size:9.5px;font-weight:600;border-color:#dfe6f0;color:#6B7C93;background:#F7F9FC}
.sfb:hover{border-color:#c8d4e4}
.sfb.on{background:#2C4564;color:#fff;border-color:#2C4564}
.ftag{display:inline-block;font-size:9px;font-weight:800;background:#eaf0f7;color:#2C4564;border-radius:5px;padding:1px 5px;letter-spacing:.3px;margin-left:4px;vertical-align:middle}
.pbar{height:3px;background:#E8EEF5;border-radius:2px;overflow:hidden}
.pfill{height:100%;background:#10B981;transition:width .3s}
.ptxt{font-size:11px;color:#7B9AC7;display:flex;justify-content:space-between;margin-top:2px}

/* STATUS */
.stat{padding:7px 12px;font-size:12px;flex-shrink:0;display:none;font-weight:500}
.stat.ok{display:block;background:#D1FAE5;color:#065F46}
.stat.err{display:block;background:#FEE2E2;color:#991B1B}
.stat.info{display:block;background:#EFF6FF;color:#1E40AF}
.stat.warn{display:block;background:#FEF9C3;color:#854D0E}
.slog{max-height:72px;overflow-y:auto;font-size:10px;padding:3px 12px;background:#F5F7FA;border-bottom:1px solid #c8d4e4;flex-shrink:0;display:none}
.slog.show{display:block}
.slog div{padding:1px 0;color:#7B9AC7}
.slog .ok{color:#059669}.slog .err{color:#DC2626}.slog .inf{color:#2C4564}.slog .wrn{color:#D97706}

/* PATIENT LIST */
.list{flex:1;overflow-y:auto;min-height:0}
.empty{text-align:center;padding:36px 18px;color:#7B9AC7}
.empty b{display:block;color:#2C4564;font-size:14px;margin-bottom:5px;font-weight:700}

/* Patient row - white card style */
/* v3.14.21.99: compacted padding/fonts so more rows fit without scrolling */
.prow{display:flex;align-items:center;padding:5px 8px;border-bottom:1px solid #E8EEF5;cursor:pointer;background:#fff;gap:5px}
.prow.printed{border-left:3px solid #10B981}
.prow:hover{background:#F5F7FA}
.prow.cur{background:#EFF6FF;border-left:3px solid #2C4564;padding-left:7px}
.prow.done{opacity:.38}
.prow.syncing{opacity:.7}
.prow.sok{border-left:3px solid #10B981;padding-left:7px}
.prow.serr{border-left:3px solid #DC2626;padding-left:7px}
.prow.spine-noennhsr{border-left:3px solid #EEF2F7;padding-left:7px}
.prow.spine-pending{border-left:3px solid #6B7D96;padding-left:7px}
.prow.spine-unsynced{border-left:3px solid #E07A3C;padding-left:7px}
.prow.spine-syncing{border-left:3px solid #E07A3C;padding-left:7px}
.prow.spine-synced{border-left:3px solid #3FA66A;padding-left:7px}
.prow.spine-done{border-left:3px solid #4A6FA5;padding-left:7px}
.prow.spine-refer{box-shadow:inset 3px 0 0 0 #C2453D;border-left-color:#C2453D !important}
.pn{width:16px;font-size:10px;font-weight:700;color:#c8d4e4;text-align:center;flex-shrink:0}
.prow.cur .pn{color:#2C4564}
.pi{flex:1;min-width:0}
.pname{font-size:12px;font-weight:700;color:#2C4564;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.pmeta{font-size:9px;color:#7B9AC7;margin-top:0;display:flex;gap:4px;align-items:center;flex-wrap:nowrap;overflow:hidden;white-space:nowrap}
.badge{font-size:8px;font-weight:700;padding:1px 4px;border-radius:3px;flex-shrink:0}
.b-pass{background:#D1FAE5;color:#065F46}
.b-refer{background:#FEE2E2;color:#991B1B}
.b-new{background:#E8EEF5;color:#5A7494}
.b-rep{background:#FEF9C3;color:#92400E}
.bseal{font-size:9px;color:#5A7494;font-family:monospace;font-weight:600;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:80px}
.pcb{display:flex;gap:3px;flex-shrink:0}
.cb{width:20px;height:20px;border:2px solid #c8d4e4;border-radius:5px;display:flex;align-items:center;justify-content:center;cursor:pointer;flex-shrink:0;position:relative;background:#fff}
.cb:hover{border-color:#2C4564}
.cb.on{background:#2C4564;border-color:#2C4564;color:#fff}
.cb .mk{font-size:12px;line-height:1}
.cb .cl{position:absolute;bottom:-8px;font-size:6px;font-weight:700;color:#7B9AC7;text-transform:uppercase}
.rsync{font-size:10px;font-weight:600;flex-shrink:0;color:#7B9AC7}
.rsync.done{color:#10B981}
.rsync.error{color:#DC2626}
.rsync.syncing{color:#2C4564;animation:pulse .8s infinite}
/* v3.14.13: export menu items — replaces inline onmouseenter/onmouseleave (CSP violation) */
.export-menu-item{padding:10px 14px;font-size:12px;cursor:pointer;color:#1F2937;background:#fff;transition:background .12s}
.export-menu-item:hover{background:#F3F4F6}
.rreprint{font-size:9px;font-weight:700;color:#10B981;background:#ECFDF5;border:1px solid #10B981;border-radius:8px;padding:1px 5px;letter-spacing:.02em;flex-shrink:0;cursor:help;animation:rep-pulse 2s infinite}
@keyframes rep-pulse{0%,100%{opacity:1}50%{opacity:.6}}
/* Sync selection checkboxes */
.sel-bar{display:none;padding:6px 12px;background:#F0F4F8;border-bottom:1px solid #E8EEF5;font-size:12px;color:#5A7494;align-items:center;gap:6px}
.sel-bar.show{display:flex}
.sel-bar label{cursor:pointer;font-weight:600;user-select:none}
.sel-bar .sel-count{margin-left:auto;color:#7B9AC7;font-weight:400}
.sel-bar input[type="checkbox"]{width:14px;height:14px;accent-color:#4A6FA5;cursor:pointer;flex-shrink:0}
.scb{width:14px;height:14px;accent-color:#4A6FA5;cursor:pointer;flex-shrink:0}
.sync-right{display:flex;align-items:center;gap:6px;flex-shrink:0}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.4}}

/* MODAL OVERLAY */
.modal-bg{position:fixed;inset:0;background:rgba(20,40,65,.32);z-index:100;display:none;align-items:flex-end;backdrop-filter:blur(1px)}
.modal-bg.show{display:flex}
.modal{background:#fff;width:100%;max-height:62vh;border-radius:14px 14px 0 0;display:flex;flex-direction:column;overflow:hidden;box-shadow:0 -4px 24px rgba(20,40,65,.25)}
.modal-hd{padding:14px 16px 10px;background:#fff;border-bottom:1px solid #E8EEF5;display:flex;align-items:center;gap:8px}
.modal-hd-info{flex:1;min-width:0}
.modal-name{font-size:20px;font-weight:800;color:#1a3050;line-height:1.25;word-wrap:break-word}
.modal-sub{font-size:12px;color:#7B9AC7;margin-top:3px;line-height:1.4}
.sync-pill{display:inline-flex;align-items:center;gap:4px;font-size:10px;font-weight:700;padding:3px 8px;border-radius:10px;letter-spacing:.4px;text-transform:uppercase;vertical-align:middle;margin-left:8px;font-family:-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}
.sync-pill.sp-verified{background:#D1FAE5;color:#065F46;border:1px solid #10B981}
.sync-pill.sp-synced{background:#DBEAFE;color:#1E40AF;border:1px solid #3B82F6}
.sync-pill.sp-syncing{background:#E0E7FF;color:#3730A3;border:1px solid #6366F1}
.sync-pill.sp-queued{background:#FEF3C7;color:#92400E;border:1px solid #F59E0B}
.sync-pill.sp-error{background:#FEE2E2;color:#991B1B;border:1px solid #EF4444}
.sync-pill.sp-pending{background:#F3F4F6;color:#4B5563;border:1px solid #9CA3AF}
.sync-pill.sp-na{background:#F3F4F6;color:#9CA3AF;border:1px solid #D1D5DB}
.sync-pill .sp-dot{width:6px;height:6px;border-radius:50%;display:inline-block}
.sp-verified .sp-dot{background:#10B981}
.sp-synced .sp-dot{background:#3B82F6}
.sp-syncing .sp-dot{background:#6366F1;animation:sp-pulse 1.2s ease-in-out infinite}
.sp-queued .sp-dot{background:#F59E0B}
.sp-error .sp-dot{background:#EF4444}
.sp-pending .sp-dot{background:#9CA3AF}
.sp-na .sp-dot{background:#D1D5DB}
@keyframes sp-pulse{0%,100%{opacity:1}50%{opacity:.4}}
.modal-body{padding:14px 18px 18px;overflow-y:auto;flex:1}
.modal-sec{margin-bottom:12px}
.modal-sec-title{font-size:11px;font-weight:700;color:#7B9AC7;text-transform:uppercase;letter-spacing:.6px;margin-bottom:6px;padding-bottom:4px;border-bottom:1px solid #EDF1F7}
.mfield-grid{display:grid;grid-template-columns:1fr 1fr;gap:5px}
.mfield-grid-3{display:grid;grid-template-columns:1fr 1fr 1fr;gap:5px}
.mfield-grid-4{display:grid;grid-template-columns:1fr 1fr 1fr 1fr;gap:5px}
.mf{background:#F5F7FA;border-radius:6px;padding:6px 10px;min-height:38px}
.mf-lbl{font-size:10px;color:#8DA4BF;font-weight:700;text-transform:uppercase;letter-spacing:.3px;margin-bottom:2px}
.mf-val{font-size:14px;font-weight:600;color:#1a3050;line-height:1.3}
.mf-val.mf-empty{color:#c0cfe0;font-weight:400;padding:0}
.prow.nosync{opacity:.45}
.prow.nosync:hover{opacity:.7}
.badge.b-skip{background:#E5E7EB;color:#6B7280;font-size:10px;padding:2px 6px;border-radius:4px;font-weight:700;white-space:nowrap}
/* Calendar popup */
.date-wrap{position:relative;flex:1}
.date-wrap input[type="date"]{width:100%;padding-right:32px}
.date-wrap input[type="date"]::-webkit-calendar-picker-indicator{opacity:0;position:absolute;right:0;top:0;width:32px;height:100%;cursor:pointer;z-index:1}
.date-cal-btn{position:absolute;right:8px;top:50%;transform:translateY(-50%);background:none;border:none;font-size:14px;color:#7B9AC7;cursor:pointer;padding:2px;line-height:1;z-index:2;pointer-events:auto}
.date-cal-btn:hover{color:#4A6FA5}
.cal-pop{display:none;position:absolute;top:calc(100% + 4px);left:0;z-index:200;background:#fff;border:1px solid #D4DEE8;border-radius:12px;box-shadow:0 8px 24px rgba(0,0,0,.15);padding:10px;width:240px}
.cal-pop.open{display:block}
.cal-nav{display:flex;align-items:center;justify-content:space-between;margin-bottom:6px}
.cal-nav-btn{background:none;border:none;font-size:18px;cursor:pointer;color:#4A6FA5;padding:2px 8px;border-radius:6px;font-weight:700;line-height:1}
.cal-nav-btn:hover{background:#E8EFF8}
.cal-month-lbl{font-size:11px;font-weight:700;color:#2C4564}
.cal-grid{display:grid;grid-template-columns:repeat(7,minmax(0,1fr));grid-auto-rows:28px;gap:1px;text-align:center}
.cal-hdr{font-size:8px;font-weight:700;color:#8DA4BF;padding:2px 0}
.cal-day{width:28px;height:28px;border-radius:50%;display:flex;flex-direction:column;align-items:center;justify-content:center;font-size:10px;color:#6B7D96;cursor:pointer;transition:background .12s;margin:0 auto;position:relative}
.cal-day:hover{background:#E8EFF8}
.cal-day.empty{cursor:default;height:28px;background:none}
.cal-day.has-data{color:#2C4564;font-weight:600}
.cal-day.has-data::after{content:'';position:absolute;bottom:2px;width:4px;height:4px;border-radius:50%;background:#4A6FA5}
.cal-day.is-today{font-weight:700;color:#fff;background:#4A6FA5}
.cal-day.is-today.has-data::after{background:#fff}
.cal-day.selected{box-shadow:0 0 0 1.5px #6B96C4}
.mf-val.editable{cursor:default;transition:background .15s}
.modal.edit-mode .mf-val.editable{cursor:pointer;background:rgba(59,130,246,.06);border-radius:3px}
.modal.edit-mode .mf-val.editable:hover{background:rgba(59,130,246,.12)}
.mf-edit-input{width:100%;border:none;border-bottom:2px solid #3B82F6;outline:none;font-size:14px;font-weight:600;color:#1a3050;font-family:inherit;background:transparent;padding:0}
.mf-full{grid-column:1/-1}
.result-row{display:flex;gap:6px;margin-bottom:6px}
.rbox{flex:1;text-align:center;padding:6px;border-radius:8px;border:2px solid #E8EEF5}
.rbox.pass{border-color:#10B981;background:#D1FAE5}
.rbox.refer{border-color:#EF4444;background:#FEE2E2}
.rbox-ear{font-size:10px;font-weight:700;color:#7B9AC7;text-transform:uppercase;letter-spacing:.5px;margin-bottom:2px}
.rbox-val{font-size:16px;font-weight:900}
.rbox.pass .rbox-val{color:#065F46}
.rbox.refer .rbox-val{color:#991B1B}
.modal-foot{display:flex;justify-content:space-between;align-items:center;padding:7px 12px;border-top:1px solid #E8EEF5;background:#FAFBFC;gap:4px;flex-shrink:0}
.mf-left,.mf-right{display:flex;align-items:center;gap:4px}
.mf-icon-btn{width:30px;height:30px;border:none;background:#E8EEF5;color:#5A7494;font-size:13px;font-weight:700;border-radius:7px;cursor:pointer;display:flex;align-items:center;justify-content:center;font-family:inherit;transition:background .15s,color .15s;flex-shrink:0}
.mf-icon-btn:hover{background:#c8d4e4;color:#1a3050}
.mf-icon-btn:disabled{opacity:.25;cursor:default;pointer-events:none}
.mf-icon-btn.active{background:#2C4564;color:#fff}
.mf-icon-print{font-size:15px}
.mf-close{background:transparent;color:#7B9AC7;font-size:14px}
.mf-close:hover{color:#DC2626;background:#FEE2E2}
.modal-pos{font-size:10px;color:#7B9AC7;font-weight:600;min-width:26px;text-align:center}
.mf-logo-btn{width:40px;height:40px;border-radius:50%;padding:0;border:1px solid #c8d4e4;background:#fff;cursor:pointer;display:inline-flex;align-items:center;justify-content:center}
.mf-logo-btn img{width:36px;height:36px;border-radius:50%}
.mf-logo-btn:hover{border-color:#4A6FA5}
.mpbtn{padding:7px 10px;background:#E8EEF5;border:none;border-radius:8px;font-size:10px;font-weight:700;cursor:pointer;color:#2C4564;font-family:inherit;text-align:center;transition:background .12s,transform .06s}
.mpbtn:hover{background:#c8d4e4}
.mpbtn:active{transform:translateY(1px)}
.mpbtn:disabled{opacity:.5;cursor:default}
.mpbtn-primary{background:#2C4564;color:#fff}
.mpbtn-primary:hover{background:#1a2d45}
/* v3.14.15: brand-harmonized palette — replaces ad-hoc inline colors */
/* Sync: brand navy (#4A6FA5) — positive action, visually close to primary but lighter */
.mpbtn-sync{background:#4A6FA5;color:#fff;font-weight:700}
.mpbtn-sync:hover{background:#3A5A8E}
/* Util: brand wave blue — secondary utility actions like Fix Address */
.mpbtn-util{background:#6B96C4;color:#fff;font-weight:700}
.mpbtn-util:hover{background:#5A84B2}
/* Caution: brand steel grey — manual overrides, not alarming */
.mpbtn-caution{background:#6B7D96;color:#fff;font-weight:700}
.mpbtn-caution:hover{background:#556377}
/* Danger: muted brick red — destructive actions only, visually distinct for safety */
.mpbtn-danger{background:#B05858;color:#fff;font-weight:700}
.mpbtn-danger:hover{background:#914545}
.mpbtn-sm{padding:5px 8px;font-size:9px}
.modal.edit-mode .modal-hd{border-bottom-color:#3B82F6}
.modal.edit-mode .mf-lbl{color:#3B82F6}
.rescreen-banner{background:#FEF9C3;border:1px solid #FDE68A;color:#92400E;font-size:10px;font-weight:700;text-align:center;padding:6px 10px;border-radius:6px;margin-bottom:10px;letter-spacing:.3px}

/* ACTION BAR */
.act{padding:9px 12px;background:#fff;border-top:1px solid #c8d4e4;flex:0 1 auto;min-height:0;overflow-y:auto}
.act-who{font-size:14px;font-weight:700;margin-bottom:3px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;color:#2C4564}
.act-step{font-size:12px;padding:4px 10px;border-radius:8px;margin-bottom:7px;font-weight:500}
.s1{background:#EFF6FF;color:#1E40AF}
.s2{background:#FEF9C3;color:#854D0E}
.sd{background:#D1FAE5;color:#065F46}
.ss{background:#EFF6FF;color:#1E40AF}
.abtns{display:flex;gap:6px}
.abtn{flex:1;padding:0 4px;border-radius:10px;font-size:12px;font-weight:700;border:none;cursor:pointer;font-family:inherit;text-align:center;min-height:40px;display:flex;align-items:center;justify-content:center;white-space:nowrap;line-height:1.1}
.abtn:disabled{opacity:.3;cursor:not-allowed}
/* v3.14.19: action button semantic variants — replaces inline styles */
.abtn-primary{background:#2C4564;color:#fff;flex:3}
.abtn-stop{background:#E5E7EB;color:#6B7D96;flex:1}
.abtn-util{background:#6B96C4;color:#fff;flex:1}
.abtn-secondary{background:#4A6FA5;color:#fff;flex:1}
.abtns-row2{margin-top:4px}
.mt-arrow{text-align:center;font-size:11px;font-weight:700;color:#4A6FA5;cursor:pointer;padding:3px 0;user-select:none}
.mt-panel{overflow:hidden;overflow-y:auto;transition:max-height .25s ease;max-height:72vh}
.mt-closed{max-height:0;overflow:hidden}
.abtn-ghost{background:#fff;color:#2C4564;border:1.4px solid #C9D3E2;flex:1}
.abtn-ghost:not(:disabled):hover{background:#EEF3F9;border-color:#2C4564}
.mt-cat{font-size:9px;font-weight:800;text-transform:uppercase;letter-spacing:.4px;color:#8A94A6;margin:8px 2px 4px}
.mt-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:5px;margin-bottom:2px}
.mt-tile{background:#fff;color:#2C4564;border:1px solid #E2E8F0;border-radius:9px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:4px;font-size:8.8px;font-weight:700;cursor:pointer;text-align:center;padding:8px 3px;font-family:inherit;line-height:1.1;min-height:56px}
.mt-tile:hover{background:#EEF3F9;border-color:#C9D5E5}
/* v223 (Pearl: "pag napindot sana naggrey") - instant press feedback + a short
   "working" grey so a tap never feels ignored while a panel is being built. */
.mt-tile:active{background:#D8E0EA;border-color:#A9B8CC;transform:scale(.97)}
.mt-tile.mt-busy{background:#D8E0EA;border-color:#A9B8CC;color:#6B7A90;pointer-events:none}
.mt-tile.mt-busy .ti{stroke:#6B7A90}
.mt-tile.mt-busy span{opacity:.75}
.mt-tile .ti{width:17px;height:17px;fill:none;stroke:#2C4564;stroke-width:1.7;stroke-linecap:round;stroke-linejoin:round}
.rowacts{display:flex;gap:4px;flex-shrink:0;margin:0 2px}
.rowbtn{width:25px;height:25px;border:1.3px solid #C9D3E2;background:#fff;color:#2C4564;border-radius:7px;display:flex;align-items:center;justify-content:center;cursor:pointer;padding:0}
.rowbtn:hover{background:#EEF3F9;border-color:#2C4564}
.rowbtn svg{width:15px;height:15px;fill:none;stroke:currentColor;stroke-width:1.8;stroke-linecap:round;stroke-linejoin:round}
.support-box{background:#fff;border:1px solid #c8d4e4;border-radius:10px;padding:8px;margin-top:6px}
.support-box select,.support-box textarea{width:100%;border:1px solid #c8d4e4;border-radius:8px;padding:6px 8px;font-size:12px;font-family:inherit;margin-bottom:6px;box-sizing:border-box}
.support-links{display:flex;gap:10px}
.support-links a{font-size:12px;font-weight:700;color:#4A6FA5;text-decoration:none}
/* v3.14.19: action button hover states for polish */
.abtn-primary:not(:disabled):hover{background:#1a2d45}
.abtn-util:not(:disabled):hover{background:#5A84B2}
.abtn-secondary:not(:disabled):hover{background:#3A5A8E}
.ab1{background:#2C4564;color:#fff}
.ab2{background:#10B981;color:#fff}
.ab3{background:#E8EEF5;color:#5A7494;font-size:10px}

/* Short screens (small laptops, ~768px tall or less) — shrink the patient
   card more so the list peeks through above it even on cramped screens */
@media (max-height: 720px) {
  .modal{max-height:52vh}
  .modal-hd{padding:10px 14px 8px}
  .modal-name{font-size:17px}
  .modal-body{padding:10px 14px 14px}
  .modal-sec{margin-bottom:8px}
}
@media (max-height: 620px) {
  .modal{max-height:46vh}
  .modal-name{font-size:15px}
}

/* ==================== RESPONSIVE / COMPACT ==================== */
/* Narrow sidepanel (13" / 15" laptops — typically <360px wide) */
@media (max-width: 380px) {
  body{font-size:12px}
  .hd{padding:7px 10px}
  .ht{font-size:13px}
  .hs{font-size:9px}
  .tbadge{font-size:9px;padding:2px 6px}

  .topbar{padding:6px 8px}
  .trow{gap:4px;margin-bottom:4px}
  .trow input{padding:7px 8px;font-size:12px;border-radius:8px}
  .tbtn{padding:7px 10px;font-size:11px;border-radius:8px}

  .prog{padding:4px 8px 3px}
  .fb{padding:2px 7px;font-size:9px}

  .stat{padding:5px 8px;font-size:11px}

  .prow{padding:7px 8px;gap:6px}
  .pn{width:18px;font-size:10px}
  .pname{font-size:13px}
  .pmeta{font-size:10px;gap:3px}
  .badge{font-size:9px;padding:1px 4px}
  .bseal{font-size:10px;max-width:70px}

  .modal-hd{padding:10px 12px 8px}
  .modal-name{font-size:17px}
  .modal-sub{font-size:11px}
  .modal-body{padding:10px 12px 14px}
  .modal-sec{margin-bottom:8px}
  .modal-sec-title{font-size:10px;margin-bottom:4px}
  .mfield-grid{gap:3px}
  .mfield-grid-3{grid-template-columns:1fr 1fr;gap:3px}
  .mfield-grid-4{grid-template-columns:1fr 1fr;gap:3px}
  .mf{padding:5px 8px;min-height:32px}
  .mf-lbl{font-size:9px}
  .mf-val{font-size:12px}
  .modal-foot{padding:5px 8px;gap:3px;flex-wrap:wrap}
  .mf-left{flex-wrap:wrap;gap:3px}
  .mf-icon-btn{width:26px;height:26px;font-size:11px;border-radius:5px}
  .mpbtn{padding:5px 7px;font-size:9px;border-radius:6px}
  .mpbtn-sm{padding:4px 6px;font-size:8px}

  .act{padding:6px 8px}
  .act-who{font-size:12px}
  .act-step{font-size:11px;padding:3px 8px;margin-bottom:5px}
  .abtn{padding:8px 4px;font-size:11px;border-radius:8px}
  .ab3{font-size:9px}

  .si{padding:10px 10px}
  .sinp{padding:8px 10px;font-size:12px;border-radius:8px}
  .sbtn{padding:6px 10px;font-size:11px;border-radius:6px}
  .slbl{font-size:10px}
  .shint{font-size:10px}

  .sel-bar{padding:4px 8px;font-size:11px}
  .slog{font-size:9px;padding:2px 8px}

  /* Calendar compact */
  .cal-pop{width:220px;padding:8px}
  .cal-day{width:24px;height:24px;font-size:9px}
}

/* Even narrower (very small sidepanel, <300px) */
@media (max-width: 300px) {
  .pname{font-size:12px}
  .pmeta{font-size:9px}
  .modal-name{font-size:15px}
  .mfield-grid,.mfield-grid-3,.mfield-grid-4{grid-template-columns:1fr}
  .modal-foot{flex-direction:column;align-items:stretch}
  .mf-left,.mf-right{justify-content:center}
  .result-row{flex-direction:column;gap:4px}
}

/* Tall/comfortable — restore spacing when there's enough width */
@media (min-width: 420px) {
  .prow{padding:12px 14px}
  .pname{font-size:15px}
  .modal-body{padding:16px 20px 20px}
  .act{padding:10px 14px}
  .topbar{padding:10px 14px}
}


.status-pill{display:inline-flex;align-items:center;gap:6px;padding:4px 10px;border-radius:12px;font-size:11px;font-weight:600;cursor:pointer;user-select:none;transition:all .15s}
.status-pill .sp-dot{width:7px;height:7px;border-radius:50%;display:inline-block}
.status-ok{background:rgba(16,185,129,.15);color:#10B981;border:1px solid rgba(16,185,129,.3)}
.status-ok .sp-dot{background:#10B981}
.status-warn{background:rgba(245,158,11,.18);color:#F59E0B;border:1px solid rgba(245,158,11,.35)}
.status-warn .sp-dot{background:#F59E0B}
.status-err{background:rgba(239,68,68,.18);color:#F87171;border:1px solid rgba(239,68,68,.35)}
.status-err .sp-dot{background:#F87171}
.hdr-menu{position:absolute;top:58px;right:12px;background:#fff;border:1px solid #E5E7EB;border-radius:8px;box-shadow:0 8px 24px rgba(0,0,0,.15);min-width:200px;z-index:9999;padding:6px 0}
.hdr-menu-item{display:block;width:100%;padding:10px 14px;background:none;border:none;text-align:left;font-size:13px;color:#2C4564;cursor:pointer}
.hdr-menu-item:hover{background:#EEF2F7}
.hdr-menu-footer{padding:8px 14px;border-top:1px solid #EEF2F7;font-size:10px;color:#6B7D96;margin-top:4px}

/* v1.2.1 */
.sbtn-danger{background:#B91C1C;color:#fff;border-color:#B91C1C}
.stbl{width:100%;border-collapse:collapse;font-size:11px;margin:4px 0}.stbl th,.stbl td{border-bottom:1px solid #E5E7EB;padding:3px 4px;text-align:left}.stbl th{color:#6B7280;font-weight:600}

/* ===========================================================================
   v1.8.1 — the classic day screen, fitted to this app's markup.
   classic.css above is the old side panel's own stylesheet, carried over
   unchanged. These rules only place the few controls the old panel did not
   have in this exact shape; they change no colour and no type.
   =========================================================================== */
.clHead{display:flex;align-items:center;gap:10px;margin:4px 0 2px}
.clLock{flex:0 0 auto;width:34px;height:34px;line-height:1;font-size:17px;padding:0;
  border:1px solid var(--as-line,#c8d4e4);border-radius:10px;background:#fff;cursor:pointer}
.clLock:hover{background:#E8EEF5}
.clWho{display:flex;flex-direction:column;min-width:0}
.clWho strong{font-size:15px;line-height:1.2;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.clHead .pill{margin-left:auto;flex:0 0 auto}

/* the date bar reads left to right, as it always did: ◀ date ▶ Load Day */
.dlBar .date-wrap{display:flex;align-items:center;gap:8px;flex-wrap:nowrap;margin-bottom:10px}
.dlBar .date-wrap input[type=date]{flex:1 1 auto;min-width:0;margin:0}
.dlBar .date-wrap .abtn{flex:0 0 auto;width:auto;margin:0;padding:10px 12px}
.dlBar .date-wrap #dlLoad{padding:10px 16px;font-weight:600}
@media (max-width:420px){ .dlBar .date-wrap #dlLoad{padding:10px 12px} }

/* the action rows sit two across, like the old "Do the day" bar */
.abtns{display:grid;grid-template-columns:1fr 1fr;gap:8px;margin:0 0 8px}
.abtn{width:100%;margin:0}
.mt-cat{margin:14px 0 6px}
.mt-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:8px}
.mt-panel.mt-closed{display:none}
.mt-arrow{cursor:pointer;text-align:center;padding:10px;user-select:none}

/* The old panel's primary action was filled navy, not outlined. The skin's own
   .abtn rule is more specific than classic.css's, so say it at the same weight. */
.skin-audiospace .abtn.abtn-primary,.abtn.abtn-primary{
  background:var(--brand-primary,#2C4564);border-color:var(--brand-primary,#2C4564);color:#fff}
.skin-audiospace .abtn.abtn-primary:hover,.abtn.abtn-primary:hover{background:#1a2d45;border-color:#1a2d45}
.skin-audiospace .abtn.abtn-util,.abtn.abtn-util{background:#fff;color:var(--brand-primary,#2C4564)}

/* On a narrow phone the four controls do not fit on one line, and forcing them
   pushed the whole page sideways. The arrows and the date stay together; Load Day
   takes the next line, full width, where a thumb finds it more easily anyway. */
.dlBar .date-wrap{flex-wrap:wrap}
.dlBar .date-wrap input[type=date]{flex:1 1 120px}
@media (max-width:480px){
  .dlBar .date-wrap #dlLoad{flex:1 0 100%;margin-top:8px}
}

/* ---- The month at a glance (v1.8.2) ----------------------------------
   Pearl: "yung apple calendar na may marker? need natin yung markers to
   see anung days may activities." A day with anything on it is tinted and
   carries up to four dots: one per screener who worked, grey for babies
   still waiting to be sent, outlined for a day with registrations only. */
.calWeek{display:grid;grid-template-columns:repeat(7,1fr);gap:5px;margin-top:14px;
  font-size:.72rem;font-weight:700;color:#8a93a0;text-align:center;letter-spacing:.04em}
.calendar .day{min-height:66px;display:flex;flex-direction:column;align-items:center;
  justify-content:flex-start;gap:0;padding:8px 2px 6px;background:#fff;
  border:1px solid #e3e8ef;border-radius:12px;font:inherit;cursor:pointer}
.calendar .day b{font-weight:600;font-size:1rem;line-height:1.5rem}
.calendar .day.dayPad{border:0;background:transparent;box-shadow:none;cursor:default;min-height:0}
.calendar .day.hasData{background:color-mix(in srgb,var(--brand-primary,#2C4564) 7%,white);
  border-color:color-mix(in srgb,var(--brand-primary,#2C4564) 22%,white)}
.calendar .day.hasData b{font-weight:800}
.calendar .day.isToday b{background:var(--brand-primary,#2C4564);color:#fff;
  width:1.75rem;height:1.75rem;line-height:1.75rem;border-radius:50%;text-align:center}
.calendar .day:hover{border-color:var(--brand-primary,#2C4564)}
.calendarDots{min-height:9px;justify-content:center}
.calDotWaiting{background:#9aa3af}
.calDotReg{background:transparent;border:1.5px solid var(--brand-primary,#2C4564)}
#calNote{color:#6b7280;font-size:.85rem;margin:10px 2px 0}
@media (max-width:420px){.calendar .day{min-height:56px;padding:6px 1px 5px}
  .calendar .day b{font-size:.92rem}.calDot{width:6px;height:6px}}

/* ---- Facilities, each with its own registration QR (v1.8.2) ---- */
.facCard{display:flex;gap:14px;align-items:flex-start}
.facQR{flex:0 0 108px;width:108px;height:108px;background:#fff;border:1px solid #e3e8ef;
  border-radius:10px;padding:6px;display:flex;align-items:center;justify-content:center}
.facQR svg{width:100%;height:100%;display:block}
.facQR.facQROff{color:#9aa3af;font-size:.72rem;text-align:center;padding:10px;line-height:1.3}
.facBody{flex:1 1 auto;min-width:0}
.facBody h3{margin:0 0 2px;font-size:1.02rem}
.facLinks{display:flex;flex-wrap:wrap;gap:8px;margin-top:10px}
.facLinks button{padding:8px 12px;font-size:.86rem}
.facTag{display:inline-block;font-size:.72rem;font-weight:700;padding:3px 8px;border-radius:99px;
  background:#eef2f7;color:#6b7280;margin-left:6px}
.facTag.facOn{background:#e6f4ec;color:#16703a}
.facTag.facOff{background:#fdecec;color:#b42318}
@media (max-width:420px){.facCard{flex-direction:column}.facQR{flex:0 0 auto;width:132px;height:132px}}

/* Who screened on the day you tapped */
.calWho{list-style:none;margin:10px 0 0;padding:0}
.calWho li{display:flex;align-items:center;gap:9px;padding:9px 0;border-bottom:1px solid #eef1f5}
.calWho li:last-child{border:0}
.calWho b{font-weight:600}
.calWho span{margin-left:auto;color:#6b7280;font-size:.85rem}

/* The sticker, typed where the screener is already looking (v1.8.2) */
.pcSeal{display:flex;flex-wrap:wrap;align-items:center;gap:8px;margin-top:8px;
  padding:10px;border-radius:8px;background:#F5F7FA}
.pcSeal #pcSealInput{flex:1 1 180px;min-width:0;margin:0;padding:9px 12px;
  border:1.5px solid #2C6FAC;border-radius:6px;font-family:ui-monospace,Menlo,Consolas,monospace;
  font-size:14px;letter-spacing:.04em;background:#fff}
.pcSealBtn{flex:0 0 auto;padding:9px 16px;background:#059669;color:#fff;border:0;
  border-radius:6px;font-weight:700;font-size:13px}
.pcSealBtn:disabled{opacity:.6}
.pcSeal .hint{flex:1 0 100%;margin:0}

/* "Applicable starting date" with a Change date button (v1.8.2) */
.rtWhen{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:12px 0 4px;
  padding:10px 12px;border-radius:8px;background:#F5F7FA}
.rtWhen span{font-size:.82rem;font-weight:700;color:#8DA4BF;text-transform:uppercase;letter-spacing:.3px}
.rtWhen b{font-size:1.02rem;font-weight:700}
.rtWhen button{margin-left:auto;padding:7px 12px;font-size:.84rem}
.rtWhen input[type=date]{flex:1 0 160px;margin:0}

/* The facility line is a filter, not a gate (v1.8.2).
   Pearl saw the padlock and read it as "still locked to Memees". It never
   locked anything — it only said which facility the screen was showing. */
.clHead{align-items:center}
.clShowing{font-size:.7rem;font-weight:700;color:#8DA4BF;text-transform:uppercase;
  letter-spacing:.5px;display:block;margin-bottom:1px}
.clSwap{margin-left:auto;flex:0 0 auto;padding:7px 14px;font-size:.85rem;font-weight:600;
  border:1px solid #c8d4e4;border-radius:8px;background:#fff;color:var(--brand-primary,#2C4564)}
.clSwap:hover{border-color:var(--brand-primary,#2C4564)}

/* Clinic rules (v1.8.2) */
.ruleRow .toggleRow{align-items:flex-start;gap:12px}
.ruleRow .toggleRow input{margin-top:4px}
.ruleNow{margin:10px 0 0;padding:8px 12px;border-radius:8px;background:#F5F7FA;
  font-weight:600;font-size:.9rem}
.plainList{margin:10px 0 0;padding-left:20px}
.plainList li{margin:7px 0;line-height:1.5}

/* Where results are filed (v1.8.2) */
.pathBox{background:#F5F7FA;border-radius:8px;padding:12px 14px;margin:8px 0 0;
  font-family:ui-monospace,Menlo,Consolas,monospace;font-size:.8rem;line-height:1.7;
  white-space:pre;overflow-x:auto}

/* The four doors off the calendar (v1.8.2) */
.homeGrid{display:grid;grid-template-columns:1fr 1fr;gap:10px;margin-top:4px}
.homeGrid button{padding:16px 12px;font-weight:600;text-align:center;line-height:1.35}
@media (max-width:420px){.homeGrid{grid-template-columns:1fr}}

/* ---- The page must scroll (v1.8.2) -------------------------------------
   Pearl, 2-Nov: "di ko mascroll down ang page."
   My fault: I copied the old side panel's stylesheet verbatim, and line 3
   carries body{height:100vh;overflow:hidden}. In a Chrome side panel that is
   right — the panel never scrolls as a whole, its inner list does. In a web
   page it means anything past the first screenful simply cannot be reached.
   Owner / Admin is long, so it was unusable.                              */
body{height:auto;min-height:100vh;overflow:visible;overflow-y:auto}

/* Tool groups (v1.8.2) */
.tlGroup{margin:22px 2px 8px;font-size:1.05rem;font-weight:700}
.tlGroup span{display:block;font-size:.82rem;font-weight:400;color:#8DA4BF;margin-top:2px}
.tlGroup:first-child{margin-top:8px}

/* One mark per tool, so the eye finds it before it reads (v1.8.2) */
.toolBtn{position:relative;padding-left:46px}
.tlIcon{position:absolute;left:14px;top:50%;transform:translateY(-50%);
  font-size:19px;font-style:normal;line-height:1;color:var(--brand-primary,#2C4564);opacity:.75}