/* ============================================================
   cloud.css — สไตล์เฉพาะหน้าเว็บฝั่งออนไลน์
   โหลด "ต่อจาก" style.css เสมอ (style.css เป็นสำเนาตรงจากฝั่งโรงงาน ห้ามแก้ที่นี่
   ถ้าจะแก้ธีมรวม ให้แก้ที่ local/public/style.css แล้วคัดลอกมาทับทั้งไฟล์)

   ส่วนที่ 1 ยกมาจาก block <style> ของ local/public/index.html ทั้งดุ้น
   — เพื่อให้หน้า dashboard ออนไลน์หน้าตาเหมือนหน้าในโรงงานเป๊ะ
   ส่วนที่ 2 คือของที่มีเฉพาะฝั่งออนไลน์ (ป้ายสถานะการเชื่อมต่อ ฯลฯ)
   ============================================================ */
/* ============================================================
   หน้าแรก = ภาพรวมข้อมูลอย่างเดียว ไม่มีปุ่มสั่งงาน
   ปุ่มกดของพนักงานอยู่ที่ /op · เปิด-ปิดกะอยู่ที่ /setup · แก้ค่าอยู่ที่ /admin
   หน้านี้จึงเปิดค้างบนจอในออฟฟิศได้โดยไม่ต้องกลัวใครเดินมากดโดนอะไร
   ============================================================ */

/* ---- แถวบนสุด: ผลผลิตของกะ ---- */
.hero{display:grid;grid-template-columns:minmax(240px,.85fr) 1.6fr;gap:26px;align-items:center}
.hero-l{display:flex;flex-direction:column;gap:2px}
.hero-k{font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--ink3);text-transform:uppercase}
.bignum{font-size:clamp(52px,8.5vw,104px);font-weight:800;line-height:.92;
  font-variant-numeric:tabular-nums;letter-spacing:-.02em}
.hero-sub{font-size:13px;color:var(--ink3)}
.pill{align-self:flex-start;margin-top:8px;font-size:15px;font-weight:700;border-radius:999px;
  padding:5px 14px;border:1px solid currentColor;font-variant-numeric:tabular-nums}

/* แถบความคืบหน้า: เติมตาม Actual · ขีดขาว = Plan ณ ตอนนี้ · เต็มแถบ = Target */
.prog{position:relative;height:38px;border:1px solid var(--line);border-radius:6px;
  background:var(--line2);overflow:hidden}
