/* ============================================================
   theme.css — ธีมกลาง modern admin ใช้ร่วมทุกหน้า (AMETTHINGS)
   ★ โหลดไฟล์นี้ "ก่อน" <style> ในแต่ละหน้าเสมอ (inline override ได้ตามต้องการ)
   ★ ค่าสี semantic (--ok/--hi/--lo/--off) ต้องตรงกับ backend/src/status.js
     + public/lib/logtable.js (STATUS_COLOR) — อย่าเปลี่ยนเฉด
   ============================================================ */
:root{
  --navy:#1e3a8a; --navy-700:#1b348030; --navy-deep:#172b6b;
  --side-w:240px;
  --bg:#f3f4f7; --surface:#ffffff; --line:#e6e8ee;
  --ink:#1b2436; --muted:#6b7280; --faint:#9aa1ad;
  --link:#2a78d6;
  --r:12px; --r-sm:9px; --pad:24px;
  --sh:0 1px 2px rgba(16,24,40,.04),0 1px 3px rgba(16,24,40,.06);
  --sh-hover:0 8px 24px rgba(16,24,40,.12);
  /* semantic — ตรงกับ backend/status.js เป๊ะ ห้ามเปลี่ยน */
  --ok:#1a9d54; --hi:#d03b3b; --lo:#2a78d6; --off:#8b93a1;
  --ok-bg:#e7f5ee; --hi-bg:#fbeaea; --lo-bg:#e9f1fc; --off-bg:#eef0f3;
  --font:'Prompt','Noto Sans Thai','Sarabun',system-ui,-apple-system,'Segoe UI',sans-serif;
}
*{margin:0;padding:0;box-sizing:border-box;font-family:var(--font);}
body{background:var(--bg);color:var(--ink);-webkit-font-smoothing:antialiased;}
.hidden{display:none!important;}
.loading{text-align:center;padding:40px;color:var(--faint);}

