*,*:before,*:after{box-sizing:border-box}html,body{margin:0;padding:0}body{font-family:Segoe UI,Tahoma,Arial,system-ui,sans-serif;font-size:14px;line-height:1.6;background:var(--background);color:var(--text);-webkit-font-smoothing:antialiased}h1,h2,h3,h4,h5,h6{margin:0 0 .5em;line-height:1.3;color:var(--text)}a{text-decoration:none;color:inherit}button,input,select,textarea{font:inherit;color:inherit}img{max-width:100%}::-webkit-scrollbar{width:10px;height:10px}::-webkit-scrollbar-track{background:transparent}::-webkit-scrollbar-thumb{background:var(--border);border-radius:999px;border:2px solid transparent;background-clip:content-box}::-webkit-scrollbar-thumb:hover{background:var(--text-muted);border:2px solid transparent;background-clip:content-box}.muted{color:var(--text-muted)}:root{--primary: #2563eb;--primary-dark: #1d4ed8;--primary-light: #dbeafe;--secondary: #64748b;--success: #16a34a;--danger: #dc2626;--warning: #d97706;--background: #f5f7fb;--surface: #ffffff;--border: #e5e7eb;--text: #1f2937;--text-muted: #6b7280;--bg: #f1f5f9;--radius: 10px;--shadow: 0 1px 3px rgba(0, 0, 0, .08);--shadow-lg: 0 8px 30px rgba(0, 0, 0, .14)}[data-theme=dark]{--primary: #3b82f6;--primary-dark: #2563eb;--primary-light: #1e3a5f;--secondary: #94a3b8;--success: #22c55e;--danger: #ef4444;--warning: #f59e0b;--background: #0f172a;--surface: #1e293b;--border: #334155;--text: #e2e8f0;--text-muted: #94a3b8;--bg: #263449;--shadow: 0 1px 3px rgba(0, 0, 0, .4);--shadow-lg: 0 8px 30px rgba(0, 0, 0, .5)}.page{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:1.5rem;box-shadow:var(--shadow)}.page-header{display:flex;justify-content:space-between;align-items:center;gap:12px;flex-wrap:wrap;margin-bottom:20px}.page-header h1{font-size:1.35rem;margin:0}.btn{border:none;border-radius:8px;padding:.65rem 1.1rem;cursor:pointer;font-weight:600;transition:background .15s ease,opacity .15s ease,transform .1s ease;display:inline-flex;align-items:center;justify-content:center;gap:6px;white-space:nowrap}.btn:hover{opacity:.9}.btn:active{transform:translateY(1px)}.btn:disabled{opacity:.55;cursor:not-allowed}.btn-primary{background:var(--primary);color:#fff}.btn-primary:hover{background:var(--primary-dark);opacity:1}.btn-secondary{background:var(--secondary);color:#fff}.btn-danger{background:var(--danger);color:#fff}.btn-sm{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:7px;padding:.4rem .8rem;font-size:.82rem;cursor:pointer;font-weight:600;transition:background .15s ease,border-color .15s ease;display:inline-flex;align-items:center;gap:4px}.btn-sm:hover{background:var(--bg);border-color:var(--text-muted)}.btn-sm:disabled{opacity:.55;cursor:not-allowed}.btn-sm.btn-danger{border-color:transparent;background:var(--danger);color:#fff}.btn-sm.btn-danger:hover{background:var(--danger);opacity:.88}.btn-inline{width:auto}.filters-bar{display:flex;gap:10px;flex-wrap:wrap;align-items:center;margin-bottom:18px}.filters-bar input,.filters-bar select{padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);font-family:inherit}.filters-bar input:focus,.filters-bar select:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}.filters-bar input[type=search]{min-width:260px}.spacer{flex:1}.row-actions{display:flex;gap:6px;flex-wrap:wrap}.badge{display:inline-block;padding:.22em .7em;border-radius:999px;font-size:.75rem;font-weight:700;line-height:1.5;white-space:nowrap;background:var(--bg);color:var(--text-muted)}.badge-approved,.badge-active,.badge-completed,.badge-present,.badge-paid,.badge-success{background:#dcfce7;color:#166534}.badge-pending,.badge-draft,.badge-submitted,.badge-warning{background:#fef3c7;color:#92400e}.badge-late{background:#fed7aa;color:#9a3412}.badge-absent,.badge-terminated,.badge-cancelled,.badge-rejected,.badge-failed,.badge-error{background:#fee2e2;color:#991b1b}.badge-onleave,.badge-processing,.badge-info{background:#dbeafe;color:#1e40af}[data-theme=dark] .badge-approved,[data-theme=dark] .badge-active,[data-theme=dark] .badge-completed,[data-theme=dark] .badge-present,[data-theme=dark] .badge-paid,[data-theme=dark] .badge-success{background:#22c55e26;color:#4ade80}[data-theme=dark] .badge-pending,[data-theme=dark] .badge-draft,[data-theme=dark] .badge-submitted,[data-theme=dark] .badge-warning{background:#f59e0b26;color:#fbbf24}[data-theme=dark] .badge-late{background:#f9731626;color:#fb923c}[data-theme=dark] .badge-absent,[data-theme=dark] .badge-terminated,[data-theme=dark] .badge-cancelled,[data-theme=dark] .badge-rejected,[data-theme=dark] .badge-failed,[data-theme=dark] .badge-error{background:#ef444426;color:#f87171}[data-theme=dark] .badge-onleave,[data-theme=dark] .badge-processing,[data-theme=dark] .badge-info{background:#3b82f626;color:#60a5fa}.card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.1rem 1.25rem}.card-title{font-size:.95rem;margin:0 0 .75rem;color:var(--text)}.card-body h2{font-size:1.7rem;margin:0;color:var(--primary)}.table-wrapper{overflow-x:auto;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface)}.data-table{width:100%;border-collapse:collapse;font-size:.88rem}.data-table th{background:var(--bg);color:var(--text-muted);text-align:start;font-weight:700;padding:.75rem 1rem;border-bottom:1px solid var(--border);white-space:nowrap}.data-table td{padding:.7rem 1rem;border-bottom:1px solid var(--border);vertical-align:middle}.data-table tbody tr:last-child td{border-bottom:none}.data-table tbody tr:hover{background:var(--bg)}.modal-overlay{position:fixed;top:0;right:0;bottom:0;left:0;background:#00000080;display:grid;place-items:center;z-index:500;padding:20px}.modal{background:var(--surface);border-radius:14px;width:100%;max-height:90vh;display:flex;flex-direction:column;box-shadow:var(--shadow-lg);animation:modal-in .18s ease}@keyframes modal-in{0%{opacity:0;transform:translateY(12px) scale(.98)}to{opacity:1;transform:translateY(0) scale(1)}}.modal-header{display:flex;justify-content:space-between;align-items:center;padding:18px 24px;border-bottom:1px solid var(--border)}.modal-header h3{margin:0;font-size:1.05rem}.modal-close{border:none;background:none;font-size:1.1rem;cursor:pointer;color:var(--text-muted);padding:4px 8px;border-radius:6px}.modal-close:hover{background:var(--bg);color:var(--text)}.modal-body{padding:24px;overflow-y:auto}.modal-footer{display:flex;justify-content:flex-start;gap:10px;padding:16px 24px;border-top:1px solid var(--border)}.modal-footer .btn-sm{padding:.55rem 1.1rem;font-size:.88rem}.entity-form fieldset{border:1px solid var(--border);border-radius:var(--radius);padding:18px;margin-bottom:18px}.entity-form legend{padding:0 8px;font-weight:700;font-size:.9rem;color:var(--primary)}.form-grid{display:grid;gap:14px;grid-template-columns:repeat(auto-fit,minmax(210px,1fr))}.form-field{display:flex;flex-direction:column;gap:5px}.form-field label{font-size:.85rem;font-weight:600}.form-field input,.form-field select,.form-field textarea{padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text);font-family:inherit;transition:border-color .15s ease,box-shadow .15s ease}.form-field input:focus,.form-field select:focus,.form-field textarea:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}.form-field input[aria-invalid=true]{border-color:var(--danger)}.req{color:var(--danger);margin-inline-start:3px}.field-error{color:var(--danger);font-size:.78rem}.form-actions{display:flex;gap:10px;justify-content:flex-start;margin-top:6px}.checkbox-field{display:flex;align-items:flex-start;gap:9px;padding:8px 0;cursor:pointer;font-size:.9rem}.checkbox-field input{margin-top:3px}.permission-list{display:flex;flex-direction:column;max-height:380px;overflow-y:auto;border:1px solid var(--border);border-radius:var(--radius);padding:6px 14px}.input-group input{width:100%;padding:9px 12px;border:1px solid var(--border);border-radius:var(--radius);background:var(--surface);color:var(--text)}.input-group input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}.tabs{display:flex;gap:4px;border-bottom:2px solid var(--border);margin-bottom:20px;overflow-x:auto}.tab{border:none;background:none;padding:11px 20px;border-bottom:2px solid transparent;margin-bottom:-2px;color:var(--text-muted);cursor:pointer;font-weight:600;white-space:nowrap}.tab:hover{color:var(--text)}.tab.active{color:var(--primary);border-color:var(--primary);font-weight:700}.details-view section{margin-bottom:22px}.details-view h4{margin:0 0 10px;color:var(--primary);font-size:.95rem}.detail-row{display:flex;justify-content:space-between;gap:12px;padding:8px 0;border-bottom:1px solid var(--border)}.detail-row span{color:var(--text-muted);font-size:.87rem}.detail-row strong{font-size:.9rem}.punch-card{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:14px;background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:20px;box-shadow:var(--shadow)}.punch-card strong{display:block;font-size:1.3rem;margin-top:4px}.punch-actions{display:flex;gap:10px}.total-preview{display:flex;justify-content:space-between;align-items:center;background:var(--bg);padding:14px 18px;border-radius:var(--radius);margin-top:14px}.total-preview strong{font-size:1.25rem;color:var(--primary)}.total{font-weight:700}.stats-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px;margin-bottom:22px}.balance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:16px;margin-bottom:22px}.stat-card{text-align:start}.stat-card.clickable{cursor:pointer;transition:border-color .15s ease,transform .15s ease}.stat-card.clickable:hover{border-color:var(--primary);transform:translateY(-2px)}.chart-row{display:grid;gap:18px;grid-template-columns:repeat(auto-fit,minmax(330px,1fr));margin-top:22px}.chart-card{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;box-shadow:var(--shadow)}.chart-card h3{margin:0 0 18px;font-size:.95rem}.chart-box{min-height:220px}.bar-chart{display:flex;align-items:flex-end;gap:10px;height:180px}.bar-col{flex:1;display:flex;flex-direction:column;align-items:center;justify-content:flex-end;height:100%;gap:6px}.bar{width:100%;max-width:46px;background:var(--primary);border-radius:5px 5px 0 0;min-height:4px;transition:height .3s ease}.bar-col small{font-size:.68rem;color:var(--text-muted)}.hbar-chart{display:flex;flex-direction:column;gap:11px}.hbar-row{display:grid;grid-template-columns:110px 1fr 36px;align-items:center;gap:10px}.hbar-label{font-size:.82rem;color:var(--text-muted)}.hbar-track{background:var(--bg);border-radius:999px;height:9px;overflow:hidden}.hbar-fill{background:var(--primary);height:100%;border-radius:999px}.bell{position:relative;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:1.05rem;cursor:pointer;width:36px;height:36px;display:grid;place-items:center;border-radius:8px;transition:border-color .15s ease,background .15s ease}.bell:hover{border-color:var(--primary);background:var(--bg)}.bell-badge{position:absolute;top:-3px;inset-inline-end:-6px;background:var(--danger);color:#fff;border-radius:999px;font-size:.62rem;padding:1px 5px;font-weight:700}.dot{display:inline-block;width:8px;height:8px;border-radius:50%;background:transparent}.dot.unread{background:var(--primary)}.strength-bar{height:5px;background:var(--border);border-radius:999px;overflow:hidden;margin-top:5px}.strength-fill{height:100%;transition:width .2s}.strength-fill.s1,.strength-fill.s2{background:var(--danger)}.strength-fill.s3,.strength-fill.s4{background:var(--warning)}.strength-fill.s5{background:var(--success)}.toast-stack{position:fixed;inset-block-end:24px;inset-inline-start:24px;z-index:999;display:flex;flex-direction:column;gap:10px}.toast{padding:13px 20px;border-radius:var(--radius);color:#fff;box-shadow:var(--shadow-lg);min-width:260px;animation:toast-in .2s ease}@keyframes toast-in{0%{opacity:0;transform:translateY(10px)}to{opacity:1;transform:translateY(0)}}.toast-success{background:var(--success)}.toast-error{background:var(--danger)}.toast-info{background:var(--primary)}.spinner-inline{display:flex;gap:10px;align-items:center;justify-content:center;padding:24px;color:var(--text-muted)}.spinner-fullscreen{min-height:60vh;display:flex;align-items:center;justify-content:center;gap:10px;color:var(--text-muted)}.spinner-ring{width:24px;height:24px;border:3px solid var(--border);border-top-color:var(--primary);border-radius:50%;animation:spin .7s linear infinite}@keyframes spin{to{transform:rotate(360deg)}}.alert{padding:12px 16px;border-radius:var(--radius);font-size:.9rem;display:flex;align-items:center;gap:12px;justify-content:space-between;flex-wrap:wrap}.alert-error{background:#fee2e2;color:#991b1b;border:1px solid #fecaca}[data-theme=dark] .alert-error{background:#ef44441f;color:#f87171;border-color:#ef44444d}.empty-state{text-align:center;color:var(--text-muted);padding:40px 16px;border:1px dashed var(--border);border-radius:var(--radius);margin:0}.pagination{display:flex;align-items:center;justify-content:center;gap:16px;margin-top:18px;color:var(--text-muted);font-size:.88rem}.pagination button{border:1px solid var(--border);background:var(--surface);color:var(--text);border-radius:7px;padding:6px 14px;cursor:pointer;font-weight:600}.pagination button:hover:not(:disabled){border-color:var(--primary);color:var(--primary)}.pagination button:disabled{opacity:.5;cursor:not-allowed}.payslip{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:26px;max-width:760px;margin:0 auto}.payslip-head{display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:10px;border-bottom:2px solid var(--border);padding-bottom:14px;margin-bottom:18px}.payslip-head h3{margin:0;color:var(--primary)}.payslip-cols{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px}.payslip-cols .detail-row{border-bottom:none;padding:6px 0}.payslip-net{margin-top:18px;background:var(--bg);border-radius:var(--radius);padding:14px 18px;display:flex;justify-content:space-between;align-items:center}.payslip-net strong{font-size:1.35rem;color:var(--primary)}.activity-box{display:flex;flex-direction:column}.activity-item{display:flex;gap:12px;padding:10px 0;border-bottom:1px solid var(--border);align-items:flex-start}.activity-item:last-child{border-bottom:none}.activity-item .dot{margin-top:7px;flex-shrink:0}.activity-item small{color:var(--text-muted);display:block}.calendar-grid{display:grid;grid-template-columns:repeat(7,1fr);gap:6px}.calendar-box{background:var(--surface);border:1px solid var(--border);border-radius:var(--radius);padding:20px;margin-bottom:20px}.calendar-day{border:1px solid var(--border);border-radius:8px;min-height:64px;padding:6px;font-size:.78rem;display:flex;flex-direction:column;gap:4px;background:var(--surface)}.calendar-day strong{font-size:.85rem}.day-present{background:#dcfce7;border-color:#86efac}.day-absent{background:#fee2e2;border-color:#fca5a5}.day-late{background:#fed7aa;border-color:#fdba74}.day-leave{background:#dbeafe;border-color:#93c5fd}.day-today{outline:2px solid var(--primary)}.day-weekend{background:var(--bg);color:var(--text-muted)}[data-theme=dark] .day-present{background:#22c55e1f}[data-theme=dark] .day-absent{background:#ef44441f}[data-theme=dark] .day-late{background:#f973161f}[data-theme=dark] .day-leave{background:#3b82f61f}.loader-wrap{position:fixed;top:0;right:0;bottom:0;left:0;display:grid;place-items:center;background:var(--background);z-index:900}.loader{display:flex;flex-direction:column;align-items:center;gap:14px;color:var(--text-muted);font-weight:600}.lang-switch-wrap{display:inline-flex;align-items:center;gap:6px;border:1px solid var(--border);background:var(--surface);border-radius:8px;padding:4px 8px;cursor:pointer}.lang-switch-wrap:hover{border-color:var(--primary)}.lang-switch{border:none;background:transparent;color:var(--text);font-size:.82rem;cursor:pointer;font-weight:600;outline:none}.lang-switch:hover{color:var(--primary)}.app-header,.app-footer{background:var(--surface);border-bottom:1px solid var(--border);padding:1rem 1.5rem}.app-footer{border-top:1px solid var(--border);border-bottom:none}.app-content{flex:1;padding:1.5rem}.app-main{flex:1;display:flex;flex-direction:column}.app-sidebar{width:240px;background:#111827;color:#fff;padding:1rem}.sidebar-brand{font-size:1.25rem;font-weight:700;margin-bottom:1rem}.sidebar-nav{display:flex;flex-direction:column;gap:.75rem}.sidebar-nav a{padding:.5rem .75rem;border-radius:6px}.sidebar-nav a.active{background:#2563eb}.app-shell{display:flex;min-height:100vh}.sidebar{width:250px;flex-shrink:0;background:#111827;color:#e5e7eb;display:flex;flex-direction:column;padding:1.1rem .9rem;position:sticky;top:0;height:100vh;overflow-y:auto;z-index:300;transition:transform .22s ease}[data-theme=dark] .sidebar{background:#0b1220;border-inline-end:1px solid var(--border)}.sidebar .brand{font-size:1.3rem;font-weight:800;color:#fff;padding:.4rem .8rem 1rem;border-bottom:1px solid rgba(255,255,255,.1);margin-bottom:1rem;letter-spacing:.3px}.sidebar nav{display:flex;flex-direction:column;gap:4px}.sidebar .nav-item{display:flex;align-items:center;gap:10px;padding:.6rem .85rem;border-radius:8px;color:#cbd5e1;font-size:.9rem;font-weight:600;transition:background .15s ease,color .15s ease}.sidebar .nav-item:hover{background:#ffffff12;color:#fff}.sidebar .nav-item.active{background:var(--primary);color:#fff}.sidebar .nav-item span{font-size:1.05rem}.main-area{flex:1;min-width:0;display:flex;flex-direction:column}.topbar{display:flex;align-items:center;justify-content:space-between;gap:12px;min-height:60px;padding:.5rem 1.4rem;background:var(--surface);border-bottom:1px solid var(--border);position:sticky;top:0;z-index:200}.topbar-start{display:flex;align-items:center;gap:12px;min-width:0}.topbar-title{display:flex;align-items:center;gap:8px}.topbar-title-icon{font-size:1.15rem}.topbar-title h2{margin:0;font-size:1.05rem;font-weight:700;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.topbar-actions{display:flex;align-items:center;gap:8px;flex-wrap:wrap}.burger{display:none;border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:1.15rem;border-radius:8px;padding:4px 12px;cursor:pointer}.icon-btn{border:1px solid var(--border);background:var(--surface);color:var(--text);font-size:1rem;border-radius:8px;width:36px;height:36px;display:grid;place-items:center;cursor:pointer;transition:border-color .15s ease,background .15s ease}.icon-btn:hover{border-color:var(--primary);background:var(--bg)}.user-chip{display:flex;align-items:center;gap:10px;padding-inline-start:14px;border-inline-start:1px solid var(--border);margin-inline-start:4px}.user-avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,var(--primary),var(--primary-dark));color:#fff;display:grid;place-items:center;font-size:.8rem;font-weight:700;flex-shrink:0;-webkit-user-select:none;user-select:none}.user-meta{display:flex;flex-direction:column;line-height:1.3;min-width:0}.user-meta strong{font-size:.85rem;white-space:nowrap;overflow:hidden;text-overflow:ellipsis}.user-meta small{color:var(--text-muted);font-size:.72rem}.btn-logout{border:1px solid var(--border);background:var(--surface);color:var(--danger);font-size:.82rem;font-weight:600;border-radius:8px;padding:6px 14px;cursor:pointer;transition:border-color .15s ease,background .15s ease}.btn-logout:hover{border-color:var(--danger);background:color-mix(in srgb,var(--danger) 8%,transparent)}.content{flex:1;padding:1.5rem;max-width:1400px;width:100%;margin-inline:auto}.backdrop{display:none}@media (max-width: 900px){.sidebar{position:fixed;inset-block-start:0;inset-inline-end:0;transform:translate(100%);height:100vh;box-shadow:var(--shadow-lg)}.sidebar.open{transform:translate(0)}.burger{display:inline-flex;align-items:center}.backdrop{display:block;position:fixed;top:0;right:0;bottom:0;left:0;background:#00000073;z-index:250}.content{padding:1rem}.topbar-title,.user-chip{display:none}}.auth-page{min-height:100vh;display:grid;place-items:center;padding:24px;background:linear-gradient(135deg,#2563eb,#1d4ed8 55%,#172554)}[data-theme=dark] .auth-page{background:linear-gradient(135deg,#1e293b,#0f172a)}.auth-card{width:100%;max-width:420px;background:var(--surface);padding:2.2rem 2rem;border-radius:18px;display:flex;flex-direction:column;gap:1rem;box-shadow:0 20px 50px #00000040;animation:auth-in .25s ease}@keyframes auth-in{0%{opacity:0;transform:translateY(14px)}to{opacity:1;transform:translateY(0)}}.auth-card h2{margin:0 0 .35rem;text-align:center;font-size:1.5rem;color:var(--text)}.auth-card .auth-subtitle{text-align:center;color:var(--text-muted);font-size:.85rem;margin:-.4rem 0 .2rem}.auth-card input{padding:.85rem 1rem;border:1px solid var(--border);border-radius:10px;background:var(--surface);color:var(--text);width:100%;transition:border-color .15s ease,box-shadow .15s ease}.auth-card input:focus{outline:none;border-color:var(--primary);box-shadow:0 0 0 3px var(--primary-light)}.auth-card .btn{width:100%;padding:.85rem;font-size:.95rem;border-radius:10px}.auth-card .btn:disabled{opacity:.6;cursor:wait}.auth-links{display:flex;justify-content:space-between;align-items:center;font-size:.82rem;margin-top:.2rem}.auth-links a{color:var(--primary);font-weight:600}.auth-links a:hover{text-decoration:underline}.auth-link{color:var(--primary);font-weight:600;font-size:.82rem}.auth-link:hover{text-decoration:underline}.error-text{color:var(--danger);font-size:.85rem;font-weight:600;background:color-mix(in srgb,var(--danger) 10%,transparent);border:1px solid color-mix(in srgb,var(--danger) 30%,transparent);border-radius:8px;padding:.55rem .8rem;margin:0}