@font-face{font-family:Sarabun;src:url(sarabun.ttf) format('truetype');font-display:swap}*{box-sizing:border-box}body{margin:0;background:#f3f7fb;color:#334c63;font:16px/1.6 Sarabun,sans-serif}button,input,select,textarea{font:inherit}button,a,input,select,textarea{outline-offset:3px}button,a{touch-action:manipulation}button{cursor:pointer}button:disabled{cursor:wait;opacity:.55}h1,h2,h3,p{margin:0 0 10px}h1{font-size:22px;color:#224b72}h2{font-size:20px;color:#285b7a}h3{font-size:18px}small,.muted{color:#6b8195;font-size:14px}a{color:#1c6593}#app{padding:24px;width:100%}.header{display:flex;justify-content:space-between;align-items:center;gap:20px;margin-bottom:20px}.eyebrow{font-size:12px;font-weight:700;letter-spacing:1.4px;color:#44849b}.actions{display:flex;gap:8px;align-items:center;flex-wrap:wrap}.btn{border:1px solid #bfd4e4;border-radius:9px;background:#fff;color:#315f7e;padding:8px 14px;text-decoration:none;display:inline-flex;align-items:center;justify-content:center;gap:6px;min-height:42px}.btn:hover{background:#e8f3fb}.btn.primary{background:#276d9d;border-color:#276d9d;color:white}.btn.danger{color:#a83740;border-color:#e5c3c7}.btn.selected{background:#dfedf9;border-color:#367fa9;color:#1c5378}.tabs{display:flex;gap:5px;flex-wrap:wrap;border-bottom:1px solid #cbdde9;margin-bottom:20px}.tab{border:0;background:none;padding:10px 14px;color:#678299;border-bottom:3px solid transparent}.tab.active{color:#1e5e8b;border-color:#2d80b8;background:#e2eff9;border-radius:8px 8px 0 0}.notice,.error,.info{padding:12px 16px;border-radius:9px;margin-bottom:16px;background:#e8f3fb;border:1px solid #cadeed}.error{background:#fff0ef;color:#983c3c;border-color:#efc5c1}.notice{background:#e8f6ef;color:#276d50}.filters{display:grid;grid-template-columns:minmax(220px,2fr) repeat(3,minmax(130px,1fr)) auto;gap:12px;background:white;border:1px solid #d5e3ee;padding:16px;border-radius:12px;margin-bottom:12px}.field{display:flex;flex-direction:column;gap:5px}.field>span{font-size:14px;color:#58768e}input,select,textarea{width:100%;border:1px solid #bfd2e2;background:white;color:#304e68;padding:8px 10px;border-radius:7px;min-width:0}textarea{resize:vertical;min-height:85px}input[readonly]{background:#edf3f8}.chips{display:flex;gap:8px;flex-wrap:wrap;margin:8px 0 15px}.chip{border:1px solid #aacbe1;background:#e8f2fa;border-radius:20px;padding:4px 12px;color:#245978;font-size:14px}.kpis{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:14px;margin:14px 0 22px}.kpi{text-align:left;background:white;border:1px solid #d6e4ee;border-top:4px solid #619abb;border-radius:12px;padding:15px 20px;min-height:128px;color:#476883}.kpi:nth-child(2){border-top-color:#639f9d}.kpi:nth-child(3){border-top-color:#cf9c5d}.kpi:nth-child(4){border-top-color:#9a8bbe}.kpi.selected{background:#e5f1fa;box-shadow:0 0 0 2px #578aa9}.kpi strong{display:block;font-size:32px;line-height:1.35;color:#204f73}.kpi span{font-size:16px}.kpi small{display:block;font-size:12px}.chart-grid{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:18px}.card{background:#fff;border:1px solid #d6e3ec;border-radius:14px;padding:18px;min-width:0}.card>header{display:flex;justify-content:space-between;gap:10px;align-items:start;margin-bottom:12px}.card>header h2{font-size:17px;margin:0}.card>header .muted{font-size:12px}.chart-box{position:relative;height:285px}.chart-box canvas{max-height:100%}.chart-scroll{overflow-x:auto;overflow-y:hidden;padding-bottom:8px}.chart-wide{height:285px;position:relative;min-width:100%}.legend{display:flex;flex-wrap:wrap;gap:8px;font-size:13px;margin:8px 0}.legend span{display:inline-flex;gap:5px;align-items:center}.legend i{width:9px;height:9px;border-radius:3px;display:inline-block}.heatmap{border-collapse:separate;border-spacing:4px;font-size:12px;white-space:nowrap}.heatmap th{font-size:12px;font-weight:400;padding:1px 3px}.heatmap button{width:34px;height:19px;min-height:19px;border:0;border-radius:4px;padding:0;font-size:12px;background:#edf2f6;color:#285678}.heatmap .zero{color:transparent}.summary-list{max-height:280px;overflow:auto;display:grid;gap:7px}.summary-row{border:0;background:#f1f6fa;padding:10px;border-radius:7px;display:flex;justify-content:space-between;align-items:center;color:#325873;text-align:left}.summary-row b{margin-left:10px}.distribution{margin-bottom:20px}.checks{display:flex;gap:10px;flex-wrap:wrap;margin:14px 0}.check{display:flex;align-items:center;gap:6px;border:1px solid #d2e2ed;background:#fff;padding:5px 10px;border-radius:7px;font-size:14px}.check input{width:auto}.table-panel{margin-top:20px}.table-toolbar{display:flex;align-items:center;justify-content:space-between;gap:12px;flex-wrap:wrap;margin:12px 0}.table-toolbar select{width:auto}.table-scroll{overflow:auto;max-width:100%;border:1px solid #d5e1eb;border-radius:10px}table.data{border-collapse:collapse;width:100%;min-width:1040px;background:white;font-size:15px}table.data th{background:#eaf2f8;color:#365e7b;text-align:left;padding:12px;white-space:nowrap}table.data th button{background:none;border:0;color:inherit;font-weight:600;padding:0;white-space:nowrap}table.data td{padding:10px 12px;border-top:1px solid #e3edf4;height:72px;vertical-align:middle}table.data tr.clickable{cursor:pointer}table.data tr.clickable:hover{background:#f0f7fc}.clamp{display:-webkit-box;-webkit-line-clamp:2;-webkit-box-orient:vertical;overflow:hidden;line-height:1.5;max-height:3em;min-width:100px;max-width:310px;overflow-wrap:anywhere}.wide-cell .clamp{min-width:250px}.narrow{white-space:nowrap}.empty{padding:35px;text-align:center;color:#71889a;background:#f8fbfd;border-radius:10px}.pager{display:flex;gap:10px;align-items:center;justify-content:flex-end;margin:14px 0}.footer{font-size:13px;color:#8194a4;margin:20px 0}.dialog{border:0;border-radius:14px;box-shadow:0 20px 80px #173a5a38;padding:0;width:min(1120px,94vw);max-height:91dvh;color:#375771;background:#fff}.dialog::backdrop{background:#172e4699}.dialog-head{position:sticky;top:0;background:#eef5fa;border-bottom:1px solid #d5e2ed;padding:14px 20px;display:flex;justify-content:space-between;align-items:center;gap:12px;z-index:2}.dialog-head h2{margin:0;font-size:20px}.dialog-content{padding:20px}.form-grid{display:grid;grid-template-columns:1fr 1fr;gap:16px}.span2{grid-column:1/-1}.form-actions{display:flex;justify-content:flex-end;gap:10px;margin-top:20px}.detail-grid{display:grid;grid-template-columns:190px minmax(0,1fr);gap:10px 18px}.detail-grid dt{color:#6b8195}.detail-grid dd{margin:0;white-space:pre-wrap;overflow-wrap:anywhere}.history{margin-top:20px;border-top:1px solid #dce7ef;padding-top:18px}.history details{padding:10px;background:#f3f7fa;margin:8px 0;border-radius:7px}.history pre{white-space:pre-wrap;font:14px/1.6 Sarabun;overflow-wrap:anywhere}.badge{display:inline-block;padding:2px 8px;border-radius:6px;background:#e7f1f8;color:#44718d;font-size:13px}.badge.warn{background:#fff0dc;color:#8a6231}.role-note{margin-bottom:12px}.sr-only{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0,0,0,0);white-space:nowrap;border:0}.neon{--neon:#164454;background:#eaf1f8}.neon .chart-grid .card{background:#101f37;color:#dceaff;border-color:#2e4865}.neon .chart-grid h2{color:#dff8ff}.neon .chart-grid .muted{color:#a8c0da}.neon .summary-row{background:#213651;color:#d6eefc}.neon .heatmap th{color:#c4d9ec}.admin-tools{display:flex;gap:12px;flex-wrap:wrap;margin:16px 0}.numeric{text-align:right;font-variant-numeric:tabular-nums}.statusline{font-size:14px;color:#52728c;margin-bottom:12px}@media(max-width:1150px){.chart-grid{grid-template-columns:repeat(2,minmax(0,1fr))}.filters{grid-template-columns:repeat(2,minmax(0,1fr))}.filters>.field:first-child{grid-column:1/-1}}@media(max-width:700px){#app{padding:14px}.header{align-items:flex-start;flex-direction:column}.kpis{grid-template-columns:repeat(2,minmax(0,1fr));gap:9px}.kpi{padding:12px;min-height:122px}.kpi strong{font-size:27px}.chart-grid{grid-template-columns:1fr}.filters{gap:8px}.form-grid{grid-template-columns:1fr}.span2{grid-column:auto}.detail-grid{grid-template-columns:1fr;gap:2px}.detail-grid dd{margin-bottom:12px}.dialog{width:96vw}.dialog-content{padding:14px}h1{font-size:21px}}@media print{.actions,.tabs,.filters,.chips,.form-actions,.btn,.pager{display:none}body,#app{background:white;padding:0}.card{break-inside:avoid;box-shadow:none}.chart-grid{grid-template-columns:repeat(2,1fr)}}

.summary-table .summary-link{border:0;background:transparent;text-decoration:underline;text-underline-offset:3px;text-align:left;justify-content:flex-start;color:#1e618e;padding:6px 0}.summary-table .summary-link:hover{color:#134264}.summary-table tfoot{font-weight:600;background:#edf5fa}table.summary-table{min-width:480px}.summary-table tr:focus-visible{outline:2px solid #277bac;outline-offset:-2px}

/* Personnel/email reconciliation reuses the existing MIS type scale. */
.import-table{min-width:1080px}.import-table td{vertical-align:top}.import-table td:nth-child(2),.import-table td:nth-child(3){min-width:170px}.import-table td:nth-child(4){min-width:200px;max-width:330px}.import-table td:nth-child(5){min-width:220px}.import-table small{display:block;overflow-wrap:anywhere;margin-top:4px}.import-table td:last-child{min-width:150px}.import-table td:last-child .btn{margin-bottom:6px}