:root{--font-primary: "Plus Jakarta Sans", "Inter", system-ui, -apple-system, sans-serif;--bg-dark-primary: #0B132B;--bg-dark-secondary: #1C2541;--bg-dark-card: #151D36;--accent-blue: #3A86FF;--accent-purple: #7209B7;--accent-emerald: #10B981;--accent-amber: #F59E0B;--accent-rose: #EF4444;--bg-light: #F8FAFC;--card-light: #FFFFFF;--text-dark: #0F172A;--text-muted: #64748B;--border-light: #E2E8F0;--shadow-sm: 0 1px 3px rgba(0,0,0,.1);--shadow-md: 0 4px 12px rgba(0,0,0,.08);--shadow-lg: 0 10px 25px rgba(0,0,0,.15);--radius-sm: 8px;--radius-md: 12px;--radius-lg: 18px}*{box-sizing:border-box;margin:0;padding:0;font-family:var(--font-primary)}body{background-color:var(--bg-light);color:var(--text-dark);min-height:100vh;-webkit-font-smoothing:antialiased}.superadmin-container{display:flex;min-height:100vh;background-color:#f8fafc}.sidebar-superadmin{width:260px;background-color:#0b132b;color:#fff;padding:24px;display:flex;flex-direction:column}.content-superadmin{flex:1;padding:32px;overflow-y:auto}.dark-theme-container{display:flex;min-height:100vh;background-color:var(--bg-dark-primary);color:#f8fafc}.sidebar-dark{width:260px;background-color:var(--bg-dark-secondary);color:#fff;padding:24px;display:flex;flex-direction:column}.content-dark{flex:1;padding:32px;overflow-y:auto}.card-light{background:#fff;border:1px solid var(--border-light);border-radius:var(--radius-md);padding:24px;box-shadow:var(--shadow-sm)}.card-dark{background:var(--bg-dark-card);border:1px solid rgba(255,255,255,.08);border-radius:var(--radius-md);padding:24px;box-shadow:var(--shadow-md)}.grid-4{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-bottom:24px}.grid-2{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:24px;margin-bottom:24px}.data-table{width:100%;border-collapse:collapse;margin-top:16px}.data-table th,.data-table td{padding:14px 18px;text-align:left;border-bottom:1px solid var(--border-light)}.data-table th{background-color:#f1f5f9;font-weight:600;font-size:.85rem;text-transform:uppercase;color:var(--text-muted)}.dark-theme-container .data-table th{background-color:var(--bg-dark-secondary);border-bottom:1px solid rgba(255,255,255,.1);color:#94a3b8}.dark-theme-container .data-table td{border-bottom:1px solid rgba(255,255,255,.05)}.badge{display:inline-flex;align-items:center;padding:4px 10px;border-radius:999px;font-size:.75rem;font-weight:600}.badge-success{background:#10b98126;color:#10b981}.badge-warning{background:#f59e0b26;color:#f59e0b}.badge-danger{background:#ef444426;color:#ef4444}.badge-info{background:#3a86ff26;color:#3a86ff}.btn{display:inline-flex;align-items:center;justify-content:center;gap:8px;padding:10px 18px;border-radius:var(--radius-sm);font-weight:600;font-size:.9rem;border:none;cursor:pointer;transition:all .2s ease}.btn-primary{background:var(--accent-blue);color:#fff}.btn-primary:hover{opacity:.9;transform:translateY(-1px)}.btn-success{background:var(--accent-emerald);color:#fff}.btn-danger{background:var(--accent-rose);color:#fff}.btn-outline{background:transparent;border:1px solid var(--border-light);color:var(--text-dark)}.dark-theme-container .btn-outline{border:1px solid rgba(255,255,255,.2);color:#fff}@media print{.sidebar-superadmin,.sidebar-dark,.btn,header{display:none!important}.content-superadmin,.content-dark{padding:0!important}body{background:#fff!important;color:#000!important}}:root{--sidebar-bg: linear-gradient(180deg, #181B2B 0%, #111320 100%);--sidebar-hover: rgba(255, 255, 255, .06);--primary-accent: #6366F1;--primary-gradient: linear-gradient(135deg, #6366F1 0%, #8B5CF6 100%);--bg-main: #F4F6FB;--card-bg: #FFFFFF;--border-light: #E2E8F0;--text-dark: #0F172A;--text-muted: #64748B;--text-sidebar: #94A3B8;--success-bg: #DCFCE7;--success-text: #15803D;--info-bg: #DBEAFE;--info-text: #1E40AF;--warning-bg: #FEF3C7;--warning-text: #B45309;--danger-bg: #FEE2E2;--danger-text: #B91C1C;--font-family: "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif}*{box-sizing:border-box;margin:0;padding:0}body{background-color:var(--bg-main);color:var(--text-dark);font-family:var(--font-family);line-height:1.5;overflow-x:hidden}#login-page-view,#staff-login-view{min-height:100vh;min-height:100dvh;width:100%;display:flex;align-items:center;justify-content:center;background:radial-gradient(circle at 50% 15%,#1e1b4b,#0f172a 65%,#0b0f19);padding:1.5rem;box-sizing:border-box;overflow-y:auto;-webkit-overflow-scrolling:touch}.login-wrapper{display:flex;max-width:960px;width:100%;background:#fff;border-radius:24px;box-shadow:0 25px 60px -15px #000000a6,0 0 0 1px #ffffff1a;overflow:hidden}.login-brand-side{flex:1;background:linear-gradient(180deg,#181b2b,#111320);padding:3rem 2.5rem;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid #23273B}.login-form-side{flex:1.15;background:#fff;padding:3rem 2.5rem;display:flex;flex-direction:column;justify-content:center}.feature-badge{display:flex;align-items:center;gap:.85rem;background:#ffffff0d;padding:.85rem 1rem;border-radius:12px;border:1px solid rgba(255,255,255,.08);font-size:.85rem;color:#f8fafc}.app-layout{display:flex;min-height:100vh;width:100vw}.sidebar{width:280px;background:var(--sidebar-bg);padding:1.5rem;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid #23273B;flex-shrink:0}.sidebar-header{display:flex;align-items:center;gap:.85rem;margin-bottom:2rem;padding-bottom:1rem;border-bottom:1px solid rgba(255,255,255,.06)}.sidebar-logo-icon{background:var(--primary-gradient);width:44px;height:44px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;color:#fff;box-shadow:0 4px 12px #6366f159}.sidebar-title{color:#fff;font-weight:700;font-size:1.05rem}.sidebar-subtitle{color:var(--text-sidebar);font-size:.72rem;font-weight:400}.sidebar-menu{display:flex;flex-direction:column;gap:.35rem}.nav-item{display:flex;align-items:center;justify-content:space-between;padding:.75rem 1rem;border-radius:12px;color:var(--text-sidebar);text-decoration:none;font-weight:500;font-size:.9rem;cursor:pointer;transition:all .2s ease;border:none;background:transparent;width:100%;text-align:left}.nav-item:hover{background:var(--sidebar-hover);color:#fff}.nav-item.active{background:var(--primary-gradient);color:#fff;font-weight:600;box-shadow:0 4px 15px #6366f166}.nav-item-content{display:flex;align-items:center;gap:.75rem}.sidebar-footer-profile{background:#ffffff0a;border:1px solid rgba(255,255,255,.06);padding:.75rem;border-radius:14px;display:flex;align-items:center;justify-content:space-between;color:#fff;cursor:pointer;transition:background .2s ease}.sidebar-footer-profile:hover{background:#ffffff14}.avatar-circle{width:36px;height:36px;border-radius:50%;background:#312e81;color:#818cf8;font-weight:700;font-size:.85rem;display:flex;align-items:center;justify-content:center}.main-wrapper{flex:1;background:var(--bg-main);display:flex;flex-direction:column;overflow-y:auto}.top-header{background:#fff;border-bottom:1px solid var(--border-light);padding:1rem 2rem;display:flex;justify-content:space-between;align-items:center}.breadcrumb{display:flex;align-items:center;gap:.5rem;font-size:.85rem;color:var(--text-muted)}.top-header-actions{display:flex;align-items:center;gap:1rem}.icon-btn{background:#f1f5f9;border:none;width:38px;height:38px;border-radius:10px;display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-muted);position:relative;transition:background .2s ease}.icon-btn:hover{background:#e2e8f0;color:var(--text-dark)}.notification-badge{position:absolute;top:-4px;right:-4px;background:#ef4444;color:#fff;font-size:.7rem;font-weight:800;min-width:18px;height:18px;border-radius:9px;display:flex;align-items:center;justify-content:center;padding:0 4px;border:2px solid #FFFFFF;box-shadow:0 2px 4px #ef444466}.notification-dropdown{position:absolute;top:48px;right:0;width:360px;background:#fff;border:1px solid var(--border-light);border-radius:14px;box-shadow:0 20px 25px -5px #00000026,0 10px 10px -5px #0000000a;display:none;flex-direction:column;z-index:1000;overflow:hidden}.notification-dropdown.open{display:flex}.notification-dropdown-header{padding:.85rem 1.1rem;background:#f8fafc;border-bottom:1px solid var(--border-light);display:flex;justify-content:space-between;align-items:center;font-size:.85rem}.notification-dropdown-body{max-height:340px;overflow-y:auto;display:flex;flex-direction:column}.notification-item{padding:.85rem 1.1rem;border-bottom:1px solid #F1F5F9;display:flex;gap:.75rem;align-items:flex-start;transition:background .15s ease;cursor:pointer}.notification-item:hover{background:#f8fafc}.notification-item.unread{background:#eff6ff}.notification-icon{width:32px;height:32px;border-radius:8px;background:#eef2ff;color:#4f46e5;display:flex;align-items:center;justify-content:center;font-size:.95rem;flex-shrink:0}.notification-content{flex:1}.notification-title{font-weight:700;font-size:.82rem;color:var(--text-dark);margin-bottom:.15rem}.notification-text{font-size:.78rem;color:var(--text-muted);line-height:1.3}.notification-time{font-size:.7rem;color:#94a3b8;margin-top:.3rem}.toast-popup{background:#1e293b;color:#fff;padding:.85rem 1.1rem;border-radius:12px;box-shadow:0 10px 15px -3px #0003;display:flex;align-items:center;gap:.75rem;border-left:4px solid #6366F1;animation:slideIn .3s ease forwards;max-width:340px;font-size:.85rem}@keyframes slideIn{0%{transform:translate(100%);opacity:0}to{transform:translate(0);opacity:1}}.workspace-content{padding:2rem;max-width:1400px;width:100%;margin:0 auto}.tab-content{display:none!important}.tab-content.active{display:block!important}.staff-tab-content{display:none!important}.staff-tab-content.active{display:block!important}.page-title-row{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.page-title-h1{font-size:1.75rem;font-weight:800;color:var(--text-dark)}.page-subtitle{font-size:.88rem;color:var(--text-muted);margin-top:.2rem}.stat-cards-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;margin-bottom:1.75rem}.stat-card{background:#fff;border:1px solid var(--border-light);border-radius:16px;padding:1.25rem 1.5rem;display:flex;align-items:center;gap:1.25rem;box-shadow:0 2px 6px #00000005}.stat-icon-wrapper{width:48px;height:48px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:1.2rem}.stat-val{font-size:1.6rem;font-weight:800;color:var(--text-dark)}.stat-lbl{font-size:.8rem;color:var(--text-muted)}.table-card{background:#fff;border:1px solid var(--border-light);border-radius:16px;box-shadow:0 4px 12px #00000008;overflow:hidden}.table-filter-bar{padding:1.25rem 1.5rem;border-bottom:1px solid var(--border-light);display:flex;flex-wrap:wrap;gap:1rem;align-items:center;justify-content:space-between}.search-input-box{background:#f8fafc;border:1px solid var(--border-light);padding:.55rem 1rem;border-radius:10px;font-size:.88rem;color:var(--text-dark);outline:none;min-width:280px}.search-input-box:focus{border-color:var(--primary-accent);background:#fff}.data-table{width:100%;border-collapse:collapse;text-align:left;font-size:.88rem}.data-table th{background:#f8fafc;color:var(--text-muted);font-weight:600;padding:.85rem 1.25rem;border-bottom:1px solid var(--border-light)}.data-table td{padding:1rem 1.25rem;border-bottom:1px solid #F1F5F9;color:var(--text-dark);vertical-align:middle}.data-table tr:last-child td{border-bottom:none}.data-table tr:hover{background:#f8fafc}.badge-pill{display:inline-flex;align-items:center;gap:.4rem;padding:.3rem .75rem;border-radius:20px;font-size:.8rem;font-weight:600}.badge-login{background:var(--success-bg);color:var(--success-text)}.badge-created{background:var(--info-bg);color:var(--info-text)}.badge-init{background:#f1f5f9;color:#475569}.btn-primary-purple{background:var(--primary-gradient);color:#fff;border:none;padding:.6rem 1.2rem;border-radius:10px;font-weight:600;font-size:.88rem;cursor:pointer;display:inline-flex;align-items:center;gap:.5rem;box-shadow:0 4px 12px #6366f14d;transition:transform .15 ease}.btn-primary-purple:hover{transform:translateY(-1px)}.modal-overlay,.modal-backdrop{position:fixed;top:0;left:0;right:0;bottom:0;background:#0f172aa6;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:9999;visibility:hidden;opacity:0;pointer-events:none;transition:all .2s ease}.modal-overlay.open,.modal-backdrop.open{visibility:visible;opacity:1;pointer-events:auto}.modal-card{background:#fff;border:1px solid var(--border-light);width:90%;max-width:720px;max-height:90vh;overflow-y:auto;border-radius:20px;padding:2rem;color:var(--text-dark);box-shadow:0 25px 50px -12px #0f172a40}.modal-card input,.modal-card select,.modal-card textarea,.modal-card .search-input-box{min-width:0!important;max-width:100%!important;box-sizing:border-box!important}.form-group{display:flex;flex-direction:column;gap:.35rem}.form-label{font-size:.8rem;font-weight:600;color:var(--text-muted)}.qr-code-graphic-card{background:#fff;padding:1.5rem;border-radius:20px;display:inline-flex;flex-direction:column;align-items:center;gap:1rem;box-shadow:0 15px 35px #0006;position:relative;margin-bottom:1.5rem;border:4px solid rgba(99,102,241,.2)}.qr-scan-line{position:absolute;top:0;left:0;right:0;height:3px;background:linear-gradient(90deg,transparent,#10B981,transparent);box-shadow:0 0 10px #10b981;animation:scanLaser 2.5s infinite ease-in-out}@keyframes scanLaser{0%{top:10%;opacity:0}25%{opacity:1}75%{opacity:1}to{top:90%;opacity:0}}.camera-view-container{width:100%;height:280px;background:#000;border-radius:16px;position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;border:2px solid var(--primary-accent)}#camera-video-feed{width:100%;height:100%;object-fit:cover}.camera-reticle{position:absolute;width:200px;height:200px;border:2px dashed rgba(255,255,255,.7);border-radius:16px;box-shadow:0 0 0 9999px #00000080;pointer-events:none}.mobile-device-frame{width:360px;height:720px;background:#181b2b;border-radius:40px;border:12px solid #0F172A;box-shadow:0 25px 50px -12px #00000080,0 0 30px #6366f133;margin:1rem auto;position:relative;overflow:hidden;display:flex;flex-direction:column}.mobile-status-bar{height:36px;display:flex;justify-content:space-between;align-items:center;padding:0 1.5rem;color:#fff;font-size:.75rem;font-weight:600}.mobile-viewport{flex:1;background:#f4f6fb;overflow-y:auto;padding:1.25rem;display:flex;flex-direction:column;gap:1rem}.side-mobile-panel{width:380px;background:#f8fafc;border-left:1px solid var(--border-light);padding:1.25rem .75rem;display:flex;flex-direction:column;align-items:center;flex-shrink:0}.side-mobile-header{font-size:.85rem;font-weight:700;color:var(--text-muted);margin-bottom:.75rem;align-self:flex-start;padding-left:.5rem}@media (max-width: 1280px){.side-mobile-panel{display:none}}.office-policy-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem;margin-bottom:1.25rem}.office-policy-layout{display:flex;gap:1.5rem;align-items:center}.office-hq-badge{width:160px;min-height:110px;border-radius:14px;overflow:hidden;border:1px solid #E2E8F0;flex-shrink:0;background:linear-gradient(135deg,#1e293b,#0f172a);display:flex;flex-direction:column;align-items:center;justify-content:center;color:#fff;text-align:center;padding:.75rem;box-sizing:border-box}.office-hq-icon{font-size:2rem;margin-bottom:4px}.office-hq-text{display:flex;flex-direction:column;align-items:center}.office-hq-name{font-size:.8rem;font-weight:700;color:#38bdf8;word-break:break-word;line-height:1.25}.office-hq-sub{font-size:.7rem;color:#94a3b8;margin-top:2px}.office-policy-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;flex:1}.policy-stat-item{display:flex;flex-direction:column;gap:2px;min-width:0}.policy-stat-label{color:#64748b;font-size:.75rem;font-weight:500;white-space:nowrap}.policy-stat-val{color:#0f172a;font-size:.88rem;font-weight:700;word-break:break-word}.dashboard-summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:1.5rem;margin-bottom:2rem}.responsive-two-col-grid{display:grid;grid-template-columns:1fr 1fr;gap:1.25rem}.admin-mobile-top-header,.staff-mobile-top-header,.admin-mobile-bottom-nav,.staff-mobile-bottom-nav{display:none}@media (max-width: 1024px){#authenticated-app-view .app-layout{flex-direction:column}#authenticated-app-view .sidebar{width:100%;border-right:none;border-bottom:1px solid #23273B;padding:1rem;box-sizing:border-box}#authenticated-app-view .sidebar-header{margin-bottom:.75rem;padding-bottom:.5rem}#authenticated-app-view .sidebar-menu{display:flex;overflow-x:auto;gap:.5rem;padding-bottom:.5rem;-webkit-overflow-scrolling:touch}#authenticated-app-view .sidebar-menu .nav-item{white-space:nowrap;margin-bottom:0;flex-shrink:0}#authenticated-app-view .sidebar-footer-profile{display:none}.main-wrapper{padding:1rem;width:100%;box-sizing:border-box}.stat-cards-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr))!important}div[style*="grid-template-columns: 2fr 1fr"]{grid-template-columns:1fr!important}}@media (max-width: 900px){#authenticated-app-view,#authenticated-staff-view{background:#f8fafc!important;min-height:100vh}.app-layout,#authenticated-app-view .app-layout,#authenticated-staff-view .app-layout{display:block!important;min-height:auto!important;width:100%!important;padding-bottom:75px!important}.sidebar,.top-header,#authenticated-app-view .sidebar,#authenticated-app-view .top-header,#authenticated-staff-view .sidebar,#authenticated-staff-view .top-header,#authenticated-app-view[style*="display: none"],#authenticated-app-view[style*="display: none"] *,#authenticated-staff-view[style*="display: none"],#authenticated-staff-view[style*="display: none"] *{display:none!important}.admin-mobile-top-header,.staff-mobile-top-header,#authenticated-app-view .admin-mobile-top-header,#authenticated-staff-view .staff-mobile-top-header{display:flex!important;justify-content:space-between!important;align-items:center!important;padding:.75rem 1rem!important;background:#0f172a!important;color:#fff!important;position:sticky!important;top:0!important;z-index:999!important;box-shadow:0 4px 15px #00000040!important}.main-wrapper,#authenticated-app-view .main-wrapper,#authenticated-staff-view .main-wrapper{width:100%!important;padding:0!important;margin:0!important}.workspace-content,#authenticated-app-view .workspace-content,#authenticated-staff-view .workspace-content{padding:1rem .75rem!important;width:100%!important;max-width:100%!important;box-sizing:border-box!important;overflow-x:hidden!important}.admin-mobile-bottom-nav,.staff-mobile-bottom-nav,#authenticated-app-view .admin-mobile-bottom-nav,#authenticated-staff-view .staff-mobile-bottom-nav{display:flex!important;position:fixed!important;bottom:0!important;left:0!important;right:0!important;height:65px!important;background:#0f172a!important;border-top:1px solid #1E293B!important;justify-content:space-around!important;align-items:center!important;z-index:9999!important;box-shadow:0 -4px 20px #0006!important}.admin-mobile-bottom-nav button,.staff-mobile-bottom-nav button{background:transparent!important;border:none!important;color:#94a3b8!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;gap:3px!important;font-size:.72rem!important;font-weight:600!important;cursor:pointer!important;flex:1!important;padding:6px 0!important;-webkit-tap-highlight-color:transparent!important}.admin-mobile-bottom-nav button .nav-icon,.staff-mobile-bottom-nav button .nav-icon{font-size:1.25rem!important}.admin-mobile-bottom-nav button.active{color:#818cf8!important}.staff-mobile-bottom-nav button.active{color:#34d399!important}.top-navbar{flex-direction:column;align-items:flex-start;gap:.75rem;padding:.85rem 1rem}.page-title-row{flex-direction:column;align-items:flex-start;gap:.75rem}.stat-cards-grid{grid-template-columns:1fr!important;gap:.85rem!important}.table-card{padding:1.15rem 1rem!important;max-width:100%!important;box-sizing:border-box!important;overflow-x:hidden}.data-table-container{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}.data-table{min-width:580px}.modal-card{width:95%!important;max-width:95%!important;padding:1.25rem!important;border-radius:16px!important}.office-policy-layout{flex-direction:column!important;align-items:stretch!important;gap:1rem!important}.office-hq-badge{width:100%!important;min-height:auto!important;flex-direction:row!important;justify-content:flex-start!important;text-align:left!important;padding:.85rem 1rem!important;gap:.85rem!important}.office-hq-icon{font-size:1.6rem!important;margin-bottom:0!important}.office-hq-text{align-items:flex-start!important}.office-hq-name{font-size:.88rem!important}.office-policy-grid{grid-template-columns:repeat(2,1fr)!important;gap:.85rem .75rem!important;width:100%!important}.policy-stat-label{font-size:.72rem!important}.policy-stat-val{font-size:.84rem!important}.dashboard-summary-grid{grid-template-columns:1fr!important;gap:1.25rem!important}.responsive-two-col-grid{grid-template-columns:1fr!important;gap:1rem!important}#login-page-view[style*="display: none"]{display:none!important}#login-page-view,#login-page-view:not([style*="display: none"]){position:relative!important;min-height:100vh!important;min-height:100dvh!important;height:auto!important;width:100%!important;background:radial-gradient(circle at 50% 15%,#1e1b4b,#0f172a 75%)!important;padding:1.25rem .85rem!important;overflow-y:auto!important;-webkit-overflow-scrolling:touch!important;display:flex!important;flex-direction:column!important;align-items:center!important;justify-content:center!important;box-sizing:border-box!important}.login-wrapper{display:flex!important;flex-direction:column!important;width:100%!important;max-width:440px!important;margin:auto!important;background:#fff!important;border-radius:20px!important;box-shadow:0 16px 36px #00000080!important;border:1px solid rgba(255,255,255,.15)!important;box-sizing:border-box!important;overflow:hidden!important}.login-brand-side{width:100%!important;flex:none!important;padding:1.25rem 1.25rem .85rem!important;border-right:none!important;border-bottom:1px solid #23273B!important;box-sizing:border-box!important;background:linear-gradient(180deg,#181b2b,#111320)!important}.login-brand-side .brand-header-row{margin-bottom:0!important}.login-brand-side .brand-description,.login-brand-side p,.login-brand-side .feature-badge-grid,.login-brand-side .system-status-pill{display:none!important}.login-form-side{width:100%!important;flex:none!important;background:#fff!important;padding:1.5rem 1.25rem!important;box-sizing:border-box!important}.login-form-side h2{font-size:1.35rem!important;color:#0f172a!important;letter-spacing:-.3px!important}.login-form-side p{font-size:.82rem!important;color:#64748b!important;margin-bottom:1.15rem!important}.login-input-mobile{font-size:16px!important;min-height:48px!important;box-sizing:border-box!important}.login-card{padding:1.5rem!important;width:92%!important}}@media (max-width: 480px){body{font-size:13px}#login-page-view{padding:.75rem .5rem!important}.login-wrapper{margin:.25rem auto!important;border-radius:16px!important;max-width:100%!important}.login-form-side{padding:1.25rem 1rem!important}.login-brand-side .feature-badge-grid{grid-template-columns:1fr!important}.page-title-h1{font-size:1.35rem!important}.modal-card{padding:1rem!important}.btn-primary-purple{padding:.65rem 1rem!important;font-size:.85rem!important}.bank-grid{grid-template-columns:1fr!important}.net-box{flex-direction:column;align-items:flex-start;gap:.75rem}}@media print{#authenticated-app-view,#authenticated-staff-view,#login-page-view,.sidebar,.top-navbar,.web-header,.side-mobile-panel,.no-print,.modal-overlay:not(#printable-payslip-modal):not(#printable-monthly-report-modal){display:none!important}#printable-payslip-modal,#printable-monthly-report-modal{position:static!important;display:block!important;visibility:visible!important;opacity:1!important;background:#fff!important;width:100%!important;height:auto!important;padding:0!important;margin:0!important;box-shadow:none!important;border:none!important}#printable-payslip-modal .modal-card{position:static!important;display:block!important;visibility:visible!important;max-width:100%!important;width:100%!important;margin:0!important;padding:0!important;background:#fff!important;box-shadow:none!important;border:none!important}#printable-payslip-content{display:block!important;visibility:visible!important;width:100%!important;max-width:100%!important;margin:0!important;padding:24px!important;box-sizing:border-box!important;border:2px solid #0F172A!important;border-radius:6px!important;background:#fff!important;page-break-inside:avoid!important}#printable-payslip-content *{color:#0f172a!important;visibility:visible!important;text-shadow:none!important;box-shadow:none!important}.printable-net-salary-box{background:#f8fafc!important;border:2px solid #0F172A!important;display:flex!important;justify-content:space-between!important;align-items:center!important;padding:16px 20px!important;border-radius:6px!important}@page{size:A4 portrait;margin:10mm 12mm}html,body{background:#fff!important;color:#000!important;font-family:Inter,system-ui,-apple-system,sans-serif!important;margin:0!important;padding:0!important;width:100%!important;height:auto!important;overflow:visible!important}}.bio-tab-btn{padding:8px 16px;border-radius:9999px;font-size:.82rem;font-weight:700;cursor:pointer;border:1px solid #E2E8F0;background:#f8fafc;color:#64748b;transition:all .2s ease;display:inline-flex;align-items:center;gap:6px}.bio-tab-btn.active{background:linear-gradient(135deg,#6366f1,#4f46e5);color:#fff;border-color:#4f46e5;box-shadow:0 4px 12px #6366f14d}.bio-badge{display:inline-flex;align-items:center;gap:4px;padding:3px 8px;border-radius:9999px;font-size:.72rem;font-weight:700;letter-spacing:.02em}.bio-badge-neutral{background:#f1f5f9;color:#475569;border:1px solid #CBD5E1}.bio-badge-pending{background:#fef3c7;color:#b45309;border:1px solid #FDE68A}.bio-badge-success{background:#dcfce7;color:#15803d;border:1px solid #86EFAC}.bio-badge-warning{background:#fef3c7;color:#d97706;border:1px solid #FCD34D}.bio-badge-danger{background:#fee2e2;color:#b91c1c;border:1px solid #FCA5A5}.bio-viewfinder-container{position:relative;width:100%;max-width:480px;margin:0 auto;border-radius:18px;overflow:hidden;background:#0f172a;box-shadow:0 10px 25px #0f172a40}.bio-viewfinder-overlay{position:absolute;top:0;left:0;right:0;bottom:0;pointer-events:none;display:flex;align-items:center;justify-content:center}.bio-face-oval{width:220px;height:290px;border:2px dashed rgba(99,102,241,.85);border-radius:50%;box-shadow:0 0 0 9999px #0f172a73}.bio-uniform-box{width:280px;height:240px;border:2px dashed rgba(16,185,129,.85);border-radius:16px;box-shadow:0 0 0 9999px #0f172a73}.bio-spinner{display:inline-block;width:14px;height:14px;border:2px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:bio-spin .8s linear infinite}@keyframes bio-spin{to{transform:rotate(360deg)}}.bio-feedback-card{padding:1rem 1.25rem;border-radius:14px;margin-top:1rem;animation:bio-fade-in .3s ease}@keyframes bio-fade-in{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.bio-feedback-success{background:#ecfdf5;border:1px solid #A7F3D0;color:#065f46}.bio-feedback-danger{background:#fef2f2;border:1px solid #FECACA;color:#991b1b}.sa-layout{display:flex;width:100%;min-height:100vh;background-color:#f8fafc}.sa-sidebar{width:270px;background-color:#0b132b;color:#fff;display:flex;flex-direction:column;justify-content:space-between;padding:1.25rem 1rem;flex-shrink:0;box-shadow:4px 0 20px #0000000f}.sa-brand{display:flex;align-items:center;gap:.75rem;margin-bottom:2rem;padding:.25rem}.sa-logo{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#10b981,#059669);display:flex;align-items:center;justify-content:center;font-weight:800;font-size:1.2rem;color:#fff;box-shadow:0 4px 14px #10b98166}.sa-brand-title{font-weight:800;font-size:1.05rem;color:#fff;line-height:1.25}.sa-brand-badge{font-size:.7rem;color:#34d399;font-weight:700;display:flex;align-items:center;gap:4px}.sa-menu{display:flex;flex-direction:column;gap:.35rem}.sa-menu-item{display:flex;align-items:center;gap:.75rem;padding:.75rem 1rem;border-radius:10px;color:#94a3b8;font-weight:600;font-size:.88rem;text-decoration:none;transition:all .2s;border:none;background:transparent;width:100%;text-align:left;cursor:pointer}.sa-menu-item:hover{background:#1c2541;color:#fff}.sa-menu-item.active{background:#10b981;color:#fff;font-weight:700;box-shadow:0 4px 14px #10b98159}.sa-help-card{background:#ffffff0f;border:1px solid rgba(255,255,255,.1);border-radius:12px;padding:.85rem;display:flex;align-items:center;gap:.75rem;margin-top:2rem}.sa-main{flex:1;display:flex;flex-direction:column;min-width:0;background-color:#f8fafc}.sa-header{background:#fff;border-bottom:1px solid #E2E8F0;padding:.85rem 2rem;display:flex;align-items:center;justify-content:space-between;position:sticky;top:0;z-index:100;box-shadow:0 2px 10px #00000005}.sa-search{display:flex;align-items:center;gap:.5rem;background:#f1f5f9;border:1px solid #E2E8F0;border-radius:10px;padding:.5rem 1rem;width:360px;font-size:.85rem;color:#64748b}.sa-header-right{display:flex;align-items:center;gap:1.25rem}.sa-date-pill{background:#f8fafc;border:1px solid #E2E8F0;border-radius:8px;padding:.4rem .85rem;font-size:.8rem;font-weight:600;color:#0f172a;display:flex;align-items:center;gap:6px}.sa-user-pill{display:flex;align-items:center;gap:.6rem;background:#f8fafc;border:1px solid #E2E8F0;padding:.35rem .85rem .35rem .4rem;border-radius:9999px;cursor:pointer}.sa-user-avatar{width:32px;height:32px;border-radius:50%;background:linear-gradient(135deg,#10b981,#059669);color:#fff;display:flex;align-items:center;justify-content:center;font-weight:800;font-size:.85rem}.sa-content{padding:2rem;flex:1;max-width:1400px}.sa-kpi-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-bottom:1.75rem}.sa-kpi-card{background:#fff;border:1px solid #E2E8F0;border-radius:16px;padding:1.25rem;display:flex;align-items:center;gap:1rem;box-shadow:0 2px 8px #00000008}.sa-kpi-icon{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;font-size:1.4rem;flex-shrink:0}.sa-kpi-val{font-size:1.6rem;font-weight:800;color:#0f172a;line-height:1.2}.sa-kpi-title{font-size:.8rem;color:#64748b;font-weight:600}.sa-kpi-badge{font-size:.72rem;font-weight:700;color:#059669;background:#ecfdf5;padding:2px 8px;border-radius:9999px;display:inline-flex;align-items:center;gap:2px;margin-left:6px}.sa-generator-grid{display:grid;grid-template-columns:1.8fr 1fr;gap:1.5rem;margin-bottom:1.75rem}.sa-card{background:#fff;border:1px solid #E2E8F0;border-radius:18px;padding:1.5rem;box-shadow:0 2px 10px #00000008}.sa-btn-primary{background:linear-gradient(135deg,#10b981,#059669);color:#fff;border:none;padding:.85rem 1.5rem;border-radius:12px;font-weight:700;font-size:.95rem;cursor:pointer;display:flex;align-items:center;justify-content:center;gap:.5rem;box-shadow:0 4px 14px #10b98159;transition:all .2s}.sa-btn-primary:hover{transform:translateY(-1px);box-shadow:0 6px 18px #10b98173}.sa-plans-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:1.25rem;margin-bottom:1.75rem}.sa-plan-card{background:#fff;border:1px solid #E2E8F0;border-radius:16px;padding:1.25rem;box-shadow:0 2px 8px #00000008;position:relative}