body{margin:0}:root{--bg:#edf1f5;--panel:#fff;--ink:#182230;--muted:#5b6b7c;--line:#d7dee7;--brand:#0f4c5c;--brand-2:#1b6b7a;--accent:#c45c26;--danger:#b42318;--shadow:0 10px 30px #18223014;color:var(--ink);background:radial-gradient(circle at top left, #1b6b7a1f, transparent 40%), linear-gradient(180deg, #f7f9fb 0%, var(--bg) 100%);font-family:Segoe UI,Noto Sans Thai,Tahoma,sans-serif;line-height:1.5}*,:before,:after{box-sizing:border-box}body{min-width:320px;min-height:100dvh;margin:0}#root{min-height:100svh}a{color:var(--brand);text-decoration:none}a:hover{text-decoration:underline}button,input,select,textarea{font:inherit}.center-screen,.login-page{min-height:100dvh;padding:1.5rem;padding:max(1.5rem, env(safe-area-inset-top)) max(1.5rem, env(safe-area-inset-right)) max(1.5rem, env(safe-area-inset-bottom)) max(1.5rem, env(safe-area-inset-left));place-items:center;display:grid}.login-card,.card{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:16px}.login-card{gap:.9rem;width:min(420px,100%);padding:1.75rem;display:grid}.login-card h1,.page h1{margin:0;font-size:1.5rem}.muted,.hint,small{color:var(--muted)}.hint code{font-size:.85rem}label{gap:.35rem;font-size:.95rem;display:grid}input,select,textarea{border:1px solid var(--line);background:#fff;border-radius:10px;width:100%;min-height:2.75rem;padding:.7rem .8rem}textarea{min-height:4.5rem}input[type=checkbox],input[type=radio]{width:auto;min-width:1.25rem;min-height:1.25rem;padding:0}input[type=file]{padding:.45rem}.btn{cursor:pointer;border:1px solid #0000;border-radius:999px;justify-content:center;align-items:center;gap:.35rem;min-height:2.75rem;padding:.65rem 1rem;display:inline-flex}.btn.primary{background:linear-gradient(135deg, var(--brand), var(--brand-2));color:#fff}.btn.ghost{border-color:var(--line);color:var(--ink);background:#fff}.error{color:var(--danger);margin:0}.success{color:#17663a;margin:0}.check-row{align-items:center;gap:.5rem;display:flex}.check-row input[type=checkbox]{width:auto}fieldset.full{border:1px solid var(--line);border-radius:12px;gap:.4rem;padding:.85rem 1rem;display:grid}.shell{grid-template-columns:260px 1fr;min-height:100svh;display:grid}.sidebar{color:#fff;background:linear-gradient(#0f4c5c 0%,#123a45 100%);flex-direction:column;gap:1.5rem;padding:1.25rem;display:flex}.brand{gap:.25rem;display:grid}.brand span{color:#ffffffbf;font-size:.9rem}.nav{gap:.35rem;display:grid}.nav a{color:#ffffffe0;border-radius:10px;padding:.7rem .85rem;text-decoration:none}.nav a.active,.nav a:hover{background:#ffffff1f;text-decoration:none}.shell-main{grid-template-rows:auto 1fr;min-width:0;display:grid}.topbar{border-bottom:1px solid var(--line);-webkit-backdrop-filter:blur(8px);backdrop-filter:blur(8px);background:#ffffffd9;justify-content:space-between;align-items:center;gap:1rem;padding:1rem 1.25rem;display:flex}.topbar-meta{flex-wrap:wrap;align-items:center;gap:1rem;margin-left:auto;display:flex}.company-select{align-items:center;gap:.5rem;display:flex}.company-select select{min-width:220px}.user-chip{align-items:center;gap:.75rem;display:flex}.user-chip div{display:grid}.user-chip strong{font-size:.95rem}.user-chip small{font-size:.8rem}.menu-toggle,.sidebar-backdrop,.bottom-nav{display:none}.menu-toggle{min-width:2.75rem;min-height:2.75rem;padding:.5rem .85rem}.content{padding:1.25rem}.context-banner{color:var(--brand);background:#0f4c5c14;border-radius:12px;margin:0 0 1rem;padding:.75rem 1rem}.page{gap:1rem;display:grid}.page-header{flex-wrap:wrap;justify-content:space-between;align-items:start;gap:1rem;display:flex}.card-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;display:grid}.dashboard-section-title{margin:1.5rem 0 .75rem;font-size:1.1rem}.dashboard-widget .leave-request-list{margin:0;padding-left:1.1rem}.card{align-content:start;gap:.75rem;padding:1.1rem;display:grid}.stat{margin:0;font-size:2rem;font-weight:700}.stat-sm{margin:0;font-size:1.1rem;font-weight:600}.toolbar{flex-wrap:wrap;align-items:end;gap:.75rem;display:flex}.toolbar input{max-width:360px}.table-wrap{background:var(--panel);border:1px solid var(--line);box-shadow:var(--shadow);border-radius:16px;overflow:auto}table{border-collapse:collapse;width:100%;min-width:720px}th,td{border-bottom:1px solid var(--line);text-align:left;vertical-align:top;padding:.85rem 1rem}th{color:var(--muted);background:#f8fafc;font-size:.85rem}.detail-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;padding:1.25rem;display:grid}.detail-grid .label{color:var(--muted);margin-bottom:.25rem;font-size:.85rem;display:block}.tenure-card,.compensation-card{margin-top:1rem;padding:1.25rem}.tenure-card h2,.compensation-card h2,.compensation-card h3{margin:0 0 .75rem}.tenure-grid{grid-template-columns:repeat(3,minmax(0,1fr));gap:1rem;display:grid}.tenure-grid .label{color:var(--muted);margin-bottom:.25rem;font-size:.85rem;display:block}.section-header{justify-content:space-between;align-items:flex-start;gap:1rem;margin-bottom:1rem;display:flex}.current-comp{border:1px solid var(--line);background:#f8fafc;border-radius:12px;margin-bottom:1.25rem;padding:1rem}.monthly-total{background:linear-gradient(135deg,#0f4c5c1a 0%,#1b6b7a0f 100%);border:1px solid #0f4c5c38;border-radius:10px;flex-wrap:wrap;justify-content:space-between;align-items:baseline;gap:.5rem 1rem;margin:.75rem 0 1rem;padding:.85rem 1rem;display:flex}.monthly-total .label{color:var(--brand);font-size:.95rem;font-weight:600}.monthly-total strong{color:var(--brand);letter-spacing:.01em;font-size:clamp(1.35rem,2.5vw,1.75rem)}.comp-amounts{grid-template-columns:repeat(2,minmax(0,1fr));gap:.5rem 1rem;margin:0 0 .75rem;padding:0;list-style:none;display:grid}.comp-amounts li{border-bottom:1px dashed var(--line);justify-content:space-between;gap:.75rem;padding-bottom:.35rem;display:flex}.comp-amounts span{color:var(--muted);font-size:.9rem}.comp-history{gap:.85rem;display:grid}.comp-item{border:1px solid var(--line);border-radius:12px;padding:1rem}.comp-item header{flex-wrap:wrap;justify-content:space-between;gap:.5rem;margin-bottom:.75rem;display:flex}.optional-comp{border:1px solid var(--line);border-radius:12px;margin:0;padding:1rem}.optional-comp legend{padding:0 .35rem;font-weight:600}.optional-comp-grid{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;display:grid}.form{grid-template-columns:repeat(2,minmax(0,1fr));gap:1rem;padding:1.25rem;display:grid}.form .full,.form-actions{grid-column:1/-1}.actions,.form-actions{flex-wrap:wrap;gap:.75rem;display:flex}.attendance-page{max-width:640px}.attendance-identity,.attendance-clock{grid-template-columns:repeat(2,minmax(0,1fr));gap:.85rem;margin-top:.75rem;padding:1rem;display:grid}.attendance-clock-date,.attendance-clock-time{font-size:1.35rem}.attendance-status{color:var(--brand);font-size:1.15rem}.attendance-form{gap:.85rem;margin-top:.75rem;padding:1rem;display:grid}.attendance-actions{grid-template-columns:repeat(2,minmax(0,1fr));gap:.75rem;margin-top:.85rem;display:grid}.attendance-punch-btn{border-radius:14px;min-height:3.6rem;padding:1rem;font-size:1.1rem;font-weight:700}.attendance-punch-btn:disabled{opacity:.45;cursor:not-allowed}.attendance-check_in{color:#fff;background:linear-gradient(135deg,#0f4c5c,#1b6b7a)}.attendance-check_out{border:2px solid var(--brand);color:var(--brand);background:#fff}.attendance-ot_in{border:2px solid var(--accent);color:var(--accent);background:#fff}.attendance-ot_out{background:var(--accent);color:#fff}.attendance-today{margin-top:1rem;padding:1rem}.attendance-today h2{margin:0 0 .65rem;font-size:1.1rem}.attendance-event-list{gap:.55rem;margin:0;padding:0;list-style:none;display:grid}.attendance-event-list li{border:1px solid var(--line);border-radius:10px;grid-template-columns:1fr auto;gap:.25rem .75rem;padding:.65rem .75rem;display:grid}.attendance-event-list em{color:var(--muted);grid-column:1/-1;font-size:.9rem;font-style:normal}.attendance-success{color:#0f6b4c;margin:.5rem 0 0;font-weight:600}.leave-page{max-width:720px}.leave-quota-card,.leave-history-card{margin-top:.85rem;padding:1rem}.leave-quota-card h2,.leave-history-card h2{margin:0 0 .75rem;font-size:1.1rem}.leave-request-list,.leave-approval-list{gap:.75rem;margin:0;padding:0;list-style:none;display:grid}.leave-request-list li,.leave-approval-item{border:1px solid var(--line);border-radius:12px;gap:.5rem;padding:.85rem;display:grid}.leave-request-list li{grid-template-columns:1fr auto;align-items:start}.leave-request-meta{justify-items:end;gap:.4rem;display:grid}.leave-status{border:1px solid var(--line);border-radius:999px;padding:.2rem .55rem;font-size:.85rem;display:inline-block}.leave-status-pending{color:#8a5a00;background:#fff7e8}.leave-status-approved{color:#0f6b4c;background:#e8f7f0}.leave-status-rejected,.leave-status-cancelled{color:var(--danger);background:#fdecec}.leave-days-preview{border:1px solid var(--line);background:#f8fafc;border-radius:10px;justify-content:space-between;align-items:center;padding:.75rem .9rem;display:flex}.leave-days-preview strong{color:var(--brand);font-size:1.2rem}.leave-approval-item header{flex-wrap:wrap;justify-content:space-between;gap:.75rem;display:flex}@media (width<=960px){.shell{grid-template-columns:1fr}.sidebar{z-index:30;width:min(280px,86vw);padding-top:max(1.25rem, env(safe-area-inset-top));padding-bottom:max(1.25rem, env(safe-area-inset-bottom));transition:transform .2s;position:fixed;inset:0 auto 0 0;transform:translate(-105%)}.sidebar.open{transform:translate(0)}.menu-toggle,.sidebar-backdrop{display:inline-flex}.sidebar-backdrop{z-index:20;background:#00000059;border:0;position:fixed;inset:0}.bottom-nav{z-index:25;border-top:1px solid var(--line);padding:.2rem .15rem calc(.2rem + env(safe-area-inset-bottom));background:#fff;grid-template-columns:repeat(auto-fit,minmax(0,1fr));display:grid;position:fixed;bottom:0;left:0;right:0;box-shadow:0 -6px 18px #1822300f}.bottom-nav a,.bottom-nav button{appearance:none;color:var(--muted);font:inherit;text-align:center;cursor:pointer;background:0 0;border:0;border-radius:10px;justify-content:center;align-items:center;min-height:3rem;padding:.35rem .2rem;font-size:.78rem;font-weight:600;text-decoration:none;display:flex}.bottom-nav a:hover,.bottom-nav button:hover{text-decoration:none}.bottom-nav a.active,.bottom-nav button.active{color:var(--brand);background:#0f4c5c1a}.content{padding-bottom:calc(4.75rem + env(safe-area-inset-bottom))}.topbar{padding-top:max(.75rem, env(safe-area-inset-top));flex-wrap:wrap;gap:.65rem}.topbar-meta{width:100%;margin-left:0}.card-grid,.detail-grid,.form,.tenure-grid,.comp-amounts,.optional-comp-grid{grid-template-columns:1fr}.company-select{width:100%}.company-select select{flex:1;min-width:0}.user-chip{justify-content:space-between;width:100%}.attendance-actions,.attendance-identity,.attendance-clock{grid-template-columns:1fr}table{min-width:560px}table.table-compact{min-width:0}.form-actions{bottom:calc(3.6rem + env(safe-area-inset-bottom));background:var(--panel);z-index:5;padding:.65rem 0 .15rem;position:sticky}.form-actions .btn,.page-header .btn,.toolbar .btn{flex:auto}.login-card .btn{width:100%}}.attach-preview{gap:.4rem;display:grid}.attach-preview img{border:1px solid var(--line);border-radius:10px;width:min(220px,100%);height:auto}.attach-toolbar{flex-direction:column;align-items:stretch}.payroll-page,.payroll-period-page,.payroll-item-page{max-width:1200px}.payroll-summary-cards{grid-template-columns:repeat(4,minmax(0,1fr));gap:.85rem;margin:.85rem 0;display:grid}.payroll-summary-cards>div{gap:.25rem;display:grid}.payroll-summary-cards strong{font-size:1.15rem}.payslip-grid{grid-template-columns:1fr 1fr;gap:1rem;display:grid}.payslip-net{margin-top:1rem;font-size:1.15rem}.payroll-status-draft{color:#555;background:#f3f3f3}.payroll-status-calculated{color:#0b5f8a;background:#e8f4fb}.payroll-status-reviewed{color:#6b4c00;background:#fff4d9}.payroll-status-locked,.payroll-status-paid{color:#0f6b4c;background:#e8f7f0}button.linkish{color:var(--accent,#0b5f8a);cursor:pointer;font:inherit;background:0 0;border:none;padding:0;text-decoration:underline}@media (width<=900px){.payroll-summary-cards,.payslip-grid{grid-template-columns:1fr}}.print-only{display:none!important}@media print{.no-print{display:none!important}.print-only{display:block!important}.print-only-inline{display:inline!important}.print-section{margin:0 0 .75rem}.print-break-avoid{break-inside:avoid;page-break-inside:avoid}.print-break-before{break-before:page;page-break-before:always}@page{size:A4;margin:11mm}@page print-landscape{size:A4 landscape;margin:11mm}@page print-portrait{size:A4 portrait;margin:11mm}@page print-detail-landscape{size:A4 landscape;margin:9mm}.print-page-landscape{page:print-landscape}.print-page-portrait{page:print-portrait}.print-page-detail-landscape{page:print-detail-landscape}html,body{-webkit-print-color-adjust:exact;print-color-adjust:exact;font-family:Noto Sans Thai,Segoe UI,Tahoma,sans-serif;font-size:11pt;line-height:1.35;color:#111!important;background:#fff!important}#root{min-height:0}a{color:inherit!important;text-decoration:none!important}.shell{min-height:0;display:block;background:#fff!important}.bottom-nav{display:none!important}.form-actions{padding:0!important;position:static!important}table{min-width:0!important}.shell-main,.content{background:#fff!important;width:100%!important;max-width:none!important;margin:0!important;padding:0!important}.page{gap:.4rem}.page-header{margin-bottom:.5rem}.page h1,.print-doc-title{margin:0 0 .15rem;font-size:15pt;color:#111!important}.print-doc-meta{margin:0;font-size:9.5pt;color:#222!important}.employee-detail-print-doc{width:100%}.print-detail-header{border-bottom:1.5px solid #222;margin:0 0 .45rem;padding-bottom:.3rem}.print-brand{margin:0;font-size:9pt;font-weight:600;color:#333!important}.print-detail-header .print-doc-title{margin:.1rem 0;font-size:14pt}.print-section-title{margin:0 0 .25rem;font-size:11pt;color:#111!important}.print-detail-section{margin:0 0 .55rem}.print-kv-table,.print-data-table{border-collapse:collapse;table-layout:fixed;width:100%}.print-kv-table{font-size:9.5pt}.print-kv-table th{text-align:left;white-space:nowrap;width:14%;font-weight:700;background:#ececec!important}.print-kv-table td{text-align:left;word-wrap:break-word;width:36%}.print-data-table{font-size:9pt}.print-data-table th{text-align:center;font-weight:700;background:#ececec!important}.print-data-table td.num,.print-data-table th.num{text-align:right;font-variant-numeric:tabular-nums}.print-data-table td.num{text-align:right}.print-total-cell{background:#f5f5f5!important;font-weight:700!important}.print-current-comp-table .print-total-cell{font-size:10pt;border:1.5px solid #222!important}.print-history-table th:first-child,.print-history-table td:first-child{width:16%}.print-history-table th:nth-child(2),.print-history-table td:nth-child(2){width:11%}.print-history-table th:nth-child(8),.print-history-table td:nth-child(8){text-align:left;width:16%}.card,.login-card,.current-comp,.comp-item,.monthly-total{box-shadow:none!important;background:#fff!important;border:1px solid #bbb!important;border-radius:0!important}.tenure-card,.compensation-card,.detail-grid.card{margin-top:.65rem;padding:.65rem!important}.monthly-total{background:#fff!important;border:1px solid #333!important;padding:.5rem .65rem!important}.monthly-total .label,.monthly-total strong{color:#111!important}.monthly-total strong{font-size:14pt!important}.muted,.hint,small,.label{color:#333!important}.table-wrap{box-shadow:none;border:none;overflow:visible}table{border-collapse:collapse;width:100%;font-size:9.5pt}thead{display:table-header-group}tfoot{display:table-footer-group}tr{break-inside:avoid;page-break-inside:avoid}th,td{vertical-align:top;color:#111!important;background:#fff!important;border:1px solid #999!important;padding:.22rem .35rem!important}th{font-weight:700;background:#f0f0f0!important}.comp-item{margin:0 0 .55rem;padding:.5rem!important}.comp-history{gap:.55rem}.section-header{margin-bottom:.45rem}.compensation-card h2,.compensation-card h3,.tenure-card h2{margin-bottom:.4rem;font-size:12pt;color:#111!important}.detail-grid,.tenure-grid,.comp-amounts{gap:.4rem .75rem}.comp-amounts li{border-bottom:1px solid #ccc}}