:root{--surface:#f7f9fb;--surface-lowest:#fff;--surface-low:#f2f4f6;--surface-container:#eceef0;--surface-high:#e6e8ea;--surface-highest:#e0e3e5;--text:#191c1e;--muted:#3f4944;--outline:#bec9c2;--primary:#004532;--primary-strong:#065f46;--primary-soft:#ecfdf5;--primary-fixed:#8bd6b6;--secondary:#515f74;--tertiary:#343c51;--danger:#ba1a1a;--shadow:0 4px 18px #0f172a0f;color:var(--text);background:var(--surface);font-family:Inter,system-ui,sans-serif}*{box-sizing:border-box}body{background:var(--surface);min-width:320px;margin:0}button,input,select{font:inherit}button{cursor:pointer;border:0}button:disabled{cursor:not-allowed;opacity:.68}a{color:var(--primary-strong);font-weight:700}.material-symbols-outlined{vertical-align:middle;font-size:22px;line-height:1}.app-shell{min-height:100vh;display:flex}.sidebar{background:var(--surface-low);border-right:1px solid #bec9c28c;flex-direction:column;flex:0 0 256px;gap:24px;width:256px;height:100vh;padding:16px;display:flex;position:sticky;top:0}.brand{align-items:center;gap:12px;display:flex}.brand-mark{background:var(--primary);color:#fff;border-radius:8px;place-items:center;width:40px;height:40px;display:grid}.brand h1{color:var(--primary);margin:0;font-size:16px;font-weight:900}.brand p{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:2px 0 0;font-size:11px;font-weight:700}.side-links{gap:4px;display:grid}.side-links button,.side-links a{min-height:40px;color:var(--muted);text-align:left;background:0 0;border-radius:8px;align-items:center;gap:14px;padding:8px 12px;text-decoration:none;transition:all .16s;display:flex}.side-links button:hover,.side-links a:hover,.side-links .active{color:var(--primary-fixed);background:var(--primary-strong)}.side-links span:last-child{text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-weight:800}.sidebar-profile{color:var(--text);text-align:left;background:#e0e3e58c;border-radius:12px;align-items:center;gap:12px;margin-top:auto;padding:10px;display:flex}.sidebar-profile img{object-fit:cover;border-radius:999px;width:40px;height:40px}.sidebar-profile strong,.sidebar-profile small{display:block}.sidebar-profile strong{color:#065f46}.sidebar-profile small{color:var(--muted);margin-top:2px}.workspace{flex:1;min-width:0}.topbar{z-index:10;-webkit-backdrop-filter:blur(10px);backdrop-filter:blur(10px);background:#f7f9fbd1;border-bottom:1px solid #bec9c273;justify-content:space-between;align-items:center;gap:20px;min-height:64px;padding:10px 24px;display:flex;position:sticky;top:0}.search{width:min(440px,100%);position:relative}.search span{color:var(--muted);position:absolute;top:50%;left:12px;transform:translateY(-50%)}.search input{background:var(--surface-low);border:1px solid #0000;border-radius:999px;outline:none;width:100%;height:42px;padding:0 16px 0 42px}.search input:focus{border-color:var(--primary-strong);box-shadow:0 0 0 3px #065f461f}.top-actions,.button-row{align-items:center;gap:10px;display:flex}.top-actions>button:not(.primary-button){width:40px;height:40px;color:var(--muted);background:0 0;border-radius:999px}.top-actions>.logout-button{border-radius:999px;justify-content:center;align-items:center;gap:6px;min-width:92px;padding:0 14px;font-weight:800;display:inline-flex;width:auto!important}.top-actions>button:hover{background:var(--surface-high);color:var(--text)}.notification-wrap{position:relative}.notification-button{width:40px;height:40px;color:var(--muted);background:0 0;border-radius:999px;position:relative}.notification-button:hover{background:var(--surface-high);color:var(--text)}.notification-button i{border:2px solid var(--surface-lowest);background:#dc2626;border-radius:999px;width:13px;height:13px;position:absolute;top:6px;right:6px}.notification-menu{z-index:40;background:#fff;border:1px solid #bec9c2bf;border-radius:12px;width:min(360px,100vw - 32px);position:absolute;top:48px;right:0;overflow:hidden;box-shadow:0 24px 70px #0f172a29}.notification-head{border-bottom:1px solid #bec9c273;justify-content:space-between;align-items:center;min-height:52px;padding:14px 16px;display:flex}.notification-head span{background:var(--primary-soft);min-width:24px;height:24px;color:var(--primary-strong);border-radius:999px;place-items:center;font-size:12px;font-weight:900;display:grid}.notification-item{border-bottom:1px solid #bec9c252;padding:14px 16px}.notification-item strong{color:var(--text);display:block}.notification-item p{color:var(--muted);margin:4px 0;line-height:1.4}.notification-item small{color:var(--muted);font-size:12px}.notification-empty{color:var(--muted);padding:18px 16px;font-weight:800}.divider{background:var(--outline);width:1px;height:24px;margin:0 4px}.primary-button,.secondary-button{border-radius:8px;justify-content:center;align-items:center;gap:8px;min-height:40px;padding:8px 16px;font-weight:700;transition:all .16s;display:inline-flex}.primary-button{background:var(--primary);color:#fff;box-shadow:var(--shadow)}.primary-button:hover{filter:brightness(1.08)}.secondary-button{border:1px solid var(--outline);color:var(--muted);background:#fff}.secondary-button:hover{background:var(--surface-high);color:var(--text)}.content{gap:24px;max-width:1600px;margin:0 auto;padding:24px;display:grid}.app-footer{text-align:center;color:var(--muted);border-top:1px solid var(--outline);margin-top:8px;padding:16px 24px;font-size:12px}.page-title{justify-content:space-between;align-items:flex-start;gap:16px;display:flex}.page-title h2{letter-spacing:-.01em;color:var(--text);margin:0;font-size:36px;line-height:44px}.page-title p{color:var(--muted);margin:4px 0 0}.profile-greeting-name{color:#065f46;font-weight:900}.metric-grid,.timekeeping-metric-grid{grid-template-columns:repeat(4,minmax(0,1fr));gap:20px;display:grid}.metric-card,.panel{background:var(--surface-lowest);box-shadow:var(--shadow);border:1px solid #bec9c2bf;border-radius:12px}.metric-card{padding:24px;transition:all .18s}.metric-card:hover{transform:translateY(-2px);box-shadow:0 10px 28px #0f172a17}.metric-head{justify-content:space-between;align-items:flex-start;margin-bottom:18px;display:flex}.metric-head>span{width:42px;height:42px;color:var(--primary);background:#065f461a;border-radius:8px;place-items:center;display:grid}.metric-head strong{color:var(--primary-strong);font-size:12px}.metric-card p{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;margin:0;font-size:11px;font-weight:800}.metric-card h3{margin:5px 0 0;font-size:36px;font-weight:700;line-height:44px}.metric-card.inverted{background:var(--primary);color:#fff;position:relative;overflow:hidden}.metric-card.inverted p{color:#ffffffb8}.metric-card.inverted .metric-head span{color:#fff;background:#ffffff2e}.metric-card.inverted h3{font-size:24px;line-height:30px}.metric-card.inverted small{align-items:center;gap:8px;margin-top:18px;display:flex}.metric-card.inverted i{background:#4ade80;border-radius:999px;width:8px;height:8px;box-shadow:0 0 0 5px #4ade8026}.dashboard-grid{grid-template-columns:2fr 1fr;gap:20px;display:grid}.panel{overflow:hidden}.glass{-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffffb8}.panel-head{border-bottom:1px solid #bec9c26b;justify-content:space-between;align-items:center;gap:14px;min-height:64px;padding:18px 24px;display:flex}.panel-head h3{align-items:center;gap:8px;margin:0;font-size:20px;line-height:28px;display:flex}.panel-head select{border:1px solid var(--outline);background:var(--surface);height:34px;color:var(--muted);border-radius:8px;padding:0 10px}.department-body{grid-template-columns:1fr 1fr;align-items:center;gap:32px;padding:24px;display:grid}.donut{place-items:center;min-height:260px;display:grid;position:relative}.donut svg{width:min(240px,85%);transform:rotate(-90deg)}.donut path{fill:none;stroke-width:3.4px}.donut-soft{stroke:var(--primary-fixed);stroke-dasharray:30 100}.donut-main{stroke:var(--primary);stroke-width:4.3px;stroke-dasharray:50 100}.donut-alt{stroke:var(--secondary);stroke-dasharray:20 100;stroke-dashoffset:-80px}.donut div{text-align:center;display:grid;position:absolute}.donut strong{font-size:36px}.donut span{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:11px;font-weight:800}.progress-list{gap:18px;display:grid}.progress-list div div{justify-content:space-between;align-items:center;gap:12px;display:flex}.progress-list span{align-items:center;gap:8px;display:flex}.progress-list i{background:var(--primary);border-radius:999px;width:12px;height:12px}.progress-list i.mint{background:var(--primary-fixed)}.progress-list i.secondary{background:var(--secondary)}progress{appearance:none;background:var(--surface-high);border:0;border-radius:999px;width:100%;height:7px;overflow:hidden}progress::-webkit-progress-bar{background:var(--surface-high)}progress::-webkit-progress-value{background:var(--primary);border-radius:999px}.progress-list button,.docs button,.compensation .panel-head button{color:var(--primary-strong);background:0 0;padding:6px 0;font-weight:800}.activity-stack{gap:20px;display:grid}.activity-list{gap:4px;padding:12px;display:grid}.activity-item{border-radius:8px;gap:12px;padding:10px;display:flex}.activity-item:hover{background:var(--surface-low)}.activity-item>span{width:40px;height:40px;color:var(--primary);background:#8bd6b64d;border-radius:999px;flex:0 0 40px;place-items:center;display:grid}.activity-item p{margin:0}.activity-item small{color:var(--muted);margin-top:2px;display:block}.activity-stack .secondary-button{width:calc(100% - 48px);margin:0 24px 24px}.recruitment-card,.insight-card{color:#fff;background:linear-gradient(135deg, var(--primary), var(--primary-strong));border-radius:12px;padding:24px;box-shadow:0 18px 38px #0045322e}.recruitment-card h3{margin:0 0 8px;font-size:20px}.recruitment-card p{color:#ffffffc7}.recruitment-card button{width:100%;min-height:40px;color:var(--primary);background:#fff;border-radius:8px;font-weight:800}.table-panel .panel-head{border-bottom:0}.table-meta{color:var(--muted);font-size:13px;font-weight:800}.table-search{width:min(320px,100%);position:relative}.table-search span{color:var(--muted);position:absolute;top:50%;left:12px;transform:translateY(-50%)}.table-search input{background:#fff;border:1px solid #bec9c2bf;border-radius:999px;outline:none;width:100%;height:38px;padding:0 14px 0 40px}.table-search input:focus{border-color:var(--primary-strong);box-shadow:0 0 0 3px #065f461f}.table-scroll{overflow-x:auto}table{border-collapse:collapse;width:100%;min-width:860px}th{background:var(--surface-low);color:var(--muted);text-align:left;text-transform:uppercase;letter-spacing:.05em;padding:12px 24px;font-size:11px}td{color:var(--muted);border-top:1px solid #bec9c252;padding:12px 24px}tbody tr{transition:all .14s}tbody tr:hover{background:#f2f4f6b3}td:first-child{color:var(--text);align-items:center;gap:12px;display:flex}td img{object-fit:cover;border-radius:999px;width:40px;height:40px}td strong,td small{display:block}td small{color:var(--muted);margin-top:2px}td button{color:var(--muted);background:0 0;border-radius:6px;padding:4px}td button:hover{background:var(--surface-high);color:var(--primary)}.mono{font-family:ui-monospace,SFMono-Regular,Menlo,monospace;font-size:13px}.badge{border-radius:999px;align-items:center;min-height:24px;padding:2px 10px;font-size:12px;font-weight:800;display:inline-flex}.badge.success{color:var(--primary);background:#065f461a}.badge.warning{color:#8a5b00;background:#fff2cc}.timekeeping-table{min-width:1160px}.warning-button{cursor:pointer;color:#fff;min-height:40px;box-shadow:var(--shadow);background:#d97706;border:none;border-radius:8px;align-items:center;gap:6px;padding:0 16px;font-size:14px;font-weight:700;transition:all .16s;display:inline-flex}.warning-button:hover{filter:brightness(1.1)}.warning-button:disabled{opacity:.6;cursor:not-allowed}.payroll-filter{flex-wrap:wrap;align-items:flex-end;gap:12px;padding:0 24px 20px;display:flex}.payroll-filter label{color:var(--muted);flex-direction:column;gap:6px;font-size:13px;font-weight:700;display:flex}.payroll-filter input,.payroll-filter select{border:1px solid var(--outline);background:#fff;border-radius:8px;height:40px;padding:0 12px;font-size:14px}.payroll-filter select{min-width:200px}.payroll-filter-divider{background:var(--outline);align-self:flex-end;width:1px;height:40px}.payroll-filter-actions{align-self:flex-end;align-items:center;gap:10px;display:flex}.payroll-table{width:100%;min-width:1100px;font-size:13px}.payroll-table th,.payroll-table td{padding:10px 12px}.payroll-table tfoot td{border-top:2px solid var(--outline);background:var(--surface-high);padding:10px 12px}.payroll-name-cell{min-width:140px;max-width:180px}.payroll-role-cell{min-width:120px;max-width:160px;color:var(--muted);font-size:12px}.payroll-period-cell{white-space:nowrap;color:var(--muted);min-width:100px;font-size:12px}.payroll-num-cell{white-space:nowrap;text-align:right}.payroll-total{color:var(--primary-strong)}.payroll-no-link{color:#b45309;margin-top:2px;font-size:11px;font-weight:600;display:block}.muted-cell{color:var(--muted);text-align:center}.payroll-cell-editable{cursor:pointer;border-radius:5px;min-width:48px;padding:3px 7px;font-size:13px;transition:background .12s;display:inline-block}.payroll-cell-editable:hover{background:var(--surface-high)}.payroll-cell-empty{color:var(--muted)}.payroll-cell-input{border:1.5px solid var(--primary);border-radius:6px;outline:none;width:100px;height:32px;padding:0 8px;font-size:13px}.payroll-cell-input[type=text]{width:130px}.payroll-save-notice{color:var(--primary-strong);font-size:13px;font-weight:700}.payroll-action-cell{text-align:center;white-space:nowrap}.payslip-btn{color:var(--primary-strong);cursor:pointer;background:#065f4614;border:none;border-radius:6px;align-items:center;gap:4px;padding:4px 10px;font-size:12px;font-weight:700;transition:background .12s;display:inline-flex}.payslip-btn:hover{background:#065f4629}.time-avatar{background:var(--primary-soft);width:40px;height:40px;color:var(--primary-strong);border-radius:999px;flex:0 0 40px;place-items:center;font-size:13px;font-weight:900;display:grid}.time-status{text-transform:capitalize;border-radius:999px;align-items:center;gap:6px;min-height:26px;padding:2px 10px;font-size:12px;font-weight:900;display:inline-flex}.time-status:before{content:"";background:currentColor;border-radius:999px;width:8px;height:8px}.time-status.active{color:#047857;background:#ecfdf5}.time-status.idle{color:#64748b;background:#f1f5f9}.session-pill-list{flex-wrap:wrap;gap:6px;max-width:360px;display:flex}.session-pill{background:var(--surface-low);min-height:28px;color:var(--muted);white-space:nowrap;border-radius:999px;align-items:center;padding:4px 10px;font-size:12px;font-weight:800;display:inline-flex}.sync-note{background:var(--primary-soft);color:var(--primary-strong);border:1px solid #065f4624;border-radius:10px;gap:4px;padding:14px 16px;display:grid}.sync-note strong{font-size:13px;font-weight:900}.sync-note span{color:var(--muted);font-size:13px;font-weight:700}.badge.neutral{color:var(--secondary);background:#515f741f}.badge.info{color:#075985;background:#e0f2fe}.fab{background:var(--primary);color:#fff;border-radius:999px;place-items:center;width:56px;height:56px;display:grid;position:fixed;bottom:24px;right:24px;box-shadow:0 20px 40px #00453240}.filter-bar{flex-wrap:wrap;align-items:center;gap:12px;min-height:72px;padding:14px 18px;display:flex}.filter-bar span{color:var(--muted);align-items:center;gap:8px;font-weight:700;display:inline-flex}.filter-bar button{background:var(--surface-low);color:var(--muted);border:1px solid var(--outline);border-radius:999px;padding:7px 12px}.filter-bar button.active{background:var(--primary);border-color:var(--primary);color:#fff}.filter-bar button small{opacity:.75;margin-left:4px;font-weight:900}.view-toggle{background:var(--surface-high);border-radius:8px;padding:3px;display:inline-flex}.view-toggle button{border:0;border-radius:6px;padding:5px 10px}.view-toggle .active{color:var(--primary);box-shadow:var(--shadow);background:#fff}.pagination{justify-content:flex-end;align-items:center;gap:8px;display:flex}.pagination button{border:1px solid var(--outline);width:34px;height:34px;color:var(--muted);background:#fff;border-radius:6px}.pagination .active{background:var(--primary);color:#fff;border-color:var(--primary)}.breadcrumb{color:var(--muted);align-items:center;gap:8px;font-size:13px;font-weight:700;display:flex}.profile-grid{grid-template-columns:minmax(0,1fr) 360px;align-items:start;gap:20px;display:grid}.profile-main,.profile-side{gap:20px;display:grid}.detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:18px;padding:24px;display:grid}.detail-grid span{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:800;display:block}.detail-grid strong{margin-top:4px;display:block}.salary-card{background:var(--primary-soft);border-radius:12px;margin:24px;padding:24px}.salary-card span{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:800}.salary-card strong{color:var(--primary);margin-top:6px;font-size:36px;display:block}.salary-card small{color:var(--primary-strong);align-items:center;gap:6px;margin-top:8px;font-weight:700;display:inline-flex}.benefit-grid{grid-template-columns:repeat(3,1fr);gap:12px;padding:0 24px 24px;display:grid}.benefit-grid span{border:1px solid var(--outline);text-align:center;min-height:72px;color:var(--primary);border-radius:10px;place-items:center;font-weight:800;display:grid}.profile-leave-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:14px;padding:24px;display:grid}.profile-leave-card{border:1px solid #bec9c2bf;border-left:5px solid var(--leave-color);background:var(--surface-lowest);border-radius:10px;min-height:118px;padding:16px}.profile-leave-card span{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:900;display:block}.profile-leave-card strong{color:var(--leave-color);margin-top:8px;font-size:34px;line-height:1;display:block}.profile-leave-card small{color:var(--muted);margin-top:8px;font-weight:700;display:block}.profile-card{text-align:center;padding:24px}.profile-photo-button{background:0 0;border-radius:999px;place-items:center;padding:0;display:inline-grid;position:relative}.profile-photo-button img{object-fit:cover;width:128px;height:128px;box-shadow:var(--shadow);border:4px solid #fff;border-radius:999px}.profile-photo-button span{color:#fff;background:#004532e6;border-radius:999px;justify-content:center;align-items:center;gap:4px;min-height:28px;font-size:11px;font-weight:800;display:inline-flex;position:absolute;inset:auto 8px 8px}.profile-photo-button span .material-symbols-outlined{font-size:15px}.profile-photo-error{text-align:left;margin-top:14px}.visually-hidden{clip:rect(0, 0, 0, 0);white-space:nowrap;border:0;width:1px;height:1px;margin:-1px;padding:0;position:absolute;overflow:hidden}.profile-card h3{margin:14px 0 4px;font-size:20px}.profile-card p{color:var(--muted);margin:0 0 14px}.docs .doc-row{color:var(--text);border-top:1px solid #bec9c252;align-items:center;gap:10px;padding:12px 18px;text-decoration:none;display:flex}.docs .doc-row span:nth-child(2){flex:1;font-weight:700}.docs .doc-link:hover{background:var(--primary-soft);color:var(--primary-strong)}.docs .disabled-doc{color:var(--muted)}.docs button{width:100%;padding:14px}.insight-card{background:var(--tertiary);gap:12px;display:grid}.insight-card p{color:#ffffffdb;margin:0}.insight-card button{color:#fff;background:0 0;align-items:center;gap:6px;padding:0;font-weight:800;display:inline-flex}.login-screen{background:var(--surface);grid-template-columns:minmax(0,1.05fr) minmax(440px,.95fr);min-height:100vh;display:grid}.login-visual{color:#fff;min-height:100vh;position:relative;overflow:hidden}.login-visual>img{object-fit:cover;width:100%;height:100%;position:absolute;inset:0}.login-visual:after{content:"";background:linear-gradient(135deg,#002116c7,#0045328c);position:absolute;inset:0}.login-overlay{z-index:1;flex-direction:column;justify-content:flex-end;gap:24px;min-height:100%;padding:48px;display:flex;position:relative}.login-overlay .brand h1,.login-overlay .brand p{color:#fff}.login-overlay h2{letter-spacing:-.02em;max-width:680px;margin:auto 0 0;font-size:clamp(36px,5vw,64px);line-height:1}.login-overlay p{color:#ffffffd1;max-width:560px;font-size:17px;line-height:1.6}.avatar-stack{align-items:center;gap:0;display:flex}.avatar-stack img{object-fit:cover;border:2px solid var(--primary);border-radius:999px;width:42px;height:42px;margin-right:-10px}.avatar-stack span{margin-left:22px;font-weight:800}.login-panel{place-items:center;padding:32px;display:grid}.login-card{border:1px solid #bec9c2a6;border-radius:16px;width:min(100%,440px);padding:32px;box-shadow:0 24px 70px #0f172a14}.login-logo{background:var(--primary-soft);width:48px;height:48px;color:var(--primary);border-radius:12px;place-items:center;display:grid}.login-card h1{margin:20px 0 4px;font-size:24px}.login-card p{color:var(--muted);margin:0 0 24px}.login-card label{color:var(--muted);margin-bottom:8px;font-size:12px;font-weight:800;display:block}.label-line{justify-content:space-between;align-items:center;margin-top:16px;display:flex}.input-row{position:relative}.input-row span{color:var(--muted);position:absolute;top:50%;left:14px;transform:translateY(-50%)}.input-row input{background:var(--surface);border:1px solid #bec9c2bf;border-radius:8px;outline:none;width:100%;height:48px;padding:0 14px 0 46px}.input-row input:focus{border-color:var(--primary-strong);box-shadow:0 0 0 3px #065f461f}.check{align-items:center;gap:8px;margin:16px 0;color:var(--text)!important;text-transform:none!important;letter-spacing:0!important;font-weight:600!important;display:flex!important}.login-submit{width:100%;min-height:48px}.sso-grid{grid-template-columns:1fr 1fr;gap:12px;margin:18px 0;display:grid}.sso-grid button{border:1px solid var(--outline);min-height:40px;color:var(--text);background:#fff;border-radius:8px;font-weight:800}.login-card small{text-align:center;color:var(--muted);display:block}.form-error{color:var(--danger);background:#fff1f1;border-radius:8px;margin:0 0 16px;padding:10px 12px;font-size:13px;font-weight:700}.form-success{background:var(--primary-soft);color:var(--primary-strong);border-radius:8px;margin:0;padding:10px 12px;font-size:13px;font-weight:800}.loading-panel{color:var(--muted);padding:24px;font-weight:800}.empty-state{color:var(--muted);padding:28px;font-weight:800}@keyframes spin{to{transform:rotate(360deg)}}.sync-progress-panel{flex-direction:column;align-items:center;gap:28px;padding:36px 24px 32px;display:flex}.sync-spinner-ring{border:4px solid var(--surface-high);border-top-color:var(--primary);border-radius:50%;width:52px;height:52px;animation:.8s linear infinite spin}.sync-steps-list{flex-direction:column;gap:12px;width:100%;max-width:260px;display:flex}.sync-step-item{color:var(--surface-highest);align-items:center;gap:10px;font-size:13px;font-weight:600;transition:color .3s;display:flex}.sync-step-item.active{color:var(--primary);font-weight:800}.sync-step-item.done{color:#16a34a}.sync-step-icon{text-align:center;flex-shrink:0;width:16px;font-size:13px}.modal-backdrop{z-index:50;background:#0f172a6b;place-items:center;padding:24px;display:grid;position:fixed;inset:0}.modal-card{background:var(--surface-lowest);border-radius:12px;width:min(920px,100%);max-height:min(860px,100vh - 48px);overflow:auto;box-shadow:0 24px 80px #0f172a3d}.modal-head{z-index:1;background:#fff;border-bottom:1px solid #bec9c273;justify-content:space-between;align-items:flex-start;gap:16px;padding:22px 24px;display:flex;position:sticky;top:0}.modal-head h3{margin:0;font-size:22px}.modal-head p{color:var(--muted);margin:4px 0 0}.icon-button{background:var(--surface-low);width:36px;height:36px;color:var(--muted);border-radius:999px;place-items:center;display:grid}.employee-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:24px;display:grid}.employee-form label{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;gap:8px;font-size:12px;font-weight:800;display:grid}.employee-form input,.employee-form select,.employee-form textarea{width:100%;min-height:44px;color:var(--text);text-transform:none;letter-spacing:0;background:#fff;border:1px solid #bec9c2bf;border-radius:8px;outline:none;padding:10px 12px;font-weight:600}.employee-form textarea{resize:vertical;min-height:86px}.employee-form input:focus,.employee-form select:focus,.employee-form textarea:focus{border-color:var(--primary-strong);box-shadow:0 0 0 3px #065f461f}.full-span{grid-column:1/-1}.file-input input{padding:10px}.file-input span{color:var(--primary-strong);text-transform:none;letter-spacing:0;font-size:13px}.modal-actions{justify-content:flex-end;gap:12px;padding-top:8px;display:flex}.leave-balance-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:20px;display:grid}.leave-balance-card{border:1px solid #bec9c2bf;border-top:5px solid var(--leave-color);box-shadow:var(--shadow);background:#fff;border-radius:12px;gap:20px;padding:24px;display:grid}.leave-balance-card>div span{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:900;display:block}.leave-balance-card>div strong{color:var(--leave-color);margin-top:6px;font-size:42px;line-height:1;display:block}.leave-balance-card>div small{color:var(--muted);font-weight:700}.leave-balance-card dl{grid-template-columns:repeat(3,1fr);gap:10px;margin:0;display:grid}.leave-balance-card dl div{background:var(--surface-low);border-radius:8px;padding:10px}.leave-balance-card dt{color:var(--muted);text-transform:uppercase;font-size:11px;font-weight:800}.leave-balance-card dd{margin:4px 0 0;font-weight:900}.leave-status{text-transform:capitalize;border-radius:999px;align-items:center;min-height:24px;padding:2px 10px;font-size:12px;font-weight:900;display:inline-flex}.leave-status.pending{color:#8a5b00;background:#fff2cc}.leave-status.approved{color:#065f46;background:#065f461a}.leave-status.rejected{color:#ba1a1a;background:#fff1f1}.leave-form{grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;padding:24px;display:grid}.leave-form label{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;gap:8px;font-size:12px;font-weight:900;display:grid}.leave-form input,.leave-form select,.leave-form textarea{width:100%;min-height:44px;color:var(--text);text-transform:none;letter-spacing:0;background:#fff;border:1px solid #bec9c2bf;border-radius:8px;outline:none;padding:10px 12px;font-weight:600}.leave-form textarea{resize:vertical;min-height:96px}.leave-calculation{background:var(--primary-soft);color:var(--primary-strong);border-radius:10px;gap:4px;padding:16px;display:grid}.leave-calculation.warning{color:var(--danger);background:#fff1f1}.leave-calculation span,.leave-calculation small{font-weight:800}.leave-calculation strong{font-size:26px}.approver-box{background:var(--surface-low);border:1px solid #bec9c2bf;border-radius:10px;gap:10px;padding:16px;display:grid}.approver-box>span{color:var(--muted);text-transform:uppercase;letter-spacing:.05em;font-size:12px;font-weight:900}.approver-box div{align-items:center;gap:12px;display:flex}.approver-box img{object-fit:cover;border-radius:999px;width:42px;height:42px}.approver-box p{margin:0}.approver-box small{color:var(--muted);margin-top:2px;display:block}.approval-counter{background:var(--primary-soft);min-height:54px;color:var(--primary-strong);border-radius:12px;align-items:center;gap:8px;padding:10px 14px;font-weight:900;display:inline-flex}.approval-counter strong{color:var(--primary);font-size:24px}.approval-employee{align-items:center;gap:10px;display:inline-flex}.approval-employee img{object-fit:cover;border-radius:999px;width:36px;height:36px}.approval-employee strong,.approval-employee small{display:block}.approval-employee small{color:var(--muted);margin-top:2px}.approval-actions{gap:8px;display:inline-flex}.approval-actions button{border-radius:8px;min-height:32px;padding:6px 10px;font-weight:900}.approve-button{background:var(--primary-soft);color:var(--primary-strong)}.reject-button{color:var(--danger);background:#fff1f1}.muted-action{color:var(--muted);font-weight:800}.hr-leave-layout{grid-template-columns:minmax(0,1fr) 360px;align-items:start;gap:20px;display:grid}.hr-calendar-panel{min-width:0}.calendar-legend{color:var(--muted);flex-wrap:wrap;align-items:center;gap:10px;font-size:12px;font-weight:800;display:flex}.calendar-legend span{align-items:center;gap:5px;display:inline-flex}.calendar-legend i{border-radius:999px;width:10px;height:10px}.calendar-legend .approved{background:#065f46}.calendar-legend .pending{background:#d97706}.calendar-legend .done{background:#64748b}.calendar-legend .holiday{background:#2563eb}.leave-calendar{border-top:1px solid #bec9c26b;border-left:1px solid #bec9c26b;grid-template-columns:repeat(7,minmax(0,1fr));display:grid}.calendar-weekday{background:var(--surface-low);min-height:42px;color:var(--muted);text-transform:uppercase;letter-spacing:.05em;border-bottom:1px solid #bec9c26b;border-right:1px solid #bec9c26b;place-items:center;font-size:11px;font-weight:900;display:grid}.calendar-day{background:#fff;border-bottom:1px solid #bec9c26b;border-right:1px solid #bec9c26b;min-height:132px;padding:8px}.calendar-day.muted{background:var(--surface-low);color:var(--muted)}.calendar-day.today{box-shadow:inset 0 0 0 2px var(--primary-strong)}.calendar-day-number{width:28px;height:28px;color:var(--text);border-radius:999px;place-items:center;font-weight:900;display:grid}.calendar-day.today .calendar-day-number{background:var(--primary);color:#fff}.calendar-events{gap:5px;margin-top:6px;display:grid}.calendar-chip{color:#fff;cursor:pointer;text-align:left;text-overflow:ellipsis;white-space:nowrap;border:0;border-radius:6px;width:100%;padding:4px 6px;font-size:11px;font-weight:800;overflow:hidden}.calendar-chip:hover{filter:brightness(.94)}.calendar-chip:focus-visible{outline-offset:2px;outline:3px solid #065f463d}.calendar-chip.approved{background:#065f46}.calendar-chip.pending{background:#d97706}.calendar-chip.done{background:#64748b}.calendar-chip.holiday{background:#2563eb}.detail-actions{padding:0 24px 24px}.danger-button{color:#b91c1c;background:#fef2f2;border:1px solid #dc26263d;border-radius:8px;justify-content:center;align-items:center;min-height:40px;padding:8px 16px;font-weight:900;display:inline-flex}.danger-button:hover{background:#fee2e2}.danger-button:disabled{opacity:.62;cursor:not-allowed}.calendar-more{color:var(--muted);font-size:11px;font-weight:800}.upcoming-leave-card{position:sticky;top:84px}.upcoming-leave-list{gap:4px;padding:12px;display:grid}.upcoming-leave-item{width:100%;color:inherit;cursor:pointer;text-align:left;background:0 0;border:0;border-radius:8px;gap:12px;padding:10px;display:flex}.upcoming-leave-item:hover{background:var(--surface-low)}.upcoming-holiday-item{align-items:center}.holiday-date-badge{background:var(--primary-soft);width:46px;height:46px;color:var(--primary-strong);text-align:center;border-radius:10px;flex:none;place-items:center;font-size:12px;font-weight:900;display:grid}.upcoming-leave-item img{object-fit:cover;border-radius:999px;width:42px;height:42px}.upcoming-leave-item strong,.upcoming-leave-item span,.upcoming-leave-item small{display:block}.upcoming-leave-item span{color:var(--muted);margin-top:2px;font-size:13px}.upcoming-leave-item small{background:var(--primary-soft);width:fit-content;color:var(--primary-strong);text-transform:capitalize;border-radius:999px;margin-top:6px;padding:2px 8px;font-weight:900}@media (width<=1100px){.metric-grid,.timekeeping-metric-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.dashboard-grid,.profile-grid,.leave-balance-grid,.hr-leave-layout{grid-template-columns:1fr}.profile-side{grid-template-columns:repeat(2,minmax(0,1fr))}.insight-card{grid-column:1/-1}.upcoming-leave-card{position:static}}@media (width<=820px){.app-shell{display:block}.sidebar{flex-direction:row;align-items:center;width:100%;height:auto;position:static;overflow-x:auto}.side-links{display:flex}.side-links button span:last-child,.sidebar-profile span,.brand p{display:none}.sidebar-profile{margin:0 0 0 auto}.topbar{flex-direction:column;align-items:stretch}.top-actions{justify-content:space-between}.content{padding:16px}.page-title{flex-direction:column}.page-title h2{font-size:30px;line-height:38px}.department-body,.detail-grid,.benefit-grid,.profile-side,.profile-leave-grid,.leave-calendar{grid-template-columns:1fr}.calendar-weekday,.calendar-day.muted{display:none}.login-screen{grid-template-columns:1fr}.login-visual{min-height:42vh}.login-overlay{padding:28px}.login-overlay h2{font-size:34px}}@media (width<=560px){.metric-grid,.timekeeping-metric-grid{grid-template-columns:1fr}.top-actions .divider,.top-actions .primary-button{display:none}.login-panel{padding:16px}.login-card{padding:24px}.sso-grid,.employee-form,.leave-form{grid-template-columns:1fr}}.settings-section{flex-direction:column;gap:24px;display:flex}.settings-section-header{flex-wrap:wrap;justify-content:space-between;align-items:center;gap:12px;display:flex}.settings-section-header h3{color:var(--text-primary);margin:0;font-size:18px;font-weight:700}.accounts-table-wrap{overflow-x:auto}.accounts-table{border-collapse:collapse;width:100%;font-size:14px}.accounts-table th{text-align:left;text-transform:uppercase;letter-spacing:.06em;color:var(--text-muted);border-bottom:1px solid var(--border);white-space:nowrap;padding:10px 14px;font-size:11px;font-weight:700}.accounts-table td{border-bottom:1px solid var(--border);color:var(--text-primary);vertical-align:middle;padding:13px 14px}.accounts-table tr:last-child td{border-bottom:none}.accounts-table tr:hover td{background:var(--surface-low)}.account-name-cell{align-items:center;gap:10px;display:flex}.account-avatar{object-fit:cover;background:var(--surface-high);border-radius:50%;flex-shrink:0;width:32px;height:32px}.account-name-cell strong{font-weight:600;line-height:1.3;display:block}.account-name-cell small{color:var(--text-muted);font-size:12px}.role-badge{text-transform:capitalize;border-radius:20px;padding:3px 10px;font-size:11px;font-weight:700;display:inline-block}.role-badge.admin{color:#92400e;background:#fef3c7}.role-badge.hr{color:#1e40af;background:#dbeafe}.role-badge.manager{color:#6b21a8;background:#f3e8ff}.role-badge.employee{color:#166534;background:#dcfce7}.role-select-inline{border:1px solid var(--border);background:var(--surface);color:var(--text-primary);cursor:pointer;border-radius:6px;padding:5px 8px;font-size:13px}.role-select-inline:focus{border-color:var(--primary);outline:none}.btn-sm{cursor:pointer;border:none;border-radius:6px;padding:5px 12px;font-size:12px;font-weight:600;transition:background .15s}.btn-sm.btn-ghost{color:var(--text-muted);border:1px solid var(--border);background:0 0}.btn-sm.btn-ghost:hover{background:var(--surface-high);color:var(--text-primary)}.btn-sm.btn-danger{color:#b91c1c;background:#fee2e2}.btn-sm.btn-danger:hover{background:#fecaca}.btn-sm.btn-save{background:var(--primary);color:#fff}.btn-sm.btn-save:hover{background:var(--primary-dark,#003826)}.create-account-modal{flex-direction:column;gap:20px;display:flex}.emp-picker-grid{grid-template-columns:repeat(auto-fill,minmax(200px,1fr));gap:10px;max-height:260px;padding:2px;display:grid;overflow-y:auto}.emp-picker-card{border:2px solid var(--border);cursor:pointer;border-radius:10px;align-items:center;gap:10px;padding:10px 12px;transition:border-color .15s,background .15s;display:flex}.emp-picker-card:hover:not(.taken){border-color:var(--primary);background:var(--surface-low)}.emp-picker-card.selected{border-color:var(--primary);background:#f0fdf4}.emp-picker-card.taken{opacity:.45;cursor:not-allowed}.emp-picker-card img{object-fit:cover;background:var(--surface-high);border-radius:50%;flex-shrink:0;width:36px;height:36px}.emp-picker-card span{color:var(--text-primary);font-size:13px;font-weight:600;line-height:1.3}.emp-picker-card small{color:var(--text-muted);font-size:11px;display:block}.account-form-fields{grid-template-columns:1fr 1fr;gap:14px;display:grid}.account-form-fields .field-full{grid-column:1/-1}.account-form-fields label{color:var(--text-primary);flex-direction:column;gap:5px;font-size:13px;font-weight:600;display:flex}.account-form-fields input,.account-form-fields select{border:1px solid var(--border);background:var(--surface);color:var(--text-primary);border-radius:8px;padding:9px 12px;font-size:14px}.account-form-fields input:focus,.account-form-fields select:focus{border-color:var(--primary);outline:none}.password-field-wrap{gap:8px;display:flex}.password-field-wrap input{flex:1}.password-field-wrap button{border:1px solid var(--border);background:var(--surface-high);color:var(--text-primary);cursor:pointer;white-space:nowrap;border-radius:8px;padding:9px 14px;font-size:12px;font-weight:600}.password-field-wrap button:hover{background:var(--surface-highest)}.delete-confirm-body{flex-direction:column;gap:12px;display:flex}.delete-confirm-body p{color:var(--text-primary);margin:0;font-size:14px;line-height:1.6}.delete-confirm-actions{justify-content:flex-end;gap:10px;display:flex}@media (width<=768px){.emp-picker-grid{grid-template-columns:1fr 1fr}.account-form-fields{grid-template-columns:1fr}.account-form-fields .field-full{grid-column:1}}