/* ระบบติดตามงบประมาณและแผน อบจ.นครราชสีมา  รุ่น 3.2.0 */
:root{
  --bg:#f2f5f7; --surface:#ffffff; --surface-2:#f5f7f9;
  --fg:#13202b; --fg-2:#4d5b68; --muted:#66737f;
  --line:#d5dde4; --line-2:#e8edf1;
  --head-bg:#0b3c52; --head-fg:#ffffff; --head-muted:#c5d9e3; --head-on-bg:#ffffff; --head-on-fg:#0b3c52;
  --accent:#2a78d6; --accent-ink:#1c5cab; --accent-btn:#1c5cab; --on-accent:#ffffff;
  --plan:#a9b6c1; --bud:#86b6ef;
  --ok:#0a8f0a; --late:#d9622b; --idle:#7c8894;
  --note-bg:#eaf2fb; --note-fg:#173a5e; --note-line:#c9dcf2;
  --err:#b3261e; --good:#0a6b0a;
  --shadow:0 8px 24px rgba(19,32,43,.16);
  --font:'IBM Plex Sans Thai','Noto Sans Thai','Leelawadee UI',Tahoma,system-ui,sans-serif;
  color-scheme:light;
}
@media (prefers-color-scheme: dark){
  :root{
    --bg:#0e151b; --surface:#17212a; --surface-2:#1d2933;
    --fg:#e8eef2; --fg-2:#b4c1cc; --muted:#93a2af;
    --line:#2e3d4a; --line-2:#243340;
    --head-bg:#0a2836; --head-fg:#ffffff; --head-muted:#a9c3d0; --head-on-bg:#e8eef2; --head-on-fg:#0a2836;
    --accent:#3987e5; --accent-ink:#86b6ef; --accent-btn:#256abf; --on-accent:#ffffff;
    --plan:#4d5e6d; --bud:#184f95;
    --ok:#2bb52b; --late:#ec835a; --idle:#8795a1;
    --note-bg:#152a40; --note-fg:#cfe2f7; --note-line:#24415f;
    --err:#ff8a80; --good:#6fd36f;
    --shadow:0 8px 24px rgba(0,0,0,.55);
    color-scheme:dark;
  }
}
*{box-sizing:border-box}
[hidden]{display:none!important}
html,body{margin:0}
body{background:var(--bg);color:var(--fg);font-family:var(--font);font-size:15px;line-height:1.6}
h1,h2,h3,p{margin:0}
h1{font-size:26px;font-weight:600;line-height:1.35;text-wrap:balance}
h2{font-size:17px;font-weight:600;line-height:1.45;text-wrap:balance}
a{color:var(--accent-ink)}
a:hover{text-decoration-thickness:2px}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
.wrap{max-width:none;margin-inline:auto;padding-inline:clamp(16px,2vw,32px)}
.sub{color:var(--fg-2)}
.small{font-size:13px;color:var(--muted)}
.num{font-variant-numeric:tabular-nums}
.pre{white-space:pre-wrap}

/* header */
.top{background:var(--head-bg);color:var(--head-fg)}
.top .wrap{display:flex;flex-wrap:wrap;gap:6px 28px;align-items:center;padding-block:10px;min-height:64px}
.brand{display:flex;flex-direction:column;line-height:1.35}
.brand b{font-size:16px;font-weight:600}
.brand span{font-size:13px;color:var(--head-muted)}
.nav{display:flex;flex-wrap:wrap;gap:4px;flex:1 1 auto}
.nav a{display:inline-flex;align-items:center;gap:7px;min-height:44px;padding:0 12px;border-radius:8px;color:var(--head-fg);font-weight:500;text-decoration:none}
.nav a:hover{background:rgba(255,255,255,.12)}
.nav a[aria-current="page"]{background:var(--head-on-bg);color:var(--head-on-fg);font-weight:600}
.top :focus-visible{outline-color:#ffffff}
.userbox{display:flex;flex-wrap:wrap;gap:4px 12px;align-items:center;margin-left:auto;font-size:13px;color:var(--head-muted)}
.userbox b{font-weight:500;color:var(--head-fg)}
.userbox button{min-height:36px;padding:0 12px;border-radius:8px;border:1px solid rgba(255,255,255,.4);background:transparent;color:var(--head-fg);font:inherit;cursor:pointer}
.userbox button:hover{background:rgba(255,255,255,.12)}

main.wrap{padding-block:24px 40px;display:flex;flex-direction:column;gap:20px;outline:none;min-height:60vh}
.headrow{display:flex;flex-wrap:wrap;gap:10px 24px;align-items:flex-end;justify-content:space-between}
.card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:20px;min-width:0}
.cardhead{display:flex;flex-wrap:wrap;gap:4px 16px;align-items:baseline;justify-content:space-between}
.stack{display:flex;flex-direction:column;gap:20px;min-width:0}
.cols2{display:grid;grid-template-columns:minmax(0,1.75fr) minmax(0,1fr);gap:20px;align-items:start}
@media (max-width:860px){.cols2{grid-template-columns:minmax(0,1fr)}}
.hint{background:var(--note-bg);color:var(--note-fg);border:1px solid var(--note-line);border-radius:10px;padding:10px 14px;font-size:14px}
.loading{padding:40px 0;text-align:center}

/* sign-in */
.auth{width:100%;max-width:440px;margin:24px auto}
.tabs{display:flex;gap:4px;margin-top:16px;padding:4px;border-radius:10px;background:var(--surface-2);border:1px solid var(--line-2)}
.tabs button{flex:1 1 0;min-height:40px;border:0;border-radius:7px;background:transparent;color:var(--fg-2);font:inherit;font-weight:500;cursor:pointer}
.tabs button[aria-selected="true"]{background:var(--surface);color:var(--fg);font-weight:600;box-shadow:0 1px 2px rgba(19,32,43,.18)}
.stackf{display:flex;flex-direction:column;gap:12px;margin-top:16px}
.ok-msg{margin-top:12px;color:var(--good);font-size:14px}
.linkbtn{padding:0;border:0;background:none;color:var(--accent-ink);font:inherit;text-decoration:underline;cursor:pointer}

