/* ═══════════════════════════════════════════════════════════════════════════
   TSCWORLD AI™ — Super Admin module (หน้า 115–134)
   โหลดหลัง esg.css เสมอ · ใช้ระบบโทนสีเดิม (.c-* ตั้งค่า --c)
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. GRID ────────────────────────────────────────────────────────── */
.g-sa1{display:grid;grid-template-columns:minmax(0,1.15fr) minmax(0,1.2fr) minmax(0,1fr);gap:16px}
.g-sa2{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}

/* ── 2. ป้ายเลขหน้าในหัวเรื่อง ──────────────────────────────────────── */
.aimode--sa{background:rgba(126,151,188,.16);color:var(--tx-3);border-color:var(--line-soft)}

/* ── 3. ป้ายสถานะระบบบนแถบบน ────────────────────────────────────────── */
.sysok{display:flex;align-items:center;gap:9px;padding:6px 12px;border-radius:11px;
  border:1px solid var(--line-soft);background:var(--bg-tile)}
.sysok svg{stroke:#2ED47A;fill:none;stroke-width:2;flex-shrink:0}
.sysok b{display:block;font-size:9.5px;font-weight:600;color:var(--tx-4)}
.sysok i{display:block;font-style:normal;font-size:11px;font-weight:700;color:#2ED47A}

/* ── 4. องค์ประกอบสุขภาพระบบรอบวงแหวน ───────────────────────────────── */
.hcomp{display:grid;grid-template-columns:repeat(3,minmax(0,1fr));gap:10px}
.hcomp article{padding:11px 10px;border-radius:11px;text-align:center;
  border:1px solid var(--line-soft);background:var(--bg-tile);border-top:2px solid var(--c,#2ED47A)}
.hcomp__ic{display:grid;place-items:center;width:28px;height:28px;margin:0 auto 7px;border-radius:9px;
  background:color-mix(in srgb,var(--c,#2ED47A) 16%,transparent)}
.hcomp__ic svg{stroke:var(--c,#2ED47A);fill:none;stroke-width:1.8}
.hcomp__k{font-size:10px;color:var(--tx-3);line-height:1.3}
.hcomp__v{font-size:15px;font-weight:800;color:var(--c,var(--tx));margin-top:4px;font-variant-numeric:tabular-nums}
.hcomp__s{font-size:9px;color:var(--tx-4);margin-top:2px}

/* ── 5. รายการแจ้งเตือนเรียลไทม์ ────────────────────────────────────── */
.alrt{display:flex;align-items:flex-start;gap:10px;padding:11px 10px;border-radius:11px;margin-bottom:8px;
  border:1px solid var(--line-soft);background:var(--bg-tile);border-left:3px solid var(--c,#3B6BFF)}
.alrt__ic{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;flex-shrink:0;
  background:color-mix(in srgb,var(--c,#3B6BFF) 16%,transparent)}
.alrt__ic svg{stroke:var(--c,#3B6BFF);fill:none;stroke-width:1.8}
.alrt__b{flex:1;min-width:0}
.alrt__n{font-size:11.5px;font-weight:600;color:var(--tx-2);line-height:1.35}
.alrt__s{font-size:10px;color:var(--tx-4);margin-top:2px}
.alrt__r{display:flex;flex-direction:column;align-items:flex-end;gap:5px;flex-shrink:0}
.alrt__t{font-size:9.5px;color:var(--tx-4);white-space:nowrap;font-variant-numeric:tabular-nums}
.alrt__lv{font-size:8.5px;font-weight:800;letter-spacing:.4px;padding:2px 7px;border-radius:5px;
  color:var(--c,#3B6BFF);background:color-mix(in srgb,var(--c,#3B6BFF) 16%,transparent)}

/* ── 6. แถบทรัพยากรระบบ ─────────────────────────────────────────────── */
.res{display:grid;gap:11px}
.res__r{display:grid;grid-template-columns:minmax(0,1fr) 92px 40px;align-items:center;gap:10px}
.res__k{font-size:11.5px;color:var(--tx-2)}
.res__t{height:8px;border-radius:99px;background:var(--bg-input);overflow:hidden}
.res__t i{display:block;height:100%;border-radius:99px;background:var(--c,#2ED47A);transition:width .8s var(--ease)}
.res__v{font-size:11.5px;font-weight:800;color:var(--tx-2);text-align:right;font-variant-numeric:tabular-nums}

/* ── 7. แถบทางลัดด้านล่าง ───────────────────────────────────────────── */
.qbar{display:grid;grid-template-columns:repeat(10,minmax(0,1fr));gap:11px}
.qbar a{display:flex;align-items:center;gap:9px;padding:12px 11px;border-radius:12px;text-decoration:none;
  border:1px solid var(--line-soft);background:var(--bg-tile);transition:all .2s var(--ease)}
.qbar a:hover{border-color:var(--c,var(--line-hot));transform:translateY(-3px)}
.qbar__ic{display:grid;place-items:center;width:30px;height:30px;border-radius:9px;flex-shrink:0;
  background:color-mix(in srgb,var(--c,#3B6BFF) 16%,transparent)}
.qbar__ic svg{stroke:var(--c,#3B6BFF);fill:none;stroke-width:1.8}
.qbar__n{font-size:10.5px;font-weight:700;color:var(--tx-2);line-height:1.25}
.qbar__s{font-size:9px;color:var(--tx-4);margin-top:2px}

/* ── 8. ตารางอันดับแบบเรียบ ─────────────────────────────────────────── */
.rank2{display:grid;gap:7px}
.rank2 li{display:flex;align-items:center;gap:10px;font-size:11.5px;color:var(--tx-2)}
.rank2 b{display:grid;place-items:center;width:20px;height:20px;border-radius:6px;flex-shrink:0;
  font-size:10px;font-weight:800;color:var(--tx-3);background:var(--bg-input)}
.rank2 span{flex:1;min-width:0;overflow:hidden;text-overflow:ellipsis;white-space:nowrap}
.rank2 em{font-style:normal;font-weight:700;font-variant-numeric:tabular-nums;color:var(--tx);flex-shrink:0}

/* ── 9. RESPONSIVE ──────────────────────────────────────────────────── */
@media (max-width:1600px){ .qbar{grid-template-columns:repeat(5,minmax(0,1fr))} }
@media (max-width:1400px){ .g-sa1{grid-template-columns:minmax(0,1fr) minmax(0,1fr)} .g-sa2{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:900px){ .hcomp{grid-template-columns:repeat(2,minmax(0,1fr))} .qbar{grid-template-columns:repeat(3,minmax(0,1fr))} }
@media (max-width:640px){
  .g-sa1,.g-sa2{grid-template-columns:minmax(0,1fr)}
  .qbar{grid-template-columns:repeat(2,minmax(0,1fr))}
  .sysok{display:none}
}