:root{--blue:#1d428a;--sky:#4ec3e0;--ink:#172b4d;--line:#cbd8e1}*{box-sizing:border-box}body{margin:0;background:#f3f7fa;color:var(--ink);font:16px/1.6 Tahoma,sans-serif}.banner{text-align:center;background:#fff2c8;color:#533d00;padding:6px;font-size:13px}header{display:flex;align-items:center;gap:16px;background:var(--blue);color:white;padding:16px 5%}header strong{font-size:22px}header small{display:block;font-size:12px}header button{margin-left:auto}.shell{max-width:1200px;margin:32px auto;display:grid;grid-template-columns:210px 1fr;gap:24px;padding:0 20px}.panel,.auth,nav{background:white;border:1px solid var(--line);border-radius:8px;padding:24px}.auth{max-width:460px;margin:8vh auto;padding:32px}.auth h1,h1{font-size:25px;margin:4px 0 10px}.field{display:grid;gap:6px;margin:14px 0}input,select,textarea,button{font:inherit}input,select,textarea{width:100%;border:1px solid #859bac;border-radius:6px;padding:10px;min-height:44px}textarea{min-height:80px}button{background:white;border:1px solid var(--blue);color:var(--blue);border-radius:6px;padding:9px 16px;min-height:44px;cursor:pointer}button.primary{background:var(--blue);color:white}button:disabled{opacity:.5;cursor:not-allowed}button:focus-visible,input:focus-visible,select:focus-visible{outline:3px solid var(--sky);outline-offset:2px}nav{align-self:start;padding:12px}nav button{border:0;width:100%;text-align:left}nav button.active{background:#e7f1fa;font-weight:bold}.rows{display:grid;gap:16px}.grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.notice{background:#eef6fb;padding:12px;border-left:4px solid var(--sky);margin:14px 0}.error{color:#9b1818}.small{color:#50677c;font-size:14px}.table{overflow:auto}table{width:100%;border-collapse:collapse;min-width:700px}th,td{text-align:left;border-bottom:1px solid #dbe5ed;padding:10px;font-size:14px}.actions{display:flex;gap:10px;flex-wrap:wrap;align-items:center}.sigpad{display:block;width:100%;height:180px;touch-action:none;border:1px solid #849cab;border-radius:6px;background:white}.signature{max-width:240px;max-height:120px} @media(max-width:700px){.shell{display:block;margin:16px auto}.shell nav{display:flex;overflow:auto;margin-bottom:16px}.shell nav button{white-space:nowrap;width:auto}.grid{grid-template-columns:1fr}.auth{margin:20px}header{padding:12px 16px}}
.doc-modal{width:min(960px,calc(100vw - 24px));max-height:calc(100dvh - 24px);border:0;border-radius:8px;padding:20px}.doc-modal::backdrop{background:#122a40b8}.doc-modal>.actions{position:sticky;top:0;background:white;padding:8px;z-index:3}.doc-modal .fo-document-scroll{overflow:auto}
/* Design.md: AOTGA palette, hierarchy and responsive work surfaces. */
:root{--blue:#1D428A;--sky:#4EC3E0;--bosch:#236192;--ink:#172B4D;--muted:#465C70;--line:#CBD8E1;--surface:#fff;--bg:#F3F7FA}body{font-family:Sarabun,'Noto Sans Thai',Tahoma,sans-serif;background:var(--bg);line-height:1.6}.banner{font-size:13px;padding:7px 16px}.brand-logo{background:#fff;border-radius:4px;padding:7px 10px;display:flex;align-items:center;flex-shrink:0}.brand-logo img{display:block;width:190px;height:auto;object-fit:contain}header{padding:14px max(32px,calc((100% - 1200px)/2));border-bottom:4px solid var(--sky);box-shadow:0 2px 9px #152e4c1c}.brand-name{font-size:14px;font-weight:700;line-height:1.35}.brand-name small{font-weight:400;opacity:.95}header button{color:white;background:transparent;border-color:white}.shell{max-width:1200px;margin:32px auto;grid-template-columns:220px minmax(0,1fr);gap:24px;padding:0 24px}.shell main{min-width:0}.panel,nav,.auth{box-shadow:0 3px 12px #183a5710}.panel{padding:24px}.panel h2{font-size:20px}.auth{max-width:480px;margin:7vh auto;padding:36px;border-top:5px solid var(--sky)}h1{font-size:30px;line-height:1.3;margin:4px 0 20px}.auth h1{font-size:28px}.field{gap:8px;margin:16px 0}.field label{font-weight:600}button{transition:background-color .15s,color .15s;border-radius:6px}button:hover:not(:disabled){background:#e8f1fa}button.primary:hover{background:var(--bosch);color:#fff}nav{padding:12px;position:sticky;top:16px}nav button{border-radius:6px;font-size:15px}nav button.active{background:#e8f1fa;box-shadow:inset 3px 0 var(--blue);color:var(--blue)}.small{color:var(--muted)}.filter-grid{display:grid;grid-template-columns:2fr 1fr 1fr;gap:16px;align-items:end}.role-filter-grid{grid-template-columns:2fr 1fr}.filter-grid .field{margin:0}.filter-search{position:relative}.filter-hint{font-size:14px;color:var(--muted);margin:12px 0}.result-summary{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:20px 0 12px}.result-summary p{margin:0}.table{border:1px solid #e2eaf0;border-radius:6px}table{min-width:700px}th{background:#f2f7fb;color:var(--muted);font-weight:700}th,td{padding:12px 14px}.pagination{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin-top:16px}.pagination .actions{gap:8px}.empty-result{text-align:center;padding:28px 12px;color:var(--muted)}dialog{width:min(480px,calc(100vw - 32px));border:0;border-radius:8px;padding:24px;color:var(--ink);box-shadow:0 20px 60px #112b4455}dialog::backdrop{background:#122a40a6}dialog h2{margin:0;font-size:21px}dialog .actions{justify-content:flex-end}@media(max-width:767px){header{padding:12px 16px;gap:10px}.brand-logo img{width:115px}.brand-name{font-size:11px}.brand-name small{font-size:10px}header button{padding:7px 10px;white-space:nowrap}.shell{display:block;margin:20px auto;padding:0 16px}.shell nav{position:static;display:flex;overflow:auto;margin-bottom:20px;gap:4px;padding:8px}.shell nav button{white-space:nowrap;width:auto}.panel{padding:16px}.auth{margin:20px 16px;padding:24px}h1{font-size:26px}.filter-grid,.role-filter-grid{grid-template-columns:1fr;gap:12px}.result-summary{margin:16px 0 10px}.pagination{justify-content:center}table{min-width:720px}}@media(prefers-reduced-motion:reduce){button{transition:none}}
/* Modern UAT layout, following the AOTGA design tokens. */
body{background:#F3F7FA}header{min-height:76px;border-bottom:0;position:relative}header::after{content:'';height:4px;position:absolute;left:0;right:0;bottom:0;background:var(--sky)}.banner{background:#fff5d5;color:#5d4700;font-weight:600;letter-spacing:.01em}.shell{max-width:1280px;grid-template-columns:224px minmax(0,1fr);gap:28px;margin:32px auto;padding:0 32px}nav{background:#fff;border:1px solid #dbe6ed;border-radius:10px;padding:14px 10px;box-shadow:0 6px 22px #142e4a08}.nav-caption{font-size:12px;font-weight:700;color:var(--muted);letter-spacing:.04em;padding:8px 12px 12px}nav button{display:flex;align-items:center;gap:12px;min-height:46px;padding:10px 12px;margin:2px 0;color:#3b536b}nav button.active{background:#eaf2fb;color:var(--blue);box-shadow:inset 3px 0 var(--blue)}.nav-icon{width:19px;height:19px;flex:0 0 19px}.page-header{display:flex;align-items:center;justify-content:space-between;gap:16px;margin:2px 0 24px}.page-header h1{margin:3px 0 0;font-size:28px}.page-eyebrow{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--bosch)}.account-chip{display:flex;align-items:center;gap:8px;border:1px solid #dce8ef;background:#fff;padding:7px 12px;border-radius:999px;font-size:13px;color:#40576d;white-space:nowrap}.account-dot{width:8px;height:8px;border-radius:50%;background:#3FBCBE}.panel{border:1px solid #dce7ee;border-radius:10px;box-shadow:0 5px 18px #142e4a08}.panel h2{font-size:19px;margin-top:0}.overview-intro{display:flex;align-items:center;justify-content:space-between;gap:28px;background:#fff;border:1px solid #dce7ee;border-left:4px solid var(--sky);border-radius:10px;padding:28px 32px;box-shadow:0 5px 18px #142e4a08}.overview-tag{font-size:12px;font-weight:700;color:var(--bosch)}.overview-intro h2{font-size:22px;line-height:1.35;margin:5px 0}.overview-intro p,.service-card p{color:var(--muted);font-size:14px;margin:4px 0}.overview-intro button{flex-shrink:0}.overview-grid{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:16px;margin-top:16px}.service-card{background:#fff;border:1px solid #dce7ee;border-radius:10px;padding:24px;box-shadow:0 5px 18px #142e4a08}.service-card h2{font-size:18px;margin:16px 0 4px}.service-icon{display:grid;place-items:center;width:38px;height:38px;border-radius:8px;background:#e6f3fa;color:var(--blue);font-size:12px;font-weight:700}.service-icon.alt{background:#e9f6f5;color:#185c68}.text-action{border:0;padding:6px 0;margin-top:12px;min-height:44px;font-weight:700}.text-action:hover:not(:disabled){background:transparent;color:var(--bosch);text-decoration:underline}.field input,.field select,.field textarea{background-color:#fff;border-color:#9caebc}.table{border-color:#dce7ee}.table th{background:#f4f8fb}.table tbody tr:hover{background:#f8fbfd}.auth{border-top:4px solid var(--sky);border-radius:10px;box-shadow:0 12px 40px #142e4a12}.auth form>.actions{margin-top:12px}button:focus-visible,select:focus-visible,input:focus-visible,textarea:focus-visible{outline:3px solid var(--sky);outline-offset:2px}@media(max-width:767px){.shell{display:block;padding:0 16px;margin:20px auto}.shell nav{position:static;display:flex;overflow-x:auto;white-space:nowrap;margin-bottom:22px;padding:8px}.nav-caption{display:none}nav button{margin:0;min-width:max-content}.page-header{align-items:flex-start;flex-direction:column;gap:8px;margin-bottom:18px}.page-header h1{font-size:26px}.account-chip{font-size:12px}.overview-intro{align-items:flex-start;flex-direction:column;padding:22px}.overview-intro button{width:100%}.overview-grid{grid-template-columns:1fr}.service-card{padding:20px}.brand-name{max-width:150px}.table{overflow-x:auto}}@media(max-width:370px){.brand-name small{display:none}.brand-logo img{width:102px}}@media(prefers-reduced-motion:reduce){*,*::before,*::after{transition-duration:0s!important;scroll-behavior:auto!important}}
.system-list{border:1px solid #dce7ee;border-radius:8px;padding:14px 16px}.system-list legend{font-weight:700;padding:0 6px}.system-option{border-bottom:1px solid #e8eff3;padding:10px 0}.system-option:last-child{border-bottom:0}.system-option>label{display:flex;align-items:center;gap:10px;min-height:34px;font-weight:600}.system-option input[type=checkbox]{width:20px;min-height:20px;accent-color:#1D428A}.system-extra{padding-left:30px}.system-extra[hidden]{display:none}
.fo-request-panel{max-width:900px}.fo-request-panel input[readonly]{background:#f5f8fa;color:var(--ink)}.fo-request-panel .fo-approver-heading{margin:26px 0 8px}#fo-approver-email-wrap[hidden]{display:none}
.fo-request-summary{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:12px 20px;margin:20px 0;padding:18px;background:#f6f9fb;border-radius:8px}.fo-request-summary dt{color:var(--muted);font-size:13px}.fo-request-summary dd{margin:2px 0 0;overflow-wrap:anywhere}@media(max-width:600px){.fo-request-summary{grid-template-columns:1fr}}
.hr-result{display:flex;width:100%;align-items:center;justify-content:space-between;gap:1rem;margin:.4rem 0;text-align:left}.hr-result span{color:#526780;font-size:.875rem}.hr-check{display:flex;align-items:center;gap:.6rem;padding:.55rem 0}.hr-check input{width:auto;margin:0}.hr-case-summary,.hr-import-summary{margin:1.25rem 0;padding:1rem;border:1px solid #dbe5ed;border-radius:10px}.hr-case-summary p{margin:.45rem 0}.hr-metrics{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:.75rem;margin:1rem 0}.hr-metrics div{display:flex;flex-direction:column;gap:.2rem;padding:.75rem;background:#f2f7fb;border-radius:8px}.hr-metrics strong{font-size:1.35rem}.hr-metrics span{font-size:.875rem;color:#526780}@media(max-width:600px){.hr-metrics{grid-template-columns:repeat(2,minmax(0,1fr))}.hr-result{align-items:flex-start;flex-direction:column;gap:.2rem}}
#hr-other-wrap[hidden],#hr-approver-email-wrap[hidden]{display:none}
.hr-check input[type=checkbox]{width:20px;height:20px;min-height:20px;accent-color:#1d428a}