/* stat tiles */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:16px}
.tile{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 20px}
.tile .lab{font-size:14px;color:var(--fg-2)}
.tile .val{font-size:30px;font-weight:600;line-height:1.3}
.tile .val small{font-size:15px;font-weight:500;color:var(--fg-2)}

/* buttons and fields */
.btn{display:inline-flex;align-items:center;justify-content:center;min-height:44px;padding:0 18px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--accent-ink);font:inherit;font-weight:600;cursor:pointer;text-decoration:none}
.btn:hover{background:var(--surface-2)}
.btn.primary{background:var(--accent-btn);border-color:var(--accent-btn);color:var(--on-accent)}
.btn.primary:hover{filter:brightness(1.08)}
.btn.danger{color:var(--err);border-color:var(--err)}
.btn.sm{min-height:36px;padding:0 12px;font-size:14px}
.btn:disabled{opacity:.6;cursor:default}
.field{display:flex;flex-direction:column;gap:4px;min-width:0}
.field label,.fs legend{font-size:13px;color:var(--fg-2)}
.field input,.field select,.field textarea{min-height:44px;width:100%;padding:8px 12px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--fg);font:inherit}
.field textarea{min-height:72px;resize:vertical}
.field select:disabled{opacity:.6}
.filters{display:flex;flex-wrap:wrap;gap:12px 16px;align-items:flex-end}
.filters .field{flex:1 1 180px}
.filters .field.grow{flex:2 1 240px}
.fs{border:1px solid var(--line-2);border-radius:10px;padding:10px 14px 14px;margin:0;min-width:0}
.five{display:grid;grid-template-columns:repeat(auto-fit,minmax(120px,1fr));gap:10px;margin-top:6px}
.err{color:var(--err);font-size:14px}

/* status pills */
.pill{display:inline-flex;align-items:center;gap:6px;padding:2px 10px 2px 8px;border-radius:999px;font-size:13px;font-weight:500;white-space:nowrap;color:var(--fg);background:color-mix(in srgb,var(--s) 16%,var(--surface))}
.pill svg{width:12px;height:12px;flex:none;color:var(--s)}
.s-ok{--s:var(--ok)} .s-late{--s:var(--late)} .s-idle{--s:var(--idle)} .s-done{--s:var(--accent)} .s-part{--s:var(--accent)}

/* meters */
.meter{--m:var(--accent);height:8px;border-radius:4px;background:color-mix(in srgb,var(--m) 18%,var(--surface));overflow:hidden}
.meter>i{display:block;height:100%;background:var(--m);border-radius:4px}
.meter.ok{--m:var(--ok)} .meter.late{--m:var(--late)} .meter.idle{--m:var(--idle)}
.mini{display:flex;align-items:center;gap:8px;min-width:96px}
.mini .meter{flex:1 1 auto}
.mrow{display:flex;justify-content:space-between;gap:12px;font-size:14px}

/* tables */
.scroll{overflow-x:auto;position:relative}
table{width:100%;border-collapse:collapse;font-variant-numeric:tabular-nums}
th,td{padding:10px 12px;text-align:left;vertical-align:top;border-top:1px solid var(--line-2)}
thead th{border-top:0;font-size:13px;font-weight:600;color:var(--fg-2);white-space:nowrap}
.r{text-align:right;white-space:nowrap}
td.code{color:var(--muted);font-size:13px;white-space:nowrap}
tr.grp th{background:var(--surface-2);font-size:13px;font-weight:600;color:var(--fg-2)}
tr.tot td,tr.tot th{font-weight:600;background:var(--surface-2)}
table.wide{min-width:1080px}
table.mid{min-width:560px}

/* list rows */
.rows{display:flex;flex-direction:column}
.row{display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;padding:12px 0;border-top:1px solid var(--line-2)}
.row>.main{flex:999 1 280px;min-width:0}
.row>.side{flex:1 1 200px;min-width:0}
.badge{flex:none;width:32px;height:32px;border-radius:8px;display:inline-flex;align-items:center;justify-content:center;font-weight:600;color:var(--fg);background:color-mix(in srgb,var(--accent) 16%,var(--surface))}
.urow{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:flex-start;padding:14px 0;border-top:1px solid var(--line-2)}
.urow:first-child{border-top:0;padding-top:0}
.urow .btn{margin-top:23px}

