:root{--bg:#eef2f7;--bg-soft:#f7f9fc;--surface:#fff;--surface-2:#f3f6fb;--line:#d8e0ea;--text:#152033;--muted:#5d6b82;--accent:#1f4b99;--accent-soft:#e8effc;--accent-2:#c45c26;--success:#1f7a54;--warning:#b7791f;--danger:#c03543;--shadow:0 10px 30px #15203314;--nav-width:260px;--font-display:"IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--font-brand:"Fraunces", Georgia, serif;--font-body:"IBM Plex Sans", -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif;--radius:14px}*{box-sizing:border-box}html,body,#root{min-height:100%}body{color:var(--text);font-family:var(--font-body);background:linear-gradient(180deg, #1f4b990f, transparent 220px), radial-gradient(circle at top right, #c45c2614, transparent 28%), var(--bg);margin:0}a{color:inherit;text-decoration:none}button,input,select{font:inherit}.app-shell{grid-template-columns:var(--nav-width) 1fr;min-height:100vh;display:grid}.sidebar{color:#edf2f8;background:linear-gradient(#13233f 0%,#182946 100%);border-right:1px solid #ffffff0f;height:100vh;padding:1.1rem .9rem 1.5rem;position:sticky;top:0;overflow:auto}.brand{border-bottom:1px solid #ffffff14;margin-bottom:.6rem;padding:.55rem .8rem 1.2rem}.brand h1{font-family:var(--font-brand);letter-spacing:-.02em;color:#fff;margin:0;font-size:1.45rem}.brand p{color:#9fb0c8;margin:.35rem 0 0;font-size:.84rem}.nav-section{margin-top:.35rem}.nav-section-toggle{color:#8ea0ba;letter-spacing:.08em;text-transform:uppercase;cursor:pointer;background:0 0;border:0;border-radius:0;justify-content:space-between;align-items:center;gap:.5rem;width:100%;margin:0;padding:.55rem .8rem;font-size:.7rem;font-weight:700;transition:color .15s;display:flex}.nav-section-toggle:hover{color:#d7e2f2;background:0 0}.nav-section.active-section>.nav-section-toggle{color:#c9daf5}.nav-chevron{opacity:.8;flex-shrink:0;transition:transform .18s}.nav-section.open>.nav-section-toggle .nav-chevron{transform:rotate(180deg)}.nav-section-items{flex-direction:column;gap:.1rem;padding:.15rem 0 .25rem;display:flex}.nav-section h3{color:#8ea0ba;letter-spacing:.08em;text-transform:uppercase;margin:.7rem .8rem .3rem;font-size:.7rem}.nav-link{color:#d7e1ef;opacity:.9;border-radius:10px;padding:.55rem .8rem;display:block}.nav-link:hover,.nav-link.active{color:#fff;opacity:1;background:#ffffff1a}.main{padding:1.35rem 1.5rem 2rem}.topbar{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:1.25rem;margin-bottom:1.25rem;padding:.35rem 0 1rem;display:flex}.topbar h2,.page-heading{font-family:var(--font-body);letter-spacing:-.025em;color:#0f172a;margin:0;font-size:1.55rem;font-weight:700;line-height:1.25}.topbar .meta,.page-subheading{color:var(--muted);margin:.2rem 0 0;font-size:.84rem}.ess-toolbar,.page-toolbar{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);flex-wrap:wrap;justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.25rem;padding:.65rem .95rem;display:flex;box-shadow:0 1px 3px #00000008}.ess-toolbar-desc,.page-toolbar-desc{color:var(--muted);margin:0;font-size:.84rem}.ess-toolbar-actions,.page-toolbar-actions{flex-wrap:wrap;align-items:center;gap:.65rem;display:flex}.ess-month-select-label{color:#475569;align-items:center;gap:.45rem;font-size:.8rem;font-weight:600;display:inline-flex}.panel{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);padding:1.1rem 1.15rem}.grid{gap:1rem;display:grid}.grid.stats{grid-template-columns:repeat(4,minmax(0,1fr))}.stat{border-radius:var(--radius);background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);padding:1rem 1.05rem}.stat .label{color:var(--muted);font-size:.84rem}.stat .value{font-family:var(--font-display);color:#13233f;margin-top:.35rem;font-size:1.85rem}.table-wrap{overflow:auto}.table{border-collapse:collapse;width:100%}.table th,.table td{border-bottom:1px solid var(--line);text-align:left;white-space:nowrap;padding:.78rem .55rem;font-size:.93rem}.table th{color:var(--muted);background:var(--surface-2);font-weight:600}.table tr:hover td{background:#f8fafc}.toolbar{flex-wrap:wrap;align-items:center;gap:.7rem;margin-bottom:1rem;display:flex}.field{color:var(--muted,#5d6b82);text-align:left;flex-direction:column;gap:.38rem;font-size:.84rem;font-weight:600;display:flex}.field .input,.input{border:1px solid var(--line,#d8e0ea);color:var(--text,#152033);box-sizing:border-box;background:#fff;border-radius:8px;width:100%;padding:.62rem .85rem;font-size:.88rem;transition:all .15s}.input:focus{border-color:var(--accent,#1f4b99);outline:none;box-shadow:0 0 0 3px #1f4b9926}.button{border:1px solid var(--accent,#1f4b99);background:var(--accent,#1f4b99);color:#fff;cursor:pointer;border-radius:8px;justify-content:center;align-items:center;padding:.62rem 1.1rem;font-size:.88rem;font-weight:600;text-decoration:none;transition:all .15s;display:inline-flex}.button:hover:not(:disabled){background:#183d82;border-color:#183d82;box-shadow:0 4px 12px #1f4b9940}.button.secondary{color:var(--text,#152033);border-color:var(--line,#d8e0ea);background:#fff}.button.secondary:hover:not(:disabled){background:var(--surface-2,#f3f6fb);box-shadow:none;border-color:#b9c7d8}.button.small{padding:.38rem .75rem;font-size:.8rem}.button:disabled,.icon-btn:disabled{opacity:.45;cursor:not-allowed}.icon-btn{border:1px solid var(--line);width:38px;height:38px;color:var(--text);cursor:pointer;background:#fff;border-radius:10px;justify-content:center;align-items:center;transition:background-color .15s,border-color .15s,color .15s,transform .15s;display:inline-flex}.icon-btn:hover:not(:disabled){background:var(--accent-soft);color:var(--accent);border-color:#b7c9ea;transform:translateY(-1px)}.icon-btn.primary{color:#fff;background:#1f4b99;border-color:#1f4b99}.icon-btn.primary:hover:not(:disabled){color:#fff;background:#183d82;border-color:#183d82}.icon-btn.refresh{color:#1f6f8a;background:#e5f5fa;border-color:#9fd0df}.icon-btn.refresh:hover:not(:disabled){color:#15586c;background:#d3eef6;border-color:#6fb6cb}.icon-btn.sync{color:#5b3d99;background:#f1ebfb;border-color:#c9b6eb}.icon-btn.sync:hover:not(:disabled){color:#452d78;background:#e6dbf7;border-color:#b09ad9}.icon-btn.template{color:#8a4b12;background:#fff1e4;border-color:#efc39a}.icon-btn.template:hover:not(:disabled){color:#6e3a0c;background:#ffe4cc;border-color:#e0a56a}.icon-btn.download{color:#0d5c42;background:#e7f6ef;border-color:#8fceb0}.icon-btn.download:hover:not(:disabled){color:#094a35;background:#d4efe3;border-color:#5fb58d}.icon-btn.download .download-icon,.icon-btn.template .download-icon{stroke-width:3.2px}.icon-btn.upload{color:#0f6e7a;background:#e4f6f8;border-color:#9cd5db}.icon-btn.upload:hover:not(:disabled){color:#0b5660;background:#d1eef1;border-color:#6cbcc5}.icon-btn.view{color:#1f5f99;background:#e8f1fb;border-color:#a9c6e8}.icon-btn.view:hover:not(:disabled){color:#164a78;background:#d9e8f8;border-color:#7eaddc}.icon-btn.edit{color:#9a6b12;background:#fff6df;border-color:#efd48e}.icon-btn.edit:hover:not(:disabled){color:#7a540c;background:#ffefc7;border-color:#e0bf5c}.icon-btn.danger{color:#c03543;background:#fde8ea;border-color:#efb4ba}.icon-btn.danger:hover:not(:disabled){color:#9f2a35;background:#f9d5d9;border-color:#e48d97}.employees-toolbar{align-items:center}.leave-plan-year-field{flex-direction:column;gap:.45rem;min-width:120px;margin:0;display:flex}.leave-plan-year-field .input{width:120px;min-width:120px}.leave-plan-toolbar{align-items:flex-end;gap:.75rem}.leave-plan-toolbar .toolbar-icons{align-self:flex-end;padding-bottom:.05rem}.leave-plan-toolbar a.icon-btn{text-decoration:none}.leave-balances-toolbar .toolbar-icons{align-self:flex-end;padding-bottom:.05rem}.leave-balances-search{flex:220px;align-self:flex-end;min-width:180px;max-width:320px}.leave-balances-toolbar .leave-balances-pagination{align-self:flex-end;margin:0 0 0 auto}.leave-balances-count{align-self:flex-end;padding-bottom:.55rem}.search-input{flex:320px;min-width:min(480px,100%);padding:.75rem 1rem;font-size:.98rem}.toolbar-icons,.row-actions{align-items:center;gap:.4rem;display:inline-flex}.pagination{justify-content:flex-end;align-items:center;gap:.75rem;margin-top:.9rem;display:flex}.pagination.pagination-inline{margin:0 0 0 auto}.live-attendance-toolbar{flex-wrap:wrap}.live-search-input{flex:0 280px;min-width:0;max-width:280px;padding:.6rem .8rem;font-size:.92rem}.live-pill{color:#0d5c42;letter-spacing:.06em;background:#e8f8ef;border:1px solid #9fd4b3;border-radius:999px;align-items:center;gap:.45rem;padding:.35rem .7rem;font-size:.78rem;font-weight:700;display:inline-flex}.live-dot{background:#16a34a;border-radius:50%;width:8px;height:8px;animation:1.6s ease-out infinite live-pulse;box-shadow:0 0 #16a34a8c}@keyframes live-pulse{0%{box-shadow:0 0 #16a34a8c}70%{box-shadow:0 0 0 10px #16a34a00}to{box-shadow:0 0 #16a34a00}}.live-meta{flex-wrap:wrap;align-items:center;gap:.65rem;margin-left:auto;display:inline-flex}.present-count{color:#0d5c42;background:#e7f6ef;border:1px solid #8fceb0;border-radius:999px;align-items:baseline;gap:.2rem;padding:.35rem .7rem;font-size:.86rem;font-weight:600;display:inline-flex}.present-count strong{color:#094a35;font-size:1.05rem;font-weight:700}.present-count-total{color:#3d7a5f;font-weight:500}.employee-combo{position:relative}.employee-combo-list{z-index:20;border:1px solid var(--line);background:#fff;border-radius:10px;max-height:220px;margin:0;padding:.35rem;list-style:none;position:absolute;top:calc(100% + 4px);left:0;right:0;overflow:auto;box-shadow:0 10px 28px #101c301f}.employee-combo-option{width:100%;color:var(--text);text-align:left;cursor:pointer;background:0 0;border:0;border-radius:8px;flex-direction:column;align-items:flex-start;gap:.15rem;padding:.55rem .65rem;display:flex}.employee-combo-option:hover,.employee-combo-option.selected{background:var(--accent-soft)}.employee-combo-empty{padding:.65rem;font-size:.88rem}.modal-dialog-sm{width:min(520px,100%)}.modal-form-single{grid-template-columns:1fr 1fr}.badge{background:var(--accent-soft);color:var(--accent);border-radius:999px;align-items:center;padding:.18rem .55rem;font-size:.75rem;font-weight:600;display:inline-flex}.badge.ok{color:var(--success);background:#e7f6ef}.badge.warn{color:var(--warning);background:#fff4df}.badge.danger{color:var(--danger);background:#fde8ea}.login-page{background:linear-gradient(135deg,#102038 0%,#1d355d 48%,#274678 100%);place-items:center;min-height:100vh;padding:1.5rem;display:grid}.login-card{background:#fff;border-radius:18px;width:min(420px,100%);padding:1.7rem;box-shadow:0 24px 60px #00000040}.login-card h1{font-family:var(--font-display);color:#14233d;margin:0;font-size:2.2rem}.login-card p{color:var(--muted)}.login-card form{gap:.8rem;margin-top:1.15rem;display:grid}.error{color:var(--danger);margin:.4rem 0 0}.muted{color:var(--muted)}.empty{text-align:center;color:var(--muted);background:var(--surface-2);border-radius:12px;padding:1.4rem}.page-title{font-family:var(--font-display);letter-spacing:-.02em;margin:0 0 .9rem;font-size:1.45rem;font-weight:600}.modal-overlay{z-index:1000;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#101c308c;place-items:center;padding:.75rem;display:grid;position:fixed;inset:0;overflow:hidden}.modal-dialog{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);width:min(920px,100%);max-height:min(90vh,900px);padding:1.15rem 1.25rem 1.25rem;overflow:auto;box-shadow:0 24px 60px #15203347}.modal-header{border-bottom:1px solid var(--line);justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1rem;padding-bottom:.75rem;display:flex}.modal-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem 1rem;display:grid}.modal-form .field{color:var(--muted);gap:.35rem;font-size:.85rem;font-weight:600;display:grid}.modal-form .field .input{width:100%;min-width:0}.modal-form-error{grid-column:1/-1;margin:0}.modal-actions{border-top:1px solid var(--line);grid-column:1/-1;justify-content:flex-end;gap:.7rem;margin-top:.35rem;padding-top:.75rem;display:flex}.add-employee-modal{box-sizing:border-box;flex-direction:column;width:min(960px,100vw - 1.5rem);max-height:calc(100dvh - 1.5rem);padding:.85rem 1rem .9rem;display:flex;overflow:hidden}.add-employee-modal .modal-header{flex:none;margin-bottom:.55rem;padding-bottom:.45rem}.add-employee-modal .modal-header .page-title{font-size:1.15rem}.add-employee-modal .modal-form.modal-form-compact{flex:auto;grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:.35rem .65rem;min-height:0;overflow:hidden}.add-employee-modal .modal-form-compact .field{gap:.15rem;font-size:.72rem}.add-employee-modal .modal-form-compact .field .input{min-height:30px;padding:.3rem .5rem;font-size:.84rem}.add-employee-modal .modal-form-compact .modal-actions{margin-top:.05rem;padding-top:.4rem}.add-employee-modal .modal-form-compact .modal-form-error{margin:0;font-size:.8rem}.modal-dialog-noscroll{max-height:none;overflow:visible}.apply-leave-dialog{width:min(560px,100%)}.apply-leave-form{gap:.65rem .85rem}.apply-leave-form .field-row{grid-template-columns:1fr 1fr;gap:.65rem .85rem;display:grid}.apply-leave-form .modal-actions{margin-top:.25rem}.apply-leave-form .employee-combo-list{max-height:160px}@media (width<=900px){.add-employee-modal .modal-form.modal-form-compact{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=700px){.modal-form{grid-template-columns:1fr}.add-employee-modal .modal-form.modal-form-compact{grid-template-columns:1fr;overflow:auto}}.employee-form-panel{box-sizing:border-box;background:var(--surface);border-radius:var(--radius);border:1px solid var(--line);width:100%;max-width:1200px;box-shadow:var(--shadow);margin:0 auto;padding:1.5rem}.employee-form-toolbar{border-bottom:1px solid var(--line);align-items:center;gap:.85rem;margin-bottom:1.25rem;padding-bottom:.85rem;display:flex}.employee-form-toolbar .page-title{font-size:1.35rem;font-weight:700}.employee-form-grid{grid-template-columns:repeat(3,minmax(0,1fr));align-content:start;gap:1.25rem;width:100%;display:grid}.employee-form-grid .field{color:var(--text-h);flex-direction:column;gap:.35rem;font-size:.82rem;font-weight:600;display:flex}.employee-form-grid .field .input{box-sizing:border-box;border-radius:8px;width:100%;min-width:0;min-height:40px;padding:.6rem .85rem;font-size:.92rem}.employee-form-actions{border-top:1px solid var(--line);grid-column:1/-1;justify-content:flex-end;gap:.85rem;margin-top:1.5rem;padding-top:1rem;display:flex}.employee-form-section{border-top:1px solid var(--line);flex-direction:column;grid-column:1/-1;gap:.75rem;margin-top:.5rem;padding-top:.85rem;display:flex}.employee-form-grid.salary-step{flex-direction:column;gap:1rem;width:100%;display:flex}.employee-form-grid.salary-step .salary-step-section{border-top:none;gap:1rem;width:100%;margin-top:0;padding-top:0}.salary-step-top{flex:none;grid-template-columns:minmax(0,1.4fr) minmax(0,.8fr) auto;align-items:end;gap:.65rem .85rem;display:grid}.salary-step-top .field{margin:0}.salary-step-top .field .input{min-height:34px;padding:.4rem .65rem;font-size:.86rem}.salary-step-tools{padding-bottom:.1rem}.employee-form-grid.salary-step .employee-salary-preview{flex:auto;min-height:0;margin:0;display:block;overflow:auto}.employee-form-grid.salary-step .salary-components-table{table-layout:fixed;width:100%}.employee-form-grid.salary-step .salary-components-table th,.employee-form-grid.salary-step .salary-components-table td{vertical-align:middle;padding:.35rem .45rem;font-size:.84rem}.employee-form-grid.salary-step .salary-components-table .input{width:100%;min-width:0;min-height:32px;padding:.3rem .5rem;font-size:.84rem}.employee-form-grid.salary-step .employee-form-actions{flex:none;margin-top:0;padding-top:.55rem}.employee-form-section-title{color:var(--text);margin:0;font-size:.95rem;font-weight:650}.employee-steps{flex-wrap:wrap;flex:none;align-items:center;gap:.65rem;margin:0 0 .65rem;display:flex}.employee-step{border:1px solid var(--line);color:var(--text);cursor:pointer;background:#fff;border-radius:999px;align-items:center;gap:.45rem;padding:.35rem .75rem .35rem .35rem;font-size:.9rem;font-weight:600;display:inline-flex}.employee-step.active{border-color:var(--accent);color:var(--accent);background:#eef4ff}.employee-step-num{width:1.55rem;height:1.55rem;color:inherit;background:#e8eef8;border-radius:999px;justify-content:center;align-items:center;font-size:.8rem;display:inline-flex}.employee-step.active .employee-step-num{background:var(--accent);color:#fff}.employee-step-sep{background:var(--line);width:1.5rem;height:2px}.employee-form-section-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem 1.15rem;display:grid}.employee-salary-preview{margin-top:.15rem}.table tr.row-selected td{background:#eef4ff}.employee-form-actions .button,.employee-form-actions a.button{align-items:center;text-decoration:none;display:inline-flex}@media (width<=1100px){.employee-form-grid{grid-template-columns:repeat(3,minmax(0,1fr));row-gap:1.15rem}}@media (width<=900px){.employee-form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1.1rem .95rem}.employee-form-section-grid{grid-template-columns:1fr}}@media (width<=640px){.employee-form-grid{grid-template-columns:1fr;row-gap:1rem;overflow:auto}.employee-form-grid.salary-step{overflow:hidden}.salary-step-top{grid-template-columns:1fr}}@media (width<=860px){.app-shell{grid-template-columns:1fr}.sidebar{height:auto;position:relative}}.modal-backdrop,.modal-overlay{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:9999;background:#0f172aa6;justify-content:center;align-items:center;padding:1rem;animation:.15s ease-out modal-fade-in;display:flex;position:fixed;inset:0;overflow-y:auto}.modal,.modal-dialog,.modal-card{color:var(--text,#152033);border:1px solid var(--line,#e2e8f0);background:#fff;border-radius:14px;width:min(620px,95vw);max-height:90vh;padding:1.5rem;animation:.2s cubic-bezier(.16,1,.3,1) modal-scale-in;position:relative;overflow-y:auto;box-shadow:0 25px 50px -12px #0f172a59,0 0 0 1px #0000000d}.modal-header{border-bottom:1px solid var(--line,#e2e8f0);justify-content:space-between;align-items:center;margin-bottom:1.25rem;padding-bottom:.75rem;display:flex}.modal-header h3,.modal-card h3{color:var(--text,#152033);margin:0;font-size:1.2rem;font-weight:700}.modal-actions{border-top:1px solid var(--line,#e2e8f0);justify-content:flex-end;gap:.75rem;margin-top:1.25rem;padding-top:.85rem;display:flex}@keyframes modal-fade-in{0%{opacity:0}to{opacity:1}}@keyframes modal-scale-in{0%{opacity:0;transform:scale(.96)translateY(-8px)}to{opacity:1;transform:scale(1)translateY(0)}}.dashboard-container{flex-direction:column;gap:1.5rem;width:100%;display:flex}.dashboard-hero{color:#fff;border-radius:var(--radius);background:linear-gradient(135deg,#10233f 0%,#17325c 60%,#1f4b99 100%);justify-content:space-between;align-items:center;gap:1.5rem;padding:1.75rem 2rem;display:flex;position:relative;overflow:hidden;box-shadow:0 12px 32px #10233f29}.dashboard-hero:before{content:"";pointer-events:none;background:radial-gradient(circle,#ffffff14 0%,#0000 70%);border-radius:50%;width:220px;height:220px;position:absolute;top:-40px;right:-40px}.hero-tag{letter-spacing:.1em;color:#93c5fd;text-transform:uppercase;align-items:center;gap:.5rem;margin-bottom:.4rem;font-size:.68rem;font-weight:700;display:inline-flex}.live-indicator-dot{background-color:#34d399;border-radius:50%;width:7px;height:7px;animation:2s infinite pulse;box-shadow:0 0 0 3px #34d39959}@keyframes pulse{0%{transform:scale(.95);box-shadow:0 0 #34d399b3}70%{transform:scale(1);box-shadow:0 0 0 6px #34d39900}to{transform:scale(.95);box-shadow:0 0 #34d39900}}.hero-title{font-family:var(--font-display);letter-spacing:-.02em;color:#fff;margin:0;font-size:1.75rem;font-weight:600}.hero-subtitle{color:#cbd5e1;max-width:680px;margin:.45rem 0 0;font-size:.88rem;line-height:1.5}.hero-subtitle strong{color:#fff;font-weight:600}.hero-actions{flex-shrink:0;align-items:center;gap:.65rem;display:flex}.accent-btn{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);color:#fff!important;background:#ffffff26!important;border:1px solid #ffffff40!important}.accent-btn:hover{color:#fff!important;background:#ffffff40!important}.refresh-btn{color:#f1f5f9!important;background:#ffffff1a!important;border:1px solid #fff3!important}.spin{animation:1s linear infinite spin}@keyframes spin{0%{transform:rotate(0)}to{transform:rotate(360deg)}}.status-banner{align-items:center;gap:.75rem;padding:.9rem 1.25rem;font-size:.88rem;display:flex}.status-banner.loading{color:#166534;background:#f0fdf4;border-color:#bbf7d0}.status-banner.error{color:#991b1b;background:#fef2f2;border-color:#fecaca}.dashboard-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:1rem;display:grid}.kpi-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);color:inherit;flex-direction:column;padding:1.15rem 1.25rem;text-decoration:none;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,border-color .2s;display:flex;position:relative}.kpi-card:hover{border-color:#93c5fd;transform:translateY(-3px);box-shadow:0 14px 28px #1520331f}.kpi-header{justify-content:space-between;align-items:center;display:flex}.kpi-label{text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-size:.78rem;font-weight:600}.kpi-icon-wrapper{border-radius:10px;justify-content:center;align-items:center;width:36px;height:36px;display:flex}.bg-blue{color:#2563eb;background:#eff6ff}.bg-emerald{color:#059669;background:#ecfdf5}.bg-amber{color:#d97706;background:#fffbeb}.bg-indigo{color:#4f46e5;background:#eef2ff}.bg-purple{color:#7c3aed;background:#faf5ff}.bg-rose{color:#e11d48;background:#fff1f2}.bg-teal{color:#0d9488;background:#f0fdfa}.bg-slate{color:#475569;background:#f1f5f9}.kpi-value{font-family:var(--font-display);letter-spacing:-.02em;color:var(--text);margin:.65rem 0 .45rem;font-size:1.85rem;font-weight:700;line-height:1.15}.kpi-unit{color:var(--muted);font-size:1.05rem;font-weight:400;font-family:var(--font-body)}.kpi-footer{border-top:1px solid #f1f5f9;align-items:center;gap:.5rem;margin-top:auto;padding-top:.45rem;font-size:.76rem;display:flex}.kpi-badge{border-radius:6px;padding:.15rem .45rem;font-size:.7rem;font-weight:600}.kpi-badge.success{color:#15803d;background:#dcfce7}.kpi-badge.warning{color:#b45309;background:#fef3c7}.kpi-badge.danger{color:#b91c1c;background:#fee2e2}.kpi-badge.primary{color:#6d28d9;background:#ede9fe}.kpi-badge.muted{color:#64748b;background:#f1f5f9}.kpi-subtext{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.kpi-arrow{color:#94a3b8;opacity:0;margin-left:auto;transition:opacity .2s,transform .2s;transform:translate(-4px)}.kpi-card:hover .kpi-arrow{opacity:1;transform:translate(0)}.dashboard-charts-grid{grid-template-columns:1.4fr 1fr;gap:1.25rem;display:grid}@media (width<=1080px){.dashboard-charts-grid{grid-template-columns:1fr}}.chart-card{flex-direction:column;display:flex}.chart-header{justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.15rem;display:flex}.chart-pill{letter-spacing:.07em;color:#3b82f6;background:#eff6ff;border-radius:6px;align-items:center;gap:.35rem;margin-bottom:.35rem;padding:.2rem .5rem;font-size:.68rem;font-weight:700;display:inline-flex}.chart-title{color:var(--text);letter-spacing:-.01em;margin:0;font-size:1.1rem;font-weight:600}.chart-desc{color:var(--muted);margin:.25rem 0 0;font-size:.78rem}.chart-legend-pills{flex-wrap:wrap;align-items:center;gap:.6rem;display:flex}.legend-pill{color:#475569;background:#f8fafc;border:1px solid #e2e8f0;border-radius:6px;align-items:center;gap:.35rem;padding:.2rem .5rem;font-size:.72rem;display:inline-flex}.legend-pill .dot{border-radius:50%;width:7px;height:7px}.legend-pill.present .dot{background:#10b981}.legend-pill.leave .dot{background:#f59e0b}.legend-pill.ot .dot{background:#6366f1}.chart-body{width:100%}.chart-header-actions{align-items:center;gap:.75rem;display:flex}.chart-view-toggle{background:#f1f5f9;border:1px solid #e2e8f0;border-radius:8px;align-items:center;padding:2px;display:inline-flex}.chart-view-toggle .toggle-btn{color:#64748b;cursor:pointer;background:0 0;border:none;border-radius:6px;align-items:center;gap:.3rem;padding:.25rem .6rem;font-size:.74rem;font-weight:500;transition:all .15s;display:inline-flex}.chart-view-toggle .toggle-btn:hover{color:#1e293b}.chart-view-toggle .toggle-btn.active{color:#2563eb;background:#fff;font-weight:600;box-shadow:0 1px 2px #0000000f}.dept-distribution-list{flex-direction:column;gap:.85rem;max-height:310px;padding-right:.4rem;display:flex;overflow-y:auto}.dept-distribution-list::-webkit-scrollbar{width:5px}.dept-distribution-list::-webkit-scrollbar-track{background:#f8fafc;border-radius:4px}.dept-distribution-list::-webkit-scrollbar-thumb{background:#cbd5e1;border-radius:4px}.dept-distribution-list::-webkit-scrollbar-thumb:hover{background:#94a3b8}.dept-distribution-row{flex-direction:column;gap:.35rem;display:flex}.dept-info-row{justify-content:space-between;align-items:center;gap:.75rem;display:flex}.dept-name-wrapper{flex:1;align-items:center;gap:.5rem;min-width:0;display:flex}.dept-color-indicator{border-radius:50%;flex-shrink:0;width:9px;height:9px}.dept-name-text{color:#1e293b;white-space:nowrap;text-overflow:ellipsis;font-size:.82rem;font-weight:600;overflow:hidden}.dept-stats-wrapper{flex-shrink:0;align-items:center;gap:.5rem;display:flex}.dept-count-badge{color:#475569;font-size:.76rem}.dept-count-badge strong{color:#0f172a;font-weight:700}.dept-pct-badge{color:#3b82f6;background:#f1f5f9;border:1px solid #e2e8f0;border-radius:4px;padding:.15rem .45rem;font-size:.7rem;font-weight:600}.dept-meter-track{background:#f1f5f9;border-radius:999px;width:100%;height:6px;overflow:hidden}.dept-meter-fill{border-radius:999px;height:100%;transition:width .6s cubic-bezier(.4,0,.2,1)}.chart-empty-state{height:100%;color:var(--muted);flex-direction:column;justify-content:center;align-items:center;gap:.75rem;font-size:.85rem;display:flex}.action-link{color:var(--accent);align-items:center;gap:.2rem;font-size:.8rem;font-weight:600;transition:color .15s;display:inline-flex}.action-link:hover{color:#17325c}.dashboard-dual-grid{grid-template-columns:1fr 1fr;gap:1.25rem;display:grid}@media (width<=900px){.dashboard-dual-grid{grid-template-columns:1fr}}.analytics-panel{flex-direction:column;display:flex}.panel-header-with-action{justify-content:space-between;align-items:center;margin-bottom:1rem;display:flex}.section-heading{color:var(--text);margin:0;font-size:1.1rem;font-weight:600}.section-subtext{color:var(--muted);margin:.25rem 0 0;font-size:.78rem}.leave-analytics-content{flex:1;align-items:center;gap:1.5rem;display:flex}.pie-wrapper{flex-shrink:0;position:relative}.leave-category-list{flex-direction:column;flex:1;gap:.65rem;max-height:220px;padding-right:.5rem;display:flex;overflow-y:auto}.leave-category-item{flex-direction:column;gap:.25rem;display:flex}.cat-title-row{justify-content:space-between;align-items:center;font-size:.78rem;display:flex}.color-dot{border-radius:50%;width:8px;height:8px;margin-right:.4rem;display:inline-block}.cat-name{color:var(--text);text-overflow:ellipsis;white-space:nowrap;max-width:150px;font-weight:500;overflow:hidden}.cat-days{color:var(--muted);font-size:.75rem;font-weight:600}.cat-meter{background:#f1f5f9;border-radius:3px;height:5px;overflow:hidden}.cat-fill{border-radius:3px;height:100%;transition:width .4s}.payroll-snapshot-body{flex-direction:column;gap:1rem;display:flex}.payroll-status-banner{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;justify-content:space-between;align-items:center;padding:.6rem .9rem;font-size:.78rem;display:flex}.cycle-badge{align-items:center;gap:.4rem;display:flex}.text-success{color:#16a34a}.text-danger{color:#dc2626}.text-primary{color:#4f46e5}.cycle-days{color:var(--muted);align-items:center;gap:.35rem;display:flex}.payroll-numbers-grid{grid-template-columns:repeat(3,1fr);gap:.75rem;display:grid}.payroll-num-box{border:1px solid var(--line);text-align:center;background:#f8fafc;border-radius:8px;padding:.85rem}.payroll-num-box.net{background:#f5f3ff;border-color:#ddd6fe}.num-label{color:var(--muted);text-transform:uppercase;letter-spacing:.03em;font-size:.72rem;font-weight:600}.num-val{font-family:var(--font-display);color:var(--text);margin:.3rem 0;font-size:1.15rem;font-weight:700}.num-sub{color:#94a3b8;font-size:.68rem}.payroll-breakdown-bar{flex-direction:column;gap:.4rem;display:flex}.bar-labels{color:var(--muted);justify-content:space-between;font-size:.72rem;font-weight:600;display:flex}.split-progress{background:#e2e8f0;border-radius:4px;height:8px;display:flex;overflow:hidden}.split-net{background:#10b981;height:100%}.split-ded{background:#f59e0b;height:100%}.dashboard-operational-grid{grid-template-columns:1.35fr 1fr;gap:1.25rem;display:grid}@media (width<=1080px){.dashboard-operational-grid{grid-template-columns:1fr}}.operational-card{flex-direction:column;display:flex}.operational-table th{text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:.6rem .75rem;font-size:.75rem}.operational-table td{vertical-align:middle;padding:.65rem .75rem;font-size:.82rem}.emp-cell{align-items:center;gap:.65rem;display:flex}.emp-avatar{color:#1e40af;background:#dbeafe;border-radius:50%;flex-shrink:0;justify-content:center;align-items:center;width:32px;height:32px;font-size:.74rem;font-weight:700;display:flex}.emp-name{color:var(--text);font-weight:600}.emp-code{color:var(--muted);font-size:.72rem}.date-range{color:#475569;font-size:.76rem}.reason-cell{white-space:nowrap;text-overflow:ellipsis;color:#64748b;max-width:160px;font-size:.78rem;overflow:hidden}.empty-operational{text-align:center;color:var(--muted);flex-direction:column;align-items:center;gap:.65rem;padding:2.5rem 1rem;font-size:.85rem;display:flex}.device-health-list{flex-direction:column;gap:.6rem;display:flex}.device-item{background:#f8fafc;border:1px solid #e2e8f0;border-radius:8px;align-items:center;gap:.85rem;padding:.65rem .85rem;transition:border-color .15s;display:flex}.device-item:hover{border-color:#cbd5e1}.dev-icon-wrapper{background:#fff;border:1px solid #e2e8f0;border-radius:8px;flex-shrink:0;justify-content:center;align-items:center;width:34px;height:34px;display:flex}.dev-meta{flex:1;min-width:0}.dev-name-row{align-items:center;gap:.45rem;display:flex}.dev-name{color:var(--text);white-space:nowrap;text-overflow:ellipsis;font-size:.84rem;font-weight:600;overflow:hidden}.dev-code{color:#475569;background:#e2e8f0;border-radius:4px;padding:.1rem .35rem;font-size:.7rem;font-weight:600}.dev-subtext{color:var(--muted);align-items:center;gap:.35rem;margin-top:.15rem;font-size:.72rem;display:flex}.dev-subtext .bullet{color:#cbd5e1}.dev-status{flex-direction:column;align-items:flex-end;gap:.25rem;display:flex}.status-pill{border-radius:9999px;align-items:center;gap:.35rem;padding:.15rem .45rem;font-size:.7rem;font-weight:600;display:inline-flex}.status-pill.online{color:#15803d;background:#dcfce7}.status-pill.offline{color:#b91c1c;background:#fee2e2}.status-indicator{border-radius:50%;width:6px;height:6px}.status-pill.online .status-indicator{background:#22c55e}.status-pill.offline .status-indicator{background:#ef4444}.ping-pill{color:var(--muted);font-family:monospace;font-size:.65rem}.quick-launcher-section{flex-direction:column;gap:.85rem;display:flex}.launcher-title{color:var(--text);margin:0;font-size:1.05rem;font-weight:600}.launcher-grid{grid-template-columns:repeat(auto-fit,minmax(240px,1fr));gap:.85rem;display:grid}.launcher-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);color:inherit;align-items:center;gap:.85rem;padding:.95rem 1.1rem;text-decoration:none;transition:transform .2s cubic-bezier(.16,1,.3,1),box-shadow .2s,border-color .2s;display:flex;position:relative}.launcher-card:hover{border-color:#93c5fd;transform:translateY(-2px);box-shadow:0 10px 24px #1520331a}.launcher-icon{border-radius:10px;flex-shrink:0;justify-content:center;align-items:center;width:40px;height:40px;display:flex}.launcher-text{flex:1;min-width:0}.launcher-text h4{color:var(--text);margin:0;font-size:.88rem;font-weight:600}.launcher-text p{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;margin:.2rem 0 0;font-size:.72rem;overflow:hidden}.launcher-arrow{color:#94a3b8;opacity:0;flex-shrink:0;transition:opacity .2s,transform .2s;transform:translate(-4px)}.launcher-card:hover .launcher-arrow{opacity:1;transform:translate(0)}.ess-container{flex-direction:column;gap:1.35rem;width:100%;display:flex}.ess-hero{color:#fff;border-radius:var(--radius);background:linear-gradient(135deg,#132742 0%,#1c3d6c 60%,#2563eb 100%);justify-content:space-between;align-items:center;gap:1.5rem;padding:1.75rem 2rem;display:flex;position:relative;overflow:hidden;box-shadow:0 12px 32px #13274229}.ess-hero:after{content:"";pointer-events:none;background:radial-gradient(circle,#ffffff1a 0%,#0000 70%);border-radius:50%;width:180px;height:180px;position:absolute;top:-30px;right:-30px}.ess-hero-main{align-items:center;gap:1.35rem;display:flex}.ess-avatar-large{-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);color:#fff;width:64px;height:64px;font-size:1.6rem;font-weight:700;font-family:var(--font-display);background:#fff3;border:2px solid #ffffff59;border-radius:18px;flex-shrink:0;justify-content:center;align-items:center;display:flex;box-shadow:0 8px 16px #00000026}.ess-hero-details{flex-direction:column;display:flex}.ess-hero-tag{letter-spacing:.1em;color:#93c5fd;text-transform:uppercase;align-items:center;gap:.5rem;margin-bottom:.35rem;font-size:.68rem;font-weight:700;display:inline-flex}.ess-hero-title{font-family:var(--font-display);color:#fff;margin:0;font-size:1.75rem;font-weight:600}.ess-meta-row{color:#dbeafe;flex-wrap:wrap;align-items:center;gap:.85rem;margin-top:.45rem;font-size:.82rem;display:flex}.ess-meta-badge.code{letter-spacing:.04em;background:#ffffff2e;border-radius:6px;padding:.15rem .5rem;font-weight:700}.ess-meta-item{opacity:.95;align-items:center;gap:.35rem;display:inline-flex}.ess-hero-actions{flex-shrink:0;align-items:center;gap:.75rem;display:flex}.ess-kpi-grid{grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:1rem;display:grid}.ess-kpi-card{background:var(--surface);border:1px solid var(--line);border-radius:var(--radius);box-shadow:var(--shadow);flex-direction:column;padding:1.15rem 1.25rem;display:flex}.ess-kpi-header{justify-content:space-between;align-items:center;display:flex}.ess-kpi-label{text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-size:.78rem;font-weight:600}.ess-kpi-value{font-family:var(--font-display);letter-spacing:-.02em;color:var(--text);margin:.65rem 0 .45rem;font-size:1.85rem;font-weight:700;line-height:1.15}.ess-unit{color:var(--muted);font-size:.95rem;font-weight:400;font-family:var(--font-body)}.ess-kpi-footer{border-top:1px solid #f1f5f9;align-items:center;gap:.5rem;margin-top:auto;padding-top:.45rem;font-size:.76rem;display:flex}.ess-subtext{color:var(--muted);white-space:nowrap;text-overflow:ellipsis;overflow:hidden}.ess-dual-grid{grid-template-columns:1fr 1fr;gap:1.25rem;display:grid}@media (width<=980px){.ess-dual-grid{grid-template-columns:1fr}}.ess-panel{flex-direction:column;display:flex}.leave-quota-grid{grid-template-columns:repeat(auto-fit,minmax(180px,1fr));gap:.85rem;display:grid}.leave-quota-box{background:#f8fafc;border:1px solid #e2e8f0;border-radius:10px;flex-direction:column;padding:.9rem 1rem;transition:transform .15s,border-color .15s;display:flex}.leave-quota-box:hover{border-color:#93c5fd;transform:translateY(-2px)}.quota-top{justify-content:space-between;align-items:center;display:flex}.quota-code{color:#1e40af;background:#dbeafe;border-radius:4px;padding:.15rem .45rem;font-size:.75rem;font-weight:700}.quota-pill{border-radius:4px;padding:.1rem .35rem;font-size:.68rem;font-weight:600}.quota-pill.paid{color:#15803d;background:#dcfce7}.quota-pill.unpaid{color:#b91c1c;background:#fee2e2}.quota-name{color:var(--text);white-space:nowrap;text-overflow:ellipsis;margin:.5rem 0 .25rem;font-size:.85rem;font-weight:600;overflow:hidden}.quota-balance-row{align-items:baseline;gap:.35rem;margin-bottom:.45rem;display:flex}.bal-num{font-family:var(--font-display);color:#0f172a;font-size:1.5rem;font-weight:700}.bal-sub{color:var(--muted);font-size:.74rem}.quota-meter{background:#e2e8f0;border-radius:3px;height:6px;margin-top:auto;overflow:hidden}.quota-fill{background:#2563eb;border-radius:3px;height:100%;transition:width .3s}.quota-breakdown-details{color:var(--muted);border-top:1px dashed #e2e8f0;justify-content:space-between;margin-top:.5rem;padding-top:.4rem;font-size:.7rem;display:flex}.ess-table th{text-transform:uppercase;letter-spacing:.04em;color:var(--muted);padding:.6rem .75rem;font-size:.75rem}.ess-table td{padding:.65rem .75rem;font-size:.82rem}.muted-text{color:#64748b;font-size:.8rem}.profile-header-card{background:linear-gradient(#fff 0%,#f8fafc 100%);padding:1.75rem 2rem}.profile-header-main{align-items:center;gap:1.75rem;display:flex}.profile-avatar-giant{color:#fff;width:80px;height:80px;font-size:2rem;font-weight:700;font-family:var(--font-display);background:linear-gradient(135deg,#1e40af 0%,#3b82f6 100%);border-radius:20px;flex-shrink:0;justify-content:center;align-items:center;display:flex;box-shadow:0 10px 20px #1e40af40}.profile-title-row{align-items:center;gap:.75rem;display:flex}.profile-name{font-family:var(--font-display);color:#0f172a;margin:0;font-size:1.85rem}.emp-code-pill{color:#475569;background:#f1f5f9;border:1px solid #cbd5e1;border-radius:6px;padding:.2rem .55rem;font-size:.75rem;font-weight:700}.profile-role-sub{color:var(--muted);margin:.25rem 0 .6rem;font-size:.95rem;font-weight:500}.profile-quick-contacts{flex-wrap:wrap;align-items:center;gap:.85rem;display:flex}.contact-chip{color:#334155;background:#fff;border:1px solid #e2e8f0;border-radius:6px;align-items:center;gap:.35rem;padding:.25rem .65rem;font-size:.78rem;display:inline-flex}.profile-sections-grid{grid-template-columns:1fr 1fr;gap:1.25rem;display:grid}@media (width<=900px){.profile-sections-grid{grid-template-columns:1fr}.profile-sections-grid>div[style*=grid-column]{grid-column:span 1!important}}.profile-detail-card{padding:1.35rem 1.5rem}.card-section-title{color:#0f172a;border-bottom:1px solid #f1f5f9;align-items:center;gap:.5rem;margin-bottom:1.15rem;padding-bottom:.65rem;font-size:1rem;font-weight:600;display:flex}.profile-kv-grid{grid-template-columns:1fr 1fr;gap:1rem 1.25rem;display:grid}.profile-kv-grid.four-cols{grid-template-columns:repeat(4,1fr)}@media (width<=900px){.profile-kv-grid.four-cols{grid-template-columns:1fr 1fr}}.kv-item{flex-direction:column;gap:.25rem;display:flex}.kv-label{text-transform:uppercase;letter-spacing:.04em;color:var(--muted);font-size:.72rem;font-weight:600}.kv-val{color:#1e293b;font-size:.88rem;font-weight:600}.printable-payslip{color:#1e293b;flex-direction:column;gap:1.25rem;padding:1rem .5rem;display:flex}.payslip-branding{border-bottom:2px solid #0f172a;justify-content:space-between;align-items:flex-start;padding-bottom:1rem;display:flex}.payslip-emp-meta{background:#f8fafc;border-radius:8px;grid-template-columns:repeat(2,1fr);gap:.5rem 1.5rem;padding:.85rem 1rem;font-size:.82rem;display:grid}.payslip-emp-meta span{color:#64748b}.payslip-days-bar{background:#f1f5f9;border-radius:6px;justify-content:space-around;padding:.6rem 1rem;font-size:.82rem;display:flex}.payslip-components-grid{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.component-col{border:1px solid #e2e8f0;border-radius:8px;overflow:hidden}.col-header{letter-spacing:.05em;padding:.55rem .85rem;font-size:.75rem;font-weight:700}.earnings-header{color:#1e40af;background:#eff6ff;border-bottom:1px solid #dbeafe}.deductions-header{color:#991b1b;background:#fef2f2;border-bottom:1px solid #fecaca}.component-lines{flex-direction:column;padding:.5rem .85rem;display:flex}.comp-row{border-bottom:1px dashed #f1f5f9;justify-content:space-between;padding:.35rem 0;font-size:.8rem;display:flex}.comp-row.total-row{border-top:1px solid #cbd5e1;border-bottom:none;margin-top:.5rem;padding-top:.6rem;font-size:.88rem;font-weight:700}.net-pay-banner{background:#f0fdf4;border:1px solid #bbf7d0;border-radius:8px;justify-content:space-between;align-items:center;padding:1rem 1.25rem;display:flex}@media print{body *{visibility:hidden}.printable-payslip,.printable-payslip *{visibility:visible}.printable-payslip{width:100%;padding:0;position:absolute;top:0;left:0}}