/* Network Monitor — Industry design system tokens */
/* ธีมน้ำเงิน-ขาว: พื้นขาว โครงสร้างและ accent เป็นน้ำเงิน
   สถานะใช้สีจราจร เขียว/เหลือง/แดง เพื่อให้อ่านกราฟได้ทันที */
:root{
  --bg:#ffffff; --surface:#f4f7fb; --text:#0f2742; --muted:#5c7391;
  --divider:#c3d3e6;
  --accent:#1b4f9c; --accent-100:#e4edf9; --accent-700:#143d7a;
  --ok:#1f8a4c; --bad:#c62828; --warn:#e8a300;
  --on-accent:#ffffff;
  /* เหลือง NT — ใช้กับแถบเมนู แถบหัว และแถบวัดค่า */
  --nt:#f5a800; --nt-600:#d99400; --nt-100:#fdf1d6; --on-nt:#0f2742;
  /* สีชุดกราฟ — ต้องแยกออกจากกันได้แม้พิมพ์ขาวดำ */
  --c-in:#1b4f9c;      /* ทราฟฟิกขาเข้า — น้ำเงิน */
  --c-out:#00897b;     /* ทราฟฟิกขาออก — เขียวอมฟ้า */
  --c-lat:#7b4fa8;     /* latency — ม่วง */
  --c-loss:#c62828;    /* packet loss — แดง */
  --c-cpu:#e8a300;     /* CPU — เหลืองอำพัน */
  --c-mem:#0f766e;     /* memory — เขียวเข้ม */
  --font-h:'Barlow Condensed','Noto Sans Thai',sans-serif;
  --font-b:'Barlow','Noto Sans Thai',sans-serif;
  --mono:ui-monospace,Menlo,Consolas,monospace;
}
/* ธีมมืด: พื้นน้ำเงินเข้ม ตัวหนังสือขาว — สถานะสว่างขึ้นให้ตัดกับพื้น */
body.dark{
  --bg:#0b1b2e; --surface:#122942; --text:#eaf1f9; --muted:#93aac5; --divider:#2c4767;
  --accent:#6fa8e8; --accent-100:#16314f; --accent-700:#a9cdf5;
  --ok:#4cc47f; --bad:#ff6b6b; --warn:#ffc44d;
  --c-in:#6fa8e8; --c-out:#4dd0c4; --c-lat:#c08ae8;
  --c-loss:#ff6b6b; --c-cpu:#ffc44d; --c-mem:#4cc47f;
  --nt:#ffc44d; --nt-600:#f5a800; --nt-100:#3a2f14; --on-nt:#0b1b2e;
  --on-accent:#0b1b2e;
}
*{box-sizing:border-box}
html,body{margin:0;padding:0;background:var(--bg);color:var(--text);font-family:var(--font-b);font-size:14px}
h1,h2,h3,h4,.h{font-family:var(--font-h);font-weight:600;margin:0;letter-spacing:.01em}
a{color:var(--accent-700);text-decoration:none}
a:hover{text-decoration:underline}
button{font-family:inherit}
:focus-visible{outline:2px solid var(--accent);outline-offset:2px}
::selection{background:var(--accent-100)}
.boot{display:grid;place-items:center;height:100vh;color:var(--muted);font-family:var(--mono);font-size:12px;letter-spacing:.12em}
.mono{font-family:var(--mono)}
.kick{font-family:var(--mono);font-size:9.5px;letter-spacing:.14em;text-transform:uppercase;color:var(--muted)}
.mut{color:var(--muted)}
.sm{font-size:11.5px;line-height:1.5}

.bp{position:relative;border:1px solid var(--divider);background:transparent}
.bp>.c{position:absolute;width:7px;height:7px;color:var(--accent);pointer-events:none}
.bp>.c::before,.bp>.c::after{content:'';position:absolute;background:currentColor}
.bp>.c::before{left:3px;top:0;width:1px;height:7px}
.bp>.c::after{top:3px;left:0;height:1px;width:7px}
.bp>.tl{left:-4px;top:-4px}.bp>.tr{right:-4px;top:-4px}
.bp>.bl{left:-4px;bottom:-4px}.bp>.br{right:-4px;bottom:-4px}

