@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/fef07dbb0973bf53-s.3p2_lha1f2xer.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/8a480f0b521d4e75-s.1qq4vpdcun5oj.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/53b9e256198e5412-s.390ncx5urfkfu.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/7178b3e590c64307-s.21jp631_3pja2.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Geist;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/caa3a2e1cccd8315-s.p.0wgildi0cnwt9.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Geist Fallback;src:local(Arial);ascent-override:95.94%;descent-override:28.16%;line-gap-override:0.0%;size-adjust:104.76%}.geist_a71539c9-module__T19VSG__className{font-family:Geist,Geist Fallback;font-style:normal}.geist_a71539c9-module__T19VSG__variable{--font-geist-sans:"Geist", "Geist Fallback"}
@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/5ce348bf30bf5439-s.31988l_ccedte.woff2)format("woff2");unicode-range:U+460-52F,U+1C80-1C8A,U+20B4,U+2DE0-2DFF,U+A640-A69F,U+FE2E-FE2F}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/4fa387ec64143e14-s.2tuy5pz7dlieh.woff2)format("woff2");unicode-range:U+301,U+400-45F,U+490-491,U+4B0-4B1,U+2116}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/6306c77e7c8268e4-s.2dbetqa9o8jxf.woff2)format("woff2");unicode-range:U+2000-2001,U+2004-2008,U+200A,U+23B8-23BD,U+2500-259F}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/7d817b4c03b0c5f1-s.1uyisp29ctx0d.woff2)format("woff2");unicode-range:U+102-103,U+110-111,U+128-129,U+168-169,U+1A0-1A1,U+1AF-1B0,U+300-301,U+303-304,U+308-309,U+323,U+329,U+1EA0-1EF9,U+20AB}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/bbc41e54d2fcbd21-s.1rgnod-3esatf.woff2)format("woff2");unicode-range:U+100-2BA,U+2BD-2C5,U+2C7-2CC,U+2CE-2D7,U+2DD-2FF,U+304,U+308,U+329,U+1D00-1DBF,U+1E00-1E9F,U+1EF2-1EFF,U+2020,U+20A0-20AB,U+20AD-20C0,U+2113,U+2C60-2C7F,U+A720-A7FF}@font-face{font-family:Geist Mono;font-style:normal;font-weight:100 900;font-display:swap;src:url(../media/797e433ab948586e-s.p.0r6juujl39pe6.woff2)format("woff2");unicode-range:U+??,U+131,U+152-153,U+2BB-2BC,U+2C6,U+2DA,U+2DC,U+304,U+308,U+329,U+2000-206F,U+20AC,U+2122,U+2191,U+2193,U+2212,U+2215,U+FEFF,U+FFFD}@font-face{font-family:Geist Mono Fallback;src:local(Arial);ascent-override:74.67%;descent-override:21.92%;line-gap-override:0.0%;size-adjust:134.59%}.geist_mono_8d43a2aa-module__8Li5zG__className{font-family:Geist Mono,Geist Mono Fallback;font-style:normal}.geist_mono_8d43a2aa-module__8Li5zG__variable{--font-geist-mono:"Geist Mono", "Geist Mono Fallback"}
:root{--background:#fff;--foreground:#171717}@media (prefers-color-scheme:dark){:root{--background:#0a0a0a;--foreground:#ededed}}html{height:100%}html,body{-webkit-text-size-adjust:100%;max-width:100vw;overflow-x:hidden}body{min-height:100%;color:var(--foreground);background:var(--background);-webkit-font-smoothing:antialiased;-moz-osx-font-smoothing:grayscale;flex-direction:column;font-family:Arial,Helvetica,sans-serif;display:flex}*{box-sizing:border-box;margin:0;padding:0}a{color:inherit;text-decoration:none}@media (prefers-color-scheme:dark){html{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark}}
:root{--font-family:"Outfit", "Inter", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--sidebar-bg:#0b1525;--sidebar-hover-bg:#2d322f;--sidebar-active-bg:#1ca3bb;--sidebar-active-text:#0b1525;--sidebar-text:#a0aec0;--bg-primary:#f7f9fa;--bg-card:#fff;--border-color:#edf2f7;--text-primary:#2d3748;--text-secondary:#718096;--text-light:#a0aec0;--color-primary:#1ca3bb;--color-primary-light:#f5f2eb;--color-primary-hover:#a38d63;--color-success:#10b981;--color-success-light:#ecfdf5;--color-danger:#ef4444;--color-danger-light:#fef2f2;--color-warning:#f59e0b;--color-warning-light:#fffbeb;--color-info:#3b82f6;--color-info-light:#eff6ff;--shadow-sm:0 1px 3px #0000000d, 0 1px 2px #00000005;--shadow-md:0 4px 6px -1px #0000000d, 0 2px 4px -1px #00000008;--shadow-lg:0 10px 15px -3px #0000000a, 0 4px 6px -2px #00000005;--radius-sm:8px;--radius-md:12px;--radius-lg:16px;--transition:all .25s cubic-bezier(.4, 0, .2, 1)}*{box-sizing:border-box;margin:0;padding:0}body{font-family:var(--font-family);background-color:var(--bg-primary);color:var(--text-primary);-webkit-font-smoothing:antialiased;line-height:1.5}button,input,select,textarea{font-family:inherit}.dashboard-container{width:100vw;height:100vh;display:flex;overflow:hidden}.sidebar{background-color:var(--sidebar-bg);color:#fff;width:260px;height:100vh;transition:var(--transition);border-right:1px solid #ffffff0d;flex-direction:column;flex-shrink:0;display:flex}.sidebar-logo{align-items:center;gap:12px;padding:28px 24px;display:flex}.logo-icon{width:150px;height:50px}.sidebar-div{flex-direction:row;justify-content:start;margin-left:35px;padding-top:10px;display:flex}.sidebar-menu{flex-direction:column;flex:1;gap:6px;padding:0 16px;list-style:none;display:flex;overflow-y:auto}.menu-item a{color:var(--sidebar-text);border-radius:var(--radius-sm);transition:var(--transition);align-items:center;gap:14px;padding:12px 16px;font-size:14px;font-weight:500;text-decoration:none;display:flex}.menu-item a:hover{background-color:var(--sidebar-hover-bg);color:#fff}.menu-item.active a{background-color:var(--sidebar-active-bg);color:var(--sidebar-active-text);font-weight:600}.sidebar-footer{background-color:#00000026;border-top:1px solid #ffffff0d;padding:20px 16px}.user-profile-badge{align-items:center;gap:12px;margin-bottom:12px;display:flex}.user-avatar{background-color:var(--sidebar-hover-bg);width:40px;height:40px;color:var(--sidebar-active-bg);object-fit:cover;border:2px solid #ffffff1a;border-radius:50%;justify-content:center;align-items:center;font-weight:600;display:flex;overflow:hidden}.user-info{flex:1;min-width:0}.user-name{color:#fff;white-space:nowrap;text-overflow:ellipsis;font-size:13px;font-weight:600;overflow:hidden}.user-role{color:var(--sidebar-text);text-transform:capitalize;font-size:11px}.logout-btn{color:#fff;border-radius:var(--radius-sm);cursor:pointer;width:100%;transition:var(--transition);background:0 0;border:1px solid #ffffff1a;justify-content:center;align-items:center;gap:8px;padding:10px;font-size:13px;display:flex}.logout-btn:hover{background-color:var(--color-danger);border-color:var(--color-danger)}.main-wrapper{flex-direction:column;flex:1;height:100vh;display:flex;overflow:hidden}.main-header{border-bottom:1px solid var(--border-color);background-color:#fff;flex-shrink:0;justify-content:space-between;align-items:center;height:70px;padding:0 32px;display:flex}.welcome-section{flex-direction:row;justify-content:space-between;align-items:center;gap:10px;display:flex}@media (max-width:768px){.welcome-section-content{display:none}}.welcome-section h1{color:var(--text-primary);font-size:20px;font-weight:700}.welcome-section p{color:var(--text-secondary);font-size:13px}.header-actions{align-items:center;gap:20px;display:flex}.notification-bell{color:var(--text-secondary);cursor:pointer;transition:var(--transition);background:0 0;border:none;border-radius:50%;padding:6px;position:relative}.notification-bell:hover{background-color:var(--bg-primary);color:var(--text-primary)}.notification-badge{background-color:var(--color-danger);color:#fff;border:2px solid #fff;border-radius:50%;justify-content:center;align-items:center;min-width:15px;height:15px;font-size:9px;font-weight:700;display:flex;position:absolute;top:2px;right:2px}.content-container{flex:1;padding:32px;overflow-y:auto}.page-title-row{justify-content:space-between;align-items:center;margin-bottom:28px;display:flex}.page-title-row h2{color:var(--text-primary);font-size:24px;font-weight:700}.btn{border-radius:var(--radius-sm);cursor:pointer;transition:var(--transition);border:none;align-items:center;gap:8px;padding:10px 18px;font-size:14px;font-weight:600;text-decoration:none;display:inline-flex}.btn-primary{background-color:var(--color-primary);color:var(--sidebar-active-text)}.btn-primary:hover{background-color:var(--color-primary-hover)}.btn-secondary{border:1px solid var(--border-color);color:var(--text-secondary);background-color:#fff}.btn-secondary:hover{background-color:var(--bg-primary);color:var(--text-primary)}.btn-danger{background-color:var(--color-danger);color:#fff}.btn-danger:hover{background-color:#dc2626}.kpi-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:24px;margin-bottom:32px;display:grid}.kpi-card{background-color:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);transition:var(--transition);align-items:center;gap:20px;padding:24px;display:flex}.kpi-card:hover{box-shadow:var(--shadow-md);transform:translateY(-2px)}.kpi-icon-wrapper{border-radius:var(--radius-md);justify-content:center;align-items:center;width:54px;height:54px;display:flex}.kpi-info h3{color:var(--text-secondary);text-transform:uppercase;letter-spacing:.5px;margin-bottom:4px;font-size:13px;font-weight:600}.kpi-value{color:var(--text-primary);font-size:28px;font-weight:700;line-height:1}.kpi-subtext{margin-top:4px;font-size:11px;font-weight:500}.kpi-subtext.success{color:var(--color-success)}.kpi-subtext.danger{color:var(--color-danger)}.kpi-subtext.warning{color:var(--color-warning)}.dashboard-row{grid-template-columns:2fr 1fr;gap:24px;margin-bottom:32px;display:grid}.dashboard-row-equal{grid-template-columns:1fr 1fr;gap:24px;margin-bottom:32px;display:grid}@media (max-width:1024px){.dashboard-row,.dashboard-row-equal{grid-template-columns:1fr}}.card{background-color:var(--bg-card);border-radius:var(--radius-lg);border:1px solid var(--border-color);box-shadow:var(--shadow-sm);margin-bottom:24px;padding:24px;overflow:hidden}.card-header{justify-content:space-between;align-items:center;margin-bottom:20px;display:flex}.card-header h3{color:var(--text-primary);font-size:16px;font-weight:700}.chart-container{justify-content:space-between;align-items:flex-end;height:240px;padding:10px 0;display:flex;position:relative}.chart-bar-col{flex-direction:column;flex:1;justify-content:flex-end;align-items:center;height:100%;display:flex}.chart-bar-wrapper{background-color:var(--border-color);border-radius:12px;width:24px;height:80%;position:relative;overflow:hidden}.chart-bar{border-radius:12px;width:100%;transition:height .6s cubic-bezier(.4,0,.2,1);position:absolute;bottom:0}.chart-bar.present{background-color:var(--color-success)}.chart-bar.absent{background-color:var(--color-danger)}.chart-bar.leave{background-color:var(--color-warning)}.chart-bar-label{color:var(--text-secondary);text-align:center;margin-top:8px;font-size:11px}.table-wrapper{border-radius:var(--radius-md);border:1px solid var(--border-color);overflow-x:auto}.data-table{border-collapse:collapse;text-align:left;width:100%;font-size:14px}.data-table th{background-color:var(--bg-primary);color:var(--text-secondary);border-bottom:1px solid var(--border-color);text-transform:uppercase;letter-spacing:.5px;padding:14px 20px;font-size:11px;font-weight:600}.data-table td{border-bottom:1px solid var(--border-color);color:var(--text-primary);padding:16px 20px}.data-table tr:last-child td{border-bottom:none}.data-table tbody tr:hover{background-color:#00000003}.badge{text-transform:uppercase;border-radius:50px;align-items:center;padding:4px 10px;font-size:11px;font-weight:600;display:inline-flex}.badge-success{background-color:var(--color-success-light);color:var(--color-success)}.badge-danger{background-color:var(--color-danger-light);color:var(--color-danger)}.badge-warning{background-color:var(--color-warning-light);color:var(--color-warning)}.badge-info{background-color:var(--color-info-light);color:var(--color-info)}.notification-list{flex-direction:column;gap:16px;max-height:380px;display:flex;overflow-y:auto}.notification-item{border-radius:var(--radius-md);border:1px solid var(--border-color);transition:var(--transition);gap:12px;padding:14px;display:flex}.notification-item:hover{background-color:var(--bg-primary)}.notification-item.unread{background-color:var(--color-info-light);border-color:#3b82f626}.notif-icon-circle{border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.notif-body{flex:1}.notif-title{margin-bottom:2px;font-size:13px;font-weight:600}.notif-desc{color:var(--text-secondary);margin-bottom:4px;font-size:12px;line-height:1.4}.notif-time{color:var(--text-light);font-size:10px}.login-container{background-color:#121413;width:100vw;height:100vh;display:flex}.login-left{color:#fff;background:linear-gradient(135deg,#0b1525 0%,#0d0f0e 100%);flex-direction:column;flex:1.2;justify-content:space-between;padding:60px;display:flex;position:relative;overflow:hidden}.login-left:after{content:"";pointer-events:none;background:radial-gradient(circle,#bca37414 0%,#0000 70%);border-radius:50%;width:600px;height:600px;position:absolute;top:-20%;right:-20%}.login-right{background-color:#fff;flex-direction:column;flex:1;justify-content:center;padding:80px;display:flex}@media (max-width:900px){.login-left{display:none}}.login-form-wrapper{width:100%;max-width:400px;margin:0 auto}.login-title-row{margin-bottom:36px}.login-title-row h2{color:var(--text-primary);margin-bottom:6px;font-size:28px;font-weight:800}.login-title-row p{color:var(--text-secondary);font-size:14px}.form-group{margin-bottom:20px}.form-label{color:var(--text-primary);margin-bottom:8px;font-size:13px;font-weight:600;display:block}.form-input{border-radius:var(--radius-sm);border:1px solid var(--border-color);width:100%;color:var(--text-primary);transition:var(--transition);background-color:#fff;padding:12px 16px;font-size:14px}.form-input:focus{border-color:var(--color-primary);outline:none;box-shadow:0 0 0 3px #bca37426}.form-select{border-radius:var(--radius-sm);border:1px solid var(--border-color);width:100%;color:var(--text-primary);appearance:none;transition:var(--transition);background-color:#fff;background-image:url(data:image/svg+xml;charset=UTF-8,%3Csvg%20xmlns%3D%27http%3A%2F%2Fwww.w3.org%2F2000%2Fsvg%27%20width%3D%2724%27%20height%3D%2724%27%20viewBox%3D%270%200%2024%2024%27%20fill%3D%27none%27%20stroke%3D%27%23718096%27%20stroke-width%3D%272%27%20stroke-linecap%3D%27round%27%20stroke-linejoin%3D%27round%27%3E%3Cpolyline%20points%3D%276%209%2012%2015%2018%209%27%3E%3C%2Fpolyline%3E%3C%2Fsvg%3E);background-position:right 16px center;background-repeat:no-repeat;background-size:16px;padding:12px 16px;font-size:14px}.form-select:focus{border-color:var(--color-primary);outline:none}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);background-color:#00000080;justify-content:center;align-items:center;display:flex;position:fixed;inset:0}.modal-content{border-radius:var(--radius-lg);box-shadow:var(--shadow-lg);background-color:#fff;width:100%;max-width:580px;max-height:90vh;margin:5px;padding:32px;animation:.3s cubic-bezier(.4,0,.2,1) modalAppear;position:relative;overflow-y:auto}.modal-tabs-container{border-bottom:1px solid var(--border-color);scrollbar-width:none;-ms-overflow-style:none;gap:4px;margin-bottom:20px;display:flex;overflow-x:auto}.modal-tabs-container::-webkit-scrollbar{display:none}@keyframes modalAppear{0%{opacity:0;transform:scale(.95)}to{opacity:1;transform:scale(1)}}.modal-close{color:var(--text-secondary);cursor:pointer;transition:var(--transition);background:0 0;border:none;border-radius:50%;padding:6px;position:absolute;top:24px;right:24px}.modal-close:hover{background-color:var(--bg-primary);color:var(--text-primary)}.check-in-circle-container{flex-direction:column;justify-content:center;align-items:center;padding:20px 0;display:flex}.check-in-btn{cursor:pointer;width:140px;height:140px;transition:var(--transition);border:none;border-radius:50%;flex-direction:column;justify-content:center;align-items:center;gap:8px;font-size:16px;font-weight:700;display:flex;box-shadow:0 10px 25px #0000000f}.check-in-btn.check-in{background:linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-hover) 100%);color:var(--sidebar-active-text)}.check-in-btn.check-out{background:linear-gradient(135deg, var(--color-danger) 0%, #dc2626 100%);color:#fff}.check-in-btn:hover{transform:scale(1.03);box-shadow:0 12px 30px #0000001f}.payslip-wrapper{border:1px solid var(--border-color);border-radius:var(--radius-md);box-shadow:var(--shadow-sm);background-color:#fff;max-width:800px;margin:0 auto;padding:40px}.payslip-header{border-bottom:2px solid var(--sidebar-bg);justify-content:space-between;align-items:center;margin-bottom:24px;padding-bottom:24px;display:flex}.payslip-details-grid{grid-template-columns:1fr 1fr;gap:32px;margin-bottom:32px;display:grid}.payslip-table{border-collapse:collapse;width:100%;margin-bottom:32px}.payslip-table th,.payslip-table td{border:1px solid var(--border-color);text-align:left;padding:12px}.payslip-table th{background-color:var(--bg-primary);font-weight:600}.payslip-total-row{background-color:var(--color-primary-light);font-weight:700}@media print{body *{visibility:hidden}.payslip-wrapper,.payslip-wrapper *{visibility:visible}.payslip-wrapper{width:100%;box-shadow:none;border:none;padding:0;position:absolute;top:0;left:0}.no-print{display:none!important}}.login-card{border-radius:var(--radius-md,12px);box-shadow:var(--shadow-lg);background-color:#fff;width:90%;max-width:450px;margin:auto;padding:40px}.login-card h2{color:var(--text-primary,#1e221f);font-weight:800}.login-card p{color:var(--text-secondary,#718096)}.content-container{background-color:#f8f9fb;padding:32px}.card{background-color:#fff!important;border:1px solid #e5e7eb!important;border-radius:16px!important;padding:24px!important;box-shadow:0 1px 3px #0000000d,0 1px 2px #00000008!important}.attendance-marquee-section{margin-bottom:28px}.attendance-marquee-container{scroll-behavior:smooth;scrollbar-width:none;gap:16px;padding:8px 4px 16px;display:flex;overflow-x:auto}.attendance-marquee-container::-webkit-scrollbar{display:none}.marquee-card{background:#fff;border:1px solid #e5e7eb;border-radius:16px;flex-direction:column;flex:0 0 280px;gap:16px;padding:20px;transition:all .2s ease-in-out;display:flex;position:relative;box-shadow:0 1px 3px #0000000d,0 1px 2px #00000008}.marquee-card:hover{border-color:#d1d5db;transform:translateY(-2px);box-shadow:0 4px 6px -1px #0000000d,0 2px 4px -1px #00000008}.marquee-card .avatar{color:#374151;background-color:#f3f4f6;border:1px solid #e5e7eb;border-radius:50%;justify-content:center;align-items:center;width:44px;height:44px;font-size:14px;font-weight:700;display:flex}.marquee-card .emp-name{color:#111827;white-space:nowrap;text-overflow:ellipsis;font-size:14px;font-weight:700;overflow:hidden}.marquee-card .emp-status{align-items:center;gap:6px;display:inline-flex}.status-dot{border-radius:50%;width:8px;height:8px;display:inline-block}.status-dot.present{background-color:#22c55e}.status-dot.absent{background-color:#ef4444}.status-dot.late{background-color:#f97316}.status-dot.wfh{background-color:#3b82f6}.status-dot.on_leave{background-color:#eab308}.status-dot.half_day{background-color:#06b6d4}.status-text.present{color:#22c55e}.status-text.absent{color:#ef4444}.status-text.late{color:#f97316}.status-text.wfh{color:#3b82f6}.status-text.on_leave{color:#eab308}.status-text.half_day{color:#06b6d4}.marquee-card .checkin-time{color:#6b7280;font-size:12px}.marquee-card .action-btn{color:#374151;cursor:pointer;text-align:center;background:#fff;border:1px solid #e5e7eb;border-radius:8px;width:100%;padding:10px 16px;font-size:13px;font-weight:600;transition:all .2s}.marquee-card .action-btn:hover{color:#111827;background:#f9fafb;border-color:#d1d5db}.attendance-stats-grid{grid-template-columns:repeat(4,1fr);gap:16px;margin-bottom:28px;display:grid}@media (max-width:1024px){.attendance-stats-grid{grid-template-columns:repeat(3,1fr)}}@media (max-width:768px){.attendance-stats-grid{grid-template-columns:1fr 1fr}.stat-card-premium{flex-direction:column;align-items:start}}.stat-card-premium{background:#fff;border:1px solid #e5e7eb;border-radius:16px;justify-content:space-between;align-items:center;padding:16px 20px;transition:all .2s;display:flex;box-shadow:0 1px 3px #0000000d,0 1px 2px #00000008}.stat-card-premium:hover{transform:translateY(-1px);box-shadow:0 4px 6px -1px #0000000d}.stat-card.kpi-icon-container{border-radius:12px;justify-content:center;align-items:center;width:48px;height:48px;display:flex}@media (max-width:1024px){.dashboard-layout-grid{grid-template-columns:1fr}}@media (max-width:480px){.mobil{scrollbar-width:none;overflow-x:scroll}}@media (max-width:1024px){.bottom-widgets-grid{grid-template-columns:1fr}}.stat-card-icon-wrapper{border-radius:12px;justify-content:center;align-items:center;width:44px;height:44px;display:flex}.stat-card-premium.present .stat-card-icon-wrapper{color:#22c55e;background-color:#f0fdf4}.stat-card-premium.absent .stat-card-icon-wrapper{color:#ef4444;background-color:#fef2f2}.stat-card-premium.on-leave .stat-card-icon-wrapper{color:#eab308;background-color:#fef9c3}.stat-card-premium.late .stat-card-icon-wrapper{color:#f97316;background-color:#fff7ed}.stat-card-premium.total .stat-card-icon-wrapper{color:#8b5cf6;background-color:#f5f3ff}.stat-card-number{color:#111827;font-size:24px;font-weight:800;line-height:1}.stat-card-label{color:#6b7280;font-size:13px;font-weight:500}.data-table th{color:#6b7280!important;text-transform:uppercase!important;letter-spacing:.05em!important;border-bottom:1px solid #e5e7eb!important;padding:12px 16px!important;font-size:11px!important;font-weight:600!important}.data-table td{border-bottom:1px solid #e5e7eb!important;padding:14px 16px!important;font-size:14px!important}.badge{text-transform:capitalize;align-items:center;gap:6px;display:inline-flex;border-radius:9999px!important;padding:6px 12px!important;font-size:12px!important;font-weight:600!important}.badge-success{color:#16a34a!important;background-color:#f0fdf4!important}.badge-danger{color:#dc2626!important;background-color:#fef2f2!important}.badge-wfh{color:#2563eb!important;background-color:#eff6ff!important}.badge-late{color:#ea580c!important;background-color:#fff7ed!important}.badge-half-day{color:#0891b2!important;background-color:#ecfeff!important}.badge-warning{color:#ca8a04!important;background-color:#fef9c3!important}.attendance-rate-container{align-items:center;gap:8px;width:100%;max-width:140px;display:flex}.attendance-rate-bg{background-color:#f3f4f6;border-radius:9999px;flex:1;height:6px;overflow:hidden}.attendance-rate-fill{border-radius:9999px;height:100%;transition:width .4s}.attendance-rate-fill.high{background-color:#22c55e}.attendance-rate-fill.medium{background-color:#eab308}.attendance-rate-fill.low{background-color:#ef4444}.attendance-rate-text{color:#374151;text-align:right;width:32px;font-size:12px;font-weight:600}.btn-icon{color:#4b5563;cursor:pointer;background-color:#fff;border:1px solid #e5e7eb;border-radius:8px;justify-content:center;align-items:center;width:32px;height:32px;transition:all .2s;display:inline-flex}.btn-icon:hover{color:#111827;background-color:#f9fafb;border-color:#d1d5db}.form-label{color:#374151;margin-bottom:6px;font-size:12px;font-weight:600}.form-select,.form-input{color:#1f2937!important;background-color:#fff!important;border:1px solid #e5e7eb!important;border-radius:8px!important;padding:10px 14px!important;font-size:14px!important;transition:all .2s!important}.form-select:focus,.form-input:focus{border-color:#9ca3af!important;outline:none!important}.search-container-premium{width:100%;position:relative}.search-container-premium input{width:100%;padding-left:38px!important}.search-container-premium svg{color:#9ca3af;position:absolute;top:50%;left:12px;transform:translateY(-50%)}.content-container{padding:32px;background-color:#faf8f5!important}.card-premium{background-color:#fff;border:1px solid #f0ece6;border-radius:16px;margin-bottom:24px;padding:24px;box-shadow:0 4px 20px #00000004,0 2px 4px #00000003}.kpi-grid-premium{grid-template-columns:repeat(5,1fr);gap:16px;margin-bottom:24px;display:grid}@media (max-width:1024px){.kpi-grid-premium{grid-template-columns:repeat(auto-fit,minmax(200px,1fr))}}.kpi-card-premium{background-color:#fff;border:1px solid #f0ece6;border-radius:16px;align-items:center;gap:16px;padding:20px;display:flex;box-shadow:0 4px 12px #00000003}.kpi-icon-container{border-radius:12px;justify-content:center;align-items:center;width:48px;height:48px;display:flex}.kpi-details h4{color:#718096;text-transform:uppercase;letter-spacing:.5px;margin:0 0 4px;font-size:11px;font-weight:700}.kpi-num{color:#1a202c;font-size:24px;font-weight:800;line-height:1.2}.kpi-trend{margin-top:2px;font-size:11px;font-weight:600}.dashboard-layout-grid{grid-template-columns:2fr 1fr;gap:24px;margin-bottom:24px;display:grid}@media (max-width:1024px){.dashboard-layout-grid{grid-template-columns:1fr}}@media (max-width:768px){.dashboard-layout-grid{display:block}}.bottom-widgets-grid{grid-template-columns:repeat(3,1fr);gap:24px;margin-bottom:24px;display:grid}@media (max-width:1024px){.bottom-widgets-grid{grid-template-columns:1fr}}.donut-container{justify-content:space-between;align-items:center;gap:16px;margin-top:16px;display:flex}.donut-legend{flex-direction:column;flex-grow:1;gap:6px;display:flex}.legend-item{justify-content:space-between;align-items:center;gap:8px;font-size:12px;display:flex}.legend-label{color:#4a5568;align-items:center;gap:6px;font-weight:500;display:flex}.legend-dot{border-radius:50%;width:8px;height:8px}.quick-actions-bar{grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:16px;margin-top:16px;display:grid}.quick-action-btn{cursor:pointer;color:#334155;background-color:#faf8f5;border:1px solid #e2e8f0;border-radius:12px;align-items:center;gap:12px;padding:14px 18px;font-size:14px;font-weight:700;text-decoration:none;transition:all .2s;display:flex}.quick-action-btn:hover{background-color:#fff;transform:translateY(-1px);box-shadow:0 4px 12px #0000000d}.settings-layout-grid{grid-template-columns:1fr 3fr;align-items:start;gap:24px;display:grid}.settings-info-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:16px;display:grid}.settings-two-col-grid,.settings-form-grid{grid-template-columns:1fr 1fr;gap:16px;display:grid}.settings-addr-grid{grid-template-columns:2fr 1fr 1fr;gap:16px;display:grid}.sidebar{transition:transform .3s,margin-left .3s!important}.sidebar.hide{margin-left:-260px}@media (max-width:900px){.login-left{display:none!important}.login-right{flex:1;padding:40px 24px!important}.login-form-wrapper{max-width:100%!important}.login-container{height:100dvh}}@media (max-width:1024px){.dashboard-row,.dashboard-row-equal{grid-template-columns:1fr!important}.kpi-grid-premium{grid-template-columns:repeat(auto-fit,minmax(180px,1fr))!important}.dashboard-layout-grid,.bottom-widgets-grid{grid-template-columns:1fr!important}}@media (max-width:768px){.sidebar{top:0;bottom:0;left:0;transform:translate(-100%);z-index:1000!important;width:260px!important;margin-left:0!important;position:fixed!important}.sidebar.show{box-shadow:4px 0 24px #0000004d;transform:translate(0)!important}.sidebar.hide{margin-left:0!important;transform:translate(-100%)!important}.sidebar-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:999;background-color:#00000080;display:block;position:fixed;inset:0}.main-header{height:64px!important;padding:0 16px!important}.header-search-container,.header-user-details{display:none!important}.content-container{padding:16px!important}.page-title-row{flex-direction:column;align-items:flex-start;gap:12px;margin-bottom:20px}.page-title-row h2{font-size:20px!important}.kpi-grid{grid-template-columns:repeat(2,1fr)!important;gap:12px!important;margin-bottom:20px!important}.kpi-grid-premium{grid-template-columns:repeat(2,1fr)!important;gap:12px!important}.kpi-card{gap:12px!important;padding:16px!important}.kpi-card-premium{gap:12px!important;padding:14px!important}.kpi-value{font-size:22px!important}.kpi-num{font-size:20px!important}.card,.card-premium{margin-bottom:16px!important;padding:16px!important}.card-header{flex-direction:column;align-items:flex-start;gap:10px}.data-table{min-width:600px}.data-table th,.data-table td{padding:12px 14px!important;font-size:13px!important}.settings-tabs-nav{flex-wrap:wrap;gap:6px}div[style*="grid-template-columns: 1fr 3fr"],div[style*="grid-template-columns: 1fr 2fr"],div[style*="grid-template-columns: 1fr 1fr"],div[style*="grid-template-columns: 2fr 1fr 1fr"]{flex-direction:column!important;display:flex!important}.modal-overlay{align-items:flex-end!important;padding:0!important}.modal-content{border-radius:20px 20px 0 0!important;width:100%!important;max-width:100%!important;max-height:92dvh!important;padding:24px 20px!important}.btn{padding:10px 14px!important;font-size:13px!important}div[style*="width: 360px"]{width:calc(100vw - 32px)!important;right:-158px!important}.form-label{font-size:13px!important}.quick-actions-bar{grid-template-columns:repeat(2,1fr)!important}.login-card{width:calc(100% - 32px)!important;margin:16px!important;padding:28px 20px!important}.settings-layout-grid,.settings-form-grid,.settings-two-col-grid,.settings-addr-grid{grid-template-columns:1fr!important}.table-wrapper{-webkit-overflow-scrolling:touch;overflow-x:auto}div[style*="grid-template-columns: repeat"]{flex-wrap:wrap!important;display:flex!important}}@media (max-width:480px){.kpi-grid,.kpi-grid-premium,.quick-actions-bar{grid-template-columns:1fr 1fr!important}.main-header{height:60px!important}.modal-content{max-height:95dvh!important}.btn{justify-content:center;width:100%}h2[class],.page-title-row h2{font-size:18px!important}}