/* TNI unified theme — ใช้ร่วมกันทุกหน้าของ ABRMS และ Classroom Portfolio
   โครงเดียวกันทุกหน้า: แถบเมนูหลัก TNI (ติดด้านบน) → หัวเรื่องของหน้า (กล่องสว่าง เส้นแดงซ้าย) → เนื้อหา (การ์ด/ไทล์/แท็บ ชุดเดียวกัน)
   สีจากโลโก้ Thai-Nichi: น้ำเงิน #2D368E · แดง #EC2024 · ฟอนต์ Sarabun · สีข้อมูลในกราฟคงเดิม */
:root{--tni-blue:#2D368E;--tni-blue-2:#3B46A8;--tni-blue-deep:#1F2670;--tni-red:#EC2024;
  --tni-bg:#F4F5FA;--tni-surface:#FFFFFF;--tni-surface-2:#EEF0F7;--tni-line:#D9DCEB;--tni-ink:#1B1F3B;--tni-muted:#5C6283;
  --tni-title:#2D368E;--tni-link:#2D368E;--tni-blue-soft:#E7E9F5;--tni-red-soft:#FDECEC;--tni-red-ink:#A3121A;
  --tni-note-bg:#FFF6E5;--tni-note-ink:#5A3E00;--tni-font:"Sarabun","Noto Sans Thai","Sukhumvit Set","Leelawadee UI",system-ui,sans-serif;--tni-r:10px}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]){--tni-bg:#0F1224;--tni-surface:#171B33;--tni-surface-2:#1E2340;--tni-line:#2C3257;--tni-ink:#E7E9F5;--tni-muted:#9CA1C4;
  --tni-title:#B9BFFF;--tni-link:#B9BFFF;--tni-note-bg:#2E2412;--tni-note-ink:#F3D9A4;--tni-blue-soft:#1C2250;--tni-red-soft:#3A1517;--tni-red-ink:#FFB3B5}}
:root[data-theme="dark"]{--tni-bg:#0F1224;--tni-surface:#171B33;--tni-surface-2:#1E2340;--tni-line:#2C3257;--tni-ink:#E7E9F5;--tni-muted:#9CA1C4;
  --tni-title:#B9BFFF;--tni-link:#B9BFFF;--tni-note-bg:#2E2412;--tni-note-ink:#F3D9A4;--tni-blue-soft:#1C2250;--tni-red-soft:#3A1517;--tni-red-ink:#FFB3B5}

/* ---- ชุดตัวแปรเดียว แม็ปทับตัวแปรเดิมของทุกหน้า (ABRMS: --bg/--surface/--navy/--gold… · CP: --teal/--surface-2/--r…) ---- */
html:root,html:root:not([data-theme="light"]),html:root[data-theme="dark"]{
  --bg:var(--tni-bg);--surface:var(--tni-surface);--surface2:var(--tni-surface-2);--surface-2:var(--tni-surface-2);--card:var(--tni-surface);
  --line:var(--tni-line);--line-2:var(--tni-surface-2);--ink:var(--tni-ink);--ink2:var(--tni-muted);--muted:var(--tni-muted);
  --navy:var(--tni-blue);--navy2:var(--tni-blue-2);--gold:var(--tni-red);--gold-bg:var(--tni-note-bg);--gold-ink:var(--tni-note-ink);--warnbg:var(--tni-note-bg);
  --teal:var(--tni-blue);--teal-ink:#FFFFFF;--teal-soft:var(--tni-blue-soft);--focus:var(--tni-red);
  --g0:var(--tni-surface);--g1:var(--tni-surface-2);
  --font:var(--tni-font);--body:var(--tni-font);--sans:var(--tni-font);--display:var(--tni-font);--radius:var(--tni-r);--r:8px}
html{overflow-x:clip}
.wrap,#app{max-width:1360px!important}
body{background:var(--tni-bg)!important;color:var(--tni-ink);font-family:var(--tni-font)!important}
h1,h2,h3,.card h3,.tile .v,.kpi b{font-family:var(--tni-font)}

/* ---- แถบเมนูหลัก (ทุกหน้า) ---- */
.tni-appbar{position:sticky;top:0;z-index:1000;width:100vw;margin-left:calc(50% - 50vw);margin-right:calc(50% - 50vw);box-sizing:border-box;
  display:flex;align-items:center;gap:6px 18px;flex-wrap:wrap;padding:8px max(16px,calc(50vw - 690px));
  background:var(--tni-blue);color:#fff;border-bottom:3px solid var(--tni-red);font:500 15px/1.4 var(--tni-font);box-shadow:0 2px 10px rgba(15,18,60,.18)}
.tni-appbar a{color:#fff;text-decoration:none}
.tni-appbar .tni-home{display:flex;align-items:center;flex:none;padding:2px 0}
.tni-appbar .tni-home img{height:34px;width:auto;display:block}
.tni-appbar .tni-links{display:flex;gap:2px;flex:1 1 auto;overflow-x:auto;scrollbar-width:none;min-width:0}
.tni-appbar .tni-links::-webkit-scrollbar{display:none}
.tni-appbar .tni-links a{display:inline-flex;align-items:center;gap:6px;white-space:nowrap;padding:7px 12px;border-radius:8px;opacity:.9}
.tni-appbar .tni-links a:hover{background:rgba(255,255,255,.12);opacity:1}
.tni-appbar .tni-links a.on{background:#fff;color:var(--tni-blue);opacity:1;font-weight:700}
.tni-appbar .tni-links svg{width:16px;height:16px;flex:none}
.tni-appbar .tni-user{display:flex;align-items:center;gap:10px;font-size:13px;white-space:nowrap;opacity:.95}
.tni-appbar .tni-user a{border:1px solid rgba(255,255,255,.45);border-radius:8px;padding:4px 10px}
.tni-appbar .tni-user a:hover{background:rgba(255,255,255,.12)}
@media (max-width:820px){.tni-appbar .tni-home img{height:28px}.tni-appbar .tni-links{order:3;flex-basis:100%}.tni-appbar .tni-user{margin-left:auto}.tni-appbar .tni-user .nm{display:none}}

/* ---- หัวเรื่องของหน้า: ABRMS (header.top) และ CP (#top) หน้าตาเดียวกัน ---- */
header.top,#top{background:var(--tni-surface)!important;color:var(--tni-ink)!important;border:1px solid var(--tni-line);border-left:5px solid var(--tni-red);
  border-radius:12px!important;padding:14px 20px!important;margin-top:16px!important;box-shadow:none}
header.top h1,header.top h2,#top .app-name{color:var(--tni-title)!important;font-family:var(--tni-font)!important;font-weight:700;letter-spacing:0}
header.top h1{font-size:1.35rem!important}
header.top p,header.top label,header.top .sub,header.top .small,header.top #gen,header.top div{color:var(--tni-muted)!important;opacity:1!important}
header.top b,header.top strong{color:var(--tni-ink)!important}
header.top h1,header.top h1 *,header.top > b,header.top > div > b:first-child{color:var(--tni-title)!important}
header.top > div > b:first-child{font-size:1.35rem!important}
header.top a{color:var(--tni-link)!important}
header.top select,header.top input{background:var(--tni-surface)!important;color:var(--tni-ink)!important;border:1px solid var(--tni-line)!important;border-radius:8px}
header.top option{color:var(--tni-ink);background:var(--tni-surface)}
#top .brand .mark{background:var(--tni-blue)!important;color:#fff!important}

/* ---- แท็บ · ปุ่ม · การ์ด · ไทล์ ชุดเดียวกัน ---- */
.tabs,.nav[role="tablist"],#tabs{border-bottom:2px solid var(--tni-line)!important}
.tabs button,.nav[role="tablist"] button,#tabs button{font-family:var(--tni-font)!important;color:var(--tni-muted)}
.tabs button.on,.tabs button[aria-selected="true"],.nav button[aria-selected="true"],#tabs button[aria-selected=true]{color:var(--tni-title)!important;border-bottom-color:var(--tni-red)!important}
.card,.tile,.kpi{border-radius:var(--tni-r)!important;border-color:var(--tni-line)}
.tile .v,.kpi b{color:var(--tni-title)}
.tile.good .v{color:var(--good)}.tile.warn .v{color:var(--warn)}.tile.crit .v,.tile.bad .v{color:var(--crit,var(--bad))}
.btn{border-radius:8px}
.btn.pri,.btn.primary,button.primary{background:var(--tni-blue)!important;border-color:var(--tni-blue)!important;color:#fff!important}
.btn.gold{color:#fff!important}
:focus-visible{outline-color:var(--tni-red)}
a{color:var(--tni-link)}

/* ---- แถบสถานะ sync (หน้า 1ก/1ข) ---- */
.tni-sync{display:flex;gap:10px 14px;align-items:center;flex-wrap:wrap;margin-top:12px;padding:8px 14px;border-radius:10px;background:var(--tni-blue-soft);color:var(--tni-ink);font:14px/1.4 var(--tni-font);border-left:5px solid var(--tni-blue)}
.tni-sync b{color:var(--tni-title)}.tni-sync .dot{color:var(--tni-red)}.tni-sync a{color:var(--tni-link);font-weight:600}
.tni-sync button{margin-left:auto;font:inherit;background:var(--tni-red);color:#fff;border:0;border-radius:8px;padding:4px 12px;cursor:pointer;font-weight:700}

/* ---- ส่วนท้าย ---- */
.tni-foot{display:flex;align-items:center;gap:14px;flex-wrap:wrap;margin:26px 0 8px;padding-top:14px;border-top:1px solid var(--tni-line);color:var(--tni-muted);font-size:.82rem}
.tni-foot img{height:26px;width:auto}
.tni-foot .dk{display:none}
@media (prefers-color-scheme:dark){:root:not([data-theme="light"]) .tni-foot .lt{display:none}:root:not([data-theme="light"]) .tni-foot .dk{display:inline}}
:root[data-theme="dark"] .tni-foot .lt{display:none}:root[data-theme="dark"] .tni-foot .dk{display:inline}

/* ---- หน้าเข้าสู่ระบบ (CP + ABRMS) ---- */
body > .card .mark{display:none}
.tni-login-logo,.card > img.lg{display:block;width:100%;max-width:340px;height:auto;margin:0 0 4px}
.tni-login-logo.dk,.card > img.lg.dk{display:none}
@media (prefers-color-scheme:dark){.tni-login-logo.lt,.card > img.lg.lt{display:none}.tni-login-logo.dk,.card > img.lg.dk{display:block;max-width:280px}}
body > .card{border-top:5px solid var(--tni-blue)!important;border-radius:14px}
body > .card h1{color:var(--tni-title)!important}
body > .card button:not(.g){background:var(--tni-blue)!important;border-color:var(--tni-blue)!important;color:#fff!important}

@media print{.tni-appbar{display:none}header.top,#top{-webkit-print-color-adjust:exact;print-color-adjust:exact}}
#app > .tni-appbar{margin-top:-16px}