:root{color:#272330;font-synthesis:none;text-rendering:optimizelegibility;--purple-50:#f8f5ff;--purple-100:#f0e9ff;--purple-200:#e3d6fb;--purple-300:#ccb7f1;--purple-500:#9272c7;--purple-600:#7959af;--purple-700:#624493;--ink:#272330;--muted:#777181;--line:#e9e5ef;--surface:#fff;--surface-soft:#fbfafe;--success:#26805e;--danger:#b4485d;--warning:#9a6a1b;--shadow:0 14px 35px #3a2a4e12;background:#f8f7fb;font-family:Inter,ui-sans-serif,system-ui,-apple-system,BlinkMacSystemFont,Segoe UI,sans-serif}*{box-sizing:border-box}html,body,#root{min-height:100%;margin:0}body{background:#f8f7fb;min-width:320px}button,input,select,textarea{font:inherit}button{cursor:pointer}a{color:inherit}h1,h2,h3,p{margin-top:0}.muted{color:var(--muted)}.capitalize{text-transform:capitalize}.app-shell{min-height:100vh;display:flex}.sidebar{border-right:1px solid var(--line);z-index:30;background:#fff;flex-direction:column;width:264px;padding:22px 16px 18px;display:flex;position:fixed;inset:0 auto 0 0}.brand{align-items:center;gap:12px;padding:0 10px 22px;display:flex}.brand-mark{color:#fff;background:linear-gradient(145deg,#dbcaf8,#a98bd8);border-radius:13px;place-items:center;width:40px;height:40px;font-weight:800;display:grid;box-shadow:0 8px 18px #7959af2e}.brand-mark.large{border-radius:16px;width:50px;height:50px;font-size:21px}.brand div:last-child{min-width:0}.brand strong{white-space:nowrap;text-overflow:ellipsis;max-width:175px;font-size:15px;display:block;overflow:hidden}.brand span{color:#8c8496;margin-top:2px;font-size:11px;display:block}.side-nav{flex-direction:column;flex:1;gap:4px;padding:4px;display:flex;overflow-y:auto}.nav-item{color:#6f6979;border-radius:11px;align-items:center;gap:11px;padding:10px 12px;font-size:13px;font-weight:600;text-decoration:none;transition:all .2s;display:flex}.nav-item:hover{background:var(--purple-50);color:var(--purple-700)}.nav-item.active{background:var(--purple-100);color:var(--purple-700)}.nav-icon{text-align:center;width:24px;color:var(--purple-600);font-size:17px}.sidebar-footer{border-top:1px solid var(--line);padding-top:14px}.profile-mini{text-align:left;width:100%;color:var(--ink);background:0 0;border:0;border-radius:10px;align-items:center;gap:10px;padding:8px;display:flex}.profile-mini:hover{background:var(--purple-50)}.profile-mini>span:last-child{min-width:0}.profile-mini strong{white-space:nowrap;text-overflow:ellipsis;font-size:12px;display:block;overflow:hidden}.profile-mini small{color:#9a93a2;letter-spacing:.08em;font-size:9px}.logout-button{color:#8a6270;text-align:left;background:0 0;border:0;width:100%;padding:8px 10px;font-size:12px}.avatar{background:var(--purple-100);width:38px;height:38px;color:var(--purple-700);text-transform:uppercase;border-radius:12px;flex:none;place-items:center;font-size:12px;font-weight:800;display:inline-grid}.avatar.small{border-radius:11px;width:34px;height:34px}.avatar.tiny{border-radius:10px;width:32px;height:32px}.avatar.xl{border-radius:22px;width:72px;height:72px;font-size:22px}.main-area{flex:1;min-width:0;margin-left:264px}.topbar{z-index:20;-webkit-backdrop-filter:blur(14px);backdrop-filter:blur(14px);background:#f8f7fbe6;border-bottom:1px solid #e9e5efd9;justify-content:space-between;align-items:center;height:70px;padding:0 30px;display:flex;position:sticky;top:0}.menu-button{display:none}.breadcrumb span{color:#9a93a2;text-transform:uppercase;letter-spacing:.11em;font-size:10px;display:block}.breadcrumb strong{text-transform:capitalize;margin-top:2px;font-size:13px;display:block}.top-user{align-items:center;gap:9px;display:flex}.top-user strong{font-size:12px;display:block}.top-user span{color:#958e9d;text-transform:capitalize;font-size:10px;display:block}.content{max-width:1480px;margin:0 auto;padding:30px}.page-header{justify-content:space-between;align-items:flex-start;gap:20px;margin-bottom:22px;display:flex}.page-header h1{letter-spacing:-.03em;margin:0 0 6px;font-size:26px}.page-header p{color:var(--muted);max-width:740px;margin:0;font-size:13px;line-height:1.6}.card{background:var(--surface);border:1px solid var(--line);border-radius:16px;margin-bottom:18px;padding:20px;box-shadow:0 2px 8px #3a2a4e05}.card-head{justify-content:space-between;align-items:flex-start;gap:14px;margin-bottom:18px;display:flex}.card-head h2{margin:0 0 4px;font-size:16px}.card-head p{color:var(--muted);margin:0;font-size:12px}.button{border:1px solid #0000;border-radius:10px;justify-content:center;align-items:center;gap:7px;min-height:39px;padding:0 15px;font-size:12px;font-weight:700;transition:all .18s;display:inline-flex}.button.primary{background:var(--purple-600);color:#fff;box-shadow:0 7px 16px #7959af29}.button.primary:hover{background:var(--purple-700);transform:translateY(-1px)}.button.secondary{border-color:var(--line);color:#5d5765;background:#fff}.button.secondary:hover{background:var(--purple-50);border-color:var(--purple-200)}.button.full{width:100%}.button:disabled{opacity:.55;cursor:not-allowed;transform:none!important}.button-row{flex-wrap:wrap;align-items:center;gap:9px;display:flex}.text-button{color:var(--purple-700);background:0 0;border:0;padding:5px;font-size:11px;font-weight:800}.text-button.danger{color:var(--danger)}.icon-button{background:var(--surface-soft);color:#726b7b;border:0;border-radius:10px;width:34px;height:34px;font-size:22px;line-height:1}.stats-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin-bottom:18px;display:grid}.stat-card{border:1px solid var(--line);background:#fff;border-radius:15px;align-items:center;gap:13px;min-height:98px;padding:16px;display:flex}.stat-icon{background:var(--purple-100);width:42px;height:42px;color:var(--purple-700);border-radius:13px;flex:none;place-items:center;font-weight:800;display:grid}.stat-card span{color:#8a8392;font-size:11px;display:block}.stat-card strong{letter-spacing:-.04em;margin-top:2px;font-size:24px;display:block}.stat-card small{color:#aaa3b2;margin-top:2px;font-size:9px;display:block}.stats-grid.compact .stat-card{min-height:84px}.dashboard-grid{grid-template-columns:1.2fr .8fr;gap:18px;display:grid}.attendance-today{background:var(--purple-50);border:1px solid var(--purple-100);border-radius:13px;padding:16px}.time-pair{grid-template-columns:1fr 1fr;gap:10px;margin-bottom:15px;display:grid}.time-pair div{background:#fff;border-radius:11px;padding:12px}.time-pair span{color:#928a9c;font-size:10px;display:block}.time-pair strong{margin-top:3px;font-size:15px;display:block}.badge{white-space:nowrap;color:#625d67;text-transform:capitalize;background:#f1eef4;border-radius:999px;justify-content:center;align-items:center;min-height:23px;padding:5px 8px;font-size:9px;font-weight:800;display:inline-flex}.badge-active,.badge-approved,.badge-present{color:#247256;background:#e9f7f0}.badge-inactive,.badge-rejected,.badge-absent,.badge-cancelled{color:#a54154;background:#faecef}.badge-pending,.badge-late,.badge-on-notice,.badge-optional{color:#956616;background:#fff5dc}.badge-admin,.badge-hr,.badge-hod,.badge-manager{background:var(--purple-100);color:var(--purple-700)}.badge-public,.badge-company,.badge-employee,.badge-manual,.badge-self{color:#56657a;background:#eef2f8}.badge-half-day,.badge-on-leave{color:#426b9b;background:#eef5ff}.table-wrap{width:100%;overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:760px}th{text-align:left;color:#9a93a2;text-transform:uppercase;letter-spacing:.06em;border-bottom:1px solid var(--line);padding:10px 12px;font-size:9px}td{vertical-align:middle;color:#5f5967;border-bottom:1px solid #f0edf3;padding:13px 12px;font-size:11px}tbody tr:last-child td{border-bottom:0}tbody tr:hover{background:#fdfcff}td strong{color:var(--ink);font-size:11px;display:block}td small{color:#9d96a5;margin-top:2px;font-size:9px;display:block}.person-cell{align-items:center;gap:10px;min-width:190px;display:flex}.row-actions{align-items:center;gap:4px;display:flex}.reason-line{text-overflow:ellipsis;white-space:nowrap;max-width:240px;overflow:hidden}.toolbar{justify-content:space-between;align-items:center;gap:14px;margin-bottom:16px;display:flex}.search-box{border:1px solid var(--line);background:#fff;border-radius:10px;align-items:center;gap:8px;width:100%;max-width:390px;padding:0 11px;display:flex}.search-box input{background:0 0;border:0;outline:0;width:100%;height:38px;font-size:11px}.search-box span{color:#9f97aa}.record-count{color:#938c9b;font-size:10px}.compact-select{border:1px solid var(--line);color:#625c69;background:#fff;border-radius:9px;min-height:36px;padding:0 10px;font-size:10px}.field{margin-bottom:14px;display:block}.field>span{color:#625c69;margin-bottom:6px;font-size:10px;font-weight:800;display:block}.field>span b{color:var(--danger);margin-left:2px}.field input,.field select,.field textarea{width:100%;color:var(--ink);background:#fff;border:1px solid #ded9e5;border-radius:10px;outline:none;padding:9px 11px;font-size:11px;transition:all .15s}.field input,.field select{min-height:39px}.field textarea{resize:vertical;line-height:1.5}.field input:focus,.field select:focus,.field textarea:focus{border-color:var(--purple-300);box-shadow:0 0 0 3px #9272c71a}.field input:disabled{color:#9a93a2;background:#f5f3f7}.field small{color:#9c95a4;margin-top:5px;font-size:9px;line-height:1.4;display:block}.form-grid{gap:0 14px;display:grid}.form-grid.two{grid-template-columns:repeat(2,minmax(0,1fr))}.form-grid.three{grid-template-columns:repeat(3,minmax(0,1fr))}.span-two{grid-column:span 2}.section-label{text-transform:uppercase;letter-spacing:.09em;color:#938b9c;border-bottom:1px solid var(--line);margin:7px 0 14px;padding-bottom:7px;font-size:9px;font-weight:800}.switch-row{background:var(--surface-soft);border:1px solid var(--line);border-radius:10px;align-items:flex-start;gap:9px;margin-bottom:14px;padding:10px;display:flex}.switch-row input{accent-color:var(--purple-600);margin-top:2px}.switch-row strong{font-size:10px;display:block}.switch-row small{color:#968f9e;margin-top:2px;font-size:9px;line-height:1.4;display:block}.save-bar{justify-content:flex-end;margin-top:5px;display:flex}.modal-backdrop{-webkit-backdrop-filter:blur(4px);backdrop-filter:blur(4px);z-index:80;background:#251e2d75;place-items:center;padding:18px;display:grid;position:fixed;inset:0}.modal{background:#fff;border-radius:17px;width:min(560px,100%);max-height:92vh;padding:20px;overflow-y:auto;box-shadow:0 26px 80px #1e142838}.modal.modal-wide{width:min(920px,100%)}.modal-head{justify-content:space-between;align-items:center;margin-bottom:18px;display:flex}.modal-head h2{margin:0;font-size:17px}.modal-actions{border-top:1px solid var(--line);justify-content:flex-end;gap:8px;margin-top:3px;padding-top:12px;display:flex}.alert{border:1px solid #0000;border-radius:10px;margin-bottom:14px;padding:10px 12px;font-size:10px;line-height:1.5}.alert-error{color:#8f3446;background:#fff0f3;border-color:#f4d5dc}.alert-success{color:#256e55;background:#edfaf4;border-color:#d4eee2}.alert-info{color:#5d4a7f;background:var(--purple-50);border-color:var(--purple-200)}.empty-state{text-align:center;color:var(--muted);padding:34px 18px}.empty-mark{background:var(--purple-50);width:42px;height:42px;color:var(--purple-600);border-radius:14px;place-items:center;margin:0 auto 10px;font-size:20px;display:grid}.empty-state h3{color:var(--ink);margin:0 0 5px;font-size:13px}.empty-state p{margin:0;font-size:10px}.screen-loader{place-items:center;min-height:100vh;display:grid}.spinner{border:3px solid var(--purple-100);border-top-color:var(--purple-600);border-radius:50%;width:28px;height:28px;animation:.8s linear infinite spin}@keyframes spin{to{transform:rotate(360deg)}}.simple-list,.holiday-list{flex-direction:column;display:flex}.list-row,.holiday-row{border-bottom:1px solid #f0edf3;align-items:center;gap:12px;padding:10px 0;display:flex}.list-row:last-child,.holiday-row:last-child{border-bottom:0}.list-row>div:nth-child(2),.holiday-info{flex:1;min-width:0}.list-row strong,.holiday-info strong{font-size:11px;display:block}.list-row span,.holiday-info span{color:#9a93a2;margin-top:2px;font-size:9px;display:block}.calendar-chip{background:var(--purple-50);border:1px solid var(--purple-100);text-align:center;border-radius:10px;flex:none;place-content:center;width:39px;height:43px;display:grid}.calendar-chip strong{color:var(--purple-700);font-size:13px;line-height:1}.calendar-chip span{text-transform:uppercase;color:var(--purple-600);margin-top:3px;font-size:8px}.calendar-chip.large{width:48px;height:52px}.department-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:15px;display:grid}.department-card{margin:0}.department-top{justify-content:space-between;align-items:center;margin-bottom:14px;display:flex}.department-code{background:var(--purple-100);width:42px;height:38px;color:var(--purple-700);border-radius:11px;place-items:center;font-size:10px;font-weight:900;display:grid}.department-card h2{margin:0 0 6px;font-size:15px}.department-card>p{min-height:38px;color:var(--muted);font-size:10px;line-height:1.55}.department-meta{border-top:1px solid var(--line);grid-template-columns:1fr auto;gap:8px;margin:12px 0;padding:12px 0;display:grid}.department-meta span{color:#9992a0;font-size:8px;display:block}.department-meta strong{margin-top:2px;font-size:10px;display:block}.attendance-banner{border-color:var(--purple-200);background:linear-gradient(120deg,#fff,#f8f4ff);justify-content:space-between;align-items:center;gap:16px;display:flex}.attendance-banner h2{margin:3px 0 4px;font-size:16px}.attendance-banner p{color:var(--muted);font-size:10px}.eyebrow{color:var(--purple-600);text-transform:uppercase;letter-spacing:.12em;font-size:9px;font-weight:900;display:block}.balance-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;display:grid}.balance-card{margin-bottom:18px}.balance-card>span{color:#898292;font-size:10px;display:block}.balance-card>strong{margin:5px 0 12px;font-size:23px;display:block}.balance-card>strong small{color:#9d96a5;font-size:9px;font-weight:500}.balance-meta{border-top:1px solid var(--line);flex-wrap:wrap;gap:9px;padding-top:10px;display:flex}.balance-meta span{color:#948d9c;font-size:8px}.policy-pills{grid-template-columns:repeat(3,minmax(0,1fr));gap:10px;display:grid}.policy-pill{border:1px solid var(--line);border-radius:11px;justify-content:space-between;align-items:center;gap:8px;padding:11px;display:flex}.policy-pill strong{font-size:10px;display:block}.policy-pill span{color:#97909f;margin-top:2px;font-size:8px;display:block}.review-summary{background:var(--purple-50);border:1px solid var(--purple-100);border-radius:11px;margin-bottom:14px;padding:12px}.review-summary strong{font-size:12px;display:block}.review-summary span,.review-summary p{color:#7f7788;margin:3px 0 0;font-size:9px}.security-note{background:var(--purple-50);border-color:var(--purple-200);align-items:flex-start;gap:13px;display:flex}.security-note h3{margin:1px 0 4px;font-size:12px}.security-note p{color:#777080;margin:0;font-size:10px;line-height:1.55}.access-user-head{border-bottom:1px solid var(--line);align-items:center;gap:11px;margin-bottom:15px;padding-bottom:13px;display:flex}.access-user-head strong{font-size:12px;display:block}.access-user-head span{color:#958e9d;font-size:9px;display:block}.permission-groups{grid-template-columns:repeat(3,minmax(0,1fr));gap:12px;margin-top:5px;display:grid}.permission-group{border:1px solid var(--line);border-radius:12px;padding:12px}.permission-group h3{margin:0 0 9px;font-size:10px}.permission-list{flex-direction:column;gap:7px;display:flex}.permission-item{align-items:flex-start;gap:7px;display:flex}.permission-item input{accent-color:var(--purple-600);margin-top:2px}.permission-item strong{font-size:9px;display:block}.permission-item small{color:#a099a7;margin-top:1px;font-size:7px;display:block}.audit-list{flex-direction:column;display:flex}.audit-row{border-bottom:1px solid var(--line);gap:12px;padding:12px 2px;display:flex}.audit-row:last-child{border-bottom:0}.audit-dot{border:2px solid var(--purple-500);border-radius:50%;flex:none;width:9px;height:9px;margin-top:5px}.audit-main{flex:1}.audit-main>div{align-items:center;gap:7px;display:flex}.audit-main strong{font-size:10px}.audit-main span{color:#8f8897;margin-top:3px;font-size:8px;display:block}.audit-main small{color:#b0a9b6;margin-top:3px;font-family:ui-monospace,monospace;font-size:7px;display:block}.profile-hero{background:linear-gradient(115deg,#fff,#f8f4ff);align-items:center;gap:16px;display:flex}.profile-hero h2{margin:0 0 2px;font-size:19px}.profile-hero>div>span{color:#8e8796;font-size:10px}.profile-hero .button-row{margin-top:8px}.profile-grid{grid-template-columns:.8fr 1.2fr;gap:18px;display:grid}.detail-list{margin:0}.detail-list div{border-bottom:1px solid var(--line);justify-content:space-between;gap:14px;padding:10px 0;display:flex}.detail-list div:last-child{border-bottom:0}.detail-list dt{color:#96909d;font-size:9px}.detail-list dd{text-align:right;margin:0;font-size:10px;font-weight:700}.password-form{max-width:520px}.admin-profile-note h2{margin-bottom:5px;font-size:14px}.admin-profile-note p{color:var(--muted);margin:0;font-size:10px;line-height:1.6}.auth-page{background:#fff;grid-template-columns:minmax(420px,.9fr) minmax(540px,1.1fr);min-height:100vh;display:grid}.auth-panel{min-height:100vh}.auth-brand-panel{background:linear-gradient(150deg,#f2eafe,#ded0f4);flex-direction:column;justify-content:space-between;padding:45px;display:flex;position:relative;overflow:hidden}.auth-brand-panel:before,.auth-brand-panel:after{content:"";filter:blur(2px);border-radius:50%;position:absolute}.auth-brand-panel:before{background:#ffffff70;width:350px;height:350px;top:80px;right:-130px}.auth-brand-panel:after{border:1px solid #7959af29;width:250px;height:250px;bottom:-80px;left:-80px}.auth-brand{z-index:1;align-items:center;gap:11px;display:flex}.auth-brand span{color:#5f4c77;font-size:12px;font-weight:800}.auth-copy{z-index:1;max-width:560px;margin:auto 0}.auth-copy h1{letter-spacing:-.055em;color:#443654;margin:12px 0 17px;font-size:clamp(34px,4vw,56px);line-height:1.04}.auth-copy>p{color:#6e607c;max-width:510px;font-size:12px;line-height:1.75}.auth-points{flex-wrap:wrap;gap:8px;margin-top:22px;display:flex}.auth-points span{color:#665576;background:#ffffff80;border:1px solid #62449324;border-radius:9px;padding:8px 10px;font-size:9px;font-weight:700}.auth-form-panel{background:#fff;place-items:center;padding:40px 6vw;display:grid}.auth-form{width:min(410px,100%)}.auth-form.wide-form{width:min(690px,100%)}.auth-form h2{letter-spacing:-.03em;margin:8px 0 6px;font-size:24px}.auth-form>.muted,.auth-form>div>.muted{margin-bottom:22px;font-size:10px}.auth-form .field{margin-bottom:13px}.auth-switch{text-align:center;color:#8e8796;margin:14px 0 0;font-size:10px}.auth-switch a{color:var(--purple-700);font-weight:800}.mobile-brand,.sidebar-overlay{display:none}@media (width<=1180px){.stats-grid,.department-grid,.policy-pills,.permission-groups,.balance-grid{grid-template-columns:repeat(2,1fr)}}@media (width<=900px){.sidebar{box-shadow:var(--shadow);transition:all .22s;transform:translate(-100%)}.sidebar.sidebar-open{transform:translate(0)}.sidebar-overlay{z-index:25;background:#221c2859;border:0;display:block;position:fixed;inset:0}.main-area{margin-left:0}.menu-button{border:1px solid var(--line);color:#645e6b;background:#fff;border-radius:10px;place-items:center;width:36px;height:36px;display:inline-grid}.breadcrumb{display:none}.topbar{padding:0 20px}.content{padding:24px 20px}.dashboard-grid,.profile-grid,.auth-page{grid-template-columns:1fr}.auth-brand-panel{display:none}.auth-form-panel{min-height:100vh;padding:30px 20px}.mobile-brand{align-items:center;gap:10px;margin-bottom:28px;display:flex}}@media (width<=650px){.content{padding:20px 14px}.topbar{padding:0 14px}.top-user>div{display:none}.page-header{flex-direction:column;align-items:stretch}.page-header h1{font-size:22px}.page-header>div:last-child .button,.page-header>div:last-child>.button{width:100%}.stats-grid,.department-grid,.balance-grid,.policy-pills,.permission-groups,.form-grid.two,.form-grid.three{grid-template-columns:1fr}.span-two{grid-column:span 1}.attendance-banner{flex-direction:column;align-items:flex-start}.toolbar,.filter-head{flex-direction:column;align-items:stretch}.record-count{display:none}.holiday-row{flex-wrap:wrap;align-items:flex-start}.holiday-info{min-width:180px}.auth-form-panel{padding:26px 16px}.auth-form h2{font-size:21px}.modal-backdrop{align-items:end;padding:8px}.modal{border-radius:18px 18px 8px 8px;max-height:94vh;padding:17px}}.password-reset-box{border:1px solid var(--line);background:var(--surface-soft);border-radius:12px;margin-top:14px;padding:13px}.password-reset-box>div:first-child strong{font-size:10px;display:block}.password-reset-box>div:first-child span{color:#918a99;margin-top:3px;font-size:8px;line-height:1.45;display:block}.password-reset-action{gap:8px;margin-top:10px;display:flex}.password-reset-action input{border:1px solid #ded9e5;border-radius:10px;outline:none;flex:1;min-width:0;min-height:39px;padding:9px 11px;font-size:10px}@media (width<=650px){.password-reset-action{flex-direction:column}}.shift-current-card{border-color:var(--purple-200);background:linear-gradient(120deg,#fff,#f8f4ff);justify-content:space-between;align-items:center;gap:20px;display:flex}.shift-current-card h2{margin:4px 0 5px;font-size:19px}.shift-current-card p{color:var(--muted);margin:0;font-size:11px}.shift-time-chip{border:1px solid var(--purple-100);background:#fff;border-radius:13px;align-items:center;gap:10px;padding:12px 15px;display:flex;box-shadow:0 8px 22px #5036700d}.shift-time-chip strong{color:var(--purple-700);font-size:13px}.shift-time-chip span{color:#a098aa;text-transform:uppercase;font-size:9px}.shift-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;margin-bottom:18px;display:grid}.shift-card{margin-bottom:0}.shift-card-head{justify-content:space-between;align-items:flex-start;gap:10px;display:flex}.shift-card-head h2{margin:4px 0 0;font-size:15px}.shift-code{color:var(--purple-600);letter-spacing:.1em;font-size:8px;font-weight:900;display:block}.shift-hours{background:var(--purple-50);border:1px solid var(--purple-100);border-radius:12px;align-items:center;gap:8px;margin:18px 0 12px;padding:13px;display:flex}.shift-hours strong{font-size:14px}.shift-hours span{color:var(--purple-500)}.shift-detail-row{color:#8f8897;gap:10px;margin-bottom:12px;font-size:9px;display:flex}.weekday-pills{flex-wrap:wrap;gap:4px;margin:10px 0 13px;display:flex}.weekday-pills span{text-align:center;color:#aaa3b2;background:#f4f2f6;border-radius:7px;min-width:30px;padding:5px 6px;font-size:8px;font-weight:800}.weekday-pills span.on{background:var(--purple-100);color:var(--purple-700)}.day-toggle-row{flex-wrap:wrap;gap:6px;display:flex}.day-toggle-row button{border:1px solid var(--line);color:#817988;background:#fff;border-radius:8px;padding:7px 9px;font-size:9px;font-weight:800}.day-toggle-row button.active{background:var(--purple-100);border-color:var(--purple-200);color:var(--purple-700)}.badge-default,.badge-configured,.badge-finalized,.badge-paid{color:#247256;background:#e9f7f0}.badge-missing,.badge-draft{color:#956616;background:#fff5dc}.badge-request,.badge-employee-create{background:var(--purple-100);color:var(--purple-700)}.payroll-generate{border-color:var(--purple-200);background:linear-gradient(120deg,#fff,#f8f4ff);justify-content:space-between;align-items:center;gap:18px;display:flex}.payroll-generate h2{margin:4px 0 5px;font-size:17px}.payroll-generate p{color:var(--muted);max-width:650px;margin:0;font-size:10px}.payroll-generate-actions{flex-wrap:wrap;align-items:center;gap:8px;display:flex}.payroll-generate-actions input{border:1px solid var(--line);min-height:39px;color:var(--ink);background:#fff;border-radius:10px;padding:0 11px;font-size:11px}.payroll-run-summary{grid-template-columns:repeat(5,minmax(0,1fr));gap:8px;margin-bottom:16px;display:grid}.payroll-run-summary>div{border:1px solid var(--line);background:var(--surface-soft);border-radius:11px;padding:10px}.payroll-run-summary span{color:#9891a0;margin-bottom:4px;font-size:8px;display:block}.payroll-run-summary strong{font-size:11px}.payroll-entry-table{border:1px solid var(--line);border-radius:11px;max-height:52vh;overflow:auto}.payroll-entry-table table{min-width:930px}.payslip{border:1px solid var(--line);border-radius:14px;overflow:hidden}.payslip-head{background:linear-gradient(120deg,var(--purple-50),#fff);border-bottom:1px solid var(--line);justify-content:space-between;align-items:flex-start;gap:12px;padding:17px;display:flex}.payslip-head span{color:var(--purple-600);font-size:8px;font-weight:800}.payslip-head h2{margin:3px 0;font-size:17px}.payslip-head p{color:var(--muted);margin:0;font-size:9px}.payslip-lines{padding:12px 17px}.payslip-lines>div{border-bottom:1px solid #f0edf3;justify-content:space-between;align-items:center;gap:14px;padding:9px 0;display:flex}.payslip-lines>div:last-child{border-bottom:0}.payslip-lines span{color:#817a89;font-size:9px}.payslip-lines strong{font-size:10px}.payslip-lines .total{margin-top:5px;padding:13px 0 4px}.payslip-lines .total span,.payslip-lines .total strong{color:var(--purple-700);font-size:13px;font-weight:900}.payslip-attendance{border-top:1px solid var(--line);background:var(--surface-soft);flex-wrap:wrap;gap:6px;padding:12px 17px;display:flex}.payslip-attendance span{border:1px solid var(--line);color:#857e8d;background:#fff;border-radius:7px;padding:5px 7px;font-size:8px}@media (width<=1180px){.shift-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.payroll-run-summary{grid-template-columns:repeat(3,minmax(0,1fr))}}@media (width<=650px){.shift-grid{grid-template-columns:1fr}.shift-current-card,.payroll-generate{flex-direction:column;align-items:stretch}.shift-time-chip{justify-content:center}.payroll-generate-actions{flex-direction:column;align-items:stretch}.payroll-generate-actions input,.payroll-generate-actions .button{width:100%}.payroll-run-summary{grid-template-columns:repeat(2,minmax(0,1fr))}}.setup-intro{background:linear-gradient(120deg, #fff, var(--purple-50));border-color:var(--purple-200)}.setup-checklist{grid-template-columns:repeat(4,minmax(0,1fr));gap:12px;display:grid}.setup-checklist>div{border:1px solid var(--line);background:#fff;border-radius:11px;grid-template-columns:30px 1fr;align-items:center;column-gap:9px;padding:11px;display:grid}.setup-checklist>div>span{background:var(--purple-100);width:30px;height:30px;color:var(--purple-700);border-radius:9px;grid-row:span 2;place-items:center;font-size:10px;font-weight:900;display:grid}.setup-checklist strong{font-size:10px}.setup-checklist small{color:var(--muted);margin-top:2px;font-size:8px}.setup-tabs{flex-wrap:wrap;gap:7px;margin-bottom:14px;display:flex}.setup-tab{border:1px solid var(--line);color:#736c7c;background:#fff;border-radius:10px;padding:9px 13px;font-size:10px;font-weight:800}.setup-tab:hover{background:var(--purple-50);border-color:var(--purple-200)}.setup-tab.active{background:var(--purple-100);color:var(--purple-700);border-color:var(--purple-200)}@media (width<=900px){.setup-checklist{grid-template-columns:repeat(2,minmax(0,1fr))}}@media (width<=600px){.setup-checklist{grid-template-columns:1fr}}.topbar-right{align-items:center;gap:14px;display:flex}.theme-switcher{border:1px solid var(--line);background:var(--surface);border-radius:11px;align-items:center;gap:8px;min-height:36px;padding:4px 7px 4px 9px;transition:all .2s;display:flex}.theme-switcher:hover{box-shadow:var(--shadow)}.theme-switcher select{color:var(--ink);cursor:pointer;background:0 0;border:0;outline:0;padding:4px 22px 4px 2px;font-size:10px;font-weight:700}.theme-preview{align-items:center;display:flex}.theme-dot{border:2px solid var(--surface);border-radius:50%;width:10px;height:10px;display:inline-block;box-shadow:0 0 0 1px #0000000f}.theme-preview-ocean .theme-dot+.theme-dot{margin-left:-3px}.theme-dot.royal{background:#2563eb}.theme-dot.navy{background:#081a33}.theme-dot.turquoise{background:#16c7c2}.theme-preview-normal .single{background:#7959af}.theme-preview-dark .single{background:#171a22}html[data-theme=ocean]{--lightningcss-light:initial;--lightningcss-dark: ;color-scheme:light;--purple-50:#effcfc;--purple-100:#d9f6f5;--purple-200:#b4ece9;--purple-300:#72dcd8;--purple-500:#16c7c2;--purple-600:#2563eb;--purple-700:#0b2447;--ink:#081a33;--muted:#64778b;--line:#dbe7f0;--surface:#fff;--surface-soft:#f3f9fb;--success:#13866f;--danger:#c1495b;--warning:#a66a15;--shadow:0 14px 35px #082a4914}html[data-theme=ocean] .sidebar{background:linear-gradient(#071a32 0%,#0b2447 100%);border-right:1px solid #16c7c233;box-shadow:8px 0 30px #081a3314}html[data-theme=ocean] .brand strong{color:#fff}html[data-theme=ocean] .brand span{color:#8fa8bf}html[data-theme=ocean] .brand-mark{background:linear-gradient(135deg,#2563eb 0% 45%,#16c7c2 100%);box-shadow:0 10px 24px #2563eb47}html[data-theme=ocean] .nav-item{color:#afc2d5}html[data-theme=ocean] .nav-icon{color:#38d6d1}html[data-theme=ocean] .nav-item:hover{color:#fff;background:#16c7c217}html[data-theme=ocean] .nav-item.active .nav-icon{color:#4ae1dc}html[data-theme=ocean] .sidebar-footer{border-color:#ffffff1a}html[data-theme=ocean] .profile-mini{color:#fff}html[data-theme=ocean] .profile-mini:hover{background:#16c7c217}html[data-theme=ocean] .profile-mini small{color:#8fa8bf}html[data-theme=ocean] .logout-button{color:#72dcd8}html[data-theme=ocean] .topbar{background:#f7fbfdeb;border-bottom:1px solid #dbe7f0}html[data-theme=ocean] .top-user span{color:#70869a;justify-content:center;align-items:center;display:flex}html[data-theme=ocean] .card,html[data-theme=ocean] .stat-card{background:#fff;border-color:#dbe7f0;box-shadow:0 5px 18px #082a4909}html[data-theme=ocean] .stat-icon{color:#0b4fb8;background:linear-gradient(135deg,#dcf8f7,#eaf3ff)}html[data-theme=ocean] .button.primary{color:#fff;background:linear-gradient(135deg,#2563eb 0%,#1d4ed8 68%,#168aa9 130%);box-shadow:0 8px 20px #2563eb33}html[data-theme=ocean] .button.primary:hover{background:linear-gradient(135deg,#1d4ed8,#143fae)}html[data-theme=ocean] .button.secondary:hover{background:#effcfc;border-color:#7ddedb}html[data-theme=ocean] .text-button{color:#175bd4}html[data-theme=ocean] .field input,html[data-theme=ocean] .field select,html[data-theme=ocean] .field textarea,html[data-theme=ocean] .compact-select,html[data-theme=ocean] .search-box{background:#fff;border-color:#d5e3ee}html[data-theme=ocean] .field input:focus,html[data-theme=ocean] .field select:focus,html[data-theme=ocean] .field textarea:focus{border-color:#16c7c2;box-shadow:0 0 0 3px #16c7c21f}html[data-theme=ocean] input[type=checkbox]{accent-color:#2563eb}html[data-theme=ocean] .avatar{color:#0b3b77;background:linear-gradient(135deg,#dff8f7,#dfebff)}html[data-theme=ocean] th{color:#6a8399}html[data-theme=ocean] td{color:#536b80;border-color:#e7eef4}html[data-theme=ocean] .attendance-today,html[data-theme=ocean] .review-summary,html[data-theme=ocean] .security-note{background:linear-gradient(135deg,#effcfc,#f0f5ff);border-color:#b9e9e8}html[data-theme=ocean] .attendance-banner,html[data-theme=ocean] .profile-hero{background:linear-gradient(120deg,#fff 0%,#eef7ff 55%,#eafcfb 100%);border-color:#cfe4ee}html[data-theme=ocean] .department-code,html[data-theme=ocean] .calendar-chip,html[data-theme=ocean] .empty-mark{color:#0b4b70;background:#e5f8f7;border-color:#bdeae8}html[data-theme=ocean] .eyebrow{color:#168eac}html[data-theme=ocean] .badge-admin,html[data-theme=ocean] .badge-hr,html[data-theme=ocean] .badge-hod,html[data-theme=ocean] .badge-manager{color:#0b4b70;background:#def7f5}html[data-theme=ocean] .modal{border:1px solid #d9e8f0;box-shadow:0 28px 80px #081a3338}html[data-theme=ocean] .auth-brand-panel{background:linear-gradient(145deg,#081a33 0%,#0d3262 45%,#2563eb 76%,#16c7c2 125%)}html[data-theme=ocean] .auth-brand span,html[data-theme=ocean] .auth-copy h1{color:#fff}html[data-theme=ocean] .auth-copy>p{color:#c2d6e8}html[data-theme=ocean] .auth-points span{color:#eafafa;background:#ffffff1a;border-color:#16c7c24d}html[data-theme=ocean] .shift-time-chip,html[data-theme=ocean] .day-toggle-row button,html[data-theme=ocean] .payroll-generate-actions input,html[data-theme=ocean] .payslip-attendance span{border-color:#d9e7ef}html[data-theme=dark]{--lightningcss-light: ;--lightningcss-dark:initial;color-scheme:dark;--purple-50:#211c2a;--purple-100:#292133;--purple-200:#3a3048;--purple-300:#66527d;--purple-500:#9b7dcc;--purple-600:#a184d2;--purple-700:#c5aae9;--ink:#f2eef7;--muted:#9992a4;--line:#2e2a35;--surface:#18161d;--surface-soft:#211e27;--success:#55b995;--danger:#ed8091;--warning:#e4b55c;--shadow:0 16px 40px #00000047}html[data-theme=dark] body{color:var(--ink);background:#100f13}html[data-theme=dark] .sidebar{background:#151319;border-color:#2b2731}html[data-theme=dark] .brand strong{color:#f4eff8}html[data-theme=dark] .brand span{color:#8f8798}html[data-theme=dark] .brand-mark{background:linear-gradient(145deg,#7557a5,#a184d2)}html[data-theme=dark] .nav-item{color:#aaa2b3}html[data-theme=dark] .nav-item:hover{color:#fff;background:#211e27}html[data-theme=dark] .nav-item.active{color:#d7c5ed;background:#292133}html[data-theme=dark] .profile-mini{color:#f2eef7}html[data-theme=dark] .profile-mini:hover{background:#211e27}html[data-theme=dark] .sidebar-footer{border-color:#2d2933}html[data-theme=dark] .topbar{background:#100f13eb;border-color:#2d2933}html[data-theme=dark] .card,html[data-theme=dark] .stat-card{background:#18161d;border-color:#2e2a35;box-shadow:0 5px 18px #0000001f}html[data-theme=dark] .button.secondary,html[data-theme=dark] .search-box,html[data-theme=dark] .compact-select,html[data-theme=dark] .field input,html[data-theme=dark] .field select,html[data-theme=dark] .field textarea,html[data-theme=dark] .time-pair div,html[data-theme=dark] .modal,html[data-theme=dark] .shift-time-chip,html[data-theme=dark] .day-toggle-row button,html[data-theme=dark] .payroll-generate-actions input,html[data-theme=dark] .payslip-attendance span{color:#f2eef7;background:#1d1a22;border-color:#37323d}html[data-theme=dark] .field input:disabled{color:#716a79;background:#17151b}html[data-theme=dark] th{color:#837b8b;border-color:#302c36}html[data-theme=dark] td{color:#b7afbd;border-color:#29262f}html[data-theme=dark] td strong{color:#f2eef7}html[data-theme=dark] tbody tr:hover{background:#211e27}html[data-theme=dark] .attendance-banner,html[data-theme=dark] .profile-hero{background:linear-gradient(115deg,#19171e,#251f2d);border-color:#383043}html[data-theme=dark] .attendance-today,html[data-theme=dark] .review-summary,html[data-theme=dark] .security-note,html[data-theme=dark] .switch-row{background:#211e27;border-color:#35303c}html[data-theme=dark] .modal-backdrop{background:#000000ad}html[data-theme=dark] .auth-page,html[data-theme=dark] .auth-form-panel{background:#100f13}html[data-theme=dark] .auth-brand-panel{background:linear-gradient(150deg,#17131e,#292034)}html[data-theme=dark] .auth-copy h1{color:#f2eef7}html[data-theme=dark] .auth-copy>p{color:#a69dad}html[data-theme=dark] .auth-brand span{color:#c4b4d8}html[data-theme=dark] .auth-points span{color:#c7bdcf;background:#ffffff0a;border-color:#3d3447}html[data-theme=dark] .theme-switcher{background:#18161d;border-color:#34303a}html[data-theme=dark] .theme-switcher select{color:#f2eef7}html[data-theme=dark] select option{color:#f2eef7;background:#18161d}@media (width<=760px){.theme-switcher{padding:5px 7px}.theme-switcher select{color:#0000;width:30px;padding-right:0}.topbar-right{gap:7px}}*{scrollbar-width:thin;scrollbar-color:#7959af47 transparent}::-webkit-scrollbar{width:6px;height:6px}::-webkit-scrollbar-track{background:0 0}::-webkit-scrollbar-thumb{background:#7959af40 padding-box padding-box;border:1px solid #0000;border-radius:999px}::-webkit-scrollbar-thumb:hover{background:#7959af7a padding-box padding-box}.sidebar{overflow:hidden}.side-nav{scrollbar-gutter:stable;overscroll-behavior:contain;scrollbar-width:thin;scrollbar-color:#9272c74d transparent;flex:1;min-height:0;margin-right:-2px;padding-right:5px;overflow:hidden auto}.side-nav::-webkit-scrollbar{width:4px}.side-nav::-webkit-scrollbar-track{background:0 0;margin:8px 0}.side-nav::-webkit-scrollbar-thumb{background:#9272c74d;border:0;border-radius:999px}.side-nav::-webkit-scrollbar-thumb:hover{background:#9272c78c}.sidebar-footer{flex-shrink:0}.table-wrap,.modal,.content{scrollbar-width:thin;scrollbar-color:#7959af42 transparent}.table-wrap::-webkit-scrollbar{width:6px;height:6px}.modal::-webkit-scrollbar{width:6px;height:6px}.content::-webkit-scrollbar{width:6px;height:6px}.table-wrap::-webkit-scrollbar-thumb{background:#7959af3d;border-radius:999px}.modal::-webkit-scrollbar-thumb{background:#7959af3d;border-radius:999px}.content::-webkit-scrollbar-thumb{background:#7959af3d;border-radius:999px}.table-wrap::-webkit-scrollbar-thumb:hover{background:#7959af7a}.modal::-webkit-scrollbar-thumb:hover{background:#7959af7a}.content::-webkit-scrollbar-thumb:hover{background:#7959af7a}.table-wrap::-webkit-scrollbar-track{background:0 0}.modal::-webkit-scrollbar-track{background:0 0}.content::-webkit-scrollbar-track{background:0 0}html[data-theme=ocean]{--ocean-navy:#081a33;--ocean-navy-2:#0b2447;--ocean-royal:#2563eb;--ocean-royal-deep:#1d4ed8;--ocean-turquoise:#16c7c2;--ocean-turquoise-soft:#dff8f7;--ocean-page:#edf5f8;--ocean-page-2:#f3f8fb;--ocean-card:#fafdff;--ocean-card-soft:#f2f8fb;--ocean-border:#cfdfe9}html[data-theme=ocean] body{color:#081a33;background:linear-gradient(135deg,#eaf3f7 0%,#f3f8fb 48%,#e8f7f7 100%)}html[data-theme=ocean] .main-area{background:linear-gradient(145deg,#ebf4f9fa,#f4f9fbfa 55%,#e8f7f7e6)}html[data-theme=ocean] .content{background:0 0}html[data-theme=ocean] .topbar{background:linear-gradient(90deg,#eef6fa 0%,#f5f9fb 58%,#e9f8f7 100%);border-bottom:1px solid #cbdde7;box-shadow:0 1px #082a4908}html[data-theme=ocean] .breadcrumb span{color:#168eac}html[data-theme=ocean] .breadcrumb strong{color:#0a284b}html[data-theme=ocean] .card,html[data-theme=ocean] .stat-card{background:linear-gradient(145deg,#fff 0%,#f9fcfd 100%);border:1px solid #cfdfe9;box-shadow:0 7px 20px #082a490b}html[data-theme=ocean] .card:hover{border-color:#bdd7e3}html[data-theme=ocean] .stat-card{position:relative;overflow:hidden}html[data-theme=ocean] .stat-card:after{content:"";opacity:.55;background:linear-gradient(90deg,#2563eb,#16c7c2);height:3px;position:absolute;bottom:0;left:0;right:0}html[data-theme=ocean] .stat-icon{color:#175ac8;background:linear-gradient(135deg,#e5efff,#dff8f7);border:1px solid #d1e8ed}html[data-theme=ocean] h1,html[data-theme=ocean] h2,html[data-theme=ocean] h3{color:#081a33}html[data-theme=ocean] .page-header p,html[data-theme=ocean] .card p{color:#698095}html[data-theme=ocean] .button.primary{background:linear-gradient(135deg,#2563eb 0%,#1f55d2 55%,#168ca7 130%);border-color:#2563eb;box-shadow:0 7px 16px #2563eb2e}html[data-theme=ocean] .button.primary:hover{transform:translateY(-1px);box-shadow:0 10px 20px #2563eb38}html[data-theme=ocean] .button.secondary{color:#11395e;background:#fffc;border-color:#bed4df}html[data-theme=ocean] .button.secondary:hover{color:#0b4e69;background:#eaf9f8;border-color:#65d7d2}html[data-theme=ocean] table{background:#fff9}html[data-theme=ocean] thead{background:#f2f7fa}html[data-theme=ocean] th{color:#52718a;border-bottom:1px solid #cbdde7}html[data-theme=ocean] td{border-bottom:1px solid #e1ebf0}html[data-theme=ocean] tbody tr:hover{background:linear-gradient(90deg,#2563eb09,#16c7c211)}html[data-theme=ocean] .field input,html[data-theme=ocean] .field select,html[data-theme=ocean] .field textarea,html[data-theme=ocean] .compact-select,html[data-theme=ocean] .search-box{color:#0a2948;background:#fbfdfe;border-color:#cadde7}html[data-theme=ocean] .field input:hover,html[data-theme=ocean] .field select:hover,html[data-theme=ocean] .field textarea:hover{border-color:#a8cad7}html[data-theme=ocean] .field input:focus,html[data-theme=ocean] .field select:focus,html[data-theme=ocean] .field textarea:focus{background:#fff;border-color:#16c7c2;box-shadow:0 0 0 3px #16c7c21f}html[data-theme=ocean] .empty-mark{color:#175ac8;background:linear-gradient(135deg,#e5efff,#def8f7);border:1px solid #cce7e9}html[data-theme=ocean] .sidebar{background:linear-gradient(#07182e 0%,#0b2345 54%,#102b52 100%);box-shadow:5px 0 24px #07182e21}html[data-theme=ocean] .nav-item.active{color:#fff;background:linear-gradient(90deg,#16c7c22e,#2563eb40);box-shadow:inset 3px 0 #25d4cf,0 4px 14px #0000000f}html[data-theme=ocean] .theme-switcher{background:#ffffffb8;border-color:#c8dce6;box-shadow:0 4px 14px #082a490d}html[data-theme=ocean] .modal{background:linear-gradient(145deg,#fff,#f8fcfd);border-color:#cbdfe8;box-shadow:0 32px 85px #071e3a3d}html[data-theme=normal]{scrollbar-color:#7959af47 transparent}html[data-theme=normal] ::-webkit-scrollbar-thumb{background:#7959af40}html[data-theme=normal] ::-webkit-scrollbar-thumb:hover{background:#7959af7a}html[data-theme=normal] .side-nav{scrollbar-color:#9272c74d transparent}html[data-theme=normal] .side-nav::-webkit-scrollbar-thumb{background:#9272c74d}html[data-theme=normal] .side-nav::-webkit-scrollbar-thumb:hover{background:#9272c78c}html[data-theme=ocean]{scrollbar-color:#279ab24d transparent}html[data-theme=ocean] ::-webkit-scrollbar-thumb{background:#279ab247}html[data-theme=ocean] ::-webkit-scrollbar-thumb:hover{background:#16c7c28c}html[data-theme=ocean] .side-nav{scrollbar-color:#32b5be4d transparent}html[data-theme=ocean] .side-nav::-webkit-scrollbar-thumb{background:#32b5be4d}html[data-theme=ocean] .side-nav::-webkit-scrollbar-thumb:hover{background:#32b5be94}html[data-theme=dark]{scrollbar-color:#9b7dcc47 transparent}html[data-theme=dark] ::-webkit-scrollbar-thumb{background:#9b7dcc40}html[data-theme=dark] ::-webkit-scrollbar-thumb:hover{background:#a184d27a}html[data-theme=dark] .side-nav{scrollbar-color:#a184d247 transparent}html[data-theme=dark] .side-nav::-webkit-scrollbar-thumb{background:#a184d245}html[data-theme=dark] .side-nav::-webkit-scrollbar-thumb:hover{background:#a184d280}.brand-logo{object-fit:contain;flex-shrink:0;width:44px;height:44px}.auth-logo{object-fit:contain;object-position:left center;transform-origin:0;width:135px;height:70px;margin-left:8px;display:block;transform:scale(1.65)}.auth-brand{align-items:center;min-height:90px;display:flex;overflow:visible}.mobile-logo{object-fit:contain;width:44px;height:44px}