/* year chart */
.legend{display:flex;flex-wrap:wrap;gap:4px 18px;font-size:13px;color:var(--fg-2)}
.legend span{display:inline-flex;align-items:center;gap:6px}
.sw{width:12px;height:12px;border-radius:3px;flex:none}
.chart{display:grid;grid-template-columns:30px minmax(0,1fr);column-gap:8px;margin-top:52px}
.yaxis{position:relative;font-size:12px;color:var(--muted);font-variant-numeric:tabular-nums}
.yaxis span{position:absolute;right:0;transform:translateY(50%);line-height:1}
.plot{position:relative;border-bottom:1px solid var(--line)}
.gl{position:absolute;left:0;right:0;height:1px;background:var(--line-2)}
.colsx{position:absolute;inset:0;display:flex}
.col{flex:1 1 0;min-width:0;position:relative;border-radius:6px;cursor:default}
.col:hover,.col:focus-visible{background:color-mix(in srgb,var(--accent) 7%,transparent)}
.bplan,.bact{position:absolute;bottom:0;left:50%;border-radius:4px 4px 0 0}
.bplan{width:40px;margin-left:-20px;background:var(--plan)}
.bbud{position:absolute;bottom:0;left:50%;border-radius:4px 4px 0 0;width:24px;margin-left:-12px;background:var(--bud)}
.bact{width:10px;margin-left:-5px;background:var(--accent)}
.clab{position:absolute;left:0;right:0;text-align:center;line-height:1.25;pointer-events:none;font-variant-numeric:tabular-nums}
.clab b{display:block;font-size:13px;font-weight:600;color:var(--fg)}
.clab span{display:block;font-size:11px;color:var(--muted)}
.tip{display:none;position:absolute;left:50%;transform:translateX(-50%);z-index:5;width:168px;padding:10px 12px;border-radius:8px;background:var(--surface);border:1px solid var(--line);box-shadow:var(--shadow);font-size:13px;color:var(--fg);pointer-events:none}
.col.tl .tip{left:0;transform:none} .col.tr .tip{left:auto;right:0;transform:none}
.col:hover .tip,.col:focus-visible .tip{display:block}
.tip b{display:block;margin-bottom:2px}
.tip div{display:flex;justify-content:space-between;gap:10px;color:var(--fg-2)}
.tip div span:last-child{color:var(--fg);font-variant-numeric:tabular-nums}
.xaxis{display:flex;padding-top:6px;font-size:13px;color:var(--fg-2)}
.xaxis span{flex:1 1 0;text-align:center}

/* status stack */
.sbar{display:flex;gap:2px;height:20px;margin-top:14px}
.sbar i{display:block;min-width:6px;background:var(--s)}
.sbar i:first-child{border-radius:4px 0 0 4px} .sbar i:last-child{border-radius:0 4px 4px 0}
.sleg{display:flex;flex-direction:column;margin-top:10px}
.sleg a{display:flex;align-items:center;gap:10px;min-height:44px;padding:0 6px;margin-inline:-6px;border-radius:8px;color:var(--fg);text-decoration:none}
.sleg a:hover{background:var(--surface-2)}
.sleg a svg{width:14px;height:14px;color:var(--s);flex:none}
.sleg a span{flex:1 1 auto}
.sleg a b{font-weight:600}

/* progress log */
.log{display:flex;flex-wrap:wrap;gap:4px 18px;padding:14px 0;border-top:1px solid var(--line-2)}
.log .when{flex:0 0 140px;font-size:13px;color:var(--muted)}
.log .what{flex:999 1 260px;min-width:0;overflow-wrap:anywhere}
.log .pct{flex:none;font-weight:600}
.confirm{display:inline-flex;flex-wrap:wrap;gap:6px;align-items:center;color:var(--fg)}
form.card{display:flex;flex-direction:column;gap:12px}
.two{display:grid;grid-template-columns:repeat(auto-fit,minmax(130px,1fr));gap:12px}
.kpi2{display:flex;flex-wrap:wrap;gap:8px 24px;margin-top:8px}
.kpi2 b{display:block;font-size:17px;font-weight:600;line-height:1.35}