.prog-fill{height:100%;background:linear-gradient(90deg,var(--bar-g),var(--green));transition:width .5s}
.prog-plan{position:absolute;top:-2px;bottom:-2px;width:3px;background:#fff;box-shadow:0 0 8px rgba(255,255,255,.9)}
.prog-scale{display:flex;justify-content:space-between;margin-top:5px;font-size:11px;color:var(--ink3)}
.prog-lbl{display:flex;gap:18px;margin-bottom:7px;font-size:12px;flex-wrap:wrap;align-items:baseline}
.prog-lbl b{font-size:15px;font-variant-numeric:tabular-nums}

/* ---- แถวไทล์ตัวเลข ---- */
.tiles{display:grid;grid-template-columns:repeat(auto-fit,minmax(178px,1fr));gap:12px;margin-top:14px}
.tile{background:var(--panel);border:1px solid var(--line);border-radius:8px;padding:12px 14px}
.tile-k{font-size:11px;font-weight:700;letter-spacing:.1em;color:var(--ink3);text-transform:uppercase}
.tile-v{font-size:clamp(26px,3.4vw,34px);font-weight:700;line-height:1.1;margin-top:4px;
  font-variant-numeric:tabular-nums}
.tile-s{font-size:11px;color:var(--ink3);margin-top:3px;line-height:1.5}
.minitrack{height:6px;border-radius:3px;background:var(--line2);overflow:hidden;margin-top:8px;position:relative}
.minifill{height:100%;transition:width .4s}
.minilim{position:absolute;top:-2px;bottom:-2px;width:2px;background:rgba(255,255,255,.7)}

/* ---- Status line: บีบให้เตี้ยลง + หน้าตาแบบจอ TV (tv7) ----
   เดิมสูงเกือบ 200px เพราะมีป้าย "สถานะไลน์ตอนนี้" + ชื่อ 44px + การ์ด timeline
   แยกอีกใบที่มี legend อยู่ใต้แถบ · แบบใหม่: แถบสถานะบรรทัดเดียว (จุด + ชื่อ + นาฬิกา)
   ขอบซ้ายหนาเป็นสีของสถานะเหมือนจอ TV แล้ว legend ย้ายไปอยู่บนหัวการ์ด timeline */
.statusbar{display:flex;align-items:center;gap:16px;padding:9px 16px;margin-bottom:10px;
  border-radius:8px;background:var(--panel);border:2px solid var(--green);border-left-width:14px;
  transition:border-color .4s}
.sb-dot{width:18px;height:18px;border-radius:50%;flex-shrink:0;
  box-shadow:0 0 12px currentColor;animation:pulse 1.8s infinite}
.sb-name{font-size:clamp(20px,2.4vw,30px);font-weight:700;line-height:1.1;
  white-space:nowrap;overflow:hidden;text-overflow:ellipsis;min-width:0}
.sb-since{margin-left:auto;font-size:12px;color:var(--ink3);white-space:nowrap}
.sb-timer{font-size:clamp(20px,2.2vw,28px);font-weight:700;line-height:1.1;
  font-variant-numeric:tabular-nums;white-space:nowrap}

.tlcard{padding:10px 14px}
.tl-h{display:flex;align-items:center;gap:10px;flex-wrap:wrap;
  font-size:11px;font-weight:700;letter-spacing:.14em;color:var(--cyan);
  text-transform:uppercase;margin-bottom:7px}
.tl-sub{letter-spacing:0;text-transform:none;font-weight:400;color:var(--ink3);font-size:12px}
.tl-h .legend{margin-left:auto;margin-top:0;gap:14px}
/* legend สืบ text-transform ของหัวการ์ดมาแล้วกลายเป็นตัวพิมพ์ใหญ่หมด — สั่งกลับให้เหมือนจอ TV */
.tl-h .lg{font-size:11px;text-transform:none;letter-spacing:0}
.tlcard .tl{height:26px}

/* ---- Loss time: ประเภทละ 1 แถว เรียงลงมา (5 แถว) ----
   ของเดิมเป็นหลอดบางๆ 3 เส้นต่อประเภท รวม 15 เส้น — ตาไล่ไม่ทันว่าอันไหนเกิน
   แบบนี้ยังเรียงลงมาเหมือนเดิม แต่แถวใหญ่ขึ้น: หลอดเดียวต่อกันเขียว→แดง ·
   เลข % ตัวใหญ่ · แถบสีซ้าย = ประเภท · เส้นประ = เกณฑ์ */
.lossrows{display:flex;flex-direction:column}
.lr{display:grid;grid-template-columns:126px 1fr 92px;gap:14px;align-items:center;
  padding:11px 0 11px 12px;border-left:4px solid var(--line);border-bottom:1px solid var(--line2)}
.lr:last-child{border-bottom:0}
.lr.over{background:linear-gradient(90deg,rgba(255,60,60,.10),transparent 55%)}
.lr-n{font-size:17px;font-weight:700;line-height:1.2;white-space:nowrap;
  overflow:hidden;text-overflow:ellipsis}
.lr-m{font-size:11px;color:var(--ink3)}
.lr-bar{height:24px;background:var(--line2);border:1px solid var(--line);border-radius:3px;
  display:flex;overflow:hidden;position:relative}
.lr-f{height:100%;transition:width .4s}
.lr-lim{position:absolute;top:-2px;bottom:-2px;border-left:2px dashed rgba(255,255,255,.8)}
.lr-r{text-align:right}
.lr-v{font-size:30px;font-weight:700;line-height:1;font-variant-numeric:tabular-nums}
.lr-s{font-size:11px;color:var(--ink3);white-space:nowrap}
@media(max-width:720px){ .lr{grid-template-columns:96px 1fr 74px;gap:8px} .lr-v{font-size:24px} }

/* ---- ตารางเหตุการณ์ (อ่านอย่างเดียว) ---- */
.evt-wrap{max-height:290px;overflow:auto}
.evt-wrap table{width:100%}
.evt-wrap td,.evt-wrap th{padding:5px 8px;font-size:13px}
.tagcode{font-family:Consolas,monospace;font-size:11px;border:1px solid var(--line);
  border-radius:3px;padding:1px 5px;color:var(--ink3)}

/* ---- แถวเปรียบเทียบกะย้อนหลัง ---- */
.days{display:flex;flex-direction:column;gap:7px}
.dayrow{display:grid;grid-template-columns:132px 1fr 62px;gap:12px;align-items:center;font-size:13px}
.daybar{height:16px;background:var(--line2);border-radius:3px;overflow:hidden;position:relative}
.dayfill{height:100%;background:var(--bar-g)}
.daytgt{position:absolute;top:-2px;bottom:-2px;width:2px;background:rgba(255,255,255,.6)}
.dayeff{text-align:right;font-weight:700;font-variant-numeric:tabular-nums}
.dnum{position:absolute;right:6px;top:0;font-size:10px;line-height:16px;color:var(--ink2)}

@media(max-width:900px){
  .hero{grid-template-columns:1fr;gap:14px}
  .dayrow{grid-template-columns:110px 1fr 52px}
}


/* ============================================================
   ส่วนที่ 2 — เฉพาะฝั่งออนไลน์
   ============================================================ */

/* ป้ายใต้เมนู: ย้ำว่าหน้านี้กดสั่งอะไรไม่ได้ */
.nav-note{font-size:11px;line-height:1.6;color:var(--ink3);background:var(--panel2);
  border:1px solid var(--line);border-radius:10px;padding:9px 11px;margin:0 2px}

/* ชิปบอกความสดของข้อมูล — เรื่องสำคัญที่สุดของหน้านี้
   คนดูอยู่ไกลโรงงาน ต้องรู้ก่อนว่า "ตัวเลขที่เห็นสดหรือค้าง" ก่อนจะเอาไปตัดสินใจ
   สามระดับ: สด / ค้าง (คลาวด์ไม่ได้ยินเสียง gateway) / ต่อคลาวด์ไม่ได้ (เน็ตของคนดูเอง) */
.content .chip.stale{border-color:rgba(255,149,0,.55);background:rgba(255,149,0,.14);color:var(--orange)}
.content .chip.stale .hb{background:var(--orange);box-shadow:0 0 0 3px rgba(255,149,0,.22);animation:none}

/* ป้ายเตือนสีส้ม — ใช้กับ "ข้อมูลค้าง" ให้ต่างจากป้ายเหลืองที่เป็นเรื่องของไลน์ */
.banner.warn2{border-color:var(--orange);background:rgba(255,149,0,.10)}
.banner.warn2 b{color:var(--orange)}

/* เมนูย่อเหลือแถบไอคอน (จอแคบกว่า 1080px) หรือกลายเป็นแถวบนสุด (แคบกว่า 820px)
   ป้ายอ่านอย่างเดียวจะไม่มีที่ยืน — ซ่อนตามหัวข้อ .nav-sec ที่ style.css ซ่อนอยู่แล้ว
   ข้อความเดียวกันยังอยู่ท้ายหน้า จึงไม่ได้หายไปจากสายตาคนดู */
@media(max-width:1080px){ .nav-note{display:none} }