/* Extranet theme: plain, bank-style. All colours are variables (swap brand colours/logo here).
   Light by default; dark follows prefers-color-scheme unless the user picked one (data-theme on <html>).
   Payslip documents are separate files with their own light styles and are not affected. */
:root{
  --font:system-ui,-apple-system,"Segoe UI","Noto Sans Thai","Noto Sans","Leelawadee UI",Tahoma,sans-serif;
  --accent:#1f5fa8;--accent-hover:#174a85;--accent-fg:#fff;
  --bg:#fff;--surface:#fff;--surface-2:#f4f6f8;--fg:#1f2328;--muted:#5b6570;--border:#d6dbe0;
  --header-bg:#fff;--header-fg:#1f2328;--header-border:var(--accent);
  --err:#b42318;--ok:#1e7a3c;--warn-bg:#fff8e1;--warn-border:#c99a00;
  --logo:none;                                   /* later: url("/static/logo.svg") */
  color-scheme:light}
:root[data-theme=dark]{
  --accent:#5b9be0;--accent-hover:#7aafe8;--accent-fg:#0f1720;
  --bg:#1e2124;--surface:#26292d;--surface-2:#2d3136;--fg:#e6e8ea;--muted:#a5adb5;--border:#3d4247;
  --header-bg:#26292d;--header-fg:#e6e8ea;--err:#ff8f85;--ok:#74d18f;--warn-bg:#3a3420;--warn-border:#c99a00;color-scheme:dark}
@media (prefers-color-scheme:dark){:root:not([data-theme=light]){
  --accent:#5b9be0;--accent-hover:#7aafe8;--accent-fg:#0f1720;
  --bg:#1e2124;--surface:#26292d;--surface-2:#2d3136;--fg:#e6e8ea;--muted:#a5adb5;--border:#3d4247;
  --header-bg:#26292d;--header-fg:#e6e8ea;--err:#ff8f85;--ok:#74d18f;--warn-bg:#3a3420;--warn-border:#c99a00;color-scheme:dark}}
*{box-sizing:border-box}
html{-webkit-text-size-adjust:100%;text-size-adjust:100%}
body{font-family:var(--font);font-size:16px;line-height:1.55;margin:0;color:var(--fg);background:var(--bg);overflow-wrap:anywhere}
a{color:var(--accent);text-underline-offset:2px}
header{background:var(--header-bg);color:var(--header-fg);border-bottom:3px solid var(--header-border);
  padding:.75rem 1rem;display:flex;justify-content:space-between;align-items:center;flex-wrap:wrap;gap:.75rem}
.brand{display:flex;align-items:center;gap:.75rem;min-width:0}
.logo{width:40px;height:40px;background:var(--logo) center/contain no-repeat;display:none}
.co-th{font-weight:600}.co-en{font-size:.85rem;letter-spacing:.04em;color:var(--muted)}
.app{font-size:.8rem;color:var(--accent);font-weight:600;text-transform:uppercase;letter-spacing:.08em}
.prefs{display:flex;flex-wrap:wrap;gap:.5rem}
.seg{display:inline-flex;align-items:center;gap:0;border:1px solid var(--border);border-radius:6px;overflow:hidden}
.seg-label{font-size:.8rem;color:var(--muted);padding:0 .6rem}
.seg button{margin:0;border:0;border-left:1px solid var(--border);border-radius:0;background:var(--surface);color:var(--fg);
  min-height:44px;min-width:44px;padding:0 .75rem;font-size:.9rem}
.seg button.on{background:var(--accent);color:var(--accent-fg)}
nav{background:var(--surface-2);border-bottom:1px solid var(--border);padding:0 1rem;display:flex;flex-wrap:wrap;
  justify-content:space-between;align-items:center;gap:.25rem 1rem}
nav .links{display:flex;flex-wrap:wrap}
nav a{display:inline-flex;align-items:center;min-height:44px;padding:0 .75rem;text-decoration:none;font-weight:500}
.who{display:flex;align-items:center;gap:.75rem;color:var(--muted);font-size:.9rem}
.inline{display:inline}
main{padding:1rem;max-width:1100px;margin:0 auto}
h1{font-size:1.4rem;font-weight:600;margin:.5rem 0 1rem}h2{font-size:1.1rem;font-weight:600;margin:1.5rem 0 .5rem}
.table-wrap{width:100%;overflow-x:auto}
table{border-collapse:collapse;background:var(--surface);width:100%}
td,th{border-bottom:1px solid var(--border);padding:.55rem .6rem;text-align:left;vertical-align:top}
th{background:var(--surface-2);font-weight:600;font-size:.9rem;white-space:nowrap}
.n{text-align:right;font-variant-numeric:tabular-nums;white-space:nowrap}
.files a{display:inline-flex;align-items:center;min-height:44px;margin-right:.75rem;font-size:.9rem}
.files .slip{display:inline-flex;flex-wrap:wrap;align-items:center;margin-right:.75rem}.files .slip a{margin-right:.4rem}.files a.pdf{font-weight:600}
.badge{display:inline-block;font-size:.75rem;font-weight:600;padding:.05rem .4rem;border:1px solid var(--warn-border);background:var(--warn-bg);border-radius:3px}
form label{display:block;margin:.85rem 0}
input,select,button{font:inherit;color:var(--fg);background:var(--surface);border:1px solid var(--border);border-radius:6px}
input:not([type=checkbox]),select{display:block;width:100%;max-width:26rem;margin-top:.3rem;min-height:44px;padding:.5rem .7rem;font-size:16px}
input[type=checkbox]{width:22px;height:22px;vertical-align:middle;margin:0 .5rem 0 0}
label:has(input[type=checkbox]){display:flex;align-items:center;min-height:44px}
:focus-visible{outline:3px solid var(--accent);outline-offset:2px}
button{min-height:44px;min-width:44px;padding:.5rem 1.1rem;cursor:pointer;touch-action:manipulation}
main button{background:var(--accent);color:var(--accent-fg);border-color:var(--accent);margin-top:.5rem}
button.secondary{background:var(--surface);color:var(--fg);border-color:var(--border)}
td.actions form{display:flex;flex-wrap:wrap;gap:.4rem;margin:.2rem 0}td.actions select{max-width:10rem;margin:0}
td.actions button{margin:0}
.msg{color:var(--err);font-weight:600}.ok{color:var(--ok);font-weight:600}.note{color:var(--muted);font-size:.9rem}
pre{background:var(--surface-2);border:1px solid var(--border);padding:.75rem;overflow:auto;white-space:pre-wrap;font-size:.85rem}
.reveal{background:var(--warn-bg);border:1px solid var(--warn-border);border-left-width:4px;padding:.75rem 1rem;margin:1rem 0}
code{word-break:break-all;font-size:.9rem}
.empty{color:var(--muted)}
/* Phones and narrow tablets: each table row becomes a card, every cell labelled. */
@media (max-width:720px){
  header{padding:.6rem .75rem}.co-en{font-size:.75rem}main{padding:.75rem}
  nav{padding:0 .5rem}.who{width:100%;justify-content:space-between;padding-bottom:.4rem}
  table.cards,table.cards tbody,table.cards tr,table.cards td{display:block;width:100%}
  table.cards thead{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
  table.cards{background:transparent}
  table.cards tr{background:var(--surface);border:1px solid var(--border);border-radius:8px;margin:0 0 .75rem;padding:.4rem .75rem}
  table.cards td{border:0;border-bottom:1px solid var(--border);padding:.45rem 0;display:grid;grid-template-columns:minmax(6.5rem,38%) 1fr;gap:.5rem;text-align:left}
  table.cards td:last-child{border-bottom:0}
  table.cards td::before{content:attr(data-label);font-weight:600;color:var(--muted);font-size:.85rem}
  table.cards td.empty{display:block}table.cards td.empty::before{content:none}
  table.cards td.n{text-align:left;white-space:normal}
  table.cards td.files,table.cards td.actions{grid-template-columns:1fr}
  main button{width:100%;max-width:26rem}
}
@media (hover:hover){a:hover{color:var(--accent-hover)}main button:hover{background:var(--accent-hover)}}
@media print{header .prefs,nav{display:none}}
/* payroll data pages (staff, pay change, monthly items) */
textarea{font:inherit;font-size:16px;color:var(--fg);background:var(--surface);border:1px solid var(--border);border-radius:6px;display:block;width:100%;max-width:40rem;margin-top:.3rem;padding:.5rem .7rem}
.subnav{display:flex;flex-wrap:wrap;gap:.5rem 1rem;align-items:center;margin:.25rem 0 1rem}
a.button{display:inline-flex;align-items:center;min-height:44px;padding:.5rem 1.1rem;border-radius:6px;background:var(--accent);color:var(--accent-fg);text-decoration:none;font-weight:600}
fieldset{border:1px solid var(--border);border-radius:8px;margin:1rem 0;padding:.25rem 1rem .5rem;min-width:0}
legend{padding:0 .4rem;font-weight:600}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(16rem,1fr));gap:0 1.25rem}
.grid label{margin:.6rem 0}
.grid .wide{grid-column:1/-1}
form.admin label.check{margin:.4rem 0}
.monthpick{display:flex;flex-wrap:wrap;align-items:flex-end;gap:.75rem}
.monthpick label{margin:0}
td form.inline{display:flex;flex-wrap:wrap;align-items:center;gap:.25rem}
td form.inline button{margin-top:0}
@media (max-width:720px){.grid{grid-template-columns:1fr}}

/* review round 2 (2026-10-29) */
.desc{display:inline-block;min-width:0}.desc>span{display:block}
.muted{color:var(--muted);font-size:.85rem}
td.nowrap{white-space:nowrap}
.acts{display:inline-flex;flex-wrap:wrap;gap:.4rem 1rem}
p.note.hint{margin:.25rem 0 .5rem}
.acts a{white-space:nowrap}
/* review round 3 */
.badge,.nowrap,td.nowrap{white-space:nowrap}
@media (min-width:721px){td.keep{overflow-wrap:normal}}
/* review round 4: extra-allowance checkboxes only for Extra allowance (browsers without :has show them; the server ignores them) */
form:has(select[name=kind] option:checked:not([value=allowance])) .allowance-only{display:none}