/* ---- shell: sidebar + content -------------------------------- */
.app{display:flex;min-height:100vh;}
.sidebar{
  width:var(--side-w);flex:0 0 var(--side-w);background:var(--navy);
  color:#dfe6f5;display:flex;flex-direction:column;position:fixed;inset:0 auto 0 0;z-index:40;
}
.side-brand{display:flex;align-items:center;gap:11px;padding:20px 20px 18px;}
/* โลโก้จริง (logo-white.png) — ไม่ต้องมีกรอบพื้นหลังแล้ว วางลอยบน navy เหมือนหน้า login */
.side-brand .logo{height:30px;display:flex;align-items:center;color:#fff;flex:0 0 auto;}
.side-brand .logo img{height:100%;width:auto;display:block;}
.side-brand .t1{font-size:15px;font-weight:600;color:#fff;letter-spacing:.3px;}
.side-brand .t2{font-size:11px;color:#9db0dd;}
.side-nav{display:flex;flex-direction:column;gap:2px;padding:8px 12px;flex:1;}
.side-item{
  display:flex;align-items:center;gap:12px;padding:11px 13px;border-radius:var(--r-sm);
  color:#c6d1ec;font-size:14px;text-decoration:none;transition:background .15s,color .15s;
}
.side-item svg{width:19px;height:19px;flex:0 0 19px;stroke:currentColor;}
.side-item:hover{background:#ffffff12;color:#fff;}
.side-item.active{background:#ffffff1f;color:#fff;font-weight:500;box-shadow:inset 3px 0 0 #7ea6ff;}
.side-foot{padding:14px 16px;border-top:1px solid #ffffff1f;font-size:13px;}
.side-foot .who{display:flex;align-items:center;gap:9px;color:#e7ecfa;margin-bottom:10px;}
.side-foot .who .av{width:28px;height:28px;border-radius:50%;background:#ffffff26;display:flex;align-items:center;justify-content:center;font-size:12px;color:#fff;flex:0 0 28px;}
.side-foot .logout{display:flex;align-items:center;gap:8px;width:100%;background:none;border:none;color:#f3b0b0;cursor:pointer;font-size:13px;padding:7px 4px;border-radius:7px;}
.side-foot .logout:hover{background:#ffffff10;}
.side-foot .logout svg{width:16px;height:16px;stroke:currentColor;}

.content{flex:1;margin-left:var(--side-w);min-width:0;display:flex;flex-direction:column;}

/* ---- topbar --------------------------------------------------- */
.topbar{
  background:var(--surface);border-bottom:1px solid var(--line);
  padding:0 var(--pad);min-height:60px;display:flex;align-items:center;gap:14px;flex-wrap:wrap;
  position:sticky;top:0;z-index:30;
}
.topbar .burger{display:none;background:none;border:none;cursor:pointer;color:var(--ink);}
.topbar .burger svg{width:24px;height:24px;stroke:currentColor;}
.topbar h1{font-size:17px;font-weight:600;margin-right:auto;}
.topbar .ws{display:inline-flex;align-items:center;gap:6px;font-size:12px;color:var(--muted);}
.topbar .ws i{width:8px;height:8px;border-radius:50%;background:#cbd0d8;display:inline-block;}
.topbar .ws.on i{background:var(--ok);box-shadow:0 0 0 3px #1a9d5422;}
.topbar select{padding:7px 11px;border:1px solid var(--line);border-radius:8px;font-size:13px;color:var(--ink);background:#fff;}
.topbar a{color:var(--link);text-decoration:none;font-size:13px;}

.main{padding:var(--pad);flex:1;}

/* ---- stat cards ---------------------------------------------- */
.stat-row{display:grid;grid-template-columns:repeat(auto-fit,minmax(200px,1fr));gap:14px;margin-bottom:20px;}
.stat{
  background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:16px 18px;
  display:flex;align-items:center;gap:14px;cursor:pointer;transition:box-shadow .18s,border-color .15s,transform .1s;
}
.stat:hover{box-shadow:var(--sh-hover);transform:translateY(-2px);}
.stat.active{border-color:var(--navy);box-shadow:0 0 0 2px #1e3a8a22;}
.stat .ic{width:44px;height:44px;border-radius:11px;display:flex;align-items:center;justify-content:center;flex:0 0 44px;}
.stat .ic svg{width:22px;height:22px;stroke:currentColor;}
.stat .ic.all{background:var(--navy-700);color:var(--navy);}
.stat .ic.ok{background:var(--ok-bg);color:var(--ok);}
.stat .ic.bad{background:var(--hi-bg);color:var(--hi);}
.stat .ic.off{background:var(--off-bg);color:var(--off);}
.stat .n{font-size:26px;font-weight:600;line-height:1;font-variant-numeric:tabular-nums;}
.stat .l{font-size:13px;color:var(--muted);margin-top:4px;}

/* ---- device grid + card -------------------------------------- */
.hint{font-size:13px;color:var(--faint);margin-bottom:12px;}
.grid{display:grid;grid-template-columns:repeat(auto-fill,minmax(260px,1fr));gap:16px;}
.card{background:var(--surface);border:1px solid var(--line);border-radius:var(--r);padding:17px;cursor:pointer;transition:box-shadow .2s,transform .1s;}
.card:hover{box-shadow:var(--sh-hover);transform:translateY(-2px);}
.card.st-high{border-color:#eab4b4;box-shadow:0 0 0 1px #d03b3b14;}
.card.st-low{border-color:#b1c7ec;box-shadow:0 0 0 1px #2a78d614;}
.card.off{opacity:.78;}
.card-head{display:flex;justify-content:space-between;align-items:flex-start;gap:8px;margin-bottom:14px;}
.card-head .name{font-size:14.5px;font-weight:600;}
.card-head .dept{font-size:12px;color:var(--faint);margin-top:1px;}
.metrics{display:flex;flex-wrap:wrap;gap:10px;margin-bottom:13px;}
.metric{flex:1;min-width:90px;background:#f6f7f9;border-radius:var(--r-sm);padding:10px 12px;}
.metric.st-high{background:var(--hi-bg);}
.metric.st-low{background:var(--lo-bg);}
.metric .mlabel{font-size:11px;color:var(--muted);margin-bottom:3px;}
.metric.st-high .mlabel{color:var(--hi);}
.metric.st-low .mlabel{color:var(--lo);}
.metric .mval{font-size:23px;font-weight:600;font-variant-numeric:tabular-nums;transition:color .3s;}
.metric.st-high .mval{color:var(--hi);}
.metric.st-low .mval{color:var(--lo);}
.metric .mval.stale{color:var(--faint);}   /* offline = ค่าล่าสุดสีจาง */
.metric .munit{font-size:12px;color:var(--faint);font-weight:400;}
.card-foot{border-top:1px solid var(--line);padding-top:10px;font-size:11.5px;color:var(--faint);display:flex;justify-content:space-between;flex-wrap:wrap;gap:4px;}
.card-foot .muted{color:var(--faint);}

/* ---- status badge / pill (4 สถานะ = STATUS_LABEL/COLOR) ------- */
.badge{font-size:11px;padding:4px 10px;border-radius:20px;display:inline-flex;align-items:center;gap:5px;white-space:nowrap;font-weight:600;}
.badge.st-normal{background:var(--ok-bg);color:var(--ok);}
.badge.st-high{background:var(--hi-bg);color:var(--hi);}
.badge.st-low{background:var(--lo-bg);color:var(--lo);}
.badge.st-offline{background:var(--off-bg);color:var(--off);}
.badge .dot{width:6px;height:6px;border-radius:50%;background:currentColor;}
/* .pill (สถานะในตาราง log) อยู่ที่ public/lib/logtable.css — ใช้ร่วม overview+logs */

/* ---- ปุ่มที่ยังกดไม่ได้ (เช่น ส่งออกตอนไม่มีข้อมูล — ดู lib/exportguard.js) ----
   .toolbtn/.primary ถูกประกาศซ้ำใน <style> ของแต่ละหน้า แต่ไม่มีหน้าไหนเขียน :disabled
   -> selector 2 ชั้นนี้ชนะ .toolbtn ชั้นเดียวเสมอ (specificity) จึงคุมได้ทุกหน้าจากที่เดียว */
.toolbtn:disabled,button.primary:disabled{opacity:.45;cursor:not-allowed;}

/* ---- responsive: sidebar → off-canvas (hamburger) ------------ */
.scrim{display:none;position:fixed;inset:0;background:#0b122a66;z-index:39;}
@media(max-width:900px){
  .sidebar{transform:translateX(-100%);transition:transform .22s;box-shadow:0 0 40px #0b122a55;}
  .sidebar.open{transform:none;}
  .content{margin-left:0;}
  .topbar .burger{display:inline-flex;}
  body.nav-open .scrim{display:block;}
}
@media(max-width:560px){:root{--pad:16px;} .metric .mval{font-size:21px;}}