@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap";@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap";@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap";@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap";@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap";@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap";@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap";@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap";@import "https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700;800;900&display=swap";@import "https://fonts.googleapis.com/css2?family=Plus+Jakarta+Sans:wght@400;500;600;700;800&display=swap";*{box-sizing:border-box;margin:0;padding:0}html,body,#root{color:#0f172a;background-color:#f8fafc;width:100%;min-height:100vh;margin:0;padding:0}:root{--login-font:"Plus Jakarta Sans", system-ui, -apple-system, sans-serif;--login-bg:#f8fafc;--login-card-bg:#fff;--login-input-bg:#fff;--login-border:#e2e8f0;--login-border-dark:#cbd5e1;--login-border-focus:#000;--login-black:#000;--login-dark:#0f172a;--login-charcoal:#1e293b;--login-gray-dark:#334155;--login-gray-medium:#64748b;--login-gray-light:#94a3b8;--login-gray-subtle:#f1f5f9;--login-shadow:0 20px 25px -5px #0000000f, 0 8px 10px -6px #0000000a;--login-shadow-hover:0 25px 35px -5px #0000001a, 0 10px 12px -5px #0000000d;--login-success-bg:#f0fdf4;--login-success-border:#bbf7d0;--login-success-text:#166534;--login-error-bg:#fef2f2;--login-error-border:#fecaca;--login-error-text:#991b1b}.login-container{font-family:var(--login-font);background-color:var(--login-bg);width:100%;min-height:100vh;color:var(--login-dark);box-sizing:border-box;background-image:radial-gradient(circle at 10% 20%,#00000008 0%,#0000 40%),radial-gradient(circle at 90% 80%,#00000008 0%,#0000 40%);justify-content:center;align-items:center;display:flex;position:relative;overflow:hidden}.login-container:before{content:"";opacity:.4;pointer-events:none;background-image:radial-gradient(#cbd5e1 1px,#0000 1px);background-size:24px 24px;position:absolute;inset:0}.login-wrapper{z-index:1;justify-content:center;align-items:center;width:100%;max-width:500px;min-height:100vh;padding:2rem 1rem;display:flex;position:relative}.login-form-section{justify-content:center;align-items:center;width:100%;display:flex}.login-card{background:var(--login-card-bg);border:1px solid var(--login-border);width:100%;box-shadow:var(--login-shadow);border-radius:24px;padding:2.5rem 2.25rem;animation:.5s cubic-bezier(.16,1,.3,1) cardAppear}@keyframes cardAppear{0%{opacity:0;transform:translateY(16px)}to{opacity:1;transform:translateY(0)}}.login-card-brand{justify-content:center;align-items:center;gap:.65rem;margin-bottom:1.5rem;display:flex}.login-card-brand-icon{background:var(--login-black);color:#fff;border-radius:10px;justify-content:center;align-items:center;width:40px;height:40px;display:flex;box-shadow:0 4px 10px #0000001f}.login-card-brand-name{letter-spacing:-.02em;color:var(--login-black);font-size:1.35rem;font-weight:800}.login-header{text-align:center;margin-bottom:1.75rem}.login-title{letter-spacing:-.02em;color:var(--login-black);margin:0 0 .4rem;font-size:1.75rem;font-weight:800}.login-subtitle{color:var(--login-gray-medium);margin:0;font-size:.9rem}.login-role-selector{background:var(--login-gray-subtle);border:1px solid var(--login-border);border-radius:12px;gap:.35rem;margin-bottom:1.75rem;padding:.35rem;display:flex}.login-role-btn{color:var(--login-gray-medium);cursor:pointer;background:0 0;border:none;border-radius:9px;flex:1;justify-content:center;align-items:center;gap:.5rem;padding:.65rem 1rem;font-family:inherit;font-size:.875rem;font-weight:600;transition:all .2s;display:flex}.login-role-btn.active{background:var(--login-black);color:#fff;box-shadow:0 4px 10px #00000026}.login-role-btn:hover:not(.active){color:var(--login-black)}.login-alert{text-align:left;border-radius:12px;align-items:center;gap:.75rem;margin-bottom:1.5rem;padding:.85rem 1rem;font-size:.875rem;animation:.3s fadeIn;display:flex}.login-alert.error{background:var(--login-error-bg);border:1px solid var(--login-error-border);color:var(--login-error-text)}.login-alert.success{background:var(--login-success-bg);border:1px solid var(--login-success-border);color:var(--login-success-text)}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}.login-form{flex-direction:column;gap:1.25rem;display:flex}.login-field{text-align:left;flex-direction:column;gap:.45rem;display:flex}.login-label{color:var(--login-black);font-size:.85rem;font-weight:700}.login-input-wrapper{align-items:center;display:flex;position:relative}.login-input-icon{color:var(--login-gray-medium);pointer-events:none;transition:color .2s;position:absolute;left:1rem}.login-input{background:var(--login-input-bg);border:1px solid var(--login-border-dark);width:100%;color:var(--login-black);box-sizing:border-box;border-radius:12px;outline:none;padding:.85rem 1rem .85rem 2.85rem;font-family:inherit;font-size:.95rem;transition:all .2s}.login-input-wrapper:focus-within .login-input-icon{color:var(--login-black)}.login-password-toggle{color:var(--login-gray-medium);cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:.25rem;transition:color .2s;display:flex;position:absolute;right:.85rem}.login-password-toggle:hover{color:var(--login-black)}.login-controls{justify-content:space-between;align-items:center;margin-top:-.15rem;font-size:.85rem;display:flex}.login-checkbox-label{color:var(--login-gray-dark);cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;gap:.5rem;font-weight:500;display:flex}.login-checkbox{appearance:none;border:1px solid var(--login-border-dark);cursor:pointer;background:#fff;border-radius:5px;place-content:center;width:18px;height:18px;transition:all .2s;display:grid}.login-checkbox:checked{background:var(--login-black);border-color:var(--login-black)}.login-checkbox:checked:before{content:"✓";color:#fff;font-size:12px;font-weight:700}.login-forgot-link{color:var(--login-black);font-weight:600;text-decoration:none;transition:opacity .2s}.login-forgot-link:hover{opacity:.7;text-decoration:underline}.login-submit-btn{background:var(--login-black);color:#fff;cursor:pointer;border:none;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;width:100%;margin-top:.5rem;padding:.95rem;font-family:inherit;font-size:1rem;font-weight:700;transition:all .25s;display:flex;box-shadow:0 8px 18px #00000026}.login-submit-btn:hover{background:#1e293b;transform:translateY(-2px);box-shadow:0 12px 22px #0003}.login-submit-btn:active{transform:translateY(0)}.login-submit-btn:disabled{opacity:.7;cursor:not-allowed;transform:none}.login-spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:20px;height:20px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.login-divider{color:var(--login-gray-medium);text-transform:uppercase;letter-spacing:.05em;align-items:center;gap:1rem;margin:1.5rem 0 1rem;font-size:.775rem;font-weight:600;display:flex}.login-divider:before,.login-divider:after{content:"";background:var(--login-border);flex:1;height:1px}.login-demo-box{background:var(--login-gray-subtle);border:1px dashed var(--login-border-dark);text-align:left;border-radius:14px;margin-top:1rem;padding:1rem}.login-demo-title{text-transform:uppercase;letter-spacing:.05em;color:var(--login-gray-medium);align-items:center;gap:.35rem;margin-bottom:.5rem;font-size:.75rem;font-weight:700;display:flex}.login-demo-actions{gap:.5rem;display:flex}.login-demo-chip{border:1px solid var(--login-border);color:var(--login-dark);cursor:pointer;background:#fff;border-radius:8px;flex:1;justify-content:center;align-items:center;gap:.35rem;padding:.5rem .65rem;font-size:.775rem;font-weight:600;transition:all .2s;display:flex}.login-demo-chip:hover{border-color:var(--login-black);background:var(--login-black);color:#fff}.login-footer-note{color:var(--login-gray-medium);text-align:center;margin-top:1.5rem;font-size:.825rem}.login-footer-note a{color:var(--login-black);font-weight:600;text-decoration:underline}.brand-header{text-align:left;align-items:center;gap:.85rem;margin-bottom:1.75rem;display:flex}.brand-icon{color:#fff;background:#0f172a;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;display:flex;box-shadow:0 4px 12px #0f172a26}.brand-title{color:#0f172a;letter-spacing:-.02em;margin:0;font-size:1.25rem;font-weight:800}.brand-sub{color:#64748b;margin:0;font-size:.8rem}.already-logged-card{text-align:center;flex-direction:column;align-items:center;gap:.65rem;padding:1rem .5rem;display:flex}.already-avatar-box{color:#fff;background:linear-gradient(135deg,#6366f1,#4f46e5);border-radius:18px;justify-content:center;align-items:center;width:60px;height:60px;font-size:1.5rem;font-weight:800;display:flex;box-shadow:0 8px 20px #6366f140}.already-title{color:#0f172a;margin:0;font-size:1.15rem;font-weight:800}.already-user-name{color:#1e293b;margin:0;font-size:1.1rem;font-weight:700}.already-user-sub{color:#64748b;margin:0;font-size:.825rem}.already-role{color:#4338ca;font-weight:800}.already-actions{gap:.75rem;width:100%;margin-top:1.25rem;display:flex}.btn-go-dashboard{color:#fff;cursor:pointer;background:#0f172a;border:none;border-radius:12px;flex:1.5;justify-content:center;align-items:center;gap:.5rem;padding:.8rem 1.25rem;font-size:.9rem;font-weight:700;transition:all .2s;display:flex;box-shadow:0 4px 14px #0f172a26}.btn-go-dashboard:hover{background:#6366f1;box-shadow:0 6px 20px #6366f14d}.btn-logout-existing{color:#dc2626;cursor:pointer;background:#fef2f2;border:1px solid #fecaca;border-radius:12px;flex:1;justify-content:center;align-items:center;gap:.4rem;padding:.8rem 1rem;font-size:.875rem;font-weight:700;transition:all .15s;display:flex}.btn-logout-existing:hover{background:#fee2e2}.method-selection-modal{text-align:left;flex-direction:column;gap:1.25rem;display:flex}.method-modal-header{margin-bottom:.5rem}.method-title{color:#0f172a;letter-spacing:-.02em;margin:0 0 .35rem;font-size:1.35rem;font-weight:800}.method-sub{color:#64748b;margin:0;font-size:.85rem}.method-grid{flex-direction:column;gap:1rem;display:flex}.method-card-btn{cursor:pointer;text-align:left;background:#fff;border:1px solid #e2e8f0;border-radius:16px;align-items:center;gap:1rem;padding:1.1rem 1.25rem;transition:all .2s cubic-bezier(.16,1,.3,1);display:flex;box-shadow:0 2px 8px #00000008}.method-card-btn:hover{background:#f8fafc;border-color:#6366f1;transform:translateY(-2px);box-shadow:0 8px 24px #6366f11f}.method-icon-badge{border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.method-icon-badge.manual{color:#4338ca;background:#e0e7ff}.method-icon-badge.qr{color:#d97706;background:#fef3c7}.method-text{flex-direction:column;flex:1;display:flex}.method-name{color:#0f172a;font-size:1.05rem;font-weight:800}.method-desc{color:#64748b;font-size:.8rem}.method-arrow{color:#94a3b8;transition:transform .2s,color .2s}.method-card-btn:hover .method-arrow{color:#6366f1;transform:translate(4px)}.manual-login-section,.qr-login-section{text-align:left;flex-direction:column;gap:1.25rem;display:flex}.section-header{margin-bottom:.25rem}.section-title{color:#0f172a;margin:0 0 .25rem;font-size:1.25rem;font-weight:800}.section-sub{color:#64748b;margin:0;font-size:.825rem}.btn-back-link{color:#6366f1;cursor:pointer;background:0 0;border:none;align-items:center;gap:.4rem;margin-top:.5rem;padding:0;font-size:.85rem;font-weight:700;display:inline-flex}.btn-back-link:hover{text-decoration:underline}.qr-mode-switcher{background:#f1f5f9;border-radius:12px;gap:.25rem;padding:.25rem;display:flex}.qr-switch-btn{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:10px;flex:1;justify-content:center;align-items:center;gap:.4rem;padding:.55rem .85rem;font-size:.825rem;font-weight:700;transition:all .15s;display:flex}.qr-switch-btn.active{color:#4338ca;background:#fff;box-shadow:0 2px 6px #00000014}.camera-scan-container{flex-direction:column;align-items:center;gap:.85rem;margin-top:.5rem;display:flex}.video-viewport{background:#0f172a;border-radius:18px;justify-content:center;align-items:center;width:100%;height:220px;display:flex;position:relative;overflow:hidden}.camera-feed{object-fit:cover;width:100%;height:100%}.camera-target-box{border:2px dashed #6366f1;border-radius:14px;width:150px;height:150px;position:absolute;box-shadow:0 0 0 9999px #0f172a73}.scanned-token-info{color:#4338ca;background:#e0e7ff;border-radius:8px;padding:.35rem .75rem;font-size:.8rem;font-weight:700}.display-qr-container{text-align:center;flex-direction:column;align-items:center;gap:1rem;padding:.5rem 0;display:flex}.qr-state-box{flex-direction:column;justify-content:center;align-items:center;gap:.65rem;padding:1.5rem;display:flex}.btn-refresh-qr-main{color:#fff;cursor:pointer;background:#6366f1;border:none;border-radius:10px;align-items:center;gap:.4rem;padding:.55rem 1.1rem;font-size:.825rem;font-weight:700;display:flex}.qr-display-content{flex-direction:column;align-items:center;gap:.75rem;display:flex}.qr-img-card{background:#fff;border:2px dashed #cbd5e1;border-radius:18px;justify-content:center;align-items:center;width:190px;height:190px;padding:12px;display:flex;box-shadow:0 4px 12px #0000000d}.qr-render-img{object-fit:contain;width:100%;height:100%}.qr-waiting-badge{color:#4338ca;background:#e0e7ff;border-radius:20px;align-items:center;gap:.4rem;padding:.3rem .75rem;font-size:.775rem;font-weight:700;display:inline-flex}.qr-timer-text{color:#64748b;align-items:center;gap:.35rem;font-size:.8rem;display:flex}@media (width<=480px){.login-card{box-shadow:none;background:0 0;border:none;padding:1rem .5rem}}.sidebar-container{box-sizing:border-box;z-index:50;background:#fff;border-right:1px solid #e2e8f0;flex-direction:column;justify-content:space-between;width:260px;min-width:260px;height:100vh;padding:1.5rem 1rem;font-family:Plus Jakarta Sans,system-ui,-apple-system,sans-serif;transition:width .3s cubic-bezier(.4,0,.2,1),min-width .3s cubic-bezier(.4,0,.2,1),padding .3s;display:flex;position:sticky;top:0}.sidebar-container.collapsed{width:76px;min-width:76px;padding:1.5rem .6rem}.sidebar-brand-wrapper{justify-content:space-between;align-items:center;margin-bottom:1.75rem;padding:0 .25rem;display:flex}.sidebar-brand{align-items:center;gap:.75rem;display:flex;overflow:hidden}.sidebar-brand-icon{color:#fff;background:#000;border-radius:12px;justify-content:center;align-items:center;width:40px;min-width:40px;height:40px;display:flex;box-shadow:0 4px 10px #0000001f}.sidebar-brand-name{letter-spacing:-.01em;color:#000;white-space:nowrap;font-size:1.05rem;font-weight:800;transition:opacity .2s}.sidebar-container.collapsed .sidebar-brand-name{display:none}.sidebar-toggle-btn{color:#0f172a;cursor:pointer;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s;display:flex}.sidebar-toggle-btn:hover{color:#fff;background:#000;border-color:#000}.sidebar-container.collapsed .sidebar-brand-wrapper{flex-direction:column;justify-content:center;gap:.75rem}.sidebar-nav{flex-direction:column;flex:1;gap:.45rem;display:flex}.sidebar-nav-title{text-transform:uppercase;letter-spacing:.06em;color:#94a3b8;white-space:nowrap;margin-bottom:.35rem;padding:0 .75rem;font-size:.725rem;font-weight:700}.sidebar-container.collapsed .sidebar-nav-title{display:none}.sidebar-link{color:#64748b;cursor:pointer;text-align:left;white-space:nowrap;box-sizing:border-box;background:0 0;border:none;border-radius:12px;align-items:center;gap:.85rem;width:100%;padding:.75rem 1rem;font-family:inherit;font-size:.925rem;font-weight:600;transition:all .2s;display:flex}.sidebar-container.collapsed .sidebar-link{justify-content:center;padding:.75rem}.sidebar-link-icon{justify-content:center;align-items:center;min-width:20px;display:flex}.sidebar-link:hover:not(.active){color:#000;background:#f1f5f9}.sidebar-link.active{color:#fff;background:#000;box-shadow:0 4px 12px #00000026}.sidebar-link.active .sidebar-link-icon{color:#fff}.sidebar-badge{color:#0f172a;background:#f1f5f9;border-radius:20px;margin-left:auto;padding:.15rem .5rem;font-size:.75rem;font-weight:700}.sidebar-link.active .sidebar-badge{color:#fff;background:#fff3}.sidebar-container.collapsed .sidebar-link-text,.sidebar-container.collapsed .sidebar-badge{display:none}.sidebar-footer{border-top:1px solid #e2e8f0;flex-direction:column;gap:.75rem;padding-top:1rem;display:flex}.sidebar-user-card-btn{cursor:pointer;text-align:left;box-sizing:border-box;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;align-items:center;gap:.75rem;width:100%;padding:.6rem .75rem;font-family:inherit;transition:all .2s;display:flex}.sidebar-user-card-btn:hover{background:#eef2ff;border-color:#c7d2fe;box-shadow:0 2px 8px #6366f11f}.sidebar-user-card-btn.active{background:#eef2ff;border-color:#6366f1;box-shadow:0 0 0 2px #6366f126}.sidebar-container.collapsed .sidebar-user-card-btn{box-shadow:none;background:0 0;border:none;justify-content:center;padding:.5rem}.sidebar-container.collapsed .sidebar-user-card-btn:hover{background:#f1f5f9;border-color:#0000}.sidebar-avatar{aspect-ratio:1;color:#fff;background:#000;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:38px;min-width:38px;height:38px;min-height:38px;font-size:.85rem;font-weight:700;transition:box-shadow .2s;display:flex;overflow:hidden}.sidebar-user-card-btn:hover .sidebar-avatar{box-shadow:0 0 0 2px #6366f1}.sidebar-avatar-img{object-fit:cover;object-position:center;aspect-ratio:1;border-radius:50%;width:100%;height:100%;display:block}.sidebar-user-details{text-align:left;flex-direction:column;flex:1;min-width:0;display:flex;overflow:hidden}.sidebar-user-name{color:#000;white-space:nowrap;text-overflow:ellipsis;font-size:.875rem;font-weight:700;line-height:1.2;overflow:hidden}.sidebar-user-meta{justify-content:space-between;align-items:center;gap:.25rem;display:flex}.sidebar-user-role{color:#64748b;white-space:nowrap;font-size:.72rem}.sidebar-profile-hint{color:#6366f1;opacity:0;align-items:center;gap:2px;font-size:.68rem;font-weight:600;transition:opacity .2s;display:inline-flex}.sidebar-user-card-btn:hover .sidebar-profile-hint{opacity:1}.sidebar-container.collapsed .sidebar-user-details{display:none}.sidebar-logout-full-btn{color:#0f172a;cursor:pointer;box-sizing:border-box;background:#fff;border:1px solid #e2e8f0;border-radius:12px;justify-content:center;align-items:center;gap:.65rem;width:100%;padding:.7rem 1rem;font-family:inherit;font-size:.875rem;font-weight:700;transition:all .2s;display:flex}.sidebar-logout-full-btn:hover{color:#ef4444;background:#fef2f2;border-color:#fecaca}.sidebar-container.collapsed .sidebar-logout-text{display:none}.sidebar-container.collapsed .sidebar-logout-full-btn{justify-content:center;padding:.7rem}.working-timer-container{background:#fff;border:1px solid #e2e8f0;border-radius:12px;align-items:center;gap:1rem;width:100%;padding:.5rem 1rem;font-family:inherit;transition:all .2s ease-in-out;display:inline-flex;box-shadow:0 2px 6px #0000000a}.working-timer-container.compact{border-radius:8px;gap:.65rem;width:auto;padding:.35rem .75rem}.working-timer-left{color:#334155;align-items:center;gap:.5rem;font-size:.925rem;font-weight:500;display:flex}.timer-clock-icon{color:#6366f1}.working-timer-label{color:#64748b}.working-timer-digits{color:#0f172a;letter-spacing:.03em;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;padding:.2rem .5rem;font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:1.05rem;font-weight:700}.working-timer-controls{align-items:center;display:flex}.working-timer-btn{cursor:pointer;border:none;border-radius:8px;outline:none;align-items:center;gap:.4rem;padding:.4rem .85rem;font-size:.85rem;font-weight:600;transition:all .2s;display:inline-flex}.working-timer-btn:disabled{opacity:.6;cursor:not-allowed}.working-timer-btn.pause-btn{color:#c2410c;background:#fff7ed;border:1px solid #ffedd5}.working-timer-btn.pause-btn:hover:not(:disabled){color:#9a3412;background:#ffedd5;box-shadow:0 2px 4px #c2410c26}.working-timer-btn.resume-btn{color:#047857;background:#ecfdf5;border:1px solid #a7f3d0}.working-timer-btn.resume-btn:hover:not(:disabled){color:#065f46;background:#d1fae5;box-shadow:0 2px 4px #04785726}.working-timer-status-badge{border-radius:20px;align-items:center;gap:.4rem;padding:.25rem .65rem;font-size:.8rem;font-weight:500;display:flex}.working-timer-status-badge.working{color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0}.working-timer-status-badge.working .status-dot{background-color:#22c55e;border-radius:50%;width:7px;height:7px;animation:1.8s infinite pulse-green}.working-timer-status-badge.paused{color:#b45309;background:#fffbebfb;border:1px solid #fde68a}.working-timer-status-badge.paused .status-dot{background-color:#f59e0b;border-radius:50%;width:7px;height:7px}.working-timer-loading{color:#94a3b8;padding:.25rem .5rem;font-size:.85rem}.working-timer-full-view{flex-direction:column;gap:1rem;width:100%;display:flex}.working-timer-header-bar{border-bottom:1px solid #f1f5f9;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:.75rem;padding-bottom:.75rem;display:flex}.timer-title-group{align-items:center;gap:.65rem;display:flex}.timer-main-title{color:#0f172a;font-size:1rem;font-weight:700}.limit-tag{color:#2563eb;background:#eff6ff;border:1px solid #bfdbfe;border-radius:12px;padding:.2rem .55rem;font-size:.75rem;font-weight:700}.timer-actions-group{align-items:center;gap:.75rem;display:flex}.working-timer-grid{grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:1rem;width:100%;display:grid}.timer-metric-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;flex-direction:column;gap:.3rem;padding:.85rem 1rem;transition:all .2s;display:flex}.timer-metric-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000000d}.metric-card-header{align-items:center;gap:.45rem;font-size:.825rem;font-weight:600;display:flex}.metric-card-value{letter-spacing:.02em;font-family:JetBrains Mono,Fira Code,Courier New,monospace;font-size:1.25rem;font-weight:700}.metric-card-subtext{color:#64748b;font-size:.725rem;font-weight:500}.timer-metric-card.normal{background:#f0fdf4;border-color:#bbf7d0}.timer-metric-card.normal .metric-card-header{color:#166534}.timer-metric-card.normal .metric-card-value{color:#15803d}.timer-metric-card.extra{background:#fff7ed;border-color:#fed7aa}.timer-metric-card.extra .metric-card-header{color:#9a3412}.timer-metric-card.extra .metric-card-value{color:#c2410c}.timer-metric-card.total{background:#f0f9ff;border-color:#bae6fd}.timer-metric-card.total .metric-card-header{color:#075985}.timer-metric-card.total .metric-card-value{color:#0284c7}.timer-metric-card.remaining{background:#faf5ff;border-color:#e9d5ff}.timer-metric-card.remaining .metric-card-header{color:#6b21a8}.timer-metric-card.remaining .metric-card-value{color:#7e22ce}.timer-metric-card.remaining.urgent{background:#fef2f2;border-color:#fecaca;animation:2s infinite pulse-red}.timer-metric-card.remaining.urgent .metric-card-header,.timer-metric-card.remaining.urgent .metric-card-value{color:#dc2626}@keyframes pulse-green{0%{transform:scale(.95);box-shadow:0 0 #22c55eb3}70%{transform:scale(1);box-shadow:0 0 0 6px #22c55e00}to{transform:scale(.95);box-shadow:0 0 #22c55e00}}@keyframes pulse-red{0%{box-shadow:0 0 #ef444466}70%{box-shadow:0 0 0 8px #ef444400}to{box-shadow:0 0 #ef444400}}.dashboard-container{color:#0f172a;box-sizing:border-box;width:100%;max-width:1350px;margin:0 auto;padding:2.5rem 1.5rem;font-family:Plus Jakarta Sans,system-ui,-apple-system,sans-serif}.dashboard-header{text-align:left;flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:2rem;display:flex}.dashboard-title{letter-spacing:-.025em;color:#000;margin:0;font-size:2rem;font-weight:800}.dashboard-subtitle{color:#64748b;margin:0;font-size:.95rem;font-weight:500}.dashboard-grid{grid-template-columns:repeat(4,1fr);gap:1.5rem;width:100%;margin-bottom:2.5rem;display:grid}.dashboard-card{background:#fff;border:1px solid #e2e8f0;border-radius:20px;flex-direction:column;justify-content:space-between;min-height:165px;padding:1.5rem;transition:all .25s cubic-bezier(.4,0,.2,1);display:flex;position:relative;overflow:hidden;box-shadow:0 4px 14px #00000008}.dashboard-card:before{content:"";background:#000;height:4px;transition:background .25s;position:absolute;top:0;left:0;right:0}.dashboard-card:hover{border-color:#cbd5e1;transform:translateY(-4px);box-shadow:0 16px 30px #00000014}.dashboard-card-top{justify-content:space-between;align-items:center;margin-bottom:1.25rem;display:flex}.dashboard-icon-wrapper{color:#000;background:#f1f5f9;border-radius:12px;justify-content:center;align-items:center;width:44px;height:44px;transition:transform .2s;display:flex}.dashboard-card:hover .dashboard-icon-wrapper{color:#fff;background:#000;transform:scale(1.05)}.dashboard-card.pending:before,.dashboard-card.active-project:before{background:#000}.dashboard-card.total-hours:before{background:#2563eb}.dashboard-card.current-sess:before{background:#10b981}.dashboard-card.status-card:before{background:#000}.dashboard-status-pill{color:#0f172a;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:20px;align-items:center;gap:.35rem;padding:.3rem .75rem;font-size:.75rem;font-weight:700;display:inline-flex}.dashboard-status-pill.online{color:#166534;background:#f0fdf4;border-color:#bbf7d0}.dashboard-status-pill.offline{color:#991b1b;background:#fef2f2;border-color:#fecaca}.dashboard-status-dot{background:#000;border-radius:50%;width:7px;height:7px}.dashboard-status-pill.online .dashboard-status-dot{background:#10b981}.dashboard-status-pill.offline .dashboard-status-dot{background:#ef4444}.dashboard-card-middle{text-align:left;flex-direction:column;gap:.25rem;display:flex}.dashboard-card-title{color:#64748b;text-transform:uppercase;letter-spacing:.04em;margin:0;font-size:.825rem;font-weight:700}.dashboard-card-value{color:#000;letter-spacing:-.03em;margin:.2rem 0;font-size:2rem;font-weight:800;line-height:1.1}.dashboard-card-subtext{color:#94a3b8;margin:0;font-size:.8rem;font-weight:500}.dashboard-section{text-align:left;background:#fff;border:1px solid #e2e8f0;border-radius:20px;margin-bottom:2.25rem;padding:1.75rem;box-shadow:0 4px 16px #00000008}.dashboard-section-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem;display:flex}.dashboard-section-title{align-items:center;gap:.65rem;display:flex}.dashboard-section-title h2{color:#000;letter-spacing:-.02em;margin:0;font-size:1.35rem;font-weight:800}.dashboard-date-filter{align-items:center;gap:.65rem;display:flex}.date-input-field{color:#0f172a;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:10px;outline:none;padding:.55rem .85rem;font-family:inherit;font-size:.875rem;font-weight:600}.date-input-field:focus{border-color:#000}.dashboard-summary-strip{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;grid-template-columns:repeat(4,1fr);gap:1rem;margin-bottom:1.5rem;padding:1.15rem;display:grid}.summary-strip-item{flex-direction:column;gap:.2rem;display:flex}.summary-strip-label{color:#64748b;text-transform:uppercase;font-size:.775rem;font-weight:700}.summary-strip-val{color:#0f172a;font-size:1.15rem;font-weight:800}.dashboard-table-wrapper{border:1px solid #e2e8f0;border-radius:14px;overflow-x:auto}.dashboard-table{border-collapse:collapse;text-align:left;width:100%}.dashboard-table th{color:#64748b;text-transform:uppercase;letter-spacing:.04em;background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:.85rem 1.15rem;font-size:.8rem;font-weight:700}.dashboard-table td{color:#0f172a;border-bottom:1px solid #f1f5f9;padding:1rem 1.15rem;font-size:.9rem}.dashboard-table tr:last-child td{border-bottom:none}.reason-badge{border-radius:12px;padding:.25rem .65rem;font-size:.775rem;font-weight:700;display:inline-block}.reason-badge.active{color:#166534;background:#f0fdf4}.reason-badge.manual{color:#334155;background:#f1f5f9}.reason-badge.inactivity{color:#991b1b;background:#fef2f2}.reason-badge.browser{color:#c2410c;background:#fff7ed}.total-working-footer-box{color:#fff;background:#000;border-radius:14px;justify-content:space-between;align-items:center;margin-top:1.25rem;padding:1rem 1.35rem;display:flex}.total-working-footer-box span{font-size:.95rem;font-weight:600}.total-working-footer-box strong{font-size:1.35rem;font-weight:800}.dashboard-state-container{text-align:center;background:#fff;border:1px dashed #cbd5e1;border-radius:20px;flex-direction:column;justify-content:center;align-items:center;gap:1rem;min-height:220px;padding:2.5rem;display:flex}.dashboard-card-skeleton{background:#fff;border:1px solid #e2e8f0;border-radius:20px;height:165px;padding:1.5rem;animation:1.5s ease-in-out infinite skeletonPulse}@keyframes skeletonPulse{0%{opacity:.8}50%{opacity:.4}to{opacity:.8}}@media (width<=1024px){.dashboard-grid,.dashboard-summary-strip{grid-template-columns:repeat(2,1fr)}}@media (width<=640px){.dashboard-grid,.dashboard-summary-strip{grid-template-columns:1fr}.dashboard-container{padding:1.5rem 1rem}}.task-container{color:#0f172a;box-sizing:border-box;width:100%;max-width:1200px;margin:0 auto;padding:2rem 1.5rem;font-family:Plus Jakarta Sans,system-ui,-apple-system,sans-serif}.task-header{text-align:left;flex-direction:column;gap:.35rem;margin-bottom:1.5rem;display:flex}.task-title{letter-spacing:-.025em;color:#000;margin:0;font-size:2rem;font-weight:800}.task-subtitle{color:#64748b;margin:0;font-size:.95rem;font-weight:500}.task-navigation{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:2rem;display:flex}.task-main-tabs{background:#fff;border:1px solid #e2e8f0;border-radius:14px;gap:.35rem;padding:.35rem;display:inline-flex;box-shadow:0 2px 8px #00000008}.task-main-tab-btn{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:10px;align-items:center;gap:.5rem;padding:.65rem 1.35rem;font-family:inherit;font-size:.9rem;font-weight:700;transition:all .25s;display:flex}.task-main-tab-btn:hover:not(.active){color:#000;background:#f1f5f9}.task-main-tab-btn.active{color:#fff;background:#000;box-shadow:0 4px 12px #00000026}.task-view-mode-toggle{background:#fff;border:1px solid #e2e8f0;border-radius:10px;gap:.25rem;padding:.25rem;display:inline-flex}.task-view-btn{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s;display:flex}.task-view-btn:hover:not(.active){color:#000;background:#f1f5f9}.task-view-btn.active{color:#fff;background:#000}.task-alert{text-align:left;border-radius:12px;align-items:center;gap:.65rem;margin-bottom:1.5rem;padding:.85rem 1.15rem;font-size:.875rem;font-weight:600;display:flex}.task-alert.error{color:#991b1b;background:#fef2f2;border:1px solid #fecaca}.task-form-card{text-align:left;background:#fff;border:1px solid #e2e8f0;border-radius:20px;max-width:650px;margin:0 auto;padding:2.25rem;box-shadow:0 8px 24px #0000000a}.task-form-header{margin-bottom:1.75rem}.task-form-header h2{letter-spacing:-.02em;color:#000;margin:0 0 .35rem;font-size:1.5rem;font-weight:800}.task-form-header p{color:#64748b;margin:0;font-size:.9rem;font-weight:500}.task-form{flex-direction:column;gap:1.35rem;display:flex}.task-form-group{text-align:left;flex-direction:column;gap:.45rem;display:flex}.task-label{color:#0f172a;font-size:.875rem;font-weight:700}.task-label .required{color:#ef4444;margin-left:2px}.sub-label{color:#64748b;margin-bottom:.25rem;font-size:.775rem;font-weight:700;display:block}.duration-inputs-row{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.duration-field{flex-direction:column;display:flex}.completion-input-box{align-items:center;display:flex;position:relative}.completion-input-box .task-input{padding-right:2.5rem}.percent-symbol{color:#64748b;pointer-events:none;font-size:.95rem;font-weight:700;position:absolute;right:1.15rem}.task-status-preview{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;justify-content:space-between;align-items:center;margin-top:.25rem;padding:.85rem 1.15rem;display:flex}.preview-label{color:#475569;font-size:.85rem;font-weight:700}.status-badge{text-transform:uppercase;letter-spacing:.03em;border-radius:20px;align-items:center;padding:.35rem .85rem;font-size:.775rem;font-weight:800;display:inline-flex}.status-badge.not-started{color:#64748b;background:#f1f5f9;border:1px solid #cbd5e1}.status-badge.in-progress{color:#2563eb;background:#eff6ff;border:1px solid #bfdbfe}.status-badge.completed{color:#166534;background:#f0fdf4;border:1px solid #bbf7d0}.task-input{color:#0f172a;box-sizing:border-box;background:#fff;border:1px solid #cbd5e1;border-radius:12px;outline:none;width:100%;padding:.85rem 1.15rem;font-family:inherit;font-size:.95rem;transition:all .2s}.task-input:focus{border-color:#000;box-shadow:0 0 0 3px #00000014}.task-input[type=number]::-webkit-inner-spin-button{-webkit-appearance:none;margin:0}.task-input[type=number]::-webkit-outer-spin-button{-webkit-appearance:none;margin:0}.task-input[type=number]{-moz-appearance:textfield}.task-select{color:#0f172a;box-sizing:border-box;appearance:none;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") right 1rem center/16px no-repeat;border:1px solid #cbd5e1;border-radius:12px;outline:none;width:100%;padding:.85rem 2.5rem .85rem 1.15rem;font-family:inherit;font-size:.95rem;transition:all .2s}.task-select:focus{border-color:#000;box-shadow:0 0 0 3px #00000014}.task-form-actions{border-top:1px solid #f1f5f9;justify-content:flex-end;align-items:center;gap:.85rem;margin-top:1rem;padding-top:1rem;display:flex}.task-btn{cursor:pointer;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;padding:.85rem 1.75rem;font-family:inherit;font-size:.95rem;font-weight:700;transition:all .2s;display:inline-flex}.task-btn.primary{color:#fff;background:#000;border:none;box-shadow:0 4px 12px #00000026}.task-btn.primary:hover:not(:disabled){background:#1e293b;transform:translateY(-2px);box-shadow:0 6px 16px #0003}.task-btn.secondary{color:#475569;background:#fff;border:1px solid #cbd5e1}.task-btn.secondary:hover:not(:disabled){color:#000;background:#f1f5f9;border-color:#94a3b8}.task-btn:disabled{opacity:.6;cursor:not-allowed}.task-progress-box{align-items:center;gap:.65rem;min-width:140px;display:flex}.task-progress-bar-bg{background:#e2e8f0;border-radius:6px;flex:1;height:8px;overflow:hidden}.task-progress-bar-fill{border-radius:6px;height:100%;transition:width .3s,background-color .3s}.task-progress-text{color:#0f172a;text-align:right;min-width:32px;font-size:.8rem;font-weight:800}.task-table-wrapper{background:#fff;border:1px solid #e2e8f0;border-radius:20px;overflow:hidden;box-shadow:0 4px 16px #00000008}.task-table{border-collapse:collapse;text-align:left;width:100%}.task-table th{color:#64748b;text-transform:uppercase;letter-spacing:.05em;background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:1rem 1.25rem;font-size:.8rem;font-weight:700}.task-table td{color:#0f172a;vertical-align:middle;border-bottom:1px solid #f1f5f9;padding:1.15rem 1.25rem;font-size:.9rem}.task-table tr:last-child td{border-bottom:none}.task-table tr:hover td{background:#f8fafc}.task-name-cell{color:#000;font-weight:700}.task-project-badge{color:#334155;background:#f1f5f9;border-radius:20px;padding:.35rem .75rem;font-size:.8rem;font-weight:600;display:inline-block}.task-action-btns{align-items:center;gap:.5rem;display:flex}.task-action-btn{color:#64748b;cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s;display:flex}.task-action-btn.edit:hover{color:#fff;background:#6366f1;border-color:#6366f1}.task-action-btn.delete:hover{color:#fff;background:#ef4444;border-color:#ef4444}.task-card-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.25rem;display:grid}.task-card{text-align:left;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:1.5rem;transition:all .2s;box-shadow:0 2px 8px #00000008}.task-card:hover{border-color:#cbd5e1;transform:translateY(-2px);box-shadow:0 8px 20px #0000000f}.task-card-header{justify-content:space-between;align-items:center;margin-bottom:.85rem;display:flex}.task-card-number{color:#64748b;text-transform:uppercase;letter-spacing:.05em;font-size:.775rem;font-weight:700}.task-card-title{color:#000;margin:0 0 1rem;font-size:1.15rem;font-weight:800}.task-card-details{flex-direction:column;gap:.65rem;display:flex}.task-card-detail-item{justify-content:space-between;align-items:center;gap:.5rem;font-size:.875rem;display:flex}.task-detail-label{color:#64748b;font-weight:600}.task-detail-value{color:#0f172a;font-weight:700}.task-empty-state{text-align:center;color:#64748b;background:#fff;border:1px dashed #cbd5e1;border-radius:20px;padding:4rem 2rem;font-weight:600}@media (width<=640px){.task-container{padding:1.5rem 1rem}.task-form-card{padding:1.5rem 1.25rem}.duration-inputs-row{grid-template-columns:1fr}}.project-container{color:#0f172a;box-sizing:border-box;width:100%;max-width:1200px;margin:0 auto;padding:2rem 1.5rem;font-family:Plus Jakarta Sans,system-ui,-apple-system,sans-serif}.project-header{text-align:left;flex-direction:column;gap:.35rem;margin-bottom:1.5rem;display:flex}.project-title{letter-spacing:-.025em;color:#000;align-items:center;gap:.65rem;margin:0;font-size:2rem;font-weight:800;display:flex}.project-subtitle{color:#64748b;margin:0;font-size:.95rem;font-weight:500}.project-navigation{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:2rem;display:flex}.project-main-tabs{background:#fff;border:1px solid #e2e8f0;border-radius:14px;gap:.35rem;padding:.35rem;display:inline-flex;box-shadow:0 2px 8px #00000008}.project-main-tab-btn{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:10px;align-items:center;gap:.5rem;padding:.65rem 1.35rem;font-family:inherit;font-size:.9rem;font-weight:700;transition:all .25s;display:flex}.project-main-tab-btn:hover:not(.active){color:#000;background:#f1f5f9}.project-main-tab-btn.active{color:#fff;background:#000;box-shadow:0 4px 12px #00000026}.project-view-mode-toggle{background:#fff;border:1px solid #e2e8f0;border-radius:10px;gap:.25rem;padding:.25rem;display:inline-flex}.project-view-btn{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:8px;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s;display:flex}.project-view-btn:hover:not(.active){color:#000;background:#f1f5f9}.project-view-btn.active{color:#fff;background:#000}.project-alert{text-align:left;border-radius:12px;align-items:center;gap:.65rem;margin-bottom:1.5rem;padding:.85rem 1.15rem;font-size:.875rem;font-weight:600;display:flex}.project-alert.error{color:#991b1b;background:#fef2f2;border:1px solid #fecaca}.project-form-card{text-align:left;background:#fff;border:1px solid #e2e8f0;border-radius:20px;max-width:650px;margin:0 auto;padding:2.25rem;box-shadow:0 8px 24px #0000000a}.project-form-header{margin-bottom:1.75rem}.project-form-header h2{letter-spacing:-.02em;color:#000;margin:0 0 .35rem;font-size:1.5rem;font-weight:800}.project-form-header p{color:#64748b;margin:0;font-size:.9rem;font-weight:500}.project-form{flex-direction:column;gap:1.35rem;display:flex}.project-form-group{text-align:left;flex-direction:column;gap:.45rem;display:flex}.project-label{color:#0f172a;font-size:.875rem;font-weight:700}.project-label .required{color:#ef4444;margin-left:2px}.project-input{color:#0f172a;box-sizing:border-box;background:#fff;border:1px solid #cbd5e1;border-radius:12px;outline:none;width:100%;padding:.85rem 1.15rem;font-family:inherit;font-size:.95rem;transition:all .2s}.project-input:focus{border-color:#000;box-shadow:0 0 0 3px #00000014}.project-select{color:#0f172a;box-sizing:border-box;appearance:none;cursor:pointer;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") right 1rem center/16px no-repeat;border:1px solid #cbd5e1;border-radius:12px;outline:none;width:100%;padding:.85rem 2.5rem .85rem 1.15rem;font-family:inherit;font-size:.95rem;transition:all .2s}.project-select:focus{border-color:#000;box-shadow:0 0 0 3px #00000014}.project-multiselect-container{width:100%;position:relative}.project-multiselect-box{cursor:pointer;box-sizing:border-box;background:#fff;border:1px solid #cbd5e1;border-radius:12px;align-items:center;min-height:48px;padding:.4rem 2.5rem .4rem .85rem;transition:all .2s;display:flex}.project-multiselect-box:hover{border-color:#000}.project-selected-chips{flex-wrap:wrap;align-items:center;gap:.4rem;display:flex}.project-placeholder-text{color:#94a3b8;font-size:.9rem}.project-chip{color:#fff;background:#000;border-radius:20px;align-items:center;gap:.35rem;padding:.25rem .65rem;font-size:.8rem;font-weight:600;display:inline-flex}.project-chip-remove{color:#fffc;cursor:pointer;background:0 0;border:none;justify-content:center;align-items:center;padding:0;transition:color .15s;display:flex}.project-chip-remove:hover{color:#fff}.project-select-arrow{color:#64748b;pointer-events:none;position:absolute;top:50%;right:1rem;transform:translateY(-50%)}.project-dropdown-menu{z-index:50;background:#fff;border:1px solid #cbd5e1;border-radius:12px;position:absolute;top:calc(100% + .35rem);left:0;right:0;overflow:hidden;box-shadow:0 10px 25px #0000001a}.project-dropdown-search{border-bottom:1px solid #e2e8f0;padding:.65rem}.project-dropdown-search input{box-sizing:border-box;border:1px solid #e2e8f0;border-radius:8px;outline:none;width:100%;padding:.5rem .75rem;font-family:inherit;font-size:.85rem}.project-dropdown-list{max-height:180px;padding:.35rem;overflow-y:auto}.project-dropdown-item{cursor:pointer;color:#0f172a;border-radius:8px;align-items:center;gap:.65rem;padding:.55rem .75rem;font-size:.875rem;font-weight:500;transition:background .15s;display:flex}.project-dropdown-item:hover{background:#f1f5f9}.project-dropdown-item.selected{background:#f8fafc;font-weight:700}.project-dropdown-no-results{text-align:center;color:#94a3b8;padding:1rem;font-size:.85rem}.project-form-actions{border-top:1px solid #f1f5f9;justify-content:flex-end;align-items:center;gap:.85rem;margin-top:1rem;padding-top:1rem;display:flex}.project-btn{cursor:pointer;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;padding:.85rem 1.75rem;font-family:inherit;font-size:.95rem;font-weight:700;transition:all .2s;display:inline-flex}.project-btn.primary{color:#fff;background:#000;border:none;box-shadow:0 4px 12px #00000026}.project-btn.primary:hover:not(:disabled){background:#1e293b;transform:translateY(-2px);box-shadow:0 6px 16px #0003}.project-btn.secondary{color:#475569;background:#fff;border:1px solid #cbd5e1}.project-btn.secondary:hover:not(:disabled){color:#000;background:#f1f5f9;border-color:#94a3b8}.project-btn.danger{color:#fff;background:#ef4444;border:none}.project-btn.danger:hover{background:#dc2626}.project-btn:disabled{opacity:.6;cursor:not-allowed}.project-table-wrapper{background:#fff;border:1px solid #e2e8f0;border-radius:20px;overflow:hidden;box-shadow:0 4px 16px #00000008}.project-table{border-collapse:collapse;text-align:left;width:100%}.project-table th{color:#64748b;text-transform:uppercase;letter-spacing:.05em;background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:1rem 1.25rem;font-size:.8rem;font-weight:700}.project-table td{color:#0f172a;vertical-align:middle;border-bottom:1px solid #f1f5f9;padding:1.15rem 1.25rem;font-size:.9rem}.project-table tr:last-child td{border-bottom:none}.project-table tr:hover td{background:#f8fafc}.project-name-cell{color:#000;font-weight:700}.project-team-chips-table{flex-wrap:wrap;gap:.35rem;display:flex}.project-member-chip-table{color:#334155;background:#f1f5f9;border-radius:12px;padding:.25rem .6rem;font-size:.8rem;font-weight:600}.project-status-badge{border-radius:20px;padding:.35rem .75rem;font-size:.8rem;font-weight:700;display:inline-block}.project-status-badge.in-progress{color:#1d4ed8;background:#eff6ff}.project-status-badge.completed{color:#15803d;background:#f0fdf4}.project-status-badge.on-hold{color:#c2410c;background:#fff7ed}.project-status-badge.not-started{color:#475569;background:#f1f5f9}.project-action-btns{align-items:center;gap:.5rem;display:flex}.project-action-btn{color:#64748b;cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s;display:flex}.project-action-btn.edit:hover{color:#fff;background:#6366f1;border-color:#6366f1}.project-action-btn.delete:hover{color:#fff;background:#ef4444;border-color:#ef4444}.project-card-grid{grid-template-columns:repeat(auto-fill,minmax(300px,1fr));gap:1.25rem;display:grid}.project-card{text-align:left;background:#fff;border:1px solid #e2e8f0;border-radius:16px;padding:1.5rem;transition:all .2s;box-shadow:0 2px 8px #00000008}.project-card:hover{border-color:#cbd5e1;transform:translateY(-2px);box-shadow:0 8px 20px #0000000f}.project-card-header{justify-content:space-between;align-items:center;margin-bottom:.85rem;display:flex}.project-card-number{color:#64748b;text-transform:uppercase;letter-spacing:.05em;font-size:.775rem;font-weight:700}.project-card-title{color:#000;margin:0 0 1rem;font-size:1.15rem;font-weight:800}.project-card-details{flex-direction:column;gap:.5rem;margin-bottom:1.25rem;display:flex}.project-detail-label{color:#64748b;font-size:.825rem;font-weight:600}.project-team-chips-card{flex-wrap:wrap;gap:.35rem;display:flex}.project-member-chip{color:#334155;background:#f1f5f9;border-radius:12px;padding:.25rem .6rem;font-size:.8rem;font-weight:600}.project-card-actions{border-top:1px solid #f1f5f9;align-items:center;gap:.65rem;padding-top:1rem;display:flex}.project-btn-icon{color:#475569;cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:8px;flex:1;justify-content:center;align-items:center;gap:.35rem;padding:.5rem .75rem;font-family:inherit;font-size:.825rem;font-weight:700;transition:all .2s;display:flex}.project-btn-icon.edit:hover{color:#fff;background:#6366f1;border-color:#6366f1}.project-btn-icon.delete:hover{color:#fff;background:#ef4444;border-color:#ef4444}.project-modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:100;background:#0006;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.project-modal-card{text-align:left;background:#fff;border-radius:20px;width:90%;max-width:420px;padding:2rem;box-shadow:0 20px 30px #00000026}.project-modal-card h3{color:#000;margin:0 0 .5rem;font-size:1.25rem;font-weight:800}.project-modal-card p{color:#64748b;margin:0 0 1.5rem;font-size:.9rem}.project-modal-actions{justify-content:flex-end;align-items:center;gap:.75rem;display:flex}.project-empty-state{text-align:center;color:#64748b;background:#fff;border:1px dashed #cbd5e1;border-radius:20px;padding:4rem 2rem;font-weight:600}@media (width<=640px){.project-container{padding:1.5rem 1rem}.project-form-card{padding:1.5rem 1.25rem}}.chat-layout{color:#0f172a;box-sizing:border-box;background:#f8fafc;width:100%;height:100%;font-family:Plus Jakarta Sans,system-ui,-apple-system,sans-serif;display:flex;overflow:hidden}.chat-sidebar{box-sizing:border-box;z-index:10;background:#fff;border-right:1px solid #e2e8f0;flex-direction:column;flex-shrink:0;width:320px;min-width:300px;max-width:340px;height:100%;display:flex;overflow:hidden}.chat-sidebar-header{flex-direction:column;gap:.75rem;padding:1.25rem 1rem .75rem;display:flex}.chat-tabs{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:14px;gap:.25rem;padding:.25rem;display:flex}.chat-tab-btn{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:10px;flex:1;justify-content:center;align-items:center;gap:.45rem;padding:.6rem .85rem;font-family:inherit;font-size:.85rem;font-weight:700;transition:all .2s;display:flex}.chat-tab-btn:hover:not(.active){color:#000}.chat-tab-btn.active{color:#fff;background:#000;box-shadow:0 4px 12px #0000001f}.chat-search-wrapper{align-items:center;margin:.5rem 1rem .85rem;display:flex;position:relative}.chat-search-wrapper .search-icon{color:#94a3b8;pointer-events:none;position:absolute;left:.85rem}.chat-search-input{color:#0f172a;box-sizing:border-box;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;outline:none;width:100%;padding:.6rem .85rem .6rem 2.5rem;font-family:inherit;font-size:.85rem;font-weight:600;transition:all .2s}.chat-search-input:focus{background:#fff;border-color:#000;box-shadow:0 0 0 3px #0000000d}.chat-create-group-btn{color:#000;cursor:pointer;background:#f8fafc;border:1.5px dashed #cbd5e1;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:.6rem 1rem;font-family:inherit;font-size:.85rem;font-weight:700;transition:all .2s;display:flex}.chat-create-group-btn:hover{color:#fff;background:#000;border-color:#000}.chat-list{flex-direction:column;flex:1;gap:.25rem;padding:0 .5rem 1rem;display:flex;overflow-y:auto}.chat-item{cursor:pointer;text-align:left;border-radius:16px;align-items:center;gap:.85rem;padding:.75rem .85rem;transition:all .2s;display:flex;position:relative}.chat-item:hover{background:#f1f5f9}.chat-item.selected{color:#fff;background:#000}.chat-item.selected .chat-item-name,.chat-item.selected .chat-item-preview{color:#fff}.chat-item.selected .chat-item-time{color:#ffffffb3}.chat-item-avatar{color:#fff;background:#0f172a;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:1rem;font-weight:800;display:flex;position:relative}.chat-item.selected .chat-item-avatar{color:#000;background:#fff}.group-avatar{background:linear-gradient(135deg,#334155,#0f172a)}.status-indicator{border:2px solid #fff;border-radius:50%;width:11px;height:11px;position:absolute;bottom:1px;right:1px}.status-indicator.online{background:#10b981}.status-indicator.offline{background:#94a3b8}.chat-item-info{flex-direction:column;flex:1;gap:.2rem;min-width:0;display:flex}.chat-item-top{justify-content:space-between;align-items:center;display:flex}.chat-item-name{color:#0f172a;white-space:nowrap;text-overflow:ellipsis;font-size:.9rem;font-weight:800;overflow:hidden}.chat-item-time{color:#94a3b8;flex-shrink:0;font-size:.75rem;font-weight:600}.chat-item-bottom{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.chat-item-preview{color:#64748b;white-space:nowrap;text-overflow:ellipsis;font-size:.8rem;font-weight:500;overflow:hidden}.unread-badge{color:#fff;background:#000;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:20px;height:20px;font-size:.7rem;font-weight:800;display:flex}.chat-item.selected .unread-badge{color:#000;background:#fff}.chat-empty-state{text-align:center;color:#64748b;padding:2.5rem 1rem;font-size:.85rem;font-weight:600}.chat-main{background:#f8fafc;flex-direction:column;flex:1;min-width:0;height:100%;min-height:0;display:flex;position:relative;overflow:hidden}.chat-avatar-img{object-fit:cover;border-radius:50%;width:100%;height:100%}.lightbox-content-card{background:#fff;border-radius:16px;flex-direction:column;max-width:90vw;max-height:90vh;display:flex;overflow:hidden;box-shadow:0 25px 50px -12px #0006}.lightbox-header{color:#fff;background:#0f172a;justify-content:space-between;align-items:center;padding:.85rem 1.25rem;font-size:.9rem;font-weight:700;display:flex}.lightbox-body{background:#020617;justify-content:center;align-items:center;padding:1rem;display:flex;overflow:auto}.lightbox-full-img{object-fit:contain;border-radius:8px;max-width:85vw;max-height:75vh}.chat-no-selection{color:#64748b;text-align:center;flex-direction:column;flex:1;justify-content:center;align-items:center;padding:2rem;display:flex}.chat-no-selection h3{color:#0f172a;margin:0 0 .5rem;font-size:1.25rem;font-weight:800}.chat-header{z-index:5;background:#fff;border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;padding:1rem 1.5rem;display:flex}.chat-header-info{text-align:left;align-items:center;gap:.85rem;display:flex}.header-avatar{width:44px;height:44px;font-size:1.1rem}.chat-header-title{color:#0f172a;margin:0;font-size:1.1rem;font-weight:800}.chat-header-status{color:#94a3b8;font-size:.775rem;font-weight:600}.chat-header-status.online{color:#10b981}.messages-container{flex-direction:column;flex:1;gap:1rem;min-height:0;padding:1.5rem;display:flex;overflow-y:auto}.date-separator{justify-content:center;align-items:center;margin:.5rem 0;display:flex}.date-separator span{color:#475569;letter-spacing:.05em;background:#e2e8f0;border-radius:20px;padding:.3rem .9rem;font-size:.725rem;font-weight:800}.message-action-menu{opacity:.75;align-items:center;gap:.35rem;margin-top:.35rem;transition:opacity .2s;display:flex}.message-row:hover .message-action-menu{opacity:1}.msg-action-icon{color:#fff;cursor:pointer;background:#fff3;border:none;border-radius:6px;justify-content:center;align-items:center;padding:.25rem .45rem;transition:background .15s;display:inline-flex}.message-row.received .msg-action-icon{color:#475569;background:#f1f5f9}.msg-action-icon:hover{background:#ffffff59}.msg-action-icon.delete:hover{color:#fff!important;background:#ef4444!important}.edited-badge{opacity:.75;margin-left:.4rem;font-size:.7rem;font-style:italic}.message-inline-edit{flex-direction:column;gap:.4rem;min-width:220px;display:flex}.inline-edit-input{box-sizing:border-box;border:1px solid #cbd5e1;border-radius:8px;outline:none;width:100%;padding:.45rem .65rem;font-family:inherit;font-size:.85rem}.inline-edit-actions{justify-content:flex-end;align-items:center;gap:.4rem;display:flex}.btn-inline-save{color:#fff;cursor:pointer;background:#22c55e;border:none;border-radius:6px;padding:.25rem .65rem;font-size:.75rem;font-weight:700}.btn-inline-cancel{color:#334155;cursor:pointer;background:#cbd5e1;border:none;border-radius:6px;padding:.25rem .65rem;font-size:.75rem;font-weight:700}.message-row.sent{align-self:flex-end;align-items:flex-end}.message-row.received{align-self:flex-start;align-items:flex-start}.message-bubble{word-break:break-word;text-align:left;border-radius:18px;padding:.85rem 1.1rem;position:relative;box-shadow:0 2px 8px #00000008}.message-row.sent .message-bubble{color:#fff;background:#000;border-bottom-right-radius:4px}.message-row.received .message-bubble{color:#0f172a;background:#fff;border:1px solid #e2e8f0;border-bottom-left-radius:4px}.message-sender-name{color:#6366f1;margin-bottom:.25rem;font-size:.75rem;font-weight:800}.message-text{font-size:.9rem;font-weight:500;line-height:1.45}.message-meta{justify-content:flex-end;align-items:center;gap:.35rem;margin-top:.35rem;display:flex}.message-time{opacity:.7;font-size:.7rem;font-weight:600}.read-check{flex-shrink:0;transition:color .2s}.message-image-wrapper{border-radius:12px;max-width:280px;margin-bottom:.35rem;overflow:hidden}.message-image{object-fit:cover;width:100%;height:auto;display:block}.message-file-card{background:#f1f5f980;border-radius:12px;align-items:center;gap:.75rem;margin-bottom:.35rem;padding:.65rem .85rem;display:flex}.file-info{flex-direction:column;flex:1;min-width:0;display:flex}.file-name{white-space:nowrap;text-overflow:ellipsis;font-size:.85rem;font-weight:700;overflow:hidden}.file-size{opacity:.75;font-size:.75rem}.file-download-btn{color:inherit;border-radius:8px;justify-content:center;align-items:center;padding:.35rem;display:flex}.message-sticker-pill{background:#fff3;border-radius:12px;padding:.4rem .75rem;font-size:.95rem;font-weight:800}.attachment-preview-bar{background:#fff;border-top:1px solid #e2e8f0;align-items:center;gap:.85rem;padding:.65rem 1.25rem;display:flex}.attachment-thumb{object-fit:cover;border-radius:8px;width:40px;height:40px}.attachment-meta{text-align:left;flex-direction:column;flex:1;display:flex}.attachment-name{color:#0f172a;font-size:.85rem;font-weight:700}.attachment-size{color:#64748b;font-size:.75rem}.remove-attachment-btn{color:#475569;cursor:pointer;background:#f1f5f9;border:none;border-radius:50%;justify-content:center;align-items:center;width:28px;height:28px;display:flex}.file-error-banner{color:#991b1b;text-align:left;background:#fef2f2;border-top:1px solid #fecaca;padding:.5rem 1.25rem;font-size:.8rem;font-weight:700}.composer-bar{background:#fff;border-top:1px solid #e2e8f0;align-items:center;gap:.75rem;padding:.85rem 1.25rem;display:flex;position:relative}.composer-icon-btn{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:10px;justify-content:center;align-items:center;padding:.5rem;transition:all .2s;display:flex}.composer-icon-btn:hover,.composer-icon-btn.active{color:#000;background:#f1f5f9}.composer-input{color:#0f172a;background:#f8fafc;border:1px solid #e2e8f0;border-radius:24px;outline:none;flex:1;padding:.75rem 1.1rem;font-family:inherit;font-size:.9rem;font-weight:500;transition:all .2s}.composer-input:focus{background:#fff;border-color:#000;box-shadow:0 0 0 3px #0000000d}.send-message-btn{color:#fff;cursor:pointer;background:#000;border:none;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;transition:all .2s;display:flex;box-shadow:0 4px 12px #00000026}.send-message-btn:disabled{cursor:not-allowed;box-shadow:none;background:#cbd5e1}.send-message-btn:not(:disabled):hover{background:#1e293b;transform:scale(1.05)}.emoji-picker-popover{z-index:50;background:#fff;border:1px solid #e2e8f0;border-radius:18px;grid-template-columns:repeat(6,1fr);gap:.4rem;max-height:220px;padding:.85rem;display:grid;position:absolute;bottom:4.5rem;left:1.25rem;overflow-y:auto;box-shadow:0 10px 30px #0000001f}.emoji-item-btn{cursor:pointer;background:0 0;border:none;border-radius:8px;padding:.35rem;font-size:1.35rem;transition:background .15s}.emoji-item-btn:hover{background:#f1f5f9}.sticker-picker-popover{z-index:50;background:#fff;border:1px solid #e2e8f0;border-radius:18px;grid-template-columns:repeat(2,1fr);gap:.5rem;max-width:320px;padding:.85rem;display:grid;position:absolute;bottom:4.5rem;left:1.25rem;box-shadow:0 10px 30px #0000001f}.sticker-item-btn{cursor:pointer;color:#0f172a;text-align:center;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:.5rem .75rem;font-size:.8rem;font-weight:700;transition:all .2s}.sticker-item-btn:hover{color:#fff;background:#000;border-color:#000}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:200;background:#0f172a66;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal-card{text-align:left;background:#fff;border:1px solid #e2e8f0;border-radius:24px;width:100%;max-width:460px;padding:2rem;box-shadow:0 20px 40px #00000026}.modal-header h3{color:#0f172a;margin:0;font-size:1.35rem;font-weight:800}.modal-close{color:#475569;cursor:pointer;background:#f1f5f9;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;display:flex}.form-group{text-align:left;flex-direction:column;gap:.45rem;display:flex}.form-input{color:#0f172a;border:1px solid #cbd5e1;border-radius:12px;outline:none;padding:.75rem 1rem;font-family:inherit;font-size:.9rem;transition:border-color .2s}.form-input:focus{border-color:#000}.group-members-select-list{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;flex-direction:column;gap:.5rem;max-height:200px;padding:.5rem;display:flex;overflow-y:auto}.group-member-checkbox-item{cursor:pointer;color:#0f172a;-webkit-user-select:none;user-select:none;border-radius:10px;align-items:center;gap:.75rem;padding:.5rem .75rem;font-size:.85rem;font-weight:600;transition:background .15s;display:flex}.group-member-checkbox-item:hover{background:#e2e8f0}.group-member-checkbox-item.selected{background:#eff6ff;border:1px solid #bfdbfe}.btn-secondary{color:#475569;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:12px;padding:.65rem 1.25rem;font-family:inherit;font-size:.875rem;font-weight:700}.btn-primary{color:#fff;cursor:pointer;background:#000;border:none;border-radius:12px;padding:.65rem 1.25rem;font-family:inherit;font-size:.875rem;font-weight:700}.small-avatar{width:32px;height:32px;font-size:.8rem}.creator-badge{color:#b45309;background:#fef3c7;border:1px solid #fde68a;border-radius:12px;align-items:center;margin-left:.5rem;padding:.15rem .5rem;font-size:.7rem;font-weight:800;display:inline-flex}.chat-info-btn{color:#475569;cursor:pointer;background:#f1f5f9;border:none;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;transition:all .2s;display:flex}.chat-info-btn:hover{color:#fff;background:#000}.group-info-header-card{text-align:center;border-bottom:1px solid #e2e8f0;flex-direction:column;align-items:center;margin-bottom:1rem;padding:.5rem 0 1.25rem;display:flex}.group-info-avatar{color:#fff;background:linear-gradient(135deg,#334155,#0f172a);border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;margin-bottom:.75rem;font-size:1.6rem;font-weight:800;display:flex}.group-info-name{color:#0f172a;margin:0 0 .25rem;font-size:1.2rem;font-weight:800}.group-info-sub{color:#64748b;font-size:.825rem;font-weight:600}.group-info-creator{color:#d97706;background:#fffbeb;border:1px solid #fef3c7;border-radius:20px;align-items:center;gap:.35rem;margin-top:.5rem;padding:.25rem .75rem;font-size:.8rem;font-weight:700;display:inline-flex}.group-members-list{flex-direction:column;gap:.5rem;max-height:260px;padding-right:.25rem;display:flex;overflow-y:auto}.group-member-info-item{background:#f8fafc;border:1px solid #f1f5f9;border-radius:14px;align-items:center;gap:.85rem;padding:.65rem .85rem;display:flex}.message-action-wrapper{opacity:0;z-index:10;transition:opacity .15s;position:absolute;top:6px;right:6px}.message-row:hover .message-action-wrapper{opacity:1}.msg-menu-btn{color:#fff;cursor:pointer;background:#0f172a99;border:none;border-radius:50%;justify-content:center;align-items:center;width:24px;height:24px;transition:background .15s;display:flex;box-shadow:0 2px 6px #00000026}.message-row.received .msg-menu-btn{color:#475569;background:#e2e8f0}.msg-menu-btn:hover{background:#000000d9}.msg-dropdown-popover{z-index:100;background:#fff;border:1px solid #e2e8f0;border-radius:12px;flex-direction:column;gap:2px;min-width:110px;padding:4px;animation:.15s ease-out fadeIn;display:flex;position:absolute;top:28px;right:0;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d}.msg-dropdown-item{color:#334155;cursor:pointer;text-align:left;background:0 0;border:none;border-radius:8px;align-items:center;gap:8px;padding:8px 12px;font-family:inherit;font-size:.8rem;font-weight:600;transition:background .15s;display:flex}.msg-dropdown-item:hover{color:#0f172a;background:#f1f5f9}.msg-dropdown-item.danger{color:#ef4444}.msg-dropdown-item.danger:hover{color:#dc2626;background:#fef2f2}.creator-badge{color:#4338ca;background:#e0e7ff;border-radius:12px;padding:2px 8px;font-size:.7rem;font-weight:800}.btn-remove-member{color:#dc2626;cursor:pointer;background:#fef2f2;border:1px solid #fecaca;border-radius:8px;align-items:center;gap:4px;padding:4px 10px;font-size:.75rem;font-weight:700;transition:all .15s;display:inline-flex}.btn-remove-member:hover{color:#fff;background:#dc2626;border-color:#dc2626}.profile-modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#0f172a99;justify-content:center;align-items:center;padding:1rem;animation:.2s ease-out modalOverlayFade;display:flex;position:fixed;inset:0}@keyframes modalOverlayFade{0%{opacity:0}to{opacity:1}}.profile-modal-card{box-sizing:border-box;background:#fff;border-radius:20px;flex-direction:column;align-items:center;width:100%;max-width:360px;padding:2.25rem 2rem 2rem;animation:.25s cubic-bezier(.16,1,.3,1) modalScaleIn;display:flex;position:relative;box-shadow:0 25px 50px -12px #00000040}@keyframes modalScaleIn{0%{opacity:0;transform:scale(.92)translateY(10px)}to{opacity:1;transform:scale(1)translateY(0)}}.profile-modal-close{color:#64748b;cursor:pointer;background:#f1f5f9;border:none;border-radius:50%;justify-content:center;align-items:center;width:32px;height:32px;transition:all .15s;display:flex;position:absolute;top:1rem;right:1rem}.profile-modal-close:hover{color:#fff;background:#000}.profile-modal-avatar-container{background:#0f172a;border:3px solid #fff;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:100px;height:100px;margin-bottom:1.25rem;display:flex;overflow:hidden;box-shadow:0 8px 24px #0000001f}.profile-modal-avatar-img{object-fit:cover;width:100%;height:100%}.profile-modal-avatar-fallback{color:#fff;background:linear-gradient(135deg,#0f172a 0%,#334155 100%);justify-content:center;align-items:center;width:100%;height:100%;font-size:2.25rem;font-weight:800;display:flex}.profile-modal-name{color:#0f172a;text-align:center;margin:0 0 .4rem;font-size:1.25rem;font-weight:800}.profile-modal-role{color:#000;text-transform:uppercase;letter-spacing:.5px;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:20px;margin-bottom:1.25rem;padding:.25rem .75rem;font-size:.75rem;font-weight:700}.profile-modal-details-list{border-top:1px solid #f1f5f9;flex-direction:column;gap:.6rem;width:100%;padding-top:1rem;display:flex}.profile-modal-detail{justify-content:space-between;align-items:center;width:100%;font-size:.85rem;display:flex}.profile-modal-detail .detail-label{color:#64748b;font-weight:600}.profile-modal-detail .detail-value{color:#0f172a;font-weight:700}.message-status-sending{color:#ffffffb3;align-items:center;font-size:.75rem;display:inline-flex}.read-check.sent{color:#ffffffb3}.read-check.delivered{color:#ffffffe6}.read-check.read{color:#38bdf8}.clickable-avatar{cursor:pointer;-webkit-user-select:none;user-select:none}.employee-page-container{color:#1e293b;max-width:1320px;margin:0 auto;padding:28px;font-family:system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,Roboto,sans-serif}.employee-header{flex-wrap:wrap;justify-content:space-between;align-items:flex-start;gap:16px;margin-bottom:24px;display:flex}.employee-title{color:#0f172a;align-items:center;gap:10px;margin:0 0 6px;font-size:26px;font-weight:700;display:flex}.employee-subtitle{color:#64748b;margin:0;font-size:14px}.employee-stats{gap:12px;display:flex}.stat-pill{background:#fff;border:1px solid #e2e8f0;border-radius:12px;flex-direction:column;align-items:center;padding:8px 16px;display:flex;box-shadow:0 1px 3px #0000000d}.stat-label{text-transform:uppercase;color:#94a3b8;letter-spacing:.5px;font-size:11px;font-weight:600}.stat-value{color:#4f46e5;font-size:18px;font-weight:700}.employee-alert{border-radius:10px;align-items:center;gap:12px;margin-bottom:24px;padding:12px 18px;font-size:14px;font-weight:500;display:flex;position:relative}.employee-alert.success{color:#065f46;background:#ecfdf5;border:1px solid #a7f3d0}.employee-alert.error{color:#991b1b;background:#fef2f2;border:1px solid #fecaca}.alert-close-btn{cursor:pointer;color:inherit;opacity:.7;background:0 0;border:none;margin-left:auto}.alert-close-btn:hover{opacity:1}.employee-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;margin-bottom:28px;padding:24px;box-shadow:0 4px 6px -1px #0000000a,0 2px 4px -1px #00000005}.card-header{margin-bottom:20px}.card-title{color:#0f172a;align-items:center;gap:8px;margin:0 0 4px;font-size:18px;font-weight:700;display:flex}.card-subtitle{color:#64748b;margin:0;font-size:13px}.create-form{flex-direction:column;gap:20px;display:flex}.form-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:18px 20px;display:grid}.form-group{flex-direction:column;gap:6px;display:flex}.required-star{color:#ef4444;margin-left:2px}.input-icon-wrapper{align-items:center;width:100%;display:flex;position:relative}.input-icon{color:#94a3b8;pointer-events:none;z-index:5;flex-shrink:0;position:absolute;top:50%;left:14px;transform:translateY(-50%)}.form-input,.form-select{color:#0f172a;box-sizing:border-box;background-color:#fff;border:1px solid #cbd5e1;border-radius:10px;outline:none;width:100%;height:42px;font-family:inherit;font-size:14px;font-weight:500;line-height:20px;transition:all .2s;padding:10px 14px 10px 44px!important}.form-select{appearance:none;background-image:url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%2394a3b8' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='m6 9 6 6 6-6'/%3E%3C/svg%3E");background-position:right 14px center;background-repeat:no-repeat;padding-right:36px!important}.form-input:focus,.form-select:focus{background-color:#fff;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11f}.password-toggle-btn{color:#94a3b8;cursor:pointer;z-index:5;background:0 0;border:none;justify-content:center;align-items:center;padding:4px;display:flex;position:absolute;top:50%;right:12px;transform:translateY(-50%)}.password-toggle-btn:hover{color:#475569}.form-actions{justify-content:flex-end;gap:12px;margin-top:12px;display:flex}.btn-primary{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6366f1,#4f46e5);border:none;border-radius:10px;align-items:center;gap:8px;padding:10px 20px;font-size:14px;font-weight:600;transition:transform .1s,box-shadow .2s;display:inline-flex;box-shadow:0 2px 4px #4f46e533}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#4f46e5,#4338ca);box-shadow:0 4px 8px #4f46e54d}.btn-primary:disabled{opacity:.65;cursor:not-allowed}.btn-secondary{color:#475569;cursor:pointer;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:10px;align-items:center;gap:8px;padding:10px 18px;font-size:14px;font-weight:600;display:inline-flex}.btn-secondary:hover:not(:disabled){color:#1e293b;background:#e2e8f0}.btn-danger{color:#fff;cursor:pointer;background:#ef4444;border:none;border-radius:10px;padding:10px 18px;font-size:14px;font-weight:600}.btn-danger:hover{background:#dc2626}.btn-spinner{border:2px solid #ffffff4d;border-top-color:#fff;border-radius:50%;width:16px;height:16px;animation:.8s linear infinite spin}.table-header-wrapper{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;margin-bottom:18px;display:flex}.search-wrapper{align-items:center;min-width:280px;display:flex;position:relative}.search-icon{color:#94a3b8;position:absolute;left:12px}.search-input{background:#f8fafc;border:1px solid #cbd5e1;border-radius:10px;outline:none;width:100%;padding:8px 12px 8px 36px;font-size:13px}.search-input:focus{background:#fff;border-color:#6366f1}.table-container{overflow-x:auto}.employee-table{border-collapse:collapse;text-align:left;width:100%}.employee-table th{text-transform:uppercase;color:#64748b;letter-spacing:.5px;background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:12px 16px;font-size:12px;font-weight:700}.employee-table td{vertical-align:middle;border-bottom:1px solid #f1f5f9;padding:14px 16px;font-size:14px}.employee-table tbody tr:hover{background:#f8fafc}.user-cell{align-items:center;gap:12px;display:flex}.avatar-circle{aspect-ratio:1;color:#fff;background:linear-gradient(135deg,#6366f1,#818cf8);border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;min-width:36px;height:36px;min-height:36px;font-size:13px;font-weight:700;display:flex;overflow:hidden}.avatar-circle-img{object-fit:cover;object-position:center;border-radius:50%;width:100%;height:100%;display:block}.user-name{color:#0f172a;font-weight:600}.user-dept{color:#64748b;font-size:12px}.role-badge-select{cursor:pointer;border:1px solid #0000;border-radius:8px;outline:none;padding:4px 10px;font-size:12px;font-weight:600}.role-badge-select.role-admin{color:#7e22ce;background:#f3e8ff;border-color:#d8b4fe}.role-badge-select.role-manager{color:#0369a1;background:#e0f2fe;border-color:#7dd3fc}.role-badge-select.role-employee{color:#047857;background:#ecfdf5;border-color:#6ee7b7}.role-badge-readonly{border-radius:8px;padding:4px 12px;font-size:12px;font-weight:600;display:inline-block}.role-badge-readonly.role-admin{color:#7e22ce;background:#f3e8ff;border:1px solid #d8b4fe}.role-badge-readonly.role-manager{color:#0369a1;background:#e0f2fe;border:1px solid #7dd3fc}.role-badge-readonly.role-employee{color:#047857;background:#ecfdf5;border:1px solid #6ee7b7}.status-badge-btn{cursor:pointer;border:none;border-radius:8px;align-items:center;gap:5px;padding:4px 10px;font-size:12px;font-weight:600;display:inline-flex}.status-badge-btn.status-active{color:#15803d;background:#dcfce7}.status-badge-btn.status-inactive{color:#64748b;background:#f1f5f9}.action-buttons{justify-content:flex-end;gap:8px;display:flex}.action-btn{cursor:pointer;color:#64748b;background:#fff;border:1px solid #e2e8f0;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;transition:background .15s,color .15s;display:inline-flex}.action-btn.edit-btn:hover{color:#4338ca;background:#e0e7ff;border-color:#c7d2fe}.action-btn.delete-btn:hover{color:#b91c1c;background:#fee2e2;border-color:#fca5a5}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999;background:#0f172a73;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-card{background:#fff;border-radius:16px;width:100%;max-width:480px;padding:24px;box-shadow:0 20px 25px -5px #0000001a}.modal-card.small{max-width:400px}.modal-header{justify-content:space-between;align-items:center;margin-bottom:16px;display:flex}.modal-header h3{margin:0;font-size:18px;font-weight:700}.modal-close{cursor:pointer;color:#94a3b8;background:0 0;border:none}.modal-body{flex-direction:column;gap:14px;display:flex}.modal-actions{justify-content:flex-end;gap:12px;margin-top:12px;display:flex}.employee-unauthorized-container{justify-content:center;align-items:center;min-height:80vh;padding:20px;display:flex}.employee-unauthorized-card{text-align:center;background:#fff;border:1px solid #fecaca;border-radius:20px;max-width:460px;padding:40px 32px;box-shadow:0 10px 15px -3px #ef444414}.unauthorized-icon-wrapper{background:#fef2f2;border-radius:50%;justify-content:center;align-items:center;width:80px;height:80px;margin:0 auto 20px;display:flex}.unauthorized-icon{color:#ef4444}.unauthorized-title{color:#991b1b;margin:0 0 10px;font-size:22px;font-weight:700}.unauthorized-desc{color:#64748b;margin:0 0 20px;font-size:14px;line-height:1.6}.unauthorized-badge{color:#b91c1c;background:#fee2e2;border-radius:20px;padding:6px 14px;font-size:12px;font-weight:700;display:inline-block}.table-loading-state,.table-empty-state{text-align:center;color:#64748b;padding:48px 20px}.empty-icon{color:#cbd5e1;margin-bottom:12px}.emp-id-cell{color:#475569;white-space:nowrap;font-family:SFMono-Regular,Consolas,Liberation Mono,Menlo,monospace;font-size:.85rem;font-weight:700}.emp-date-cell{color:#64748b;white-space:nowrap;font-size:.85rem;font-weight:500}.report-container{color:#0f172a;box-sizing:border-box;width:100%;max-width:1380px;margin:0 auto;padding:1.75rem 1.5rem 4rem;font-family:Plus Jakarta Sans,system-ui,-apple-system,sans-serif}.report-header{text-align:left;flex-direction:column;gap:.35rem;margin-bottom:1.5rem;display:flex}.report-title{letter-spacing:-.025em;color:#0f172a;align-items:center;gap:.65rem;margin:0;font-size:1.85rem;font-weight:800;display:flex}.report-subtitle{color:#64748b;margin:0;font-size:.925rem;font-weight:500}.report-emp-grid-toolbar{background:#fff;border:1px solid #e2e8f0;border-radius:20px;flex-direction:column;gap:1.25rem;margin-bottom:2rem;padding:1.25rem 1.5rem;display:flex;box-shadow:0 4px 16px #00000008}.report-search-bar{background:#f8fafc;border:1px solid #cbd5e1;border-radius:14px;flex:1;align-items:center;gap:.75rem;padding:.65rem 1rem;transition:all .2s;display:flex}.report-search-bar:focus-within{background:#fff;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11f}.report-search-input{color:#0f172a;background:0 0;border:none;outline:none;width:100%;font-family:inherit;font-size:.9rem}.report-status-pills{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.report-status-pill{color:#475569;cursor:pointer;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;align-items:center;gap:.4rem;padding:.45rem .9rem;font-size:.825rem;font-weight:700;transition:all .2s;display:inline-flex}.report-status-pill:hover{color:#0f172a;background:#f1f5f9}.report-status-pill.active{color:#fff;background:#6366f1;border-color:#6366f1;box-shadow:0 4px 12px #6366f140}.report-emp-cards-grid{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.5rem;margin-bottom:3rem;display:grid}@media (width>=1400px){.report-emp-cards-grid{grid-template-columns:repeat(3,1fr)}}.report-emp-card-pro{cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:28px;flex-direction:column;gap:1.1rem;padding:1rem;transition:all .25s cubic-bezier(.16,1,.3,1);display:flex;position:relative;overflow:hidden;box-shadow:0 10px 30px #0000000a}.report-emp-card-pro:hover{border-color:#cbd5e1;transform:translateY(-6px);box-shadow:0 20px 40px #0f172a1a}.report-card-photo-banner{background:linear-gradient(135deg,#4f46e5,#818cf8);border-radius:20px;width:100%;height:210px;position:relative;overflow:hidden}.report-card-banner-photo{object-fit:cover;object-position:center;border-radius:20px;width:100%;height:100%}.report-card-banner-fallback{background:linear-gradient(135deg,#6366f1,#3b82f6);justify-content:center;align-items:center;width:100%;height:100%;display:flex}.avatar-portrait-circle{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff;background:#fff3;border:2px solid #fff6;border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;font-size:1.8rem;font-weight:800;display:flex}.report-status-badge-glass{z-index:10;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);background:#ffffffeb;border:1px solid #fffc;border-radius:20px;align-items:center;gap:.4rem;padding:.4rem .85rem;font-size:.775rem;font-weight:800;display:inline-flex;position:absolute;top:12px;right:12px;box-shadow:0 4px 14px #0000001f}.report-status-badge-glass.online{color:#15803d}.report-status-badge-glass.logged_out{color:#475569}.report-status-badge-glass.on_leave{color:#7e22ce}.report-status-badge-glass.permission{color:#b45309}.report-status-dot{border-radius:50%;width:8px;height:8px}.report-status-dot.online{background:#22c55e;box-shadow:0 0 0 2px #22c55e4d}.report-status-dot.logged_out{background:#94a3b8}.report-status-dot.on_leave{background:#a855f7}.report-status-dot.permission{background:#f59e0b}.report-card-content{flex-direction:column;gap:.85rem;padding:.2rem .3rem .3rem;display:flex}.report-card-title-row{justify-content:space-between;align-items:center;gap:.5rem;display:flex}.report-card-name-group{align-items:center;gap:.35rem;min-width:0;display:flex}.report-card-name-title{color:#0f172a;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:1.25rem;font-weight:800;overflow:hidden}.report-verified-badge{color:#2563eb;fill:#2563eb;flex-shrink:0}.report-card-bio-sub{color:#64748b;white-space:nowrap;text-overflow:ellipsis;margin:0;font-size:.825rem;line-height:1.4;overflow:hidden}.report-id-code{color:#334155;white-space:nowrap;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:8px;flex-shrink:0;padding:.2rem .55rem;font-family:monospace;font-size:.775rem;font-weight:700}.report-card-stats-divider-row{background:#fff;justify-content:space-between;align-items:center;margin:.25rem 0;padding:.75rem .2rem;display:flex}.report-card-stat-unit{flex-direction:column;flex:1;justify-content:center;align-items:center;gap:.15rem;display:flex}.report-stat-num{color:#0f172a;font-size:1rem;font-weight:800}.report-stat-lbl{color:#64748b;font-size:.7rem;font-weight:700}.card-vert-divider{background:#e2e8f0;flex-shrink:0;width:1px;height:24px}.report-card-touch-btn{color:#fff;cursor:pointer;background:#0f172a;border:none;border-radius:30px;justify-content:center;align-items:center;gap:.5rem;width:100%;padding:.85rem 1rem;font-size:.9rem;font-weight:700;transition:all .2s;display:flex;box-shadow:0 4px 14px #0f172a26}.report-emp-card-pro:hover .report-card-touch-btn{background:#6366f1;transform:scale(1.01);box-shadow:0 6px 20px #6366f159}.report-back-btn{color:#0f172a;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:12px;align-self:flex-start;align-items:center;gap:.5rem;margin-bottom:1.25rem;padding:.5rem 1rem;font-size:.875rem;font-weight:700;transition:all .2s;display:inline-flex}.report-back-btn:hover{color:#fff;background:#0f172a;border-color:#0f172a;box-shadow:0 4px 12px #0f172a26}.report-task-filter-tabs{flex-wrap:wrap;align-items:center;gap:.5rem;margin-bottom:1rem;display:flex}.report-task-filter-tab{color:#475569;cursor:pointer;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:.35rem .85rem;font-size:.8rem;font-weight:700;transition:all .15s}.report-task-filter-tab:hover{color:#0f172a;background:#f1f5f9}.report-task-filter-tab.active{color:#fff;background:#6366f1;border-color:#6366f1}.report-filter-bar{background:#fff;border:1px solid #e2e8f0;border-radius:20px;flex-direction:column;gap:1.25rem;margin-bottom:2rem;padding:1.25rem 1.5rem;display:flex;box-shadow:0 4px 16px #00000008}.report-filter-top-row{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.25rem;display:flex}.report-emp-select-container{flex:1;min-width:280px;position:relative}.report-emp-select-trigger{cursor:pointer;background:#f8fafc;border:1px solid #cbd5e1;border-radius:14px;justify-content:space-between;align-items:center;padding:.65rem 1rem;transition:all .2s;display:flex}.report-emp-select-trigger:hover{background:#fff;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11f}.report-emp-dropdown-menu{z-index:100;background:#fff;border:1px solid #e2e8f0;border-radius:16px;max-height:320px;margin-top:.5rem;padding:.75rem;position:absolute;top:100%;left:0;right:0;overflow-y:auto;box-shadow:0 12px 36px #0000001f}.report-dropdown-search-box{background:#f1f5f9;border-radius:10px;align-items:center;gap:.5rem;margin-bottom:.5rem;padding:.5rem .75rem;display:flex}.report-dropdown-search-input{color:#0f172a;background:0 0;border:none;outline:none;width:100%;font-family:inherit;font-size:.85rem}.report-dropdown-item{cursor:pointer;border-radius:10px;align-items:center;gap:.75rem;padding:.65rem .85rem;transition:background .15s;display:flex}.report-dropdown-item:hover,.report-dropdown-item.selected{background:#eef2ff}.report-dropdown-avatar{color:#fff;background:linear-gradient(135deg,#6366f1,#4f46e5);border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:.85rem;font-weight:800;display:flex}.report-emp-profile-card{color:#fff;background:linear-gradient(135deg,#0f172a,#1e293b);border-radius:18px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1.25rem;padding:1.25rem 1.5rem;display:flex}.report-emp-profile-left{align-items:center;gap:1rem;display:flex}.report-emp-profile-avatar{color:#fff;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:16px;justify-content:center;align-items:center;width:56px;height:56px;font-size:1.35rem;font-weight:800;display:flex;box-shadow:0 4px 12px #6366f166}.report-emp-profile-details{text-align:left;flex-direction:column;gap:.2rem;display:flex}.report-emp-profile-name{color:#fff;margin:0;font-size:1.35rem;font-weight:800}.report-emp-profile-meta{color:#cbd5e1;flex-wrap:wrap;align-items:center;gap:.6rem;font-size:.825rem;display:flex}.report-id-chip{letter-spacing:.02em;background:#ffffff26;border-radius:6px;padding:.15rem .5rem;font-weight:700}.report-role-chip{text-transform:uppercase;border-radius:20px;padding:.2rem .6rem;font-size:.75rem;font-weight:700}.report-role-chip.admin{color:#991b1b;background:#fee2e2}.report-role-chip.manager{color:#92400e;background:#fef3c7}.report-role-chip.employee{color:#166534;background:#dcfce7}.report-date-row{border-top:1px solid #f1f5f9;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;padding-top:1rem;display:flex}.report-preset-buttons{flex-wrap:wrap;align-items:center;gap:.5rem;display:flex}.report-preset-btn{color:#475569;cursor:pointer;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;padding:.45rem .9rem;font-family:inherit;font-size:.825rem;font-weight:700;transition:all .2s}.report-preset-btn:hover{color:#0f172a;background:#f1f5f9}.report-preset-btn.active{color:#fff;background:#6366f1;border-color:#6366f1;box-shadow:0 4px 12px #6366f140}.report-date-nav{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;align-items:center;gap:.65rem;padding:.35rem .65rem;display:flex}.report-nav-btn{color:#334155;cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s;display:flex}.report-nav-btn:hover{color:#fff;background:#0f172a;border-color:#0f172a}.report-date-display{color:#0f172a;text-align:center;min-width:150px;font-size:.875rem;font-weight:800}.report-custom-dates{align-items:center;gap:.5rem;display:flex}.report-date-input{color:#0f172a;background:#fff;border:1px solid #cbd5e1;border-radius:8px;padding:.4rem .65rem;font-family:inherit;font-size:.825rem;font-weight:600}.report-refresh-btn{color:#475569;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:10px;align-items:center;gap:.4rem;padding:.45rem .85rem;font-size:.825rem;font-weight:700;transition:all .2s;display:inline-flex}.report-refresh-btn:hover{color:#0f172a;background:#f1f5f9;border-color:#94a3b8}.report-12-cards-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:1rem;margin-bottom:2rem;display:grid}.report-summary-card{text-align:left;background:#fff;border:1px solid #e2e8f0;border-radius:16px;align-items:center;gap:.9rem;padding:1.1rem 1.25rem;transition:transform .2s,box-shadow .2s;display:flex;box-shadow:0 2px 8px #00000005}.report-summary-card:hover{transform:translateY(-2px);box-shadow:0 8px 20px #0000000d}.report-card-icon{border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:44px;height:44px;font-size:1.15rem;display:flex}.report-card-icon.indigo{color:#4f46e5;background:#eef2ff}.report-card-icon.amber{color:#d97706;background:#fffbeb}.report-card-icon.emerald{color:#059669;background:#ecfdf5}.report-card-icon.blue{color:#2563eb;background:#eff6ff}.report-card-icon.rose{color:#e11d48;background:#ffe4e6}.report-card-icon.purple{color:#7e22ce;background:#f3e8ff}.report-card-icon.sky{color:#0284c7;background:#e0f2fe}.report-card-icon.violet{color:#6d28d9;background:#ede9fe}.report-card-text{flex-direction:column;display:flex}.report-card-val{color:#0f172a;font-size:1.35rem;font-weight:800;line-height:1.25}.report-card-lbl{color:#64748b;margin-top:.1rem;font-size:.775rem;font-weight:700}.report-section-card{text-align:left;background:#fff;border:1px solid #e2e8f0;border-radius:20px;margin-bottom:2rem;padding:1.75rem;box-shadow:0 4px 16px #00000005}.report-card-title{color:#0f172a;align-items:center;gap:.6rem;margin:0 0 1.25rem;font-size:1.2rem;font-weight:800;display:flex}.report-chart-container{background:#f8fafc;border:1px solid #f1f5f9;border-radius:18px;justify-content:space-around;align-items:flex-end;height:240px;margin-bottom:1.5rem;padding:1.5rem 1rem 0;display:flex}.report-chart-column{flex-direction:column;justify-content:flex-end;align-items:center;gap:.5rem;width:100px;height:100%;display:flex}.report-chart-val{color:#0f172a;font-size:.85rem;font-weight:800}.report-chart-bar-wrapper{background:#e2e8f0;border-radius:12px 12px 6px 6px;align-items:flex-end;width:52px;height:160px;display:flex;position:relative;overflow:hidden}.report-chart-bar-fill{border-radius:12px 12px 0 0;width:100%;transition:height .6s cubic-bezier(.16,1,.3,1)}.report-chart-bar-fill.normal{background:linear-gradient(#6366f1,#4f46e5)}.report-chart-bar-fill.extra{background:linear-gradient(#f59e0b,#d97706)}.report-chart-bar-fill.total{background:linear-gradient(#10b981,#059669)}.report-chart-label{color:#475569;font-size:.825rem;font-weight:700}.report-chart-legend{flex-wrap:wrap;justify-content:center;align-items:center;gap:2rem;display:flex}.report-legend-item{color:#475569;align-items:center;gap:.5rem;font-size:.825rem;font-weight:700;display:flex}.report-legend-dot{border-radius:4px;width:12px;height:12px}.report-att-metrics-row{grid-template-columns:repeat(auto-fit,minmax(140px,1fr));gap:.85rem;margin-bottom:1.5rem;display:grid}.report-att-mini-card{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;padding:.85rem 1rem}.report-att-mini-val{color:#0f172a;font-size:1.2rem;font-weight:800}.report-att-mini-lbl{color:#64748b;margin-top:.15rem;font-size:.75rem;font-weight:700}.report-timeline{border-left:2.5px dashed #cbd5e1;flex-direction:column;gap:1rem;margin-left:.75rem;padding-left:1.5rem;display:flex;position:relative}.report-timeline-item{background:#f8fafc;border:1px solid #e2e8f0;border-radius:16px;flex-direction:column;gap:.65rem;padding:1.1rem 1.35rem;display:flex;position:relative}.report-timeline-dot{background:#6366f1;border:3px solid #fff;border-radius:50%;width:14px;height:14px;position:absolute;top:1.25rem;left:-1.9rem;box-shadow:0 0 0 2px #6366f1}.report-timeline-header{justify-content:space-between;align-items:center;gap:1rem;display:flex}.report-timeline-time{color:#0f172a;font-size:.95rem;font-weight:800}.report-timeline-dur{color:#6366f1;background:#eff6ff;border-radius:8px;padding:.2rem .6rem;font-size:.8rem;font-weight:700}.report-table-wrapper{background:#fff;border:1px solid #e2e8f0;border-radius:16px;overflow-x:auto}.report-table{border-collapse:collapse;text-align:left;white-space:nowrap;width:100%}.report-table th{color:#64748b;text-transform:uppercase;letter-spacing:.04em;background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:.85rem 1.1rem;font-size:.775rem;font-weight:700}.report-table td{color:#0f172a;border-bottom:1px solid #f1f5f9;padding:.85rem 1.1rem;font-size:.85rem}.report-activity-list{flex-direction:column;gap:1rem;display:flex}.report-activity-group{flex-direction:column;gap:.75rem;display:flex}.report-activity-date-hdr{color:#6366f1;background:#eef2ff;border-radius:8px;align-self:flex-start;padding:.35rem .85rem;font-size:.85rem;font-weight:800;display:inline-block}.report-activity-item{background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;align-items:flex-start;gap:1rem;padding:.85rem 1.1rem;display:flex}.report-activity-icon{border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;font-size:1rem;display:flex}.report-activity-body{flex-direction:column;gap:.2rem;display:flex}.report-activity-title{color:#0f172a;font-size:.875rem;font-weight:800}.report-activity-desc{color:#475569;font-size:.8rem}.report-activity-time{color:#94a3b8;font-size:.75rem;font-weight:600}.report-calendar-card{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:1.75rem}.report-calendar-header{justify-content:space-between;align-items:center;margin-bottom:1.25rem;display:flex}.report-calendar-month-title{color:#0f172a;font-size:1.15rem;font-weight:800}.report-calendar-grid{grid-template-columns:repeat(7,1fr);gap:.5rem;display:grid}.report-calendar-day-header{color:#64748b;text-transform:uppercase;text-align:center;padding:.5rem 0;font-size:.75rem;font-weight:800}.report-calendar-cell{cursor:pointer;background:#f8fafc;border:1px solid #e2e8f0;border-radius:12px;flex-direction:column;justify-content:space-between;min-height:85px;padding:.5rem;transition:all .2s;display:flex}.report-calendar-cell:hover{background:#fff;border-color:#6366f1;transform:translateY(-1px);box-shadow:0 4px 12px #6366f126}.report-calendar-cell.selected-day{background:#eef2ff;border-color:#6366f1;box-shadow:0 0 0 2px #6366f1}.report-calendar-cell.other-month{opacity:.35}.report-calendar-date-num{color:#0f172a;font-size:.85rem;font-weight:800}.report-calendar-dots{flex-direction:column;gap:.2rem;display:flex}.report-calendar-tag{text-align:center;white-space:nowrap;text-overflow:ellipsis;border-radius:4px;padding:.1rem .35rem;font-size:.65rem;font-weight:700;overflow:hidden}.report-calendar-tag.work{color:#15803d;background:#dcfce7}.report-calendar-tag.leave{color:#b91c1c;background:#fee2e2}.report-calendar-tag.task{color:#3730a3;background:#e0e7ff}.report-modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#0f172a99;justify-content:center;align-items:center;padding:1.5rem;display:flex;position:fixed;inset:0}.report-modal-content{background:#fff;border-radius:20px;width:100%;max-width:650px;max-height:85vh;padding:1.75rem;overflow-y:auto;box-shadow:0 20px 50px #0003}.report-modal-header{border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding-bottom:.75rem;display:flex}.report-modal-title{color:#0f172a;margin:0;font-size:1.25rem;font-weight:800}.report-modal-close-btn{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:8px;padding:.25rem;transition:background .15s}.report-modal-close-btn:hover{color:#0f172a;background:#f1f5f9}.report-empty-card{text-align:center;color:#64748b;background:#f8fafc;border:1px dashed #cbd5e1;border-radius:16px;flex-direction:column;align-items:center;gap:.75rem;padding:2.5rem 1.5rem;font-size:.875rem;font-weight:600;display:flex}.report-skeleton-box{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%) 0 0/200% 100%;border-radius:12px;animation:1.5s infinite skeleton-wave}@keyframes skeleton-wave{0%{background-position:200% 0}to{background-position:-200% 0}}@media (width<=768px){.report-container{padding:1rem}.report-filter-top-row,.report-date-row{flex-direction:column;align-items:stretch}.report-12-cards-grid{grid-template-columns:repeat(2,1fr)}.report-calendar-grid{gap:.25rem}.report-calendar-cell{min-height:60px;padding:.25rem}}.calendar-container{color:#0f172a;box-sizing:border-box;width:100%;max-width:1200px;margin:0 auto;padding:2rem 1.5rem;font-family:Plus Jakarta Sans,system-ui,-apple-system,sans-serif}.calendar-header{margin-bottom:1.75rem}.calendar-header h1{letter-spacing:-.025em;color:#000;align-items:center;gap:.65rem;margin:0 0 .25rem;font-size:2rem;font-weight:800;display:flex}.calendar-header p{color:#64748b;margin:0;font-size:.95rem;font-weight:500}.calendar-admin-bar{flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:1.5rem;display:flex}.calendar-admin-bar label{color:#0f172a;font-size:.875rem;font-weight:700}.calendar-emp-select{color:#0f172a;cursor:pointer;appearance:none;background:#fff url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='%230f172a' stroke-width='2' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E") right .75rem center/14px no-repeat;border:1px solid #cbd5e1;border-radius:12px;outline:none;padding:.65rem 2.25rem .65rem 1rem;font-family:inherit;font-size:.9rem;font-weight:600;transition:border-color .2s}.calendar-emp-select:focus{border-color:#000;box-shadow:0 0 0 3px #00000012}.calendar-summary-grid{grid-template-columns:repeat(auto-fit,minmax(190px,1fr));gap:1rem;margin-bottom:2rem;display:grid}.calendar-stat-card{text-align:left;background:#fff;border:1px solid #e2e8f0;border-radius:16px;align-items:center;gap:.85rem;padding:1.15rem 1.35rem;display:flex;box-shadow:0 2px 8px #00000008}.calendar-stat-icon{border-radius:11px;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;display:flex}.calendar-stat-icon.purple{color:#7e22ce;background:#f3e8ff}.calendar-stat-icon.blue{color:#1d4ed8;background:#eff6ff}.calendar-stat-icon.orange{color:#c2410c;background:#fff7ed}.calendar-stat-icon.green{color:#15803d;background:#f0fdf4}.calendar-stat-icon.red{color:#991b1b;background:#fef2f2}.calendar-stat-info{flex-direction:column;display:flex}.calendar-stat-value{color:#000;font-size:1.35rem;font-weight:800;line-height:1.2}.calendar-stat-label{color:#64748b;font-size:.775rem;font-weight:600}.calendar-nav{flex-wrap:wrap;align-items:center;gap:.75rem;margin-bottom:1.5rem;display:flex}.calendar-month-title{color:#000;text-align:center;flex:1;min-width:200px;font-size:1.35rem;font-weight:800}.calendar-nav-btn{color:#0f172a;cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:10px;align-items:center;gap:.4rem;padding:.55rem 1.1rem;font-family:inherit;font-size:.875rem;font-weight:700;transition:all .2s;display:flex}.calendar-nav-btn:hover{background:#f1f5f9;border-color:#cbd5e1}.calendar-nav-btn.today{color:#fff;background:#000;border-color:#000}.calendar-nav-btn.today:hover{background:#1e293b}.calendar-grid-wrapper{background:#fff;border:1px solid #e2e8f0;border-radius:20px;overflow:hidden;box-shadow:0 4px 16px #0000000a}.calendar-grid-head{background:#f8fafc;border-bottom:1px solid #e2e8f0;grid-template-columns:repeat(7,1fr);display:grid}.calendar-grid-day-label{text-align:center;color:#64748b;text-transform:uppercase;letter-spacing:.05em;padding:.85rem 0;font-size:.775rem;font-weight:800}.calendar-grid-body{grid-template-columns:repeat(7,1fr);display:grid}.calendar-cell{cursor:default;border-bottom:1px solid #f1f5f9;border-right:1px solid #f1f5f9;flex-direction:column;gap:.35rem;min-height:90px;padding:.6rem;transition:background .15s;display:flex;position:relative}.calendar-cell:nth-child(7n){border-right:none}.calendar-cell.clickable{cursor:pointer}.calendar-cell.clickable:hover{background:#f8fafc}.calendar-cell.today-cell{background:#fafafa}.calendar-cell.today-cell .calendar-cell-num{color:#fff;background:#000}.calendar-cell.outside{background:#fbfbfb}.calendar-cell.outside .calendar-cell-num{color:#cbd5e1}.calendar-cell-num{color:#0f172a;border-radius:8px;justify-content:center;align-items:center;width:28px;height:28px;font-size:.85rem;font-weight:700;display:inline-flex}.calendar-dot-row{flex-wrap:wrap;gap:3px;margin-top:auto;display:flex}.calendar-dot{border-radius:50%;width:7px;height:7px}.calendar-dot.worked{background:#22c55e}.calendar-dot.overtime{background:#f59e0b}.calendar-dot.active{background:#6366f1}.calendar-cell-detail{color:#64748b;white-space:nowrap;text-overflow:ellipsis;font-size:.7rem;font-weight:700;line-height:1.3;overflow:hidden}.calendar-cell-detail.hours{color:#1d4ed8}.calendar-cell-detail.extra{color:#c2410c}.calendar-modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:300;background:#0006;justify-content:center;align-items:center;padding:1.5rem;display:flex;position:fixed;inset:0}.calendar-modal{text-align:left;background:#fff;border-radius:24px;width:100%;max-width:600px;max-height:85vh;padding:2rem;animation:.28s cubic-bezier(.16,1,.3,1) calModalIn;position:relative;overflow-y:auto;box-shadow:0 24px 48px #0000002e}@keyframes calModalIn{0%{opacity:0;transform:scale(.96)translateY(12px)}to{opacity:1;transform:scale(1)translateY(0)}}.calendar-modal-close{color:#64748b;cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:9px;justify-content:center;align-items:center;width:34px;height:34px;transition:all .2s;display:flex;position:absolute;top:1.35rem;right:1.35rem}.calendar-modal-close:hover{color:#fff;background:#000;border-color:#000}.calendar-modal-date{color:#000;margin:0 0 .35rem;font-size:1.5rem;font-weight:800}.calendar-modal-subtitle{color:#64748b;margin:0 0 1.5rem;font-size:.9rem;font-weight:500}.calendar-modal-summary{grid-template-columns:repeat(3,1fr);gap:.85rem;margin-bottom:1.75rem;display:grid}.calendar-modal-summary-item{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;flex-direction:column;gap:.2rem;padding:.85rem;display:flex}.cal-sum-label{color:#64748b;font-size:.75rem;font-weight:700}.cal-sum-value{color:#000;font-size:1.05rem;font-weight:800}.cal-sum-value.blue{color:#1d4ed8}.cal-sum-value.orange{color:#c2410c}.cal-sum-value.green{color:#15803d}.calendar-modal-sessions-title{color:#000;align-items:center;gap:.4rem;margin:0 0 .85rem;font-size:1rem;font-weight:800;display:flex}.calendar-session-item{border:1px solid #e2e8f0;border-radius:14px;flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:.75rem;padding:1rem 1.25rem;display:flex}.cal-session-time{color:#0f172a;font-size:.9rem;font-weight:700}.cal-session-dur{color:#64748b;font-size:.825rem;font-weight:600}.cal-session-badge{border-radius:20px;padding:.22rem .6rem;font-size:.75rem;font-weight:700;display:inline-block}.cal-session-badge.active{color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0}.cal-session-badge.logout{color:#475569;background:#f1f5f9;border:1px solid #cbd5e1}.cal-session-badge.auto{color:#c2410c;background:#fff7ed;border:1px solid #ffedd5}.calendar-live-timer{color:#15803d;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:12px;align-items:center;gap:.5rem;margin-bottom:1rem;padding:.65rem 1rem;font-size:.9rem;font-weight:700;display:flex}.calendar-loading{text-align:center;color:#64748b;padding:3rem;font-weight:600}.calendar-no-data{text-align:center;color:#94a3b8;padding:1.5rem;font-size:.875rem;font-weight:600}@media (width<=700px){.calendar-cell{min-height:62px;padding:.35rem}.calendar-cell-detail{display:none}.calendar-modal-summary{grid-template-columns:1fr 1fr}}.lp-container{max-width:1320px;margin:0 auto;padding:1.75rem}.lp-header{margin-bottom:1.75rem}.lp-header-title{color:#0f172a;align-items:center;gap:.65rem;margin:0 0 .35rem;font-size:1.75rem;font-weight:700;display:flex}.lp-header-sub{color:#64748b;margin:0;font-size:.9rem}.lp-view-switcher{background:#f1f5f9;border-radius:12px;align-items:center;gap:.5rem;width:fit-content;margin-bottom:1.5rem;padding:.35rem;display:flex}.lp-switch-btn{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:8px;align-items:center;gap:.5rem;padding:.55rem 1.25rem;font-size:.875rem;font-weight:600;transition:all .2s;display:inline-flex}.lp-switch-btn:hover{color:#1e293b}.lp-switch-btn.active{color:#6366f1;background:#fff;box-shadow:0 2px 6px #0000000f}.lp-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;margin-bottom:1.75rem;padding:1.75rem;box-shadow:0 4px 12px #00000008}.lp-card-title{color:#1e293b;justify-content:space-between;align-items:center;margin:0 0 1.25rem;font-size:1.15rem;font-weight:700;display:flex}.lp-type-toggle{gap:.75rem;margin-bottom:1.5rem;display:flex}.lp-toggle-pill{color:#64748b;cursor:pointer;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;flex:1;justify-content:center;align-items:center;gap:.5rem;padding:.75rem 1.25rem;font-size:.9rem;font-weight:600;transition:all .2s;display:flex}.lp-toggle-pill.active{color:#4f46e5;background:#eef2ff;border-color:#6366f1}.lp-form-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:1.25rem;margin-bottom:1.25rem;display:grid}.lp-form-group{flex-direction:column;gap:.4rem;display:flex}.lp-form-label{color:#334155;font-size:.825rem;font-weight:600}.lp-form-label span.req{color:#ef4444}.lp-form-input,.lp-form-select,.lp-form-textarea{color:#0f172a;box-sizing:border-box;background:#fff;border:1px solid #cbd5e1;border-radius:10px;outline:none;width:100%;padding:.65rem .85rem;font-family:inherit;font-size:.875rem;transition:border-color .15s}.lp-form-input:focus,.lp-form-select:focus,.lp-form-textarea:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.lp-calculated-badge{color:#047857;background:#ecfdf5;border:1px solid #6ee7b7;border-radius:10px;align-items:center;gap:.5rem;padding:.65rem .85rem;font-size:.875rem;font-weight:700;display:flex}.lp-btn-submit{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6366f1,#4f46e5);border:none;border-radius:10px;align-items:center;gap:.5rem;padding:.75rem 1.75rem;font-size:.9rem;font-weight:600;transition:transform .15s,box-shadow .15s;display:inline-flex}.lp-btn-submit:hover{transform:translateY(-1px);box-shadow:0 4px 12px #6366f14d}.lp-btn-submit:disabled{opacity:.6;cursor:not-allowed;transform:none}.lp-filters-bar{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));align-items:flex-end;gap:1rem;margin-bottom:1.5rem;padding:1.25rem;display:grid}.lp-filter-item,.filter-item{flex-direction:column;gap:.35rem;display:flex}.lp-filter-label,.filter-item>label{color:#475569;text-transform:uppercase;letter-spacing:.03em;font-size:.775rem;font-weight:700}.lp-filter-select,.lp-filter-input,.filter-select,.filter-input{color:#0f172a;box-sizing:border-box;background:#fff;border:1px solid #cbd5e1;border-radius:8px;outline:none;width:100%;padding:.55rem .75rem;font-family:inherit;font-size:.85rem;font-weight:600;transition:all .15s}.lp-filter-select:focus,.lp-filter-input:focus,.filter-select:focus,.filter-input:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.lp-table-wrapper{overflow-x:auto}.lp-table{border-collapse:collapse;text-align:left;width:100%}.lp-table th{color:#475569;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;background:#f8fafc;border-bottom:2px solid #e2e8f0;padding:12px 16px;font-size:.75rem;font-weight:700}.lp-table td{color:#1e293b;vertical-align:middle;border-bottom:1px solid #f1f5f9;padding:14px 16px;font-size:.875rem}.lp-table tbody tr:hover{background:#f8fafc}.lp-request-id-badge{color:#4f46e5;letter-spacing:.02em;white-space:nowrap;background:#eef2ff;border:1px solid #c7d2fe;border-radius:6px;padding:4px 10px;font-size:.825rem;font-weight:700;display:inline-block}.lp-badge-type,.req-type-pill{text-transform:uppercase;letter-spacing:.02em;white-space:nowrap;color:#475569;background:#f1f5f9;border-radius:8px;padding:.3rem .7rem;font-size:.75rem;font-weight:700;display:inline-block}.lp-badge-type.leave,.req-type-pill.leave{color:#3730a3;background:#e0e7ff}.lp-badge-type.permission,.req-type-pill.permission{color:#86198f;background:#fae8ff}.lp-badge-type.work_from_home,.req-type-pill.work_from_home{color:#0369a1;background:#e0f2fe}.lp-status-badge,.status-badge{letter-spacing:.03em;text-transform:uppercase;white-space:nowrap;border-radius:20px;align-items:center;gap:.35rem;padding:.35rem .85rem;font-size:.775rem;font-weight:800;display:inline-flex}.lp-status-badge.pending,.status-badge.pending{color:#b45309;background:#fef3c7;border:1px solid #fde68a}.lp-status-badge.approved,.status-badge.approved{color:#15803d;background:#dcfce7;border:1px solid #bbf7d0}.lp-status-badge.rejected,.status-badge.rejected{color:#dc2626;background:#fee2e2;border:1px solid #fecaca}.lp-status-badge.cancelled,.status-badge.cancelled{color:#64748b;background:#f1f5f9;border:1px solid #e2e8f0}.lp-action-group{align-items:center;gap:.5rem;display:flex}.lp-action-btn,.lp-btn-approve,.lp-btn-reject{cursor:pointer;border:none;border-radius:8px;align-items:center;gap:.35rem;padding:.45rem .9rem;font-size:.8rem;font-weight:700;transition:all .15s;display:inline-flex}.lp-action-btn.approve,.lp-btn-approve{color:#fff;background:#16a34a;box-shadow:0 2px 6px #16a34a40}.lp-action-btn.approve:hover,.lp-btn-approve:hover{background:#15803d;transform:translateY(-1px)}.lp-action-btn.reject,.lp-btn-reject{color:#fff;background:#dc2626;box-shadow:0 2px 6px #dc262640}.lp-action-btn.reject:hover,.lp-btn-reject:hover{background:#b91c1c;transform:translateY(-1px)}.lp-action-btn.cancel,.lp-btn-cancel{color:#dc2626;cursor:pointer;background:#fff;border:1px solid #fecaca;border-radius:6px;padding:.35rem .75rem;font-size:.75rem;font-weight:600;transition:all .15s}.lp-action-btn.cancel:hover,.lp-btn-cancel:hover{background:#fef2f2}.action-status-text{align-items:center;gap:.25rem;font-size:.85rem;font-weight:700;display:inline-flex}.action-status-text.approved{color:#16a34a}.action-status-text.rejected{color:#dc2626}.lp-modal-backdrop,.lp-modal-overlay{z-index:100050;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);box-sizing:border-box;background:#0f172a99;justify-content:center;align-items:center;padding:1.5rem;display:flex;position:fixed;inset:0}.lp-modal{box-sizing:border-box;background:#fff;border:1px solid #e2e8f0;border-radius:16px;width:100%;max-width:520px;padding:1.75rem;box-shadow:0 20px 25px -5px #00000026,0 8px 10px -6px #0000001a}.lp-modal h3{color:#0f172a;margin:0 0 .5rem;font-size:1.2rem;font-weight:800}.lp-modal-header{justify-content:space-between;align-items:center;margin-bottom:1.25rem;display:flex}.lp-modal-title{color:#0f172a;margin:0;font-size:1.15rem;font-weight:700}.lp-modal-close{color:#94a3b8;cursor:pointer;background:0 0;border:none}.lp-modal-actions,.lp-modal-footer{border-top:1px solid #f1f5f9;justify-content:flex-end;align-items:center;gap:.75rem;margin-top:1.5rem;padding-top:1rem;display:flex}.lp-modal-btn{cursor:pointer;border:none;border-radius:10px;justify-content:center;align-items:center;gap:.4rem;padding:.65rem 1.25rem;font-size:.875rem;font-weight:700;transition:all .2s;display:inline-flex}.lp-modal-btn.cancel{color:#475569;background:#f1f5f9;border:1px solid #cbd5e1}.lp-modal-btn.cancel:hover{color:#0f172a;background:#e2e8f0}.lp-modal-btn.confirm{color:#fff;background:#2563eb;box-shadow:0 4px 12px #2563eb40}.lp-modal-btn.confirm:hover{background:#1d4ed8;transform:translateY(-1px)}.login-modal-overlay{-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);z-index:10000;background:#0f172a8c;justify-content:center;align-items:center;padding:1.5rem;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.login-modal-card{background:#fff;border:1px solid #e2e8f0;border-radius:24px;flex-direction:column;width:100%;max-width:480px;animation:.25s cubic-bezier(.16,1,.3,1) modalSlide;display:flex;overflow:hidden;box-shadow:0 20px 48px #00000026}@keyframes modalSlide{0%{opacity:0;transform:translateY(12px)scale(.98)}to{opacity:1;transform:translateY(0)scale(1)}}.login-modal-header{border-bottom:1px solid #f1f5f9;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;display:flex}.modal-title-box{align-items:center;gap:.75rem;display:flex}.modal-icon-badge{color:#4338ca;background:#e0e7ff;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.modal-subtitle{color:#64748b;margin:0;font-size:.8rem}.modal-close-btn{color:#64748b;cursor:pointer;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;justify-content:center;align-items:center;width:32px;height:32px;transition:all .15s;display:flex}.modal-close-btn:hover{color:#dc2626;background:#fee2e2;border-color:#fecaca}.modal-user-banner{background:#f8fafc;border-bottom:1px solid #f1f5f9;align-items:center;gap:.85rem;padding:.85rem 1.5rem;display:flex}.modal-user-avatar{color:#fff;background:linear-gradient(135deg,#6366f1,#4f46e5);border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;font-size:1.1rem;font-weight:800;display:flex;overflow:hidden}.modal-avatar-img{object-fit:cover;width:100%;height:100%}.modal-user-meta{flex-direction:column;display:flex}.modal-user-name{color:#0f172a;font-size:.95rem;font-weight:800}.modal-user-sub{color:#64748b;align-items:center;gap:.4rem;font-size:.775rem;display:flex}.modal-user-id{color:#475569;background:#e2e8f0;border-radius:4px;padding:.05rem .35rem;font-family:monospace;font-weight:700}.modal-user-role{color:#4338ca;font-weight:800}.login-tab-bar{background:#f1f5f9;border-radius:12px;gap:.25rem;margin:1.25rem 1.5rem 0;padding:.25rem;display:flex}.login-tab-btn{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:10px;flex:1;justify-content:center;align-items:center;gap:.5rem;padding:.6rem 1rem;font-size:.85rem;font-weight:700;transition:all .2s;display:flex}.login-tab-btn.active{color:#4f46e5;background:#fff;box-shadow:0 2px 8px #0000000f}.manual-login-form{flex-direction:column;gap:1rem;padding:1.25rem 1.5rem 1.5rem;display:flex}.login-error-alert{color:#dc2626;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;align-items:center;gap:.5rem;padding:.65rem .85rem;font-size:.825rem;font-weight:600;display:flex}.form-lbl{color:#475569;font-size:.8rem;font-weight:700}.input-with-icon{align-items:center;display:flex;position:relative}.field-icon{color:#94a3b8;pointer-events:none;position:absolute;left:12px}.login-input{color:#0f172a;box-sizing:border-box;background:#fff;border:1px solid #cbd5e1;border-radius:10px;outline:none;width:100%;padding:.65rem 1rem .65rem 2.6rem;font-family:inherit;font-size:.9rem;font-weight:500;transition:all .2s}.login-input:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f11f}.pw-eye-btn{color:#94a3b8;cursor:pointer;background:0 0;border:none;padding:4px;position:absolute;right:10px}.pw-eye-btn:hover{color:#475569}.modal-actions{justify-content:flex-end;align-items:center;gap:.75rem;margin-top:.5rem;display:flex}.btn-cancel-modal{color:#475569;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:10px;padding:.65rem 1.25rem;font-size:.85rem;font-weight:700;transition:all .15s}.btn-cancel-modal:hover{background:#f8fafc}.btn-submit-modal{color:#fff;cursor:pointer;background:#0f172a;border:none;border-radius:10px;align-items:center;gap:.5rem;padding:.65rem 1.35rem;font-size:.85rem;font-weight:700;transition:all .2s;display:flex;box-shadow:0 4px 12px #0f172a26}.btn-submit-modal:hover:not(:disabled){background:#6366f1;box-shadow:0 6px 18px #6366f14d}.qr-login-container{text-align:center;flex-direction:column;align-items:center;gap:1rem;padding:1.25rem 1.5rem 1.5rem;display:flex}.qr-security-note{color:#166534;text-align:left;background:#f0fdf4;border:1px solid #bbf7d0;border-radius:10px;align-items:center;gap:.4rem;padding:.55rem .85rem;font-size:.775rem;display:flex}.qr-box-wrapper{background:#fff;border:2px dashed #cbd5e1;border-radius:16px;justify-content:center;align-items:center;width:220px;height:220px;padding:10px;display:flex;position:relative}.qr-timer-pill{color:#fff;background:#0f172a;border-radius:20px;padding:.25rem .65rem;font-size:.725rem;position:absolute;bottom:-12px;box-shadow:0 2px 8px #00000026}.qr-loading-box,.qr-expired-box,.qr-success-box{color:#475569;flex-direction:column;justify-content:center;align-items:center;gap:.75rem;font-size:.85rem;font-weight:700;display:flex}.btn-refresh-qr{color:#fff;cursor:pointer;background:#dc2626;border:none;border-radius:8px;align-items:center;gap:.35rem;padding:.45rem .85rem;font-size:.775rem;font-weight:700;display:flex}.qr-instructions p{color:#64748b;margin:0 0 .5rem;font-size:.8rem}.btn-refresh-qr-link{color:#6366f1;cursor:pointer;background:0 0;border:none;align-items:center;gap:.35rem;font-size:.8rem;font-weight:700;display:inline-flex}.btn-refresh-qr-link:hover{text-decoration:underline}.profile-page{background:linear-gradient(135deg,#f0f4ff 0%,#faf5ff 50%,#f0fdf4 100%);min-height:100vh;padding:2rem 2.5rem;font-family:Inter,system-ui,sans-serif;animation:.4s profileFadeIn}@keyframes profileFadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}.profile-header{margin-bottom:2rem}.profile-header h1{color:#0f172a;align-items:center;gap:.75rem;margin:0 0 .3rem;font-size:1.85rem;font-weight:900;display:flex}.profile-header p{color:#64748b;margin:0;font-size:.92rem}.profile-layout{grid-template-columns:320px 1fr;align-items:start;gap:1.75rem;display:grid}@media (width<=900px){.profile-layout{grid-template-columns:1fr}}.profile-card{background:#fff;border:1px solid #e2e8f0;border-radius:20px;padding:2rem;transition:box-shadow .2s;box-shadow:0 2px 16px #6366f10f}.profile-card:hover{box-shadow:0 4px 28px #6366f11f}.profile-card-title{color:#0f172a;border-bottom:1.5px solid #f1f5f9;align-items:center;gap:.5rem;margin:0 0 1.5rem;padding-bottom:1rem;font-size:1rem;font-weight:800;display:flex}.profile-avatar-wrapper{flex-direction:column;align-items:center;gap:1.25rem;display:flex}.profile-avatar-ring{aspect-ratio:1;background:linear-gradient(135deg,#6366f1,#8b5cf6);border-radius:50%;flex-shrink:0;width:110px;min-width:110px;height:110px;min-height:110px;padding:3px;position:relative;box-shadow:0 4px 20px #6366f159}.profile-avatar-inner{color:#6366f1;letter-spacing:-1px;background:#fff;border-radius:50%;justify-content:center;align-items:center;width:100%;height:100%;font-size:2.2rem;font-weight:900;display:flex;overflow:hidden}.profile-avatar-inner img{object-fit:cover;object-position:center;aspect-ratio:1;border-radius:50%;width:100%;height:100%;display:block}.profile-avatar-badge{background:#22c55e;border:2px solid #fff;border-radius:50%;width:22px;height:22px;position:absolute;bottom:4px;right:4px}.profile-name{color:#0f172a;text-align:center;margin:0;font-size:1.25rem;font-weight:800}.profile-role-badge{text-transform:capitalize;letter-spacing:.04em;border-radius:20px;align-items:center;gap:4px;padding:4px 14px;font-size:.78rem;font-weight:700;display:inline-flex}.profile-role-badge.admin{color:#b45309;background:#fef3c7}.profile-role-badge.manager{color:#1d4ed8;background:#eff6ff}.profile-role-badge.employee{color:#15803d;background:#f0fdf4}.profile-info-row{color:#64748b;align-items:center;gap:.5rem;font-size:.85rem;display:flex}.profile-photo-btns{flex-direction:column;gap:.6rem;width:100%;margin-top:.5rem;display:flex}.profile-photo-input{display:none}.profile-card.dragging{background:#eef2ff!important;border:2px dashed #6366f1!important;box-shadow:0 0 20px #6366f140!important}.profile-drag-overlay{z-index:10;color:#4f46e5;pointer-events:none;background:#eef2ffeb;border:2px dashed #6366f1;border-radius:20px;flex-direction:column;justify-content:center;align-items:center;gap:.5rem;font-size:.95rem;font-weight:700;animation:.2s fadeIn;display:flex;position:absolute;inset:0}.profile-dropzone{cursor:pointer;background:#f8fafc;border:2px dashed #c7d2fe;border-radius:16px;flex-direction:column;justify-content:center;align-items:center;gap:.6rem;width:100%;padding:1.25rem 1rem;transition:all .2s;display:flex;position:relative}.profile-dropzone:hover,.profile-dropzone.dragging{background:#eef2ff;border-color:#6366f1;box-shadow:0 4px 12px #6366f11f}.profile-dropzone-icon{color:#4f46e5;background:#e0e7ff;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.profile-dropzone-text{color:#4f46e5;text-align:center;font-size:.85rem;font-weight:700}.profile-dropzone-subtext{color:#64748b;text-align:center;font-size:.73rem}.btn-upload-photo{color:#4f46e5;cursor:pointer;background:#eef2ff;border:2px dashed #c7d2fe;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;padding:.65rem 1rem;font-family:inherit;font-size:.85rem;font-weight:700;transition:all .2s;display:flex}.btn-upload-photo:hover{background:#e0e7ff;border-color:#a5b4fc;transform:translateY(-1px)}.btn-remove-photo{color:#dc2626;cursor:pointer;background:#fff;border:1.5px solid #fecaca;border-radius:12px;justify-content:center;align-items:center;gap:.5rem;padding:.55rem 1rem;font-family:inherit;font-size:.83rem;font-weight:600;transition:all .2s;display:flex}.btn-remove-photo:hover{background:#fee2e2;transform:translateY(-1px)}.profile-photo-hint{color:#94a3b8;text-align:center;font-size:.73rem;line-height:1.4}.profile-right-cards{flex-direction:column;gap:1.5rem;display:flex}.profile-field{flex-direction:column;gap:.35rem;margin-bottom:1.2rem;display:flex}.profile-field:last-child{margin-bottom:0}.profile-field label{color:#64748b;text-transform:uppercase;letter-spacing:.06em;font-size:.78rem;font-weight:700}.profile-field-value{color:#0f172a;background:#f8fafc;border:1.5px solid #e2e8f0;border-radius:10px;padding:.65rem .9rem;font-size:1rem;font-weight:600}.profile-input{color:#0f172a;box-sizing:border-box;background:#fff;border:1.5px solid #e2e8f0;border-radius:12px;outline:none;width:100%;padding:.75rem 1rem;font-family:Inter,sans-serif;font-size:.92rem;transition:border-color .2s,box-shadow .2s}.profile-input:focus{border-color:#6366f1;box-shadow:0 0 0 3px #6366f11f}.profile-input.error-input{border-color:#f87171;box-shadow:0 0 0 3px #f871711f}.profile-input[readonly],.profile-input:disabled{color:#64748b;cursor:default;background:#f8fafc}.profile-pw-wrapper{align-items:center;display:flex;position:relative}.profile-pw-wrapper .profile-input{padding-right:2.75rem}.profile-pw-eye{cursor:pointer;color:#94a3b8;background:0 0;border:none;align-items:center;padding:0;transition:color .15s;display:flex;position:absolute;right:.8rem}.profile-pw-eye:hover{color:#6366f1}.btn-profile-save{color:#fff;cursor:pointer;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;border-radius:12px;justify-content:center;align-items:center;gap:.45rem;margin-top:.75rem;padding:.75rem 1.5rem;font-family:inherit;font-size:.9rem;font-weight:700;transition:all .2s;display:inline-flex;box-shadow:0 2px 8px #6366f14d}.btn-profile-save:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #6366f166}.btn-profile-save:disabled{opacity:.6;cursor:not-allowed}.btn-profile-save.loading{opacity:.75;cursor:not-allowed}.profile-alert{border-radius:12px;align-items:flex-start;gap:.6rem;margin-top:.75rem;padding:.85rem 1rem;font-size:.85rem;font-weight:600;animation:.3s alertSlide;display:flex}@keyframes alertSlide{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.profile-alert.success{color:#15803d;background:#f0fdf4;border:1.5px solid #86efac}.profile-alert.error{color:#dc2626;background:#fef2f2;border:1.5px solid #fca5a5}.profile-photo-preview{border:3px solid #a5b4fc;border-radius:50%;width:104px;height:104px;position:relative;overflow:hidden;box-shadow:0 2px 12px #6366f140}.profile-photo-preview img{object-fit:cover;width:100%;height:100%}.profile-photo-preview-label{color:#6366f1;text-align:center;font-size:.72rem;font-weight:600}.profile-divider{background:linear-gradient(90deg,#0000,#e2e8f0,#0000);height:1.5px;margin:1.25rem 0}.profile-skeleton{background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0 50%,#f1f5f9 75%) 0 0/200% 100%;border-radius:10px;height:1rem;animation:1.4s infinite shimmer}@keyframes shimmer{0%{background-position:200% 0}to{background-position:-200% 0}}.profile-relogin-note{color:#b45309;background:#fffbeb;border:1.5px solid #fcd34d;border-radius:10px;align-items:center;gap:.5rem;margin-top:.6rem;padding:.7rem .9rem;font-size:.82rem;font-weight:600;display:flex}.spin{animation:.8s linear infinite spinRotate}@keyframes spinRotate{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.payslip-page-wrapper{color:#0f172a;box-sizing:border-box;background:#f8fafc;width:100%;min-height:100vh;padding:1.5rem 2rem 3rem;font-family:Plus Jakarta Sans,system-ui,-apple-system,sans-serif;overflow-y:auto}.payslip-header-bar{background:#fff;border:1px solid #e2e8f0;border-radius:16px;justify-content:space-between;align-items:center;margin-bottom:1.5rem;padding:1.25rem 1.75rem;display:flex;box-shadow:0 4px 12px #00000008}.payslip-header-title-box h2{color:#0f172a;margin:0 0 .25rem;font-size:1.35rem;font-weight:800}.payslip-header-title-box p{color:#64748b;margin:0;font-size:.85rem}.payslip-header-actions{align-items:center;gap:.75rem;display:flex}.btn-payslip-reset{color:#475569;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:10px;align-items:center;gap:.4rem;padding:.6rem 1.1rem;font-family:inherit;font-size:.85rem;font-weight:700;transition:all .2s;display:inline-flex}.btn-payslip-reset:hover{color:#0f172a;background:#f1f5f9}.btn-payslip-generate{color:#fff;cursor:pointer;background:#000;border:none;border-radius:10px;align-items:center;gap:.45rem;padding:.6rem 1.25rem;font-family:inherit;font-size:.85rem;font-weight:700;transition:all .2s;display:inline-flex;box-shadow:0 4px 12px #0000001f}.btn-payslip-generate:hover{background:#1e293b;transform:translateY(-1px)}.payslip-banner{border-radius:12px;align-items:center;gap:.75rem;margin-bottom:1.5rem;padding:.85rem 1.25rem;font-size:.875rem;font-weight:600;display:flex}.payslip-banner.error{color:#991b1b;background:#fef2f2;border:1px solid #fecaca}.payslip-banner.success{color:#166534;background:#f0fdf4;border:1px solid #bbf7d0}.payslip-banner button{cursor:pointer;color:inherit;background:0 0;border:none;margin-left:auto}.payslip-form-container{flex-direction:column;gap:1.5rem;margin-bottom:2.5rem;display:flex}.payslip-card{background:#fff;border:1px solid #e2e8f0;border-radius:18px;overflow:hidden;box-shadow:0 4px 14px #00000008}.payslip-card-header{background:#f8fafc;border-bottom:1px solid #e2e8f0;align-items:center;gap:.65rem;padding:1.1rem 1.5rem;display:flex}.payslip-card-header.earnings-header{color:#166534;background:#f0fdf4;border-bottom-color:#dcfce7}.payslip-card-header.deductions-header{color:#991b1b;background:#fef2f2;border-bottom-color:#fee2e2}.payslip-card-header h3{margin:0;font-size:1rem;font-weight:800}.payslip-card-body{gap:1.25rem;padding:1.5rem;display:grid}.grid-2{grid-template-columns:repeat(2,1fr)}.grid-3{grid-template-columns:repeat(3,1fr)}.grid-4{grid-template-columns:repeat(4,1fr)}@media (width<=1100px){.grid-4{grid-template-columns:repeat(2,1fr)}}@media (width<=700px){.grid-2,.grid-3,.grid-4{grid-template-columns:1fr}}.payslip-grid-2{grid-template-columns:1fr 1fr;gap:1.5rem;display:grid}@media (width<=1100px){.payslip-grid-2{grid-template-columns:1fr}}.form-field{flex-direction:column;gap:.4rem;display:flex}.form-label{color:#475569;font-size:.8rem;font-weight:700}.form-label .req{color:#ef4444}.form-input,.form-select{color:#0f172a;box-sizing:border-box;background:#fff;border:1px solid #cbd5e1;border-radius:10px;outline:none;width:100%;padding:.65rem .85rem;font-family:inherit;font-size:.875rem;font-weight:600;transition:border .2s}.form-input:focus,.form-select:focus{border-color:#000;box-shadow:0 0 0 3px #0000000d}.employee-auto-summary{background:#f1f5f9;border-top:1px dashed #cbd5e1;flex-wrap:wrap;gap:1.5rem;padding:1rem 1.5rem;display:flex}.summary-item{align-items:center;gap:.4rem;font-size:.825rem;display:flex}.summary-item .s-label{color:#64748b;font-weight:600}.summary-item .s-val{color:#0f172a;font-weight:800}.total-calculation-box{border-top:1px solid #e2e8f0;justify-content:space-between;align-items:center;padding:1rem 1.5rem;font-size:.95rem;font-weight:700;display:flex}.total-calculation-box.gross{color:#166534;background:#f0fdf4}.total-calculation-box.deductions{color:#991b1b;background:#fef2f2}.total-calculation-box strong{font-size:1.15rem;font-weight:800}.net-salary-highlight-box{color:#fff;background:linear-gradient(135deg,#0f172a,#1e293b);border-radius:14px;flex-direction:column;gap:.75rem;margin:1.5rem;padding:1.5rem;display:flex}.net-salary-highlight-box .net-top{justify-content:space-between;align-items:center;display:flex}.net-salary-highlight-box .net-top span{letter-spacing:.05em;color:#94a3b8;font-size:.75rem;font-weight:800}.net-salary-highlight-box .net-top h2{color:#4ade80;margin:0;font-size:1.8rem;font-weight:800}.net-salary-highlight-box .net-words{color:#cbd5e1;border-top:1px solid #ffffff1a;padding-top:.5rem;font-size:.85rem}.payslip-history-section{background:#fff;border:1px solid #e2e8f0;border-radius:18px;padding:1.5rem;box-shadow:0 4px 14px #00000008}.section-title-bar{margin-bottom:1.25rem}.section-title-bar h3{margin:0 0 .2rem;font-size:1.1rem;font-weight:800}.section-title-bar span{color:#64748b;font-size:.825rem}.history-filters-bar{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem;display:flex}.history-filters-bar .search-box{background:#f8fafc;border:1px solid #cbd5e1;border-radius:10px;flex:1;align-items:center;gap:.6rem;max-width:400px;padding:.55rem .85rem;display:flex}.history-filters-bar .search-box input{background:0 0;border:none;outline:none;width:100%;font-family:inherit;font-size:.85rem}.filter-dropdowns{align-items:center;gap:.75rem;display:flex}.filter-select{background:#fff;border:1px solid #cbd5e1;border-radius:10px;padding:.55rem .85rem;font-family:inherit;font-size:.85rem;font-weight:600}.table-responsive{width:100%;overflow-x:auto}.payslip-table{border-collapse:collapse;text-align:left;width:100%}.payslip-table th{color:#475569;text-transform:uppercase;letter-spacing:.04em;background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:.85rem 1rem;font-size:.775rem;font-weight:800}.payslip-table td{border-bottom:1px solid #f1f5f9;padding:.85rem 1rem;font-size:.875rem}.emp-table-info{flex-direction:column;display:flex}.emp-table-info strong{color:#0f172a;font-weight:700}.emp-table-info small{color:#64748b;font-size:.75rem}.code-badge{background:#f1f5f9;border-radius:6px;padding:.2rem .5rem;font-family:monospace;font-size:.8rem}.period-badge{color:#1d4ed8;background:#eff6ff;border-radius:12px;padding:.2rem .6rem;font-size:.775rem;font-weight:700}.amount-cell.gross{color:#166534;font-weight:700}.amount-cell.deduction{color:#991b1b;font-weight:700}.amount-cell.net{color:#0f172a;font-weight:800}.status-tag.generated{color:#15803d;background:#dcfce7;border-radius:12px;padding:.2rem .6rem;font-size:.75rem;font-weight:800}.table-actions{justify-content:center;align-items:center;gap:.4rem;display:flex}.act-btn{cursor:pointer;background:#fff;border:1px solid #e2e8f0;border-radius:8px;align-items:center;gap:.25rem;padding:.35rem .65rem;font-family:inherit;font-size:.775rem;font-weight:700;transition:all .15s;display:inline-flex}.act-btn.view{color:#2563eb}.act-btn.edit{color:#d97706}.act-btn.delete{color:#ef4444}.act-btn:hover{background:#f8fafc;border-color:#cbd5e1}.empty-cell{text-align:center;color:#64748b;padding:2.5rem;font-size:.875rem}.preview-modal-card{background:#fff;border-radius:20px;flex-direction:column;width:900px;max-width:95vw;max-height:90vh;display:flex;position:relative;overflow:hidden;box-shadow:0 25px 50px -12px #00000040}.preview-modal-header{color:#fff;background:#0f172a;justify-content:space-between;align-items:center;padding:1rem 1.5rem;display:flex}.preview-modal-header h3{margin:0;font-size:1.1rem;font-weight:800}.preview-modal-actions{align-items:center;gap:.6rem;display:flex}.btn-preview-action{cursor:pointer;border:none;border-radius:8px;align-items:center;gap:.4rem;padding:.5rem .85rem;font-family:inherit;font-size:.8rem;font-weight:700;transition:all .15s;display:inline-flex}.btn-preview-action.edit{color:#fff;background:#334155}.btn-preview-action.print{color:#fff;background:#3b82f6}.btn-preview-action.download{color:#fff;background:#10b981}.btn-preview-action.save{color:#fff;background:#6366f1}.btn-preview-action:hover{opacity:.9;transform:translateY(-1px)}.preview-scroll-body{background:#525659;flex:1;justify-content:center;padding:2rem;display:flex;overflow-y:auto}.official-payslip-doc{box-sizing:border-box;color:#000;background:#fff;flex-direction:column;width:794px;min-height:1000px;padding:2.5rem;font-family:Plus Jakarta Sans,system-ui,sans-serif;display:flex;box-shadow:0 10px 30px #0000004d}.doc-header{border-bottom:2px solid #000;align-items:center;gap:1.5rem;margin-bottom:1.25rem;padding-bottom:1.25rem;display:flex}.company-logo-circle{color:#fff;background:#000;border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:64px;height:64px;display:flex}.company-info-block h2{letter-spacing:.02em;margin:0 0 .2rem;font-size:1.35rem;font-weight:800}.company-info-block .doc-sub{color:#475569;margin:0 0 .2rem;font-size:.8rem}.company-info-block .doc-contact{color:#64748b;margin:0;font-size:.75rem}.doc-title-strip{color:#fff;text-align:center;letter-spacing:.08em;background:#000;border-radius:6px;margin-bottom:1.5rem;padding:.6rem;font-size:1rem;font-weight:800}.doc-section-grid{grid-template-columns:1fr 1fr;gap:1.5rem;margin-bottom:1.5rem;display:grid}.doc-info-card{border:1px solid #cbd5e1;border-radius:8px;overflow:hidden}.doc-card-title{color:#0f172a;background:#f1f5f9;border-bottom:1px solid #cbd5e1;padding:.5rem .85rem;font-size:.8rem;font-weight:800}.doc-keyvalue-table{border-collapse:collapse;width:100%;font-size:.8rem}.doc-keyvalue-table td{border-bottom:1px solid #f1f5f9;padding:.45rem .85rem}.doc-keyvalue-table td.lbl{color:#64748b;width:45%;font-weight:600}.doc-keyvalue-table td.val{color:#000}.doc-breakdown-table-wrapper{border:1px solid #000;border-radius:6px;margin-bottom:1.5rem;overflow:hidden}.doc-breakdown-table{border-collapse:collapse;width:100%;font-size:.8rem}.doc-breakdown-table th{color:#fff;background:#000;padding:.55rem .85rem;font-size:.775rem;font-weight:800}.doc-breakdown-table td{border-bottom:1px solid #e2e8f0;padding:.45rem .85rem}.doc-breakdown-table td.num{text-align:right;font-weight:600}.doc-breakdown-table tr.total-row{background:#f8fafc;border-top:2px solid #000}.doc-net-box{background:#f8fafc;border:2px solid #000;border-radius:8px;margin-bottom:1.5rem;padding:1rem}.doc-net-box .net-row{justify-content:space-between;align-items:center;margin-bottom:.5rem;display:flex}.doc-net-box .net-label{color:#000;font-size:1rem;font-weight:800}.doc-net-box .net-value{color:#000;font-size:1.4rem;font-weight:800}.doc-net-box .net-words-line{color:#334155;border-top:1px solid #cbd5e1;padding-top:.5rem;font-size:.825rem}.doc-payment-strip{background:#f1f5f9;border:1px solid #cbd5e1;border-radius:6px;flex-wrap:wrap;gap:1.25rem;margin-bottom:2rem;padding:.75rem 1rem;font-size:.775rem;display:flex}.doc-payment-strip .p-item span{color:#64748b}.doc-payment-strip .p-item strong{color:#000}.doc-signatures{justify-content:space-between;align-items:center;margin-top:auto;padding-top:2rem;display:flex}.sig-block{flex-direction:column;align-items:center;width:200px;display:flex}.sig-line{background:#000;width:100%;height:1px;margin-bottom:.5rem}.sig-block span{color:#475569;font-size:.775rem;font-weight:700}.doc-footer{text-align:center;color:#94a3b8;border-top:1px dashed #cbd5e1;margin-top:1.5rem;padding-top:.75rem;font-size:.725rem}@media print{@page{size:A4 portrait;margin:0}body{margin:0;padding:0;background:#fff!important}body *{visibility:hidden}.preview-modal-card,.preview-scroll-body,#printable-payslip-document,#printable-payslip-document *{visibility:visible}.preview-modal-card{position:absolute;top:0;left:0;width:210mm!important;max-width:210mm!important;height:297mm!important;box-shadow:none!important;border-radius:0!important;padding:0!important;overflow:hidden!important}.preview-scroll-body{background:#fff!important;padding:0!important;overflow:hidden!important}#printable-payslip-document{box-sizing:border-box!important;width:210mm!important;box-shadow:none!important;height:297mm!important;max-height:297mm!important;margin:0!important;padding:1.2cm 1.5cm!important;overflow:hidden!important}.no-print{display:none!important}}.form-label-with-toggle{justify-content:space-between;align-items:center;gap:.5rem;margin-bottom:.2rem;display:flex}.toggle-switch-label{cursor:pointer;-webkit-user-select:none;user-select:none;align-items:center;display:inline-flex}.toggle-switch-label input{opacity:0;width:0;height:0;position:absolute}.toggle-slider{background-color:#cbd5e1;border-radius:20px;width:32px;height:18px;transition:all .2s ease-in-out;display:inline-block;position:relative}.toggle-slider:before{content:"";background-color:#fff;border-radius:50%;width:14px;height:14px;transition:all .2s ease-in-out;position:absolute;bottom:2px;left:2px;box-shadow:0 1px 3px #00000026}.toggle-switch-label input:checked+.toggle-slider{background-color:#22c55e}.toggle-switch-label input:checked+.toggle-slider:before{transform:translate(14px)}.field-disabled{opacity:.55}.field-disabled input{cursor:not-allowed;background-color:#f1f5f9}.payslip-mode-switcher{background:#e2e8f0;border-radius:12px;gap:4px;margin-bottom:1.25rem;padding:4px;display:inline-flex}.mode-tab-btn{color:#475569;cursor:pointer;background:0 0;border:none;border-radius:9px;align-items:center;gap:.5rem;padding:.5rem 1.1rem;font-family:inherit;font-size:.85rem;font-weight:700;transition:all .2s;display:inline-flex}.mode-tab-btn.active{color:#0f172a;background:#fff;box-shadow:0 2px 6px #00000014}.monthly-grid-container{grid-template-columns:repeat(auto-fill,minmax(320px,1fr));gap:1.25rem;margin-top:1rem;display:grid}.monthly-payslip-card{background:#fff;border:1px solid #e2e8f0;border-radius:16px;flex-direction:column;justify-content:space-between;gap:1rem;padding:1.25rem;transition:all .2s;display:flex;box-shadow:0 4px 12px #00000008}.monthly-payslip-card:hover{border-color:#cbd5e1;transform:translateY(-2px);box-shadow:0 8px 20px #0000000f}.digital-sig-block{text-align:center;flex-direction:column;justify-content:flex-end;align-items:center;min-width:180px;display:flex}.digital-sig-img{object-fit:contain;max-width:170px;max-height:52px;margin-bottom:4px}.time-change-container{box-sizing:border-box;color:#1e293b;max-width:1400px;min-height:100%;margin:0 auto;padding:1.5rem 2rem;font-family:Inter,system-ui,-apple-system,sans-serif}.time-change-header{margin-bottom:1.75rem}.time-change-title{color:#0f172a;letter-spacing:-.02em;margin:0 0 .35rem;font-size:1.65rem;font-weight:700}.time-change-subtitle{color:#64748b;margin:0;font-size:.95rem}.access-denied-card{text-align:center;background:#fff;border:1px solid #fee2e2;border-radius:12px;margin-top:2rem;padding:3rem 2rem;box-shadow:0 4px 20px #0000000d}.access-denied-icon{color:#ef4444;background:#fef2f2;border-radius:50%;justify-content:center;align-items:center;width:64px;height:64px;margin:0 auto 1.25rem;display:flex}.access-denied-title{color:#991b1b;margin-bottom:.5rem;font-size:1.35rem;font-weight:700}.access-denied-desc{color:#7f1d1d;margin-bottom:1.5rem;font-size:.95rem}.btn-primary-action{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:8px;padding:.65rem 1.5rem;font-size:.9rem;font-weight:600;transition:all .2s}.btn-primary-action:hover{background:#1d4ed8;transform:translateY(-1px)}.tc-card{background:#fff;border:1px solid #e2e8f0;border-radius:12px;margin-bottom:1.5rem;padding:1.25rem 1.5rem;box-shadow:0 2px 8px #00000008}.tc-card-header{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.tc-card-title{color:#1e293b;align-items:center;gap:.5rem;font-size:1.05rem;font-weight:600;display:flex}.employee-select-wrapper{width:100%;position:relative}.employee-select-trigger{cursor:pointer;color:#334155;background:#f8fafc;border:1px solid #cbd5e1;border-radius:8px;justify-content:space-between;align-items:center;width:100%;padding:.75rem 1rem;font-size:.95rem;transition:border-color .2s,box-shadow .2s;display:flex}.employee-select-trigger:hover{background:#fff;border-color:#94a3b8}.employee-select-trigger.active{background:#fff;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}.employee-dropdown-menu{z-index:100;background:#fff;border:1px solid #e2e8f0;border-radius:10px;position:absolute;top:calc(100% + 6px);left:0;right:0;overflow:hidden;box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.employee-search-box{background:#f8fafc;border-bottom:1px solid #f1f5f9;padding:.75rem}.employee-search-input{box-sizing:border-box;border:1px solid #cbd5e1;border-radius:6px;outline:none;width:100%;padding:.55rem .85rem;font-size:.9rem}.employee-search-input:focus{border-color:#2563eb}.employee-options-list{max-height:260px;overflow-y:auto}.employee-option-item{cursor:pointer;border-bottom:1px solid #f8fafc;justify-content:space-between;align-items:center;padding:.65rem 1rem;transition:background-color .15s;display:flex}.employee-option-item:last-child{border-bottom:none}.employee-option-item:hover{background:#f1f5f9}.employee-option-item.selected{background:#eff6ff}.emp-info-main{align-items:center;gap:.75rem;display:flex}.emp-avatar-badge{color:#3730a3;background:#e0e7ff;border-radius:50%;justify-content:center;align-items:center;width:36px;height:36px;font-size:.85rem;font-weight:600;display:flex}.emp-details{flex-direction:column;display:flex}.emp-name-text{color:#0f172a;font-size:.9rem;font-weight:600}.emp-sub-text{color:#64748b;font-size:.78rem}.role-tag{text-transform:uppercase;letter-spacing:.03em;border-radius:9999px;padding:.15rem .55rem;font-size:.72rem;font-weight:600}.role-tag.manager{color:#92400e;background:#fef3c7}.role-tag.employee{color:#0369a1;background:#e0f2fe}.active-session-card{color:#fff;background:linear-gradient(135deg,#0f172a 0%,#1e293b 100%);border-radius:12px;margin-bottom:1.5rem;padding:1.25rem 1.5rem;position:relative;overflow:hidden;box-shadow:0 4px 15px #0f172a26}.active-session-card:before{content:"";pointer-events:none;background:radial-gradient(circle,#3b82f626 0%,#fff0 70%);width:200px;height:100%;position:absolute;top:0;right:0}.active-session-header{border-bottom:1px solid #ffffff1a;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:.75rem;display:flex}.active-session-title{letter-spacing:.05em;color:#94a3b8;text-transform:uppercase;font-size:.85rem;font-weight:700}.active-pulse-badge{color:#4ade80;background:#22c55e26;border:1px solid #22c55e4d;border-radius:9999px;align-items:center;gap:.4rem;padding:.25rem .65rem;font-size:.78rem;font-weight:600;display:flex}.pulse-dot{background:#22c55e;border-radius:50%;width:8px;height:8px;animation:1.5s infinite pulse-ring;box-shadow:0 0 #22c55eb3}@keyframes pulse-ring{0%{transform:scale(.95);box-shadow:0 0 #22c55eb3}70%{transform:scale(1);box-shadow:0 0 0 6px #22c55e00}to{transform:scale(.95);box-shadow:0 0 #22c55e00}}.active-session-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:1rem;display:grid}.active-stat-item{flex-direction:column;display:flex}.active-stat-label{color:#94a3b8;margin-bottom:.25rem;font-size:.78rem}.active-stat-val{color:#f8fafc;font-size:1.15rem;font-weight:700}.tc-filter-bar{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem;display:flex}.tc-filter-group{flex-wrap:wrap;align-items:center;gap:.75rem;display:flex}.tc-search-input-wrapper{min-width:240px;position:relative}.tc-search-input-wrapper input{background:#fff;border:1px solid #cbd5e1;border-radius:8px;outline:none;width:100%;padding:.55rem .85rem .55rem 2.2rem;font-size:.88rem}.tc-search-input-wrapper input:focus{border-color:#2563eb}.tc-search-icon{color:#94a3b8;pointer-events:none;position:absolute;top:50%;left:.75rem;transform:translateY(-50%)}.tc-select-filter{color:#334155;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:8px;outline:none;padding:.55rem .85rem;font-size:.88rem}.tc-select-filter:focus{border-color:#2563eb}.table-responsive{border:1px solid #e2e8f0;border-radius:8px;width:100%;overflow-x:auto}.tc-table{border-collapse:collapse;text-align:left;width:100%;font-size:.88rem}.tc-table th{color:#475569;white-space:nowrap;background:#f8fafc;border-bottom:1px solid #e2e8f0;padding:.85rem 1rem;font-weight:600}.tc-table td{color:#334155;vertical-align:middle;border-bottom:1px solid #f1f5f9;padding:.85rem 1rem}.tc-table tbody tr:hover{background:#f8fafc}.tc-table tbody tr:last-child td{border-bottom:none}.status-badge{text-transform:lowercase;border-radius:9999px;align-items:center;gap:.35rem;padding:.25rem .65rem;font-size:.78rem;font-weight:600;display:inline-flex}.status-badge.logged_in{color:#15803d;background:#dcfce7}.status-badge.logged_out{color:#475569;background:#f1f5f9}.action-btn-group{align-items:center;gap:.5rem;display:flex}.btn-icon-edit{color:#2563eb;cursor:pointer;background:#eff6ff;border:1px solid #bfdbfe;border-radius:6px;align-items:center;gap:.3rem;padding:.35rem .7rem;font-size:.8rem;font-weight:600;transition:all .15s;display:inline-flex}.btn-icon-edit:hover{color:#fff;background:#2563eb;border-color:#2563eb}.btn-icon-remove{color:#dc2626;cursor:pointer;background:#fef2f2;border:1px solid #fecaca;border-radius:6px;align-items:center;gap:.3rem;padding:.35rem .7rem;font-size:.8rem;font-weight:600;transition:all .15s;display:inline-flex}.btn-icon-remove:hover{color:#fff;background:#dc2626;border-color:#dc2626}.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:1000;background:#0f172a80;justify-content:center;align-items:center;padding:1rem;display:flex;position:fixed;inset:0}.modal-card{background:#fff;border-radius:14px;width:100%;max-width:520px;animation:.2s ease-out modal-pop;overflow:hidden;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a}@keyframes modal-pop{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.modal-header{background:#f8fafc;border-bottom:1px solid #e2e8f0;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;display:flex}.modal-title{color:#0f172a;margin:0;font-size:1.15rem;font-weight:700}.modal-close-btn{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:6px;justify-content:center;align-items:center;padding:.25rem;display:flex}.modal-close-btn:hover{color:#0f172a;background:#e2e8f0}.modal-body{padding:1.5rem}.form-group{margin-bottom:1.15rem}.form-group label{color:#334155;margin-bottom:.4rem;font-size:.85rem;font-weight:600;display:block}.form-control{box-sizing:border-box;color:#0f172a;border:1px solid #cbd5e1;border-radius:8px;outline:none;width:100%;padding:.6rem .85rem;font-size:.9rem}.form-control:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}.form-control:disabled{color:#64748b;cursor:not-allowed;background:#f1f5f9}.modal-footer{background:#f8fafc;border-top:1px solid #e2e8f0;justify-content:flex-end;align-items:center;gap:.75rem;padding:1rem 1.5rem;display:flex}.btn-secondary{color:#334155;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:8px;padding:.55rem 1.25rem;font-size:.88rem;font-weight:600}.btn-secondary:hover{background:#f1f5f9}.btn-save{color:#fff;cursor:pointer;background:#2563eb;border:none;border-radius:8px;padding:.55rem 1.25rem;font-size:.88rem;font-weight:600}.btn-save:hover{background:#1d4ed8}.btn-remove-danger{color:#fff;cursor:pointer;background:#dc2626;border:none;border-radius:8px;padding:.55rem 1.25rem;font-size:.88rem;font-weight:600}.btn-remove-danger:hover{background:#b91c1c}.tc-toast{z-index:2000;border-radius:8px;align-items:center;gap:.6rem;padding:.85rem 1.35rem;font-size:.9rem;font-weight:600;animation:.25s ease-out slide-up;display:flex;position:fixed;bottom:2rem;right:2rem;box-shadow:0 10px 15px -3px #0000001a}@keyframes slide-up{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.tc-toast.success{color:#fff;background:#065f46}.tc-toast.error{color:#fff;background:#991b1b}.empty-state-box{text-align:center;color:#64748b;padding:3rem 1rem}.empty-state-icon{color:#94a3b8;margin-bottom:.75rem}.empty-state-title{color:#334155;margin-bottom:.25rem;font-size:1.05rem;font-weight:600}.logout-modal-overlay{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);z-index:10000;background:#0f172a99;justify-content:center;align-items:center;padding:1.5rem;animation:.2s ease-out fadeIn;display:flex;position:fixed;inset:0}.logout-modal-card{background:#fff;border:1px solid #e2e8f0;border-radius:24px;flex-direction:column;width:100%;max-width:500px;animation:.25s cubic-bezier(.16,1,.3,1) modalSlide;display:flex;overflow:hidden;box-shadow:0 25px 50px -12px #0000002e}.logout-modal-header{border-bottom:1px solid #f1f5f9;justify-content:space-between;align-items:center;padding:1.25rem 1.5rem;display:flex}.logout-title-box{align-items:center;gap:.85rem;display:flex}.logout-icon-badge{color:#dc2626;background:#fef2f2;border:1px solid #fecaca;border-radius:12px;flex-shrink:0;justify-content:center;align-items:center;width:42px;height:42px;display:flex}.logout-title{color:#0f172a;margin:0 0 .15rem;font-size:1.15rem;font-weight:800}.logout-subtitle{color:#64748b;margin:0;font-size:.8rem}.logout-close-btn{color:#64748b;cursor:pointer;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;justify-content:center;align-items:center;width:34px;height:34px;transition:all .15s;display:flex}.logout-close-btn:hover{color:#dc2626;background:#fef2f2;border-color:#fecaca}.logout-user-banner{background:#f8fafc;border-bottom:1px solid #f1f5f9;align-items:center;gap:1rem;padding:1rem 1.5rem;display:flex}.logout-user-avatar{color:#fff;background:linear-gradient(135deg,#ef4444,#dc2626);border-radius:14px;flex-shrink:0;justify-content:center;align-items:center;width:48px;height:48px;font-size:1.15rem;font-weight:800;display:flex;overflow:hidden;box-shadow:0 4px 10px #dc262633}.logout-avatar-img{object-fit:cover;width:100%;height:100%}.logout-user-meta{flex-direction:column;gap:.25rem;display:flex}.logout-user-name{color:#0f172a;font-size:1rem;font-weight:800}.logout-user-sub{flex-wrap:wrap;align-items:center;gap:.45rem;font-size:.775rem;display:flex}.logout-user-id{color:#475569;background:#e2e8f0;border-radius:6px;padding:.15rem .5rem;font-family:monospace;font-size:.75rem;font-weight:700}.logout-user-role{color:#dc2626;letter-spacing:.03em;background:#fef2f2;border:1px solid #fecaca;border-radius:6px;padding:.15rem .5rem;font-size:.725rem;font-weight:800}.logout-status-pill{color:#15803d;background:#dcfce7;border:1px solid #bbf7d0;border-radius:6px;padding:.15rem .5rem;font-size:.725rem;font-weight:700}.logout-tab-bar{background:#f1f5f9;border-radius:14px;gap:.25rem;margin:1.25rem 1.5rem 0;padding:.25rem;display:flex}.logout-tab-btn{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:10px;flex:1;justify-content:center;align-items:center;gap:.5rem;padding:.65rem 1rem;font-size:.85rem;font-weight:700;transition:all .2s;display:flex}.logout-tab-btn.active{color:#dc2626;background:#fff;box-shadow:0 2px 8px #0000000f}.logout-alert{border-radius:10px;align-items:center;gap:.5rem;margin:1rem 1.5rem 0;padding:.65rem .85rem;font-size:.825rem;font-weight:600;display:flex}.logout-alert.error{color:#dc2626;background:#fef2f2;border:1px solid #fecaca}.logout-alert.success{color:#166534;background:#f0fdf4;border:1px solid #bbf7d0}.manual-logout-body{flex-direction:column;gap:1.25rem;padding:1.25rem 1.5rem 1.5rem;display:flex}.manual-logout-desc{color:#475569;margin:0;font-size:.875rem;line-height:1.5}.logout-modal-actions{justify-content:flex-end;align-items:center;gap:.75rem;display:flex}.btn-cancel-logout{color:#475569;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:10px;padding:.65rem 1.25rem;font-size:.85rem;font-weight:700;transition:all .15s}.btn-cancel-logout:hover{background:#f8fafc}.btn-confirm-logout{color:#fff;cursor:pointer;background:#dc2626;border:none;border-radius:10px;align-items:center;gap:.5rem;padding:.65rem 1.35rem;font-size:.85rem;font-weight:700;transition:all .2s;display:flex;box-shadow:0 4px 12px #dc262633}.btn-confirm-logout:hover:not(:disabled){background:#b91c1c;box-shadow:0 6px 18px #b91c1c4d}.qr-logout-body{flex-direction:column;gap:1.15rem;padding:1.25rem 1.5rem 1.5rem;display:flex}.qr-logout-security-tag{color:#991b1b;background:#fef2f2;border:1px solid #fecaca;border-radius:12px;align-items:center;gap:.5rem;padding:.6rem .9rem;font-size:.8rem;display:flex}.qr-mode-switch-row{gap:.5rem;display:flex}.qr-mode-btn{color:#64748b;cursor:pointer;background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;flex:1;justify-content:center;align-items:center;gap:.4rem;padding:.6rem .85rem;font-size:.8rem;font-weight:700;transition:all .15s;display:flex}.qr-mode-btn.active{color:#dc2626;background:#fff;border-color:#fecaca;box-shadow:0 2px 8px #dc26261a}.qr-display-section{text-align:center;flex-direction:column;align-items:center;gap:.85rem;display:flex}.qr-logout-box-wrapper{background:#fff;border:2px dashed #fca5a5;border-radius:20px;justify-content:center;align-items:center;width:220px;height:220px;padding:12px;display:flex;box-shadow:0 4px 14px #dc26260d}.qr-logout-display{justify-content:center;align-items:center;width:100%;height:100%;display:flex}.qr-code-img{object-fit:contain;width:100%;height:100%}.qr-logout-timer-pill{color:#fff;background:#dc2626;border-radius:20px;margin-top:-.25rem;padding:.3rem .85rem;font-size:.775rem;box-shadow:0 3px 10px #dc26264d}.qr-instructions{flex-direction:column;align-items:center;gap:.65rem;display:flex}.qr-instructions p{color:#64748b;max-width:360px;margin:0;font-size:.8rem;line-height:1.45}.btn-refresh-qr-link{color:#dc2626;cursor:pointer;background:#fef2f2;border:1px solid #fecaca;border-radius:10px;align-items:center;gap:.4rem;padding:.55rem 1.1rem;font-size:.825rem;font-weight:700;transition:all .15s;display:inline-flex}.btn-refresh-qr-link:hover{background:#fee2e2;box-shadow:0 2px 8px #dc262626}.camera-scanner-section{flex-direction:column;align-items:center;gap:.85rem;display:flex}.video-scanner-wrapper{background:#0f172a;border-radius:18px;justify-content:center;align-items:center;width:100%;max-width:320px;height:220px;display:flex;position:relative;overflow:hidden}.camera-video-feed{object-fit:cover;width:100%;height:100%}.scanner-target-reticle{border:2px dashed #ef4444;border-radius:14px;width:140px;height:140px;position:absolute;box-shadow:0 0 0 9999px #0f172a66}.btn-stop-camera{color:#475569;cursor:pointer;background:#fff;border:1px solid #cbd5e1;border-radius:10px;align-items:center;gap:.4rem;padding:.55rem 1rem;font-size:.8rem;font-weight:700;display:flex}.scanned-code-badge{color:#475569;background:#f1f5f9;border-radius:6px;padding:.3rem .65rem;font-size:.775rem}.confirm-logout-card{text-align:center;background:#fff;border:1px solid #e2e8f0;border-radius:20px;flex-direction:column;align-items:center;gap:.85rem;width:100%;padding:1.5rem;display:flex;box-shadow:0 10px 25px -5px #0000000d}.confirm-logout-title{color:#0f172a;margin:0;font-size:1.15rem;font-weight:800}.confirm-user-avatar-lg{color:#fff;background:linear-gradient(135deg,#ef4444,#dc2626);border:3px solid #fef2f2;border-radius:50%;justify-content:center;align-items:center;width:72px;height:72px;margin-top:.25rem;font-size:1.6rem;font-weight:800;display:flex;overflow:hidden;box-shadow:0 6px 16px #dc262640}.confirm-avatar-img-lg{object-fit:cover;width:100%;height:100%}.confirm-user-name{color:#0f172a;margin-top:.15rem;font-size:1.25rem;font-weight:800}.confirm-user-badge-row{flex-wrap:wrap;justify-content:center;align-items:center;gap:.45rem;font-size:.775rem;display:flex}.confirm-id-tag{color:#475569;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:6px;padding:.2rem .55rem;font-family:monospace;font-weight:700}.confirm-role-tag{color:#dc2626;text-transform:uppercase;background:#fef2f2;border:1px solid #fecaca;border-radius:6px;padding:.2rem .55rem;font-weight:800}.confirm-status-tag{color:#15803d;background:#dcfce7;border:1px solid #bbf7d0;border-radius:6px;padding:.2rem .55rem;font-weight:700}.confirm-session-details-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:14px;flex-direction:column;gap:.45rem;width:100%;margin-top:.35rem;padding:.85rem 1.15rem;display:flex}.confirm-detail-row{justify-content:space-between;align-items:center;font-size:.85rem;display:flex}.confirm-detail-label{color:#64748b;font-weight:600}.confirm-detail-val{color:#0f172a;font-family:JetBrains Mono,Fira Code,monospace;font-weight:700}.btn-big-red-logout{color:#fff;letter-spacing:.04em;cursor:pointer;background:#dc2626;border:none;border-radius:12px;justify-content:center;align-items:center;gap:.6rem;width:100%;margin-top:.35rem;padding:.85rem 1.5rem;font-size:1rem;font-weight:800;transition:all .2s;display:flex;box-shadow:0 6px 20px #dc262640}.btn-big-red-logout:hover:not(:disabled){background:#b91c1c;transform:translateY(-1px);box-shadow:0 8px 24px #b91c1c59}.btn-big-red-logout:disabled{opacity:.7;cursor:not-allowed}