@charset "UTF-8";@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&display=swap";@import"https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap";@import"https://fonts.googleapis.com/css2?family=Outfit:wght@300;400;500;600;700;800&family=Plus+Jakarta+Sans:wght@300;400;500;600;700;800&display=swap";.sidebar{width:260px;min-width:260px;background:linear-gradient(180deg,#0f172a,#020617);color:#fff;display:flex;flex-direction:column;transition:all .3s ease;overflow:hidden;position:relative;box-shadow:4px 0 40px #00000059}.sidebar.collapsed{width:80px;min-width:80px}.sidebar-header{min-height:70px;padding:0 18px;display:flex;align-items:center;justify-content:space-between;gap:10px;border-bottom:1px solid rgba(255,255,255,.06)}.sidebar-brand{position:relative;flex:1;min-width:0;display:flex;flex-direction:column;align-items:flex-start;justify-content:center;gap:2px}.sidebar.collapsed .sidebar-brand{align-items:center;justify-content:center;min-width:40px;flex:1 1 auto}.sidebar.collapsed .sidebar-header{padding:0 4px;gap:4px}.sidebar-logo-skeleton{display:block;width:min(168px,100%);height:36px;border-radius:8px;background:linear-gradient(90deg,#ffffff0f,#ffffff1f,#ffffff0f);background-size:200% 100%;animation:sidebarLogoSkeletonShimmer 1.1s ease-in-out infinite}.sidebar-logo-skeleton--collapsed{width:40px;height:40px;min-width:40px;min-height:40px;margin:0 auto;flex-shrink:0}@keyframes sidebarLogoSkeletonShimmer{0%{background-position:100% 0}to{background-position:-100% 0}}.sidebar-logo-img{display:block;object-fit:contain;object-position:center;background:#fff;padding:6px 10px;border-radius:8px;box-shadow:0 2px 10px #0003;transition:all .3s ease}.sidebar-logo-img--loaded:not(.sidebar-logo-img--collapsed){max-height:48px;max-width:min(188px,100%)}.sidebar-logo-img--loaded.sidebar-logo-img--collapsed{width:40px;height:40px;min-width:40px;min-height:40px;max-width:40px;max-height:40px;object-fit:contain;object-position:center center;margin:0 auto;flex-shrink:0}.sidebar.collapsed .sidebar-toggle{flex-shrink:0;padding:6px 4px}.sidebar-brand-sub{font-size:11px;font-weight:500;letter-spacing:.04em;text-transform:uppercase;color:#94a3b8f2;line-height:1.2}.sidebar-logo{font-size:18px;font-weight:600;letter-spacing:.5px;white-space:nowrap;transition:all .3s ease;margin:0;overflow:hidden;text-overflow:ellipsis;max-width:100%}.sidebar.collapsed .sidebar-logo{opacity:0;transform:translate(-12px);pointer-events:none}.sidebar-toggle{background:none;border:none;color:#fff;font-size:20px;cursor:pointer}.sidebar-menu{flex:1;padding:14px;overflow-y:auto}.sidebar-item{display:flex;align-items:center;gap:14px;padding:12px 16px;margin-bottom:8px;border-radius:12px;font-size:14px;color:#cbd5e1;text-decoration:none;cursor:pointer;transition:all .25s ease;white-space:nowrap;position:relative}.sidebar-item i,.sidebar-item svg{min-width:22px;font-size:18px}.sidebar-item span{transition:all .25s ease}.sidebar-item:hover{background:#3b82f626;color:#fff;transform:translate(3px)}.sidebar-item.active{background:linear-gradient(90deg,#2563eb,#1d4ed8);color:#fff;box-shadow:0 8px 20px #2563eb59}.sidebar.collapsed .sidebar-item span{opacity:0;transform:translate(-10px);pointer-events:none}.dropdown{justify-content:space-between}.dropdown-arrow{font-size:12px;opacity:.6;transition:transform .3s ease}.dropdown.open .dropdown-arrow{transform:rotate(180deg)}.sidebar.collapsed .dropdown-arrow{display:none}.dropdown-menu{margin:8px 0 10px 32px;display:flex;flex-direction:column;gap:6px;animation:dropdownFade .25s ease}.sidebar.collapsed .dropdown-menu{display:none}.sidebar-subitem{padding:9px 14px;border-radius:8px;font-size:13px;color:#94a3b8;text-decoration:none;transition:all .25s ease}.sidebar-subitem:hover{background:#3b82f61f;color:#fff;transform:translate(4px)}.sidebar-subitem.active{background:#2563eb40;color:#fff}.sidebar-footer{padding:14px;border-top:1px solid rgba(255,255,255,.06)}button.sidebar-item{width:100%;text-align:left;background:none;border:none;font:inherit;font-family:inherit}.sidebar-item.logout{color:#fca5a5}.sidebar-item.logout:hover{background:#ef44442e;color:#fff}.sidebar-menu::-webkit-scrollbar{width:6px}.sidebar-menu::-webkit-scrollbar-thumb{background:#ffffff26;border-radius:6px}@keyframes dropdownFade{0%{opacity:0;transform:translateY(-6px)}to{opacity:1;transform:translateY(0)}}.sidebar-dropdown-menu{display:flex;flex-direction:column;justify-content:center}@media(max-width:768px){.sidebar{position:fixed;left:-260px;top:0;height:100vh;z-index:999;transition:left .3s ease}.sidebar.mobile-open{left:0}.sidebar.collapsed{left:-80px}.sidebar.collapsed.mobile-open{left:0}}.layout-root{display:flex;height:100vh;width:100%;overflow:hidden}.layout-main{flex:1;min-height:0;background:#f6f8fc;overflow-x:hidden;overflow-y:auto}.layout-content{padding:28px;max-width:100%;min-height:min-content}.layout-topbar{position:sticky;top:0;z-index:30;display:flex;justify-content:flex-end;align-items:center;min-height:56px;padding:10px 28px 0;background:linear-gradient(180deg,#f6f8fc 72%,#f6f8fc00)}.layout-topbar+.layout-content{padding-top:12px}@media(max-width:768px){.layout-root{flex-direction:column}.layout-content{padding:16px}.layout-topbar{padding:10px 16px 0 76px}}.mobile-menu-btn{display:none;position:fixed;top:20px;left:20px;z-index:1000;background:#2563eb;color:#fff;border:none;width:45px;height:45px;border-radius:10px;font-size:20px;cursor:pointer;box-shadow:0 4px 12px #2563eb4d}.sidebar-overlay{display:none}@media(max-width:768px){.mobile-menu-btn{display:block}.sidebar-overlay{display:block;position:fixed;inset:0;background:#00000080;z-index:998}.layout-main{margin-left:0}}.sidebar{width:260px;min-height:100vh;background:linear-gradient(180deg,#020617,#0f172a);color:#fff;display:flex;flex-direction:column;padding:20px 16px;transition:width .3s ease}.sidebar.collapsed{width:80px}.sidebar-header{margin-bottom:28px;display:flex;justify-content:space-between;align-items:center}.sidebar-logo{font-size:18px;font-weight:600;letter-spacing:.5px}.collapse-btn{background:none;border:none;color:#fff;font-size:14px;cursor:pointer}.sidebar-menu{display:flex;flex-direction:column;gap:6px}.sidebar-item{display:flex;align-items:center;gap:12px;padding:12px 14px;border-radius:10px;text-decoration:none;color:#cbd5f5;font-size:14px;font-weight:500;transition:all .25s ease;cursor:pointer}.sidebar-item:hover{background:#ffffff14}.sidebar-item.active{background:#2563eb;color:#fff}.dropdown-parent{position:relative;justify-content:space-between}.dropdown-arrow{margin-left:auto;font-size:10px;transition:transform .25s ease}.dropdown-parent.open .dropdown-arrow{transform:rotate(180deg)}.dropdown-wrapper{display:grid;grid-template-rows:0fr;transition:grid-template-rows .3s ease}.dropdown-wrapper.show{grid-template-rows:1fr}.dropdown-wrapper>*{overflow:hidden}.sidebar-item.child{font-size:13px;padding:8px 12px;border-radius:8px;opacity:.85;margin-left:28px;margin-top:4px}.sidebar-item.child:hover{background:#ffffff0f;opacity:1}.sidebar-item.child.active{background:#2563eb;color:#fff}.sidebar-footer{margin-top:auto;padding-top:16px;border-top:1px solid rgba(255,255,255,.08)}.sidebar-item.logout{color:#f87171}.sidebar-item.logout:hover{background:#ef444426}.sidebar.collapsed .sidebar-logo{display:none}.sidebar.collapsed .sidebar-item span:nth-child(2){display:none}.sidebar.collapsed .sidebar-item{justify-content:center}.sidebar.collapsed .dropdown-wrapper{display:none}@media(max-width:768px){.sidebar{position:fixed;left:-260px;top:0;height:100vh;z-index:999;transition:left .3s ease;box-shadow:4px 0 30px #0000004d}.sidebar.mobile-open{left:0}.sidebar.collapsed{left:-80px}.sidebar.collapsed.mobile-open{left:0}}.employee-layout{display:flex;height:100vh;width:100vw;overflow:hidden;background:#f5f7fb}.employee-body{flex:1;display:flex;flex-direction:column;height:100%;min-width:0;overflow:hidden}.employee-header{height:70px;background:#fff;padding:0 30px;display:flex;align-items:center;justify-content:space-between;border-bottom:1px solid #e5e7eb;flex-shrink:0;z-index:10}.employee-role{font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px}.employee-user{margin-right:18px;font-size:14.5px;font-weight:600;color:#0f172a}.logout-btn{padding:8px 16px;border:none;background:#fee2e2;color:#991b1b;font-weight:600;border-radius:8px;cursor:pointer;transition:all .2s ease}.logout-btn:hover{background:#fecaca;color:#7f1d1d;transform:translateY(-1px)}.employee-main{flex:1;padding:30px;overflow-y:auto;background:#f5f7fb}.employee-content{max-width:1200px;margin:0 auto;width:100%}.mobile-menu-btn{display:none;position:fixed;top:15px;left:16px;z-index:1000;background:#2563eb;color:#fff;border:none;width:40px;height:40px;border-radius:8px;font-size:18px;cursor:pointer;box-shadow:0 4px 12px #2563eb4d;align-items:center;justify-content:center;line-height:1;transition:background .2s ease}.sidebar-overlay{display:none;position:fixed;inset:0;background:#0006;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);z-index:998}@media(max-width:1024px){.sidebar{width:220px}}@media(max-width:768px){.mobile-menu-btn{display:flex}.sidebar-overlay{display:block}.employee-layout{flex-direction:column}.employee-body{flex:1;min-height:0;overflow:hidden}.employee-header{padding:0 16px 0 76px}.employee-main{padding:16px}}:root{--primary: #2563eb;--primary-hover: #1d4ed8;--primary-light: #eff6ff;--text-main: #0f172a;--text-muted: #64748b;--bg-input: #f8fafc;--border-light: #e2e8f0;--error: #ef4444;--success: #10b981}body{margin:0;font-family:Outfit,sans-serif}.login-page-wrapper{display:flex;min-height:100vh;background:#fff}.login-sidebar{flex:1;background:linear-gradient(135deg,#0f172a,#1e3a8a);position:relative;overflow:hidden;display:flex;align-items:center;justify-content:center;padding:4rem;color:#fff}.sidebar-content{position:relative;z-index:10;max-width:480px}.sidebar-content h1{font-size:3.5rem;font-weight:700;line-height:1.1;margin-bottom:1.5rem;background:linear-gradient(to right,#fff,#93c5fd);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.sidebar-content p{font-size:1.125rem;line-height:1.6;color:#bfdbfe;margin-bottom:3rem}.sidebar-decoration{position:relative;height:300px;width:100%}.glass-card{background:#ffffff1a;backdrop-filter:blur(12px);-webkit-backdrop-filter:blur(12px);border:1px solid rgba(255,255,255,.2);border-radius:16px;padding:1.5rem;position:absolute;box-shadow:0 25px 50px -12px #00000080;animation:float 6s ease-in-out infinite}.card-1{width:240px;top:20px;left:0;animation-delay:0s}.card-2{width:200px;bottom:20px;right:20px;animation-delay:-3s}.skeleton-line{height:12px;background:#fff3;border-radius:6px;margin-bottom:12px;width:100%}.skeleton-line.short{width:60%}.user-avatar{width:40px;height:40px;border-radius:50%;background:#fff3;margin-bottom:12px}.circle{position:absolute;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#8b5cf6);filter:blur(40px);z-index:-1;opacity:.6}.circle-1{width:300px;height:300px;top:-50px;right:-50px}.circle-2{width:200px;height:200px;bottom:-50px;left:-50px}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-20px)}to{transform:translateY(0)}}.login-container{flex:1;display:flex;align-items:center;justify-content:center;padding:2rem;background:#fff}.login-container:only-child{min-height:100vh;background:linear-gradient(135deg,#f8fafc,#eff6ff)}.login-card{width:100%;max-width:400px;animation:fadeUp .6s ease-out}.login-container:only-child .login-card{background:#fff;padding:40px;border-radius:24px;box-shadow:0 25px 50px -12px #0000000d;border:1px solid #f1f5f9}.brand-logo{width:48px;height:48px;background:var(--primary-light);color:var(--primary);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:1.5rem}.brand-logo svg{width:28px;height:28px}.login-card h2{font-size:2rem;font-weight:700;color:var(--text-main);margin:0 0 .5rem;font-family:Outfit,sans-serif}.login-subtitle{color:var(--text-muted);font-size:1rem;margin-bottom:2rem}.input-group{margin-bottom:1.25rem}.input-group label{display:block;font-size:.875rem;font-weight:600;color:var(--text-main);margin-bottom:.5rem}.input-wrapper{position:relative;display:flex;align-items:center}.input-icon{position:absolute;left:14px;width:20px;height:20px;color:#94a3b8;transition:color .3s}.input-wrapper input{width:100%;padding:14px 14px 14px 44px;background:var(--bg-input);border:1px solid var(--border-light);border-radius:10px;font-size:1rem;color:var(--text-main);font-family:Outfit,sans-serif;transition:all .3s;box-sizing:border-box}.input-wrapper input:focus{outline:none;border-color:var(--primary);background:#fff;box-shadow:0 0 0 4px #2563eb1a}.input-wrapper input:focus+.input-icon,.input-wrapper input:not(:placeholder-shown)+.input-icon{color:var(--primary)}.form-actions{display:flex;justify-content:space-between;align-items:center;margin-bottom:1.5rem}.remember-me{display:flex;align-items:center;gap:.5rem;font-size:.875rem;color:var(--text-muted);cursor:pointer}.remember-me input{width:16px;height:16px;accent-color:var(--primary);cursor:pointer}.forgot-password-link{background:none;border:none;color:var(--primary);font-size:.875rem;font-weight:600;cursor:pointer;padding:0;font-family:Outfit,sans-serif;transition:color .2s}.forgot-password-link:hover{color:var(--primary-hover);text-decoration:underline}.login-btn{width:100%;padding:14px;background:var(--primary);color:#fff;border:none;border-radius:10px;font-size:1rem;font-weight:600;font-family:Outfit,sans-serif;cursor:pointer;transition:all .3s;display:flex;justify-content:center;align-items:center;box-shadow:0 4px 12px #2563eb33}.login-btn:hover:not(:disabled){background:var(--primary-hover);transform:translateY(-1px);box-shadow:0 6px 16px #2563eb4d}.login-btn:active:not(:disabled){transform:translateY(1px);box-shadow:0 2px 8px #2563eb33}.login-btn:disabled{background:#94a3b8;cursor:not-allowed;box-shadow:none}.mt-4{margin-top:1rem}.login-error,.login-success{display:flex;align-items:center;gap:10px;padding:12px 16px;border-radius:10px;font-size:.875rem;font-weight:500;margin-bottom:1.5rem;animation:slideIn .3s ease}.login-error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca}.login-error svg{width:18px;height:18px;flex-shrink:0}.login-success{background:#ecfdf5;color:#047857;border:1px solid #a7f3d0}.login-success svg{width:18px;height:18px;flex-shrink:0}.loader{width:20px;height:20px;border:3px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite}@keyframes slideIn{0%{opacity:0;transform:translate(-10px)}to{opacity:1;transform:translate(0)}}.modal-overlay{position:fixed;top:0;left:0;width:100vw;height:100vh;background:#0f172a99;backdrop-filter:blur(4px);-webkit-backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .3s ease}.modal-content{background:#fff;width:90%;max-width:440px;border-radius:24px;padding:40px;position:relative;box-shadow:0 25px 50px -12px #00000040;animation:modalPop .4s cubic-bezier(.16,1,.3,1)}.modal-close-btn{position:absolute;top:20px;right:20px;background:var(--bg-input);border:none;width:32px;height:32px;border-radius:50%;display:flex;align-items:center;justify-content:center;color:var(--text-muted);cursor:pointer;transition:all .2s}.modal-close-btn:hover{background:#e2e8f0;color:var(--text-main)}.modal-close-btn svg{width:16px;height:16px}.modal-header-icon{width:56px;height:56px;background:var(--primary-light);color:var(--primary);border-radius:16px;display:flex;align-items:center;justify-content:center;margin-bottom:20px}.modal-header-icon svg{width:28px;height:28px}.modal-content h3{font-size:1.5rem;font-weight:700;color:var(--text-main);margin:0 0 .5rem}.modal-subtitle{color:var(--text-muted);font-size:.95rem;margin-bottom:24px;line-height:1.5}@keyframes modalPop{0%{opacity:0;transform:scale(.95) translateY(10px)}to{opacity:1;transform:scale(1) translateY(0)}}@media(max-width:900px){.login-page-wrapper{flex-direction:column}.login-sidebar{flex:none;padding:3rem 2rem;min-height:auto;align-items:center;text-align:center}.sidebar-content h1{font-size:2.5rem;margin-bottom:1rem}.sidebar-content p{font-size:1.1rem;margin-bottom:1rem}.sidebar-decoration{display:none}.login-container{padding:2rem;border-radius:30px 30px 0 0;margin-top:0;z-index:20;position:relative;box-shadow:none;flex:1}}@media(max-width:480px){.login-sidebar{padding:2rem 1.5rem 1.5rem}.sidebar-content h1{font-size:2rem}.sidebar-content p{font-size:1rem}.login-container{padding:2rem 1.5rem}.modal-content{padding:30px 24px}}.dashboard-hero h2{font-size:26px;font-weight:700;letter-spacing:.5px}.dashboard-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px}.recent-list{margin-top:12px;padding-left:18px}.recent-list li{margin-bottom:10px;font-size:14px;color:#0f172a}.status-active{margin-left:8px;color:#16a34a;font-size:13px;font-weight:500}.muted{color:#64748b;font-size:14px}.payroll-widget{position:relative}.payroll-month{font-size:14px;color:#64748b;margin-bottom:8px}.payroll-status{display:inline-block;padding:4px 10px;border-radius:20px;font-size:12px;font-weight:600;margin-bottom:16px}.payroll-status.open{background:#dcfce7;color:#166534}.payroll-status.closed{background:#fee2e2;color:#991b1b}.payroll-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.payroll-stats div{background:#f8fafc;padding:12px;border-radius:10px;text-align:center}.payroll-stats strong{display:block;font-size:18px}.payroll-stats span{font-size:12px;color:#64748b}.kpi-card h3{font-size:30px;font-weight:700;letter-spacing:.5px}@media(max-width:1024px){.dashboard-kpis{grid-template-columns:repeat(2,1fr)}.dashboard-grid{grid-template-columns:1fr}}.kpi-card,.dashboard-card,.payroll-widget{opacity:0;animation:fadeSlideUp .6s ease forwards}.dashboard-card:nth-child(2){animation-delay:.6s}.payroll-widget{animation-delay:.7s}.clock-time:after{content:"";animation:blink 1s infinite}.dashboard-hero h2{font-size:26px;font-weight:700;background:linear-gradient(90deg,#fff,#93c5fd,#fff);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:textShine 6s linear infinite}.role-badge{margin-left:12px;padding:6px 12px;font-size:12px;border-radius:20px;background:#ffffff26;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);border:1px solid rgba(255,255,255,.25)}.notification-bell{position:relative;font-size:22px;cursor:pointer}.notification-badge{position:absolute;top:-6px;right:-10px;background:#ef4444;color:#fff;font-size:11px;padding:2px 6px;border-radius:50%;font-weight:600}@keyframes blink{0%,50%,to{opacity:1}25%,75%{opacity:.4}}@media(max-width:768px){.dashboard-hero{padding:24px}.hero-content{flex-direction:column;gap:16px;align-items:flex-start}.hero-right{width:100%;justify-content:space-between}.dashboard-kpis{grid-template-columns:1fr;gap:16px}.dashboard-grid{grid-template-columns:1fr}.payroll-stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.dashboard-hero h2{font-size:20px}.clock-time{font-size:22px}.kpi-card h3{font-size:24px}.notification-dropdown{width:220px}}@media(max-width:1024px){.dashboard-kpis{grid-template-columns:repeat(2,1fr)!important}.dashboard-grid{grid-template-columns:1fr!important}}@media(max-width:768px){.dashboard-hero{padding:20px 16px!important;border-radius:16px!important;margin-bottom:20px!important}.dashboard-hero>div{padding:18px 20px!important}.hero-content{flex-direction:column!important;gap:14px!important;align-items:flex-start!important}.dashboard-hero h2{font-size:20px!important}.hero-right{width:100%!important;justify-content:space-between!important;flex-wrap:wrap!important;gap:10px!important}.dashboard-kpis{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}.kpi-card{padding:16px!important;min-height:auto!important}.kpi-card h3{font-size:22px!important}.dashboard-grid{grid-template-columns:1fr!important;gap:16px!important}.payroll-stats{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}.notification-dropdown{width:280px!important;right:-60px!important}}@media(max-width:480px){.dashboard-kpis{grid-template-columns:1fr!important}.dashboard-hero h2{font-size:18px!important}.clock-time,.kpi-card h3{font-size:20px!important}.payroll-stats{grid-template-columns:1fr!important}.notification-dropdown{width:calc(100vw - 32px)!important;right:auto!important;left:0!important}}.modern-dashboard{font-family:Inter,Segoe UI,sans-serif;background-color:#f8fafc;min-height:100vh}.modern-dashboard .dashboard-hero{background:linear-gradient(120deg,#1e293b,#0f172a);border-radius:20px;padding:32px 40px;margin-bottom:32px;color:#fff;box-shadow:0 20px 40px -10px #0f172a66;position:relative;overflow:hidden}.modern-dashboard .dashboard-hero:after{content:"";position:absolute;top:-50%;right:-10%;width:400px;height:400px;background:radial-gradient(circle,#3b82f64d,#0000 70%);border-radius:50%;z-index:1}.modern-dashboard .hero-greeting{font-size:32px;font-weight:700;margin-bottom:8px;background:linear-gradient(to right,#fff,#93c5fd);-webkit-background-clip:text;-webkit-text-fill-color:transparent}.modern-dashboard .hero-subtitle{color:#94a3b8;font-size:16px}.modern-dashboard .dashboard-kpis{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:24px;margin-bottom:32px}.modern-dashboard .kpi-card{display:flex;align-items:center;padding:24px;border-radius:20px;color:#fff;box-shadow:0 10px 25px -5px #0000001a;transition:transform .3s ease,box-shadow .3s ease;position:relative;overflow:hidden}.modern-dashboard .kpi-card:before{content:"";position:absolute;inset:0;background:linear-gradient(to bottom right,#fff3,#fff0);z-index:1}.modern-dashboard .kpi-card:hover{transform:translateY(-5px);box-shadow:0 20px 30px -10px #0003}.modern-dashboard .kpi-icon-wrapper{background:#fff3;padding:16px;border-radius:16px;margin-right:20px;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);z-index:2;display:flex;align-items:center;justify-content:center}.modern-dashboard .kpi-icon-wrapper svg{width:28px;height:28px;color:#fff}.modern-dashboard .kpi-info{z-index:2}.modern-dashboard .kpi-info h3{font-size:32px;font-weight:800;margin-bottom:4px;line-height:1}.modern-dashboard .kpi-info span{font-size:14px;font-weight:500;opacity:.9}.modern-dashboard .dashboard-grid{display:grid;grid-template-columns:2fr 1fr;gap:24px;margin-bottom:32px}.modern-dashboard .bottom-grid{grid-template-columns:1fr 1fr}.modern-dashboard .premium-card{background:#fff;border-radius:20px;padding:24px;box-shadow:0 4px 6px -1px #0000000d,0 2px 4px -1px #00000008;border:1px solid #f1f5f9;transition:box-shadow .3s ease}.modern-dashboard .premium-card:hover{box-shadow:0 10px 25px -5px #0000001a,0 8px 10px -6px #0000001a}.modern-dashboard .card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.modern-dashboard .card-header h3{font-size:18px;font-weight:700;color:#0f172a;margin:0}.modern-dashboard .badge{background:#eff6ff;color:#3b82f6;padding:6px 12px;border-radius:20px;font-size:12px;font-weight:600}.modern-dashboard .view-all-btn{color:#3b82f6;font-size:14px;font-weight:600;text-decoration:none;transition:color .2s ease}.modern-dashboard .view-all-btn:hover{color:#2563eb;text-decoration:underline}.modern-dashboard .dashboard-sidebar{display:flex;flex-direction:column;gap:24px}.modern-dashboard .health-status-body{display:flex;align-items:center;gap:20px;margin-top:16px}.modern-dashboard .status-indicator{position:relative;width:48px;height:48px;display:flex;align-items:center;justify-content:center}.modern-dashboard .pulse-core{width:20px;height:20px;border-radius:50%;z-index:2}.modern-dashboard .healthy .pulse-core{background:#10b981}.modern-dashboard .issue .pulse-core{background:#ef4444}.modern-dashboard .pulse-ring{position:absolute;width:100%;height:100%;border-radius:50%;animation:pulse-animation 2s infinite;z-index:1}.modern-dashboard .healthy .pulse-ring{background:#10b9814d}.modern-dashboard .issue .pulse-ring{background:#ef44444d}@keyframes pulse-animation{0%{transform:scale(.5);opacity:1}to{transform:scale(1.5);opacity:0}}.modern-dashboard .health-text{font-size:20px;font-weight:700;margin-bottom:4px}.modern-dashboard .text-emerald-500{color:#10b981}.modern-dashboard .text-red-500{color:#ef4444}.modern-dashboard .muted-text{color:#64748b;font-size:14px}.modern-dashboard .recent-companies-list{display:flex;flex-direction:column;gap:16px}.modern-dashboard .recent-company-item{display:flex;align-items:center;padding:12px;border-radius:12px;background:#f8fafc;transition:background .2s ease}.modern-dashboard .recent-company-item:hover{background:#f1f5f9}.modern-dashboard .company-avatar{width:44px;height:44px;border-radius:12px;background:linear-gradient(135deg,#e0e7ff,#c7d2fe);color:#4f46e5;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;margin-right:16px}.modern-dashboard .company-info{flex:1}.modern-dashboard .company-info strong{display:block;color:#0f172a;font-size:15px;margin-bottom:4px}.modern-dashboard .company-info span{color:#64748b;font-size:13px}.modern-dashboard .company-date{color:#94a3b8;font-size:13px;font-weight:500}.modern-dashboard .modern-table{width:100%;border-collapse:separate;border-spacing:0}.modern-dashboard .modern-table th{background:#f8fafc;color:#64748b;font-size:12px;font-weight:600;text-transform:uppercase;letter-spacing:.5px;padding:16px;text-align:left;border-bottom:1px solid #e2e8f0}.modern-dashboard .modern-table th:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px}.modern-dashboard .modern-table th:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px}.modern-dashboard .modern-table td{padding:16px;border-bottom:1px solid #f1f5f9;color:#334155;font-size:14px;vertical-align:middle}.modern-dashboard .td-name{display:flex;align-items:center;font-weight:600}.modern-dashboard .mini-avatar{width:32px;height:32px;border-radius:8px;background:#e2e8f0;color:#475569;display:flex;align-items:center;justify-content:center;margin-right:12px;font-weight:700;font-size:14px}.modern-dashboard .tenant-code{font-family:monospace;background:#f1f5f9;padding:4px 8px;border-radius:6px;color:#475569}.modern-dashboard .count-badge{display:inline-block;padding:4px 12px;border-radius:20px;font-weight:600;font-size:13px}.modern-dashboard .count-badge.blue{background:#dbeafe;color:#1e40af}.modern-dashboard .count-badge.green{background:#dcfce7;color:#166534}.modern-dashboard .dashboard-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;height:70vh;gap:20px}.modern-dashboard .spinner{width:40px;height:40px;border:4px solid #e2e8f0;border-top-color:#3b82f6;border-radius:50%;animation:spin 1s linear infinite}.animate-pulse-slow{animation:pulse 3s cubic-bezier(.4,0,.6,1) infinite}@media(max-width:1024px){.modern-dashboard .dashboard-grid,.modern-dashboard .bottom-grid{grid-template-columns:1fr}}@media(max-width:768px){.modern-dashboard .dashboard-kpis{grid-template-columns:1fr}.modern-dashboard .dashboard-hero{padding:24px}.modern-dashboard .hero-content{flex-direction:column;align-items:flex-start}}.modern-dashboard .premium-card{min-width:0}.employees-page{width:100%;display:flex;flex-direction:column;gap:24px;animation:fadeIn .25s ease-in-out}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:16px;background:linear-gradient(90deg,#1a2035,#283e70);color:#fff;padding:24px 32px;border-radius:16px;box-shadow:0 10px 15px -3px #0000001a;animation:fadeSlideIn .4s ease-out}.page-title{font-size:24px;font-weight:700;color:#fff;letter-spacing:-.5px;margin:0}.page-subtitle{font-size:14px;color:#fffc;margin-top:6px;line-height:1.5}.header-actions{display:flex;flex-wrap:wrap;gap:12px;align-items:center}.settings-btn{background:#f8fafc;color:#475569;border:1px solid #cbd5e1;padding:10px 18px;border-radius:10px;font-size:13.5px;font-weight:600;cursor:pointer;transition:all .2s ease;display:inline-flex;align-items:center;gap:6px}.settings-btn:hover{background:#f1f5f9;color:#1e293b;border-color:#94a3b8}.deactivated-btn{background:#f8fafc;color:#475569;border:1px solid #cbd5e1;padding:10px 18px;border-radius:10px;font-size:13.5px;font-weight:600;cursor:pointer;transition:all .2s ease}.deactivated-btn:hover{background:#f1f5f9;color:#1e293b;border-color:#94a3b8}.add-employee-btn{background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;padding:10px 18px;border-radius:10px;border:none;font-size:13.5px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 4px 12px #6366f133}.add-employee-btn:hover{background:linear-gradient(135deg,#4338ca,#4f46e5);box-shadow:0 6px 16px #6366f14d;transform:translateY(-1px)}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.filter-bar{display:flex;gap:12px;align-items:center;background:#fff;padding:16px 20px;border-radius:14px;border:1px solid #f0f2f5;flex-wrap:wrap;box-shadow:0 10px 30px #00000003}.search-input{flex:1;min-width:240px;padding:10px 14px;border-radius:8px;border:1px solid #cbd5e1;font-size:13.5px;background:#fff;transition:all .2s ease}.search-input:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.filter-select{padding:10px 14px;border-radius:8px;border:1px solid #cbd5e1;font-size:13.5px;background:#fff;cursor:pointer;min-width:160px;transition:all .2s ease}.filter-select:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.table-wrapper{background:#fff;border-radius:16px;box-shadow:0 10px 30px #00000005;padding:24px;border:1px solid #f0f2f5;margin-top:20px;overflow-x:auto;overflow-y:visible;position:relative}.employees-table{width:100%;border-collapse:collapse}.employees-table th{background:#f8fafc;color:#475569;text-align:left;padding:12px 14px;font-size:12px;font-weight:700;border-bottom:2px solid #f1f5f9;text-transform:uppercase;letter-spacing:.5px;position:sticky;top:0;z-index:2}.employees-table td{padding:14px;border-bottom:1px solid #f1f5f9;vertical-align:middle;color:#1e293b;font-weight:500;font-size:13.5px}.employees-table tbody tr:hover{background:#faf5ff}.empty-state{padding:60px 40px;text-align:center;color:#64748b;font-size:16px;font-weight:500}.actions-cell{text-align:center;position:relative;min-width:220px;white-space:nowrap}.employee-cell{display:flex;align-items:center;gap:10px}.employee-avatar,.employee-avatar-img{width:36px;height:36px;border-radius:999px;flex-shrink:0}.employee-avatar{display:inline-flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;font-size:12px;font-weight:700}.employee-avatar-img{object-fit:cover;border:1px solid #dbeafe}.employee-meta{display:flex;flex-direction:column;gap:2px}.employee-meta-sub{font-size:11px;color:#64748b;font-weight:500}.action-buttons{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:center}.action-btn{padding:6px 12px;border-radius:6px;border:none;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s ease;white-space:nowrap}.action-btn-view{background:#eef2ff;color:#4f46e5;border:1px solid #e0e7ff}.action-btn-view:hover{background:#4f46e5;color:#fff;transform:translateY(-1px)}.action-btn-edit{background:#faf5ff;color:#7c3aed;border:1px solid #f3e8ff}.action-btn-edit:hover{background:#7c3aed;color:#fff;transform:translateY(-1px)}.action-btn-deactivate{background:#fef2f2;color:#b91c1c;border:1px solid #fee2e2}.action-btn-deactivate:hover{background:#b91c1c;color:#fff;transform:translateY(-1px)}.pagination{display:flex;justify-content:center;gap:10px;align-items:center;flex-wrap:wrap}.page-summary{font-size:14px;color:#475569;font-weight:600;padding:0 12px}.page-btn{padding:8px 16px;border-radius:8px;border:1px solid #cbd5e1;background:#fff;cursor:pointer;transition:all .2s ease;font-weight:600;color:#475569;font-size:13px}.page-btn:hover:not(:disabled){background:#6366f1;color:#fff;border-color:#6366f1}.page-btn:disabled{opacity:.4;cursor:not-allowed;background:#f8fafc}.page-btn.active{background:#4f46e5;color:#fff;border-color:#4f46e5}.page-number-group{display:flex;gap:6px;align-items:center}.modal-overlay{position:fixed;inset:0;background:#0f172a73;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);display:flex;align-items:center;justify-content:center;z-index:10000}.modal-card{background:#fff;border-radius:20px;padding:28px;box-shadow:0 20px 25px -5px #0000001a,0 10px 10px -5px #0000000a;max-height:90vh;overflow-y:auto;animation:modalSlideUp .3s cubic-bezier(.16,1,.3,1)}.modal-card.wide{max-width:900px;width:90%}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;border-bottom:1px solid #f1f5f9;padding-bottom:16px}.modal-header h3{margin:0;font-size:18px;color:#0f172a;font-weight:700}.modal-close{background:none;border:none;font-size:24px;cursor:pointer;color:#64748b;transition:color .15s ease}.modal-table-scroll{max-height:500px;overflow-y:auto}@keyframes modalSlideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}.btn{border:none;padding:10px 20px;border-radius:8px;font-weight:600;font-size:13.5px;cursor:pointer;transition:all .2s ease}.btn.primary{background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff}.btn.primary:hover{background:linear-gradient(135deg,#4338ca,#4f46e5)}@media(max-width:768px){.page-header{flex-direction:column;gap:16px;align-items:flex-start}.filter-bar{flex-direction:column}.search-input,.filter-select{width:100%}.employees-table{font-size:13px}.employees-table th,.employees-table td{padding:12px}.action-buttons{gap:6px}.action-btn{padding:6px 10px;font-size:12px}.employee-avatar,.employee-avatar-img{width:30px;height:30px}.employee-meta-sub{font-size:11px}.page-summary{width:100%;text-align:center;padding:4px 0}}.employee-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px}.stat-card{background:#fff;padding:18px;border-radius:12px;box-shadow:0 10px 30px #00000005;border:1px solid #f0f2f5}.stat-card h4{font-size:12px;color:#64748b;margin-bottom:6px;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.stat-card p{font-size:22px;font-weight:700;color:#0f172a}.table-wrapper{margin-top:20px}@media(max-width:1024px){.employees-grid{grid-template-columns:repeat(2,1fr)!important}}@media(max-width:768px){.employees-header{flex-direction:column!important;gap:14px!important;align-items:flex-start!important}.employees-header-actions{width:100%!important;flex-direction:column!important;gap:10px!important}.employees-header-actions button,.employees-header-actions a{width:100%!important;justify-content:center!important}.employees-filter-bar{flex-direction:column!important;gap:10px!important;padding:12px!important}.employees-filter-bar input,.employees-filter-bar select{width:100%!important}.employees-grid{grid-template-columns:1fr!important;gap:14px!important}.employee-card{padding:16px!important}.employees-table-wrapper{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}.employees-table{min-width:700px!important}}@media(max-width:480px){.employee-card{padding:12px!important}}.custom-tabs{display:flex;border-bottom:1px solid #e2e8f0;background:#f8fafc;border-radius:14px 14px 0 0;padding:0 16px}.tab-btn{padding:16px 24px;background:none;border:none;border-bottom:2px solid transparent;font-size:14.5px;font-weight:600;color:#64748b;cursor:pointer;transition:all .2s ease}.tab-btn:hover{color:#0f172a}.tab-btn.active{color:#4f46e5;border-bottom-color:#4f46e5}.toggle-switch{position:relative;display:inline-block;width:44px;height:24px}.toggle-switch input{opacity:0;width:0;height:0}.slider{position:absolute;cursor:pointer;inset:0;background-color:#cbd5e1;transition:.3s}.slider:before{position:absolute;content:"";height:18px;width:18px;left:3px;bottom:3px;background-color:#fff;transition:.3s;box-shadow:0 2px 4px #0000001a}input:checked+.slider{background-color:#10b981}input:focus+.slider{box-shadow:0 0 1px #10b981}input:checked+.slider:before{transform:translate(20px)}.slider.round{border-radius:24px}.slider.round:before{border-radius:50%}.add-employee-page{width:100%;padding:24px 24px 60px;background:#f8fafc;min-height:100vh}.add-employee-header{background:linear-gradient(135deg,#0f172a,#2563eb,#4f46e5);background-size:200% 200%;animation:gradientShift 6s ease infinite;color:#fff;padding:20px 24px;border-radius:16px;margin-bottom:32px;box-shadow:0 15px 40px #2563eb40;display:flex;align-items:center;justify-content:space-between;gap:14px}.add-employee-header h2{font-size:20px;font-weight:600;letter-spacing:.5px}.add-employee-header p{font-size:14px;margin-top:6px;opacity:.9}.header-back-btn{background:#fff3!important;color:#fff!important;border:1px solid rgba(255,255,255,.3)!important}.header-back-btn:hover{background:#ffffff4d!important}.name-row{display:flex;align-items:center;gap:14px;flex-wrap:wrap}.status-badge{padding:6px 14px;border-radius:999px;font-size:12px;font-weight:600;letter-spacing:.4px;text-transform:capitalize;transition:.3s ease}.status-badge.active{background:#dcfce7;color:#166534;box-shadow:0 4px 12px #16653426}.status-badge.inactive{background:#fee2e2;color:#991b1b;box-shadow:0 4px 12px #991b1b26}.step-form-card{background:#fff;border-radius:16px;box-shadow:0 10px 30px #00000005;padding:28px;margin-bottom:28px;border:1px solid #f0f2f5;transition:all .3s ease}.stepper{display:flex;justify-content:space-between;gap:8px;margin-bottom:32px;position:relative}.step{flex:1;text-align:center;position:relative;opacity:.5;transition:all .3s ease}.step:after{content:"";position:absolute;top:17px;right:-50%;width:100%;height:3px;background:#e2e8f0;z-index:0;transition:all .3s ease}.step:last-child:after{display:none}.step span{width:34px;height:34px;border-radius:50%;background:#e2e8f0;display:inline-flex;align-items:center;justify-content:center;font-weight:700;color:#475569;position:relative;z-index:1;transition:all .3s ease;font-size:13px}.step.active{opacity:1}.step.active span{background:linear-gradient(135deg,#4f46e5,#6366f1);color:#fff;box-shadow:0 4px 12px #6366f159}.step.active:after{background:#6366f1}.step p{font-size:11px;margin-top:8px;color:#64748b;font-weight:600}.step.active p{color:#0f172a}.employee-form-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:24px}.form-field label{font-weight:600;font-size:13px;color:#475569;margin-bottom:6px;letter-spacing:.3px}.form-field input,.form-field select,.form-field textarea{padding:10px 14px;border-radius:8px;border:1px solid #cbd5e1;font-size:14px;transition:all .2s ease;background:#fff;font-family:inherit}.form-field input:hover,.form-field select:hover,.form-field textarea:hover{border-color:#94a3b8}.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:#6366f1;box-shadow:0 0 0 3px #6366f11a}.current-file-text{margin-bottom:8px;font-size:13px;color:#64748b}.current-file-text a{color:#1d4ed8;text-decoration:none;font-weight:600}.current-file-text a:hover{text-decoration:underline}.input-error{border:1px solid #ef4444!important;background:#fff5f5}.error-text{color:#ef4444;font-size:12px;margin-top:5px;font-weight:500}.loading-state.card-loading{display:flex;align-items:center;justify-content:center;gap:10px;background:#fff;border-radius:12px;padding:24px;border:1px solid #e2e8f0}.loading-state .spinner{width:18px;height:18px;border:2px solid #dbeafe;border-top-color:#2563eb;border-radius:50%;animation:spin .8s linear infinite}.form-field input[type=file]{padding:14px;background:#f8fafc;border:2px dashed #cbd5e1;border-radius:14px;cursor:pointer;transition:all .3s ease}.form-field input[type=file]:hover{background:#eef2ff;border-color:#4f46e5}.file-actions{display:flex;align-items:center;gap:10px;margin-top:10px;flex-wrap:wrap}.file-name{font-size:13px;color:#334155}.preview-btn{padding:6px 14px;background:linear-gradient(135deg,#2563eb,#4f46e5);color:#fff;border:none;border-radius:8px;font-size:12px;cursor:pointer;transition:.3s ease}.preview-btn:hover{transform:translateY(-2px);box-shadow:0 6px 18px #2563eb59}.remove-btn{padding:6px 14px;background:#ef4444;color:#fff;border:none;border-radius:8px;font-size:12px;cursor:pointer;transition:.3s ease}.remove-btn:hover{background:#dc2626;transform:translateY(-2px)}.step-actions{display:flex;justify-content:flex-end;gap:14px;margin-top:36px}.btn{padding:10px 18px;border-radius:10px;font-size:13px;font-weight:600;cursor:pointer;border:none;transition:all .25s ease}.btn.primary{background:linear-gradient(135deg,#2563eb,#4f46e5);color:#fff;box-shadow:0 10px 30px #2563eb4d}.btn.primary:hover{transform:translateY(-3px);box-shadow:0 15px 40px #2563eb66}.btn.ghost{background:#f1f5f9;color:#0f172a}.btn.ghost:hover{background:#e2e8f0}.preview-modal{position:fixed;inset:0;background:#0f172aa6;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;align-items:center;justify-content:center;z-index:9999}.preview-content{position:relative;background:#fff;padding:24px;border-radius:18px;max-width:85vw;max-height:85vh;overflow:auto;box-shadow:0 25px 70px #00000059;animation:modalPop .3s ease}.close-btn{position:absolute;top:12px;right:14px;background:#ef4444;border:none;color:#fff;font-size:14px;padding:5px 10px;border-radius:8px;cursor:pointer}.close-btn:hover{background:#dc2626}.modal-image{max-width:70vw;max-height:70vh;object-fit:contain;border-radius:10px}.modal-pdf{width:70vw;height:70vh;border:none}.checkbox-field{display:flex;align-items:center;gap:8px}@keyframes modalPop{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}@media(max-width:768px){.employee-form-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.add-employee-header{flex-direction:column;align-items:flex-start}.header-back-btn{width:100%}.employee-form-grid{grid-template-columns:1fr}.stepper{flex-direction:column;gap:18px}.step:after{display:none}.step-actions{flex-direction:column}.btn{width:100%}}.step-animate{animation:fadeSlide .35s ease forwards}@keyframes fadeSlide{0%{opacity:0;transform:translate(15px)}to{opacity:1;transform:translate(0)}}.step-animate{animation-duration:.35s;animation-fill-mode:both;animation-timing-function:cubic-bezier(.4,0,.2,1)}.step-animate.forward{animation-name:slideForward}.step-animate.backward{animation-name:slideBackward}@keyframes slideForward{0%{opacity:0;transform:translate(40px) scale(.98)}to{opacity:1;transform:translate(0) scale(1)}}@keyframes slideBackward{0%{opacity:0;transform:translate(-40px) scale(.98)}to{opacity:1;transform:translate(0) scale(1)}}.form-field select,.form-field textarea{width:100%;box-sizing:border-box}.form-field textarea{min-height:100px;resize:vertical}.payroll-table .summary-row td{font-weight:700;color:#0f172a;background:#f1f5f9}.payroll-table .summary-row.ctc td,.payroll-table .summary-row.net td,.payroll-table .summary-row.deductions td{font-weight:800;color:#111827}.bold-row td{font-weight:700;background:#f1f5f9;color:#0f172a}.bold-row.summary-gross td{background:#eff6ff}.bold-row.summary-deduction td{background:#fef3c7}.bold-row.summary-net td{background:#dcfce7}.bold-row.summary-ctc td{background:#ede9fe}.salary-step-wrapper{grid-column:1 / -1}.payroll-table{width:100%;border-collapse:collapse;border:1px solid #e2e8f0;border-radius:12px;overflow:hidden;table-layout:fixed}.payroll-table th{background:#f8fafc;padding:10px 12px;text-align:left;font-size:12px;color:#334155;border-bottom:1px solid #e2e8f0;position:sticky;top:0}.payroll-table td{border-bottom:1px solid #f1f5f9;padding:10px 12px;font-size:13px}.payroll-table td:nth-child(2),.payroll-table td:nth-child(3),.payroll-table th:nth-child(2),.payroll-table th:nth-child(3){text-align:right}.payroll-table input[type=number]{width:100%;text-align:right}.bold-row td:first-child{letter-spacing:.3px}.form-field input:disabled,.form-field select:disabled{background:#f1f5f9;color:#64748b;cursor:not-allowed;border-color:#cbd5e1}.form-field small{display:block;margin-top:5px;font-size:12px;font-weight:500}@media(max-width:1024px){.employee-form-grid{grid-template-columns:repeat(2,1fr)!important}.stepper{gap:8px!important}}@media(max-width:768px){.add-employee-container{padding:14px!important}.employee-form-grid{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}.stepper{overflow-x:auto!important;white-space:nowrap!important;padding-bottom:8px!important;gap:4px!important}.step-label{display:none!important}.step-circle{width:30px!important;height:30px!important;font-size:12px!important}.step-actions{flex-direction:column!important;gap:10px!important}.step-actions button{width:100%!important}.form-section-title{font-size:15px!important}}@media(max-width:480px){.employee-form-grid{grid-template-columns:1fr!important}.form-group label{font-size:12px!important}.step-circle{width:26px!important;height:26px!important;font-size:11px!important}}.payroll-page{width:100%;animation:fadeSlideIn .35s ease-out}.payroll-page .page-header{background:linear-gradient(135deg,#0f172a,#1e3a8a,#2563eb);background-size:200% 200%;animation:gradientMove 8s ease infinite;color:#fff;padding:28px 34px;border-radius:22px;display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;box-shadow:0 25px 60px #2563eb59}.payroll-page .page-header h2{font-size:24px;font-weight:600}.payroll-page .page-header p{font-size:14px;opacity:.9;margin-top:6px}.payroll-page .page-header input[type=month]{padding:10px 16px;border-radius:12px;border:none;font-size:14px;outline:none;background:#ffffff2e;color:#fff;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);transition:.2s ease}.payroll-page .page-header input[type=month]:hover{background:#ffffff47}.payroll-page .page-header input[type=month]::-webkit-calendar-picker-indicator{filter:invert(1)}.filter-select{padding:10px 14px;border-radius:12px;border:none;font-size:14px;background:#fff;color:#0f172a}.bulk-actions{display:flex;gap:10px;flex-wrap:wrap}.btn-bulk,.btn-approve,.btn-zip,.btn-email{padding:8px 16px;border-radius:12px;border:none;font-size:14px;cursor:pointer;transition:all .25s ease;font-weight:500}.btn-bulk{background:#0f172a;color:#fff}.btn-bulk:hover{background:#1e293b;transform:translateY(-2px)}.btn-approve{background:linear-gradient(135deg,#16a34a,#15803d);color:#fff}.btn-approve:hover{transform:translateY(-2px);box-shadow:0 8px 20px #16a34a4d}.btn-zip{background:linear-gradient(135deg,#7c3aed,#6d28d9);color:#fff}.btn-zip:hover{transform:translateY(-2px);box-shadow:0 8px 20px #7c3aed4d}.btn-email{background:linear-gradient(135deg,#ea580c,#c2410c);color:#fff}.btn-email:hover{transform:translateY(-2px);box-shadow:0 8px 20px #ea580c4d}.btn-email:disabled{opacity:.6;cursor:not-allowed}.table-wrapper{background:#ffffffd9;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);border-radius:22px;overflow-x:auto;box-shadow:0 25px 60px #0f172a14,inset 0 1px #fff9}.payroll-table{width:100%;border-collapse:collapse;font-size:14px;min-width:950px}.payroll-table thead{background:#f8fafc}.payroll-table th,.payroll-table td{padding:18px 22px;text-align:left;border-bottom:1px solid #e5e7eb;vertical-align:middle}.payroll-table th{font-weight:600;color:#0f172a;font-size:12px;text-transform:uppercase;letter-spacing:.7px}.payroll-table tbody tr{transition:all .2s ease}.payroll-table tbody tr:hover{background:#f1f5f9;transform:scale(1.002)}.status,.status-badge{padding:6px 14px;border-radius:20px;font-size:12px;font-weight:600;text-transform:capitalize}.status.approved,.status-badge.approved{background:#dbeafe;color:#1e40af}.status.paid,.status-badge.paid{background:#dcfce7;color:#166534}.status.pending,.status-badge.pending{background:#fef3c7;color:#92400e}.status.cancelled,.status-badge.cancelled{background:#fee2e2;color:#991b1b}.btn-payslip{background:linear-gradient(135deg,#2563eb,#3b82f6);color:#fff;padding:8px 14px;border-radius:12px;border:none;cursor:pointer;transition:.25s ease;margin-right:6px;font-weight:500}.btn-payslip:hover{transform:translateY(-2px);box-shadow:0 10px 30px #2563eb59}.btn-disabled{background:#cbd5e1;color:#475569;border:none;padding:8px 14px;border-radius:12px;cursor:not-allowed}.btn-email-single{background:linear-gradient(135deg,#f97316,#ea580c);color:#fff;padding:8px 14px;border-radius:12px;border:none;cursor:pointer;transition:.25s ease;font-weight:500}.btn-email-single:hover{transform:translateY(-2px);box-shadow:0 10px 30px #ea580c59}.loading-text{text-align:center;padding:70px;font-size:16px;color:#64748b}.modal-overlay{position:fixed;inset:0;background:#0f172aa6;-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);display:flex;justify-content:center;align-items:center;z-index:999}.modal-card{background:#fff;padding:28px;border-radius:18px;width:420px;box-shadow:0 30px 80px #00000059;animation:fadeSlideIn .25s ease-out}.modal-card h3{margin-bottom:18px;font-size:18px;font-weight:600}.modal-card input{width:100%;margin-bottom:12px;padding:10px;border-radius:10px;border:1px solid #e2e8f0;outline:none;font-size:14px}.modal-card input:focus{border-color:#2563eb;box-shadow:0 0 0 3px #2563eb33}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@media(max-width:900px){.payroll-page .page-header{flex-direction:column;align-items:flex-start;gap:14px}.bulk-actions{width:100%;justify-content:flex-start}.payroll-table th,.payroll-table td{padding:14px 16px}.modal-card{width:90%}}.payslip-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px;margin-bottom:30px}.payslip-summary-grid .summary-card{background:linear-gradient(135deg,#1e293b,#2563eb);color:#fff;padding:22px;border-radius:18px;box-shadow:0 18px 40px #2563eb40;transition:.25s ease}.payslip-summary-grid .summary-card:hover{transform:translateY(-4px)}.payslip-summary-grid h4{font-size:13px;opacity:.85;margin-bottom:8px}.payslip-summary-grid p{font-size:20px;font-weight:600}.btn-view{background:#0ea5e9;color:#fff;padding:8px 14px;border-radius:10px;border:none;cursor:pointer;margin-right:8px}.btn-view:hover{background:#0284c7}.payslip-modal{width:520px;max-height:80vh;overflow-y:auto}.payslip-breakdown{margin-top:15px;font-size:14px;line-height:1.9}.net-pay-highlight{margin-top:12px;font-size:18px;font-weight:600;color:#16a34a}.modal-actions{margin-top:20px;display:flex;justify-content:space-between}.btn-close{background:#64748b;color:#fff;padding:8px 14px;border-radius:10px;border:none;cursor:pointer}.payslip-modal.professional{width:700px;max-height:85vh;overflow-y:auto;background:#fff;border-radius:16px;padding:28px}.payslip-header{display:flex;align-items:center;gap:20px}.payslip-header img{width:70px;height:auto}.payslip-header h3{margin:0;font-size:18px}.payslip-header p{margin:2px 0 0;font-size:13px;color:#64748b}.payslip-meta{display:flex;justify-content:space-between;font-size:14px;margin:16px 0}.payslip-grid{display:flex;gap:40px;margin-top:20px}.payslip-column{flex:1;font-size:14px}.payslip-column h4{margin-bottom:10px;border-bottom:1px solid #e2e8f0;padding-bottom:6px}.payslip-column div{margin-bottom:6px}.highlight{font-weight:600;margin-top:8px}.net-pay-box{margin-top:30px;padding:16px;background:linear-gradient(90deg,#16a34a,#22c55e);color:#fff;font-size:18px;font-weight:600;text-align:center;border-radius:12px}.payslip-modal.professional{position:relative;overflow:hidden}.payslip-watermark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-30deg);font-size:80px;font-weight:700;color:#0f172a0d;letter-spacing:8px;pointer-events:none;-webkit-user-select:none;user-select:none;white-space:nowrap}@media print{body *{visibility:hidden}.payslip-modal.professional,.payslip-modal.professional *{visibility:visible}.payslip-modal.professional{position:absolute;left:0;top:0;width:210mm;min-height:297mm;padding:20mm;box-shadow:none;border-radius:0;background:#fff}.modal-actions,.btn-view,.btn-payslip,.btn-close,.btn-print{display:none!important}.modal-overlay{background:none!important}.payslip-watermark{font-size:120px;opacity:.08}hr{border:1px solid #e5e7eb}}@media print{.payslip-column div{font-size:13px}.payslip-header h3,.net-pay-box{font-size:20px}}.comparison-card{margin-top:30px;padding:16px 20px;border-radius:14px;background:#f8fafc;border:1px solid #e2e8f0}.comparison-card h4{margin-bottom:12px}.comparison-row span:last-child{font-weight:600}.lop-badge{background:#ff4d4f;color:#fff;padding:4px 8px;border-radius:12px;font-size:13px}.lop-info{font-size:12px;color:#ff4d4f;margin-top:4px}.deduction-cell{display:flex;flex-direction:column}.payroll-closed-banner{background:#fff3cd;border:1px solid #ffeeba;color:#856404;padding:10px 16px;border-radius:6px;margin-bottom:15px;font-weight:500}.trend-card{background:#fff;border-radius:10px;padding:20px;margin-bottom:25px;box-shadow:0 2px 10px #0000000d}.trend-card h3{margin-bottom:15px}.timeline-card{background:#fff;padding:20px;border-radius:10px;margin-top:30px;box-shadow:0 2px 10px #0000000d}.timeline{position:relative;margin-left:20px}.timeline:before{content:"";position:absolute;left:8px;top:0;bottom:0;width:2px;background:#ddd}.timeline-item{display:flex;margin-bottom:25px}.timeline-dot{width:16px;height:16px;background:#4caf50;border-radius:50%;margin-right:15px;margin-top:6px}.timeline-content h4{margin:0;font-size:15px;color:#333}.timeline-breakdown{display:flex;gap:15px;margin-top:5px;font-size:13px;color:#666}.revision-card{margin-top:30px;background:#fff;padding:20px;border-radius:10px;box-shadow:0 2px 8px #00000014}.revision-table{width:100%;border-collapse:collapse}.revision-table th{background:#f5f6fa;padding:10px;text-align:left}.revision-table td{padding:10px;border-top:1px solid #eee}.compensation-dashboard{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-top:30px}.comp-card{background:#fff;padding:20px;border-radius:10px;box-shadow:0 2px 8px #00000014;text-align:center}.comp-card h4{margin-bottom:10px;font-size:15px}.comp-card p{font-size:22px;font-weight:600;color:#2c3e50}.payslip-modal.professional{width:720px;max-height:85vh;overflow-y:auto;background:#fff;border-radius:16px;padding:30px;box-shadow:0 25px 60px #00000040}.payslip-header{display:flex;align-items:center;gap:18px;margin-bottom:12px}.payslip-header img{width:60px}.payslip-header h3{font-size:20px;font-weight:600}.payslip-header p{font-size:13px;color:#64748b}.payslip-meta{display:flex;justify-content:space-between;font-size:14px;padding:10px 0;border-bottom:1px solid #e2e8f0}.payslip-grid{display:grid;grid-template-columns:1fr 1fr;gap:40px;margin-top:22px}.payslip-column{font-size:14px}.payslip-column h4{font-size:15px;font-weight:600;border-bottom:2px solid #f1f5f9;padding-bottom:6px;margin-bottom:10px}.payslip-column div{display:flex;justify-content:space-between;margin-bottom:7px}.payslip-column .highlight{border-top:1px dashed #cbd5f5;padding-top:8px;font-weight:600}.net-pay-box{margin-top:30px;padding:18px;background:linear-gradient(90deg,#16a34a,#22c55e);color:#fff;font-size:22px;font-weight:700;text-align:center;border-radius:14px}.modal-actions{margin-top:25px;display:flex;justify-content:space-between;gap:10px}.btn-print{background:#10b981;color:#fff;padding:8px 14px;border-radius:10px;border:none;cursor:pointer}.btn-print:hover{background:#059669}.preview-modal{position:fixed;top:0;left:0;width:100%;height:100%;background:#0f172ad9;display:flex;justify-content:center;align-items:center;z-index:2000}.preview-content{width:90%;max-width:1100px;height:90vh;background:#fff;border-radius:14px;display:flex;flex-direction:column;overflow:hidden}.preview-header{display:flex;justify-content:space-between;align-items:center;padding:14px 18px;border-bottom:1px solid #e5e7eb}.preview-body{flex:1;width:100%;height:100%}.preview-body iframe{width:100%;height:100%;border:none}.btn-preview{background:#2563eb;color:#fff;border:none;padding:7px 12px;border-radius:8px;cursor:pointer;margin-right:6px}.btn-preview:hover{background:#1d4ed8}.btn-close{background:#ef4444;color:#fff;border:none;padding:6px 12px;border-radius:6px;cursor:pointer}.btn-paid{background:#16a34a;color:#fff;border:none;padding:7px 12px;border-radius:8px;cursor:pointer}.btn-paid:hover{background:#15803d}.status-approved{background:#dbeafe;color:#1e40af}.status-paid{background:#dcfce7;color:#166534}.status-draft{background:#fef3c7;color:#92400e}.payslip-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:20px}.payroll-summary{display:grid;grid-template-columns:repeat(auto-fit,minmax(280px,1fr));gap:20px;margin-top:30px}.payroll-summary .card{background:linear-gradient(135deg,#1e293b,#2563eb);color:#fff;padding:24px;border-radius:16px;box-shadow:0 10px 30px #2563eb40;transition:.25s ease}.payroll-summary .card:hover{transform:translateY(-4px);box-shadow:0 15px 40px #2563eb59}.payroll-summary .card h4{font-size:14px;opacity:.9;margin-bottom:10px;font-weight:500}.payroll-summary .card p{font-size:26px;font-weight:700;margin:0}.payslip-chart{margin-top:25px;text-align:center}.payslip-chart h4{margin-bottom:10px;font-size:16px;font-weight:600}.comparison-card{margin-top:30px;background:#fff;padding:20px;border-radius:10px;box-shadow:0 2px 8px #00000014}.comparison-row{display:flex;justify-content:space-between;margin-bottom:8px;font-size:14px}.positive-change{color:#2ecc71;font-weight:600}.negative-change{color:#e74c3c;font-weight:600}.comparison-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:15px;margin-top:15px}.comparison-box{background:#f8fafc;border-radius:10px;padding:12px;display:flex;flex-direction:column;font-size:14px}.comparison-box span{color:#64748b;font-size:13px;margin-bottom:3px}.comparison-box strong{font-size:16px}.comparison-box.change{font-weight:600}.comparison-box.increase{color:#16a34a}.comparison-box.decrease{color:#dc2626}.btn-bank{background:linear-gradient(135deg,#f59e0b,#d97706);color:#fff;padding:8px 16px;border-radius:12px;border:none;font-size:14px;cursor:pointer;transition:all .25s ease;font-weight:500}.btn-bank:hover{transform:translateY(-2px);box-shadow:0 8px 20px #f59e0b4d}@media(max-width:1024px){.payroll-page .page-header{flex-direction:column!important;align-items:flex-start!important;gap:16px!important;padding:22px 24px!important}.payroll-page .page-header h2{font-size:20px!important}.payroll-page .page-header input[type=month],.filter-select{width:100%!important}.bulk-actions{flex-wrap:wrap!important;gap:8px!important;width:100%!important}.btn-bulk,.btn-approve,.btn-zip,.btn-email,.btn-bank{flex:1 1 auto!important;text-align:center!important}.payslip-summary-grid,.payroll-summary,.compensation-dashboard,.comparison-grid{grid-template-columns:repeat(2,1fr)!important}.payslip-modal.professional{width:90vw!important;padding:22px!important}.payslip-grid{gap:24px!important}.table-wrapper{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}.payroll-table{min-width:950px!important}.revision-card{overflow-x:auto!important}.revision-table{min-width:600px!important}}@media(max-width:768px){.payroll-page .page-header{padding:18px 16px!important;border-radius:16px!important;margin-bottom:20px!important}.payroll-page .page-header h2{font-size:18px!important}.payroll-page .page-header p{font-size:12px!important}.payroll-page .page-header input[type=month],.filter-select{width:100%!important;font-size:13px!important}.bulk-actions{flex-direction:column!important;gap:8px!important;width:100%!important}.btn-bulk,.btn-approve,.btn-zip,.btn-email,.btn-bank{width:100%!important;text-align:center!important;padding:10px 14px!important;font-size:13px!important}.payslip-summary-grid{grid-template-columns:1fr!important;gap:14px!important}.payroll-summary{grid-template-columns:1fr!important;gap:14px!important;margin-top:20px!important}.compensation-dashboard{grid-template-columns:1fr!important;gap:14px!important}.payslip-summary-grid .summary-card,.payroll-summary .card,.comp-card{padding:16px!important}.payroll-summary .card p{font-size:22px!important}.table-wrapper{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;border-radius:14px!important}.payroll-table{min-width:800px!important;font-size:13px!important}.payroll-table th,.payroll-table td{padding:12px 14px!important;font-size:13px!important;white-space:nowrap!important}.btn-payslip,.btn-view,.btn-preview,.btn-paid,.btn-disabled{padding:6px 10px!important;font-size:12px!important;margin-right:4px!important}.modal-card{width:92vw!important;padding:20px!important;border-radius:14px!important}.modal-card h3{font-size:16px!important}.modal-card input{font-size:13px!important}.payslip-modal,.payslip-modal.professional{width:92vw!important;max-height:88vh!important;padding:18px!important;border-radius:14px!important}.payslip-header{flex-direction:column!important;align-items:flex-start!important;gap:10px!important}.payslip-header img{width:50px!important}.payslip-header h3{font-size:16px!important}.payslip-meta{flex-direction:column!important;gap:6px!important;font-size:13px!important}.payslip-grid{grid-template-columns:1fr!important;gap:20px!important;flex-direction:column!important}.payslip-column{font-size:13px!important}.net-pay-box{font-size:18px!important;padding:14px!important;margin-top:20px!important}.modal-actions{flex-direction:column!important;gap:8px!important}.modal-actions button,.btn-print,.btn-close{width:100%!important;text-align:center!important}.comparison-grid{grid-template-columns:1fr!important;gap:10px!important}.comparison-row{flex-direction:column!important;gap:2px!important;font-size:13px!important}.timeline-card{padding:14px!important}.timeline-breakdown{flex-direction:column!important;gap:4px!important}.revision-card{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;padding:14px!important}.revision-table{min-width:500px!important;font-size:13px!important}.revision-table th,.revision-table td{padding:8px!important}.trend-card{padding:14px!important}.trend-card h3{font-size:15px!important}.preview-content{width:96vw!important;height:88vh!important;border-radius:10px!important}.preview-header{padding:10px 14px!important;flex-wrap:wrap!important;gap:8px!important}.loading-text{padding:40px 20px!important;font-size:14px!important}.payroll-closed-banner{font-size:13px!important;padding:8px 12px!important}}@media(max-width:480px){.payroll-page .page-header{padding:14px 12px!important;border-radius:12px!important;margin-bottom:16px!important}.payroll-page .page-header h2{font-size:16px!important}.payroll-page .page-header p{font-size:11px!important;margin-top:4px!important}.btn-bulk,.btn-approve,.btn-zip,.btn-email,.btn-bank{font-size:12px!important;padding:9px 12px!important}.payslip-summary-grid .summary-card,.payroll-summary .card{padding:14px!important;border-radius:12px!important}.payslip-summary-grid h4,.payroll-summary .card h4{font-size:12px!important}.payslip-summary-grid p,.payroll-summary .card p{font-size:18px!important}.comp-card{padding:12px!important;border-radius:10px!important}.comp-card h4{font-size:13px!important}.comp-card p{font-size:18px!important}.payroll-table{min-width:700px!important;font-size:12px!important}.payroll-table th,.payroll-table td{padding:10px 12px!important;font-size:12px!important}.status,.status-badge{font-size:11px!important;padding:4px 10px!important}.btn-payslip,.btn-view,.btn-preview,.btn-paid,.btn-disabled{font-size:11px!important;padding:5px 8px!important;border-radius:8px!important}.modal-card{width:96vw!important;padding:16px!important;border-radius:12px!important}.modal-card h3{font-size:15px!important;margin-bottom:12px!important}.modal-card input{font-size:12px!important;padding:8px!important}.payslip-modal,.payslip-modal.professional{width:96vw!important;max-height:90vh!important;padding:14px!important;border-radius:12px!important}.payslip-header h3{font-size:15px!important}.payslip-header p,.payslip-column{font-size:12px!important}.payslip-column h4{font-size:13px!important}.net-pay-box{font-size:16px!important;padding:12px!important;border-radius:10px!important}.payslip-watermark{font-size:50px!important}.comparison-box strong{font-size:14px!important}.comparison-box span{font-size:12px!important}.timeline-content h4{font-size:13px!important}.timeline-breakdown{font-size:12px!important}.revision-table{min-width:420px!important;font-size:12px!important}.revision-table th,.revision-table td{padding:7px!important;font-size:12px!important}.preview-content{width:98vw!important;height:92vh!important;border-radius:8px!important}.loading-text{padding:30px 14px!important;font-size:13px!important}.payroll-closed-banner{font-size:12px!important;padding:7px 10px!important;border-radius:4px!important}.lop-badge{font-size:11px!important;padding:3px 6px!important}.lop-info{font-size:11px!important}.trend-card,.timeline-card{padding:12px!important;border-radius:8px!important}.trend-card h3{font-size:14px!important;margin-bottom:10px!important}}.profile-page{padding:24px;background:#f8fafc;min-height:100vh}.profile-header{display:flex;align-items:center;gap:32px;padding:32px;background:#fff;border-radius:16px;margin-bottom:24px;box-shadow:0 2px 8px #0000000a}.profile-photo-section{display:flex;flex-direction:column;align-items:center;gap:12px}.profile-photo{width:120px;height:120px;border-radius:50%;overflow:hidden;border:4px solid #e2e8f0}.profile-photo img{width:100%;height:100%;object-fit:cover}.photo-placeholder{width:100%;height:100%;display:flex;align-items:center;justify-content:center;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;font-size:36px;font-weight:700}.photo-upload-btn{padding:8px 16px;background:#f1f5f9;border-radius:8px;font-size:12px;font-weight:600;color:#475569;cursor:pointer;transition:all .2s}.photo-upload-btn:hover{background:#e2e8f0}.profile-info{flex:1}.profile-info h1{font-size:28px;font-weight:700;color:#0f172a;margin-bottom:8px}.employee-id{font-size:14px;color:#64748b;margin-bottom:12px}.profile-badges{display:flex;gap:8px}.badge{padding:6px 12px;background:#dbeafe;color:#1e40af;border-radius:6px;font-size:13px;font-weight:600}.profile-actions{display:flex;gap:12px}.btn-edit,.btn-save,.btn-cancel{padding:10px 20px;border:none;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.btn-edit{background:#3b82f6;color:#fff}.btn-edit:hover{background:#2563eb}.btn-save{background:#16a34a;color:#fff}.btn-save:hover{background:#15803d}.btn-cancel{background:#f1f5f9;color:#475569}.btn-cancel:hover{background:#e2e8f0}.profile-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:24px}.profile-section{background:#fff;border-radius:16px;padding:24px;box-shadow:0 2px 8px #0000000a}.profile-section h3{font-size:18px;font-weight:700;color:#0f172a;margin-bottom:20px;padding-bottom:12px;border-bottom:2px solid #f1f5f9}.info-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:16px}.info-item{display:flex;flex-direction:column;gap:6px}.info-item label{font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px}.info-item p{font-size:14px;color:#0f172a;font-weight:500}.info-full{margin-top:16px}.info-full label{display:block;font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.5px;margin-bottom:8px}.info-full p{font-size:14px;color:#0f172a;line-height:1.6}.edit-input,.edit-textarea{width:100%;padding:8px 12px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;font-family:inherit;transition:all .2s}.edit-input:focus,.edit-textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.salary-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:12px;margin-bottom:20px}.salary-item{display:flex;justify-content:space-between;padding:12px;background:#f8fafc;border-radius:8px}.salary-item span{font-size:13px;color:#64748b}.salary-item strong{font-size:14px;color:#0f172a;font-weight:600}.salary-summary{display:flex;flex-direction:column;gap:8px;padding-top:16px;border-top:2px solid #f1f5f9}.summary-item{display:flex;justify-content:space-between;padding:10px;border-radius:8px}.summary-item.total{background:#dcfce7}.summary-item.ctc{background:#dbeafe}.summary-item span{font-size:14px;color:#64748b;font-weight:500}.summary-item strong{font-size:16px;color:#0f172a;font-weight:700}.documents-list{display:flex;flex-direction:column;gap:12px}.document-item{display:flex;justify-content:space-between;align-items:center;padding:12px;background:#f8fafc;border-radius:8px}.document-item span{font-size:14px;color:#0f172a;font-weight:500}.doc-link{padding:6px 12px;background:#3b82f6;color:#fff;border-radius:6px;font-size:12px;font-weight:600;text-decoration:none;transition:all .2s}.doc-link:hover{background:#2563eb}.doc-empty{font-size:12px;color:#94a3b8}@media(max-width:1200px){.profile-grid{grid-template-columns:1fr}}@media(max-width:768px){.profile-header{flex-direction:column;text-align:center}.profile-info{display:flex;flex-direction:column;align-items:center}.info-grid,.salary-grid{grid-template-columns:1fr}}.profile-wrapper{width:100%;display:flex;flex-direction:column;gap:20px}.profile-user{display:flex;align-items:center;gap:16px}.avatar-container{position:relative;width:96px;height:96px}.avatar-image,.avatar-circle{width:96px;height:96px;border-radius:999px;object-fit:cover;border:3px solid #e2e8f0}.avatar-circle{display:flex;align-items:center;justify-content:center;font-size:30px;font-weight:700;color:#fff;background:linear-gradient(135deg,#3b82f6,#1d4ed8)}.avatar-upload,.avatar-delete{position:absolute;width:28px;height:28px;border-radius:999px;display:inline-flex;align-items:center;justify-content:center;border:none;cursor:pointer;box-shadow:0 8px 20px #0f172a26}.avatar-upload{right:-2px;bottom:-2px;background:#2563eb;color:#fff}.avatar-delete{left:-2px;bottom:-2px;background:#ef4444;color:#fff}.profile-meta-line{margin:6px 0 0;color:#475569;font-size:13px}.profile-field label{display:block;font-size:12px;font-weight:600;color:#64748b;margin-bottom:6px;text-transform:uppercase;letter-spacing:.4px}.profile-field p{margin:0;color:#0f172a;font-weight:500}.profile-section.salary .profile-field p{font-weight:700;color:#0b4f3b}.documents-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(220px,1fr));gap:12px}.document-card{border:1px solid #e2e8f0;border-radius:12px;padding:12px;background:#fff;box-shadow:0 2px 10px #0f172a0a}.doc-header{display:flex;gap:8px;align-items:center;margin-bottom:10px}.doc-title{font-size:13px;font-weight:600;color:#1e293b}.doc-preview{width:100%;max-height:130px;object-fit:cover;border-radius:8px;border:1px solid #e2e8f0}.doc-filename{font-size:12px;color:#64748b;margin:6px 0 10px}.doc-actions{display:flex;justify-content:flex-end}.doc-btn{padding:6px 10px;border-radius:6px;background:#2563eb;color:#fff;text-decoration:none;font-size:12px;font-weight:600}.profile-empty{padding:24px;color:#64748b;font-weight:500}@media(max-width:768px){.profile-user{width:100%;flex-direction:column;text-align:center}}@media(max-width:768px){.profile-header{flex-direction:column!important;text-align:center!important;gap:16px!important;padding:20px!important;align-items:center!important}.profile-avatar{margin:0 auto!important}.profile-info-grid,.profile-details-grid{grid-template-columns:1fr!important;gap:12px!important}.profile-tabs,.profile-nav{flex-wrap:wrap!important;gap:8px!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}.profile-tab-btn,.profile-nav button{flex:1 1 auto!important;min-width:100px!important;text-align:center!important;font-size:13px!important;padding:9px 12px!important}.profile-section{padding:16px!important}.profile-field-row{flex-direction:column!important;gap:12px!important}}@media(max-width:480px){.profile-name{font-size:20px!important}}.attendance-page{width:100%;display:flex;flex-direction:column;gap:24px}.page-header{background:linear-gradient(135deg,#020617,#2563eb);color:#fff;padding:24px 28px;border-radius:18px;display:flex;align-items:center;justify-content:space-between;animation:fadeSlideIn .4s ease-out}.page-title{font-size:20px;font-weight:600}.page-subtitle{font-size:14px;color:#cbd5e1;margin-top:4px}.date-badge{background:#e0e7ff;color:#1e40af;padding:6px 14px;border-radius:999px;font-size:13px;font-weight:600}.bulk-action-bar{display:flex;gap:12px;align-items:center;background:#f8fafc;padding:14px 18px;border-radius:14px;border:1px solid #e2e8f0}.bulk-action-bar select{padding:8px 14px;border-radius:8px;border:1px solid #cbd5e1;font-size:14px;background:#fff;cursor:pointer}.bulk-btn{background:#2563eb;color:#fff;padding:8px 18px;border-radius:8px;border:none;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s ease}.bulk-btn:hover{background:#1d4ed8}.bulk-btn:disabled{background:#94a3b8;cursor:not-allowed}.table-wrapper{background:#fff;border-radius:16px;overflow-x:auto;overflow-y:visible;max-width:100%;box-shadow:0 12px 35px #0f172a14;min-height:280px}.premium-table{width:100%;border-collapse:collapse;min-width:900px}.attendance-table{width:100%;border-collapse:collapse}.attendance-table th{background:#f1f5f9;text-align:left;padding:14px;font-size:14px;font-weight:600;color:#0f172a}.attendance-table td{padding:14px;border-bottom:1px solid #e5e7eb;vertical-align:middle}.attendance-table tr:hover{background:#f8fafc}.employee-name{font-weight:500;color:#0f172a}.attendance-actions{display:flex;align-items:center;gap:10px;flex-wrap:wrap}.att-btn{padding:6px 16px;border-radius:8px;border:none;font-size:13px;font-weight:500;cursor:pointer;opacity:.65;transition:all .2s ease;color:#fff}.att-btn:hover{opacity:.9;transform:translateY(-1px)}.att-btn.active{opacity:1;box-shadow:0 2px 6px #00000026}.att-btn:disabled{opacity:.35;cursor:not-allowed;transform:none;box-shadow:none}.att-btn.present{background:#16a34a}.att-btn.absent{background:#ef4444}.att-btn.leave{background:#f59e0b}.lock-label{font-size:12px;font-weight:600;color:#ef4444;background:#fee2e2;padding:4px 8px;border-radius:999px}.month-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:10px}.month-day{border:1px solid #e5e7eb;padding:10px;border-radius:8px;cursor:pointer;font-size:13px;background:#fff;transition:all .2s ease}.month-day:hover{background:#f8fafc}.month-day.present{background:#16a34a;color:#fff}.month-day.absent{background:#ef4444;color:#fff}.month-day.leave{background:#f59e0b;color:#fff}.month-day.empty{background:#f1f5f9;color:#94a3b8}.status-badge{display:inline-block;padding:4px 10px;border-radius:999px;font-size:12px;font-weight:500}.status-badge.present{background:#16a34a;color:#fff}.status-badge.absent{background:#ef4444;color:#fff}.status-badge.leave,.status-badge.half-day,.status-badge.paid-leave,.status-badge.unpaid-leave{background:#f59e0b;color:#fff}.modal-overlay{position:fixed;inset:0;background:#0f172a80;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-card{background:#fff;width:420px;padding:24px;border-radius:14px}.modal-card h3{font-size:18px;margin-bottom:16px}.modal-info p{margin-bottom:10px;font-size:14px}.modal-actions{display:flex;justify-content:flex-end;margin-top:20px}.countdown-label{font-size:12px;font-weight:600;color:#f59e0b;background:#fffbeb;padding:4px 8px;border-radius:999px}.unlock-btn{background:#0ea5e9;color:#fff;padding:5px 12px;border-radius:6px;border:none;font-size:12px;cursor:pointer;margin-left:8px}.unlock-btn:hover{background:#0284c7}.att-btn.halfday{background:#0ea5e9}.att-btn.paidleave{background:#10b981}.att-btn.unpaidleave{background:#f59e0b}@media(max-width:768px){.attendance-actions{flex-direction:column;align-items:stretch}.att-btn{width:100%;text-align:center}.bulk-action-bar{flex-direction:column;align-items:stretch}.bulk-btn{width:100%}}.holiday-banner{background:linear-gradient(135deg,#1e3a8a,#3b82f6);color:#fff;padding:16px 24px;border-radius:12px;display:flex;align-items:center;gap:12px;font-weight:500;box-shadow:0 4px 12px #3b82f633;margin-bottom:24px}.holiday-banner-icon{font-size:24px}.attendance-summary-cards{display:flex;gap:16px;margin-bottom:24px;flex-wrap:wrap}.summary-card{flex:1;min-width:120px;background:#fff;padding:16px;border-radius:12px;border:1px solid #e2e8f0;display:flex;flex-direction:column;align-items:center;gap:8px;box-shadow:0 2px 4px #0f172a0a}.summary-card.present h3{color:#16a34a}.summary-card.holiday h3{color:#3b82f6}.summary-card.weekoff h3{color:#a855f7}.summary-card h3{font-size:24px;margin:0}.summary-card span{font-size:12px;color:#64748b;font-weight:500;text-transform:uppercase}.filters-bar{display:flex;gap:12px;margin-bottom:24px;background:#f8fafc;padding:16px;border-radius:14px;border:1px solid #e2e8f0;flex-wrap:wrap}.filters-bar input,.filters-bar select{padding:10px 14px;border-radius:8px;border:1px solid #cbd5e1;font-size:14px;background:#fff;flex:1;min-width:150px}.att-btn.holiday{background:#3b82f6}.att-btn.weekoff{background:#a855f7}.att-btn.present-holiday{background:#0d9488}.action-dropdown-container{position:relative;display:inline-block}.more-actions-btn{background:#64748b;color:#fff;font-size:14px;padding:6px 12px;line-height:1}.more-actions-btn.active{background:#f59e0b;opacity:1}.action-dropdown-menu{position:absolute;right:0;top:100%;margin-top:6px;background:#fff;border:1px solid #e2e8f0;border-radius:8px;box-shadow:0 10px 15px -3px #0000001a,0 4px 6px -2px #0000000d;z-index:999;min-width:140px;display:flex;flex-direction:column;overflow:hidden;animation:slideDown .15s ease-out}.action-dropdown-menu.open-upwards{top:auto;bottom:100%;margin-top:0;margin-bottom:6px;animation:slideUp .15s ease-out}@keyframes slideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@keyframes slideUp{0%{opacity:0;transform:translateY(8px)}to{opacity:1;transform:translateY(0)}}.dropdown-item{width:100%;padding:10px 16px;font-size:13px;text-align:left;border:none;background:transparent;color:#334155;cursor:pointer;transition:all .15s ease;font-weight:500}.dropdown-item:hover{background:#f1f5f9;color:#0f172a}.dropdown-item.active{background:#eff6ff;color:#2563eb}.attendance-pagination-container{display:flex;justify-content:space-between;align-items:center;margin-top:20px;background:#f8fafc;padding:12px 20px;border-radius:14px;border:1px solid #e2e8f0;animation:fadeIn .3s ease;flex-wrap:wrap;gap:12px}.items-per-page-select{padding:6px 12px;border-radius:6px;border:1px solid #cbd5e1;background:#fff;font-size:13px;color:#1e293b;font-weight:600;cursor:pointer;outline:none;transition:all .2s ease}.items-per-page-select:focus{border-color:#2563eb;box-shadow:0 0 0 2px #2563eb26}.page-btn{padding:6px 14px;border-radius:6px;border:1px solid #cbd5e1;background:#fff;color:#475569;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease}.page-btn:hover:not(:disabled){background:#f1f5f9;color:#1e293b;border-color:#94a3b8}.page-btn.active{background:#2563eb;color:#fff;border-color:#2563eb;font-weight:600}.page-btn:disabled{opacity:.5;cursor:not-allowed}.page-summary{font-size:13px;color:#64748b;font-weight:500}@media(max-width:1024px){.attendance-page{gap:18px!important}.page-header{padding:20px 22px!important}.page-title{font-size:18px!important}.attendance-summary-cards{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:14px!important;flex-wrap:unset!important}.summary-card{min-width:unset!important}.filters-bar{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:10px!important}.filters-bar input,.filters-bar select{min-width:unset!important;width:100%!important}.bulk-action-bar{display:grid!important;grid-template-columns:repeat(2,1fr)!important;gap:10px!important;align-items:center!important}.bulk-action-bar select{width:100%!important}.month-grid{grid-template-columns:repeat(4,1fr)!important;gap:8px!important}.table-wrapper,.attendance-table-wrapper{overflow-x:auto!important}.premium-table{min-width:820px!important}.attendance-table{min-width:720px!important}.attendance-pagination-container{padding:10px 16px!important}.modal-card{width:90vw!important;max-width:420px!important}}@media(max-width:768px){.attendance-page{gap:14px!important}.page-header{flex-direction:column!important;align-items:flex-start!important;gap:12px!important;padding:16px 18px!important;border-radius:14px!important}.page-title{font-size:17px!important}.page-subtitle{font-size:13px!important}.date-badge{align-self:flex-start!important;font-size:12px!important;padding:5px 12px!important}.bulk-action-bar{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:10px!important;padding:12px 14px!important}.bulk-action-bar select{width:100%!important;font-size:14px!important}.bulk-btn{width:100%!important;text-align:center!important;padding:10px 18px!important}.filters-bar{display:flex!important;flex-direction:column!important;gap:10px!important;padding:12px 14px!important}.filters-bar input,.filters-bar select{width:100%!important;min-width:unset!important;font-size:14px!important}.attendance-controls{flex-direction:column!important;align-items:stretch!important;gap:10px!important}.attendance-controls input,.attendance-controls select,.attendance-controls button{width:100%!important}.attendance-filter-bar{flex-direction:column!important;align-items:stretch!important;gap:10px!important;padding:12px 14px!important}.attendance-filter-bar input,.attendance-filter-bar select,.attendance-filter-bar button{width:100%!important}.table-wrapper,.attendance-table-wrapper{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;border-radius:12px!important}.premium-table{min-width:760px!important}.attendance-table{min-width:640px!important}.attendance-table th,.attendance-table td{padding:10px 12px!important;font-size:13px!important}.attendance-summary-cards{display:flex!important;flex-direction:column!important;gap:10px!important}.attendance-summary{flex-direction:column!important;align-items:stretch!important;gap:10px!important}.summary-card{flex-direction:row!important;justify-content:space-between!important;align-items:center!important;padding:14px 16px!important;min-width:unset!important;width:100%!important}.summary-card h3{font-size:20px!important}.month-grid{grid-template-columns:repeat(3,1fr)!important;gap:6px!important}.month-day{padding:8px!important;font-size:12px!important}.attendance-actions{flex-direction:row!important;flex-wrap:wrap!important;gap:6px!important}.att-btn{padding:5px 12px!important;font-size:12px!important}.holiday-banner{flex-direction:column!important;align-items:flex-start!important;gap:8px!important;padding:12px 16px!important}.holiday-banner-icon{font-size:20px!important}.attendance-pagination-container{flex-direction:column!important;align-items:stretch!important;gap:10px!important;padding:12px 14px!important}.pagination-left,.pagination-right{justify-content:center!important;flex-wrap:wrap!important;gap:8px!important}.page-btn{padding:6px 12px!important;font-size:12px!important}.page-summary{text-align:center!important;width:100%!important}.modal-card{width:92vw!important;max-width:100%!important;padding:20px 18px!important}.modal-card h3{font-size:16px!important}.modal-actions{flex-direction:column!important;gap:8px!important}.modal-actions button{width:100%!important}.action-dropdown-menu{right:auto!important;left:0!important;min-width:160px!important}}@media(max-width:480px){.attendance-page{gap:10px!important}.page-header{padding:14px!important;border-radius:12px!important;gap:10px!important}.page-title{font-size:15px!important}.page-subtitle{font-size:12px!important;margin-top:2px!important}.date-badge{font-size:11px!important;padding:4px 10px!important}.bulk-action-bar{padding:10px 12px!important;gap:8px!important;border-radius:10px!important}.bulk-btn{font-size:13px!important;padding:9px 14px!important}.filters-bar{padding:10px 12px!important;gap:8px!important;border-radius:10px!important}.filters-bar input,.filters-bar select{padding:8px 12px!important;font-size:13px!important}.attendance-filter-bar{padding:10px 12px!important;gap:8px!important}.attendance-table th,.attendance-table td{padding:8px 10px!important;font-size:12px!important}.premium-table{min-width:640px!important}.attendance-table{min-width:560px!important}.summary-card{padding:12px 14px!important;border-radius:10px!important}.summary-card h3{font-size:18px!important}.summary-card span{font-size:11px!important}.month-grid{grid-template-columns:repeat(2,1fr)!important;gap:5px!important}.month-day{padding:6px!important;font-size:11px!important;border-radius:6px!important}.attendance-actions{gap:5px!important}.att-btn{padding:5px 10px!important;font-size:11px!important;border-radius:6px!important}.holiday-banner{padding:10px 12px!important;border-radius:10px!important;margin-bottom:14px!important;font-size:13px!important}.attendance-pagination-container{padding:10px 12px!important;border-radius:10px!important;gap:8px!important}.pagination-left{font-size:12px!important;gap:6px!important}.pagination-right{gap:6px!important}.page-btn{padding:5px 10px!important;font-size:11px!important;border-radius:5px!important}.items-per-page-select{padding:5px 10px!important;font-size:12px!important}.page-summary{font-size:11px!important}.modal-card{width:96vw!important;padding:16px 14px!important;border-radius:10px!important}.modal-card h3{font-size:15px!important;margin-bottom:12px!important}.modal-info p{font-size:13px!important}.unlock-btn{font-size:11px!important;padding:4px 10px!important}.status-badge{font-size:11px!important;padding:3px 8px!important}.lock-label,.countdown-label{font-size:11px!important;padding:3px 7px!important}.action-dropdown-menu{min-width:140px!important}.dropdown-item{padding:8px 14px!important;font-size:12px!important}}.toast-container{position:fixed;top:20px;right:20px;z-index:9999;display:flex;flex-direction:column;gap:10px}.toast{display:flex;align-items:center;gap:12px;padding:14px 20px;border-radius:8px;box-shadow:0 4px 12px #00000026;min-width:300px;max-width:400px;animation:slideIn .3s ease-out;font-size:14px;font-weight:500}.toast-icon{font-size:18px;font-weight:700}.toast-message{flex:1}.toast-success{background:#22c55e;color:#fff}.toast-error{background:#ef4444;color:#fff}.toast-warning{background:#f59e0b;color:#fff}.toast-info{background:#3b82f6;color:#fff}@keyframes slideIn{0%{transform:translate(400px);opacity:0}to{transform:translate(0);opacity:1}}@media(max-width:768px){.toast-container{right:10px;left:10px}.toast{min-width:auto;max-width:100%}}.monthly-attendance-container{background:#f6f8fc;display:flex;flex-direction:column;gap:24px;animation:fadeIn .25s ease-in-out;min-height:auto}.monthly-header{background:linear-gradient(135deg,#14182e,#2563eb);color:#fff;padding:24px 28px;border-radius:18px;display:flex;align-items:center;justify-content:space-between;animation:fadeSlideIn .4s ease-out}.monthly-header h2{font-size:22px;font-weight:600;margin:0;color:#eeeff3}.header-controls{display:flex;align-items:center;gap:12px}.month-input,.search-input{padding:10px 16px;border-radius:8px;border:1px solid #e2e8f0;font-size:14px;outline:none;transition:border-color .2s}.month-input:focus,.search-input:focus{border-color:#2563eb}.search-input{min-width:280px}.more-menu-wrapper{position:relative}.btn-more{background:#2563eb;color:#fff;border:none;padding:10px 20px;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:background .2s}.btn-more:hover{background:#1d4ed8}.btn-more:disabled{background:#94a3b8;cursor:not-allowed}.more-dropdown{position:absolute;top:calc(100% + 8px);right:0;background:#fff;border-radius:8px;box-shadow:0 4px 12px #00000026;min-width:200px;z-index:100;overflow:hidden}.more-dropdown button{width:100%;padding:12px 16px;border:none;background:#fff;text-align:left;cursor:pointer;font-size:14px;transition:background .2s;border-bottom:1px solid #f1f5f9}.more-dropdown button:last-child{border-bottom:none}.more-dropdown button:hover{background:#f8fafc}.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px}.summary-card{background:#fff;border-radius:16px;padding:22px;box-shadow:0 10px 25px #0f172a14;transition:.2s ease}.summary-card:hover{transform:translateY(-3px)}.summary-card h3{font-size:26px;font-weight:700;margin:0}.summary-card span{font-size:13px;color:#64748b;display:block;margin-top:6px}.summary-card.present h3{color:#22c55e}.summary-card.leave h3{color:#f59e0b}.summary-card.absent h3{color:#ef4444}.charts-grid{display:grid;grid-template-columns:1fr 1fr;gap:24px;align-items:stretch}.charts-grid .card{background:#fff;border-radius:16px;padding:20px 24px;box-shadow:0 12px 35px #0f172a14;display:flex;flex-direction:column;height:320px;max-height:350px;overflow:hidden}.charts-grid .card h3{font-size:16px;font-weight:600;margin-bottom:12px;color:#0f172a}.charts-grid .card .recharts-responsive-container{flex:1}.charts-grid .card canvas,.charts-grid .card svg{max-height:100%!important}.modal-overlay{position:fixed;inset:0;background:#00000073;display:flex;justify-content:center;align-items:center;z-index:2000}.modal-card{background:#fff;padding:30px;border-radius:12px;width:400px;max-width:90%;box-shadow:0 10px 25px #00000026}.modal-card h3{margin-bottom:10px}.modal-card p{font-size:14px;color:#555;margin-bottom:20px}.modal-actions{display:flex;justify-content:flex-end;gap:10px}.calendar-container{background:#fff;border-radius:16px;padding:24px;box-shadow:0 12px 35px #0f172a14}.calendar-header{margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center}.calendar-header h3{font-size:18px;font-weight:600;color:#0f172a;margin:0}.calendar-header span{font-size:14px;color:#64748b}.calendar-weekdays{display:grid;grid-template-columns:repeat(7,1fr);gap:8px;margin-bottom:8px}.calendar-weekdays div{text-align:center;font-weight:600;font-size:14px;color:#64748b;padding:12px 0}.calendar-days{display:grid;grid-template-columns:repeat(7,1fr);gap:8px}.calendar-day{aspect-ratio:1;border:1px solid #e5e7eb;border-radius:8px;padding:8px;display:flex;flex-direction:column;align-items:center;justify-content:center;transition:all .2s ease;background:#fff}.calendar-day.empty{border:none;background:transparent}.calendar-day.today{border:2px solid #2563eb;box-shadow:0 0 0 3px #2563eb1a}.calendar-day .day-number{font-size:16px;font-weight:600;margin-bottom:4px}.calendar-day .day-status{font-size:11px;font-weight:500;text-align:center}.calendar-day.present{background:#dcfce7;border-color:#22c55e}.calendar-day.present .day-number,.calendar-day.present .day-status{color:#15803d}.calendar-day.absent{background:#fee2e2;border-color:#ef4444}.calendar-day.absent .day-number,.calendar-day.absent .day-status{color:#dc2626}.calendar-day.paid_leave,.calendar-day.unpaid_leave{background:#fef3c7;border-color:#f59e0b}.calendar-day.paid_leave .day-number,.calendar-day.unpaid_leave .day-number,.calendar-day.paid_leave .day-status,.calendar-day.unpaid_leave .day-status{color:#d97706}.calendar-day.half_day{background:#dbeafe;border-color:#3b82f6}.calendar-day.half_day .day-number,.calendar-day.half_day .day-status{color:#1d4ed8}.calendar-day.holiday,.calendar-day.week_off{background:#f3f4f6;border-color:#9ca3af}.calendar-day.holiday .day-number,.calendar-day.week_off .day-number,.calendar-day.holiday .day-status,.calendar-day.week_off .day-status{color:#6b7280}.calendar-placeholder{background:#fff;border-radius:16px;padding:80px 24px;box-shadow:0 12px 35px #0f172a14;text-align:center}.placeholder-content{max-width:400px;margin:0 auto}.placeholder-icon{font-size:64px;margin-bottom:16px}.placeholder-content h3{font-size:20px;font-weight:600;color:#0f172a;margin:0 0 8px}.placeholder-content p{font-size:14px;color:#64748b;margin:0}@media(max-width:1024px){.charts-grid{grid-template-columns:1fr}.charts-grid .card{height:300px}.summary-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.summary-grid{grid-template-columns:1fr}.monthly-header{flex-direction:column;align-items:flex-start;gap:12px}.header-controls{flex-wrap:wrap}.calendar-day .day-status{font-size:9px}.calendar-day .day-number{font-size:14px}}@keyframes fadeIn{0%{opacity:0;transform:translateY(4px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1024px){.monthly-attendance-page .filters-row{flex-wrap:wrap!important;gap:10px!important}}@media(max-width:768px){.monthly-calendar-wrapper{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}.monthly-calendar-grid{min-width:640px!important}.monthly-header{flex-direction:column!important;gap:12px!important;align-items:flex-start!important}.month-nav{width:100%!important;justify-content:space-between!important}.monthly-summary-cards{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}.attendance-detail-cell{font-size:10px!important}}@media(max-width:480px){.monthly-summary-cards{grid-template-columns:1fr!important}}.eam-overlay{position:fixed;inset:0;background:#020617cc;-webkit-backdrop-filter:blur(12px) saturate(150%);backdrop-filter:blur(12px) saturate(150%);display:flex;justify-content:center;align-items:center;z-index:2000;animation:fadeIn .3s cubic-bezier(.16,1,.3,1);font-family:Inter,sans-serif}.eam-container{background:#0f172ab3;-webkit-backdrop-filter:blur(20px);backdrop-filter:blur(20px);border:1px solid rgba(255,255,255,.08);border-radius:20px;width:95%;max-width:1400px;max-height:90vh;display:flex;flex-direction:column;box-shadow:0 30px 60px -10px #0009,0 0 40px #6366f126;overflow:hidden;color:#f8fafc;animation:slideUp .4s cubic-bezier(.16,1,.3,1)}.eam-header{padding:30px 40px 20px;border-bottom:1px solid rgba(255,255,255,.05);background:linear-gradient(to bottom,#1e293bcc,#0f172a00)}.eam-header-content{display:flex;justify-content:space-between;align-items:flex-start;margin-bottom:24px}.eam-header h2{margin:0;font-size:32px;font-weight:800;letter-spacing:-.5px;background:linear-gradient(135deg,#a5b4fc,#818cf8,#c084fc);-webkit-background-clip:text;-webkit-text-fill-color:transparent;display:flex;align-items:center;gap:12px}.eam-header p{margin:8px 0 0;font-size:15px;color:#94a3b8;font-weight:400}.eam-close-btn{background:#ffffff0d;border:1px solid rgba(255,255,255,.1);color:#94a3b8;width:40px;height:40px;border-radius:50%;cursor:pointer;font-size:20px;display:flex;align-items:center;justify-content:center;transition:all .3s ease}.eam-close-btn:hover{background:#ef444433;color:#fca5a5;border-color:#ef44444d;transform:rotate(90deg) scale(1.1)}.eam-filters{display:flex;gap:16px;align-items:flex-end;background:#0003;padding:16px 20px;border-radius:14px;border:1px solid rgba(255,255,255,.05);flex-wrap:wrap}.eam-filter-group{display:flex;flex-direction:column;gap:8px}.eam-filter-group label{font-size:12px;font-weight:600;color:#94a3b8;text-transform:uppercase;letter-spacing:.8px}.eam-month-input,.eam-search-input,.eam-select{padding:12px 16px;border:1px solid rgba(255,255,255,.08);border-radius:10px;font-size:14px;color:#f1f5f9;background:#1e293b80;outline:none;font-weight:500;transition:all .3s ease;font-family:Inter,sans-serif}.eam-month-input::-webkit-calendar-picker-indicator{filter:invert(1);opacity:.6;cursor:pointer}.eam-select option{background:#1e293b;color:#f1f5f9}.eam-month-input:hover,.eam-search-input:hover,.eam-select:hover{background:#1e293bcc;border-color:#ffffff26}.eam-month-input:focus,.eam-search-input:focus,.eam-select:focus{background:#0f172acc;border-color:#818cf8;box-shadow:0 0 0 3px #818cf833}.eam-filter-divider{width:1px;height:44px;background:#ffffff1a;margin:0 4px}.eam-export-btn{padding:12px 24px;background:linear-gradient(135deg,#6366f1,#8b5cf6);border:none;color:#fff;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.16,1,.3,1);box-shadow:0 4px 15px #6366f14d;display:flex;align-items:center;gap:8px}.eam-export-btn:hover{transform:translateY(-2px);box-shadow:0 8px 25px #6366f180;background:linear-gradient(135deg,#4f46e5,#7c3aed)}.eam-export-btn:active{transform:translateY(0)}.eam-count-badge{padding:12px 20px;background:#33415580;border:1px solid rgba(255,255,255,.05);border-radius:10px;font-weight:600;font-size:14px;color:#cbd5e1;margin-left:auto;display:flex;align-items:center;gap:8px}.eam-body{flex:1;overflow:auto;padding:0 20px}.eam-body::-webkit-scrollbar{width:8px;height:8px}.eam-body::-webkit-scrollbar-track{background:transparent}.eam-body::-webkit-scrollbar-thumb{background:#ffffff1a;border-radius:10px}.eam-body::-webkit-scrollbar-thumb:hover{background:#fff3}.eam-table-wrapper{padding:20px}.eam-table{width:100%;border-collapse:separate;border-spacing:0 8px}.eam-table thead{position:sticky;top:0;z-index:10}.eam-table th{padding:0 16px 12px;text-align:left;font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:1px;background:#0f172ae6;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px)}.eam-table tbody tr{background:#1e293b66;transition:all .3s cubic-bezier(.16,1,.3,1);border-radius:12px}.eam-table td{padding:16px;font-size:14px;color:#e2e8f0;vertical-align:middle}.eam-table td:first-child{border-top-left-radius:12px;border-bottom-left-radius:12px;border-left:2px solid transparent}.eam-table td:last-child{border-top-right-radius:12px;border-bottom-right-radius:12px}.eam-row.manual-edit td:first-child{border-left-color:#3b82f6}.eam-row.bulk-edit td:first-child{border-left-color:#8b5cf6}.eam-row:hover{background:#1e293bcc;transform:translateY(-2px) scale(1.002);box-shadow:0 10px 25px #0000004d}.eam-employee-name{font-weight:600;color:#f8fafc;display:flex;align-items:center;gap:12px}.eam-id{font-family:JetBrains Mono,Courier New,monospace;color:#94a3b8;font-size:13px;background:#0003;padding:4px 8px;border-radius:6px}.eam-date{font-weight:500;color:#cbd5e1}.eam-status-change{min-width:280px}.eam-status-flow{display:flex;align-items:center;gap:12px;background:#00000026;padding:6px 10px;border-radius:8px;width:fit-content}.status-badge{padding:6px 12px;border-radius:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px)}.eam-arrow{font-size:16px;color:#64748b;animation:pulse 2s infinite}.eam-editor-info{display:flex;align-items:center;gap:12px}.eam-avatar{width:34px;height:34px;border-radius:10px;background:linear-gradient(135deg,#4f46e5,#ec4899);display:flex;align-items:center;justify-content:center;font-weight:700;font-size:13px;color:#fff;flex-shrink:0;box-shadow:0 4px 10px #ec489933}.eam-editor-info span{font-weight:500;color:#e2e8f0}.eam-reason-text{color:#94a3b8;line-height:1.5;margin-bottom:6px;font-size:13px}.eam-view-btn{background:#6366f11a;color:#818cf8;border:1px solid rgba(99,102,241,.2);padding:4px 12px;border-radius:6px;font-size:12px;font-weight:600;cursor:pointer;transition:all .2s}.eam-view-btn:hover{background:#6366f133;color:#a5b4fc}.eam-time{font-size:13px;color:#64748b;white-space:nowrap}.eam-type-badge{padding:6px 12px;border-radius:6px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.5px;white-space:nowrap;border:1px solid transparent}.eam-type-badge.manual{background:#3b82f61a;color:#60a5fa;border-color:#3b82f633}.eam-type-badge.bulk{background:#a855f71a;color:#c084fc;border-color:#a855f733}.eam-expanded-row{background:#1e293b33!important;transform:none!important;box-shadow:none!important}.eam-expanded-row td{padding-top:0;border-radius:0 0 12px 12px!important}.eam-expanded-content{padding:20px;background:#0f172a80;border-radius:12px;border:1px solid rgba(255,255,255,.05);margin-top:-8px;position:relative;overflow:hidden}.eam-expanded-content:before{content:"";position:absolute;top:0;left:0;bottom:0;width:4px;background:linear-gradient(to bottom,#818cf8,#c084fc)}.eam-expanded-content strong{display:flex;align-items:center;gap:8px;margin-bottom:12px;color:#cbd5e1;font-size:12px;text-transform:uppercase;letter-spacing:1px}.eam-expanded-content p{margin:0;color:#94a3b8;line-height:1.7;font-size:14px}.eam-empty{display:flex;flex-direction:column;align-items:center;justify-content:center;padding:100px 20px;gap:20px;text-align:center}.eam-empty-icon{font-size:72px;background:linear-gradient(135deg,#4b5563,#1e293b);-webkit-background-clip:text;-webkit-text-fill-color:transparent;filter:drop-shadow(0 10px 20px rgba(0,0,0,.5));animation:float 6s ease-in-out infinite}.eam-empty-title{font-size:24px;font-weight:700;color:#f8fafc}.eam-empty-text{font-size:15px;color:#94a3b8;max-width:400px;line-height:1.6}.eam-footer{padding:20px 40px;border-top:1px solid rgba(255,255,255,.05);background:#0f172a99;display:flex;justify-content:space-between;align-items:center}.eam-pagination-info{font-size:14px;color:#94a3b8;font-weight:500}.eam-pagination{display:flex;gap:8px;align-items:center;background:#0003;padding:6px;border-radius:12px;border:1px solid rgba(255,255,255,.05)}.eam-page-btn{padding:8px 16px;background:transparent;border:none;border-radius:8px;font-size:14px;font-weight:600;color:#cbd5e1;cursor:pointer;transition:all .2s}.eam-page-btn:hover:not(:disabled):not(.active){background:#ffffff14;color:#fff}.eam-page-btn.active{background:linear-gradient(135deg,#6366f1,#8b5cf6);color:#fff;box-shadow:0 4px 10px #6366f14d}.eam-page-btn:disabled{opacity:.3;cursor:not-allowed}.eam-page-dots{padding:0 8px;color:#64748b;font-weight:700}@keyframes slideUp{0%{opacity:0;transform:translateY(30px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}@keyframes pulse{0%{opacity:.5}50%{opacity:1}to{opacity:.5}}@keyframes float{0%{transform:translateY(0)}50%{transform:translateY(-15px)}to{transform:translateY(0)}}@media(max-width:1200px){.eam-header{padding:24px}.eam-filters,.eam-table-wrapper{padding:16px}.eam-table th,.eam-table td{padding:12px}}@media(max-width:768px){.eam-container{width:100%;height:100vh;max-height:100vh;border-radius:0}.eam-filters{flex-direction:column;align-items:stretch}.eam-filter-divider{display:none}.eam-table-wrapper{overflow-x:auto}.eam-table{min-width:900px}.eam-footer{flex-direction:column;gap:16px;text-align:center}}.leaves-dashboard,.leaves-page{width:100%}.leaves-header{padding:24px 28px;border-radius:18px;margin-bottom:28px;display:flex;justify-content:space-between;align-items:center;animation:fadeSlideIn .35s ease-out}.leaves-header h2{font-size:22px;font-weight:600;color:#fff}.leaves-header p{font-size:14px;margin-top:4px;opacity:.9;color:#fff}.leaves-header.dashboard{background:linear-gradient(135deg,#020617,#2563eb)}.leaves-header.approvals{background:#16a34a}.leaves-header.rejected{background:#dc2626}.export-actions{display:flex;gap:10px}.leaves-summary-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:32px}.leave-card{background:#fff;border-radius:16px;padding:22px;box-shadow:0 10px 30px #0f172a0f}.leave-card h3{font-size:28px;font-weight:600}.leave-card span{font-size:14px;margin-top:6px;color:#64748b}.leave-card.approved h3{color:#16a34a}.leave-card.pending h3{color:#f59e0b}.leave-card.rejected h3{color:#dc2626}.leave-table-card{background:#fff;border-radius:16px;box-shadow:0 10px 30px #0f172a0f;overflow:hidden}.leave-table{width:100%;border-collapse:collapse}.leave-table thead{background:#f1f5f9}.leave-table th,.leave-table td{padding:16px 18px;border-bottom:1px solid #e5e7eb;font-size:14px}.leave-table th{font-weight:600;color:#0f172a}.leave-table tbody tr:hover{background:#f8fafc}.leave-status{padding:4px 12px;border-radius:999px;font-size:13px;font-weight:600}.leave-status.approved{background:#dcfce7;color:#166534}.leave-status.pending{background:#fef3c7;color:#92400e}.leave-status.rejected{background:#fee2e2;color:#991b1b}.leave-status{padding:4px 10px;border-radius:6px;font-size:13px;font-weight:600}.leave-status.pending{background:#fff4e5;color:#d97706}.leave-status.approved{background:#ecfdf5;color:#16a34a}.leave-status.rejected{background:#fef2f2;color:#dc2626}.leave-empty{padding:40px;text-align:center;color:#64748b}@keyframes fadeSlideIn{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@media(max-width:1024px){.leaves-summary-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:640px){.leaves-summary-grid{grid-template-columns:1fr}.leaves-header{flex-direction:column;align-items:flex-start;gap:8px}}.leave-dashboard{padding:20px}.dashboard-header h2{font-size:26px;margin-bottom:4px}.dashboard-header p{color:#777;margin-bottom:20px}.dashboard-cards{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:30px}.stat-card{background:#fff;padding:20px;border-radius:10px;box-shadow:0 2px 10px #00000014}.stat-card h3{font-size:14px;color:#666}.stat-card p{font-size:28px;font-weight:600;margin-top:10px}.approved{border-left:5px solid #2ecc71}.pending{border-left:5px solid #f39c12}.rejected{border-left:5px solid #e74c3c}.total{border-left:5px solid #3498db}.chart-card,.table-card{background:#fff;padding:20px;border-radius:10px;margin-bottom:30px;box-shadow:0 2px 10px #00000014}table{width:100%;border-collapse:collapse;margin-top:10px}th,td{padding:10px;border-bottom:1px solid #eee;text-align:left}.status{padding:4px 10px;border-radius:6px;font-size:12px}.status.approved{background:#dff5e4;color:#27ae60}.status.pending{background:#fff5d9;color:#f39c12}.status.rejected{background:#ffe3e3;color:#e74c3c}.calendar-header h2{font-size:26px;margin-bottom:5px}.calendar-header p{color:#777;margin-bottom:20px}.rbc-event{font-size:12px;font-weight:500}.calendar-event{display:flex;align-items:center;gap:6px;cursor:pointer}.calendar-event:hover{opacity:.85}.calendar-avatar{width:20px;height:20px;border-radius:50%;object-fit:cover}.calendar-name{font-size:12px;font-weight:500}.leave-calendar-page{padding:20px}.calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.calendar-header h2{font-size:24px}.leave-legend{display:flex;gap:15px;font-size:13px;align-items:center}.legend{width:12px;height:12px;border-radius:3px;display:inline-block;margin-right:5px}.legend.sick{background:#e74c3c}.legend.casual{background:#f39c12}.legend.earned{background:#2ecc71}.rbc-calendar{background:#fff;border-radius:12px;padding:10px;box-shadow:0 2px 10px #00000014}.legend.holiday{background:#9b59b6}.calendar-filters{margin-bottom:15px;display:flex;gap:10px;align-items:center}.calendar-filters select{padding:6px 10px;border-radius:6px;border:1px solid #ccc}.leave-calendar-page{padding:25px;background:#f6f8fb}.leave-calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.calendar-title h2{font-size:24px;margin-bottom:3px}.calendar-title p{font-size:13px;color:#6b7280}.calendar-legend{display:flex;gap:20px;font-size:12px;margin-bottom:12px}.dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px}.dot.sick{background:#e74c3c}.dot.casual{background:#f39c12}.dot.earned{background:#2ecc71}.dot.holiday{background:#9b59b6}.calendar-filters{margin-bottom:15px;display:flex;gap:20px}.filter-item{display:flex;flex-direction:column;font-size:12px}.filter-item select{padding:6px 10px;border-radius:6px;border:1px solid #ddd;background:#fff}.calendar-container{background:#fff;padding:18px;border-radius:12px;box-shadow:0 3px 12px #00000014}.calendar-event{display:flex;align-items:center;gap:6px}.calendar-avatar{width:18px;height:18px;border-radius:50%;object-fit:cover}.leave-modal-overlay{position:fixed;top:0;left:0;width:100%;height:100%;background:#0006;display:flex;align-items:center;justify-content:center;z-index:999}.leave-modal{background:#fff;padding:25px;border-radius:10px;width:350px;box-shadow:0 5px 20px #0003}.leave-modal h3{margin-bottom:15px}.leave-detail{margin-bottom:10px;font-size:14px}.modal-actions{margin-top:20px;text-align:right}.modal-close{padding:6px 14px;border:none;background:#2563eb;color:#fff;border-radius:6px;cursor:pointer}.department-legend{display:flex;gap:20px;font-size:13px;margin-bottom:10px}.dept-dot{width:10px;height:10px;border-radius:50%;display:inline-block;margin-right:6px}.dept-dot.hr{background:#2563eb}.dept-dot.it{background:#7c3aed}.dept-dot.finance{background:#f59e0b}.dept-dot.sales{background:#10b981}.calendar-day-cell{position:relative;height:100%;padding:3px;display:flex;flex-direction:column;justify-content:flex-start}.calendar-date{font-size:12px;margin-bottom:2px}.leave-avatar-group{display:flex;align-items:center;gap:2px}.stack-avatar{width:18px;height:18px;border-radius:50%;border:2px solid white;margin-left:-6px;object-fit:cover}.avatar-more{font-size:11px;margin-left:4px;color:#555}.leave-day-panel{position:fixed;right:0;top:0;width:360px;height:100%;background:#fff;box-shadow:-4px 0 10px #00000026;padding:20px;z-index:1000;overflow-y:auto;border-left:1px solid #e5e7eb}.day-panel-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:15px}.panel-close{border:none;background:none;font-size:18px;cursor:pointer}.dept-group{margin-bottom:20px}.dept-group h4{margin-bottom:8px;font-size:14px;color:#444}.employee-row{display:flex;align-items:center;gap:8px;margin-bottom:6px}.employee-avatar{width:24px;height:24px;border-radius:50%}.leave-type{margin-left:auto;font-size:12px;color:#777}.rbc-toolbar{margin-bottom:10px}.rbc-toolbar button{border-radius:6px;padding:4px 10px}.leave-tabs{display:flex;gap:8px;margin-bottom:24px;border-bottom:2px solid #e5e7eb;padding-bottom:0}.tab-btn{padding:12px 24px;border:none;background:transparent;font-size:14px;font-weight:500;color:#6b7280;cursor:pointer;border-bottom:3px solid transparent;transition:all .2s;margin-bottom:-2px}.tab-btn:hover{color:#2563eb;background:#f8fafc}.tab-btn.active{color:#2563eb;border-bottom-color:#2563eb;font-weight:600}.leave-calendar-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px;padding:20px;background:linear-gradient(135deg,#0f172a,#2563eb);border-radius:16px;color:#fff}.leave-calendar-header h2{font-size:24px;margin-bottom:4px;color:#fff}.leave-calendar-header p{font-size:14px;opacity:.9;color:#fff}.view-switcher{display:flex;gap:8px;background:#ffffff1a;padding:6px;border-radius:12px}.view-switcher button{padding:8px 16px;border:none;background:transparent;color:#fffc;font-size:14px;font-weight:500;border-radius:8px;cursor:pointer;transition:all .2s}.view-switcher button:hover{background:#ffffff26;color:#fff}.view-switcher button.active{background:#fff;color:#2563eb;font-weight:600;box-shadow:0 2px 8px #0000001a}.calendar-filters{display:flex;gap:16px;margin-bottom:20px;padding:16px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000000f}.filter-box{flex:1;display:flex;flex-direction:column;gap:6px}.filter-box label{font-size:13px;font-weight:600;color:#374151}.filter-box select{padding:8px 12px;border:1px solid #e5e7eb;border-radius:8px;font-size:14px;background:#fff;cursor:pointer;transition:all .2s}.filter-box select:hover{border-color:#2563eb}.filter-box select:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}.header-controls{display:flex;gap:12px;align-items:flex-end}.date-picker-box{display:flex;flex-direction:column;gap:4px}.date-picker-box label{font-size:12px;font-weight:500;color:#ffffffe6}.date-input{padding:8px 12px;border:1px solid rgba(255,255,255,.2);border-radius:8px;font-size:14px;background:#ffffff1a;color:#fff;cursor:pointer;transition:all .2s}.date-input:hover{background:#ffffff26;border-color:#ffffff4d}.date-input:focus{outline:none;background:#fff;color:#0f172a;border-color:#fff}.date-input::-webkit-calendar-picker-indicator{filter:invert(1);cursor:pointer}.date-input:focus::-webkit-calendar-picker-indicator{filter:invert(0)}.quick-nav{display:flex;align-items:flex-end}.today-btn{padding:8px 16px;border:1px solid rgba(255,255,255,.3);background:#ffffff1a;color:#fff;font-size:14px;font-weight:500;border-radius:8px;cursor:pointer;transition:all .2s}.today-btn:hover{background:#fff3;border-color:#fff6;transform:translateY(-1px)}.today-btn:active{transform:translateY(0)}@media(max-width:1024px){.header-controls{flex-wrap:wrap}.view-switcher{width:100%}}@media(max-width:1024px){.leaves-header{flex-direction:column!important;align-items:flex-start!important;gap:14px!important;padding:20px 22px!important}.export-actions{flex-wrap:wrap!important;gap:8px!important;width:100%!important}.export-actions button,.export-actions a{flex:1 1 auto!important;min-width:120px!important}.leaves-summary-grid,.dashboard-cards{grid-template-columns:repeat(2,1fr)!important;gap:16px!important}.leave-tabs{flex-wrap:wrap!important;gap:6px!important}.leave-calendar-header{flex-direction:column!important;align-items:flex-start!important;gap:14px!important;padding:16px!important}.calendar-filters{flex-wrap:wrap!important;gap:12px!important}.filter-box,.filter-item{flex:1 1 calc(50% - 12px)!important;min-width:140px!important}.header-controls{flex-wrap:wrap!important;gap:10px!important}.date-picker-box{flex:1 1 auto!important;min-width:140px!important}.department-legend,.leave-legend,.calendar-legend{flex-wrap:wrap!important;gap:10px!important}.leave-day-panel{width:300px!important}}@media(max-width:768px){.leaves-header{padding:16px!important;border-radius:12px!important;margin-bottom:18px!important;gap:12px!important}.leaves-header h2{font-size:18px!important}.leaves-header p{font-size:13px!important}.export-actions{flex-direction:column!important;width:100%!important}.export-actions button,.export-actions a{width:100%!important;text-align:center!important}.leaves-summary-grid,.dashboard-cards{grid-template-columns:1fr!important;gap:12px!important}.leave-card,.stat-card{padding:16px!important}.leave-card h3,.stat-card p{font-size:22px!important}.leave-tabs{overflow-x:auto!important;flex-wrap:nowrap!important;gap:0!important;-webkit-overflow-scrolling:touch!important;scrollbar-width:none!important;padding-bottom:2px!important}.leave-tabs::-webkit-scrollbar{display:none!important}.tab-btn{padding:10px 16px!important;font-size:13px!important;white-space:nowrap!important;flex-shrink:0!important}.leave-table-card{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}.leave-table,.table-card table,table{min-width:600px!important}.leave-table th,.leave-table td{padding:12px 14px!important;font-size:13px!important}.calendar-filters{flex-direction:column!important;gap:10px!important;padding:12px!important}.filter-box,.filter-item{flex:1 1 100%!important;width:100%!important}.filter-box select,.filter-item select,.calendar-filters select{width:100%!important;font-size:14px!important}.leave-calendar-header{padding:14px!important;border-radius:12px!important;margin-bottom:14px!important}.leave-calendar-header h2,.calendar-title h2{font-size:18px!important}.view-switcher{width:100%!important;flex-wrap:wrap!important;justify-content:stretch!important}.view-switcher button{flex:1!important;padding:8px 10px!important;font-size:13px!important;text-align:center!important}.header-controls{flex-direction:column!important;align-items:stretch!important;gap:10px!important;width:100%!important}.date-picker-box{width:100%!important}.date-input{width:100%!important;box-sizing:border-box!important}.quick-nav,.today-btn{width:100%!important}.leave-day-panel{width:100%!important;inset:auto 0 0!important;border-left:none!important;border-top:1px solid #e5e7eb!important;height:65vh!important;border-radius:16px 16px 0 0!important}.leave-modal-overlay{align-items:flex-end!important;padding:0!important}.leave-modal{width:100%!important;border-radius:16px 16px 0 0!important;padding:20px!important;max-height:80vh!important;overflow-y:auto!important}.leave-form,form.leave-form{display:flex!important;flex-direction:column!important;gap:12px!important}.leave-form input,.leave-form select,.leave-form textarea,.leave-form button{width:100%!important;box-sizing:border-box!important;font-size:14px!important}.approval-cards,.leave-approval-grid,.approvals-grid{grid-template-columns:1fr!important;flex-direction:column!important;gap:12px!important}.dashboard-header h2{font-size:20px!important}.department-legend,.leave-legend,.calendar-legend{flex-wrap:wrap!important;gap:8px!important;font-size:12px!important}.rbc-toolbar{flex-wrap:wrap!important;gap:8px!important}.rbc-toolbar button{font-size:12px!important;padding:4px 8px!important}.calendar-container{padding:10px!important;border-radius:8px!important}.chart-card,.table-card{padding:14px!important;overflow-x:auto!important}}@media(max-width:480px){.leaves-header{padding:12px 14px!important;border-radius:10px!important;margin-bottom:14px!important}.leaves-header h2{font-size:16px!important}.leaves-header p{font-size:12px!important}.leave-card,.stat-card{padding:14px!important;border-radius:10px!important}.leave-card h3{font-size:20px!important}.leave-card span,.stat-card h3{font-size:12px!important}.stat-card p{font-size:20px!important;margin-top:6px!important}.tab-btn{padding:8px 12px!important;font-size:12px!important}.leave-table th,.leave-table td,th,td{padding:10px!important;font-size:12px!important}.leave-table,.table-card table,table{min-width:520px!important}.leave-status,.status{font-size:11px!important;padding:3px 8px!important}.leave-modal{padding:16px!important;max-height:90vh!important}.leave-modal h3{font-size:16px!important;margin-bottom:12px!important}.modal-close{width:100%!important;padding:10px!important;font-size:14px!important}.leave-calendar-header{padding:12px!important}.calendar-title h2{font-size:16px!important}.calendar-title p{font-size:12px!important}.calendar-filters{padding:10px!important;gap:8px!important}.filter-box select,.filter-item select,.calendar-filters select{padding:8px!important;font-size:13px!important}.view-switcher button{padding:6px 8px!important;font-size:12px!important}.today-btn{padding:8px 12px!important;font-size:13px!important}.date-input{padding:8px 10px!important;font-size:13px!important}.department-legend,.leave-legend,.calendar-legend{font-size:11px!important;gap:6px!important}.leave-day-panel{padding:14px!important;height:70vh!important}.day-panel-header h3{font-size:15px!important}.dashboard-header h2{font-size:18px!important}.dashboard-header p{font-size:12px!important}.leave-dashboard,.leave-calendar-page{padding:12px!important}.rbc-toolbar{justify-content:center!important}.rbc-toolbar button{font-size:11px!important;padding:3px 7px!important}.chart-card,.table-card{padding:10px!important}.leave-form input,.leave-form select,.leave-form textarea{padding:10px!important;font-size:13px!important;border-radius:6px!important}.leave-form button{padding:12px!important;font-size:14px!important;font-weight:600!important}.leave-empty{padding:24px 16px!important;font-size:13px!important}}.leave-settings-page{padding:2rem;max-width:1400px;margin:0 auto}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:2rem}.page-header h2{font-size:1.8rem;color:#1a1a1a}.leave-types-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(350px,1fr));gap:1.5rem}.leave-type-card{background:#fff;border-radius:12px;padding:1.5rem;box-shadow:0 2px 8px #0000001a;transition:transform .2s,box-shadow .2s}.leave-type-card:hover{transform:translateY(-4px);box-shadow:0 4px 16px #00000026}.leave-type-card.inactive{opacity:.6;border:2px dashed #ccc}.card-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem;padding-bottom:1rem;border-bottom:2px solid #f0f0f0}.card-header h3{font-size:1.3rem;color:#2563eb;margin:0}.badge{padding:.25rem .75rem;border-radius:20px;font-size:.75rem;font-weight:600;text-transform:uppercase}.badge.inactive{background:#f3f4f6;color:#6b7280}.badge.unpaid{background:#fee2e2;color:#dc2626}.card-body{margin-bottom:1rem}.info-row{display:flex;justify-content:space-between;padding:.5rem 0;border-bottom:1px solid #f0f0f0}.info-row .label{font-weight:500;color:#6b7280;font-size:.9rem}.info-row .value{font-weight:600;color:#1a1a1a;font-size:.9rem}.card-actions{display:flex;gap:.5rem;margin-top:1rem}.card-actions .btn{flex:1;padding:.5rem;font-size:.9rem}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000}.modal-content{background:#fff;border-radius:12px;width:90%;max-width:600px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:1.5rem;border-bottom:1px solid #e5e7eb}.modal-header h3{margin:0;font-size:1.5rem;color:#1a1a1a}.close-btn{background:none;border:none;font-size:2rem;color:#6b7280;cursor:pointer;line-height:1;padding:0;width:32px;height:32px}.close-btn:hover{color:#1a1a1a}.modal-content form{padding:1.5rem}.form-group{margin-bottom:1.5rem}.form-group label{display:block;margin-bottom:.5rem;font-weight:600;color:#374151}.form-group input[type=text],.form-group input[type=number],.form-group select{width:100%;padding:.75rem;border:1px solid #d1d5db;border-radius:8px;font-size:1rem}.form-group.checkbox{display:flex;align-items:flex-start;gap:.5rem}.form-group.checkbox label{display:flex;align-items:center;gap:.5rem;margin:0;cursor:pointer}.form-group.checkbox input[type=checkbox]{width:18px;height:18px;cursor:pointer}.form-group small{display:block;margin-top:.5rem;color:#6b7280;font-size:.875rem}.form-group small.warning{color:#dc2626;font-weight:500}.modal-actions{display:flex;gap:1rem;padding-top:1rem;border-top:1px solid #e5e7eb}.modal-actions .btn{flex:1;padding:.75rem}.btn{padding:.75rem 1.5rem;border:none;border-radius:8px;font-weight:600;cursor:pointer;transition:all .2s}.btn.primary{background:#2563eb;color:#fff}.btn.secondary{background:#f3f4f6;color:#374151}.btn.secondary:hover{background:#e5e7eb}.btn.danger{background:#fee2e2;color:#dc2626}.btn.danger:hover{background:#fecaca}.loading{text-align:center;padding:3rem;color:#6b7280;font-size:1.1rem}.settings-tabs{display:flex;overflow-x:auto;border-bottom:2px solid #e5e7eb;margin-bottom:1.5rem;padding:0 1.5rem}.tab-btn{background:none;border:none;padding:.75rem 1rem;font-weight:600;color:#6b7280;cursor:pointer;border-bottom:2px solid transparent;margin-bottom:-2px;white-space:nowrap}.tab-btn:hover{color:#374151}.tab-btn.active{color:#2563eb;border-bottom-color:#2563eb}.tab-content{padding:0 1.5rem;min-height:250px}.fade-in{animation:fadeIn .3s ease-in-out}@keyframes fadeIn{0%{opacity:0;transform:translateY(5px)}to{opacity:1;transform:translateY(0)}}.code-badge{display:inline-block;background:#f3f4f6;color:#374151;padding:.2rem .5rem;border-radius:4px;font-size:.8rem;font-weight:700;margin-top:.25rem}.badge.system{background:#dbeafe;color:#1e40af}.status-badges{display:flex;flex-direction:column;gap:.5rem;align-items:flex-end}.email-dashboard{padding:24px;background:#f8fafc;min-height:100vh}.loading-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;gap:16px}.loading-state p{color:#64748b;font-size:14px}.dashboard-header{display:flex;justify-content:space-between;align-items:center;padding:28px 32px;background:linear-gradient(135deg,#0f172a,#1e40af);border-radius:16px;margin-bottom:24px;box-shadow:0 10px 40px #0f172a26}.header-actions{display:flex;gap:20px;align-items:center}.live-indicator{display:flex;align-items:center;gap:8px;padding:8px 16px;background:#ffffff26;border-radius:20px;font-size:13px;font-weight:600;color:#fff}.pulse-dot{width:8px;height:8px;background:#22c55e;border-radius:50%;animation:pulse 2s infinite}@keyframes pulse{0%,to{opacity:1;transform:scale(1)}50%{opacity:.5;transform:scale(1.2)}}.last-updated{font-size:12px;color:#ffffffb3;font-weight:500}.stats-grid{display:grid;grid-template-columns:repeat(5,1fr);gap:20px;margin-bottom:24px}.stat-card{display:flex;align-items:center;gap:16px;padding:24px;background:#fff;border-radius:16px;box-shadow:0 2px 8px #0000000a;transition:all .3s;border-left:4px solid transparent}.stat-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0000001a}.stat-card.total{border-left-color:#3b82f6}.stat-card.success{border-left-color:#16a34a}.stat-card.failed{border-left-color:#ef4444}.stat-card.pending{border-left-color:#f59e0b}.stat-card.rate{border-left-color:#8b5cf6}.stat-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:12px;font-size:28px}.stat-card.total .stat-icon{background:#dbeafe}.stat-card.success .stat-icon{background:#dcfce7}.stat-card.failed .stat-icon{background:#fee2e2}.stat-card.pending .stat-icon{background:#fef3c7}.stat-card.rate .stat-icon{background:#ede9fe}.stat-content{display:flex;flex-direction:column;gap:4px}.stat-label{font-size:13px;color:#64748b;font-weight:500;text-transform:uppercase;letter-spacing:.5px}.stat-value{font-size:32px;font-weight:700;color:#0f172a}.charts-row{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}.chart-header h3{font-size:18px;font-weight:700;color:#0f172a}.chart-body{min-height:300px;display:flex;align-items:center;justify-content:center}.empty-chart{text-align:center;color:#94a3b8;font-size:14px}.info-section{display:grid;grid-template-columns:1fr 1fr;gap:24px}.info-card ul{list-style:none;padding:0;margin:0}.info-card li{padding:10px 0;color:#475569;font-size:14px;line-height:1.6;border-bottom:1px solid #f1f5f9}.info-card li:last-child{border-bottom:none}.info-card li:before{content:"•";color:#2563eb;font-weight:700;display:inline-block;width:1em;margin-right:8px}.info-card strong{color:#0f172a;font-weight:600}@media(max-width:1400px){.stats-grid{grid-template-columns:repeat(3,1fr)}}@media(max-width:1024px){.stats-grid{grid-template-columns:repeat(2,1fr)}.charts-row,.info-section{grid-template-columns:1fr}}@media(max-width:768px){.dashboard-header{flex-direction:column;align-items:flex-start;gap:16px}.header-actions{width:100%;justify-content:space-between}.stats-grid{grid-template-columns:1fr}.stat-card{padding:20px}.stat-value{font-size:28px}}@media(max-width:768px){.email-dashboard-page{padding:14px!important}.email-header{flex-direction:column!important;gap:12px!important;align-items:flex-start!important}.email-stats{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}.email-filters{flex-direction:column!important;gap:10px!important}.email-filters select,.email-filters input{width:100%!important}.email-list-wrapper{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}.email-table{min-width:600px!important}.email-compose-btn{width:100%!important}}@media(max-width:480px){.email-stats{grid-template-columns:1fr!important}}.dashboard-page{width:100%}.dashboard-hero{position:relative;overflow:hidden;padding:40px;border-radius:22px;margin-bottom:28px;color:#fff;background:linear-gradient(-45deg,#0f172a,#1e3a8a,#2563eb,#0f172a);background-size:400% 400%;animation:gradientMove 12s ease infinite}.dashboard-hero:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:radial-gradient(circle at 30% 30%,rgba(255,255,255,.15),transparent 40%);animation:glowMove 8s linear infinite}@keyframes glowMove{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.dashboard-hero>div{position:relative;z-index:2}.dashboard-hero h2{font-size:26px;font-weight:700;letter-spacing:.5px;background:linear-gradient(90deg,#fff,#93c5fd,#fff);background-size:200% auto;-webkit-background-clip:text;-webkit-text-fill-color:transparent;animation:textShine 6s linear infinite}@keyframes textShine{0%{background-position:0% center}to{background-position:200% center}}.dashboard-hero p{margin-top:6px;font-size:14px;color:#e2e8f0}.dashboard-hero:after{content:"";position:absolute;bottom:-40px;right:-40px;width:200px;height:200px;background:#ffffff14;border-radius:50%;filter:blur(60px)}.dashboard-hero{backdrop-filter:blur(10px);-webkit-backdrop-filter:blur(10px)}.dashboard-hero>div{background:#ffffff14;padding:28px 32px;border-radius:18px;backdrop-filter:blur(18px);-webkit-backdrop-filter:blur(18px);border:1px solid rgba(255,255,255,.15);box-shadow:0 8px 32px #00000040,inset 0 1px #ffffff1a}.dashboard-hero>div:before{content:"";position:absolute;top:-50%;left:-50%;width:200%;height:200%;background:linear-gradient(120deg,transparent,rgba(255,255,255,.15),transparent);transform:rotate(25deg);animation:glassShine 6s infinite}@keyframes glassShine{0%{transform:translate(-100%) rotate(25deg)}to{transform:translate(100%) rotate(25deg)}}.dashboard-hero>div{position:relative;overflow:hidden;box-shadow:0 0 20px #3b82f64d,0 8px 32px #00000040}.dashboard-hero>div:after{content:"";position:absolute;inset:0;border-radius:18px;padding:1px;background:linear-gradient(120deg,#2563ebcc,#3b82f6cc,#6366f1cc,#2563ebcc);background-size:300% 300%;animation:borderGlow 6s linear infinite;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude;pointer-events:none}@keyframes borderGlow{0%{background-position:0% 50%}to{background-position:300% 50%}}.hero-content{display:flex;justify-content:space-between;align-items:center;position:relative;z-index:2}.hero-right{display:flex;align-items:center;gap:20px;position:relative}.hero-clock{text-align:right;font-family:Segoe UI,sans-serif}.clock-time{font-size:28px;font-weight:700;letter-spacing:1px;color:#fff}.clock-date{font-size:13px;margin-top:4px;color:#e2e8f0}.notification-wrapper{position:relative}.notification-bell{font-size:20px;cursor:pointer;position:relative;transition:transform .2s ease}.notification-bell:hover{transform:scale(1.1)}.notification-badge{position:absolute;top:-6px;right:-8px;background:#ef4444;color:#fff;font-size:10px;padding:3px 6px;border-radius:50%;font-weight:600}.notification-dropdown{position:absolute;right:0;top:35px;width:260px;background:#0f172af2;border-radius:14px;padding:12px;-webkit-backdrop-filter:blur(15px);backdrop-filter:blur(15px);box-shadow:0 10px 30px #00000040;animation:fadeSlideDown .25s ease;z-index:50}.notification-item{padding:10px;font-size:13px;border-radius:8px;transition:background .2s ease;cursor:pointer}.notification-item:hover{background:#ffffff14}.notification-empty{padding:10px;text-align:center;color:#94a3b8}@keyframes fadeSlideDown{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}.dashboard-kpis{display:grid;grid-template-columns:repeat(4,1fr);gap:20px;margin-bottom:32px}.kpi-card{border-radius:16px;padding:22px 24px;color:#fff;min-height:120px;display:flex;flex-direction:column;justify-content:center;box-shadow:0 10px 30px #0f172a0f;transition:all .3s ease}.kpi-card:hover{transform:translateY(-4px);box-shadow:0 15px 40px #0f172a26}.kpi-card h3{font-size:28px;font-weight:600}.kpi-card span{font-size:14px;opacity:.9;margin-top:4px}.kpi-card.blue{background:linear-gradient(135deg,#1d4ed8,#2563eb)}.kpi-card.green{background:linear-gradient(135deg,#15803d,#16a34a)}.kpi-card.orange{background:linear-gradient(135deg,#ea580c,#f97316)}.kpi-card.purple{background:linear-gradient(135deg,#6d28d9,#7c3aed)}.dashboard-grid{display:grid;grid-template-columns:1fr;gap:24px}.dashboard-card{background:#fff;border-radius:16px;padding:20px 22px;box-shadow:0 10px 30px #0f172a0f}.dashboard-card h3{font-size:18px;font-weight:600;margin-bottom:16px;color:#0f172a}.leave-stats{display:grid;grid-template-columns:repeat(4,1fr);gap:14px}.leave-stats div{background:#f8fafc;padding:12px;border-radius:10px;text-align:center}.leave-stats strong{display:block;font-size:18px}.leave-stats span{font-size:12px;color:#64748b}@keyframes fadeSlideUp{0%{opacity:0;transform:translateY(25px)}to{opacity:1;transform:translateY(0)}}.kpi-card,.dashboard-card{opacity:0;animation:fadeSlideUp .6s ease forwards}.kpi-card:nth-child(1){animation-delay:.1s}.kpi-card:nth-child(2){animation-delay:.2s}.kpi-card:nth-child(3){animation-delay:.3s}.kpi-card:nth-child(4){animation-delay:.4s}.dashboard-card:nth-child(1){animation-delay:.5s}@media(max-width:1024px){.dashboard-kpis,.leave-stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.dashboard-hero{padding:24px}.hero-content{flex-direction:column;gap:16px;align-items:flex-start}.hero-right{width:100%;justify-content:space-between}.dashboard-kpis{grid-template-columns:1fr;gap:16px}.leave-stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:480px){.dashboard-hero h2{font-size:20px}.clock-time{font-size:22px}.kpi-card h3{font-size:24px}.notification-dropdown{width:220px}.leave-stats{grid-template-columns:1fr}}.attendance-actions-card{display:flex;flex-direction:column;align-items:center;text-align:center;background:#fff;border-radius:16px;padding:24px;box-shadow:0 10px 30px #0f172a0f}.attendance-status-display{width:100%;margin-bottom:20px}.attendance-status-label{font-size:13px;color:#64748b;font-weight:500;text-transform:uppercase;letter-spacing:.5px;margin-bottom:6px;display:block}.status-badge-lg{display:inline-block;padding:8px 18px;border-radius:9999px;font-size:14px;font-weight:600;letter-spacing:.25px}.status-badge-lg.not-checked-in{background:#f1f5f9;color:#64748b;border:1px solid #cbd5e1}.status-badge-lg.checked-in{background:#e0f2fe;color:#0369a1;border:1px solid #bae6fd;box-shadow:0 0 12px #bae6fd80}.status-badge-lg.checked-out{background:#dcfce7;color:#15803d;border:1px solid #bbf7d0}.status-badge-lg.holiday{background:#fef3c7;color:#d97706;border:1px solid #fde68a}.status-badge-lg.week-off{background:#f3e8ff;color:#7e22ce;border:1px solid #e9d5ff}.status-badge-lg.leave{background:#fee2e2;color:#b91c1c;border:1px solid #fecaca}.timer-display{width:100%;margin:15px 0 25px}.live-timer-box{background:linear-gradient(135deg,#0f172a,#1e293b);border-radius:12px;padding:18px 24px;display:inline-block;min-width:180px;box-shadow:0 10px 25px -5px #0f172a4d,0 0 15px #3b82f626;border:1px solid rgba(255,255,255,.05)}.elapsed-time{font-family:Courier New,Courier,monospace;font-size:32px;font-weight:700;color:#38bdf8;letter-spacing:1px;text-shadow:0 0 10px rgba(56,189,248,.5)}.timer-label{font-size:11px;color:#94a3b8;text-transform:uppercase;letter-spacing:1px;margin-top:4px;display:block}.attendance-times-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px;width:100%;margin-top:15px;background:#f8fafc;padding:12px;border-radius:10px}.attendance-time-item{display:flex;flex-direction:column;align-items:center}.time-val{font-size:15px;font-weight:600;color:#0f172a}.time-lbl{font-size:11px;color:#64748b;margin-top:2px}.action-btn-container{width:100%;margin-top:15px}.checkin-btn{width:100%;padding:14px 24px;font-size:15px;font-weight:600;border-radius:12px;border:none;background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;box-shadow:0 4px 14px #2563eb4d;transition:all .25s ease;display:flex;align-items:center;justify-content:center;gap:8px}.checkin-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #2563eb66;background:linear-gradient(135deg,#3b82f6,#2563eb)}.checkout-btn{width:100%;padding:14px 24px;font-size:15px;font-weight:600;border-radius:12px;border:none;background:linear-gradient(135deg,#ef4444,#dc2626);color:#fff;box-shadow:0 4px 14px #ef44444d;transition:all .25s ease;display:flex;align-items:center;justify-content:center;gap:8px}.checkout-btn:hover:not(:disabled){transform:translateY(-2px);box-shadow:0 6px 20px #ef444466;background:linear-gradient(135deg,#f87171,#ef4444)}.attendance-day-alert{width:100%;background:#fffbeb;border:1px solid #fde68a;border-radius:12px;padding:16px;color:#78350f;font-size:14px;display:flex;align-items:center;gap:10px}.leave-balances-card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 10px 30px #0f172a0f}.leave-balances-list{display:flex;flex-direction:column;gap:16px;margin-top:15px}.leave-balance-item{width:100%}.leave-balance-info{display:flex;justify-content:space-between;align-items:center;margin-bottom:6px}.leave-type-name{font-size:14px;font-weight:600;color:#334155}.leave-type-ratio{font-size:13px;color:#64748b;font-weight:500}.leave-progress-bar-bg{width:100%;height:8px;background:#e2e8f0;border-radius:9999px;overflow:hidden}.leave-progress-bar-fill{height:100%;border-radius:9999px;transition:width .5s ease-out}.leave-progress-bar-fill.blue{background:#3b82f6}.leave-progress-bar-fill.green{background:#10b981}.leave-progress-bar-fill.purple{background:#8b5cf6}.leave-progress-bar-fill.orange{background:#f59e0b}.leave-progress-bar-fill.rose{background:#f43f5e}.leave-balance-empty{text-align:center;padding:30px;color:#94a3b8;font-size:14px}.employee-attendance-page{padding:10px 0 40px}.employee-attendance-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:30px;gap:20px;flex-wrap:wrap}.employee-attendance-header h2{font-size:24px;font-weight:700;color:#0f172a}.employee-attendance-header p{font-size:14px;color:#64748b;margin-top:4px}.month-picker{padding:8px 12px;border-radius:8px;border:1px solid #e2e8f0;font-size:14px;background:#fff;cursor:pointer}.export-btn{background:linear-gradient(135deg,#2563eb,#3b82f6);color:#fff;padding:8px 16px;border-radius:10px;border:none;font-weight:500;cursor:pointer;transition:all .3s ease}.export-btn:hover{transform:translateY(-2px);box-shadow:0 10px 25px #2563eb4d}.attendance-top-grid{display:grid;grid-template-columns:1.2fr 2fr;gap:24px;margin-bottom:30px}.attendance-ring-card{background:#fff;border-radius:20px;padding:24px;box-shadow:0 15px 35px #0f172a14;text-align:center;position:relative;overflow:hidden}.attendance-ring-card h3{font-size:16px;font-weight:600;margin-bottom:14px;color:#0f172a}.attendance-ring{position:relative;display:inline-block;margin:10px 0}.ring-text{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%);text-align:center}.ring-text h3{font-size:28px;font-weight:700;margin:0;color:#0f172a}.ring-text span{font-size:12px;color:#64748b;display:block;margin-top:2px}.performance-label{margin-top:12px;font-size:13px;font-weight:500}.gradient-border{position:relative}.gradient-border:before{content:"";position:absolute;inset:0;border-radius:20px;padding:2px;background:linear-gradient(120deg,#2563eb,#16a34a,#f97316,#ef4444);background-size:300% 300%;animation:borderMove 6s linear infinite;-webkit-mask:linear-gradient(#fff 0 0) content-box,linear-gradient(#fff 0 0);-webkit-mask-composite:xor;mask-composite:exclude}@keyframes borderMove{0%{background-position:0% 50%}to{background-position:300% 50%}}.attendance-ring-card.excellent{box-shadow:0 15px 40px #16a34a26}.attendance-ring-card.warning{box-shadow:0 15px 40px #f9731626}.attendance-ring-card.critical{box-shadow:0 15px 40px #ef444426}.attendance-summary{display:grid;grid-template-columns:repeat(3,1fr);gap:18px}.summary-card{background:#fff;border-radius:16px;padding:18px;text-align:center;box-shadow:0 10px 25px #0f172a0d;transition:all .3s ease;opacity:0;transform:translateY(20px);animation:fadeUp .6s ease forwards}.summary-card:nth-child(1){animation-delay:.05s}.summary-card:nth-child(2){animation-delay:.15s}.summary-card:nth-child(3){animation-delay:.25s}.summary-card:nth-child(4){animation-delay:.35s}.summary-card:nth-child(5){animation-delay:.45s}.summary-card:hover{transform:translateY(-4px);box-shadow:0 15px 35px #0f172a1a}.summary-card h3{font-size:28px;font-weight:700;margin-bottom:6px;color:#0f172a}.summary-card span{font-size:13px;font-weight:500;color:#64748b}.summary-card.present{border-top:4px solid #16a34a}.summary-card.halfday{border-top:4px solid #facc15}.summary-card.leave{border-top:4px solid #3b82f6}.summary-card.unpaid{border-top:4px solid #ea580c}.summary-card.absent{border-top:4px solid #ef4444}.attendance-status-card{background:linear-gradient(135deg,#fff,#f8fafc);padding:24px;border-radius:18px;box-shadow:0 15px 35px #0f172a0f;border:1px solid #e2e8f0}.attendance-status-card h3{font-size:16px;font-weight:600;margin-bottom:16px;color:#0f172a}.status-display{display:flex;align-items:center;justify-content:space-between;gap:16px}.status-pill{display:inline-flex;align-items:center;gap:8px;padding:10px 18px;border-radius:12px;font-size:14px;font-weight:600;text-transform:capitalize;box-shadow:0 4px 12px #00000014;transition:all .3s ease}.status-pill:hover{transform:translateY(-2px);box-shadow:0 6px 16px #0000001f}.status-icon{font-size:16px;display:flex;align-items:center}.status-text{font-weight:600}.status-time{font-size:18px;font-weight:600;color:#475569;padding:8px 16px;background:#f1f5f9;border-radius:10px}.status-pill.present{background:linear-gradient(135deg,#dcfce7,#bbf7d0);color:#15803d;border:2px solid #86efac}.status-pill.half-day{background:linear-gradient(135deg,#fef3c7,#fde68a);color:#a16207;border:2px solid #fcd34d}.status-pill.absent{background:linear-gradient(135deg,#fee2e2,#fecaca);color:#b91c1c;border:2px solid #fca5a5}.status-pill.paid_leave,.status-pill.paid-leave{background:linear-gradient(135deg,#dbeafe,#bfdbfe);color:#1d4ed8;border:2px solid #93c5fd}.status-pill.unpaid_leave,.status-pill.unpaid-leave{background:linear-gradient(135deg,#ffedd5,#fed7aa);color:#c2410c;border:2px solid #fdba74}.status-pill.not-marked{background:linear-gradient(135deg,#f1f5f9,#e2e8f0);color:#475569;border:2px solid #cbd5e1}.loading-text,.error-text{padding:20px;font-size:14px;color:#64748b}@media(max-width:1000px){.attendance-top-grid{grid-template-columns:1fr}.attendance-summary{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.attendance-summary{grid-template-columns:1fr}}.employee-page{padding:20px 0 10px}.page-header{background:linear-gradient(135deg,#0f172a,#2563eb);padding:24px 30px;border-radius:18px;color:#fff;margin-bottom:28px;box-shadow:0 18px 40px #2563eb40}.page-header h2{font-size:22px;font-weight:700;margin-bottom:4px}.page-header p{font-size:14px;opacity:.9}.apply-leave-layout{display:grid;grid-template-columns:2fr 1fr;gap:28px;align-items:flex-start}.form-card{background:#fff;padding:28px;border-radius:20px;box-shadow:0 10px 40px #00000014,inset 0 1px #fff9;animation:fadeUp .5s ease}.form-group{display:flex;flex-direction:column;margin-bottom:20px}.form-group label{font-size:14px;font-weight:600;margin-bottom:6px;color:#0f172a}.form-group input,.form-group select,.form-group textarea{padding:11px 13px;border-radius:12px;border:1px solid #e2e8f0;font-size:14px;background:#fff;transition:all .25s ease}.form-group input:hover,.form-group select:hover,.form-group textarea:hover{border-color:#3b82f6}.form-group input:focus,.form-group select:focus,.form-group textarea:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb26}.form-group textarea{resize:none;min-height:100px}.form-row{display:grid;grid-template-columns:1fr 1fr;gap:18px}.leave-info-box{margin:15px 0;padding:16px;border-radius:14px;background:linear-gradient(135deg,#f0fdf4,#dcfce7);border:1px solid #86efac;animation:slideFade .4s ease}.leave-info-box h4{font-size:14px;margin-bottom:8px;color:#166534}.info-grid{display:grid;grid-template-columns:1fr 1fr;gap:10px;font-size:13px;color:#15803d}.leave-days-info{margin-top:12px;padding:10px 14px;background:linear-gradient(135deg,#dbeafe,#eff6ff);border-radius:12px;font-size:14px;font-weight:600;color:#1d4ed8;box-shadow:0 8px 18px #3b82f626}.form-actions{margin-top:20px;display:flex;justify-content:flex-end}.btn.primary{background:linear-gradient(135deg,#2563eb,#3b82f6);color:#fff;padding:11px 24px;border-radius:14px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .25s ease}.btn.primary:hover{transform:translateY(-2px);box-shadow:0 12px 28px #2563eb59}.btn.primary:active{transform:scale(.97)}.btn.primary:disabled{opacity:.6;cursor:not-allowed;transform:none;box-shadow:none}.leave-sidebar{display:flex;flex-direction:column;gap:22px}.balance-card{background:#fff;padding:20px;border-radius:18px;box-shadow:0 10px 30px #00000014}.balance-card h3{font-size:16px;font-weight:600;margin-bottom:14px;color:#0f172a}.balance-item{display:flex;justify-content:space-between;align-items:center;padding:8px 0;font-size:14px}.balance-value{font-weight:600;color:#2563eb}.policy-card{background:#f8fafc;border-radius:16px;padding:18px;border:1px solid #e2e8f0}.policy-card h4{font-size:14px;font-weight:600;margin-bottom:8px}.policy-card ul{padding-left:18px;font-size:13px;color:#64748b}.policy-card li{margin-bottom:6px}@keyframes fadeUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@keyframes slideFade{0%{opacity:0;transform:translateY(-8px)}to{opacity:1;transform:translateY(0)}}@media(max-width:900px){.apply-leave-layout,.form-row{grid-template-columns:1fr}.form-card{padding:22px}}@media(max-width:768px){.apply-leave-page{padding:14px!important}.apply-leave-card{padding:18px!important}.leave-type-grid{grid-template-columns:1fr!important;gap:10px!important}.leave-date-row{flex-direction:column!important;gap:12px!important}.leave-date-row input{width:100%!important}.apply-leave-actions{flex-direction:column!important;gap:10px!important}.apply-leave-actions button{width:100%!important}}.my-leaves-page{width:100%}.page-header{background:linear-gradient(135deg,#020617,#2563eb);color:#fff;padding:24px 28px;border-radius:18px;margin-bottom:28px}.page-header h2{font-size:20px;font-weight:600}.page-header p{font-size:14px;opacity:.85}.empty-state{background:#fff;padding:40px;border-radius:14px;text-align:center;color:#64748b}.leaves-table-wrapper{background:#fff;border-radius:16px;overflow-x:auto;overflow-y:visible;position:relative}.leaves-table{width:100%;border-collapse:collapse;font-size:14px;overflow:visible}.leaves-table th{background:#f1f5f9;padding:14px;text-align:left;font-weight:600;color:#0f172a}.leaves-table td{padding:14px;border-bottom:1px solid #e5e7eb;vertical-align:middle}.leaves-table tr:hover{background:#f8fafc}.reason{max-width:220px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.status-badge{padding:4px 10px;border-radius:6px;font-size:13px;font-weight:600}.status-badge.pending{background:#fff4e5;color:#d97706}.status-badge.approved{background:#ecfdf5;color:#16a34a}.status-badge.rejected{background:#fef2f2;color:#dc2626}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(150px,1fr));gap:16px;margin:20px 0}.kpi-card{background:#fff;padding:18px;border-radius:14px;display:flex;flex-direction:column;gap:8px;box-shadow:0 4px 14px #0000000f;border:1px solid #e5e7eb}.kpi-label{font-size:13px;font-weight:600;color:#64748b}.kpi-value{font-size:28px;font-weight:700;color:#0f172a}.kpi-blue{border-top:4px solid #2563eb}.kpi-green{border-top:4px solid #16a34a}.kpi-amber{border-top:4px solid #f59e0b}.kpi-indigo{border-top:4px solid #4f46e5}.kpi-rose{border-top:4px solid #e11d48}.leave-filters{margin:20px 0;display:flex;gap:10px;flex-wrap:wrap}.leave-filters button{padding:8px 16px;border-radius:20px;border:none;background:#f3f4f6;cursor:pointer;font-size:14px;transition:all .2s ease}.leave-filters button:hover{background:#e5e7eb}.leave-filters button.active{background:#3b82f6;color:#fff;font-weight:600}.leaves-table-wrapper{overflow-x:auto;overflow-y:visible}.leaves-table{width:100%;border-collapse:collapse;background:#fff;border-radius:14px;overflow:visible;box-shadow:0 4px 14px #0000000f}.leaves-table th{background:#f9fafb;text-align:left;padding:14px;font-size:14px;font-weight:600}.leaves-table td{padding:14px;border-top:1px solid #f1f5f9;font-size:14px}.leaves-table tr:hover{background:#f9fafb}.status-badge{padding:5px 10px;border-radius:20px;font-size:12px;font-weight:600}.status-badge.pending{background:#fef3c7;color:#92400e}.status-badge.cancelled{background:#e5e7eb;color:#374151}.action-cell{position:relative;min-width:150px}.leave-action-buttons{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.table-action-btn{border:none;padding:7px 12px;border-radius:8px;cursor:pointer;font-size:13px;font-weight:600;transition:all .2s ease}.action-view{background:#dbeafe;color:#1d4ed8}.action-view:hover{background:#2563eb;color:#fff}.action-cancel{background:#fee2e2;color:#dc2626}.action-cancel:hover{background:#dc2626;color:#fff}.btn.small{padding:6px 12px;font-size:12px;border-radius:6px;border:none;cursor:pointer;transition:.2s ease}.btn.small.danger{background:#ef4444;color:#fff}.btn.small.danger:hover{background:#dc2626}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}.modal-content{background:#fff;border-radius:16px;width:90%;max-width:500px;max-height:90vh;overflow-y:auto;box-shadow:0 20px 60px #0000004d;animation:slideUp .3s ease}.modal-header{padding:20px 24px;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center}.modal-header h3{margin:0;font-size:18px;font-weight:600;color:#0f172a}.close-btn{background:none;border:none;font-size:28px;cursor:pointer;color:#64748b;line-height:1;padding:0;width:32px;height:32px;display:flex;align-items:center;justify-content:center;border-radius:6px;transition:background .2s ease}.close-btn:hover{background:#f1f5f9;color:#0f172a}.modal-body{padding:24px}.detail-row .label{font-weight:600;color:#475569;font-size:14px}.detail-row .value{color:#0f172a;font-size:14px;text-align:right}.confirm-modal{max-width:400px}.confirm-modal .modal-body{text-align:center;padding:32px 24px}.confirm-modal .modal-body p{font-size:16px;color:#475569;margin:0}.modal-footer{padding:16px 24px;border-top:1px solid #e5e7eb;display:flex;gap:12px;justify-content:flex-end}.btn-secondary{padding:10px 20px;border:1px solid #e5e7eb;background:#fff;color:#475569;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:all .2s ease}.btn-secondary:hover{background:#f8fafc;border-color:#cbd5e1}.btn-danger{padding:10px 20px;border:none;background:#ef4444;color:#fff;border-radius:8px;cursor:pointer;font-size:14px;font-weight:500;transition:background .2s ease}.btn-danger:hover{background:#dc2626}.empty-state{padding:40px;text-align:center;background:#fff;border-radius:14px;box-shadow:0 4px 14px #0000000f;color:#6b7280}@media(max-width:768px){.kpi-grid{grid-template-columns:repeat(2,1fr)}.leaves-table{font-size:12px}.leaves-table th,.leaves-table td{padding:10px 8px}.modal-content{width:95%;max-width:none}.detail-row{flex-direction:column;gap:4px}.detail-row .value{text-align:left}.leave-action-buttons{flex-direction:column;align-items:stretch}}@media(max-width:768px){.my-leaves-page{padding:14px!important}.my-leaves-header{flex-direction:column!important;gap:12px!important;align-items:flex-start!important}.my-leaves-header button{width:100%!important}.leaves-balance-grid{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}.leaves-history-table-wrapper{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}.leaves-history-table{min-width:580px!important}.apply-leave-form{padding:16px!important}.leave-form-row{flex-direction:column!important;gap:12px!important}.leave-form-row input,.leave-form-row select,.leave-form-row textarea{width:100%!important}}@media(max-width:480px){.leaves-balance-grid{grid-template-columns:1fr!important}}:root{--font-heading: "Outfit", sans-serif;--font-body: "Plus Jakarta Sans", sans-serif;--color-primary-rgb: 37, 99, 235;--color-primary: hsl(221, 83%, 53%);--color-primary-light: hsl(221, 83%, 95%);--color-primary-dark: hsl(221, 83%, 35%);--color-success: hsl(142, 70%, 45%);--color-success-bg: hsl(142, 70%, 95%);--color-success-text: hsl(142, 76%, 22%);--color-warning: hsl(38, 92%, 50%);--color-warning-bg: hsl(38, 92%, 95%);--color-warning-text: hsl(38, 90%, 25%);--color-danger: hsl(347, 87%, 60%);--color-danger-bg: hsl(347, 87%, 96%);--color-danger-text: hsl(347, 80%, 30%);--color-info: hsl(199, 89%, 48%);--color-info-bg: hsl(199, 89%, 95%);--color-info-text: hsl(199, 80%, 25%);--color-purple: hsl(271, 91%, 65%);--color-purple-bg: hsl(271, 91%, 96%);--color-purple-text: hsl(271, 85%, 35%);--bg-app: #f8fafc;--card-bg: rgba(255, 255, 255, .85);--card-border: rgba(226, 232, 240, .8);--text-main: #0f172a;--text-muted: #64748b;--shadow-sm: 0 2px 8px rgba(0, 0, 0, .04);--shadow-md: 0 10px 25px -5px rgba(0, 0, 0, .05), 0 8px 16px -6px rgba(0, 0, 0, .05);--shadow-lg: 0 20px 40px -10px rgba(15, 23, 42, .08), 0 10px 20px -10px rgba(15, 23, 42, .08);--shadow-glow: 0 0 25px rgba(37, 99, 235, .15);--radius-lg: 20px;--radius-md: 12px;--radius-sm: 8px}.payroll-page{font-family:var(--font-body);color:var(--text-main);background-color:var(--bg-app);width:100%;max-width:1280px;margin:0 auto;padding:10px 0;animation:pageFadeIn .5s cubic-bezier(.16,1,.3,1) forwards}.payroll-page .page-header{background:linear-gradient(135deg,#0f172a,#1e293b,#2563eb);background-size:200% 200%;animation:gradientShift 10s ease infinite;color:#fff;padding:35px 40px;border-radius:var(--radius-lg);display:flex;justify-content:space-between;align-items:center;margin-bottom:35px;box-shadow:0 20px 40px #0f172a40;position:relative;overflow:hidden}.payroll-page .page-header:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(37,99,235,.3) 0%,transparent 60%);pointer-events:none}.payroll-page h2{font-family:var(--font-heading);font-size:30px;font-weight:700;letter-spacing:-.03em;margin:0;display:flex;align-items:center;gap:12px}.payroll-page p{font-size:15px;opacity:.85;margin-top:6px;font-weight:400}.payslip-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-bottom:35px}.payslip-kpi-card{display:flex;align-items:center;gap:20px;padding:24px;background:#fff!important;border-radius:16px;box-shadow:0 4px 12px #0f172a0d;transition:all .3s cubic-bezier(.16,1,.3,1);border-left:4px solid transparent!important;color:#0f172a!important;position:relative;overflow:hidden}.payslip-kpi-card:hover{transform:translateY(-4px);box-shadow:0 12px 30px #0f172a1a}.payslip-kpi-card.success{border-left-color:#16a34a!important}.payslip-kpi-card.primary{border-left-color:#3b82f6!important}.payslip-kpi-card.secondary{border-left-color:#8b5cf6!important}.payslip-kpi-card.danger{border-left-color:#ef4444!important}.payslip-kpi-card.warning{border-left-color:#f59e0b!important}.kpi-card-icon{width:56px;height:56px;display:flex;align-items:center;justify-content:center;border-radius:12px;font-size:28px;flex-shrink:0}.payslip-kpi-card.success .kpi-card-icon{background:#dcfce7!important}.payslip-kpi-card.primary .kpi-card-icon{background:#dbeafe!important}.payslip-kpi-card.secondary .kpi-card-icon{background:#ede9fe!important}.payslip-kpi-card.danger .kpi-card-icon{background:#fee2e2!important}.payslip-kpi-card.warning .kpi-card-icon{background:#fef3c7!important}.kpi-card-content{display:flex;flex-direction:column;gap:4px;flex:1}.kpi-card-content h4{font-family:var(--font-heading);font-size:11px;color:#64748b!important;font-weight:700;text-transform:uppercase;letter-spacing:.8px;margin:0}.kpi-card-value{font-family:var(--font-heading);font-size:26px;font-weight:800;color:#0f172a!important;line-height:1.1;margin:2px 0 0;display:flex;align-items:baseline}.kpi-card-subtitle{font-size:12px;color:#94a3b8!important;font-weight:500}.salary-chart-card{background:var(--card-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--card-border);padding:28px;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin-bottom:35px;transition:box-shadow .3s}.salary-chart-card:hover{box-shadow:var(--shadow-lg)}.salary-chart-card h3{font-family:var(--font-heading);font-size:18px;font-weight:700;color:var(--text-main);margin-bottom:24px;display:flex;align-items:center;gap:10px}.custom-chart-tooltip{background:#0f172af2;-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);border:1px solid rgba(255,255,255,.1);padding:12px 16px;border-radius:var(--radius-md);color:#fff;box-shadow:0 10px 25px #0003;font-family:var(--font-body)}.custom-chart-tooltip .tooltip-month{font-size:12px;color:#fff9;margin-bottom:4px;font-weight:600}.custom-chart-tooltip .tooltip-value{font-family:var(--font-heading);font-size:16px;font-weight:700;color:var(--color-success)}.table-wrapper{background:var(--card-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--card-border);border-radius:var(--radius-lg);overflow:hidden;box-shadow:var(--shadow-md);transition:all .3s}.table-wrapper:hover{box-shadow:var(--shadow-lg)}.payroll-table{width:100%;border-collapse:collapse;text-align:left}.payroll-table thead{background:#f1f5f9b3;border-bottom:1px solid rgba(226,232,240,.8)}.payroll-table th{padding:18px 24px;font-size:11px;font-weight:700;text-transform:uppercase;color:var(--text-muted);letter-spacing:.08em}.payroll-table td{padding:20px 24px;border-top:1px solid rgba(241,245,249,.8);font-size:14px;color:var(--text-main);font-weight:500;transition:background-color .2s}.payroll-table tbody tr{transition:all .3s ease}.payroll-table tbody tr:hover{background:#f8fafce6}.payroll-table tbody tr:hover td{color:var(--color-primary-dark)}.amount.positive{font-family:var(--font-heading);font-weight:700;font-size:16px;color:var(--color-success-text)}.status{display:inline-flex;align-items:center;gap:6px;padding:6px 14px;border-radius:50px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.status:before{content:"";width:6px;height:6px;border-radius:50%;background:currentColor}.status-approved{background:var(--color-info-bg);color:var(--color-info-text)}.status-paid{background:var(--color-success-bg);color:var(--color-success-text);box-shadow:0 0 10px #22c55e1a}.status-pending{background:var(--color-warning-bg);color:var(--color-warning-text);animation:pulse-glow 2s infinite ease-in-out}@keyframes pulse-glow{0%,to{opacity:1}50%{opacity:.7}}.btn-view{background:transparent;color:var(--color-primary);border:1px solid rgba(37,99,235,.2);padding:8px 18px;border-radius:var(--radius-sm);font-weight:600;transition:all .25s;margin-right:8px;display:inline-flex;align-items:center;gap:6px}.btn-view:hover{background:var(--color-primary-light);border-color:var(--color-primary);transform:translateY(-1px)}.btn-payslip{background:linear-gradient(135deg,var(--color-primary) 0%,var(--color-primary-dark) 100%);color:#fff;border:none;padding:8px 18px;border-radius:var(--radius-sm);font-weight:600;box-shadow:0 4px 12px #2563eb33;transition:all .25s;display:inline-flex;align-items:center;gap:6px}.btn-payslip:hover:not(:disabled){box-shadow:0 6px 16px #2563eb59;transform:translateY(-1px);filter:brightness(1.05)}.btn-payslip:disabled{opacity:.5;cursor:not-allowed;box-shadow:none}.modal-overlay{position:fixed;inset:0;background:#0f172a66;-webkit-backdrop-filter:blur(12px);backdrop-filter:blur(12px);display:flex;align-items:center;justify-content:center;z-index:1000;animation:overlayFadeIn .3s ease forwards}.payslip-modal.professional{width:760px;max-width:90%;max-height:90vh;overflow-y:auto;background:#fff;border:1px solid rgba(255,255,255,.7);border-radius:var(--radius-lg);padding:35px;box-shadow:0 30px 70px #0f172a40;position:relative;animation:modalScaleIn .4s cubic-bezier(.16,1,.3,1) forwards;scrollbar-width:thin;scrollbar-color:var(--color-primary-light) transparent}.payslip-modal.professional::-webkit-scrollbar{width:6px}.payslip-modal.professional::-webkit-scrollbar-thumb{background-color:#2563eb26;border-radius:10px}.payslip-watermark{position:absolute;top:50%;left:50%;transform:translate(-50%,-50%) rotate(-25deg);font-family:var(--font-heading);font-size:90px;font-weight:800;color:#2563eb08;pointer-events:none;-webkit-user-select:none;user-select:none;z-index:0;letter-spacing:.1em}.payslip-header{display:flex;align-items:center;gap:20px;margin-bottom:24px;position:relative;z-index:1}.payslip-header img{width:64px;height:64px;object-fit:contain;border-radius:var(--radius-md);padding:4px;background:var(--bg-app);border:1px solid var(--card-border)}.payslip-header h3{font-family:var(--font-heading);font-size:22px;font-weight:700;color:var(--text-main);margin:0;letter-spacing:-.02em}.payslip-header p{font-size:13.5px;color:var(--text-muted);margin-top:3px;font-weight:500}.payslip-meta-grid{display:grid;grid-template-columns:repeat(4,1fr);gap:16px;padding:16px 20px;background:var(--bg-app);border-radius:var(--radius-md);margin-bottom:25px;border:1px solid var(--card-border);position:relative;z-index:1}.meta-item{display:flex;flex-direction:column;gap:4px}.meta-item span:nth-child(1){font-size:11px;font-weight:700;color:var(--text-muted);text-transform:uppercase;letter-spacing:.05em}.meta-item span:nth-child(2){font-size:13.5px;font-weight:600;color:var(--text-main)}.payslip-ledger-container{display:grid;grid-template-columns:1fr 1fr;gap:30px;margin-bottom:25px;position:relative;z-index:1}.payslip-column{background:#fff}.payslip-column h4{font-family:var(--font-heading);font-size:15px;font-weight:700;color:var(--text-main);padding-bottom:10px;border-bottom:2px solid var(--border-color, var(--color-success));margin-bottom:16px;display:flex;justify-content:space-between;align-items:center}.payslip-column.earnings h4{--border-color: var(--color-success)}.payslip-column.deductions h4{--border-color: var(--color-danger)}.ledger-row{display:flex;flex-direction:column;gap:4px;margin-bottom:14px}.ledger-row-header{display:flex;justify-content:space-between;font-size:13.5px;font-weight:500;color:#334155}.ledger-row-header span:nth-child(2){font-family:var(--font-heading);font-weight:600;color:var(--text-main)}.payslip-progress-bg{width:100%;height:4px;background:#f1f5f9;border-radius:4px;overflow:hidden}.payslip-progress-bar{height:100%;background-color:var(--progress-color, var(--color-primary));border-radius:4px;transition:width .8s ease-out}.earnings .payslip-progress-bar{--progress-color: var(--color-success)}.deductions .payslip-progress-bar{--progress-color: var(--color-danger)}.highlight-row{border-top:1px dashed var(--card-border);margin-top:15px;padding-top:15px}.highlight-row .ledger-row-header{font-size:14.5px;font-weight:700;color:var(--text-main)}.highlight-row .ledger-row-header span:nth-child(2){font-size:15px;color:var(--total-color, var(--color-success-text))}.earnings .highlight-row{--total-color: var(--color-success-text)}.deductions .highlight-row{--total-color: var(--color-danger-text)}.net-pay-glowing-card{margin-top:25px;background:linear-gradient(135deg,var(--color-success-bg) 0%,rgba(255,255,255,.95) 100%);border:1px dashed rgba(34,197,94,.3);padding:24px;border-radius:var(--radius-md);text-align:center;box-shadow:0 10px 30px #22c55e14;display:flex;flex-direction:column;align-items:center;gap:4px;position:relative;z-index:1}.net-pay-glowing-card .label{font-family:var(--font-heading);font-size:13px;font-weight:700;text-transform:uppercase;color:var(--color-success-text);letter-spacing:.08em}.net-pay-glowing-card .amount{font-family:var(--font-heading);font-size:36px;font-weight:800;color:var(--color-success-text);letter-spacing:-.03em;text-shadow:0 2px 10px rgba(34,197,94,.1)}.payslip-diff-pill{display:inline-flex;align-items:center;gap:6px;margin-top:4px;padding:4px 12px;border-radius:50px;font-size:12px;font-weight:700;border:1px solid currentColor}.payslip-diff-pill.up{background:var(--color-success-bg);color:var(--color-success-text)}.payslip-diff-pill.down{background:var(--color-danger-bg);color:var(--color-danger-text)}.payslip-diff-pill.neutral{background:var(--bg-app);color:var(--text-muted)}.payslip-chart-panel{display:flex;align-items:center;justify-content:center;gap:30px;background:#f8fafc;border-radius:var(--radius-md);padding:15px 25px;margin-bottom:25px;border:1px solid var(--card-border);position:relative;z-index:1}.payslip-chart-legend{display:flex;flex-direction:column;gap:8px}.legend-item{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:600}.legend-color{width:10px;height:10px;border-radius:50%}.modal-actions{margin-top:30px;display:flex;justify-content:flex-end;gap:12px;position:relative;z-index:1}.btn-close{background:var(--bg-app);color:var(--text-main);border:1px solid var(--card-border);padding:10px 22px;border-radius:var(--radius-sm);font-weight:600;transition:all .2s}.btn-close:hover{background:#f1f5f9;border-color:#cbd5e1}@keyframes overlayFadeIn{0%{opacity:0}to{opacity:1}}@keyframes modalScaleIn{0%{opacity:0;transform:scale(.96) translateY(8px)}to{opacity:1;transform:scale(1) translateY(0)}}@keyframes gradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@media(max-width:768px){.payroll-page .page-header{flex-direction:column;align-items:flex-start;gap:20px;padding:28px 30px}.payroll-page h2{font-size:24px}.payslip-summary-grid{grid-template-columns:1fr}.table-wrapper{overflow-x:auto}.payroll-table{min-width:650px}.payslip-ledger-container{grid-template-columns:1fr;gap:25px}.payslip-meta-grid{grid-template-columns:repeat(2,1fr);gap:12px}.payslip-chart-panel{flex-direction:column;gap:15px;padding:20px}.net-pay-glowing-card .amount{font-size:28px}}@media(max-width:768px){.payslip-container{padding:16px!important;border-radius:12px!important}.payslip-header{flex-direction:column!important;text-align:center!important;gap:14px!important;align-items:center!important}.payslip-company-info{text-align:center!important}.payslip-grid,.payslip-earnings-grid,.payslip-details-grid{grid-template-columns:1fr!important;gap:12px!important}.payslip-actions{flex-direction:column!important;gap:10px!important}.payslip-actions button{width:100%!important}.payslip-table-wrapper{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}.payslip-section-title{font-size:15px!important}.payslip-filters{flex-direction:column!important;gap:10px!important;align-items:stretch!important}.payslip-filters select,.payslip-filters input{width:100%!important}}@media(max-width:480px){.payslip-container{padding:12px!important}.payslip-amount{font-size:22px!important}}.leave-balance-page{padding:10px 0 40px}.leave-balance-page h2{font-size:24px;font-weight:700;margin-bottom:24px;color:#edeff4}.leave-balance-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:22px}.leave-card{background:#fff;border-radius:18px;padding:22px 24px;box-shadow:0 12px 30px #0f172a0f;transition:.3s ease}.leave-card:hover{transform:translateY(-5px);box-shadow:0 18px 40px #0f172a1f}.leave-card h4{font-size:16px;font-weight:600;margin-bottom:14px;color:#0f172a}.leave-stats{display:flex;justify-content:space-between;font-size:13px;margin-bottom:10px;color:#64748b}.progress-bar{height:8px;background:#e5e7eb;border-radius:6px;overflow:hidden;margin-bottom:10px}.progress-fill{height:100%;border-radius:6px;transition:width .4s ease}.leave-card.healthy .progress-fill{background:linear-gradient(90deg,#16a34a,#22c55e)}.leave-card.medium .progress-fill{background:linear-gradient(90deg,#f59e0b,#fbbf24)}.leave-card.low .progress-fill{background:linear-gradient(90deg,#ef4444,#dc2626)}.remaining{font-size:12px;font-weight:500;color:#475569}@media(max-width:1100px){.leave-balance-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:600px){.leave-balance-grid{grid-template-columns:1fr}}:root{--font-heading: "Outfit", sans-serif;--font-body: "Plus Jakarta Sans", sans-serif;--color-indigo: hsl(243, 75%, 59%);--color-indigo-dark: hsl(243, 75%, 40%);--color-indigo-light: hsl(243, 75%, 96%);--color-emerald: hsl(142, 70%, 45%);--color-emerald-bg: hsl(142, 70%, 95%);--color-emerald-text: hsl(142, 76%, 22%);--color-rose: hsl(347, 87%, 60%);--color-rose-bg: hsl(347, 87%, 96%);--color-rose-text: hsl(347, 80%, 30%);--color-violet: hsl(271, 91%, 65%);--color-violet-bg: hsl(271, 91%, 96%);--color-violet-text: hsl(271, 85%, 35%);--slate-dark: #0f172a;--slate-text: #334155;--slate-muted: #64748b;--glass-bg: rgba(255, 255, 255, .95);--glass-border: rgba(226, 232, 240, .8);--shadow-sm: 0 4px 10px rgba(0, 0, 0, .02);--shadow-md: 0 10px 30px rgba(15, 23, 42, .05);--shadow-lg: 0 20px 40px rgba(15, 23, 42, .08);--radius-lg: 20px;--radius-md: 12px;--radius-sm: 8px}.salary-growth-container{font-family:var(--font-body);color:var(--slate-dark);background-color:#f8fafc;min-height:100vh;padding:10px 0;animation:pageFadeIn .5s cubic-bezier(.16,1,.3,1) forwards}.salary-growth-container .page-header{background:linear-gradient(135deg,#090d16,#1e1b4b,#4338ca);background-size:200% 200%;animation:headerShift 15s ease infinite;color:#fff;padding:35px 40px;border-radius:var(--radius-lg);display:flex;justify-content:space-between;align-items:center;margin-bottom:35px;box-shadow:0 20px 40px #1e1b4b40;position:relative;overflow:hidden}.salary-growth-container .page-header:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 80% 20%,rgba(99,102,241,.35) 0%,transparent 60%);pointer-events:none}.salary-growth-container h2{font-family:var(--font-heading);font-size:30px;font-weight:700;letter-spacing:-.03em;margin:0;display:flex;align-items:center;gap:12px}.salary-growth-container p{font-size:15px;opacity:.85;margin-top:6px;font-weight:400}.growth-timeline-card{background:#fff!important;border:1px solid var(--glass-border);padding:35px;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin-bottom:35px;position:relative;transition:box-shadow .3s}.growth-timeline-card:hover{box-shadow:var(--shadow-lg)}.growth-timeline-card h3,.growth-trend-card h3,.growth-revision-card h3{font-family:var(--font-heading);font-size:19px;font-weight:700;color:var(--slate-dark);margin-bottom:30px;display:flex;align-items:center;gap:10px}.growth-timeline-tree{position:relative;margin-top:30px;padding-left:45px}.growth-timeline-tree:before{content:"";position:absolute;left:14px;top:6px;bottom:6px;width:3px;background:linear-gradient(to bottom,var(--color-indigo) 0%,var(--color-violet) 50%,var(--color-emerald) 100%);border-radius:4px}.growth-timeline-item{position:relative;margin-bottom:40px;animation:itemFadeReveal .6s cubic-bezier(.16,1,.3,1) forwards}.growth-timeline-item:last-child{margin-bottom:10px}.growth-timeline-dot{position:absolute;left:-40px;top:6px;width:22px;height:22px;background:#fff!important;border:4.5px solid var(--color-indigo)!important;border-radius:50%!important;box-shadow:0 0 0 4px #4f46e526,0 0 15px #4f46e54d!important;z-index:2;transition:all .3s ease}.growth-timeline-item:hover .growth-timeline-dot{transform:scale(1.2);border-color:var(--color-emerald)!important;box-shadow:0 0 0 5px #10b98133,0 0 20px #10b98166!important}.growth-timeline-content{background:#fff!important;border:1px solid rgba(226,232,240,.8)!important;padding:24px 28px;border-radius:var(--radius-md);box-shadow:var(--shadow-sm);transition:all .35s cubic-bezier(.16,1,.3,1);position:relative}.growth-timeline-content:hover{transform:translate(4px);box-shadow:var(--shadow-md);border-color:#4f46e533!important}.growth-timeline-content-header{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:12px;margin-bottom:14px}.growth-timeline-date{font-family:var(--font-heading);font-size:15.5px;font-weight:750;color:var(--slate-muted);text-transform:uppercase;letter-spacing:.05em}.growth-timeline-increment-badge{display:inline-flex;align-items:center;gap:6px;padding:5px 14px;border-radius:50px;font-size:12px;font-weight:700;background:var(--color-emerald-bg);color:var(--color-emerald-text);box-shadow:0 2px 8px #10b9811f;border:1px solid rgba(16,185,129,.25)}.growth-timeline-salary{font-family:var(--font-heading);font-size:24px;font-weight:800;color:var(--slate-dark);margin-top:4px;letter-spacing:-.02em}.growth-timeline-salary-label{font-size:12.5px;color:var(--slate-muted);font-weight:600;margin-bottom:12px;display:block}.growth-timeline-breakdown{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px;margin-top:15px;padding-top:15px;border-top:1px dashed var(--glass-border)!important}.growth-timeline-breakdown-item{display:flex;flex-direction:column;gap:4px;background:#f8fafc;padding:8px 12px;border-radius:var(--radius-sm);border:1px solid rgba(226,232,240,.5)}.growth-timeline-breakdown-item span:nth-child(1){font-size:10.5px;font-weight:700;color:var(--slate-muted);text-transform:uppercase;letter-spacing:.04em}.growth-timeline-breakdown-item span:nth-child(2){font-family:var(--font-heading);font-size:13.5px;font-weight:700;color:var(--slate-text)}.growth-trend-card{background:#fff!important;border:1px solid var(--glass-border);padding:35px;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);margin-bottom:35px;transition:box-shadow .3s}.growth-trend-card:hover{box-shadow:var(--shadow-lg)}.growth-revision-card{background:#fff!important;border:1px solid var(--glass-border);padding:35px;border-radius:var(--radius-lg);box-shadow:var(--shadow-md);transition:all .3s}.growth-revision-card:hover{box-shadow:var(--shadow-lg)}.growth-revision-table-wrapper{background:#fff;border:1px solid var(--glass-border);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-sm)}.growth-revision-table{width:100%;border-collapse:collapse}.growth-revision-table thead{background:#f8fafccc;border-bottom:1px solid rgba(226,232,240,.8)}.growth-revision-table th{padding:16px 20px;font-size:11px;font-weight:700;color:var(--slate-muted);text-transform:uppercase;letter-spacing:.08em;text-align:left}.growth-revision-table tbody tr{border-bottom:1px solid rgba(241,245,249,.8);transition:all .2s}.growth-revision-table tbody tr:hover{background:#f8fafc}.growth-revision-table td{padding:18px 20px;font-size:14px;color:var(--slate-text);font-weight:500}.revision-date-cell,.revision-ctc-cell{font-family:var(--font-heading);font-weight:700;color:var(--slate-dark)}.hike-badge{display:inline-flex;align-items:center;gap:4px;padding:4px 10px;border-radius:50px;font-size:11.5px;font-weight:700}.hike-badge.positive{background:var(--color-emerald-bg);color:var(--color-emerald-text)}.hike-badge.negative{background:var(--color-rose-bg);color:var(--color-rose-text)}.hike-badge.neutral{background:#f1f5f9;color:var(--slate-muted)}.revision-reason-tag{display:inline-block;padding:4px 10px;border-radius:var(--radius-sm);font-size:12px;font-weight:600;background:var(--color-indigo-light);color:var(--color-indigo-dark)}@keyframes pageFadeIn{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes itemFadeReveal{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}@keyframes headerShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@media(max-width:768px){.salary-growth-container .page-header{flex-direction:column;align-items:flex-start;gap:20px;padding:26px 30px}.salary-growth-container h2{font-size:24px}.growth-timeline-card,.growth-trend-card,.growth-revision-card{padding:24px 20px}.growth-timeline-tree{padding-left:30px}.growth-timeline-tree:before{left:10px}.growth-timeline-dot{left:-29px;width:18px;height:18px;border-width:3.5px}.growth-timeline-content{padding:16px 20px}.growth-timeline-content-header{flex-direction:column;align-items:flex-start;gap:8px}.growth-timeline-salary{font-size:20px}.growth-revision-table-wrapper{overflow-x:auto}.growth-revision-table{min-width:600px}}:root{--font-heading: "Outfit", sans-serif;--font-body: "Plus Jakarta Sans", sans-serif;--indigo-brand: hsl(243, 75%, 59%);--indigo-brand-light: hsl(243, 75%, 96%);--indigo-brand-dark: hsl(243, 75%, 40%);--emerald-success: hsl(142, 70%, 45%);--emerald-success-bg: hsl(142, 70%, 95%);--emerald-success-text: hsl(142, 76%, 22%);--violet-pf: hsl(271, 91%, 65%);--violet-pf-bg: hsl(271, 91%, 96%);--amber-warning: hsl(38, 92%, 50%);--amber-warning-bg: hsl(38, 92%, 95%);--amber-warning-text: hsl(38, 90%, 25%);--sky-info: hsl(199, 89%, 48%);--sky-info-bg: hsl(199, 89%, 95%);--sky-info-text: hsl(199, 80%, 25%);--slate-dark: #0f172a;--slate-text: #334155;--slate-muted: #64748b;--glass-bg: rgba(255, 255, 255, .85);--glass-border: rgba(226, 232, 240, .8);--shadow-lux-sm: 0 4px 10px rgba(0, 0, 0, .02);--shadow-lux-md: 0 10px 30px rgba(15, 23, 42, .04), 0 4px 12px rgba(15, 23, 42, .03);--shadow-lux-lg: 0 25px 50px -12px rgba(15, 23, 42, .08);--radius-xl: 24px;--radius-lg: 16px;--radius-md: 12px;--radius-sm: 8px}.my-salary-container{font-family:var(--font-body);color:var(--slate-dark);background-color:#f8fafc;min-height:100vh;padding:10px 0;animation:pageReveal .45s cubic-bezier(.16,1,.3,1) forwards}.salary-header{background:linear-gradient(135deg,#1e1b4b,#312e81,#4f46e5);background-size:200% 200%;animation:bgGradientShift 12s ease infinite;color:#fff;padding:35px 40px;border-radius:var(--radius-lg);margin-bottom:30px;box-shadow:0 20px 40px #312e8140;position:relative;overflow:hidden}.salary-header:before{content:"";position:absolute;inset:0;background:radial-gradient(circle at 75% 20%,rgba(79,70,229,.35) 0%,transparent 60%);pointer-events:none}.salary-header h2{font-family:var(--font-heading);font-size:30px;font-weight:700;margin:0;letter-spacing:-.03em;display:flex;align-items:center;gap:12px}.salary-header p{margin:6px 0 0;font-size:15px;opacity:.9;font-weight:400}.salary-summary-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(260px,1fr));gap:24px;margin-bottom:30px}.salary-summary-card{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--radius-md);padding:24px;display:flex;align-items:center;gap:20px;box-shadow:var(--shadow-lux-sm);transition:all .4s cubic-bezier(.16,1,.3,1);position:relative}.salary-summary-card:after{content:"";position:absolute;top:0;left:0;width:4px;height:100%;border-radius:var(--radius-md) 0 0 var(--radius-md);background:var(--summary-accent, var(--indigo-brand));opacity:.85}.salary-summary-card:hover{transform:translateY(-4px);box-shadow:var(--shadow-lux-lg);border-color:#4f46e540}.salary-summary-card:nth-child(1){--summary-accent: var(--emerald-success)}.salary-summary-card:nth-child(2){--summary-accent: var(--indigo-brand)}.salary-summary-card:nth-child(3){--summary-accent: var(--violet-pf)}.summary-icon{width:52px;height:52px;background:var(--icon-bg-hsl, var(--indigo-brand-light));border-radius:var(--radius-sm);display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0;color:var(--summary-accent, var(--indigo-brand));transition:transform .3s ease}.salary-summary-card:hover .summary-icon{transform:scale(1.08) rotate(3deg)}.salary-summary-card:nth-child(1) .summary-icon{--icon-bg-hsl: var(--emerald-success-bg)}.salary-summary-card:nth-child(2) .summary-icon{--icon-bg-hsl: var(--indigo-brand-light)}.salary-summary-card:nth-child(3) .summary-icon{--icon-bg-hsl: var(--violet-pf-bg)}.summary-content{display:flex;flex-direction:column;gap:4px}.summary-content h4{margin:0;font-family:var(--font-heading);font-size:12px;color:var(--slate-muted);font-weight:700;text-transform:uppercase;letter-spacing:.06em}.summary-amount{margin:0;font-family:var(--font-heading);font-size:25px;font-weight:750;color:var(--slate-dark);letter-spacing:-.02em}.summary-date{margin:0;font-size:19px;font-weight:700;color:var(--slate-text);letter-spacing:-.01em}.salary-filters{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--glass-border);padding:24px 28px;border-radius:var(--radius-md);margin-bottom:30px;display:flex;gap:24px;align-items:flex-end;flex-wrap:wrap;box-shadow:var(--shadow-lux-sm);transition:border-color .3s}.salary-filters:hover{border-color:#4f46e526}.filter-group{display:flex;flex-direction:column;gap:8px;flex:1;min-width:220px}.filter-group label{font-size:11px;font-weight:750;color:var(--slate-muted);text-transform:uppercase;letter-spacing:.05em}.filter-input,.filter-select{padding:12px 16px;border:1px solid rgba(226,232,240,.9);border-radius:var(--radius-sm);font-size:14.5px;outline:none;background:#fff;transition:all .25s cubic-bezier(.16,1,.3,1);color:var(--slate-dark);font-weight:500}.filter-input:focus,.filter-select:focus{border-color:var(--indigo-brand);box-shadow:0 0 0 4px #4f46e514;background:#fff}.salary-pill-filters{display:flex;gap:8px;align-self:flex-end;margin-bottom:2px}.salary-pill-btn{padding:10px 18px;background:#f1f5f9;border:1px solid transparent;color:var(--slate-text);border-radius:50px;font-size:13px;font-weight:600;cursor:pointer;transition:all .25s cubic-bezier(.16,1,.3,1)}.salary-pill-btn:hover{background:#e2e8f0;color:var(--slate-dark)}.salary-pill-btn.active{background:var(--indigo-brand);color:#fff;box-shadow:0 4px 10px #4f46e540}.filter-count{padding:12px 20px;background:#f1f5f9;border-radius:var(--radius-sm);font-weight:700;font-size:13.5px;color:var(--slate-text);white-space:nowrap;align-self:flex-end;margin-bottom:2px;border:1px solid transparent}.salary-table-wrapper{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--glass-border);border-radius:var(--radius-md);overflow:hidden;box-shadow:var(--shadow-lux-md);margin-bottom:30px;transition:all .3s}.salary-table-wrapper:hover{box-shadow:var(--shadow-lux-lg)}.salary-table{width:100%;border-collapse:collapse}.salary-table thead{background:#f8fafccc;border-bottom:1px solid rgba(226,232,240,.8)}.salary-table th{padding:18px 24px;text-align:left;font-size:11px;font-weight:700;color:var(--slate-muted);text-transform:uppercase;letter-spacing:.08em}.salary-table tbody tr{border-bottom:1px solid rgba(241,245,249,.8);transition:all .25s ease;position:relative}.salary-table tbody tr:hover{background:#f8fafcf2}.salary-table tbody tr:after{content:"";position:absolute;left:0;top:0;bottom:0;width:3px;background:var(--emerald-success);transform:scaleY(0);transition:transform .25s ease}.salary-table tbody tr:hover:after{transform:scaleY(1)}.salary-table td{padding:20px 24px;font-size:14.5px;color:var(--slate-text);font-weight:500}.month-cell{font-family:var(--font-heading);font-weight:700;color:var(--slate-dark);font-size:15.5px}.amount-cell{font-family:var(--font-heading);font-weight:800;color:var(--emerald-success-text);font-size:17px;display:inline-flex;align-items:center;gap:4px}.date-cell{color:var(--slate-muted);font-weight:500}.salary-status-badge{display:inline-flex;align-items:center;gap:5px;padding:6px 12px;border-radius:50px;font-size:11px;font-weight:700;text-transform:uppercase;letter-spacing:.03em}.salary-status-badge:before{content:"";width:5px;height:5px;border-radius:50%;background:currentColor}.download-btn{padding:8px 18px;background:linear-gradient(135deg,var(--indigo-brand) 0%,var(--indigo-brand-dark) 100%);color:#fff;border:none;border-radius:var(--radius-sm);font-size:13px;font-weight:600;cursor:pointer;box-shadow:0 4px 10px #4f46e526;transition:all .25s cubic-bezier(.16,1,.3,1);display:inline-flex;align-items:center;gap:6px}.download-btn:hover:not(:disabled){transform:translateY(-1.5px);box-shadow:0 6px 16px #4f46e54d;filter:brightness(1.05)}.download-btn:disabled{opacity:.55;cursor:not-allowed;box-shadow:none;transform:none}.salary-pagination{background:var(--glass-bg);-webkit-backdrop-filter:blur(16px);backdrop-filter:blur(16px);border:1px solid var(--glass-border);padding:18px 28px;border-radius:var(--radius-md);display:flex;justify-content:space-between;align-items:center;box-shadow:var(--shadow-lux-sm)}.pagination-info{font-size:14.5px;color:var(--slate-muted);font-weight:600}.pagination-controls{display:flex;gap:6px;align-items:center}.page-btn{padding:8px 16px;background:#fff;border:1px solid rgba(226,232,240,.9);border-radius:var(--radius-sm);font-size:13.5px;font-weight:600;color:var(--slate-text);cursor:pointer;transition:all .2s;display:flex;align-items:center;justify-content:center}.page-btn:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1;color:var(--slate-dark)}.page-btn.active{background:linear-gradient(135deg,var(--indigo-brand) 0%,var(--indigo-brand-dark) 100%);color:#fff;border-color:transparent;box-shadow:0 4px 10px #4f46e533}.page-btn:disabled{opacity:.45;cursor:not-allowed}.page-dots{padding:0 6px;color:#94a3b8;font-weight:700}.salary-loading{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;gap:20px}.salary-spinner{width:48px;height:48px;border:4.5px solid #f1f5f9;border-top-color:var(--indigo-brand);border-radius:50%;animation:spinLoader .75s cubic-bezier(.42,0,.58,1) infinite}.salary-loading p{font-size:16px;color:var(--slate-muted);font-weight:600;letter-spacing:-.01em}.salary-error{background:#fff;border-radius:var(--radius-lg);border:1px solid rgba(239,68,68,.15);padding:60px 40px;text-align:center;box-shadow:var(--shadow-lux-md);max-width:500px;margin:40px auto}.error-icon{font-size:64px;margin-bottom:20px}.salary-error h3{margin:0 0 10px;font-family:var(--font-heading);font-size:22px;color:var(--slate-dark)}.salary-error p{margin:0 0 26px;font-size:14.5px;color:var(--slate-muted)}.retry-btn{padding:12px 28px;background:linear-gradient(135deg,var(--indigo-brand) 0%,var(--indigo-brand-dark) 100%);color:#fff;border:none;border-radius:var(--radius-sm);font-size:14px;font-weight:600;cursor:pointer;box-shadow:0 4px 12px #4f46e540;transition:all .2s}.retry-btn:hover{transform:translateY(-1px);box-shadow:0 6px 16px #4f46e559}.salary-empty{background:#fff;border-radius:var(--radius-lg);padding:80px 40px;text-align:center;box-shadow:var(--shadow-lux-md);border:1px solid rgba(226,232,240,.5)}.empty-icon{font-size:64px;opacity:.35;margin-bottom:20px}.salary-empty h3{margin:0 0 10px;font-family:var(--font-heading);font-size:22px;color:var(--slate-dark);font-weight:700}.salary-empty p{margin:0;font-size:14.5px;color:var(--slate-muted)}.btn-spinner{display:inline-block;width:13px;height:13px;border:2.5px solid rgba(255,255,255,.3);border-top-color:#fff;border-radius:50%;animation:spinLoader .6s linear infinite}@keyframes pageReveal{0%{opacity:0;transform:translateY(12px)}to{opacity:1;transform:translateY(0)}}@keyframes spinLoader{to{transform:rotate(360deg)}}@keyframes bgGradientShift{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}@media(max-width:768px){.my-salary-container{padding:10px}.salary-header{padding:26px 30px}.salary-header h2{font-size:24px}.salary-summary-grid{grid-template-columns:1fr;gap:16px}.salary-filters{flex-direction:column;align-items:stretch;padding:20px;gap:16px}.filter-group{min-width:auto}.salary-pill-filters{align-self:center;width:100%;justify-content:center}.filter-count{align-self:center;width:100%;text-align:center}.salary-table-wrapper{overflow-x:auto}.salary-table{min-width:650px}.salary-pagination{flex-direction:column;gap:16px;padding:20px}.pagination-controls{flex-wrap:wrap;justify-content:center}}@media(max-width:768px){.salary-page{padding:14px!important}.salary-header{flex-direction:column!important;gap:12px!important;align-items:flex-start!important}.salary-summary-cards{grid-template-columns:1fr!important;gap:12px!important}.salary-breakdown-table-wrapper{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}.salary-breakdown-row{flex-direction:column!important;gap:6px!important;align-items:flex-start!important}.salary-filter-row{flex-direction:column!important;gap:10px!important;align-items:stretch!important}.salary-filter-row select{width:100%!important}.salary-tabs{overflow-x:auto!important;white-space:nowrap!important;-webkit-overflow-scrolling:touch!important;flex-wrap:nowrap!important;padding-bottom:4px!important}}@media(max-width:480px){.salary-amount{font-size:24px!important}}.settings-page{padding:40px 30px;width:100%;margin:0 auto;background:transparent;min-height:100vh;font-family:Inter,sans-serif;animation:fadeIn .4s ease;box-sizing:border-box}.settings-page.billing-active{transition:max-width .4s cubic-bezier(.4,0,.2,1)}.settings-header{margin-bottom:40px;background:linear-gradient(135deg,#0f172a,#1e293b);padding:36px 40px;border-radius:20px;color:#fff;box-shadow:0 20px 40px -15px #0003;position:relative;overflow:hidden}.settings-header:before{content:"";position:absolute;top:-50px;right:-50px;width:200px;height:200px;background:radial-gradient(circle,rgba(59,130,246,.3) 0%,transparent 70%);border-radius:50%;pointer-events:none}.settings-header h2{font-size:32px;font-weight:800;margin-bottom:8px;letter-spacing:-.02em;color:#fff}.settings-header p{color:#94a3b8;font-size:15px;margin:0}.settings-tabs{display:flex;gap:8px;margin-bottom:32px;background:#fff;padding:6px;border-radius:100px;box-shadow:0 4px 15px #00000008,inset 0 2px 4px #00000005;width:fit-content;flex-wrap:wrap}.settings-tabs .tab{padding:10px 20px;background:transparent;border:none;border-radius:100px;color:#64748b;font-size:14px;font-weight:600;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);position:relative;z-index:1}.settings-tabs .tab:hover{color:#0f172a;background:#f8fafc}.settings-tabs .tab.active{color:#fff;background:#2563eb;box-shadow:0 4px 12px #2563eb4d}.settings-content{animation:slideUpFade .4s ease}.settings-card{background:#fff;border-radius:20px;padding:40px;border:1px solid #e2e8f0;box-shadow:0 10px 40px -10px #0000000f;position:relative;overflow:hidden}.settings-card:after{content:"";position:absolute;top:0;left:0;width:100%;height:4px;background:linear-gradient(90deg,#3b82f6,#06b6d4);opacity:0;transition:opacity .3s}.settings-card:hover:after{opacity:1}.settings-card h3{font-size:24px;color:#0f172a;margin-bottom:8px;font-weight:800;letter-spacing:-.01em}.card-subtitle{color:#64748b;font-size:14px;margin-bottom:32px;line-height:1.5}.form-field{margin-bottom:24px}.form-field label{display:block;font-size:13px;font-weight:700;color:#334155;margin-bottom:8px;text-transform:uppercase;letter-spacing:.05em}.form-field input{width:100%;max-width:600px;padding:14px 16px;border:1.5px solid #cbd5e1;border-radius:12px;font-size:15px;color:#0f172a;background:#f8fafc;transition:all .3s;box-sizing:border-box}.form-field input:focus{outline:none;border-color:#3b82f6;background:#fff;box-shadow:0 0 0 4px #3b82f61a}.form-field input:hover:not(:focus){border-color:#94a3b8}.btn{padding:14px 28px;border:none;border-radius:12px;font-size:15px;font-weight:700;cursor:pointer;transition:all .3s cubic-bezier(.4,0,.2,1);display:inline-flex;align-items:center;justify-content:center}.btn-primary{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;box-shadow:0 4px 12px #2563eb40}.btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#1d4ed8,#1e3a8a);transform:translateY(-2px);box-shadow:0 6px 16px #2563eb59}.btn-primary:active:not(:disabled){transform:translateY(0)}.btn:disabled{background:#e2e8f0;color:#94a3b8;box-shadow:none;cursor:not-allowed;transform:none}.alert{padding:16px 20px;border-radius:12px;margin-bottom:24px;font-size:14px;font-weight:600;display:flex;align-items:center;gap:12px}.alert-error{background:#fef2f2;color:#b91c1c;border:1px solid #fecaca;box-shadow:0 2px 8px #b91c1c0d}.alert-success{background:#f0fdf4;color:#15803d;border:1px solid #bbf7d0;box-shadow:0 2px 8px #15803d0d}.info-box{margin-top:32px;padding:20px;background:#eff6ff;border-radius:12px;border:1px solid #bfdbfe;color:#1e3a8a;font-size:14px;line-height:1.6;font-weight:500}.branding-preview-wrap{display:flex;align-items:center;gap:24px;margin-bottom:32px;padding:24px;background:#f8fafc;border-radius:16px;border:1px dashed #cbd5e1}.branding-preview{width:80px;height:80px;object-fit:contain;border-radius:12px;background:#fff;padding:8px;box-shadow:0 4px 12px #0000000d}.branding-fallback{width:80px;height:80px;border-radius:16px;background:linear-gradient(135deg,#3b82f6,#8b5cf6);color:#fff;display:flex;align-items:center;justify-content:center;font-size:32px;font-weight:800;box-shadow:0 4px 12px #3b82f64d}.branding-meta strong{display:block;font-size:18px;color:#0f172a;margin-bottom:4px}.branding-meta small{color:#64748b;font-size:13px}.branding-actions{display:flex;gap:16px}.branding-delete-btn{background:#fee2e2;color:#ef4444}.branding-delete-btn:hover:not(:disabled){background:#fecaca;color:#dc2626;transform:translateY(-2px)}@keyframes slideUpFade{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.settings-page{padding:20px 16px}.settings-header{padding:28px 24px;border-radius:16px}.settings-card{padding:24px}.settings-tabs{flex-direction:column;width:100%;border-radius:16px;padding:8px}.settings-tabs .tab{width:100%;text-align:center;border-radius:12px}.branding-preview-wrap{flex-direction:column;text-align:center}}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;gap:16px}.page-title{font-size:24px;font-weight:700;color:#fff!important;letter-spacing:-.5px}.page-subtitle{font-size:14px;color:#fffc!important;margin-top:6px;line-height:1.5}.card{background:#fff;border-radius:14px;padding:24px;box-shadow:0 4px 16px #0f172a14;border:1px solid #f0f4f8;overflow:hidden}.card .table-wrapper{margin:0;padding:0;border:none;border-radius:0}.card .pagination{margin:24px -24px -24px;padding:16px 24px;border-top:1px solid #e5e7eb}.card label,.modal-card label{display:block;font-size:13px;font-weight:600;color:#334155;margin-bottom:8px;letter-spacing:.2px}.card input,.card textarea,.card select,.modal-card input,.modal-card textarea,.modal-card select{width:100%;padding:10px 12px;border:1.5px solid #cbd5e1;border-radius:8px;font-size:14px;margin-bottom:12px;transition:all .2s ease;font-family:inherit}.card input:focus,.card textarea:focus,.card select:focus,.modal-card input:focus,.modal-card textarea:focus,.modal-card select:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}.card textarea,.modal-card textarea{min-height:80px;resize:vertical}.table{width:100%;border-collapse:collapse;table-layout:auto}.table th{background:linear-gradient(135deg,#f1f5f9,#e2e8f0);padding:14px;font-size:12px;font-weight:700;color:#334155;text-align:left;border-bottom:2px solid #cbd5e1;letter-spacing:.3px;text-transform:uppercase}.table td{padding:14px;border-bottom:1px solid #e5e7eb;font-size:14px;color:#0f172a;word-break:break-word;word-wrap:break-word;overflow-wrap:break-word}.table tbody tr:hover{background:#f9fafb}.table tbody tr:last-child td{border-bottom:none;padding-bottom:14px}.muted-text{color:#64748b;font-size:13px}.btn{padding:10px 16px;border-radius:10px;border:none;font-size:14px;cursor:pointer;font-weight:600;transition:all .2s ease;display:inline-flex;align-items:center;gap:6px}.btn:disabled{opacity:.5;cursor:not-allowed}.btn.primary{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;box-shadow:0 2px 8px #2563eb4d}.btn.primary:hover:not(:disabled){background:linear-gradient(135deg,#1d4ed8,#1e40af);box-shadow:0 4px 12px #2563eb66;transform:translateY(-2px)}.btn.danger{background:#ef4444;color:#fff;box-shadow:0 2px 8px #ef44444d}.btn.danger:hover:not(:disabled){background:#dc2626;box-shadow:0 4px 12px #ef444466}.page-hero{background:linear-gradient(135deg,#020617,#2563eb);border-radius:18px;padding:26px 32px;margin-bottom:28px;color:#fff}.page-hero h2{font-size:24px;font-weight:600}.page-hero p{margin-top:6px;font-size:14px;opacity:.9}.filters-row{display:flex;flex-wrap:wrap;align-items:center;gap:16px;margin-bottom:20px;padding:16px;background:#f9fafb;border-radius:10px;border:1px solid #e5e7eb}.filters-row label{font-weight:600;color:#334155;font-size:13px;margin:0}.filters-row select{padding:8px 12px;border-radius:8px;border:1.5px solid #cbd5e1;font-size:14px;background:#fff;cursor:pointer;transition:all .2s ease;min-width:160px}.filters-row select:hover{border-color:#94a3b8;background:#f8fafc}.filters-row select:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}.table-wrapper{width:100%;overflow-x:visible;-webkit-overflow-scrolling:touch;border-radius:10px;border:1px solid #e5e7eb;margin-bottom:16px}.table-wrapper table{width:100%;margin-bottom:0}.pagination{display:flex;align-items:center;justify-content:center;gap:12px;margin-top:24px;flex-wrap:wrap;padding:0}.pagination-info{font-size:13px;color:#64748b;font-weight:500}.pagination button{padding:8px 12px;border-radius:8px;border:1.5px solid #cbd5e1;background:#fff;cursor:pointer;font-size:13px;font-weight:600;transition:all .2s ease;color:#334155;min-width:32px;height:32px;display:flex;align-items:center;justify-content:center}.pagination button:hover:not(:disabled){background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:0 2px 8px #2563eb33}.pagination button:disabled{opacity:.4;cursor:not-allowed;background:#f1f5f9}.pagination button.active{background:#2563eb;color:#fff;border-color:#2563eb}@media(max-width:768px){.page-header{flex-direction:column;align-items:flex-start}.page-title{font-size:20px}.page-subtitle{font-size:13px}.card{padding:16px;border-radius:12px}.filters-row{flex-direction:column;gap:12px}.filters-row label{width:100%}.filters-row select{width:100%;min-width:unset}.table th,.table td{padding:10px;font-size:13px}.btn{padding:8px 12px;font-size:13px}.pagination{gap:8px}.pagination button{padding:6px 10px;font-size:12px}}@media(max-width:480px){.table th,.table td{padding:8px;font-size:12px}.page-title{font-size:18px}.card{padding:12px}.pagination{gap:6px}}.card .pagination{margin-top:24px;margin-bottom:0;display:flex;justify-content:center;gap:10px;align-items:center;flex-wrap:wrap;border-top:1px solid #e5e7eb;padding-top:16px}.card .pagination .page-btn{padding:10px 20px;border-radius:8px;border:1px solid #cbd5e1;background:#fff;cursor:pointer;transition:all .2s ease;font-weight:500;color:#475569;font-size:14px;min-width:unset;height:auto;display:inline-flex;align-items:center;justify-content:center}.card .pagination .page-btn:hover:not(:disabled){background:#2563eb;color:#fff;border-color:#2563eb;box-shadow:none}.card .pagination .page-btn:disabled{opacity:.4;cursor:not-allowed;background:#f8fafc}.card .pagination .page-btn.active{background:#1d4ed8;color:#fff;border-color:#1d4ed8}.card .pagination .page-number-group{display:flex;gap:6px;align-items:center}.card .pagination .page-summary{font-size:14px;color:#475569;font-weight:600;padding:0 12px}.manage-users-page .card,.audit-logs-page .card,.companies-page .card{overflow:visible!important}.manage-users-page .table-wrapper,.audit-logs-page .table-wrapper,.companies-page .table-wrapper{min-height:unset!important;height:auto!important;overflow:visible!important}.attendance-pagination-container{display:flex;justify-content:space-between;align-items:center;margin-top:20px;background:#f8fafc;padding:12px 20px;border-radius:14px;border:1px solid #e2e8f0;animation:fadeIn .3s ease;flex-wrap:wrap;gap:12px;width:100%;box-sizing:border-box}.pagination-left{display:flex;align-items:center;gap:8px;font-size:14px;color:#64748b;font-weight:500}.items-per-page-select{padding:6px 12px!important;border-radius:6px!important;border:1px solid #cbd5e1!important;background:#fff!important;font-size:13px!important;color:#1e293b!important;font-weight:600!important;cursor:pointer!important;outline:none!important;transition:all .2s ease!important;width:auto!important;margin-bottom:0!important}.items-per-page-select:focus{border-color:#2563eb!important;box-shadow:0 0 0 2px #2563eb26!important}.pagination-right{display:flex;align-items:center;gap:12px;flex-wrap:wrap}.page-btn{padding:6px 14px!important;border-radius:6px!important;border:1px solid #cbd5e1!important;background:#fff!important;color:#475569!important;font-size:13px!important;font-weight:500!important;cursor:pointer!important;transition:all .2s ease!important;width:auto!important;margin-bottom:0!important;height:auto!important;display:inline-flex!important;align-items:center!important;justify-content:center!important;line-height:normal!important}.page-btn:hover:not(:disabled){background:#f1f5f9!important;color:#1e293b!important;border-color:#94a3b8!important}.page-btn.active{background:#2563eb!important;color:#fff!important;border-color:#2563eb!important;font-weight:600!important}.page-btn:disabled{opacity:.5!important;cursor:not-allowed!important}.page-summary{font-size:13px!important;color:#64748b!important;font-weight:500!important;margin:0!important}.responsive-table-container{width:100%;overflow-x:auto;-webkit-overflow-scrolling:touch}.responsive-grid{display:grid;gap:16px}.responsive-grid-2{grid-template-columns:repeat(2,1fr)}.responsive-grid-3{grid-template-columns:repeat(3,1fr)}.responsive-grid-4{grid-template-columns:repeat(4,1fr)}.responsive-chart-container{width:100%}@media(max-width:1023px){.responsive-grid-3,.responsive-grid-4{grid-template-columns:repeat(2,1fr)}}@media(max-width:767px){.responsive-grid-2,.responsive-grid-3,.responsive-grid-4{grid-template-columns:1fr}.responsive-chart-container{height:300px!important;min-height:300px}.hide-on-mobile{display:none!important}}.create-user-page{min-height:calc(100vh - 56px);padding:12px 16px 36px;background:linear-gradient(180deg,#f8fafc,#f1f5f9)}.create-user-shell{width:min(880px,100%);margin:0 auto}.create-user-header{display:flex;justify-content:space-between;align-items:flex-start;gap:24px;padding:24px;border-radius:14px;background:linear-gradient(135deg,#fff,#f8fafc);border:1px solid #e2e8f0;box-shadow:0 4px 16px #0f172a14;margin-bottom:20px}.create-user-title{margin-bottom:8px;font-size:28px;font-weight:700;color:#0f172a}.create-user-header-actions,.create-user-form-actions{display:flex;gap:12px;align-items:center}.create-user-btn{border-radius:10px;height:44px;padding:0 20px;border:1px solid transparent;font-weight:600;font-size:14px;transition:all .2s ease;white-space:nowrap;cursor:pointer;display:flex;align-items:center;justify-content:center}.create-user-btn:disabled{opacity:.5;cursor:not-allowed}.create-user-btn-secondary{background:#fff;border-color:#cbd5e1;color:#334155;box-shadow:0 2px 6px #0000000f}.create-user-btn-secondary:hover:not(:disabled){background:#f1f5f9;border-color:#94a3b8;box-shadow:0 4px 12px #00000014}.create-user-btn-primary{background:linear-gradient(135deg,#2563eb,#1d4ed8);color:#fff;box-shadow:0 4px 12px #2563eb4d}.create-user-btn-primary:hover:not(:disabled){background:linear-gradient(135deg,#1d4ed8,#1e40af);box-shadow:0 6px 20px #2563eb66}.create-user-card{border-radius:14px;border:1px solid #e2e8f0;padding:32px;box-shadow:0 4px 16px #0f172a14;background:#fff}.create-user-section{padding-bottom:24px;margin-bottom:28px;border-bottom:2px solid #f1f5f9}.create-user-section:last-of-type{margin-bottom:0;padding-bottom:0;border-bottom:none}.create-user-section-title{font-size:17px;font-weight:700;color:#0f172a;margin-bottom:18px;display:flex;align-items:center;gap:8px}.create-user-section-title:before{content:"";width:4px;height:4px;background:#2563eb;border-radius:50%}.create-user-field{margin-bottom:20px}.create-user-field label{display:block;font-size:14px;font-weight:600;color:#1e293b;margin-bottom:8px;letter-spacing:.3px}.create-user-search,.create-user-field input,.create-user-field select{width:100%;height:44px;border:1.5px solid #cbd5e1;border-radius:10px;padding:0 14px;font-size:14px;transition:all .2s ease;background:#fff;font-family:inherit;color:#0f172a}.create-user-search{margin-bottom:10px;height:40px}.create-user-field input::placeholder,.create-user-field select::placeholder,.create-user-search::placeholder{color:#94a3b8}.create-user-field input:hover,.create-user-field select:hover,.create-user-search:hover{background:#f8fafc;border-color:#94a3b8}.create-user-field input:focus,.create-user-field select:focus,.create-user-search:focus{outline:none;border-color:#2563eb;background:#fff;box-shadow:0 0 0 4px #2563eb1f,inset 0 0 0 1px #2563eb33}.create-user-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:18px}.create-user-hint{font-size:12.5px;color:#64748b;margin-top:6px;line-height:1.5}.create-user-field-error{margin-top:6px;font-size:13px;color:#b91c1c;font-weight:500}.create-user-error{margin-bottom:16px;padding:12px 14px;border-radius:10px;border:1.5px solid #fecaca;background:#fef2f2;color:#b91c1c;font-size:13.5px;font-weight:500;line-height:1.5}.create-user-info{background:linear-gradient(135deg,#eff6ff,#f0f9ff);color:#1e3a8a;border:1.5px solid #bfdbfe;border-radius:10px;padding:12px 14px;font-size:13.5px;line-height:1.6;margin-bottom:16px}.create-user-form-actions{justify-content:flex-end;margin-top:12px}.create-user-permission-card{background:linear-gradient(135deg,#f8fafc,#f0f9ff);border:1.5px solid #cbd5e1;border-radius:10px;padding:16px;margin-bottom:16px}.create-user-permission-title{font-size:14px;font-weight:700;color:#0f172a;margin-bottom:12px}.create-user-checkbox{display:flex;align-items:center;gap:10px;font-size:14px;color:#334155;margin-bottom:10px;cursor:pointer;-webkit-user-select:none;user-select:none}.create-user-checkbox:last-child{margin-bottom:0}.create-user-checkbox input[type=checkbox]{width:18px;height:18px;cursor:pointer;accent-color:#2563eb}.create-user-spinner-wrap{display:inline-flex;align-items:center;gap:8px}.create-user-spinner{width:14px;height:14px;border:2px solid rgba(255,255,255,.35);border-top-color:#fff;border-radius:50%;animation:spin .8s linear infinite}@media(max-width:1024px){.create-user-shell{width:min(100%,100%)}.create-user-card{padding:24px}}@media(max-width:768px){.create-user-page{padding:8px 12px 32px}.create-user-shell{width:100%}.create-user-header{flex-direction:column;align-items:stretch;gap:16px;padding:16px}.create-user-title{font-size:22px}.create-user-header-actions{width:100%;justify-content:flex-end}.create-user-btn{flex:1;min-width:120px}.create-user-card{padding:20px;border-radius:12px}.create-user-section{margin-bottom:20px;padding-bottom:20px}.create-user-section-title{font-size:15px;margin-bottom:14px}.create-user-field{margin-bottom:16px}.create-user-grid{grid-template-columns:1fr;gap:14px}.create-user-search,.create-user-field input,.create-user-field select{height:42px;font-size:16px;padding:0 12px}}@media(max-width:1024px){.create-user-form-grid,.company-users-stats{grid-template-columns:repeat(2,1fr)!important}}@media(max-width:768px){.create-user-page{padding:14px!important}.create-user-form-grid{grid-template-columns:1fr!important;gap:12px!important}.create-user-header{flex-direction:column!important;gap:12px!important;align-items:flex-start!important}.create-user-header button{width:100%!important}.company-users-tabs{overflow-x:auto!important;white-space:nowrap!important;-webkit-overflow-scrolling:touch!important;flex-wrap:nowrap!important;padding-bottom:4px!important}.company-users-table-wrapper{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}.company-users-table{min-width:700px!important}.onboard-form{padding:16px!important}.onboard-form-row{flex-direction:column!important;gap:12px!important}.company-users-filters{flex-direction:column!important;gap:10px!important}.company-users-filters input,.company-users-filters select{width:100%!important}.company-users-stats{grid-template-columns:1fr!important;gap:12px!important}}@media(max-width:480px){.create-user-form-grid{grid-template-columns:1fr!important}}.modal-overlay{position:fixed;inset:0;background:#0f172a99;display:flex;align-items:center;justify-content:center;z-index:9999;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px)}.modal-card{background:#fff;width:420px;max-width:90%;border-radius:14px;padding:28px;box-shadow:0 20px 60px #0f172a40;animation:fadeInScale .3s ease;border:1px solid #e5e7eb}.modal-card h3{font-size:20px;font-weight:700;margin-bottom:4px;color:#0f172a}.modal-card h4{font-size:15px;font-weight:700;margin-top:20px;margin-bottom:8px;color:#334155;letter-spacing:.3px}@keyframes fadeInScale{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.modal-title{font-size:18px;font-weight:700;margin-bottom:8px;color:#0f172a}.modal-message{font-size:14px;color:#64748b;margin-bottom:24px;line-height:1.6}.modal-actions{display:flex;justify-content:flex-end;gap:12px;margin-top:28px;padding-top:20px;border-top:1px solid #e5e7eb}.btn-cancel{background:#f1f5f9;color:#334155;padding:10px 18px;border-radius:8px;border:1.5px solid #cbd5e1;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.btn-cancel:hover{background:#e2e8f0;border-color:#94a3b8}.btn-delete{background:#ef4444;color:#fff;padding:10px 18px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease;box-shadow:0 2px 8px #ef44444d}.btn-delete:hover{background:#dc2626;box-shadow:0 4px 12px #ef444466}.modal-card input,.modal-card textarea,.modal-card select{border:1.5px solid #cbd5e1;padding:10px 12px;border-radius:8px;font-size:14px;transition:all .2s ease}.modal-card input:hover,.modal-card textarea:hover,.modal-card select:hover{border-color:#94a3b8;background:#f8fafc}.modal-card input:focus,.modal-card textarea:focus,.modal-card select:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}@media(max-width:768px){.modal-overlay{align-items:flex-end!important;padding:0!important}.modal-card,.modal-content,.modal-box,.modal-wrapper{width:100%!important;max-width:100%!important;border-radius:20px 20px 0 0!important;max-height:92vh!important;overflow-y:auto!important;padding:20px!important;margin:0!important}.modal-header{margin-bottom:16px!important}.modal-header h3,.modal-title{font-size:17px!important}.modal-body{padding:0!important}.modal-form-grid{grid-template-columns:1fr!important;gap:12px!important}.modal-actions,.modal-footer{flex-direction:column!important;gap:10px!important;margin-top:16px!important}.modal-actions button,.modal-footer button,.modal-actions .btn,.modal-footer .btn{width:100%!important;justify-content:center!important}}@media(max-width:480px){.modal-card,.modal-content,.modal-box{padding:16px!important;max-height:88vh!important}}.payroll-summary-page{padding:24px;background:#f8fafc;min-height:100vh}.loading-state,.empty-state{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:400px;gap:16px}.spinner{width:48px;height:48px;border:4px solid #e2e8f0;border-top-color:#2563eb;border-radius:50%;animation:spin .8s linear infinite}.empty-icon{font-size:64px;opacity:.5}.empty-state h3{font-size:20px;color:#0f172a;margin-bottom:8px}.empty-state p{color:#64748b;font-size:14px}.page-header{display:flex;justify-content:space-between;align-items:center;padding:28px 32px;background:linear-gradient(135deg,#0f172a,#1e40af);border-radius:16px;margin-bottom:24px;box-shadow:0 10px 40px #0f172a26}.header-content h1{font-size:28px;font-weight:700;color:#fff;margin-bottom:6px}.header-content p{font-size:14px;color:#ffffffd9}.header-actions{display:flex;gap:12px}.btn-download{display:flex;align-items:center;gap:8px;padding:10px 20px;border:1px solid rgba(255,255,255,.2);background:#ffffff26;color:#fff;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s}.btn-download:hover:not(:disabled){background:#ffffff40;transform:translateY(-2px)}.btn-download:disabled{opacity:.5;cursor:not-allowed}.filter-section{display:flex;gap:16px;margin-bottom:24px;padding:20px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000000a}.summary-grid{display:grid;grid-template-columns:repeat(3,1fr);gap:20px;margin-bottom:24px}.summary-card{display:flex;align-items:center;gap:20px;padding:24px;background:#fff;border-radius:16px;box-shadow:0 2px 8px #0000000a;transition:all .3s;border-left:4px solid transparent}.summary-card:hover{transform:translateY(-4px);box-shadow:0 8px 24px #0000001a}.summary-card.primary{border-left-color:#3b82f6}.summary-card.success{border-left-color:#16a34a}.summary-card.info{border-left-color:#0ea5e9}.summary-card.warning{border-left-color:#f59e0b}.summary-card.secondary{border-left-color:#8b5cf6}.summary-card.danger{border-left-color:#ef4444}.card-icon{width:64px;height:64px;display:flex;align-items:center;justify-content:center;border-radius:12px;font-size:32px;flex-shrink:0}.summary-card.primary .card-icon{background:#dbeafe}.summary-card.success .card-icon{background:#dcfce7}.summary-card.info .card-icon{background:#e0f2fe}.summary-card.warning .card-icon{background:#fef3c7}.summary-card.secondary .card-icon{background:#ede9fe}.summary-card.danger .card-icon{background:#fee2e2}.card-content{display:flex;flex-direction:column;gap:6px;flex:1}.card-content h4{font-size:13px;color:#64748b;font-weight:600;text-transform:uppercase;letter-spacing:.5px}.card-content .value{font-size:28px;font-weight:700;color:#0f172a;line-height:1}.card-content .subtitle{font-size:12px;color:#94a3b8}.charts-section{display:grid;grid-template-columns:1fr 1fr;gap:24px;margin-bottom:24px}.chart-card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 2px 8px #0000000a}.chart-header{margin-bottom:20px;padding-bottom:16px;border-bottom:2px solid #f1f5f9}.chart-header h3{font-size:18px;font-weight:700;color:#0f172a;margin-bottom:4px}.chart-header p{font-size:13px;color:#64748b}.chart-body{min-height:300px}.info-section{display:grid;grid-template-columns:1fr;gap:24px}.info-card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 2px 8px #0000000a}.info-card h4{font-size:16px;font-weight:700;color:#0f172a;margin-bottom:16px}.info-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #f1f5f9;font-size:14px}.info-row:last-child{border-bottom:none}.info-row span{color:#64748b}.info-row strong{color:#0f172a;font-weight:600}@media(max-width:1400px){.summary-grid{grid-template-columns:repeat(2,1fr)}}@media(max-width:1024px){.charts-section{grid-template-columns:1fr}}@media(max-width:768px){.page-header{flex-direction:column;align-items:flex-start;gap:16px}.header-actions{width:100%}.btn-download{flex:1}.filter-section{flex-direction:column}.filter-group{width:100%}.summary-grid{grid-template-columns:1fr}.summary-card{padding:20px}.card-content .value{font-size:24px}}@media(max-width:1024px){.payroll-summary-stats{grid-template-columns:repeat(2,1fr)!important}}@media(max-width:768px){.payroll-summary-page{padding:14px!important}.payroll-summary-header{flex-direction:column!important;gap:12px!important;align-items:flex-start!important}.payroll-summary-header-actions{width:100%!important;flex-direction:column!important;gap:10px!important}.payroll-summary-header-actions button{width:100%!important}.payroll-summary-stats{grid-template-columns:1fr!important;gap:12px!important}.payroll-summary-table-wrapper{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}.payroll-summary-table{min-width:700px!important}.payroll-summary-filters{flex-direction:column!important;gap:10px!important}.payroll-summary-filters select{width:100%!important}}.salary-comparison{margin-top:30px}.comparison-table{width:100%;border-collapse:collapse;margin-top:10px}.comparison-table th,.comparison-table td{padding:10px;border-bottom:1px solid #eee;text-align:left}.comparison-table th{background:#f6f6f6}.change.increase{color:#16a34a;font-weight:600}.change.decrease{color:#dc2626;font-weight:600}.change.neutral{color:#999}.salary-revision-page{padding:24px;max-width:1100px;margin:auto}.page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:20px}.page-header h2{font-size:22px;font-weight:600;color:#fff}.revision-card{background:#fff;border-radius:10px;padding:22px;margin-bottom:20px;border:1px solid #e5e7eb;box-shadow:0 2px 6px #0000000a}.revision-card h3{font-size:16px;margin-bottom:15px;font-weight:600;color:#333}.form-grid{display:grid;grid-template-columns:repeat(2,1fr);gap:18px}.form-field{display:flex;flex-direction:column}.form-field.full{grid-column:span 2}.form-field label{font-size:13px;color:#555;margin-bottom:6px}.form-field input,.form-field textarea{border:1px solid #d1d5db;border-radius:6px;padding:8px 10px;font-size:14px;outline:none}.form-field input:focus,.form-field textarea:focus{border-color:#6366f1}textarea{min-height:80px}.salary-table{width:100%;border-collapse:collapse;margin-top:10px}.salary-table th{background:#f8fafc;padding:10px;font-size:13px;text-align:left;border-bottom:1px solid #e5e7eb}.salary-table td{padding:10px;border-bottom:1px solid #f0f0f0}.salary-table input{width:120px;padding:6px 8px;border-radius:5px;border:1px solid #d1d5db}.salary-table input:focus{border-color:#6366f1}.summary-row{font-weight:600;background:#fafafa}.save-bar{display:flex;justify-content:flex-end;margin-top:20px}.btn{padding:8px 16px;border-radius:6px;border:none;cursor:pointer;font-size:14px}.btn.primary{background:#4f46e5;color:#fff}.btn.primary:hover{background:#4338ca}.btn.ghost{background:transparent;border:1px solid #d1d5db}.btn.ghost:hover{background:#f3f4f6}.salary-payment-summary{padding:24px;background:#f5f7fa;min-height:100vh}.summary-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;background:#fff;padding:24px;border-radius:12px;box-shadow:0 2px 8px #0000000f}.summary-header h2{margin:0;font-size:26px;color:#1a1a1a;font-weight:600}.summary-header p{margin:6px 0 0;color:#6b7280;font-size:14px}.month-input{padding:10px 16px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;transition:all .2s}.month-input:focus{outline:none;border-color:#3b82f6}.summary-stats{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-bottom:24px}.stat-card{background:#fff;padding:24px;border-radius:12px;box-shadow:0 2px 8px #0000000f;display:flex;align-items:center;gap:16px;transition:transform .2s,box-shadow .2s}.stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #0000001a}.stat-icon{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px;flex-shrink:0}.stat-card.blue .stat-icon{background:#dbeafe;color:#1e40af}.stat-card.green .stat-icon{background:#d1fae5;color:#065f46}.stat-card.success .stat-icon{background:#d4edda;color:#155724}.stat-card.warning .stat-icon{background:#fff3cd;color:#856404}.stat-content h4{margin:0 0 6px;font-size:13px;color:#6b7280;text-transform:uppercase;letter-spacing:.5px;font-weight:500}.stat-content p{margin:0;font-size:24px;font-weight:700;color:#1a1a1a}.filters-section{display:flex;justify-content:space-between;align-items:center;gap:12px;margin-bottom:20px;padding:20px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000000f;position:sticky;top:0;z-index:10}.filters-left{display:flex;gap:12px;flex:1;flex-wrap:wrap}.search-wrapper{flex:1;min-width:250px;position:relative}.search-input{width:100%;padding:10px 16px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;transition:all .2s}.search-input:focus{outline:none;border-color:#3b82f6}.filters-section select{padding:10px 16px;border:2px solid #e5e7eb;border-radius:8px;font-size:14px;background:#fff;cursor:pointer;transition:all .2s}.filters-section select:focus{outline:none;border-color:#3b82f6}.btn-reset{padding:10px 20px;background:#f3f4f6;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.btn-reset:hover{background:#e5e7eb}.btn-export{padding:10px 20px;background:#10b981;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.btn-export:hover{background:#059669}.table-wrapper{background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000000f;overflow:hidden}.table-container{overflow-x:auto;max-width:100%;-webkit-overflow-scrolling:touch}.payment-table{width:100%;border-collapse:collapse;font-size:14px;table-layout:auto;min-width:880px}.payment-table thead{background:linear-gradient(180deg,#f8fafc,#f1f5f9);position:sticky;top:0;z-index:5;box-shadow:0 1px #e2e8f0}.payment-table th{padding:14px 16px;text-align:left;font-weight:600;color:#475569;font-size:11px;text-transform:uppercase;letter-spacing:.06em;white-space:nowrap}.payment-table th.th-amount,.payment-table td.cell-amount{text-align:right}.payment-table th.th-status,.payment-table td.cell-status{text-align:center}.payment-table th.th-actions,.payment-table td.cell-actions{text-align:center;width:100px}.payment-table td{padding:14px 16px;border-bottom:1px solid #f1f5f9;color:#334155;vertical-align:middle}.payment-table tbody tr{transition:background-color .15s ease,box-shadow .15s ease}.payment-table tbody tr:hover{background:#f8fafc}.payment-table tbody tr:last-child td{border-bottom:none}.cell-employee .employee-info{display:flex;align-items:center;gap:12px}.employee-avatar{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,#3b82f6,#2563eb);color:#fff;font-size:14px;font-weight:600;display:flex;align-items:center;justify-content:center;flex-shrink:0}.employee-meta{display:flex;flex-direction:column;gap:2px;min-width:0}.payment-table .name{font-weight:600;color:#1e293b;font-size:14px;line-height:1.3}.code-cell{font-family:SF Mono,Monaco,Consolas,monospace;font-size:12px;color:#64748b}.cell-amount .amount-value{font-weight:700;color:#059669;font-size:15px;font-variant-numeric:tabular-nums}.account-info{display:flex;flex-direction:column;gap:2px}.account-cell{font-family:SF Mono,Monaco,Consolas,monospace;font-size:13px;color:#334155;letter-spacing:.02em}.ifsc-cell{font-family:SF Mono,Monaco,Consolas,monospace;font-size:11px;color:#94a3b8}.ref-cell{font-family:SF Mono,Monaco,Consolas,monospace;font-size:12px;color:#64748b}.status-badge{padding:6px 12px;border-radius:999px;font-size:11px;font-weight:600;text-transform:uppercase;letter-spacing:.04em;display:inline-block;white-space:nowrap}.status-badge.status-approved{background:#dcfce7;color:#166534}.status-badge.status-paid{background:#dbeafe;color:#1e40af}.status-badge.status-not-paid{background:#fef3c7;color:#b45309}.status-badge.approved{background:#dcfce7;color:#166534}.status-badge.paid{background:#dbeafe;color:#1e40af}.status-badge.not-paid{background:#fef3c7;color:#b45309}.cell-actions .actions{display:flex;gap:6px;justify-content:center;flex-wrap:wrap}.btn-action{width:36px;height:36px;padding:0;border:none;border-radius:8px;cursor:pointer;transition:background-color .2s,transform .15s;display:inline-flex;align-items:center;justify-content:center}.btn-action.view{background:#eff6ff;color:#2563eb}.btn-action.view:hover{background:#dbeafe;transform:scale(1.05)}.btn-action.paid{background:#dcfce7;color:#15803d}.btn-action.paid:hover{background:#bbf7d0;transform:scale(1.05)}.btn-action:focus-visible{outline:2px solid #3b82f6;outline-offset:2px}.skeleton-row td{padding:14px 16px;vertical-align:middle}.skeleton{height:14px;background:linear-gradient(90deg,#f1f5f9 25%,#e2e8f0,#f1f5f9 75%);background-size:200% 100%;animation:loading 1.4s ease-in-out infinite;border-radius:6px}.skeleton-name{max-width:140px}.skeleton-amount{max-width:90px;margin-left:auto}.skeleton-account{max-width:100px}.skeleton-date{max-width:90px}.skeleton-ref{max-width:100px}.skeleton-status{max-width:70px;margin:0 auto}.skeleton-actions{max-width:60px;margin:0 auto}@keyframes loading{0%{background-position:200% 0}to{background-position:-200% 0}}.no-data{text-align:center;padding:48px 24px;border-bottom:none}.no-data-content{display:flex;flex-direction:column;align-items:center;gap:8px}.no-data-icon{font-size:40px;opacity:.6;margin-bottom:4px}.no-data-content p{margin:0;font-size:15px;font-weight:500;color:#64748b}.no-data-hint{font-size:13px;color:#94a3b8}.pagination{display:flex;justify-content:center;align-items:center;gap:8px;padding:16px 20px;background:#fafafa;border-top:1px solid #f1f5f9}.pagination-btn{padding:8px 14px;border:1px solid #e2e8f0;background:#fff;border-radius:8px;cursor:pointer;font-size:13px;font-weight:500;transition:background-color .2s,border-color .2s,color .2s;color:#475569}.pagination-btn:hover:not(:disabled){background:#f8fafc;border-color:#cbd5e1;color:#1e293b}.pagination-btn:disabled{opacity:.5;cursor:not-allowed}.pagination-btn.active{background:#2563eb;border-color:#2563eb;color:#fff}.pagination-btn.active:hover{background:#1d4ed8;border-color:#1d4ed8;color:#fff}.page-numbers{display:flex;gap:4px;align-items:center}.page-num{min-width:36px}.page-ellipsis{color:#94a3b8;padding:0 4px;font-size:14px;-webkit-user-select:none;user-select:none}.modal-content{background:#fff;padding:32px;border-radius:16px;max-width:400px;width:90%;box-shadow:0 20px 25px -5px #0000001a;animation:slideUp .3s}@keyframes slideUp{0%{transform:translateY(20px);opacity:0}to{transform:translateY(0);opacity:1}}.modal-content h3{margin:0 0 12px;font-size:20px;color:#1a1a1a}.modal-content p{margin:0 0 24px;color:#6b7280;font-size:15px}.modal-actions{display:flex;gap:12px;justify-content:flex-end}.btn-cancel{padding:10px 24px;background:#f3f4f6;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.btn-cancel:hover{background:#e5e7eb}.btn-confirm{padding:10px 24px;background:#10b981;color:#fff;border:none;border-radius:8px;font-size:14px;font-weight:500;cursor:pointer;transition:all .2s}.btn-confirm:hover{background:#059669}@media(max-width:768px){.salary-payment-summary{padding:16px}.summary-header{flex-direction:column;gap:16px;align-items:flex-start}.summary-stats{grid-template-columns:1fr}.filters-section{flex-direction:column;align-items:stretch}.filters-left{flex-direction:column}.search-wrapper,.search-input{width:100%}.table-wrapper{border-radius:8px}.table-container{overflow-x:auto;-webkit-overflow-scrolling:touch}.payment-table{font-size:13px;min-width:800px}.payment-table th,.payment-table td{padding:12px 10px}.employee-avatar{width:32px;height:32px;font-size:12px}.btn-action{width:32px;height:32px}.stat-content p{font-size:20px}.pagination{flex-wrap:wrap;gap:6px;padding:12px 16px}.pagination-btn{padding:6px 12px;font-size:12px}}@media(max-width:768px){.salary-payment-page{padding:14px!important}.payment-header{flex-direction:column!important;gap:12px!important;align-items:flex-start!important}.payment-summary-stats{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}.payment-table-wrapper{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}.payment-summary-table{min-width:700px!important}.payment-filters{flex-direction:column!important;gap:10px!important;align-items:stretch!important}.payment-filters select,.payment-filters input,.payment-export-btn{width:100%!important}}@media(max-width:480px){.payment-summary-stats{grid-template-columns:1fr!important}}.rbc-btn{color:inherit;font:inherit;margin:0}button.rbc-btn{overflow:visible;text-transform:none;-webkit-appearance:button;-moz-appearance:button;appearance:button;cursor:pointer}button[disabled].rbc-btn{cursor:not-allowed}button.rbc-input::-moz-focus-inner{border:0;padding:0}.rbc-calendar{-webkit-box-sizing:border-box;box-sizing:border-box;height:100%;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-align:stretch;-ms-flex-align:stretch;align-items:stretch}.rbc-m-b-negative-3{margin-bottom:-3px}.rbc-h-full{height:100%}.rbc-calendar *,.rbc-calendar *:before,.rbc-calendar *:after{-webkit-box-sizing:inherit;box-sizing:inherit}.rbc-abs-full,.rbc-row-bg{overflow:hidden;position:absolute;inset:0}.rbc-ellipsis,.rbc-show-more,.rbc-row-segment .rbc-event-content,.rbc-event-label{display:block;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.rbc-rtl{direction:rtl}.rbc-off-range{color:#999}.rbc-off-range-bg{background:#e6e6e6}.rbc-header{overflow:hidden;-webkit-box-flex:1;-ms-flex:1 0 0%;flex:1 0 0%;text-overflow:ellipsis;white-space:nowrap;padding:0 3px;text-align:center;vertical-align:middle;font-weight:700;font-size:90%;min-height:0;border-bottom:1px solid #ddd}.rbc-header+.rbc-header{border-left:1px solid #ddd}.rbc-rtl .rbc-header+.rbc-header{border-left-width:0;border-right:1px solid #ddd}.rbc-header>a,.rbc-header>a:active,.rbc-header>a:visited{color:inherit;text-decoration:none}.rbc-button-link{color:inherit;background:none;margin:0;padding:0;border:none;cursor:pointer;-webkit-user-select:text;-moz-user-select:text;-ms-user-select:text;user-select:text}.rbc-row-content{position:relative;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none;z-index:4}.rbc-row-content-scrollable{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;height:100%}.rbc-row-content-scrollable .rbc-row-content-scroll-container{height:100%;overflow-y:scroll;-ms-overflow-style:none;scrollbar-width:none}.rbc-row-content-scrollable .rbc-row-content-scroll-container::-webkit-scrollbar{display:none}.rbc-today{background-color:#eaf6ff}.rbc-toolbar{display:-webkit-box;display:-ms-flexbox;display:flex;-ms-flex-wrap:wrap;flex-wrap:wrap;-webkit-box-pack:center;-ms-flex-pack:center;justify-content:center;-webkit-box-align:center;-ms-flex-align:center;align-items:center;margin-bottom:10px;font-size:16px}.rbc-toolbar .rbc-toolbar-label{-webkit-box-flex:1;-ms-flex-positive:1;flex-grow:1;padding:0 10px;text-align:center}.rbc-toolbar button{color:#373a3c;display:inline-block;margin:0;text-align:center;vertical-align:middle;background:none;background-image:none;border:1px solid #ccc;padding:.375rem 1rem;border-radius:4px;line-height:normal;white-space:nowrap}.rbc-toolbar button:active,.rbc-toolbar button.rbc-active{background-image:none;-webkit-box-shadow:inset 0 3px 5px rgba(0,0,0,.125);box-shadow:inset 0 3px 5px #00000020;background-color:#e6e6e6;border-color:#adadad}.rbc-toolbar button:active:hover,.rbc-toolbar button:active:focus,.rbc-toolbar button.rbc-active:hover,.rbc-toolbar button.rbc-active:focus{color:#373a3c;background-color:#d4d4d4;border-color:#8c8c8c}.rbc-toolbar button:focus{color:#373a3c;background-color:#e6e6e6;border-color:#adadad}.rbc-toolbar button:hover{color:#373a3c;cursor:pointer;background-color:#e6e6e6;border-color:#adadad}.rbc-btn-group{display:inline-block;white-space:nowrap}.rbc-btn-group>button:first-child:not(:last-child){border-top-right-radius:0;border-bottom-right-radius:0}.rbc-btn-group>button:last-child:not(:first-child){border-top-left-radius:0;border-bottom-left-radius:0}.rbc-rtl .rbc-btn-group>button:first-child:not(:last-child){border-radius:0 4px 4px 0}.rbc-rtl .rbc-btn-group>button:last-child:not(:first-child){border-radius:4px 0 0 4px}.rbc-btn-group>button:not(:first-child):not(:last-child){border-radius:0}.rbc-btn-group button+button{margin-left:-1px}.rbc-rtl .rbc-btn-group button+button{margin-left:0;margin-right:-1px}.rbc-btn-group+.rbc-btn-group,.rbc-btn-group+button{margin-left:10px}@media(max-width:767px){.rbc-toolbar{-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}}.rbc-event,.rbc-day-slot .rbc-background-event{border:none;-webkit-box-sizing:border-box;box-sizing:border-box;-webkit-box-shadow:none;box-shadow:none;margin:0;padding:2px 5px;background-color:#3174ad;border-radius:5px;color:#fff;cursor:pointer;width:100%;text-align:left}.rbc-slot-selecting .rbc-event,.rbc-slot-selecting .rbc-day-slot .rbc-background-event,.rbc-day-slot .rbc-slot-selecting .rbc-background-event{cursor:inherit;pointer-events:none}.rbc-event.rbc-selected,.rbc-day-slot .rbc-selected.rbc-background-event{background-color:#265985}.rbc-event:focus,.rbc-day-slot .rbc-background-event:focus{outline:5px auto #3b99fc}.rbc-event-label{font-size:80%}.rbc-event-overlaps{-webkit-box-shadow:-1px 1px 5px 0px rgba(51,51,51,.5);box-shadow:-1px 1px 5px #33333380}.rbc-event-continues-prior{border-top-left-radius:0;border-bottom-left-radius:0}.rbc-event-continues-after{border-top-right-radius:0;border-bottom-right-radius:0}.rbc-event-continues-earlier{border-top-left-radius:0;border-top-right-radius:0}.rbc-event-continues-later{border-bottom-left-radius:0;border-bottom-right-radius:0}.rbc-row{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.rbc-row-segment{padding:0 1px 1px}.rbc-selected-cell{background-color:#0000001a}.rbc-show-more{background-color:#ffffff4d;z-index:4;font-weight:700;font-size:85%;height:auto;line-height:normal;color:#3174ad}.rbc-show-more:hover,.rbc-show-more:focus{color:#265985}.rbc-month-view{position:relative;border:1px solid #ddd;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;width:100%;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none;height:100%}.rbc-month-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.rbc-month-row{display:-webkit-box;display:-ms-flexbox;display:flex;position:relative;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;-ms-flex-preferred-size:0px;flex-basis:0px;overflow:hidden;height:100%}.rbc-month-row+.rbc-month-row{border-top:1px solid #ddd}.rbc-date-cell{-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;min-width:0;padding-right:5px;text-align:right}.rbc-date-cell.rbc-now{font-weight:700}.rbc-date-cell>a,.rbc-date-cell>a:active,.rbc-date-cell>a:visited{color:inherit;text-decoration:none}.rbc-row-bg{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row;-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;overflow:hidden;right:1px}.rbc-day-bg{-webkit-box-flex:1;-ms-flex:1 0 0%;flex:1 0 0%}.rbc-day-bg+.rbc-day-bg{border-left:1px solid #ddd}.rbc-rtl .rbc-day-bg+.rbc-day-bg{border-left-width:0;border-right:1px solid #ddd}.rbc-overlay{position:absolute;z-index:5;border:1px solid #e5e5e5;background-color:#fff;-webkit-box-shadow:0 5px 15px rgba(0,0,0,.25);box-shadow:0 5px 15px #00000040;padding:10px}.rbc-overlay>*+*{margin-top:1px}.rbc-overlay-header{border-bottom:1px solid #e5e5e5;margin:-10px -10px 5px;padding:2px 10px}.rbc-agenda-view{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;overflow:auto}.rbc-agenda-view table.rbc-agenda-table{width:100%;border:1px solid #ddd;border-spacing:0;border-collapse:collapse}.rbc-agenda-view table.rbc-agenda-table tbody>tr>td{padding:5px 10px;vertical-align:top}.rbc-agenda-view table.rbc-agenda-table .rbc-agenda-time-cell{padding-left:15px;padding-right:15px;text-transform:lowercase}.rbc-agenda-view table.rbc-agenda-table tbody>tr>td+td{border-left:1px solid #ddd}.rbc-rtl .rbc-agenda-view table.rbc-agenda-table tbody>tr>td+td{border-left-width:0;border-right:1px solid #ddd}.rbc-agenda-view table.rbc-agenda-table tbody>tr+tr{border-top:1px solid #ddd}.rbc-agenda-view table.rbc-agenda-table thead>tr>th{padding:3px 5px;text-align:left;border-bottom:1px solid #ddd}.rbc-rtl .rbc-agenda-view table.rbc-agenda-table thead>tr>th{text-align:right}.rbc-agenda-time-cell{text-transform:lowercase}.rbc-agenda-time-cell .rbc-continues-after:after{content:" »"}.rbc-agenda-time-cell .rbc-continues-prior:before{content:"« "}.rbc-agenda-date-cell,.rbc-agenda-time-cell{white-space:nowrap}.rbc-agenda-event-cell{width:100%}.rbc-time-column{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;min-height:100%}.rbc-time-column .rbc-timeslot-group{-webkit-box-flex:1;-ms-flex:1;flex:1}.rbc-timeslot-group{border-bottom:1px solid #ddd;min-height:40px;display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column nowrap;flex-flow:column nowrap}.rbc-time-gutter,.rbc-header-gutter{-webkit-box-flex:0;-ms-flex:none;flex:none}.rbc-label{padding:0 5px}.rbc-day-slot{position:relative}.rbc-day-slot .rbc-events-container{inset:0;position:absolute;margin-right:10px}.rbc-day-slot .rbc-events-container.rbc-rtl{left:10px;right:0}.rbc-day-slot .rbc-event,.rbc-day-slot .rbc-background-event{border:1px solid #265985;display:-webkit-box;display:-ms-flexbox;display:flex;max-height:100%;min-height:20px;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-flow:column wrap;flex-flow:column wrap;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;overflow:hidden;position:absolute}.rbc-day-slot .rbc-background-event{opacity:.75}.rbc-day-slot .rbc-event-label{-webkit-box-flex:0;-ms-flex:none;flex:none;padding-right:5px;width:auto}.rbc-day-slot .rbc-event-content{width:100%;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;word-wrap:break-word;line-height:1;height:100%;min-height:1em}.rbc-day-slot .rbc-time-slot{border-top:1px solid #f7f7f7}.rbc-time-view-resources .rbc-time-gutter,.rbc-time-view-resources .rbc-time-header-gutter{position:sticky;left:0;background-color:#fff;border-right:1px solid #ddd;z-index:10;margin-right:-1px}.rbc-time-view-resources .rbc-time-header{overflow:hidden}.rbc-time-view-resources .rbc-time-header-content{min-width:auto;-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0;-ms-flex-preferred-size:0px;flex-basis:0px}.rbc-time-view-resources .rbc-time-header-cell-single-day{display:none}.rbc-time-view-resources .rbc-day-slot{min-width:140px}.rbc-time-view-resources .rbc-header,.rbc-time-view-resources .rbc-day-bg{width:140px;-webkit-box-flex:1;-ms-flex:1 1 0px;flex:1 1 0;-ms-flex-preferred-size:0 px;flex-basis:0 px}.rbc-time-header-content+.rbc-time-header-content{margin-left:-1px}.rbc-time-slot{-webkit-box-flex:1;-ms-flex:1 0 0px;flex:1 0 0}.rbc-time-slot.rbc-now{font-weight:700}.rbc-day-header{text-align:center}.rbc-slot-selection{z-index:10;position:absolute;background-color:#00000080;color:#fff;font-size:75%;width:100%;padding:3px}.rbc-slot-selecting{cursor:move}.rbc-time-view{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;-webkit-box-flex:1;-ms-flex:1;flex:1;width:100%;border:1px solid #ddd;min-height:0}.rbc-time-view .rbc-time-gutter{white-space:nowrap;text-align:right}.rbc-time-view .rbc-allday-cell{-webkit-box-sizing:content-box;box-sizing:content-box;width:100%;height:100%;position:relative}.rbc-time-view .rbc-allday-cell+.rbc-allday-cell{border-left:1px solid #ddd}.rbc-time-view .rbc-allday-events{position:relative;z-index:4}.rbc-time-view .rbc-row{-webkit-box-sizing:border-box;box-sizing:border-box;min-height:20px}.rbc-time-header{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:0;-ms-flex:0 0 auto;flex:0 0 auto;-webkit-box-orient:horizontal;-webkit-box-direction:normal;-ms-flex-direction:row;flex-direction:row}.rbc-time-header.rbc-overflowing{border-right:1px solid #ddd}.rbc-rtl .rbc-time-header.rbc-overflowing{border-right-width:0;border-left:1px solid #ddd}.rbc-time-header>.rbc-row:first-child{border-bottom:1px solid #ddd}.rbc-time-header>.rbc-row.rbc-row-resource{border-bottom:1px solid #ddd}.rbc-time-header-cell-single-day{display:none}.rbc-time-header-content{-webkit-box-flex:1;-ms-flex:1;flex:1;display:-webkit-box;display:-ms-flexbox;display:flex;min-width:0;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column;border-left:1px solid #ddd}.rbc-rtl .rbc-time-header-content{border-left-width:0;border-right:1px solid #ddd}.rbc-time-header-content>.rbc-row.rbc-row-resource{border-bottom:1px solid #ddd;-ms-flex-negative:0;flex-shrink:0}.rbc-time-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-flex:1;-ms-flex:1 0 0%;flex:1 0 0%;-webkit-box-align:start;-ms-flex-align:start;align-items:flex-start;width:100%;border-top:2px solid #ddd;overflow-y:auto;position:relative}.rbc-time-content>.rbc-time-gutter{-webkit-box-flex:0;-ms-flex:none;flex:none}.rbc-time-content>*+*>*{border-left:1px solid #ddd}.rbc-rtl .rbc-time-content>*+*>*{border-left-width:0;border-right:1px solid #ddd}.rbc-time-content>.rbc-day-slot{width:100%;-moz-user-select:none;-ms-user-select:none;user-select:none;-webkit-user-select:none}.rbc-current-time-indicator{position:absolute;z-index:3;left:0;right:0;height:1px;background-color:#74ad31;pointer-events:none}.rbc-resource-grouping.rbc-time-header-content{display:-webkit-box;display:-ms-flexbox;display:flex;-webkit-box-orient:vertical;-webkit-box-direction:normal;-ms-flex-direction:column;flex-direction:column}.rbc-resource-grouping .rbc-row .rbc-header{width:141px}.leave-calendar-container{padding:24px;background:#f8fafc;min-height:100vh}.calendar-page-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px;padding:28px 32px;background:linear-gradient(135deg,#0f172a,#1e40af);border-radius:16px;box-shadow:0 10px 40px #0f172a26}.header-left h1{font-size:28px;font-weight:700;color:#fff;margin-bottom:6px}.header-left p{font-size:14px;color:#ffffffd9}.header-right{display:flex;gap:12px;align-items:center}.today-btn{padding:10px 20px;background:#ffffff26;border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:10px;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s;display:flex;align-items:center;gap:6px}.today-btn:hover{background:#ffffff40;transform:translateY(-2px)}.date-picker{padding:10px 16px;background:#ffffff26;border:1px solid rgba(255,255,255,.2);color:#fff;border-radius:10px;font-size:14px;cursor:pointer;transition:all .2s}.date-picker:hover{background:#ffffff40}.date-picker::-webkit-calendar-picker-indicator{filter:invert(1)}.calendar-controls{display:flex;justify-content:space-between;align-items:flex-end;margin-bottom:20px;gap:20px}.filters-section{display:flex;gap:16px;flex:1}.filter-group{display:flex;flex-direction:column;gap:6px;min-width:200px}.filter-group label{font-size:13px;font-weight:600;color:#475569}.filter-group select{padding:10px 14px;border:1px solid #e2e8f0;border-radius:10px;font-size:14px;background:#fff;cursor:pointer;transition:all .2s}.filter-group select:hover{border-color:#2563eb}.filter-group select:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}.react-select-container{width:100%}.react-select__control{border:1px solid #e2e8f0!important;border-radius:10px!important;padding:2px!important;box-shadow:none!important}.react-select__control:hover{border-color:#2563eb!important}.react-select__control--is-focused{border-color:#2563eb!important;box-shadow:0 0 0 3px #2563eb1a!important}.view-controls{display:flex;align-items:flex-end}.view-tabs{display:flex;background:#fff;border-radius:10px;padding:4px;box-shadow:0 2px 8px #0000000f}.view-tabs button{padding:8px 20px;border:none;background:transparent;color:#64748b;font-size:14px;font-weight:600;border-radius:8px;cursor:pointer;transition:all .2s}.view-tabs button:hover{color:#2563eb;background:#f1f5f9}.view-tabs button.active{background:#2563eb;color:#fff;box-shadow:0 2px 8px #2563eb4d}.calendar-legend{display:flex;gap:24px;padding:16px 20px;background:#fff;border-radius:12px;margin-bottom:20px;box-shadow:0 2px 8px #0000000a}.legend-item{display:flex;align-items:center;gap:8px;font-size:13px;font-weight:500;color:#475569}.legend-dot{width:12px;height:12px;border-radius:50%}.calendar-wrapper{background:#fff;border-radius:16px;padding:24px;box-shadow:0 4px 20px #0000000f}.rbc-toolbar{padding:16px 0;margin-bottom:20px;border-bottom:2px solid #f1f5f9}.rbc-toolbar button{padding:8px 16px;border:1px solid #e2e8f0;background:#fff;color:#475569;border-radius:8px;font-weight:600;transition:all .2s}.rbc-toolbar button:hover{background:#f8fafc;border-color:#2563eb;color:#2563eb}.rbc-toolbar button.rbc-active{background:#2563eb;color:#fff;border-color:#2563eb}.rbc-header{padding:12px 8px;font-weight:600;font-size:13px;color:#475569;text-transform:uppercase;letter-spacing:.5px;border-bottom:2px solid #f1f5f9}.rbc-day-bg{transition:background .2s}.rbc-day-bg:hover{background:#f8fafc;cursor:pointer}.rbc-today{background:#eff6ff!important}.rbc-off-range-bg{background:#fafafa}.rbc-event{border-radius:6px;padding:4px 8px;font-size:12px;font-weight:500;border:none!important;box-shadow:0 2px 4px #0000001a}.rbc-event:hover{opacity:.9;transform:translateY(-1px);box-shadow:0 4px 8px #00000026}.rbc-agenda-view{border:none}.rbc-agenda-table{border:1px solid #f1f5f9;border-radius:8px;overflow:hidden}.rbc-agenda-date-cell,.rbc-agenda-time-cell{padding:12px;font-weight:600;color:#475569}.rbc-agenda-event-cell{padding:12px}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s}.modal-content{background:#fff;border-radius:16px;width:90%;max-width:500px;box-shadow:0 20px 60px #0000004d;animation:slideUp .3s}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:24px 28px;border-bottom:1px solid #f1f5f9}.modal-header h3{font-size:20px;font-weight:700;color:#0f172a}.close-btn{width:32px;height:32px;border:none;background:#f1f5f9;border-radius:8px;font-size:20px;color:#64748b;cursor:pointer;transition:all .2s}.close-btn:hover{background:#e2e8f0;color:#0f172a}.modal-body{padding:28px}.employee-avatar-large{width:80px;height:80px;border-radius:50%;object-fit:cover;margin-bottom:20px;border:4px solid #f1f5f9}.detail-row{display:flex;justify-content:space-between;padding:12px 0;border-bottom:1px solid #f1f5f9}.detail-row:last-child{border-bottom:none}.detail-row .label{font-weight:600;color:#64748b;font-size:14px}.detail-row .value{font-weight:500;color:#0f172a;font-size:14px}.side-panel{position:fixed;right:0;top:0;width:380px;height:100vh;background:#fff;box-shadow:-4px 0 20px #0000001a;z-index:999;overflow-y:auto;animation:slideInRight .3s}.panel-header{display:flex;justify-content:space-between;align-items:center;padding:24px;border-bottom:2px solid #f1f5f9;position:sticky;top:0;background:#fff;z-index:10}.panel-header h3{font-size:18px;font-weight:700;color:#0f172a}.panel-body{padding:24px}.empty-state{text-align:center;padding:40px 20px;color:#94a3b8}.dept-section h4{font-size:14px;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px}.employee-card{display:flex;align-items:center;gap:12px;padding:12px;background:#f8fafc;border-radius:10px;margin-bottom:8px;transition:all .2s}.employee-card:hover{background:#f1f5f9;transform:translate(4px)}.employee-card img{width:40px;height:40px;border-radius:50%;object-fit:cover}.emp-info{display:flex;flex-direction:column;gap:4px}.emp-name{font-weight:600;color:#0f172a;font-size:14px}.emp-leave-type{font-size:12px;color:#64748b}@keyframes slideInRight{0%{transform:translate(100%)}to{transform:translate(0)}}@media(max-width:1200px){.filters-section{flex-wrap:wrap}.filter-group{min-width:180px}}@media(max-width:768px){.calendar-page-header{flex-direction:column;align-items:flex-start;gap:16px}.calendar-controls{flex-direction:column;align-items:stretch}.view-controls{width:100%}.view-tabs{width:100%;justify-content:space-between}.side-panel{width:100%}}.calendar-stats{display:grid;grid-template-columns:repeat(3,1fr);gap:16px;margin-bottom:20px}.stat-card{display:flex;align-items:center;gap:16px;padding:20px;background:#fff;border-radius:12px;box-shadow:0 2px 8px #0000000a;transition:all .2s}.stat-card:hover{transform:translateY(-2px);box-shadow:0 4px 12px #00000014}.stat-icon{width:56px;height:56px;border-radius:12px;display:flex;align-items:center;justify-content:center;font-size:24px}.stat-info{display:flex;flex-direction:column;gap:4px}.stat-label{font-size:13px;color:#64748b;font-weight:500}.stat-value{font-size:24px;font-weight:700;color:#0f172a}.calendar-legend{display:flex;align-items:center;gap:20px;padding:16px 20px;background:#fff;border-radius:12px;margin-bottom:20px;box-shadow:0 2px 8px #0000000a;flex-wrap:wrap}.legend-title{font-size:13px;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.5px}.legend-divider{width:1px;height:20px;background:#e2e8f0}.legend-box{width:20px;height:20px;border-radius:4px;border:1px solid #e2e8f0}.custom-date-cell{position:relative;height:100%}.leave-count-badge{position:absolute;bottom:4px;right:4px;padding:2px 6px;background:#000000b3;color:#fff;font-size:10px;font-weight:600;border-radius:4px;white-space:nowrap;pointer-events:none}.rbc-day-bg[style*=fee2e2]{border:2px solid #fca5a5!important}.rbc-day-bg[style*=fed7aa]{border:2px solid #fb923c!important}.rbc-day-bg[style*=fef3c7]{border:2px solid #fbbf24!important}.rbc-day-bg[style*=dbeafe]{border:2px solid #93c5fd!important}.calendar-event-simple{display:flex;align-items:center;gap:6px;padding:2px 6px;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.event-dot{width:6px;height:6px;border-radius:50%;background:currentColor;flex-shrink:0}.event-name{font-size:11px;font-weight:600;overflow:hidden;text-overflow:ellipsis}.rbc-month-view .rbc-row-content{max-height:120px;overflow:hidden}.rbc-show-more{background:#f1f5f9;color:#2563eb;font-weight:600;font-size:11px;padding:4px 8px;border-radius:4px;margin-top:4px;cursor:pointer;transition:all .2s}.rbc-show-more:hover{background:#e2e8f0;transform:translateY(-1px)}.panel-body{padding:20px;max-height:calc(100vh - 80px);overflow-y:auto}.panel-body::-webkit-scrollbar{width:6px}.panel-body::-webkit-scrollbar-track{background:#f1f5f9}.panel-body::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.panel-body::-webkit-scrollbar-thumb:hover{background:#94a3b8}.dept-section{margin-bottom:24px}.dept-section h4{display:flex;align-items:center;justify-content:space-between;font-size:13px;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.5px;margin-bottom:12px;padding-bottom:8px;border-bottom:2px solid #f1f5f9}.dept-count{background:#f1f5f9;color:#64748b;padding:2px 8px;border-radius:12px;font-size:11px;font-weight:600}.employee-card{display:flex;align-items:center;gap:12px;padding:10px;background:#f8fafc;border-radius:8px;margin-bottom:6px;transition:all .2s;cursor:pointer}.employee-card:hover{background:#e2e8f0;transform:translate(4px)}@media(max-width:1024px){.calendar-stats{grid-template-columns:repeat(2,1fr)}}@media(max-width:768px){.calendar-stats{grid-template-columns:1fr}.leave-count-badge{font-size:9px;padding:1px 4px}}.calendar-summary-event{background:#2563eb;color:#fff;padding:4px 8px;border-radius:6px;font-size:12px;font-weight:500;text-align:center}.selected-employee-details-card{background:#fff;border-radius:16px;padding:24px;margin-bottom:20px;box-shadow:0 10px 30px #0f172a0f;border:1px solid #e2e8f0;animation:fadeIn .3s ease}.emp-details-header{display:flex;align-items:center;gap:16px;border-bottom:1px solid #f1f5f9;padding-bottom:16px;margin-bottom:20px;flex-wrap:wrap}.emp-avatar-circle{width:56px;height:56px;border-radius:50%;background:linear-gradient(135deg,#3b82f6,#1d4ed8);color:#fff;display:flex;align-items:center;justify-content:center;font-size:20px;font-weight:700;box-shadow:0 4px 10px #2563eb33}.emp-details-header h3{font-size:18px;font-weight:700;color:#0f172a;margin:0}.emp-subtitle{font-size:13px;color:#64748b;margin:4px 0 0}.emp-total-leaves-badge{margin-left:auto;background:#eff6ff;border:1px solid #bfdbfe;color:#1e40af;padding:8px 16px;border-radius:10px;font-size:14px;font-weight:500}.emp-total-leaves-badge strong{font-size:18px;font-weight:700;color:#1d4ed8;margin-right:4px}.emp-leaves-list h4{font-size:14px;font-weight:700;color:#475569;text-transform:uppercase;letter-spacing:.5px;margin:0 0 16px}.no-leaves-msg{color:#64748b;font-size:14px;text-align:center;padding:20px;background:#f8fafc;border-radius:10px;margin:0}.leaves-scroll-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:12px;max-height:200px;overflow-y:auto;padding-right:6px}.leaves-scroll-grid::-webkit-scrollbar{width:6px}.leaves-scroll-grid::-webkit-scrollbar-track{background:#f1f5f9}.leaves-scroll-grid::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:3px}.leaves-scroll-grid::-webkit-scrollbar-thumb:hover{background:#94a3b8}.individual-leave-item{display:flex;align-items:center;justify-content:space-between;padding:14px 16px;background:#f8fafc;border-radius:10px;border:1px solid #e2e8f0;transition:all .2s}.individual-leave-item:hover{background:#f1f5f9;transform:translateY(-1px);border-color:#cbd5e1}.leave-badge-type{display:flex;flex-direction:column;gap:2px;padding-left:10px}.leave-badge-type strong{font-size:14px;color:#0f172a}.leave-badge-type span{font-size:11px;color:#64748b;text-transform:uppercase;font-weight:600;letter-spacing:.3px}.leave-date-range{font-size:13px;color:#334155;font-weight:500}.leave-duration{font-size:12px;color:#64748b;font-weight:600;background:#f1f5f9;padding:4px 8px;border-radius:6px}@media(max-width:1024px){.calendar-grid{grid-template-columns:repeat(4,1fr)!important}.calendar-header{flex-wrap:wrap!important;gap:12px!important}}@media(max-width:768px){.calendar-page{padding:14px!important}.calendar-header{flex-direction:column!important;gap:12px!important;align-items:flex-start!important}.calendar-nav{width:100%!important;justify-content:space-between!important}.calendar-day{padding:4px 2px!important;min-height:40px!important;font-size:10px!important}.calendar-day-number{font-size:11px!important}.calendar-legend{flex-wrap:wrap!important;gap:8px!important}.leave-day-panel{position:fixed!important;bottom:0!important;left:0!important;right:0!important;width:100%!important;max-height:65vh!important;border-radius:20px 20px 0 0!important;overflow-y:auto!important;z-index:1000!important}}@media(max-width:480px){.calendar-grid{grid-template-columns:repeat(7,1fr)!important}.calendar-day{min-height:32px!important;font-size:9px!important;padding:2px 1px!important}}.asset-management-page{width:100%;display:flex;flex-direction:column;gap:24px}.assets-grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:20px}.asset-card{background:#fff;border-radius:16px;padding:24px;box-shadow:0 12px 35px #0f172a14;transition:all .3s ease;text-align:center}.asset-card:hover{transform:translateY(-4px);box-shadow:0 16px 45px #0f172a1f}.asset-icon{font-size:48px;margin-bottom:16px}.asset-card h3{font-size:18px;font-weight:600;color:#0f172a;margin-bottom:8px}.asset-type{display:inline-block;background:#e0e7ff;color:#1e40af;padding:4px 12px;border-radius:999px;font-size:12px;font-weight:600;margin-bottom:12px}.asset-serial{font-size:13px;color:#64748b;margin-bottom:4px}.asset-date{font-size:13px;color:#64748b;margin-bottom:16px}.delete-btn{background:#ef4444;color:#fff;padding:8px 16px;border-radius:8px;border:none;font-size:13px;font-weight:500;cursor:pointer;transition:all .2s ease}.delete-btn:hover{background:#dc2626}.add-asset-btn{background:#2563eb;color:#fff;padding:10px 20px;border-radius:10px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.add-asset-btn:hover{background:#1d4ed8;transform:translateY(-1px)}.modal-overlay{position:fixed;inset:0;background:#0f172a80;display:flex;align-items:center;justify-content:center;z-index:1000;animation:fadeIn .2s ease}.modal-content{background:#fff;width:500px;max-width:90%;border-radius:16px;padding:28px;animation:slideUp .3s ease}.modal-header{display:flex;justify-content:space-between;align-items:center;margin-bottom:24px}.modal-header h3{font-size:20px;font-weight:600;color:#0f172a}.modal-close{background:none;border:none;font-size:28px;color:#64748b;cursor:pointer;line-height:1}.modal-close:hover{color:#0f172a}.form-group label{display:block;font-size:14px;font-weight:500;color:#0f172a;margin-bottom:8px}.form-group input,.form-group select{width:100%;padding:10px 14px;border:1px solid #e2e8f0;border-radius:8px;font-size:14px;transition:all .2s ease}.form-group input:focus,.form-group select:focus{outline:none;border-color:#2563eb;box-shadow:0 0 0 3px #2563eb1a}.submit-btn{width:100%;background:#2563eb;color:#fff;padding:12px;border-radius:8px;border:none;font-size:14px;font-weight:600;cursor:pointer;transition:all .2s ease}.submit-btn:hover{background:#1d4ed8}.submit-btn:disabled{background:#94a3b8;cursor:not-allowed}.no-data,.loading-text{text-align:center;color:#64748b;padding:40px;font-size:14px;grid-column:1 / -1}@keyframes fadeIn{0%{opacity:0}to{opacity:1}}@keyframes slideUp{0%{opacity:0;transform:translateY(20px)}to{opacity:1;transform:translateY(0)}}@media(max-width:768px){.assets-grid{grid-template-columns:1fr}}.daybook-dashboard,.transactions-page,.add-transaction-page,.vendors-page,.categories-page,.reports-page{padding:20px}.page-header{background:linear-gradient(135deg,#0f172a,#1e3a8a,#2563eb);background-size:200% 200%;animation:gradientMove 8s ease infinite;color:#fff;padding:28px 34px;border-radius:22px;display:flex;justify-content:space-between;align-items:center;margin-bottom:32px;box-shadow:0 25px 60px #2563eb59}@keyframes gradientMove{0%{background-position:0% 50%}50%{background-position:100% 50%}to{background-position:0% 50%}}.page-header h1{font-size:24px;color:#fff;margin:0;font-weight:600}.header-actions{display:flex;gap:10px}.date-filter{display:flex;gap:10px;align-items:center}.date-filter input{padding:8px 12px;border:1px solid #ddd;border-radius:4px}.stats-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px;margin-bottom:30px}.stat-card{background:#fff;padding:25px;border-radius:12px;box-shadow:0 2px 8px #0000001a;display:flex;align-items:center;gap:20px;cursor:pointer;transition:all .3s}.stat-card:hover{transform:translateY(-5px);box-shadow:0 4px 12px #00000026}.stat-icon{font-size:48px}.stat-info h3{font-size:32px;margin:0;color:#2c3e50;font-weight:700}.stat-info p{margin:5px 0 0;color:#666;font-size:14px}.summary-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:30px}.summary-card{background:#fff;padding:25px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.summary-card h3{font-size:14px;color:#666;margin-bottom:10px;text-transform:uppercase}.summary-card .amount{font-size:32px;font-weight:700;margin:0}.summary-card.credit .amount{color:#28a745}.summary-card.debit .amount{color:#dc3545}.summary-card .subtitle{font-size:12px;color:#999;margin:5px 0}.summary-card.balance .amount{color:#007bff}.transactions-table,.vendors-table,.categories-table,.report-results table{width:100%;background:#fff;border-radius:8px;overflow:hidden;box-shadow:0 2px 4px #0000001a}.transactions-table thead,.vendors-table thead,.categories-table thead,.report-results table thead{background:#f8f9fa}.transactions-table th,.transactions-table td,.vendors-table th,.vendors-table td,.categories-table th,.categories-table td,.report-results table th,.report-results table td{padding:12px 15px;text-align:left;border-bottom:1px solid #eee}.transactions-table td.debit-amount{color:#dc3545;font-weight:600}.transactions-table td.credit-amount{color:#28a745;font-weight:600}.filters{display:flex;gap:15px;margin-bottom:20px;flex-wrap:wrap}.filters input,.filters select{padding:10px 15px;border:1px solid #ddd;border-radius:4px;font-size:14px}.transaction-form{background:#fff;padding:30px;border-radius:8px;box-shadow:0 2px 4px #0000001a;max-width:800px}.form-group label{display:block;margin-bottom:8px;font-weight:500;color:#333}.form-group input,.form-group select,.form-group textarea{width:100%;padding:10px 15px;border:1px solid #ddd;border-radius:4px;font-size:14px}.form-group textarea{resize:vertical}.form-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:20px}.radio-group{display:flex;gap:20px}.radio-group label{display:flex;align-items:center;gap:8px;cursor:pointer}.form-actions{display:flex;gap:15px;margin-top:30px}.transaction-details{max-width:600px}.details-grid{display:grid;grid-template-columns:1fr 1fr;gap:20px;margin:20px 0}.detail-item{display:flex;flex-direction:column;gap:5px}.detail-item.full-width{grid-column:1 / -1}.detail-item label{font-weight:600;color:#666;font-size:12px;text-transform:uppercase}.detail-item span{color:#333;font-size:16px}.amount-large{font-size:24px!important;font-weight:700;color:#007bff}.modal-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px;padding-top:20px;border-top:1px solid #eee}.btn-view{background:#17a2b8;color:#fff;padding:6px 12px;margin-right:5px}.btn-view:hover{background:#138496}.btn-primary,.btn-secondary,.btn-edit,.btn-delete{padding:10px 20px;border:none;border-radius:4px;cursor:pointer;font-size:14px;font-weight:500;transition:all .3s}.btn-primary{background:#007bff;color:#fff}.btn-primary:hover{background:#0056b3}.btn-secondary{background:#6c757d;color:#fff}.btn-secondary:hover{background:#545b62}.btn-edit{background:#ffc107;color:#000;padding:6px 12px;margin-right:5px}.btn-edit:hover{background:#e0a800}.btn-delete{background:#dc3545;color:#fff;padding:6px 12px}.btn-delete:hover{background:#c82333}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;justify-content:center;align-items:center;z-index:1000}.modal-content{background:#fff;padding:30px;border-radius:8px;max-width:600px;width:90%;max-height:90vh;overflow-y:auto}.modal-content h2{margin-top:0;margin-bottom:20px}.transaction-type-label{display:flex;align-items:center;gap:10px;padding:12px 20px;border:2px solid #ddd;border-radius:8px;cursor:pointer;transition:all .3s}.transaction-type-label:hover{border-color:#007bff;background:#f8f9fa}.transaction-type-label input[type=radio]:checked+span{font-weight:700}.debit-label{color:#dc3545}.credit-label{color:#28a745}.form-hint{display:block;margin-top:5px;font-size:12px;color:#666;font-style:italic}.badge{padding:4px 12px;border-radius:12px;font-size:12px;font-weight:600;text-transform:uppercase}.badge.debit{background:#ffe5e5;color:#dc3545}.badge.credit{background:#e5ffe5;color:#28a745}.badge.expense{background:#ffe5e5;color:#dc3545}.badge.income{background:#e5ffe5;color:#28a745}.report-controls{display:flex;gap:15px;margin-bottom:30px;flex-wrap:wrap;background:#fff;padding:20px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.report-results{background:#fff;padding:30px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.report-results h2,.report-results h3{margin-top:0;margin-bottom:20px;color:#333}.loading{text-align:center;padding:40px;font-size:18px;color:#666}.recent-transactions{background:#fff;padding:25px;border-radius:8px;box-shadow:0 2px 4px #0000001a}.recent-transactions h2{margin-top:0;margin-bottom:20px;color:#333}@media(max-width:768px){.page-header{flex-direction:column;align-items:flex-start;gap:15px}.summary-cards{grid-template-columns:1fr}.filters{flex-direction:column}.filters input,.filters select{width:100%}.form-row{grid-template-columns:1fr}.report-controls{flex-direction:column}}@media(max-width:1024px){.daybook-stats-grid{grid-template-columns:repeat(2,1fr)!important}}@media(max-width:768px){.daybook-page{padding:14px!important}.daybook-header{flex-direction:column!important;gap:12px!important;align-items:flex-start!important}.daybook-header-actions{width:100%!important;flex-direction:column!important;gap:10px!important}.daybook-header-actions button{width:100%!important}.daybook-filters{flex-direction:column!important;gap:10px!important;padding:12px!important}.daybook-filters input,.daybook-filters select{width:100%!important}.daybook-stats-grid{grid-template-columns:1fr!important;gap:12px!important}.daybook-table-wrapper{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}.daybook-table{min-width:650px!important}.daybook-tabs{overflow-x:auto!important;white-space:nowrap!important;-webkit-overflow-scrolling:touch!important}}@media(max-width:480px){.daybook-stats-grid{grid-template-columns:1fr!important}}.separation-page{padding:20px;max-width:1200px;margin:0 auto}.page-header{margin-bottom:24px}.page-header h2{font-size:24px;color:#111827;margin:0 0 8px}.page-header p{color:#6b7280;margin:0;font-size:14px}.dashboard-cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:20px;margin-bottom:30px}.stat-card{background:#fff;padding:20px;border-radius:8px;box-shadow:0 1px 3px #0000001a;border:1px solid #e5e7eb}.stat-card h3{font-size:14px;color:#6b7280;margin:0 0 10px;font-weight:500;text-transform:uppercase;letter-spacing:.05em}.stat-card .value{font-size:32px;font-weight:700;color:#111827;margin:0}.table-container{background:#fff;border-radius:8px;box-shadow:0 1px 3px #0000001a;border:1px solid #e5e7eb;overflow:hidden}.table-header{padding:16px 20px;border-bottom:1px solid #e5e7eb;background:#f9fafb}.table-header h3{margin:0;font-size:16px;color:#111827}.table-responsive{overflow-x:auto}.separation-table{width:100%;border-collapse:collapse;text-align:left}.separation-table th{padding:12px 20px;background:#f9fafb;font-size:12px;font-weight:600;color:#4b5563;text-transform:uppercase;border-bottom:1px solid #e5e7eb}.separation-table td{padding:16px 20px;border-bottom:1px solid #e5e7eb;font-size:14px;color:#1f2937}.separation-table tr:last-child td{border-bottom:none}.status-badge{display:inline-block;padding:4px 10px;border-radius:9999px;font-size:12px;font-weight:600}.status-badge.submitted{background:#dbeafe;color:#1e40af}.status-badge.approved{background:#d1fae5;color:#065f46}.status-badge.relieved{background:#f3f4f6;color:#374151}.status-badge.rejected{background:#fee2e2;color:#991b1b}.btn-view{background:none;border:none;color:#2563eb;cursor:pointer;font-weight:500}.btn-view:hover{text-decoration:underline}.resignation-layout{display:grid;grid-template-columns:2fr 1fr;gap:24px;align-items:flex-start}.form-card{background:#fff;border-radius:8px;padding:24px;box-shadow:0 1px 3px #0000001a;border:1px solid #e5e7eb}.form-group{margin-bottom:20px}.form-group label{display:block;font-size:14px;font-weight:500;color:#374151;margin-bottom:8px}.form-group input,.form-group textarea{width:100%;padding:10px 12px;border:1px solid #d1d5db;border-radius:6px;font-size:14px;transition:border-color .2s;font-family:inherit}.form-group input:focus,.form-group textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.form-actions{display:flex;justify-content:flex-end;margin-top:24px}.btn.primary{background:#2563eb;color:#fff;border:none;padding:10px 20px;border-radius:6px;font-weight:500;cursor:pointer;transition:background .2s}.btn.primary:hover{background:#1d4ed8}.btn.primary:disabled{opacity:.6;cursor:not-allowed}.info-sidebar{display:flex;flex-direction:column;gap:20px}.info-card{background:#f8fafc;border-radius:8px;padding:20px;border:1px solid #e2e8f0}.info-card h3{margin:0 0 12px;font-size:16px;color:#1e293b}.info-card ul{margin:0;padding-left:20px;color:#475569;font-size:14px;line-height:1.6}@media(max-width:768px){.resignation-layout{grid-template-columns:1fr}}.modal-overlay{position:fixed;inset:0;background:#00000080;display:flex;align-items:center;justify-content:center;z-index:50}.modal-content{background:#fff;width:100%;max-width:600px;border-radius:8px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;display:flex;flex-direction:column;max-height:90vh}.modal-header{padding:16px 24px;border-bottom:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center}.modal-header h2{margin:0;font-size:18px;font-weight:600;color:#111827}.modal-close{background:none;border:none;font-size:20px;color:#6b7280;cursor:pointer}.modal-body{padding:24px;overflow-y:auto}.modal-info-panel{display:grid;grid-template-columns:1fr 1fr;gap:16px;background:#f8fafc;padding:16px;border-radius:6px;border:1px solid #e2e8f0;margin-bottom:24px}.info-item{display:flex;flex-direction:column;gap:4px}.info-label{font-size:12px;font-weight:600;color:#64748b;text-transform:uppercase;letter-spacing:.05em}.info-value{font-size:14px;color:#0f172a;font-weight:500}.modal-section{margin-bottom:20px}.section-label{display:block;font-size:14px;font-weight:600;color:#334155;margin-bottom:8px}.section-content.text-box{background:#f8fafc;padding:12px 16px;border-radius:6px;border:1px solid #e2e8f0;color:#334155;font-size:14px;line-height:1.5}.modal-textarea{width:100%;padding:12px;border:1px solid #cbd5e1;border-radius:6px;font-size:14px;color:#334155;font-family:inherit;resize:vertical;transition:border-color .2s}.modal-textarea:focus{outline:none;border-color:#3b82f6;box-shadow:0 0 0 3px #3b82f61a}.modal-footer{padding:16px 24px;border-top:1px solid #e5e7eb;display:flex;justify-content:space-between;align-items:center;background:#f9fafb;border-bottom-left-radius:8px;border-bottom-right-radius:8px}.modal-actions{display:flex;gap:12px}.btn-modal{padding:8px 16px;border-radius:6px;font-size:14px;font-weight:500;cursor:pointer;border:none;transition:all .2s}.btn-modal:disabled{opacity:.6;cursor:not-allowed}.btn-cancel{background:#fff;border:1px solid #cbd5e1;color:#475569}.btn-cancel:hover:not(:disabled){background:#f1f5f9;color:#0f172a}.btn-reject{background:#ef4444;color:#fff}.btn-reject:hover:not(:disabled){background:#dc2626}.btn-approve{background:#10b981;color:#fff}.btn-approve:hover:not(:disabled){background:#059669}.ui-badge{display:inline-flex;align-items:center;padding:.15rem .5rem;border-radius:9999px;font-size:.75rem;font-weight:600;white-space:nowrap}.ui-badge-neutral{background-color:#f1f5f9;color:#475569}.ui-badge-success{background-color:#dcfce7;color:#166534}.ui-badge-danger{background-color:#fee2e2;color:#991b1b}.ui-badge-warning{background-color:#fef3c7;color:#92400e}.ui-badge-info{background-color:#e0f2fe;color:#075985}.ui-badge-primary{background-color:#e2e8f0;color:#0f172a}.ui-modal-overlay{position:fixed;inset:0;background:#0f172a99;display:flex;align-items:center;justify-content:center;z-index:1000}.ui-modal-content{background:#fff;border-radius:8px;width:90%;max-width:500px;box-shadow:0 4px 6px -1px #0000001a,0 2px 4px -1px #0000000f;animation:modal-in .2s ease-out}.ui-modal-header{display:flex;justify-content:space-between;align-items:center;padding:1rem 1.5rem;border-bottom:1px solid #e2e8f0}.ui-modal-header h3{margin:0;font-size:1.25rem;color:#0f172a}.ui-modal-close{background:none;border:none;font-size:1.5rem;cursor:pointer;color:#64748b}.ui-modal-body{padding:1.5rem}@keyframes modal-in{0%{opacity:0;transform:translateY(-10px)}to{opacity:1;transform:translateY(0)}}.ui-btn{display:inline-flex;align-items:center;justify-content:center;gap:.5rem;font-family:Inter,sans-serif;font-weight:500;border-radius:6px;cursor:pointer;transition:all .2s ease;border:none;outline:none}.ui-btn:disabled{opacity:.6;cursor:not-allowed}.ui-btn-primary{background-color:#0f172a;color:#fff}.ui-btn-primary:hover:not(:disabled){background-color:#1e293b}.ui-btn-secondary{background-color:#e2e8f0;color:#0f172a}.ui-btn-secondary:hover:not(:disabled){background-color:#cbd5e1}.ui-btn-danger{background-color:#ef4444;color:#fff}.ui-btn-danger:hover:not(:disabled){background-color:#dc2626}.ui-btn-small{padding:.25rem .75rem;font-size:.875rem}.ui-btn-medium{padding:.5rem 1rem;font-size:1rem}.ui-btn-spinner{display:inline-block;width:1rem;height:1rem;border:2px solid rgba(255,255,255,.3);border-radius:50%;border-top-color:#fff;animation:spin 1s ease-in-out infinite}@keyframes spin{to{transform:rotate(360deg)}}.override-modal-content{display:flex;flex-direction:column;gap:1rem}.unreturned-list{margin:0;padding-left:1.5rem;color:#ef4444;font-size:.875rem;font-weight:500}.override-error{padding:.75rem;background:#fee2e2;color:#991b1b;border-radius:6px;font-size:.875rem}.form-group{display:flex;flex-direction:column;gap:.25rem}.form-group label{font-weight:500;font-size:.875rem;color:#334155}.form-group textarea{width:100%;padding:.75rem;border:1px solid #cbd5e1;border-radius:6px;font-family:inherit;resize:vertical}.form-group textarea:disabled{background:#f8fafc;cursor:not-allowed}.form-group small{color:#64748b;font-size:.75rem}.modal-actions{display:flex;justify-content:flex-end;gap:.75rem;margin-top:1rem}.ui-spinner{display:inline-block;border:2px solid #e2e8f0;border-radius:50%;border-top-color:#0f172a;animation:ui-spin 1s ease-in-out infinite}.ui-spinner-small{width:1rem;height:1rem}.ui-spinner-medium{width:2rem;height:2rem}.ui-spinner-large{width:3rem;height:3rem;border-width:3px}@keyframes ui-spin{to{transform:rotate(360deg)}}.asset-clearance-card{background:#fff;border-radius:8px;border:1px solid #e2e8f0;box-shadow:0 1px 3px #0000000d;margin-top:1.5rem;font-family:Inter,sans-serif}.asset-clearance-card.loading,.asset-clearance-card.error{padding:3rem;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:1rem;color:#64748b}.card-header{padding:1rem 1.5rem;border-bottom:1px solid #e2e8f0}.card-header h3{margin:0;font-size:1.125rem;color:#0f172a}.card-body{padding:1.5rem}.empty-state{text-align:center;padding:2rem;color:#64748b;font-size:.875rem}.assets-lists{display:flex;flex-direction:column;gap:1.5rem}.asset-group h4{margin:0 0 .5rem;font-size:.875rem;color:#475569;text-transform:uppercase;letter-spacing:.05em}.asset-items{list-style:none;padding:0;margin:0;display:flex;flex-direction:column;gap:.5rem}.asset-items li{display:flex;justify-content:space-between;align-items:center;padding:.75rem 1rem;background:#f8fafc;border-radius:6px;border:1px solid #e2e8f0}.item-info{display:flex;flex-direction:column}.item-name{font-weight:500;color:#0f172a;font-size:.875rem}.item-meta{font-size:.75rem;color:#64748b;margin-top:.25rem}.summary-row{margin-top:1.5rem;padding-top:1.5rem;border-top:1px dashed #cbd5e1;text-align:right;font-size:1rem;color:#334155}.card-footer{padding:1rem 1.5rem;border-top:1px solid #e2e8f0;background:#f8fafc;border-bottom-left-radius:8px;border-bottom-right-radius:8px;display:flex;justify-content:flex-end}.existing-settlement-alert{display:flex;align-items:center;gap:1rem;color:#075985;font-size:.875rem}.deduction-table .amount-cell{font-family:monospace;font-size:.95rem}.ff-view-page{padding:2rem;max-width:1000px;margin:0 auto;font-family:Inter,sans-serif}.ff-view-loading,.ff-view-error{display:flex;flex-direction:column;align-items:center;justify-content:center;min-height:50vh;gap:1rem}.ff-header{margin-bottom:2rem}.ff-header-top{display:flex;justify-content:space-between;align-items:center;margin-bottom:1rem}.ff-header-top h2{margin:0;color:#0f172a}.ff-status-bar{display:flex;align-items:center;gap:1rem}.ff-approved-info{font-size:.875rem;color:#475569}.ff-employee-bar{display:flex;background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:1.5rem;gap:3rem;margin-bottom:2rem}.emp-stat{display:flex;flex-direction:column;gap:.25rem}.emp-stat label{font-size:.75rem;text-transform:uppercase;color:#64748b;font-weight:600}.emp-stat span{font-size:1rem;font-weight:500;color:#0f172a}.ff-dispute-section{background:#fffbeb;border:1px solid #fcd34d;padding:1.5rem;border-radius:8px;margin-bottom:2rem}.ff-dispute-section h4{margin:0 0 1rem;color:#b45309}.ff-dispute-section textarea{width:100%;border:1px solid #fcd34d;border-radius:6px;padding:.75rem;font-family:inherit}.ff-financials{display:grid;grid-template-columns:1fr;gap:2rem;margin-bottom:2rem}.ff-earnings-card,.ff-deductions-card{background:#fff;border:1px solid #e2e8f0;border-radius:8px;padding:1.5rem}.ff-earnings-card h3,.ff-deductions-card h3{margin:0 0 1.5rem;color:#0f172a;border-bottom:1px solid #e2e8f0;padding-bottom:.75rem}.fin-row{display:flex;justify-content:space-between;padding:.5rem 0;color:#334155}.ff-summary-bar{display:flex;justify-content:flex-end;gap:3rem;background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;padding:1.5rem;margin-bottom:2rem}.summary-item{display:flex;flex-direction:column;align-items:flex-end;gap:.25rem}.summary-item span{font-size:.875rem;color:#64748b}.summary-item strong{font-size:1.25rem;color:#0f172a}.net-payable strong{color:#16a34a;font-size:1.5rem}.ff-actions{display:flex;justify-content:flex-end;margin-top:2rem}.notice-shortfall-banner{background-color:#faeeda;border:1px solid #FAC775;border-radius:8px;padding:16px;margin-bottom:16px;color:#5c3d00;font-family:inherit}.notice-shortfall-banner__heading{font-weight:600;font-size:1.1rem;margin-bottom:12px;display:flex;align-items:center;gap:8px}.notice-shortfall-banner__row{display:flex;justify-content:space-between;align-items:center;padding:4px 0;font-size:.95rem}.notice-shortfall-banner__label{color:#7a5200}.notice-shortfall-banner__value{font-weight:500}.notice-shortfall-banner__divider{height:1px;background-color:#fac775;margin:12px 0}.notice-shortfall-banner__total-row{font-size:1.1rem;font-weight:700}.notice-shortfall-banner__total-row .notice-shortfall-banner__label{color:#5c3d00}@media(max-width:320px){.notice-shortfall-banner{padding:12px}.notice-shortfall-banner__row{flex-direction:column;align-items:flex-start;gap:4px}.notice-shortfall-banner__value{align-self:flex-end}}.ff-filters-container{display:flex;flex-direction:column;gap:1.5rem;background:#f8fafc;padding:1.5rem;border-radius:8px;border:1px solid #e2e8f0;margin-bottom:2rem}.ff-filters-row{display:flex;flex-wrap:wrap;gap:1.5rem}.filter-group{display:flex;flex-direction:column;gap:.5rem;flex:1;min-width:200px}.filter-group label{font-size:.875rem;font-weight:600;color:#475569}.filter-group input,.filter-group select{padding:.5rem;border:1px solid #cbd5e1;border-radius:6px;font-family:inherit;width:100%}.date-inputs{display:flex;align-items:center;gap:.5rem}.date-inputs span{font-size:.875rem;color:#64748b}.ff-filters-actions{display:flex;justify-content:flex-end;gap:1rem}.ui-table-container{width:100%;overflow-x:auto;border:1px solid #e2e8f0;border-radius:8px;background:#fff}.ui-table{width:100%;border-collapse:collapse;text-align:left}.ui-table th{background:#f8fafc;padding:.75rem 1rem;font-weight:600;color:#475569;border-bottom:1px solid #e2e8f0;font-size:.875rem}.ui-table td{padding:.75rem 1rem;border-bottom:1px solid #e2e8f0;color:#0f172a;font-size:.875rem}.ui-table tbody tr:last-child td{border-bottom:none}.ui-table tbody tr:hover{background:#f1f5f9}.ui-table-empty{text-align:center;color:#64748b;padding:2rem!important}.projects-dashboard{padding:24px;background-color:#f8fafc;min-height:100vh}.kpi-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:20px;margin-bottom:32px}.kpi-card{background:#fff;border-radius:12px;padding:20px;box-shadow:0 4px 6px -1px #0000000d;transition:transform .2s ease,box-shadow .2s ease;border:1px solid #e2e8f0}.kpi-card:hover{transform:translateY(-2px);box-shadow:0 10px 15px -3px #0000001a}.kpi-title{color:#64748b;font-size:14px;font-weight:500;margin-bottom:8px}.kpi-value{color:#0f172a;font-size:28px;font-weight:700}.charts-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(400px,1fr));gap:24px}.chart-card{background:#fff;border-radius:12px;padding:24px;box-shadow:0 4px 6px -1px #0000000d;border:1px solid #e2e8f0}.chart-title{font-size:16px;font-weight:600;color:#1e293b;margin-bottom:16px;border-bottom:1px solid #f1f5f9;padding-bottom:12px}.premium-gradient-text{background:linear-gradient(135deg,#3b82f6,#8b5cf6);-webkit-background-clip:text;-webkit-text-fill-color:transparent}*,*:before,*:after{box-sizing:border-box;margin:0;padding:0}html,body,#root{height:100%;overflow:hidden}html{font-size:16px}body{font-family:Inter,Segoe UI,Roboto,Helvetica,Arial,sans-serif;font-size:15px;line-height:1.6;background-color:#f6f8fc;color:#0f172a;-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale}h1{font-size:26px;font-weight:600}h2{font-size:22px;font-weight:600}h3{font-size:18px;font-weight:600}h4{font-size:16px;font-weight:600}p{font-size:14.5px;color:#475569}small{font-size:13px}a{text-decoration:none;color:inherit}button{font-family:inherit;font-size:14px;font-weight:500;cursor:pointer}input,select,textarea{font-family:inherit;font-size:14px;padding:10px 12px;border-radius:8px}table{font-size:14px}th{font-size:13px;font-weight:600;color:#475569}td{font-size:14px;color:#0f172a}.muted-text{font-size:13px;color:#64748b}.text-center{text-align:center}input[type=checkbox],input[type=checkbox]:hover,input[type=checkbox]:focus,input[type=radio],input[type=radio]:hover,input[type=radio]:focus{transition:none!important;background-color:initial!important;border-color:initial!important;padding:0!important}*,*:before,*:after{box-sizing:border-box}@media(max-width:768px){.table-wrapper{width:100%!important;overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;margin:16px 0!important;border:1px solid #e2e8f0!important;border-radius:12px!important}table:not(.calendar-grid){display:table!important;width:100%!important;min-width:650px!important}th,td{padding:10px 12px!important;font-size:13px!important;white-space:nowrap}.pagination{flex-direction:column!important;align-items:center!important;gap:12px!important;padding:16px!important}.page-number-group{justify-content:center!important;width:100%!important}.page-summary{text-align:center!important;margin-bottom:4px!important}.attendance-pagination-container{flex-direction:column!important;align-items:flex-start!important;gap:12px!important;padding:12px 16px!important}.pagination-right{width:100%!important;justify-content:center!important;flex-wrap:wrap!important}.pagination-left{width:100%!important;justify-content:center!important}}@media(max-width:768px){.page-header{flex-direction:column!important;align-items:flex-start!important;gap:16px!important;margin-bottom:20px!important}.page-title{font-size:20px!important}.page-hero{padding:20px 18px!important;border-radius:14px!important;margin-bottom:20px!important}.page-hero h2{font-size:18px!important}.header-actions{width:100%!important;flex-direction:column!important;gap:10px!important;align-items:stretch!important}.header-actions button,.header-actions a,.header-actions .btn,.header-actions .add-employee-btn,.header-actions .settings-btn,.header-actions .deactivated-btn{width:100%!important;margin:0!important;display:flex!important;justify-content:center!important;align-items:center!important;padding:12px 16px!important}.button-group{flex-direction:column!important;gap:10px!important;width:100%!important}.button-group button,.button-group a{width:100%!important}}@media(max-width:768px){.filter-bar,.filters-row,.audit-filters,.attendance-controls,.payroll-filters,.leave-filters,.report-filters,.company-filters{flex-direction:column!important;align-items:stretch!important;gap:12px!important;padding:14px!important;width:100%!important}.filter-bar input,.filter-bar select,.filter-bar button,.filters-row input,.filters-row select,.filters-row button,.audit-filters input,.audit-filters select,.audit-filters button,.search-input,.filter-select,.attendance-controls input,.attendance-controls select,.attendance-controls button,.payroll-filters select,.payroll-filters button,.payroll-filters input,.leave-filters select,.leave-filters button,.leave-filters input,.report-filters select,.report-filters button,.company-filters select,.company-filters input,.company-filters button{width:100%!important;max-width:100%!important;margin:0!important;min-width:unset!important}.filters-row label,.audit-filters label{display:block!important;margin:0 0 4px!important;font-size:12px!important;font-weight:600!important;color:#64748b!important}.tab-nav,.tabs{flex-wrap:wrap!important;gap:8px!important}.tab-nav button,.tabs button,.tab-btn{flex:1 1 auto!important;min-width:120px!important;text-align:center!important}}@media(max-width:1024px){.dashboard-kpis,.superadmin-grid{grid-template-columns:repeat(2,1fr)!important}}@media(max-width:768px){.dashboard-kpis,.dashboard-grid,.employee-dashboard-grid,.employee-stats,.card-grid,.stats-grid,.superadmin-grid,.attendance-summary-grid,.email-stats,.profile-grid,.documents-grid,.leave-balance-grid,.leave-stats,.payroll-summary-grid{grid-template-columns:1fr!important;gap:16px!important}.superadmin-stats{flex-direction:column!important;gap:12px!important}.stat-card{min-width:unset!important;width:100%!important}.payroll-stats{grid-template-columns:repeat(2,1fr)!important;gap:10px!important}.kpi-card{min-height:auto!important;padding:18px!important}.kpi-card h3{font-size:22px!important}}@media(max-width:480px){.payroll-stats,.dashboard-kpis{grid-template-columns:1fr!important}}@media(max-width:768px){.employee-form-grid{grid-template-columns:repeat(2,1fr)!important;gap:14px!important}.stepper{gap:4px!important;overflow-x:auto!important;padding-bottom:8px!important}.step p{display:none!important}.step span{width:30px!important;height:30px!important;font-size:12px!important}}@media(max-width:480px){.employee-form-grid,.form-row{grid-template-columns:1fr!important;gap:12px!important}.form-group{width:100%!important}.step-actions{flex-direction:column!important;gap:10px!important}.step-actions button,.step-actions .btn{width:100%!important}.step span{width:26px!important;height:26px!important;font-size:11px!important}}@media(max-width:768px){.modal-overlay{padding:12px!important;align-items:flex-end!important}.modal-card,.modal-content,.preview-content{width:100%!important;max-width:100%!important;padding:20px!important;border-radius:20px 20px 0 0!important;margin:0!important;max-height:90vh!important;overflow-y:auto!important}.modal-header h3,.preview-content h3{font-size:16px!important}.modal-actions{flex-direction:column!important;gap:10px!important;width:100%!important}.modal-actions button,.modal-actions .btn{width:100%!important}}@media(max-width:480px){.modal-card,.modal-content{border-radius:16px 16px 0 0!important}}@media(max-width:768px){.subscription-panel{border-radius:16px!important}.subscription-gradient-header{padding:20px 18px!important}.subscription-details-grid{grid-template-columns:1fr!important;gap:12px!important;margin-bottom:20px!important}.sub-detail-tile{padding:14px!important}#pricing-plans-section{padding:20px 14px!important;border-radius:16px!important}#pricing-plans-section .table-wrapper{margin-top:16px!important;border-radius:10px!important;overflow-x:auto!important}.billing-plans-grid,.plans-grid{grid-template-columns:1fr!important;gap:16px!important}.compare-table-wrapper{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}}@media(max-width:768px){.calendar-day{padding:4px 2px!important;min-height:42px!important;font-size:10px!important}.calendar-header{flex-direction:column!important;gap:10px!important;align-items:flex-start!important}.calendar-nav{width:100%!important;justify-content:space-between!important}.leave-legend{flex-wrap:wrap!important;gap:8px!important}}@media(max-width:768px){.payslip-container{padding:16px!important;border-radius:12px!important}.payslip-header{flex-direction:column!important;text-align:center!important;gap:12px!important}.payslip-grid,.salary-grid{grid-template-columns:1fr!important;gap:12px!important}.salary-timeline,.timeline-item{padding:12px!important}.timeline-item{flex-direction:column!important;align-items:flex-start!important;gap:8px!important}}@media(max-width:768px){.profile-header{flex-direction:column!important;text-align:center!important;gap:16px!important}.profile-avatar{margin:0 auto!important}.profile-info-grid{grid-template-columns:1fr!important;gap:12px!important}.profile-tabs{flex-wrap:wrap!important;gap:8px!important}.profile-tab-btn{flex:1 1 auto!important;min-width:120px!important;text-align:center!important}}@media(max-width:768px){.settings-tabs-wrapper{flex-direction:row!important;flex-wrap:wrap!important;gap:8px!important;width:100%!important}.settings-tab-btn{flex:1 1 auto!important;min-width:120px!important;text-align:center!important;font-size:13px!important;padding:10px 12px!important}.settings-form-grid{grid-template-columns:1fr!important;gap:16px!important}.settings-section{grid-template-columns:1fr!important}}@media(max-width:768px){.attendance-controls{flex-direction:column!important;gap:12px!important;align-items:stretch!important;padding:14px!important}.attendance-summary-cards{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}.attendance-tabs{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important;white-space:nowrap!important;flex-wrap:nowrap!important;padding-bottom:4px!important}.monthly-calendar{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}.month-grid{min-width:600px!important}}@media(max-width:480px){.attendance-summary-cards{grid-template-columns:1fr!important}}@media(max-width:768px){.daybook-entries{grid-template-columns:1fr!important}.company-users-tabs{overflow-x:auto!important;white-space:nowrap!important;padding-bottom:4px!important}.onboard-form-actions{flex-direction:column!important;gap:10px!important}.onboard-form-actions button{width:100%!important}}@media(max-width:480px){.login-card{width:95%!important;max-width:380px!important;padding:24px 18px!important;margin:auto!important}.login-logo{font-size:20px!important}}@media(max-width:768px){.notification-list{gap:12px!important}.notification-item{padding:14px!important;flex-direction:column!important;gap:10px!important;align-items:flex-start!important}.notification-meta{flex-direction:row!important;flex-wrap:wrap!important;gap:8px!important}}@media(max-width:768px){.ticket-header{flex-direction:column!important;gap:12px!important}.ticket-meta{flex-wrap:wrap!important;gap:8px!important}.ticket-actions{flex-direction:column!important;gap:8px!important}.ticket-actions button{width:100%!important}}@media(max-width:768px){.companies-page .page-header,.company-admin-page .page-header{flex-direction:column!important;gap:14px!important;align-items:stretch!important}.companies-grid{grid-template-columns:1fr!important;gap:16px!important}.company-detail-tabs{flex-wrap:wrap!important;gap:8px!important}.reports-grid,.analytics-grid{grid-template-columns:1fr!important;gap:20px!important}}@media(max-width:768px){.card{padding:16px!important;border-radius:12px!important;margin-bottom:16px!important}.card-row,.two-col-layout,.detail-grid{flex-direction:column!important;gap:16px!important}.summary-box{padding:14px!important}.section-title{font-size:16px!important}.status-row{flex-wrap:wrap!important;gap:8px!important}}@media(max-width:768px){.employee-content{padding:16px!important}.employee-header{padding-left:68px!important;min-height:56px!important}.employee-header-right{gap:8px!important}.employee-user{display:none!important}.quick-actions-grid{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}.quick-action-card{padding:16px 12px!important}.quick-action-card .icon{font-size:24px!important}.salary-breakdown-row{flex-direction:column!important;gap:8px!important;align-items:flex-start!important}}@media(max-width:480px){.quick-actions-grid{grid-template-columns:repeat(2,1fr)!important}.employee-content{padding:12px!important}}@media(max-width:768px){.layout-root{overflow:visible!important}.layout-main{overflow-x:hidden!important}.layout-content{padding:14px!important}.layout-topbar{padding:10px 14px 0 68px!important}.payroll-header-actions{flex-direction:column!important;gap:10px!important;align-items:stretch!important}.payroll-header-actions button{width:100%!important}.leave-header-actions{flex-direction:column!important;gap:10px!important;align-items:stretch!important}.chart-row{flex-direction:column!important;gap:20px!important}.chart-row>div{width:100%!important}}@media(max-width:768px){.recharts-wrapper,.recharts-responsive-container{width:100%!important}.chart-container{padding:16px!important;margin-top:16px!important}.recharts-legend-wrapper{width:100%!important;white-space:normal!important}}@media(max-width:768px){body{overflow-x:hidden!important}img{max-width:100%!important;height:auto!important}p,span,h1,h2,h3,h4,h5,h6{word-break:break-word!important;overflow-wrap:break-word!important}}@media(max-width:768px){.companies-page .table-wrapper,.manage-users-page .table-wrapper{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}.companies-page table,.manage-users-page table{min-width:750px!important}.company-detail-header{flex-direction:column!important;gap:16px!important;align-items:flex-start!important}.billing-tabs-row{overflow-x:auto!important;white-space:nowrap!important;-webkit-overflow-scrolling:touch!important;flex-wrap:nowrap!important}}@media(max-width:768px){.layout-topbar{padding-left:68px!important;min-height:54px!important}.layout-content{padding-top:8px!important}}@media(max-width:768px){.payroll-page [style*=grid-template-columns],.payroll-section [style*=grid-template-columns]{grid-template-columns:1fr!important}.payroll-page .filter-controls{flex-direction:column!important;gap:10px!important;align-items:stretch!important}}@media(max-width:768px){.reports-page{padding:14px!important}.reports-header{flex-direction:column!important;gap:12px!important;align-items:flex-start!important}.reports-filter-row{flex-direction:column!important;gap:10px!important;align-items:stretch!important}.reports-filter-row select,.reports-filter-row input,.reports-filter-row button{width:100%!important}.reports-charts-grid{grid-template-columns:1fr!important;gap:20px!important}.report-card{padding:16px!important}.report-table-wrapper{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}.report-table{min-width:640px!important}}@media(max-width:768px){.support-page{padding:14px!important}.support-header{flex-direction:column!important;gap:12px!important;align-items:flex-start!important}.support-header button{width:100%!important}.support-filters{flex-direction:column!important;gap:10px!important;align-items:stretch!important}.support-filters select,.support-filters input{width:100%!important}.ticket-list{gap:12px!important}.ticket-card{padding:16px!important}.ticket-meta{flex-wrap:wrap!important;gap:8px!important}.ticket-actions{flex-direction:column!important;gap:8px!important}.ticket-actions button{width:100%!important}}@media(max-width:768px){.notifications-page{padding:14px!important}.notifications-header{flex-direction:column!important;gap:12px!important;align-items:flex-start!important}.notification-item{padding:14px!important;flex-direction:column!important;gap:8px!important;align-items:flex-start!important}.notification-item .notif-actions{width:100%!important;display:flex!important;gap:8px!important}.notification-item .notif-actions button{flex:1!important}}@media(max-width:768px){.holidays-page{padding:14px!important}.holidays-header{flex-direction:column!important;gap:12px!important;align-items:flex-start!important}.holidays-header button{width:100%!important}.holidays-table-wrapper{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}.holidays-table{min-width:540px!important}.holidays-grid{grid-template-columns:1fr!important;gap:12px!important}}@media(max-width:768px){.asset-management-page{padding:14px!important}.asset-header{flex-direction:column!important;gap:12px!important;align-items:flex-start!important}.asset-header button{width:100%!important}.asset-filters{flex-direction:column!important;gap:10px!important}.asset-filters input,.asset-filters select{width:100%!important}.asset-table-wrapper,.asset-return-table-wrapper{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}.asset-table,.asset-return-table{min-width:640px!important}.asset-summary-grid{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}}@media(max-width:480px){.asset-summary-grid{grid-template-columns:1fr!important}}@media(max-width:768px){.salary-revision-page{padding:14px!important}.salary-revision-header{flex-direction:column!important;gap:12px!important;align-items:flex-start!important}.salary-editor-grid{grid-template-columns:1fr!important;gap:12px!important}.salary-editor-actions{flex-direction:column!important;gap:10px!important}.salary-editor-actions button{width:100%!important}.revision-table-wrapper{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}.revision-table{min-width:580px!important}}@media(max-width:768px){.superadmin-dashboard-page{padding:14px!important}.superadmin-kpi-grid{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}.superadmin-charts-row{flex-direction:column!important;gap:16px!important}.superadmin-quick-actions{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}}@media(max-width:480px){.superadmin-kpi-grid,.superadmin-quick-actions{grid-template-columns:1fr!important}}@media(max-width:768px){.company-employees-page{padding:14px!important}.company-employees-header{flex-direction:column!important;gap:12px!important;align-items:flex-start!important}.company-employees-table-wrapper{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}.company-employees-table{min-width:640px!important}.company-payroll-page{padding:14px!important}.company-payroll-header{flex-direction:column!important;gap:12px!important;align-items:flex-start!important}.company-payroll-table-wrapper{overflow-x:auto!important;-webkit-overflow-scrolling:touch!important}}@media(max-width:768px){.layout-content>*{max-width:100%!important;overflow-x:hidden!important}input,select,textarea,button{box-sizing:border-box!important;max-width:100%!important}.recharts-responsive-container,.recharts-wrapper{width:100%!important;max-width:100%!important}.super-page,.layout-content,.employee-content,.employee-main{overflow-x:hidden!important;max-width:100vw!important}}