/* kpi rows */
.krow{display:flex;flex-wrap:wrap;gap:8px 22px;align-items:center;padding:14px 0;border-top:1px solid var(--line-2)}
.krow .kname{flex:999 1 300px;min-width:0}
.krow .ktar{flex:1 1 150px;min-width:0}
.krow .kres{flex:1 1 210px;min-width:0}
.krow .kact{flex:none;display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.hist{display:flex;flex-wrap:wrap;gap:2px 14px;margin-top:4px;font-size:12px;color:var(--fg-2)}
.hist i{font-style:normal;color:var(--muted)}
.kform{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:flex-end;flex:1 1 100%;padding:12px;border-radius:10px;background:var(--surface-2)}

.foot{padding-block:0 32px;display:flex;flex-wrap:wrap;gap:6px 20px;align-items:center;justify-content:space-between;font-size:13px;color:var(--muted)}
.toast{position:fixed;left:50%;transform:translateX(-50%);bottom:20px;z-index:20;max-width:calc(100% - 32px);padding:10px 18px;border-radius:999px;background:var(--fg);color:var(--bg);font-weight:500;box-shadow:var(--shadow)}
textarea.copybox{width:100%;min-height:120px;margin-top:12px;padding:10px;border:1px solid var(--line);border-radius:8px;background:var(--surface-2);color:var(--fg);font:13px/1.5 ui-monospace,Menlo,Consolas,monospace}
@media (prefers-reduced-motion:no-preference){.meter>i{transition:width .25s ease}}

/* รุ่น 3.0.0: โครง 4 ขั้น */
.nav a i{display:inline-flex;align-items:center;justify-content:center;width:20px;height:20px;border-radius:50%;font-style:normal;font-size:12px;font-weight:600;background:rgba(255,255,255,.2)}
.nav a[aria-current="page"] i{background:var(--head-on-fg);color:var(--head-on-bg)}
.path{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:12px}
@media (max-width:900px){.path{grid-template-columns:repeat(2,minmax(0,1fr))}}
@media (max-width:480px){.path{grid-template-columns:minmax(0,1fr)}}
.step{display:flex;flex-direction:column;align-items:flex-start;gap:2px;background:var(--surface);border:1px solid var(--line);border-top:4px solid var(--accent);border-radius:12px;padding:14px 18px;color:var(--fg);text-decoration:none;min-width:0}
a.step:hover{background:var(--surface-2)}
.step .sno{font-size:12px;font-weight:600;color:var(--accent-ink);letter-spacing:.02em}
.step b{font-size:15px;font-weight:600}
.step .sval{font-size:26px;font-weight:600;line-height:1.3}
.step .sval small{font-size:14px;font-weight:500;color:var(--fg-2)}
.step .pill{margin-top:4px;white-space:normal}
.card>p.sub,.headrow p.sub{max-width:110ch}
.row.gap{align-items:flex-start}
.row.gap .gn{flex:0 0 64px}
.check{display:inline-flex;align-items:center;gap:8px;min-height:44px;font-size:14px}
.check input{width:20px;height:20px;accent-color:var(--accent-btn)}
.vh{position:absolute;width:1px;height:1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap}
sup{font-size:11px;line-height:0}
td .pill.chip{white-space:normal}
form.card.filters{flex-direction:row}
th .u{display:block;font-size:11px;font-weight:400;color:var(--muted);line-height:1.3}

/* รุ่น 3.0.0: หลายแผนแม่บท */
.picker{display:flex;flex-direction:column;gap:1px;min-width:0}
.picker label{font-size:12px;color:var(--head-muted)}
.picker select{min-height:40px;max-width:min(320px,100%);padding:6px 10px;border-radius:8px;border:1px solid rgba(255,255,255,.5);background:var(--head-on-bg);color:var(--head-on-fg);font:inherit;font-weight:600}
.tag{display:inline-block;padding:1px 8px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap;color:var(--fg);background:color-mix(in srgb,var(--accent) 16%,var(--surface))}
.plans{display:flex;flex-direction:column;gap:14px}
.plan{display:grid;grid-template-columns:minmax(220px,1.1fr) minmax(0,3fr);gap:14px 24px;align-items:center;background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px 20px;color:var(--fg);text-decoration:none;min-width:0}
a.plan:hover{background:var(--surface-2)}
.plan h3{font-size:16px;font-weight:600;line-height:1.4;margin:0}
.four{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:10px}
.four .mini{display:block;min-width:0;border-left:3px solid var(--accent);padding:2px 0 2px 10px}
.four .mini.off,.step.off{border-color:var(--idle)}
.step.off{border-top-color:var(--idle)}
.four .mini .l{font-size:12px;color:var(--muted)}
.four .mini .v{font-size:20px;font-weight:600;line-height:1.3}
.four .mini .v small{font-size:12px;font-weight:500;color:var(--fg-2)}
.four .mini .d{font-size:12px;color:var(--fg-2)}
.four .mini .meter{height:6px;margin-top:4px}
@media (max-width:900px){.plan{grid-template-columns:minmax(0,1fr)}}
@media (max-width:520px){.four{grid-template-columns:repeat(2,minmax(0,1fr))}}
.facts{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:12px 20px;margin-top:12px}
.facts>div{display:flex;flex-direction:column;min-width:0}
ol.next{margin:8px 0 0;padding-left:22px;display:flex;flex-direction:column;gap:4px}
.row .kform{flex:1 1 100%}

/* รุ่น 3.1.0: เล่มข้อบัญญัติ */
:root{--hit-bg:#ffe58a;--hit-fg:#3a2c00}
@media (prefers-color-scheme: dark){:root{--hit-bg:#6b5300;--hit-fg:#fff3c4}}
.tag.ok{background:color-mix(in srgb,var(--ok) 16%,var(--surface))}
.tag.warn{background:color-mix(in srgb,var(--late) 18%,var(--surface))}
.tag.idle{background:color-mix(in srgb,var(--idle) 18%,var(--surface))}
.shelf{display:grid;grid-template-columns:repeat(auto-fit,minmax(210px,1fr));gap:12px}
.book{display:flex;flex-direction:column;gap:4px;background:var(--surface);border:1px solid var(--line);border-left:6px solid var(--head-bg);border-radius:10px;padding:12px 14px;min-width:0}
.book.scan{border-left-color:var(--late)}
.book.none{border-left-color:var(--idle)}
.book b{font-size:22px;font-weight:600;line-height:1.2}
.book .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.book .confirm{margin-top:4px}
.bksearch{display:flex;flex-wrap:wrap;gap:10px 12px;align-items:flex-end}
.bksearch .field.grow{flex:1 1 320px}
.bksearch .field input,.bksearch .field select{min-height:48px}
.bksearch .field input[type="search"]{font-size:17px}
.bksearch .field input[type="file"]{padding:9px 12px}
.bkbtns{display:flex;flex-wrap:wrap;gap:8px;margin-top:8px}
.yhead{display:flex;flex-wrap:wrap;gap:6px 12px;align-items:baseline;justify-content:space-between;padding:10px 0 6px;border-bottom:2px solid var(--line);margin-top:14px}
.yhead h3{font-size:16px;font-weight:600}
.hit{display:grid;grid-template-columns:92px minmax(0,1fr) auto;gap:6px 14px;align-items:start;padding:10px 0;border-bottom:1px solid var(--line-2)}
.hit .pg{font-weight:600;white-space:nowrap}
.hit .ctx{min-width:0;overflow-wrap:anywhere;font-size:14px}
.hit .ctx .l{display:block}
.hit .ctx .l.m{color:var(--muted)}
mark{background:var(--hit-bg);color:var(--hit-fg);border-radius:3px;padding:0 2px}
ul.note{margin:8px 0 0;padding-left:20px;display:flex;flex-direction:column;gap:4px}
#bkres .hint{margin-bottom:10px}
@media (max-width:640px){.hit{grid-template-columns:minmax(0,1fr)}}

/* รุ่น 3.2.0: เมนูรองของแผนแม่บท + หน้าภาพรวมงบทั้ง อบจ. */
:root{--head-bg-2:#0f4a63;--st0:#c3ccd5;--st1:#d3e3f6;--st2:#a6c8ef;--st3:#6fa4e4;--st4:#3a82d6;--st5:#1d5fb0;--st6:#0a8f0a;--s-dev:#1baf7a;--s-bud:#2a78d6;--s-act:#eb6834;--band:#e6eef7;--hand:#7a3fc4}
@media (prefers-color-scheme: dark){:root{--head-bg-2:#0d3243;--st0:#4a5662;--st1:#1d3652;--st2:#245182;--st3:#2f6db3;--st4:#3d8ae6;--st5:#7db3f2;--st6:#2bb52b;--s-dev:#199e70;--s-bud:#3987e5;--s-act:#d95926;--band:#1f3042;--hand:#b693ee}}
.subbar{background:var(--head-bg-2);border-top:1px solid rgba(255,255,255,.14)}
.top .subbar .wrap{min-height:0;padding-block:8px;gap:6px 20px;align-items:flex-end}
.subbar .nav a{min-height:40px}
.tag.hand{background:color-mix(in srgb,var(--hand) 20%,var(--surface))}
.bo-years{display:flex;flex-wrap:wrap;gap:6px}
.bo-years button{min-height:44px;min-width:68px;padding:0 14px;border-radius:8px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font:inherit;font-weight:600;cursor:pointer;font-variant-numeric:tabular-nums}
.bo-years button[aria-pressed="true"]{background:var(--head-bg);border-color:var(--head-bg);color:var(--head-fg)}
.bo-tiles .tile{display:flex;flex-direction:column;gap:2px}
.bo-tiles .val{font-variant-numeric:tabular-nums}
.bo-m{height:8px;border-radius:4px;background:color-mix(in srgb,var(--s-act) 18%,var(--surface));overflow:hidden}
.bo-m>i{display:block;height:100%;background:var(--s-act);border-radius:4px}
td .bo-m{width:84px;display:inline-block;vertical-align:middle;margin-right:8px}
.bo-legend{display:flex;flex-wrap:wrap;gap:6px 18px;font-size:13px;color:var(--fg-2);margin-top:10px}
.bo-legend i{display:inline-block;width:12px;height:12px;border-radius:3px;margin-right:6px;vertical-align:-1px}
.bo-chart{position:relative;margin-top:12px}
.bo-chart svg{display:block;width:100%;height:auto}
.bo-chart text{font-family:var(--font);fill:var(--fg-2);font-size:12px}
.bo-chart .yr{cursor:pointer}
.bo-tip{position:absolute;z-index:5;pointer-events:none;background:var(--fg);color:var(--bg);border-radius:8px;padding:6px 10px;font-size:13px;line-height:1.5;box-shadow:var(--shadow);white-space:nowrap}
.bo-tabs{display:flex;flex-wrap:wrap;gap:6px}
.bo-tabs button{min-height:40px;padding:0 14px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font:inherit;font-weight:500;cursor:pointer}
.bo-tabs button[aria-selected="true"]{background:var(--accent-btn);border-color:var(--accent-btn);color:var(--on-accent);font-weight:600}
.bo-tools{display:flex;flex-wrap:wrap;gap:8px 12px;align-items:center}
.bo-tools select{min-height:40px;max-width:100%;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--fg);font:inherit}
table.bo{min-width:780px}
table.bo th,table.bo td{padding:9px 10px}
table.bo thead th{vertical-align:bottom}
table.bo tr.l1>*{font-weight:600;background:var(--surface-2)}
table.bo tr.l2 .nm{padding-left:30px} table.bo tr.l3 .nm{padding-left:54px;color:var(--fg-2)} table.bo tr.l4 .nm{padding-left:78px;color:var(--muted)}
table.bo tr.l3 td,table.bo tr.l3 th,table.bo tr.l4 td,table.bo tr.l4 th{font-size:14px;font-weight:400}
table.bo tr.l2 th{font-weight:500}
table.bo .nm{min-width:300px;text-align:left}
table.bo .nm .small{display:block;font-weight:400}
table.bo tr.l2 .nm .small{margin-left:28px}
.bo-tw{display:inline-flex;align-items:center;justify-content:center;width:24px;height:24px;margin-right:4px;border:1px solid var(--line);border-radius:6px;background:var(--surface);color:var(--fg);font:inherit;font-size:13px;line-height:1;cursor:pointer;vertical-align:middle}
.bo-tw.none{visibility:hidden}
.bo-entry{display:flex;flex-wrap:wrap;gap:8px;align-items:flex-end;padding:10px 12px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.bo-entry label{display:flex;flex-direction:column;gap:2px;font-size:12px;color:var(--fg-2)}
.bo-entry input{min-height:40px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--fg);font:inherit;max-width:100%}
.bo-entry .err{flex:1 1 100%}
.nav a.off{opacity:.5;font-weight:400}
.nav a.off i{background:rgba(255,255,255,.12)}
.nav a.off[aria-current="page"]{opacity:.85}
.nav a.off[aria-current="page"] i{background:var(--head-on-fg);color:var(--head-on-bg)}
/* ---------- รุ่น 3.3.0: แผนพัฒนาท้องถิ่น ---------- */
.sr{position:absolute;width:1px;height:1px;padding:0;margin:-1px;overflow:hidden;clip:rect(0 0 0 0);white-space:nowrap;border:0}
.nowrap{white-space:nowrap}
.bo-opts{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;margin-top:10px}
.bo-seg{display:inline-flex;border:1px solid var(--line);border-radius:8px;overflow:hidden;max-width:100%}
.bo-seg button{min-height:36px;padding:0 12px;border:0;background:var(--surface);color:var(--fg);font:inherit;font-size:13px;font-weight:500;cursor:pointer}
.bo-seg button+button{border-left:1px solid var(--line)}
.bo-seg button[aria-pressed="true"]{background:var(--accent-btn);color:var(--on-accent);font-weight:600}
.bo-md{height:8px;border-radius:4px;background:color-mix(in srgb,var(--s-bud) 16%,var(--surface));overflow:hidden}
.bo-md>i{display:block;height:100%;background:var(--s-bud);border-radius:4px}
td .bo-md{width:72px;display:inline-block;vertical-align:middle;margin-right:8px}
table.bo td.dv-c{background:color-mix(in srgb,var(--s-dev) 6%,transparent)}
table.bo tr.l1 td.dv-c{background:color-mix(in srgb,var(--s-dev) 9%,var(--surface-2))}
.dv-filters{display:grid;grid-template-columns:repeat(auto-fit,minmax(160px,1fr));gap:10px 14px}
.dv-filters input,.dv-filters select{min-height:44px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--fg);font:inherit;width:100%;min-width:0}
.dv-sum{display:flex;flex-wrap:wrap;gap:6px 18px;align-items:baseline;margin-top:14px}
.dv-sum b{font-size:18px;font-variant-numeric:tabular-nums}
.dv-pager{display:flex;flex-wrap:wrap;gap:8px;align-items:center;justify-content:flex-end;margin-top:10px}
table.dv{min-width:1080px}
table.dv td.dv-pl{min-width:130px}
table.dv td.dv-dp{min-width:150px}
table.dv td.dv-nm{min-width:260px}
table.dv td .small{display:block}
.dv-books{list-style:none;margin:12px 0 0;padding:0;display:flex;flex-direction:column;gap:10px}
.dv-books li{display:flex;flex-wrap:wrap;gap:8px 16px;align-items:center;justify-content:space-between;padding:10px 12px;border:1px solid var(--line-2);border-radius:10px}
.dv-books li>div{display:flex;flex-direction:column;min-width:0}
.dv-up{display:flex;flex-wrap:wrap;gap:6px 10px;align-items:center}
.dv-up:focus-within label.btn{outline:2px solid var(--accent);outline-offset:2px}
.dv-up .err{flex:1 1 100%;margin:0}
/* ---------- รุ่น 3.4.0: ติดตามโครงการ ---------- */
.nav-badge{display:inline-flex;align-items:center;justify-content:center;min-width:20px;height:20px;margin-left:6px;padding:0 6px;border-radius:999px;background:#c62828;color:#fff;font-size:12px;font-weight:700}
.userbox .ulink{display:inline-flex;align-items:center;min-height:36px;padding:0 12px;border-radius:8px;color:var(--head-fg);text-decoration:none;font-weight:500}
.userbox .ulink:hover{background:rgba(255,255,255,.12)}
.userbox .ulink[aria-current="page"]{background:var(--head-on-bg,#fff);color:var(--head-on-fg,#0b3c52)}
.pj-alert{border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:12px 16px;display:flex;flex-direction:column;gap:8px;font-size:14px}
.pj-alert.urg{border-color:color-mix(in srgb,var(--late) 45%,var(--line));background:color-mix(in srgb,var(--late) 8%,var(--surface))}
.pj-alert .acts{display:flex;flex-wrap:wrap;gap:8px}
.pj-ab.urg{border-color:color-mix(in srgb,var(--late) 55%,var(--line))}
.pj-ab.wrn{border-color:color-mix(in srgb,#c98a00 55%,var(--line))}
.pj-ab[aria-pressed="true"]{box-shadow:inset 0 0 0 2px var(--accent)}
.pj-pipe{display:flex;height:26px;border-radius:8px;overflow:hidden;margin-top:12px;border:1px solid var(--line);background:var(--surface-2)}
.pj-pipe i{display:block;height:100%}
.pj-pipe i+i{border-left:1px solid var(--surface)}
.pj-lg{display:flex;flex-wrap:wrap;gap:6px 8px;margin-top:10px}
.pj-lg button{display:inline-flex;align-items:center;gap:6px;min-height:36px;padding:0 10px;border:1px solid var(--line);border-radius:999px;background:var(--surface);color:var(--fg);font:inherit;font-size:13px;cursor:pointer}
.pj-lg button[aria-pressed="true"]{border-color:var(--accent);box-shadow:inset 0 0 0 1px var(--accent)}
.pj-lg i,.pj-chip i{display:inline-block;width:10px;height:10px;border-radius:3px;border:1px solid color-mix(in srgb,var(--fg) 25%,transparent)}
.pj-mini{display:inline-flex;height:10px;border-radius:4px;overflow:hidden;width:150px;background:var(--surface-2);vertical-align:middle}
.pj-mini i{display:block;height:100%}
.pj-m{height:8px;border-radius:4px;background:color-mix(in srgb,var(--st4) 18%,var(--surface));overflow:hidden;margin-top:4px}
.pj-m>i{display:block;height:100%;background:var(--st4);border-radius:4px}
.pj-chip{display:inline-flex;align-items:center;gap:6px;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;border:1px solid var(--line);background:var(--surface)}
.pj-res{display:block;margin-top:4px;font-size:12px;font-weight:600;color:var(--fg-2)}
.pj-flags{display:flex;flex-wrap:wrap;gap:4px;margin-top:4px}
.pj-flag{display:inline-block;padding:1px 8px;border-radius:6px;font-size:12px;font-weight:600;white-space:nowrap}
.pj-flag.urg{background:color-mix(in srgb,var(--late) 16%,var(--surface));color:var(--fg)}
.pj-flag.wrn{background:color-mix(in srgb,#e0a100 22%,var(--surface));color:var(--fg)}
table.pj-list{min-width:1040px}
table.pj-list td.pj-nm{min-width:300px}
table.pj-list td .small{display:block}
table.pj-list tr.sel>td{background:color-mix(in srgb,var(--accent) 7%,var(--surface))}
table.pj-deps{min-width:860px}
.pj-ed{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:10px 14px;padding:14px;border:1px solid var(--line);border-radius:10px;background:var(--surface-2)}
.pj-ed .full{grid-column:1/-1}
.pj-ed input,.pj-ed select,.pj-ed textarea{min-height:40px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--fg);font:inherit;width:100%;min-width:0}
.pj-ed fieldset{border:1px solid var(--line-2);border-radius:8px;padding:8px 12px;display:flex;flex-wrap:wrap;gap:8px 18px;align-items:flex-end;margin:0}
.pj-ed legend{font-size:12px;color:var(--fg-2);padding:0 4px}
.pj-ed fieldset>label{display:flex;align-items:center;gap:6px;font-size:14px;min-height:36px}
.pj-ed fieldset>label input{width:auto;min-height:0}
.pj-ed .acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pj-ed .acts .err{flex:1 1 100%;margin:0}
.pj-files,.pj-hist{font-size:13px;color:var(--fg-2);border-top:1px solid var(--line-2);padding-top:8px;display:flex;flex-wrap:wrap;gap:6px 14px;align-items:center}
.pj-hist{flex-direction:column;align-items:flex-start;gap:2px}
.pj-file{display:inline-flex;gap:6px;align-items:center}
.pj-files .err{flex:1 1 100%;margin:0}
.pj-alert .btn{white-space:normal;text-align:left;height:auto;min-height:36px;padding-block:6px}
.pj-ab{gap:6px}

/* ---------- รุ่น 3.5.0 เป้าจัดซื้อ ---------- */
:root{--tg-g:#0a8f0a;--tg-y:#a86f00;--tg-r:#c62828;--tg-g-bg:#e6f4e6;--tg-y-bg:#fdf3dc;--tg-r-bg:#fdeaea}
@media (prefers-color-scheme: dark){:root{--tg-g:#4cc24c;--tg-y:#e6b84a;--tg-r:#ff8a80;--tg-g-bg:#17301a;--tg-y-bg:#352a10;--tg-r-bg:#3d1b18}}
.pj-tabs{display:flex;flex-wrap:wrap;gap:6px;border-bottom:1px solid var(--line);padding-bottom:10px}
.pj-tabs button{display:inline-flex;align-items:center;min-height:44px;padding:0 16px;border-radius:999px;border:1px solid var(--line);background:var(--surface);color:var(--fg);font:inherit;font-weight:500;cursor:pointer}
.pj-tabs button[aria-selected="true"]{background:var(--accent-btn,var(--accent));border-color:var(--accent-btn,var(--accent));color:#fff;font-weight:600}
.tg-ms{display:grid;grid-template-columns:repeat(auto-fit,minmax(250px,1fr));gap:14px}
.tg-card{background:var(--surface);border:1px solid var(--line);border-radius:12px;padding:16px;display:flex;flex-direction:column;gap:6px;min-width:0}
.tg-card h3{margin:0;font-size:16px;font-weight:600}
.tg-no{font-size:12px;font-weight:600;color:var(--fg-2)}
.tg-big{font-size:28px;font-weight:600;line-height:1.2;font-variant-numeric:tabular-nums}
.tg-big small{font-size:14px;font-weight:500;color:var(--fg-2)}
.tg-bar{height:10px;border-radius:5px;background:var(--surface-2);overflow:hidden}
.tg-bar i{display:block;height:100%;border-radius:5px;background:var(--st4)}
.tg-bar i.g{background:var(--tg-g)} .tg-bar i.y{background:var(--tg-y)} .tg-bar i.r{background:var(--tg-r)}
.tg-lt,.tg-cell,.tg-st{display:inline-flex;align-items:center;gap:6px;padding:2px 10px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;align-self:flex-start;background:var(--surface-2);color:var(--fg-2)}
.tg-lt::before{content:"";width:9px;height:9px;border-radius:50%;background:currentColor}
.tg-lt.g,.tg-cell.g,.tg-st.ok{background:var(--tg-g-bg);color:var(--tg-g)} .tg-lt.y,.tg-cell.y,.tg-st.wait{background:var(--tg-y-bg);color:var(--tg-y)} .tg-lt.r,.tg-cell.r,.tg-st.no{background:var(--tg-r-bg);color:var(--tg-r)}
.tg-cell{border-radius:8px;min-width:52px;justify-content:center;font-size:13px}
.tg-late{color:var(--tg-r);font-weight:600} .tg-soon{color:var(--tg-y);font-weight:600} .tg-okc{color:var(--tg-g);font-weight:600}
table.tg-list td.tg-nx{min-width:190px}
table.tg-list td .small,table.tg-ex td .small{display:block}
td.nw{white-space:nowrap}
.tg-two{display:grid;grid-template-columns:repeat(auto-fit,minmax(340px,1fr));gap:16px}
.tg-two>.card{min-width:0}
table.tg-ex{min-width:600px}
table.tg-deps{min-width:780px}
.tg-week{white-space:pre-wrap;font-size:14px;line-height:1.7;background:var(--surface-2);border:1px solid var(--line-2);border-radius:10px;padding:12px 14px;margin-top:10px}
.tg-dec{display:flex;flex-direction:column;gap:6px;margin-top:8px}
.tg-dec input{min-height:40px;padding:6px 10px;border:1px solid var(--line);border-radius:8px;background:var(--surface);color:var(--fg);font:inherit}
.tg-dec .err{margin:0}
td .acts{display:flex;flex-wrap:wrap;gap:6px;margin-top:6px}
.tg-note{font-size:13px;font-weight:600;color:var(--fg);background:color-mix(in srgb,var(--accent) 8%,var(--surface));border:1px solid var(--line-2);border-radius:8px;padding:8px 10px}
@media (max-width:420px){.tg-two{grid-template-columns:1fr}}
table.tg-deps td .small{display:block}
table.tg-deps th[scope=row]{text-align:left}

/* ---------- รุ่น 3.6.0: P-Go + สิทธิ์ 6 ระดับ ---------- */
.brand{flex-direction:row;align-items:center;gap:10px}
.brand .pg-mark{flex:none;display:block}
.pg-bt{display:flex;flex-direction:column;line-height:1.25}
.pg-wm{font-family:'Sora','IBM Plex Sans Thai',sans-serif;font-weight:800;font-size:21px;letter-spacing:-.02em}
.pg-bt>span{font-size:13px;color:var(--head-muted)}
.auth-logo{display:flex;align-items:center;gap:14px;margin-bottom:6px}
.auth-logo .pg-wm{font-size:34px;color:var(--fg)}
.auth-logo span{display:block;font-size:15px;color:var(--fg-2)}
.rl{display:inline-block;padding:2px 9px;border-radius:999px;font-size:12px;font-weight:600;white-space:nowrap;background:var(--surface-2);color:var(--fg)}
.rl-admin{background:color-mix(in srgb,#7a3fc4 22%,var(--surface))}
.rl-exec{background:color-mix(in srgb,var(--accent) 22%,var(--surface))}
.rl-central{background:color-mix(in srgb,#22C27F 26%,var(--surface))}
.rl-head{background:color-mix(in srgb,#e8a317 26%,var(--surface))}
.rl-viewer{background:transparent;border:1px solid var(--line)}
.us-roles{display:grid;grid-template-columns:repeat(auto-fit,minmax(220px,1fr));gap:12px;margin-top:12px}
.us-role{border:1px solid var(--line);border-radius:12px;padding:12px 14px;display:flex;flex-direction:column;gap:4px;align-items:flex-start}
.us-n{font-size:24px;font-weight:600;font-variant-numeric:tabular-nums}
.us-n small{font-size:13px;font-weight:400;color:var(--fg-2)}
.us-pend{border:1px solid color-mix(in srgb,#e8a317 55%,var(--line));background:color-mix(in srgb,#e8a317 7%,var(--surface));border-radius:12px;padding:14px 16px;display:flex;flex-direction:column;gap:4px}
.us-row{display:flex;flex-wrap:wrap;gap:10px 14px;align-items:flex-end;padding:12px 0;border-top:1px solid var(--line-2)}
.us-list .us-row:first-child{border-top:0}
.us-row.off{opacity:.6}
.us-row .field{flex:0 1 220px;min-width:0}
.us-row .us-who{flex:1 1 260px;min-width:0;display:flex;flex-direction:column;gap:4px}
.us-row .us-who .field{flex:none;max-width:360px}
.us-row .us-acts{display:flex;flex-wrap:wrap;gap:8px}
.us-row .err{flex:1 1 100%;margin:0}
.us-row select,.us-row input{width:100%}
table.us-mx{min-width:820px}
table.us-mx td,table.us-mx th{text-align:center}
table.us-mx td:first-child,table.us-mx th:first-child{text-align:left}
table.us-mx td .small{display:block}
.us-y{font-weight:700;color:#0B7A4B}
@media (prefers-color-scheme: dark){.us-y{color:#4cc24c}}
.us-no{color:var(--muted)}
.pj-cert{display:flex;flex-wrap:wrap;gap:10px 16px;align-items:center;border:1px solid var(--line);background:var(--surface);border-radius:12px;padding:12px 16px}
.pj-cert-t{display:flex;flex-direction:column;flex:1 1 280px;min-width:0}
.pj-cert-ok{font-weight:600;color:#0B7A4B}
@media (prefers-color-scheme: dark){.pj-cert-ok{color:#4cc24c}}
table.pj-deps td .small{display:block}

/* ---------- รุ่น 3.7.0: เชื่อมแผนแม่บทกับรายการติดตาม ---------- */
.pl-auto{display:inline-flex;align-items:center;gap:6px;font-size:13px;font-weight:600;color:#0B7A4B}
.pl-auto::before{content:"";width:8px;height:8px;border-radius:50%;background:#22C27F}
@media (prefers-color-scheme: dark){.pl-auto{color:#4cc24c}}
table.pl-list{min-width:760px}
.pl-match{margin-top:16px;border-top:1px solid var(--line-2);padding-top:12px}
.pl-match h3{font-size:15px;margin:0 0 4px}
.pl-row{display:grid;grid-template-columns:minmax(0,1.4fr) minmax(0,1fr) auto;gap:8px 16px;align-items:center;padding:10px 0;border-top:1px solid var(--line-2)}
.pl-row .small{display:block}
.pl-line{min-width:0}
.pl-acts{display:flex;flex-wrap:wrap;gap:8px}
.pl-ok{font-weight:600;color:#0B7A4B} .pl-warn{font-weight:600;color:#8a5a00}
@media (prefers-color-scheme: dark){.pl-ok{color:#4cc24c}.pl-warn{color:#e6b84a}}
.pl-form{border:1px solid var(--line);border-radius:10px;background:var(--surface-2);padding:12px 14px;margin:4px 0 10px;display:flex;flex-direction:column;gap:10px}
.pl-cands{display:flex;flex-direction:column;max-height:360px;overflow:auto;border:1px solid var(--line-2);border-radius:8px;background:var(--surface)}
.pl-c{display:grid;grid-template-columns:auto minmax(0,1fr) auto;gap:10px;align-items:flex-start;padding:8px 10px;border-top:1px solid var(--line-2);font-size:14px;cursor:pointer}
.pl-c:first-child{border-top:0}
.pl-c input{width:18px;height:18px;margin-top:2px}
.pl-c .small{display:block}
.pl-sug{display:inline-block;padding:0 6px;border-radius:5px;font-size:11px;font-weight:600;background:color-mix(in srgb,#22C27F 22%,var(--surface))}
.pl-form .acts{display:flex;flex-wrap:wrap;gap:8px;align-items:center}
.pl-form .err{flex:1 1 100%;margin:0}
.pj-plan{display:inline-block;padding:0 7px;border-radius:6px;font-size:12px;font-weight:600;background:color-mix(in srgb,#7a3fc4 18%,var(--surface));color:var(--fg)}
@media (max-width:640px){.pl-row{grid-template-columns:1fr}}