:root{color:#172033;font-synthesis:none;text-rendering:optimizelegibility;background:#f4f6fa;font-family:Inter,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}body{background:#f4f6fa;min-width:320px;min-height:100vh;margin:0}button,input{font:inherit}button{cursor:pointer}button:disabled{cursor:not-allowed;opacity:.65}h1,h2,h3,p{margin-top:0}a{color:inherit;text-decoration:none}.primary-button,.secondary-button{border:1px solid #0000;border-radius:8px;min-height:42px;padding:.65rem 1rem;font-weight:600}.primary-button{color:#fff;background:#3157d5}.primary-button:hover{background:#2748b4}.secondary-button{color:#263653;background:#fff;border-color:#d8deea}.secondary-button:hover{background:#f4f6fa}.link-button{justify-content:center;align-items:center;display:inline-flex}.login-page{background:linear-gradient(145deg,#eef2ff 0%,#f8f9fc 55%,#eef5ff 100%);place-items:center;min-height:100vh;padding:1.5rem;display:grid}.login-card{background:#fff;border:1px solid #e0e5ef;border-radius:16px;width:min(100%,440px);padding:2rem;box-shadow:0 18px 50px #1f2f4f1f}.login-heading{gap:1rem;margin-bottom:2rem;display:flex}.login-heading h1{margin-bottom:.4rem;font-size:1.5rem}.login-heading p{color:#68738a;margin-bottom:0;line-height:1.5}.login-logo,.brand-logo{color:#fff;background:#3157d5;border-radius:10px;flex:none;place-items:center;width:46px;height:46px;font-weight:800;display:grid}.login-form{gap:.7rem;display:grid}.login-form label{margin-top:.4rem;font-size:.9rem;font-weight:600}.login-form input{border:1px solid #ccd4e2;border-radius:8px;outline:none;width:100%;min-height:44px;padding:.7rem .8rem}.login-form input:focus{border-color:#3157d5;box-shadow:0 0 0 3px #3157d51f}.login-form .primary-button{margin-top:.8rem}.demo-notice{color:#58647b;background:#f7f8fb;border-radius:8px;gap:.3rem;margin-top:1.5rem;padding:1rem;font-size:.88rem;display:grid}.app-shell{grid-template-columns:240px minmax(0,1fr);min-height:100vh;display:grid}.sidebar{color:#dce4f5;background:#17223a;flex-direction:column;min-height:100vh;padding:1.4rem 1rem;display:flex}.brand{align-items:center;gap:.8rem;margin-bottom:2rem;padding:0 .5rem;display:flex}.brand strong,.brand span{display:block}.brand span{color:#98a7c2;margin-top:.15rem;font-size:.82rem}.sidebar-navigation{gap:.35rem;display:grid}.navigation-link{color:#b9c5d9;border-radius:8px;padding:.75rem .85rem;font-weight:500}.navigation-link:hover{color:#fff;background:#24324e}.navigation-link.active{color:#fff;background:#3157d5}.sidebar-footer{border-top:1px solid #2b3853;gap:.2rem;margin-top:auto;padding:1rem .7rem 0;display:grid}.sidebar-footer span{color:#98a7c2;font-size:.78rem}.application-area{min-width:0}.topbar{background:#fff;border-bottom:1px solid #e0e5ef;justify-content:space-between;align-items:center;gap:1rem;min-height:72px;padding:0 2rem;display:flex}.topbar h2{margin:0;font-size:1.05rem}.topbar-actions{align-items:center;gap:.8rem;display:flex}.role-badge{color:#3157d5;background:#eef2ff;border-radius:999px;padding:.35rem .65rem;font-size:.78rem;font-weight:700}.page-content{padding:2rem}.page-header{justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1.5rem;display:flex}.page-header h1{margin-bottom:.4rem;font-size:1.8rem}.page-header p{color:#68738a;margin-bottom:0}.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:1rem;margin-bottom:1.5rem;display:grid}.stat-card,.content-card{background:#fff;border:1px solid #e0e5ef;border-radius:12px}.stat-card{gap:.7rem;padding:1.2rem;display:grid}.stat-card span{color:#68738a;font-size:.88rem}.stat-card strong{font-size:1.8rem}.content-card{overflow:hidden}.demo-login-options{gap:1rem;display:grid}.role-login-card{color:#263653;text-align:left;background:#fff;border:1px solid #dce2ed;border-radius:14px;grid-template-columns:54px minmax(0,1fr) 32px;align-items:center;gap:1rem;width:100%;min-height:96px;padding:1.1rem 1.2rem;transition:transform .18s,border-color .18s,box-shadow .18s,background .18s;display:grid;position:relative;overflow:hidden;box-shadow:0 5px 18px #1f2f4f0f}.role-login-card:before{content:"";background:#3157d5;width:5px;position:absolute;top:0;bottom:0;left:0}.role-login-card:hover:not(:disabled){border-color:#aebce5;transform:translateY(-3px);box-shadow:0 12px 28px #1f2f4f21}.role-login-card:focus-visible{outline-offset:3px;outline:3px solid #3157d538}.role-login-card:disabled{cursor:wait}.role-login-icon{color:#fff;background:#3157d5;border-radius:13px;place-items:center;width:52px;height:52px;font-size:1rem;font-weight:800;display:grid;box-shadow:0 6px 14px #3157d53d}.login-card{width:min(100%,580px)}.role-login-content{gap:.35rem;display:grid}.role-login-title{color:#1f2d47;font-size:1rem;font-weight:750}.role-login-description{color:#718096;font-size:.82rem;line-height:1.45}.role-login-arrow{color:#3157d5;background:#eef2ff;border-radius:50%;place-items:center;width:30px;height:30px;font-size:1rem;font-weight:700;transition:transform .18s,background .18s;display:grid}.role-login-card:hover:not(:disabled) .role-login-arrow{background:#dfe7ff;transform:translate(3px)}.role-login-manager:before{background:#6548c7}.role-login-manager .role-login-icon{background:#6548c7;box-shadow:0 6px 14px #6548c73d}.role-login-manager .role-login-arrow{color:#6548c7;background:#f0ecff}.role-login-admin:before{background:#17223a}.role-login-admin .role-login-icon{background:#17223a;box-shadow:0 6px 14px #17223a3d}.role-login-admin .role-login-arrow{color:#17223a;background:#e9edf4}.role-button-spinner{border:3px solid #fff6;border-top-color:#fff;border-radius:50%;width:20px;height:20px;animation:.75s linear infinite spin}.login-card .alert{margin-top:1rem}@media (width<=500px){.role-login-card{grid-template-columns:46px minmax(0,1fr) 26px;gap:.8rem;min-height:90px;padding:1rem}.role-login-icon{width:46px;height:46px}.role-login-description{font-size:.76rem}}.card-header{border-bottom:1px solid #e7eaf0;padding:1.25rem}.current-user{align-items:center;gap:.7rem;display:flex}.current-user-avatar{color:#fff;text-transform:uppercase;background:#3157d5;border-radius:50%;place-items:center;width:38px;height:38px;font-size:.8rem;font-weight:700;display:grid}.current-user-information{gap:.15rem;display:grid}.current-user-information strong{color:#263653;font-size:.88rem}.current-user-information span{color:#7a859a;font-size:.75rem}.card-header h2{margin-bottom:.3rem;font-size:1.1rem}.card-header p{color:#68738a;margin-bottom:0;font-size:.9rem}.employee-cell{gap:.2rem;display:grid}.employee-cell strong{color:#263653;font-size:.9rem}.employee-cell span{color:#7a859a;font-size:.75rem}.content-state,.placeholder-card{text-align:center;justify-items:center;gap:.8rem;padding:3rem 1.5rem;display:grid}.placeholder-card{align-content:center;min-height:260px}.placeholder-card p{color:#68738a;max-width:520px}.error-code{color:#3157d5;font-size:3rem;font-weight:800}.table-wrapper{width:100%;overflow-x:auto}.data-table{border-collapse:collapse;width:100%}.data-table th,.data-table td{text-align:left;white-space:nowrap;border-bottom:1px solid #e7eaf0;padding:.9rem 1.1rem}.data-table th{color:#58647b;text-transform:uppercase;letter-spacing:.04em;background:#f8f9fc;font-size:.78rem}.data-table tbody tr:hover{background:#fafbfe}.status-badge{border-radius:999px;padding:.3rem .55rem;font-size:.72rem;font-weight:700;display:inline-flex}.status-pending{color:#875d00;background:#fff4cf}.status-approved,.status-completed{color:#17613b;background:#dff6e8}.status-declined,.status-cancelled{color:#9a2f2f;background:#fde5e5}.alert{border-radius:8px;width:100%;padding:.8rem;font-size:.9rem}.alert-error{color:#922f2f;background:#fdeaea;border:1px solid #f5caca}.loading-screen{place-content:center;justify-items:center;gap:1rem;min-height:100vh;display:grid}.loading-spinner{border:3px solid #dce2ee;border-top-color:#3157d5;border-radius:50%;width:28px;height:28px;animation:.75s linear infinite spin}.not-found-page{place-items:center;min-height:100vh;padding:2rem;display:grid}@keyframes spin{to{transform:rotate(360deg)}}@media (width<=900px){.app-shell{grid-template-columns:1fr}.sidebar{min-height:auto}.sidebar-navigation{grid-template-columns:repeat(3,minmax(0,1fr))}.sidebar-footer{display:none}.stats-grid{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=600px){.page-content,.topbar{padding-left:1rem;padding-right:1rem}.sidebar-navigation{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-grid{grid-template-columns:1fr}.page-header,.topbar{flex-direction:column;align-items:stretch}.topbar{padding-top:1rem;padding-bottom:1rem}.topbar-actions{justify-content:space-between}}.page-header-actions{align-items:center;gap:.7rem;display:flex}.page-tabs{background:#e9edf5;border-radius:10px;gap:.4rem;width:fit-content;margin-bottom:1.2rem;padding:.3rem;display:flex}.page-tab{color:#657087;background:0 0;border:0;border-radius:8px;align-items:center;gap:.5rem;min-height:40px;padding:.55rem .9rem;font-weight:650;display:flex}.page-tab.active{color:#263653;background:#fff;box-shadow:0 2px 7px #1f2f4f17}.tab-count{color:#3157d5;background:#eef2ff;border-radius:999px;place-items:center;min-width:22px;height:22px;padding:0 .35rem;font-size:.72rem;display:inline-grid}.profile-heading{border-bottom:1px solid #e7eaf0;align-items:center;gap:1rem;padding:1.5rem;display:flex}.profile-heading h2{margin-bottom:.25rem}.profile-heading p{color:#68738a;margin:0}.profile-avatar{color:#fff;text-transform:uppercase;background:#3157d5;border-radius:17px;place-items:center;width:64px;height:64px;font-size:1.15rem;font-weight:800;display:grid}.profile-grid{background:#e7eaf0;grid-template-columns:repeat(3,minmax(0,1fr));gap:1px;display:grid}.profile-field{background:#fff;gap:.45rem;min-height:96px;padding:1.2rem;display:grid}.profile-field span{color:#788398;text-transform:uppercase;letter-spacing:.03em;font-size:.78rem;font-weight:650}.profile-field strong{overflow-wrap:anywhere;color:#263653}.profile-field-wide{grid-column:span 2}.employee-table-cell{align-items:center;gap:.7rem;display:flex}.small-avatar{color:#3157d5;text-transform:uppercase;background:#eef2ff;border-radius:9px;flex:none;place-items:center;width:34px;height:34px;font-size:.73rem;font-weight:800;display:grid}.card-header-with-actions{justify-content:space-between;align-items:center;gap:1rem;display:flex}.search-input,.filter-field input,.filter-field select,.form-field input{color:#263653;background:#fff;border:1px solid #ccd4e2;border-radius:8px;outline:none;min-height:42px;padding:.65rem .75rem}.search-input{width:min(100%,280px)}.search-input:focus,.filter-field input:focus,.filter-field select:focus,.form-field input:focus{border-color:#3157d5;box-shadow:0 0 0 3px #3157d51f}.filter-toolbar{background:#fff;border:1px solid #e0e5ef;border-radius:12px;align-items:end;gap:1rem;margin-bottom:1.2rem;padding:1rem;display:flex}.filter-field,.form-field{gap:.4rem;display:grid}.filter-field span,.form-field span{color:#58647b;font-size:.79rem;font-weight:700}.stats-grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}.date-range-cell{gap:.15rem;display:grid}.date-range-cell span{color:#7a859a;font-size:.8rem}.payroll-hero{color:#fff;background:linear-gradient(135deg,#17223a 0%,#284680 55%,#3157d5 100%);border-radius:15px;justify-content:space-between;align-items:center;gap:2rem;margin-bottom:1.5rem;padding:1.8rem;display:flex;box-shadow:0 15px 35px #1f2f4f29}.payroll-hero>div{gap:.4rem;display:grid}.payroll-hero span{color:#c8d5f0;text-transform:uppercase;letter-spacing:.04em;font-size:.8rem}.payroll-hero strong{font-size:2rem}.payroll-hero p{color:#dbe4f6;margin:0}.payroll-employee{text-align:right}.payroll-employee strong{font-size:1rem}.payroll-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;display:grid}.payroll-field{background:#fff;border:1px solid #e0e5ef;border-radius:12px;gap:.6rem;padding:1.25rem;display:grid}.payroll-field span{color:#68738a;font-size:.82rem}.payroll-field strong{color:#263653;font-size:1.2rem}.payroll-field-emphasized{background:#f3f6ff;border-color:#b8c7f5}.payroll-field-emphasized strong{color:#3157d5}.modal-backdrop{z-index:100;-webkit-backdrop-filter:blur(3px);backdrop-filter:blur(3px);background:#121c309e;place-items:center;padding:1rem;display:grid;position:fixed;inset:0}.modal-card{background:#fff;border-radius:15px;width:min(100%,500px);overflow:hidden;box-shadow:0 24px 70px #0c152747}.modal-header{border-bottom:1px solid #e7eaf0;justify-content:space-between;gap:1rem;padding:1.3rem 1.4rem;display:flex}.modal-header h2{margin-bottom:.25rem}.modal-header p{color:#68738a;margin:0;font-size:.88rem}.modal-close-button{color:#657087;background:#f1f3f7;border:0;border-radius:8px;flex:none;width:34px;height:34px;font-size:1.35rem}.modal-form{gap:1rem;padding:1.4rem;display:grid}.modal-actions{justify-content:flex-end;gap:.7rem;padding-top:.4rem;display:flex}@media (width<=900px){.profile-grid,.payroll-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.stats-grid-three{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=650px){.profile-grid,.payroll-grid,.stats-grid-three{grid-template-columns:1fr}.profile-field-wide{grid-column:auto}.card-header-with-actions,.payroll-hero,.page-header-actions{flex-direction:column;align-items:stretch}.search-input{width:100%}.payroll-employee{text-align:left}.page-tabs{width:100%}.page-tab{flex:1;justify-content:center}.page-header-actions button{width:100%}}.latest-payroll-label{color:#3157d5;background:#eef2ff;border-radius:999px;align-items:center;min-height:32px;padding:.35rem .7rem;font-size:.78rem;font-weight:700;display:inline-flex}.table-action-cell{text-align:right!important}.table-action-button{color:#3157d5;background:#eef2ff;border:0;border-radius:7px;padding:.45rem .7rem;font-size:.78rem;font-weight:700}.table-actions{gap:.45rem;display:flex}.approve-button,.decline-button,.approve-confirm-button,.decline-confirm-button{border:0;border-radius:7px;min-height:36px;padding:.5rem .75rem;font-weight:700}.approve-button,.approve-confirm-button{color:#17613b;background:#dff6e8}.decline-button,.decline-confirm-button{color:#9a2f2f;background:#fde5e5}.approve-button:hover,.approve-confirm-button:hover{background:#c9efd8}.decline-button:hover,.decline-confirm-button:hover{background:#fad2d2}.muted-text{color:#98a1b2}.form-field select{color:#263653;background:#fff;border:1px solid #ccd4e2;border-radius:8px;outline:none;width:100%;min-height:42px;padding:.65rem .75rem}.form-field select:focus{border-color:#3157d5;box-shadow:0 0 0 3px #3157d51f}.form-row{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;display:grid}.drawer-backdrop{z-index:110;-webkit-backdrop-filter:blur(2px);backdrop-filter:blur(2px);background:#121c3073;justify-content:flex-end;display:flex;position:fixed;inset:0}.detail-drawer{background:#fff;width:min(100%,560px);height:100%;overflow-y:auto;box-shadow:-18px 0 50px #0c152733}.drawer-header{z-index:1;background:#fff;border-bottom:1px solid #e7eaf0;justify-content:space-between;gap:1rem;padding:1.4rem;display:flex;position:sticky;top:0}.drawer-header h2{margin-bottom:.25rem}.drawer-header p{color:#68738a;margin:0}.confirmation-modal{padding:1.4rem}.confirmation-content{padding-bottom:1rem}.confirmation-content p{color:#68738a;margin-bottom:0;line-height:1.55}.confirmation-actions{border-top:1px solid #e7eaf0;padding-top:1rem}@media (width<=650px){.form-row{grid-template-columns:1fr}.table-actions{flex-direction:column}.detail-drawer{width:100%}}.modal-card-large{width:min(100%,760px)}.form-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;display:grid}.form-field-wide{grid-column:1/-1}.form-help-text{color:#68738a;margin:0;font-size:.82rem;line-height:1.5}.department-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;display:grid}.department-card{background:#fff;border:1px solid #e0e5ef;border-radius:13px;gap:1.2rem;padding:1.3rem;display:grid;box-shadow:0 5px 18px #1f2f4f0d}.department-card-header{justify-content:space-between;align-items:flex-start;gap:1rem;display:flex}.department-card-header span{color:#7a859a;font-size:.75rem}.department-card-header h2{margin:.3rem 0 0;font-size:1.15rem}.manager-status{white-space:nowrap;border-radius:999px;padding:.35rem .6rem;font-size:.72rem;font-weight:700}.manager-status.assigned{color:#17613b;background:#dff6e8}.manager-status.unassigned{color:#875d00;background:#fff4cf}.department-information{gap:.75rem;display:grid}.information-row{border-bottom:1px solid #edf0f5;justify-content:space-between;gap:1rem;padding-bottom:.75rem;display:flex}.information-row span{color:#788398;font-size:.8rem}.information-row strong{overflow-wrap:anywhere;color:#263653;text-align:right;font-size:.85rem}.table-actions{white-space:nowrap;align-items:center;gap:.45rem;display:flex}.table-action-button{color:#3157d5;background:#eef2ff;border:0;border-radius:7px;min-height:34px;padding:.4rem .65rem;font-size:.75rem;font-weight:700}.table-action-button:hover{background:#dfe7ff}@media (width<=900px){.department-grid{grid-template-columns:1fr}}@media (width<=650px){.form-grid{grid-template-columns:1fr}.form-field-wide{grid-column:auto}.department-card-header,.information-row{flex-direction:column;align-items:flex-start}.information-row strong{text-align:left}}.alert-success{color:#17613b;background:#e4f7eb;border:1px solid #bce8cd}.success-alert{justify-content:space-between;align-items:center;gap:1rem;margin-bottom:1.2rem;display:flex}.success-alert button{color:#17613b;background:0 0;border:0;border-radius:6px;flex:none;place-items:center;width:28px;height:28px;padding:0;font-size:1.15rem;display:grid}.success-alert button:hover{background:#17613b1a}.account-status{border-radius:999px;align-items:center;width:fit-content;min-height:26px;padding:.25rem .55rem;font-size:.72rem;font-weight:700;display:inline-flex}.account-exists,.account-enabled{color:#17613b;background:#dff6e8}.account-missing{color:#875d00;background:#fff4cf}.account-disabled{color:#9a2f2f;background:#fde5e5}.table-action-button:disabled{color:#9199a8;cursor:not-allowed;background:#eef0f4}