.btn{display:inline-flex;align-items:center;gap:7px;border:1px solid var(--divider);background:transparent;color:var(--text);
  padding:8px 13px;font-family:var(--font-h);font-weight:600;font-size:14px;cursor:pointer;transition:background .12s}
.btn:hover{background:var(--accent-100)}
.btn[disabled]{opacity:.45;cursor:not-allowed}
.btn-p{background:var(--accent);border-color:var(--accent);color:var(--on-accent)}
.btn-p:hover{filter:brightness(1.08);background:var(--accent)}
.btn-g{border-color:transparent;padding:5px 8px;font-size:13px}
.btn-d{color:var(--bad)}
.btn-d:hover{background:color-mix(in srgb,var(--bad) 10%,transparent)}
.btn-sm{padding:5px 9px;font-size:12.5px}
.btn-bad{background:var(--bad);border-color:var(--bad);color:#fff}
body.dark .btn-bad{color:#fff}

.f{display:flex;flex-direction:column;gap:5px}
.f>label{font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted)}
.inp{border:1px solid var(--divider);background:var(--surface);color:var(--text);padding:8px 10px;font-family:var(--font-b);font-size:13.5px;width:100%;min-height:34px}
.inp:focus{outline:none;border-color:var(--accent)}
.hint{font-size:10.5px;line-height:1.5;color:var(--muted)}

.tag{display:inline-block;padding:2px 6px;font-family:var(--mono);font-size:10px;letter-spacing:.06em;border:1px solid var(--divider);color:var(--muted)}
.tag-a{background:var(--accent-100);border-color:transparent;color:var(--accent-700)}
.tag-ok{color:var(--ok);border-color:var(--ok)}
.tag-bad{color:var(--bad);border-color:var(--bad)}
.tag-warn{color:var(--warn);border-color:var(--warn)}

table.t{width:100%;border-collapse:collapse}
table.t th{text-align:left;font-family:var(--mono);font-size:9.5px;letter-spacing:.13em;text-transform:uppercase;color:var(--muted);
  padding:9px 10px;border-bottom:1.5px solid var(--text);white-space:nowrap}
table.t td{padding:9px 10px;border-bottom:1px solid var(--divider);font-size:13px;vertical-align:top}
table.t tbody tr:hover{background:var(--accent-100)}
table.t tr.arch{opacity:.5}
.wrap{overflow-x:auto}
.acts-cell{text-align:right;white-space:nowrap}

.shell{display:grid;grid-template-columns:236px 1fr;min-height:100vh}
aside{border-right:1px solid var(--divider);background:var(--surface);display:flex;flex-direction:column;padding:16px 0;gap:16px;position:sticky;top:0;height:100vh}
.brand{display:flex;align-items:center;gap:10px;padding:0 16px}
.mark{width:28px;height:28px;background:var(--accent);color:#fff;display:grid;place-items:center;font-family:var(--font-h);font-weight:700;font-size:13px}
nav{display:flex;flex-direction:column;overflow-y:auto;flex:1}
nav button{display:flex;align-items:center;gap:9px;width:100%;padding:8px 16px;background:none;border:none;border-left:2px solid transparent;
  color:var(--text);cursor:pointer;text-align:left;font-family:var(--font-h);font-weight:600;font-size:14.5px}
nav button:hover{background:var(--accent-100)}
nav button.on{background:var(--accent-100);border-left-color:var(--accent);color:var(--accent-700)}
nav button .n{font-family:var(--mono);font-size:9.5px;opacity:.6;width:15px;flex:none}
nav button .bd{margin-left:auto;font-family:var(--mono);font-size:9.5px;color:var(--bad);border:1px solid var(--bad);padding:1px 4px}
.me{display:flex;align-items:center;gap:9px;padding:12px 14px 0;border-top:1px solid var(--divider);margin:0 12px}
main{min-width:0;display:flex;flex-direction:column}
header.top{position:sticky;top:0;z-index:30;display:flex;align-items:center;gap:12px;padding:11px 20px;
  border-bottom:1px solid var(--divider);background:color-mix(in srgb,var(--bg) 93%,transparent);backdrop-filter:blur(8px)}
.body{padding:18px 20px 40px;display:flex;flex-direction:column;gap:16px}
.row{display:flex;align-items:center;gap:9px;flex-wrap:wrap}
.spacer{margin-left:auto}
.grid4{display:grid;grid-template-columns:repeat(4,1fr);gap:1px;background:var(--divider);border:1px solid var(--divider)}
.grid3{display:grid;grid-template-columns:repeat(3,1fr);gap:1px;background:var(--divider);border:1px solid var(--divider)}
.grid4>div,.grid3>div,.grid2>div{background:var(--bg);padding:13px 15px}
.grid2{display:grid;grid-template-columns:repeat(2,1fr);gap:1px;background:var(--divider);border:1px solid var(--divider)}
.kpi b{display:block;font-family:var(--font-h);font-size:30px;line-height:1.15;font-weight:600}
.card>.hd{display:flex;align-items:center;gap:10px;padding:10px 13px;border-bottom:1px solid var(--divider)}
.card>.bd{padding:13px}
.two{display:grid;grid-template-columns:1.5fr 1fr;gap:15px;align-items:start}
.three{display:grid;grid-template-columns:180px 1fr 250px;gap:14px;align-items:start}
@media(max-width:1100px){.two,.three{grid-template-columns:1fr}.grid4{grid-template-columns:repeat(2,1fr)}}
.list>div{display:flex;gap:10px;padding:8px 13px;border-bottom:1px solid var(--divider)}
.list>div:last-child{border-bottom:none}

.dot{width:7px;height:7px;flex:none;display:inline-block}
.bar{height:4px;background:color-mix(in srgb,var(--text) 10%,transparent)}
.bar>i{display:block;height:100%}

.back{position:fixed;inset:0;background:color-mix(in srgb,var(--text) 45%,transparent);display:grid;place-items:center;z-index:200;padding:20px}
.dlg{background:var(--bg);width:100%;max-width:680px;max-height:88vh;overflow:auto;padding:16px 18px;display:flex;flex-direction:column;gap:13px}
.dlg .fs{display:grid;grid-template-columns:1fr 1fr;gap:11px}
.dlg .fs .full{grid-column:1/-1}
.acts{display:flex;justify-content:flex-end;gap:8px;padding-top:4px}
.alertbox{display:flex;gap:11px;padding:10px 13px;border:1px solid var(--bad);border-left-width:3px;background:color-mix(in srgb,var(--bad) 7%,transparent);font-size:12px;line-height:1.55}
.warnbox{display:flex;gap:11px;padding:10px 13px;border:1px solid var(--warn);border-left-width:3px;background:color-mix(in srgb,var(--warn) 8%,transparent);font-size:12px;line-height:1.55}

#toast{position:fixed;right:16px;bottom:16px;z-index:400;display:flex;flex-direction:column;gap:8px}
#toast>div{background:var(--surface);border:1px solid var(--divider);border-left-width:3px;padding:10px 13px;font-size:12.5px;max-width:340px;box-shadow:0 6px 20px rgba(0,0,0,.15)}
#toast>div.ok{border-left-color:var(--ok)}
#toast>div.bad{border-left-color:var(--bad)}

.login{min-height:100vh;display:grid;grid-template-columns:1.1fr .9fr}
@media(max-width:900px){.login{grid-template-columns:1fr}.login .side{display:none}}
.login .side{position:relative;padding:40px 44px;display:flex;flex-direction:column;justify-content:space-between;border-right:1px solid var(--divider);overflow:hidden}
.login .side .g{position:absolute;inset:0;opacity:.5;
  background-image:repeating-linear-gradient(90deg,var(--divider) 0 1px,transparent 1px 54px),repeating-linear-gradient(0deg,var(--divider) 0 1px,transparent 1px 54px)}
.login .panel{background:var(--surface);display:flex;flex-direction:column;justify-content:center;padding:40px 44px}
.login .panel .box{max-width:340px;width:100%;margin:0 auto;display:flex;flex-direction:column;gap:18px}

#map{width:100%;height:100%;min-height:400px}
.leaflet-container{background:#dfe3e6;font-family:var(--font-b)}
body.dark .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) saturate(.55) brightness(.92)}
svg.topo{display:block;background-image:radial-gradient(color-mix(in srgb,var(--text) 14%,transparent) 1px,transparent 1px);background-size:22px 22px;user-select:none;cursor:default}

/* SNMP drawer — เลื่อนจากขวา */
.drawer-back{position:fixed;inset:0;background:color-mix(in srgb,var(--text) 40%,transparent);z-index:210;display:flex;justify-content:flex-end}
.drawer{width:min(620px,100%);height:100%;background:var(--bg);border-left:1px solid var(--divider);display:flex;flex-direction:column;box-shadow:-8px 0 28px rgba(0,0,0,.18);animation:slideIn .18s ease-out}
@keyframes slideIn{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
.drawer-hd{display:flex;align-items:flex-start;gap:12px;padding:16px 20px 13px;border-bottom:1px solid var(--divider)}
.drawer-bd{padding:16px 20px 40px;overflow-y:auto;flex:1}

/* แถบเลือก Project Site — slider */
.strip .strip-row{display:flex;align-items:center;gap:9px;padding:9px 11px;min-width:0}
.strip-q{width:150px;min-height:30px;font-size:12.5px;flex:none}
.strip-track{display:flex;gap:6px;overflow-x:auto;scroll-behavior:smooth;flex:1;min-width:0;padding:2px 0}
.strip-track::-webkit-scrollbar{height:5px}
.strip-track::-webkit-scrollbar-thumb{background:color-mix(in srgb,var(--text) 25%,transparent)}
.strip-arrow{flex:none;padding:3px 9px;font-size:16px;line-height:1}
.chip{display:inline-flex;align-items:center;gap:6px;flex:none;white-space:nowrap;cursor:pointer;
  border:1px solid var(--divider);background:transparent;color:var(--text);
  padding:5px 9px;font-family:var(--mono);font-size:10.5px;letter-spacing:.06em;transition:background .12s}
.chip:hover{background:var(--accent-100)}
.chip.on{background:var(--accent);border-color:var(--accent);color:#fff}
.chip.on .dot{background:#fff !important}
.chip-n{padding:0 4px;border-left:1px solid color-mix(in srgb,currentColor 35%,transparent);
  margin-left:2px;opacity:.75}
@media(max-width:900px){.strip-q{width:110px}.strip-arrow{display:none}}

/* ตรึงคอลัมน์ Action ไว้ขวาสุด — ตารางกว้างแค่ไหนก็กดปุ่มได้ */
table.t th.acts-cell, table.t td.acts-cell{position:sticky;right:0;z-index:2;
  background:var(--bg);box-shadow:-8px 0 10px -8px rgba(0,0,0,.28)}
table.t tbody tr:hover td.acts-cell{background:var(--accent-100)}
table.t th.acts-cell{background:var(--bg)}
table.t td.acts-cell .btn{padding:4px 7px;font-size:12px}
/* ตารางแน่นขึ้น ลดโอกาสล้นจอ */
table.t th, table.t td{padding:8px 9px}
.wrap{overflow-x:auto;max-width:100%}
main{overflow-x:hidden}
header.top{flex-wrap:wrap}

/* แผงอ่านค่า SNMP — เลื่อนเข้ามาจากขวา */
.drawer-back{position:fixed;inset:0;background:color-mix(in srgb,var(--text) 38%,transparent);z-index:210;display:flex;justify-content:flex-end}
.drawer{width:min(620px,100%);height:100%;background:var(--bg);border-left:1px solid var(--divider);
  display:flex;flex-direction:column;box-shadow:-14px 0 40px rgba(0,0,0,.22);animation:slideIn .18s ease-out}
@keyframes slideIn{from{transform:translateX(24px);opacity:.6}to{transform:none;opacity:1}}
.drawer-hd{display:flex;align-items:flex-start;gap:12px;padding:15px 18px;border-bottom:1px solid var(--divider);flex:none}
.drawer-bd{flex:1;overflow-y:auto;padding:14px 18px 24px}
.drawer-ft{display:flex;align-items:center;gap:8px;padding:11px 18px;border-top:1px solid var(--divider);flex:none;background:var(--surface)}
.drawer .g1,.drawer .g2{display:grid;gap:1px;background:var(--divider);border:1px solid var(--divider);margin-bottom:9px}
.drawer .g2{grid-template-columns:1fr 1fr}
.drawer .g1{grid-template-columns:1fr}
.hops{display:flex;flex-direction:column;gap:1px;background:var(--divider);border:1px solid var(--divider)}
.hops>div{background:var(--bg);padding:7px 11px;display:flex;align-items:center;gap:11px}
.hop-n{font-family:var(--mono);font-size:10px;color:var(--muted);width:12px;flex:none}
.kvlist{display:flex;flex-direction:column;gap:1px;background:var(--divider);border:1px solid var(--divider)}
.kvlist>div{background:var(--bg);padding:8px 11px;display:flex;align-items:center;gap:10px}
.drawer table.t th{padding:7px 8px}
.drawer table.t td{padding:6px 8px;font-size:12px}
@media(max-width:700px){.drawer{width:100%}.drawer .g2{grid-template-columns:1fr}}

/* เส้นแบ่งคอลัมน์ — อ่านตารางกว้างได้ง่ายขึ้น */
table.t th + th,
table.t td + td { border-left: 1px solid var(--divider); }
table.t th { background: color-mix(in srgb, var(--text) 4%, var(--bg)); }
table.t td.acts-cell { border-left: 2px solid var(--divider); }
body.dark table.t th { background: color-mix(in srgb, var(--text) 7%, var(--bg)); }
/* หัวตารางตรึงไว้เมื่อเลื่อนดูรายการยาว */
.wrap { max-height: calc(100vh - 300px); overflow: auto; }
table.t thead th { position: sticky; top: 0; z-index: 5; }
.drawer .wrap { max-height: none; }
.drawer table.t thead th { position: static; }

/* มุมมองการ์ด */
.cards{display:grid;grid-template-columns:repeat(auto-fill,minmax(280px,1fr));gap:13px}
.devcard{padding:12px 14px;background:var(--bg)}
.devcard.on{background:var(--accent-100)}
.selbar{background:var(--accent-100);border-color:var(--accent)}
/* ผลลัพธ์ ping / traceroute */
.termout{background:var(--surface);border:1px solid var(--divider);border-left:3px solid var(--accent);
  padding:11px 13px;font-size:11.5px;line-height:1.65;white-space:pre-wrap;word-break:break-all;
  max-height:340px;overflow:auto;margin:0}
.ok-box{display:flex;gap:11px;padding:10px 13px;border:1px solid var(--ok);border-left-width:3px;
  background:color-mix(in srgb,var(--ok) 8%,transparent);font-size:12px;line-height:1.55}
label.btn{cursor:pointer}

/* SD-WAN: การ์ดต่อเส้น */
.wancards{display:grid;grid-template-columns:repeat(auto-fill,minmax(330px,1fr));gap:13px}
.wancard{padding:12px 14px;background:var(--bg)}
.wancard.bad{border-left:3px solid var(--bad)}
.wancard.warn{border-left:3px solid var(--warn)}
.wancard.off{opacity:.55}
.g2sm{display:grid;grid-template-columns:1fr 1fr;gap:1px;background:var(--divider);border:1px solid var(--divider)}
.g2sm>div{background:var(--bg);padding:7px 9px}

/* topology: กรอบผังเลื่อนได้เมื่อ zoom */
.topowrap{padding:0;overflow:auto;max-height:calc(100vh - 230px)}

/* Location: แผนที่ + panel ข้าง */
.loc2{display:grid;grid-template-columns:1fr 340px;gap:13px;align-items:stretch;
  height:calc(100vh - 210px);min-height:520px}
.loc2>*{min-height:0;overflow:hidden}
.loc2>div:last-child{overflow-y:auto}
@media(max-width:1000px){.loc2{grid-template-columns:1fr;height:auto}
  .loc2>div:first-child{height:460px}}
#map.map-invert .leaflet-tile-pane{filter:invert(1) hue-rotate(180deg) saturate(.5) brightness(.92)}
.mk{background:none!important;border:none!important}
.mk-label{position:absolute;top:-2px;white-space:nowrap;font:600 10px/1.4 var(--mono);
  color:#111;background:rgba(255,255,255,.86);padding:1px 4px}
.mk-label b{font-weight:700}
body.dark .mk-label{color:#111}
/* วงแหวนกระจายออกจากหมุด — บอกตำแหน่งไซต์แม้จุดเล็ก */
.mk-pulse{position:absolute;border:1.5px solid;border-radius:50%;
  animation:mkPulse 1.9s ease-out infinite;pointer-events:none}
@keyframes mkPulse{0%{transform:scale(.4);opacity:.9}70%{opacity:.18}100%{transform:scale(1.3);opacity:0}}
/* จุดกลางเป็นวงกลม — ไซต์ที่มีปัญหาจะเต้นเข้า-ออกด้วย */
.mk-dot{position:relative;border-radius:50%;border:2px solid #fff;
  box-shadow:0 0 0 1px rgba(0,0,0,.35);transition:transform .15s}
.mk-beat{animation:mkBeat 1.8s ease-in-out infinite}
@keyframes mkBeat{0%,100%{transform:scale(1);opacity:1}50%{transform:scale(.72);opacity:.5}}
.leaflet-marker-icon:hover .mk-dot{transform:scale(1.18)}
@media (prefers-reduced-motion:reduce){
  .mk-pulse,.mk-beat{animation:none}
  .mk-pulse{opacity:.3;transform:scale(1)}
}
.leaflet-control-scale-line{font-family:var(--mono);font-size:10px}

/* login: จัดสามแถว — ปุ่มธีมบน, กล่องกลาง, บรรทัดท้ายล่าง */
.login .panel{justify-content:space-between;gap:18px}
.login .panel .box{margin:auto 0}
.loginstats{position:relative;display:grid;grid-template-columns:repeat(3,minmax(0,150px));
  gap:1px;background:var(--divider);border:1px solid var(--divider)}
.loginbtn{display:block}
.loginbtn .btn{width:100%}
@media(max-width:900px){.loginstats{grid-template-columns:repeat(3,1fr)}}

/* โลโก้ National Telecom — ธีมมืดกลับค่าความสว่างของส่วนตัวอักษรเทาเข้ม */
body.dark .login .side img[alt="National Telecom"]{filter:brightness(0) invert(1) opacity(.92)}

/* SD-WAN: บล็อกไซต์ + ตารางเส้น WAN */
.sitewan{padding:0}
table.wantable th{font-size:9px;letter-spacing:.12em;padding:8px 10px}
table.wantable td{padding:10px;vertical-align:middle}
table.wantable tbody tr:last-child td{border-bottom:none}

/* ป้ายสถานะ: สีจราจร + พื้นอ่อน ให้เห็นชัดทั้งในตารางและการ์ด */
.tag-ok{border-color:var(--ok);color:var(--ok);
  background:color-mix(in srgb,var(--ok) 12%,transparent)}
.tag-bad{border-color:var(--bad);color:var(--bad);font-weight:600;
  background:color-mix(in srgb,var(--bad) 12%,transparent)}
.tag-warn{border-color:var(--warn);color:color-mix(in srgb,var(--warn) 78%,var(--text));
  background:color-mix(in srgb,var(--warn) 15%,transparent)}
/* แถบวัดค่า: ให้เห็นขอบเสมอแม้ค่าน้อย */
.bar{box-shadow:inset 0 0 0 1px var(--divider)}

/* กล่องแก้ไขชุด OID */
.dlg.wide{max-width:900px}
.oidrow{padding:11px 13px;background:var(--bg)}

/* แถบสถานะ service บนหน้า Device */
.svcbar{background:var(--surface)}

/* ===== แถบเมนูและบาร์สีเหลือง NT ===== */
/* เมนูข้าง: พื้นเหลือง ตัวหนังสือน้ำเงินเข้ม — ตัดกับพื้นขาวของเนื้อหา */
aside{background:var(--nt);border-right-color:var(--nt-600)}
aside .brand{border-bottom:1px solid color-mix(in srgb,var(--on-nt) 18%,transparent);
  padding-bottom:12px}
aside .brand .h,aside .brand .kick{color:var(--on-nt)}
aside .mark{background:var(--on-nt);color:var(--nt)}
nav button{color:var(--on-nt);border-left-color:transparent}
nav button:hover{background:color-mix(in srgb,var(--on-nt) 10%,transparent)}
nav button.on{background:var(--on-nt);color:var(--nt);border-left-color:var(--on-nt)}
nav button.on .n{opacity:.85}
nav button .n{color:var(--on-nt);opacity:.55}
nav button.on .n{color:var(--nt)}
nav button .bd{color:var(--bad);background:var(--bg);border-color:var(--bad)}
aside .me{border-top-color:color-mix(in srgb,var(--on-nt) 20%,transparent)}
aside .me,aside .me .kick,aside .me .mut{color:var(--on-nt)}
aside .me>div:first-child{border-color:color-mix(in srgb,var(--on-nt) 35%,transparent);
  color:var(--on-nt)}
aside .btn{border-color:color-mix(in srgb,var(--on-nt) 30%,transparent);color:var(--on-nt)}
aside .btn:hover{background:color-mix(in srgb,var(--on-nt) 12%,transparent)}
body.dark aside{background:var(--nt);border-right-color:var(--nt-600)}

/* แถบหัวหน้าจอ: เส้นเหลืองหนาใต้แถบ */
header.top{border-bottom:2px solid var(--nt)}

/* แถบวัดค่าเริ่มต้นเป็นเหลือง NT (กราฟยังใช้สีเฉพาะของตัวเอง) */
.bar>i{background:var(--nt)}

/* ปุ่มหลัก: เหลือง NT ตัวหนังสือน้ำเงินเข้ม */
.btn-p{background:var(--nt);border-color:var(--nt-600);color:var(--on-nt)}
.btn-p:hover{background:var(--nt-600)}

/* หน้า login: แผงซ้ายเป็นเหลือง */
.login .side{background:var(--nt);border-right-color:var(--nt-600)}
.login .side .g{opacity:.22}
.login .side,.login .side .h,.login .side .kick,.login .side .mut{color:var(--on-nt)}

/* Dark theme · หน้า login: ข้อความบนแผงเหลืองต้องเป็นสีเข้มเสมอ
   (โทเคน --text เป็นสีอ่อนในธีมมืด จึงจมหายไปบนพื้นเหลือง) */
body.dark .login .side,
body.dark .login .side .h,
body.dark .login .side h1,
body.dark .login .side p,
body.dark .login .side .kick,
body.dark .login .side .mut,
body.dark .login .side .sm,
body.dark .login .side b,
body.dark .login .side span,
body.dark .login .side div{color:var(--on-nt)}
/* กล่องสถิติสามช่องล่าง (.loginstats): พื้นเข้ม — ตัวเลขและป้ายต้องเป็นสีขาว */
body.dark .login .side .loginstats,
body.dark .login .side .loginstats *{color:#ffffff}
/* บรรทัด rev และ ONLINE 24H ใช้ --accent-700 ซึ่งจางบนพื้นเหลือง */
body.dark .login .side .kick{color:color-mix(in srgb,var(--on-nt) 78%,transparent)}
body.dark .login .side .loginstats .kick{color:#ffffff}

/* Light theme · เมนูข้าง: ตัวหนังสือบนพื้นเหลืองเป็นสีขาว ตามที่ผู้ใช้กำหนด
   (เมนูที่เลือกอยู่พื้นน้ำเงินเข้ม จึงคงตัวหนังสือเหลืองไว้ให้ตัดกัน) */
body:not(.dark) aside,
body:not(.dark) aside .brand .h,
body:not(.dark) aside .brand .kick,
body:not(.dark) nav button,
body:not(.dark) nav button .n,
body:not(.dark) aside .me,
body:not(.dark) aside .me .kick,
body:not(.dark) aside .me .mut,
body:not(.dark) aside .me>div:first-child,
body:not(.dark) aside .btn,
body:not(.dark) aside .kick{color:#ffffff}
body:not(.dark) aside .mark{background:var(--on-nt);color:#ffffff}
body:not(.dark) nav button .n{opacity:.7}
body:not(.dark) nav button.on,
body:not(.dark) nav button.on .n{color:var(--nt)}
body:not(.dark) aside .me>div:first-child{border-color:rgba(255,255,255,.5)}
body:not(.dark) aside .btn{border-color:rgba(255,255,255,.45)}
body:not(.dark) aside .btn:hover{background:rgba(255,255,255,.18)}
body:not(.dark) aside .brand{border-bottom-color:rgba(255,255,255,.35)}
body:not(.dark) aside .me{border-top-color:rgba(255,255,255,.35)}