@font-face{font-family:PayrollThai;src:url('/assets/logo-studio-thai.ttf') format('truetype');font-display:swap}
body.payroll-page{--ink:#183629;--muted:#50685b;--line:#d8e4dc;--blue:#287a4e;--blue-soft:#eef7f0;--navy:#183629;--green:#287a4e;--green-soft:#eef7f0;--shadow:none;background:#f6f8f7;color:#183629;font:16px/1.65 PayrollThai,system-ui,sans-serif}
.payroll-page [hidden]{display:none!important}.payroll-page :is(button,input,select,textarea){font-family:inherit;min-height:44px;max-width:100%}.payroll-page :is(input,select,textarea){background:#fff;color:#183629;border:1px solid #c5d8cb;border-radius:10px;font-size:15px}.payroll-page :is(input[type=checkbox],input[type=radio]){min-height:0;accent-color:#287a4e}.payroll-page :is(button,a,input,select,textarea,summary):focus-visible{outline:3px solid #287a4e;outline-offset:3px}.payroll-page :is(h1,h2,h3){line-height:1.5;letter-spacing:0}.payroll-page .eyebrow{color:#185c39;letter-spacing:.05em}.payroll-page .primary{background:#287a4e;color:#fff;border-radius:10px;box-shadow:none;padding:10px 16px}.payroll-page .primary:hover{background:#185c39}.payroll-page :is(.secondary,.ghost){background:#fff;border:1px solid #d8e4dc;color:#185c39;border-radius:10px}.payroll-page :disabled{opacity:.6;cursor:not-allowed}
.payroll-page .login-shell{background:#f6f8f7;padding:32px 20px;min-height:100dvh}.payroll-page .login-card{width:min(480px,100%);padding:32px;border:1px solid #d8e4dc;border-radius:20px;box-shadow:0 8px 28px #18362908;background:#fff;color:#183629}.payroll-page .login-card h1{font-size:27px}.payroll-page .login-intro,.payroll-page .login-card>small{font-size:14px;line-height:1.7;color:#50685b}.payroll-page .login-card label{font-size:15px}.payroll-page .login-logo{width:52px;height:52px;object-fit:contain;box-shadow:none}
.payroll-page .app-header{background:#fff;color:#183629;border-bottom:1px solid #d8e4dc;box-shadow:none;backdrop-filter:none;padding:16px 24px;gap:20px}.payroll-page .brand span{color:#50685b;letter-spacing:.04em}.payroll-page .brand div{display:grid!important}.payroll-page .header-actions{gap:8px}.payroll-page .header-actions :is(.secondary,.ghost){background:#fff;color:#185c39;border-color:#d8e4dc}.payroll-page .month-control{font-size:13px;color:#50685b;letter-spacing:0}.payroll-page .month-control input{width:200px;min-height:44px;background:#fff;color:#183629;border-color:#c5d8cb}.payroll-page .workspace{width:min(1320px,calc(100% - 48px));padding:0;margin:28px auto 40px}.payroll-page .page-title{margin-bottom:24px;gap:20px}.payroll-page .page-title h1{font-size:clamp(25px,3vw,32px)}.payroll-page .status-pill{background:#e0f2e5;color:#185c39;font-size:14px}.payroll-page .status-pill.closed{background:#eef1ef;color:#435c4c}.payroll-page .status{font-size:13px;line-height:1.5;white-space:normal}.payroll-page .panel{border:1px solid #d8e4dc;border-radius:16px;background:#fff;box-shadow:none;margin-bottom:24px}.payroll-page .panel-head{padding:20px 24px;gap:20px;flex-wrap:wrap}.payroll-page .panel-head h2{font-size:22px}.payroll-page .panel-head h3{font-size:20px}.payroll-page .panel-head p{font-size:14px;line-height:1.65}.payroll-page .panel-head>div{min-width:0}.payroll-page .panel-actions{gap:10px;flex-wrap:wrap}.payroll-page .panel-actions button{min-height:44px}.payroll-page .payroll-head-right{min-width:0}.payroll-page .payroll-total-strip{background:#f6f9f7;border-color:#d8e4dc}.payroll-page .payroll-total-strip>div{padding:12px 16px}.payroll-page .payroll-total-strip small{font-size:13px}.payroll-page .payroll-total-strip b{font-size:21px;overflow-wrap:anywhere}.payroll-page .payroll-total-strip .net-total{background:#eaf5ed;color:#185c39}
.payroll-page .table-wrap{max-width:100%;overflow:auto;overscroll-behavior:contain}.payroll-page .payroll-table{min-width:1100px}.payroll-page :is(.payroll-table,.attendance-table) th{background:#f4f8f5;color:#50685b;font-size:13px;padding:12px 14px;line-height:1.6}.payroll-page :is(.payroll-table,.attendance-table) td{font-size:14px;padding:16px 14px;border-color:#d8e4dc}.payroll-page .employee-name{min-width:180px;max-width:260px;white-space:normal}.payroll-page .employee-name b{font-size:16px;overflow-wrap:anywhere}.payroll-page :is(.employee-name,.payment-cell) small{font-size:13px;line-height:1.6;overflow-wrap:anywhere}.payroll-page .net{font-size:20px;color:#185c39;background:#eef7f0}.payroll-page .sub,.payroll-page .detail-lines{font-size:13px}.payroll-page .more-button{min-width:44px;min-height:44px;border-radius:10px}.payroll-page .row-actions{gap:8px;flex-wrap:wrap}.payroll-page .row-actions button{min-height:44px;padding:8px 12px}.payroll-page .attendance-toolbar{padding:20px 24px;gap:20px}.payroll-page .attendance-toolbar h2{font-size:20px}.payroll-page .attendance-toolbar p{font-size:14px;line-height:1.65}.payroll-page .attendance-summary{padding:16px 24px;gap:12px}.payroll-page .attendance-summary small{font-size:13px;line-height:1.7}.payroll-page .attendance-details>summary{min-height:44px;padding:16px 24px;color:#185c39;font-size:15px}.payroll-page .bottom-grid{gap:24px;grid-template-columns:repeat(2,minmax(0,1fr))}.payroll-page .check-list{padding:16px 24px}.payroll-page .check-row{gap:16px;padding:14px 0}.payroll-page .check-row small{font-size:13px;line-height:1.65}.payroll-page .close-box{padding:20px 24px}.payroll-page .close-kpis{gap:12px}.payroll-page .close-kpis>div{padding:12px;background:#f6f9f7;border-color:#d8e4dc}.payroll-page .close-kpis span{font-size:13px}.payroll-page .close-kpis b{font-size:17px}.payroll-page .alert{font-size:14px;line-height:1.7}.payroll-page .audit-actions button,.payroll-page .alert-actions button,.payroll-page .inline-fix{min-height:44px;font-size:14px}.payroll-page .slip-item{padding:18px 24px;gap:16px}.payroll-page .slip-item>div{min-width:0}.payroll-page .slip-item b{overflow-wrap:anywhere}.payroll-page .slip-item small{font-size:13px;line-height:1.6}.payroll-page .empty{font-size:15px;padding:28px 20px}
.payroll-page .modal-backdrop{padding:16px;background:#14281d80;backdrop-filter:blur(2px)}.payroll-page .modal{max-height:calc(100dvh - 32px);max-width:calc(100vw - 32px);padding:28px;border:1px solid #d8e4dc;border-radius:18px;background:#fff;color:#183629;box-shadow:0 16px 60px #0003}.payroll-page .modal-head{gap:16px;margin-bottom:24px}.payroll-page .modal-head h2{font-size:24px;overflow-wrap:anywhere}.payroll-page .modal-head p{font-size:14px;line-height:1.7;overflow-wrap:anywhere}.payroll-page .modal-head>button{width:44px;height:44px;flex:0 0 44px}.payroll-page .modal-form,.payroll-page .modal form{gap:18px}.payroll-page .form-grid{gap:16px;grid-template-columns:repeat(2,minmax(0,1fr))}.payroll-page .modal label{font-size:15px;min-width:0}.payroll-page .modal label small{font-size:13px;line-height:1.65}.payroll-page .confirm-row{padding:12px;background:#f5f8f6;border:1px solid #d8e4dc;border-radius:10px}.payroll-page .modal-actions{gap:12px}.payroll-page .detail-section{padding:20px 0;border-color:#d8e4dc}.payroll-page .detail-section h3{font-size:18px}.payroll-page .detail-section p{font-size:14px;line-height:1.65}.payroll-page :is(.source-detail-grid,.detail-summary-grid){gap:12px}.payroll-page :is(.source-detail-grid,.detail-summary-grid)>div{padding:14px;background:#f6f9f7;border-color:#d8e4dc}.payroll-page :is(.source-detail-grid,.detail-summary-grid) small{font-size:13px}.payroll-page .log-row{gap:12px;padding:14px}.payroll-page .log-row small{font-size:13px;line-height:1.65}.payroll-page .toast{font-size:15px;max-width:calc(100vw - 32px)}
body.payroll-page #logo-studio-universal-hub-back{position:static;z-index:auto;transform:none;box-shadow:none;border:1px solid #c5d8cb;border-radius:10px;min-height:44px;padding:10px 12px;background:#fff;font:600 14px/1.5 PayrollThai,system-ui}body.payroll-page #logo-studio-universal-hub-back,body.payroll-page #logo-studio-universal-hub-back *{color:#185c39!important}.payroll-page .login-card #logo-studio-universal-hub-back{display:flex;justify-content:center;margin-top:20px}
@media(max-width:1000px){.payroll-page .app-header{flex-wrap:wrap;position:static}.payroll-page .header-actions{justify-content:flex-start}.payroll-page .bottom-grid{grid-template-columns:minmax(0,1fr)}.payroll-page .attendance-toolbar{flex-wrap:wrap}}
@media(max-width:760px){body.payroll-page .app-header{display:flex!important;flex-direction:column!important;align-items:stretch!important;gap:14px;padding:16px}.payroll-page .header-actions{display:grid!important;grid-template-columns:repeat(2,minmax(0,1fr));width:100%;flex:none}.payroll-page .month-control{grid-column:1/-1}.payroll-page .month-control input{width:100%}.payroll-page .header-actions button{min-width:0;width:100%;white-space:normal}.payroll-page .header-actions #logo-studio-universal-hub-back{justify-content:center}.payroll-page .workspace{width:calc(100% - 32px);margin-top:24px}.payroll-page .page-title{flex-wrap:wrap}.payroll-page .panel-head,.payroll-page .attendance-toolbar{padding:20px 16px}.payroll-page .payroll-total-strip{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));width:100%}.payroll-page .payroll-total-strip>div{min-width:0;padding:12px;text-align:left}.payroll-page .payroll-total-strip .net-total{grid-column:1/-1;border-left:0;border-top:1px solid #d8e4dc}.payroll-page .payroll-total-strip b{font-size:21px}.payroll-page .payroll-table{display:block;min-width:0}.payroll-page .payroll-table thead{display:none}.payroll-page .payroll-table tbody{display:block}.payroll-page .payroll-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:20px 16px;border-top:1px solid #d8e4dc}.payroll-page .payroll-table td{display:block!important;min-width:0;max-width:none;border:0;padding:0;text-align:left}.payroll-page .payroll-table td::before{content:attr(data-label);display:block;margin-bottom:5px;font-size:13px;color:#50685b;font-weight:500}.payroll-page .payroll-table td:first-child,.payroll-page .payroll-table td:last-child,.payroll-page .payroll-table td[colspan]{grid-column:1/-1}.payroll-page .payroll-table td:first-child::before,.payroll-page .payroll-table td:last-child::before,.payroll-page .payroll-table td[colspan]::before{display:none}.payroll-page .more-button{width:100%;font-size:16px}.payroll-page .attendance-summary,.payroll-page .check-list,.payroll-page .close-box{padding:16px}.payroll-page .slip-item{padding:20px 16px;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px}.payroll-page .slip-item>div:first-child,.payroll-page .slip-item .row-actions{grid-column:1/-1}.payroll-page .modal{padding:20px 16px}.payroll-page .form-grid,.payroll-page .source-detail-grid{grid-template-columns:minmax(0,1fr)}.payroll-page .detail-section-head,.payroll-page .payment-summary{flex-wrap:wrap;gap:12px}.payroll-page .modal-actions>button{flex:1 1 100px}}
body.payroll-page .primary{background:#287a4e!important;background-image:none!important;color:#fff!important;box-shadow:none!important}body.payroll-page .primary:hover{background:#185c39!important}.payroll-page .eyebrow{color:#185c39!important}.payroll-page .employee-pay-kpis>div{background:#f6f9f7;border-color:#d8e4dc}.payroll-page .employee-pay-kpis .net-total{background:#eef7f0;color:#185c39}.payroll-page .employee-pay-kpis :is(small,span){font-size:13px}.payroll-page .employee-pay-kpis b{overflow-wrap:anywhere}
body.payroll-page .modal-head{display:flex!important;flex-direction:row!important;align-items:flex-start!important}.payroll-page .modal-head>div{min-width:0;flex:1}.payroll-page .modal-head>button{flex:0 0 44px}
@media(max-width:760px){body.payroll-page .payroll-table td{position:static!important;box-shadow:none!important;background:transparent!important}.payroll-page .more-button{font-size:0}.payroll-page .more-button::after{content:'ดูรายละเอียด';font-size:15px}}
@media(prefers-reduced-motion:reduce){.payroll-page *{scroll-behavior:auto!important;transition:none!important}}
/* Screen preview only: exported PDF stage and print document retain their own layout. */
/* Keep the exported draft/issued badge above the document header, without overlap. */
.payroll-page .pdf-stage .payslip-watermark{position:static;display:table;margin:0 0 12px;transform:none}
.payroll-page .pdf-stage .payslip-document footer{grid-template-columns:repeat(3,minmax(0,1fr))}
.payroll-page .pdf-stage .payslip-document h1{font-size:21px}
.payroll-page .pdf-stage .company-block p{font-size:11px}
@media print{
 .payroll-page .slip-modal .payslip-watermark{position:static;display:table;margin:0 0 12px;transform:none}
}
@media screen and (max-width:760px){
 .payroll-page .attendance-table{display:block;min-width:0!important;width:100%}
 .payroll-page .attendance-table thead{position:absolute;width:1px;height:1px;overflow:hidden;clip-path:inset(50%)}
 .payroll-page .attendance-table tbody{display:block}
 .payroll-page .attendance-table tr{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:14px;padding:20px 16px;border-top:1px solid #d8e4dc}
 .payroll-page .attendance-table td{display:block;min-width:0;width:auto!important;white-space:normal!important;overflow-wrap:anywhere;padding:0;border:0}
 .payroll-page .attendance-table td::before{content:attr(data-label);display:block;margin-bottom:6px;font-size:13px;color:#50685b}
 .payroll-page .attendance-table td:nth-child(2),.payroll-page .attendance-table td:nth-last-child(-n+2),.payroll-page .attendance-table td[colspan]{grid-column:1/-1}
 .payroll-page .attendance-table td:last-child::before{display:none}
 .payroll-page .attendance-table td button{margin:0 8px 8px 0;min-height:44px}
}
@media screen{
 .payroll-page .slip-modal .payslip-document{font-family:PayrollThai,sans-serif;color:#203c2b;border-color:#d8e4dc}
 .payroll-page .slip-modal .payslip-document header{border-color:#287a4e}
 .payroll-page .slip-modal :is(.payslip-document h1,.slip-version){color:#185c39}
 .payroll-page .slip-modal .slip-columns h2{background:#eef7f0;color:#203c2b;border-bottom:1px solid #d8e4dc}
 .payroll-page .slip-modal :is(.slip-info>div,.slip-row.total,.legal-cert){background:#f6f9f7;border-color:#d8e4dc}
 .payroll-page .slip-modal .slip-net{background:#eef7f0;color:#185c39;border:1px solid #c5d8cb;gap:12px;flex-wrap:wrap}
 .payroll-page .slip-modal .payslip-watermark{position:static;display:table;margin:0 0 16px;transform:none}
 .payroll-page .slip-modal .slip-row{font-size:14px;line-height:1.7;padding:10px 12px}
 .payroll-page .slip-modal .slip-row>span:last-child{white-space:nowrap}
 .payroll-page .slip-modal .legal-cert{font-size:12px;line-height:1.8}
}
@media screen and (max-width:700px){
 .payroll-page .slip-modal .payslip-document{padding:16px 12px}
 .payroll-page .slip-modal .payslip-document header{grid-template-columns:minmax(0,1fr);padding-top:0;gap:12px}
 .payroll-page .slip-modal .company-block{min-width:0}
 .payroll-page .slip-modal .payslip-document h1{font-size:18px;line-height:1.65}
 .payroll-page .slip-modal .company-block p{font-size:12px;line-height:1.75}
 .payroll-page .slip-modal .slip-version{font-size:14px;line-height:1.7;overflow-wrap:anywhere}
 .payroll-page .slip-modal :is(.slip-info small,.slip-info span,.signature-grid span,.signature-grid small){font-size:12px;line-height:1.7}
 .payroll-page .slip-modal .slip-info b{font-size:14px;line-height:1.8}
 .payroll-page .slip-modal .slip-net{padding:14px 12px}
 .payroll-page .slip-modal .slip-net strong{font-size:22px}
}