:root{font-family:"Noto Sans Thai","Segoe UI",Tahoma,sans-serif;color:#172033;background:#f4f7fb;--red:#a70812;--blue:#164e87;--line:#dce3ec;--muted:#667085}
*{box-sizing:border-box}body{margin:0}.hidden{display:none!important}button,input,select,textarea{font:inherit}button{cursor:pointer}
.login-wrap{min-height:100vh;display:grid;place-items:center;background:radial-gradient(circle at top left,#dcecff,#f8fafc 48%,#f9e5e6)}
.login-card{width:min(430px,92vw);background:#fff;padding:38px;border-radius:22px;box-shadow:0 24px 70px #16345124;display:grid;gap:15px}
.login-card h1{margin:0;font-size:26px}.login-card p,.login-card small{color:var(--muted)}.brand-mark{width:64px;height:64px;border-radius:18px;background:var(--red);color:#fff;display:grid;place-items:center;font-weight:800;font-size:22px}
label{display:grid;gap:6px;color:#344054;font-size:14px}input,select,textarea{border:1px solid #cbd5e1;border-radius:9px;padding:9px 11px;background:#fff;min-width:0}input:focus,select:focus{outline:3px solid #bfdbfe;border-color:#3b82f6}
button{border:1px solid #c9d3df;border-radius:9px;background:#fff;padding:9px 14px;color:#243349}.primary{background:var(--blue);color:#fff;border-color:var(--blue)}.danger{color:#a70812;border-color:#e8b5b9}.ghost{background:transparent}.small{padding:5px 9px;font-size:12px}
header{height:74px;background:#fff;border-bottom:1px solid var(--line);display:flex;align-items:center;justify-content:space-between;padding:0 28px;position:sticky;top:0;z-index:3}.brand{display:flex;align-items:center;gap:12px}.brand>span{background:var(--red);color:#fff;border-radius:10px;padding:10px;font-weight:800}.brand div{display:grid}.brand small{color:var(--muted)}.header-actions{display:flex;align-items:center;gap:14px}.header-actions label{display:flex;align-items:center;gap:8px}
nav{background:#fff;border-bottom:1px solid var(--line);display:flex;gap:4px;padding:8px 24px;overflow:auto;position:sticky;top:74px;z-index:2}nav button{border:0;background:transparent;white-space:nowrap}nav button.active{background:#eaf2fb;color:#123e70;font-weight:700}
main{padding:24px;max-width:1600px;margin:auto}.page>h1{margin:0 0 18px;font-size:24px}.cards{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:16px}.card,.panel{background:#fff;border:1px solid var(--line);border-radius:14px;padding:18px;box-shadow:0 2px 7px #1b2a3d0a}.metric{font-size:29px;font-weight:800;color:#173f6d}.muted{color:var(--muted)}.toolbar{display:flex;flex-wrap:wrap;align-items:center;gap:10px;margin:0 0 14px}.toolbar .push{margin-left:auto}
.table-wrap{overflow:auto;border:1px solid var(--line);border-radius:12px;background:#fff;max-height:67vh}table{border-collapse:collapse;width:100%;font-size:13px}th,td{border-bottom:1px solid #e8edf3;padding:9px 10px;text-align:left;white-space:nowrap}th{background:#f0f4f8;position:sticky;top:0;z-index:1;color:#344054}tr:hover td{background:#f8fbff}.num{text-align:right;font-variant-numeric:tabular-nums}.warn{color:#9a6700}.bad{color:#b42318}.good{color:#067647}.pill{padding:3px 8px;border-radius:999px;background:#eef2f6;font-size:12px}.pill.PRESENT,.pill.APPROVED{background:#dcfae6;color:#067647}.pill.MISSING_SCAN,.pill.INCOMPLETE_SCAN,.pill.REJECTED,.pill.CANCELLED{background:#fee4e2;color:#b42318}.pill.PENDING,.pill.SATURDAY_REVIEW,.pill.PENDING_SUPERVISOR,.pill.PENDING_HR{background:#fef0c7;color:#93370d}.pill.LEAVE_PAID{background:#e0f2fe;color:#075985}.pill.LEAVE_UNPAID{background:#fef3c7;color:#92400e}.pill.LEAVE_MIXED{background:#ede9fe;color:#6d28d9}
.payroll-table-wrap{max-height:none;overflow:visible}.payroll-table{table-layout:fixed;font-size:12px}.payroll-table th,.payroll-table td{padding:8px 6px}.payroll-table th{position:static;white-space:normal}.payroll-table td{white-space:normal}.payroll-table .employee-col{width:170px}.payroll-table .department-col{width:130px}.payroll-table td small{display:block;color:var(--muted);margin-top:3px}.payroll-table .num{white-space:nowrap}.payroll-actions{width:94px}.payroll-actions button{width:100%;margin:2px 0}.payroll-detail-dialog{width:min(980px,94vw);max-height:90vh;overflow:auto}.payroll-dialog-bar{position:sticky;top:0;z-index:2;background:#173f6d;color:#fff;padding:14px 18px;display:flex;justify-content:space-between;align-items:center}.payroll-detail-content{padding:20px}.payroll-detail-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.payroll-detail-head h2{margin:0}.payroll-detail-head p{margin:5px 0 0;color:var(--muted)}.payroll-detail-content h3{margin:22px 0 9px;color:#173f6d}.payroll-detail-grid{display:grid;grid-template-columns:repeat(4,minmax(140px,1fr));gap:9px}.payroll-detail-grid>div{background:#f6f8fb;border:1px solid #e4e9f0;border-radius:10px;padding:10px;display:grid;gap:3px}.payroll-detail-grid small{color:var(--muted)}.payroll-detail-grid b{font-size:16px}.payroll-detail-grid span{font-size:11px;color:#175cd3}
.grid-form{display:grid;grid-template-columns:repeat(auto-fit,minmax(185px,1fr));gap:12px}.grid-form .wide{grid-column:1/-1}.panel{margin-bottom:16px}.panel h2{margin-top:0;font-size:18px}.dropzone{border:2px dashed #9bb1ca;border-radius:14px;padding:34px;text-align:center;background:#f8fbff}.dropzone input{max-width:100%}
.tax-profile{border:1px solid var(--line);border-radius:10px;padding:10px 12px;background:#f8fbff}.tax-profile summary{cursor:pointer;color:#173f6d}.tax-profile[open] summary{margin-bottom:12px}
.notice{padding:12px 14px;border-radius:10px;background:#eff8ff;color:#175cd3;margin-bottom:14px}.notice.warn{background:#fffaeb;color:#93370d}
#toast{position:fixed;right:22px;bottom:22px;z-index:10;background:#101828;color:#fff;padding:12px 18px;border-radius:10px;box-shadow:0 8px 30px #0003;opacity:0;transform:translateY(10px);transition:.2s;pointer-events:none}#toast.show{opacity:1;transform:none}dialog{border:0;border-radius:16px;padding:0;box-shadow:0 24px 70px #0004}dialog::backdrop{background:#17203399}.dialog-form{padding:25px;min-width:min(420px,90vw);display:grid;gap:13px}.dialog-form h2{margin:0}
.split{display:grid;grid-template-columns:minmax(330px,.8fr) minmax(500px,1.7fr);gap:16px}.kicker{font-size:12px;color:#667085;text-transform:uppercase;letter-spacing:.06em}.empty{padding:32px;text-align:center;color:var(--muted)}
.executive-head{background:linear-gradient(120deg,#123e70,#176aa1);color:#fff;border-radius:18px;padding:22px 24px;margin-bottom:16px}.executive-head h1{margin:0 0 5px}.executive-head .muted{color:#d9e8f7}.executive-kpis .card{border-top:4px solid #2474ad}.executive-kpis .metric{font-size:25px}.chart-grid{display:grid;grid-template-columns:minmax(540px,1.5fr) minmax(300px,.7fr);gap:16px;margin-top:16px}.chart-panel{min-height:330px}.chart-panel h2{margin-bottom:4px}.chart-legend{display:flex;flex-wrap:wrap;gap:14px;margin:12px 0;font-size:12px;color:var(--muted)}.legend-dot{display:inline-block;width:10px;height:10px;border-radius:3px;margin-right:5px}.dept-row{display:grid;grid-template-columns:minmax(120px,190px) 1fr 115px;gap:10px;align-items:center;margin:11px 0}.dept-name{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.bar-track{height:18px;background:#edf2f7;border-radius:6px;display:flex;overflow:hidden}.bar-segment{height:100%;min-width:0}.bar-regular{background:#2563a8}.bar-ot{background:#f59e0b}.bar-bonus{background:#10b981}.deduction-wrap{display:grid;place-items:center;gap:14px;margin-top:24px}.donut{width:185px;height:185px;border-radius:50%;display:grid;place-items:center}.donut::after{content:"";width:105px;height:105px;border-radius:50%;background:#fff}.deduction-list{width:100%;display:grid;gap:8px}.deduction-item{display:flex;justify-content:space-between;gap:10px;border-bottom:1px solid #edf0f4;padding-bottom:6px}.trend-svg{width:100%;height:auto;min-height:245px}.trend-grid{stroke:#dce3ec;stroke-width:1}.trend-line{fill:none;stroke:#176aa1;stroke-width:4;stroke-linecap:round;stroke-linejoin:round}.trend-area{fill:#dbeefe}.trend-dot{fill:#fff;stroke:#176aa1;stroke-width:3}.trend-label{font-size:12px;fill:#667085}.trend-value{font-size:11px;fill:#344054}.summary-strip{display:grid;grid-template-columns:repeat(4,1fr);gap:10px;margin-top:14px}.summary-strip>div{background:#f7f9fc;border-radius:10px;padding:11px}
.chart-title-row{display:flex;align-items:flex-start;justify-content:space-between;gap:16px}.chart-title-row>div{min-width:0}.chart-title-row label{min-width:190px}.chart-title-row select{padding:7px 9px}.dept-row>.num{font-size:12px}
.portal-head{background:linear-gradient(120deg,#123e70,#2085b5);color:#fff;border-radius:18px;padding:22px 24px;margin-bottom:16px;display:flex;align-items:center;justify-content:space-between;gap:15px}.portal-head h1{margin:0 0 4px}.portal-badge{background:#ffffff24;border:1px solid #ffffff55;border-radius:999px;padding:8px 13px}.balance-grid{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:12px;margin-bottom:16px}.balance-card{background:#fff;border:1px solid var(--line);border-left:5px solid #2474ad;border-radius:12px;padding:14px;display:grid;gap:3px}.balance-card b{font-size:27px;color:#173f6d}.balance-card small{color:var(--muted)}.portal-layout{display:grid;grid-template-columns:minmax(300px,.65fr) minmax(620px,1.6fr);gap:16px}.attachment-link{color:#175cd3}.request-actions{display:flex;flex-wrap:wrap;gap:5px;min-width:175px}.request-flow{display:flex;align-items:center;gap:4px;margin-top:6px;font-size:10px;color:#98a2b3}.request-flow span{border-radius:999px;background:#eef2f6;padding:2px 5px}.request-flow span.done{background:#dcfae6;color:#067647}.request-flow span.stop{background:#fee4e2;color:#b42318}.mobile-request-actions{display:flex;justify-content:space-between;align-items:center;gap:10px;background:#fff;border:1px solid var(--line);border-radius:10px;padding:10px;margin-top:8px}.leave-bar-row{display:grid;grid-template-columns:minmax(120px,180px) 1fr 80px;align-items:center;gap:10px;margin:13px 0}.leave-bar-track{height:17px;background:#edf2f7;border-radius:6px;overflow:hidden}.leave-bar-track i{display:block;height:100%;background:linear-gradient(90deg,#176aa1,#38a6cf);border-radius:6px}.leave-bar-row b{text-align:right;font-size:12px}.entitlement-list{display:grid;gap:7px;max-height:430px;overflow:auto}.entitlement-row{display:grid;grid-template-columns:minmax(120px,1fr) 78px 78px 130px auto;gap:7px;align-items:end;border-bottom:1px solid #edf0f4;padding:7px 0}.entitlement-row label{font-size:11px}.entitlement-row input{padding:6px}.entitlement-row span{font-size:12px;color:var(--muted);align-self:center}
.leave-summary-employee{display:grid;gap:3px;background:#eff8ff;color:#173f6d;border-radius:10px;padding:11px 13px;margin:12px 0}.leave-summary-employee small{color:var(--muted)}.leave-summary-history{max-height:245px}.leave-review-dialog{width:min(1050px,95vw);max-height:92vh;overflow:auto}.leave-review-content{padding:20px}.leave-review-head{display:flex;justify-content:space-between;gap:16px;align-items:flex-start}.leave-review-head h2{margin:0}.leave-review-head p{margin:4px 0 14px;color:var(--muted)}.leave-review-history{max-height:290px}.leave-review-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:18px}
@media(max-width:900px){header{height:auto;padding:12px;gap:12px;align-items:flex-start}.header-actions{flex-wrap:wrap;justify-content:flex-end}nav{top:82px;padding-left:10px}main{padding:14px}.split{grid-template-columns:1fr}.brand small{display:none}}
@media(max-width:900px){.chart-grid{grid-template-columns:1fr}.dept-row{grid-template-columns:110px 1fr}.dept-row>.num{grid-column:2}.summary-strip{grid-template-columns:repeat(2,1fr)}}
@media(max-width:700px){.chart-title-row{display:grid}.chart-title-row label{min-width:0}.dept-row{grid-template-columns:105px 1fr}.dept-row>.num{grid-column:2}}
@media(max-width:900px){.portal-layout{grid-template-columns:1fr}.portal-head{align-items:flex-start}.entitlement-row{grid-template-columns:1fr 72px 72px}.entitlement-row span{grid-column:1/3}.leave-bar-row{grid-template-columns:105px 1fr}.leave-bar-row b{grid-column:2}.portal-layout .table-wrap{max-height:55vh}}
@media(max-width:1100px){.payroll-table .department-col,.payroll-table th:nth-child(8),.payroll-table td:nth-child(8),.payroll-table th:nth-child(10),.payroll-table td:nth-child(10){display:none}.payroll-detail-grid{grid-template-columns:repeat(2,minmax(130px,1fr))}.payroll-table .employee-col{width:155px}}
@media(max-width:700px){.payroll-table th:nth-child(3),.payroll-table td:nth-child(3),.payroll-table th:nth-child(6),.payroll-table td:nth-child(6),.payroll-table th:nth-child(7),.payroll-table td:nth-child(7),.payroll-table th:nth-child(9),.payroll-table td:nth-child(9),.payroll-table th:nth-child(11),.payroll-table td:nth-child(11),.payroll-table th:nth-child(12),.payroll-table td:nth-child(12){display:none}.payroll-table .employee-col{width:auto}.payroll-actions{width:82px}.payroll-detail-grid{grid-template-columns:1fr}}

.structure-tabs{display:flex;gap:8px;overflow:auto;margin:16px 0;padding-bottom:4px}.structure-tabs button{white-space:nowrap;border-radius:999px;padding:9px 15px}.structure-tabs button.active{background:#1f4e78;color:#fff;border-color:#1f4e78}.structure-kpis{margin-bottom:16px}.structure-dashboard-grid{align-items:start}.structure-bars{display:grid;gap:11px;margin-top:18px}.structure-bar-row{display:grid;grid-template-columns:minmax(150px,210px) 1fr 55px;gap:10px;align-items:center;font-size:13px}.structure-bar-row>div:first-child{overflow:hidden;text-overflow:ellipsis;white-space:nowrap}.structure-bar-track{height:18px;background:#edf2f7;border-radius:999px;position:relative;overflow:hidden}.structure-bar-track i,.structure-bar-track b{position:absolute;left:0;height:50%;border-radius:999px}.structure-bar-track i{top:0;background:#1f4e78}.structure-bar-track b{bottom:0;background:#70ad47}.career-summary{display:grid;gap:8px;margin-top:15px}.career-summary-row{display:grid;grid-template-columns:52px 1fr 58px;align-items:center;width:100%;border:0;border-left:8px solid var(--level-color);background:#f7f9fc;border-radius:8px;padding:9px 12px;text-align:left}.career-summary-row:hover{background:#eaf2fb;box-shadow:0 0 0 2px #bfdbfe}.career-summary-row>span{display:grid;gap:1px}.career-summary-row small{display:block;color:var(--muted);font-size:11px;font-weight:400}.career-summary-row strong{text-align:right;font-size:18px;color:#1f4e78}.career-summary-row strong small{text-align:right}.career-employee-dialog{width:min(1120px,96vw);max-height:92vh;overflow:auto}.career-employee-dialog .payroll-dialog-bar>div{display:grid;gap:3px}.career-employee-dialog .payroll-dialog-bar small{font-weight:400;color:#d9e8f7}.career-employee-content{padding:20px}.career-employee-content .table-wrap{max-height:65vh}.career-ladder{display:grid;gap:3px;margin-top:16px}.career-step{border:1px solid color-mix(in srgb,var(--level-color) 70%,#8a98a8);border-radius:12px;overflow:hidden;background:#fff}.career-step-head{display:grid;grid-template-columns:64px 1fr auto;gap:12px;align-items:center;background:var(--level-color);padding:12px 15px;color:#183b63}.career-step.C8 .career-step-head{color:#fff}.career-step-head b{font-size:21px}.position-chips{display:flex;flex-wrap:wrap;gap:7px;padding:12px}.position-chips span{background:#f2f5f9;border:1px solid #d8e0e8;border-radius:999px;padding:5px 9px;font-size:12px}.position-chips em{color:var(--muted);font-size:12px}.career-arrow{text-align:center;color:#3973ad;font-size:20px;line-height:18px}.structure-table input,.structure-table select{min-width:110px;padding:7px 8px;font-size:12px}.structure-table .compact-input{min-width:74px;width:86px}.structure-table td small{color:var(--muted)}.small{padding:7px 10px;font-size:12px}.band-toolbar{display:grid;grid-template-columns:minmax(260px,2fr) minmax(150px,1fr) 1fr;gap:13px;align-items:end;margin-bottom:14px}.band-toolbar label{display:grid;gap:5px}.band-table input.num{width:118px}.structure-READY,.structure-ACTIVE,.structure-IN_RANGE{background:#dcfae6;color:#067647}.structure-HR_REVIEW,.structure-DRAFT,.structure-UNASSIGNED,.structure-BAND_PENDING{background:#fef0c7;color:#93370d}.structure-BELOW,.structure-ABOVE,.structure-INACTIVE{background:#fee4e2;color:#b42318}
.structure-WAGE_TYPE_MISMATCH{background:#fee4e2;color:#b42318}
@media(max-width:900px){.structure-dashboard-grid{grid-template-columns:1fr}.structure-bar-row{grid-template-columns:115px 1fr 48px}.band-toolbar{grid-template-columns:1fr}.career-step-head{grid-template-columns:52px 1fr}.career-step-head strong{grid-column:2}.structure-table{min-width:900px}}