*{box-sizing:border-box;margin:0;padding:0}

/* ============ พื้นหลังหน้าเว็บ: แสงเรือง + ลายตารางจุด ============ */
body{
  background:
    radial-gradient(circle at 10% 15%, rgba(53,182,255,.07), transparent 45%),
    radial-gradient(circle at 90% 85%, rgba(53,182,255,.06), transparent 45%),
    url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='26' height='26'%3E%3Ccircle cx='2' cy='2' r='1.2' fill='%230e2c4d'/%3E%3C/svg%3E"),
    #040a16;
  color:#eaf6ff;font-family:'Kanit',sans-serif;padding:20px;
  overflow-x:hidden;
}

/* ============ แถบปุ่มควบคุม (ไม่ติดในรูป Export) ============ */
.toolbar{max-width:1150px;margin:0 auto 14px;display:flex;gap:10px;align-items:center}
.last-update{font-size:12px;color:#7fa8cc;margin-right:auto}
button{cursor:pointer;border:none;border-radius:8px;padding:10px 16px;font-family:inherit;font-weight:600}
.export-btn{background:#f7b731;color:#3a2404}
.file-btn{background:#35b6ff;color:#01324d;padding:10px 16px;border-radius:8px;cursor:pointer;font-weight:600}

/* ============ Dashboard ============ */
#dashboard{
  position:relative;overflow:hidden;
  width:1150px;margin:0 auto;
  background:
    radial-gradient(900px 420px at 75% -10%, rgba(53,182,255,.10), transparent 60%),
    repeating-linear-gradient(0deg,  rgba(53,182,255,.03) 0 1px, transparent 1px 28px),
    repeating-linear-gradient(90deg, rgba(53,182,255,.03) 0 1px, transparent 1px 28px),
    linear-gradient(180deg,#08152b,#040a16);
  border:1px solid #123a5c;border-radius:14px;padding:22px;
}

/* ลายวงจรมุมบนขวา / ล่างซ้าย */
.deco{position:absolute;width:240px;height:150px;pointer-events:none;opacity:.4;z-index:2}
.deco-tr{top:8px;right:10px}
.deco-bl{bottom:8px;left:10px;transform:rotate(180deg)}

/* ============ ส่วนหัวรายงาน ============ */
.dash-header{display:flex;align-items:center;gap:14px;border-bottom:2px solid #35b6ff;
  padding-bottom:12px;margin-bottom:16px}
.logo{height:76px;width:auto;object-fit:contain;flex-shrink:0;
  filter:drop-shadow(0 0 10px rgba(126,240,255,.5))}
.title{flex-shrink:0}
.title h1{font-size:22px;line-height:1.3;white-space:nowrap;
  text-shadow:0 0 14px rgba(126,240,255,.45)}
.header-icons{margin-left:auto;font-size:30px;display:flex;gap:12px;
  white-space:nowrap;flex-shrink:0;filter:hue-rotate(160deg)}
.subtitle{text-align:right;color:#7ef0ff;font-weight:600;
  white-space:nowrap;flex-shrink:0;font-size:17px;line-height:1.5;
  text-shadow:0 0 10px rgba(126,240,255,.4)}

/* ============ แผงข้อมูล (Panel) + มุมกรอบ HUD ============ */
.panel{
  position:relative;min-width:0;
  background:rgba(10,26,51,.85);
  border:1px solid #1e4976;border-radius:10px;padding:14px;
  box-shadow:inset 0 0 22px rgba(53,182,255,.07), 0 0 12px rgba(0,0,0,.45);
}
.panel::before,.panel::after{
  content:'';position:absolute;width:16px;height:16px;
  border:2px solid #49c7ff;opacity:.9;filter:drop-shadow(0 0 3px #35b6ff);
}
.panel::before{top:-2px;left:-2px;border-right:0;border-bottom:0;border-top-left-radius:10px}
.panel::after{bottom:-2px;right:-2px;border-left:0;border-top:0;border-bottom-right-radius:10px}
.panel h3{text-align:center;color:#fff;margin-bottom:10px;font-size:16px;
  text-shadow:0 0 8px rgba(255,255,255,.3)}

/* ============ โครงสร้างกริด ============ */
.dash-grid{display:grid;grid-template-columns:1fr 470px;gap:14px;min-width:0}
.dash-grid2{display:grid;grid-template-columns:1fr 1fr;gap:14px;margin-top:14px;min-width:0}
.left-col{display:flex;flex-direction:column;gap:14px}
.left-col > .panel{flex:1;display:flex;flex-direction:column}

/* ============ โดนัท ============ */
.donut-row{display:grid;grid-template-columns:1fr 1fr;gap:14px}
.donut svg{width:175px;height:175px;display:block;margin:auto;
  filter:drop-shadow(0 0 10px rgba(126,217,87,.25))}

/* ============ กราฟแท่ง ============ */
.bars{display:flex;gap:8px;flex:1;min-height:200px;padding:6px 4px 0}
.bar-col{flex:1;display:flex;flex-direction:column;align-items:center}
.bar-stack{width:70%;flex:1;display:flex;flex-direction:column-reverse}
.bar-ok{background:#7ed957;box-shadow:0 0 8px rgba(126,217,87,.45)}
.bar-bad{background:#e74c3c;box-shadow:0 0 8px rgba(231,76,60,.5)}
.bar-label{font-size:10px;transform:rotate(-45deg);white-space:nowrap;height:44px;margin-top:4px}
.legend{display:flex;gap:18px;justify-content:center;font-size:12px;margin-top:8px;align-items:center}
.dot{width:12px;height:12px;border-radius:50%;display:inline-block;vertical-align:middle;margin-right:6px}
/* ✅ คำอธิบายใต้กราฟ & ใต้ตาราง: เรียงบรรทัดเดียวเสมอ */
.legend{display:flex;flex-wrap:nowrap;gap:14px;justify-content:center;
  align-items:center;font-size:12px;margin-top:8px}
.legend span{white-space:nowrap;flex-shrink:0;display:inline-flex;align-items:center;gap:6px}
.legend .dot{margin-right:0}
.legend .badge{margin-left:0}

/* ============ แผนที่ ============ */
.map-panel svg{width:100%;height:auto;display:block;
  filter:drop-shadow(0 0 14px rgba(53,182,255,.25))}

/* ============ การ์ดรายละเอียดเครื่องมือ ============ */
.cards{display:grid;grid-template-columns:repeat(3,1fr);gap:10px}
.card{background:#061224;border:1px solid #1e4976;border-radius:8px;text-align:center;padding:12px 6px}
.card-icon{font-size:42px;filter:hue-rotate(160deg)}
.card h4{color:#7ef0ff;font-size:14px;margin:6px 0}
.card p{font-size:12px;color:#cfe8ff;line-height:1.6}

/* ============ รายการเครื่องมือชำรุด ============ */
.broken-list{margin-top:10px;border-top:1px dashed #1e4976;padding-top:8px;
  list-style:none;font-size:13px;color:#ff8080;line-height:1.8}
.broken-list li::before{content:'- ';color:#ff4d4d;font-weight:bold}
.broken-none{margin-top:10px;border-top:1px dashed #1e4976;padding-top:8px;
  font-size:13px;color:#7ed957;text-align:center}

/* ============ ตารางสถานะ ============ */
#statusTable{width:100%;border-collapse:collapse;font-size:13px;
  table-layout:fixed;word-wrap:break-word}
#statusTable th,#statusTable td{border:1px solid #1e4976;padding:6px 8px;text-align:center}
#statusTable td:first-child{text-align:left}
#statusTable thead th{background:#0e2c4d;color:#7ef0ff}
.ic{display:inline-block;width:20px;height:20px;border-radius:50%;line-height:20px;font-size:12px;
  color:#fff;font-style:normal;text-align:center}
.ic.ok{background:#22c55e}.ic.bad{background:#e74c3c}
.badge{display:inline-block;margin-left:6px;background:linear-gradient(#ffd76a,#b8860b);
  color:#3a2404;font-size:9px;font-weight:700;border-radius:8px;padding:2px 6px;vertical-align:middle;font-style:normal}

/* ============ หมายเหตุประกัน ============ */
.note-panel{margin-top:14px}
.note-cols{display:grid;grid-template-columns:1fr 1fr;gap:20px;padding:0 40px}
.note-cols h4{color:#7ed957;font-size:16px;margin-bottom:8px}
.note-cols h4 b{font-family:'Orbitron';font-size:18px}
.note-cols ul{list-style:disc;padding-left:22px;font-size:14px;line-height:1.8}

.pdf-btn{background:#e74c3c;color:#fff}
.pdf-btn:hover{background:#c0392b}