/* ═══════════════════════════════════════════════════════════════════════════
   TSCWORLD AI™ — Warehouse AI module (หน้า 45–54)
   โหลดหลัง proc.css เสมอ
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── 1. GRID ────────────────────────────────────────────────────────── */
.g-wh1{display:grid;grid-template-columns:minmax(0,1.55fr) minmax(0,1fr) minmax(0,1fr);gap:16px}
.g-wh5{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:16px}
.g-wh4{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:16px}
.kpis--8{grid-template-columns:repeat(8,1fr)}

.g-proc4{display:grid;grid-template-columns:repeat(2,minmax(0,1fr));gap:11px}
.kpi__k2{display:block;font-size:10px;font-weight:500;color:var(--tx-4);margin-top:2px}
.vio{color:#8B7CFF} .sky{color:#38BDF8}
.dpair--rev{direction:rtl} .dpair--rev > *{direction:ltr}
/* เลเยอร์ของ Digital Twin */
.lyr{display:flex;align-items:center;gap:9px;padding:6px 2px;font-size:11.5px;color:var(--tx-2);cursor:pointer}
.lyr input{width:14px;height:14px;flex-shrink:0;accent-color:#2ED47A;cursor:pointer}
.lgd--lg li em{font-size:11.5px;font-weight:700;color:var(--tx-2)}

/* การ์ดคำแนะนำแบบมีสี */
.recobx--g{border-color:color-mix(in srgb,#2ED47A 32%,transparent);background:color-mix(in srgb,#2ED47A 7%,transparent)}
.recobx--a{border-color:color-mix(in srgb,#FBBF24 32%,transparent);background:color-mix(in srgb,#FBBF24 7%,transparent)}
.recobx--v{border-color:color-mix(in srgb,#8B7CFF 32%,transparent);background:color-mix(in srgb,#8B7CFF 7%,transparent)}
.recobx--b{border-color:color-mix(in srgb,#38BDF8 32%,transparent);background:color-mix(in srgb,#38BDF8 7%,transparent)}
.recobx__hd span{font-size:12px;font-weight:700}
.recobx__p{font-size:11px;color:var(--tx-3);line-height:1.55;margin:7px 0 10px}
.recobx__m{display:flex;align-items:baseline;justify-content:space-between;gap:8px;margin-bottom:11px;font-size:10.5px}
.recobx__m b{font-size:14px;font-weight:800;font-variant-numeric:tabular-nums}

/* ── 2. WAREHOUSE 3D VIEW ───────────────────────────────────────────── */
.whmap{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line-soft);
  background:linear-gradient(180deg,#0B1728,#050B16)}
.whmap svg{width:100%;height:auto;display:block}
.whzone{position:absolute;transform:translate(-50%,-50%);z-index:2;padding:7px 11px;border-radius:9px;
  white-space:nowrap;text-align:left;border:1.5px solid color-mix(in srgb,var(--c,#3B8CFF) 62%,transparent);
  background:rgba(6,13,28,.92);box-shadow:0 5px 16px rgba(0,0,0,.5);transition:transform .2s var(--ease)}
.whzone:hover{transform:translate(-50%,-50%) scale(1.06)}
.whzone__n{font-size:10.5px;font-weight:700;color:#E6EFFB}
.whzone__s{font-size:9.5px;color:var(--tx-4);margin-top:1px}
.whzone__v{font-size:11.5px;font-weight:800;color:var(--c,#3B8CFF);margin-top:2px}
/* ตำแหน่งป้าย — viewBox 1000×540, left = x/1000, top = y/540 */
.whzone[data-w="recv"] {left:13.0%;top:63.0%}
.whzone[data-w="zoneA"]{left:16.5%;top:26.0%}
.whzone[data-w="zoneB"]{left:74.0%;top:22.0%}
.whzone[data-w="zoneC"]{left:88.0%;top:38.0%}
.whzone[data-w="pick"] {left:78.0%;top:64.0%}
.whzone[data-w="pack"] {left:47.0%;top:83.0%}
.whzone[data-w="ship"] {left:15.0%;top:85.0%}
.whzone[data-w="auto"] {left:75.0%;top:86.0%}

.whmode{display:flex;gap:4px}
.whmode button{display:flex;align-items:center;gap:6px;padding:6px 12px;border-radius:9px;
  font-size:11.5px;font-weight:600;color:var(--tx-3);transition:all .2s var(--ease)}
.whmode button:hover{color:var(--tx);background:var(--bg-hover)}
.whmode button.on{color:#fff;background:linear-gradient(135deg,#3B92FF,#1C63D6)}
.whmode svg{stroke:currentColor;fill:none;stroke-width:1.7}

/* ── 3. REAL-TIME EQUIPMENT STATUS ──────────────────────────────────── */
.rteq{display:flex;align-items:center;gap:10px;padding:9px 2px;border-bottom:1px solid var(--line-soft)}
.rteq:last-of-type{border-bottom:0}
.rteq b{flex:1;font-size:12px;font-weight:600;color:var(--tx-2)}
.rteq span{flex-shrink:0;font-size:12px;font-weight:700;color:var(--tx-2);font-variant-numeric:tabular-nums}
.rteq em{flex-shrink:0;width:52px;text-align:right;font-style:normal;font-size:11px;font-weight:600;color:#2ED47A}
.rteq em.off{color:#FB7185}

/* ── 4. HEAT MAP ────────────────────────────────────────────────────── */
.heat{display:grid;grid-template-columns:repeat(14,1fr);gap:2px}
.heat i{display:block;aspect-ratio:1;border-radius:2px;background:var(--c,rgba(126,151,188,.14))}
.h4{--c:#EE5D52} .h3{--c:#F0932B} .h2{--c:#E8C547} .h1{--c:#2FA85B} .h0{--c:rgba(126,151,188,.14)}
.heatlgd{display:flex;flex-direction:column;gap:6px;font-size:10.5px;color:var(--tx-3)}
.heatlgd span{display:flex;align-items:center;gap:7px}
.heatlgd i{width:9px;height:9px;border-radius:2px;background:var(--c)}

/* ── 5. CAMERA GRID ─────────────────────────────────────────────────── */
.camgrid{display:grid;grid-template-columns:repeat(4,minmax(0,1fr));gap:11px}
.camtile{border-radius:11px;overflow:hidden;border:1px solid var(--line-soft);background:var(--bg-tile)}
.camtile--alert{border-color:#FB7185}
.camtile__hd{display:flex;align-items:center;gap:7px;padding:8px 10px;font-size:10.5px}
.camtile__n{flex:1;font-weight:700;color:var(--tx-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.camtile__l{display:inline-flex;align-items:center;gap:4px;font-size:9.5px;font-weight:600;color:#2ED47A}
.camtile__id{padding:0 10px 6px;font-size:9.5px;color:var(--tx-4)}
.camtile svg{width:100%;height:auto;display:block}
.camtile__ft{display:flex;align-items:center;justify-content:space-between;padding:7px 10px;font-size:9.5px}
.camtile__st{padding:2px 8px;border-radius:99px;font-weight:700;color:#2ED47A;
  background:color-mix(in srgb,#2ED47A 16%,transparent)}
.camtile__st--a{color:#FB7185;background:color-mix(in srgb,#FB7185 16%,transparent)}
.camtile__pv{font-size:9px;color:#8B7CFF;font-weight:600}

/* ── 6. RECEIVING PROCESS FLOW (8 ขั้น) ─────────────────────────────── */
.rflow{display:flex;align-items:flex-start;gap:0;overflow-x:auto;padding:4px 0 2px}
.rflow__s{flex:1 0 118px;text-align:center;min-width:0}
.rflow__n{display:grid;place-items:center;width:30px;height:30px;margin:0 auto 9px;border-radius:50%;
  font-size:12px;font-weight:800;color:#08131F;background:var(--c,#8B7CFF)}
.rflow__t{font-size:10.5px;font-weight:700;color:var(--tx-2);line-height:1.35;letter-spacing:.02em}
.rflow__d{font-size:9.5px;color:var(--tx-4);margin-top:2px}
.rflow__ck{margin-top:9px;text-align:left;padding-left:14px}
.rflow__ck li{font-size:9.5px;color:var(--tx-3);line-height:1.7;list-style:none;position:relative}
.rflow__ck li::before{content:"✓";position:absolute;left:-12px;color:#2ED47A;font-weight:800}
.rflow__a{flex:0 0 18px;display:grid;place-items:center;height:30px;color:var(--tx-4)}
.rflow__a svg{stroke:currentColor;fill:none;stroke-width:2}

/* ── 6b. เลขขั้นตอนหน้าหัวข้อการ์ด + ภาพจากกล้อง ───────────────────── */
.stepn{display:inline-grid;place-items:center;width:18px;height:18px;margin-right:7px;border-radius:5px;
  font-size:10px;font-weight:800;color:#08131F;background:#3B6BFF;vertical-align:1px}
.camfeed{width:100%;height:auto;display:block;border-radius:9px;margin-bottom:11px;
  border:1px solid var(--line-soft)}
.mt11{margin-top:11px}

/* ── 7. SLOT GRID — ตำแหน่งจัดเก็บที่ AI แนะนำ ─────────────────────── */
.slotwrap{display:grid;grid-template-columns:minmax(0,1fr) 118px;gap:13px;align-items:start}
.slot{display:grid;grid-template-columns:repeat(9,1fr);gap:3px}
.slot b{font-size:9px;font-weight:700;color:var(--tx-4);text-align:center;padding-bottom:2px}
.slot i{display:block;aspect-ratio:1;border-radius:3px;background:rgba(59,107,255,.14);
  border:1px solid transparent}
.slot i.f{background:rgba(59,107,255,.34)}
.slot i.t{background:#FBBF24;border-color:#FBBF24;box-shadow:0 0 0 2px rgba(251,191,36,.28)}
.slotinfo b{display:block;font-size:10px;color:var(--tx-4);margin-top:7px}
.slotinfo span{display:block;font-size:12px;font-weight:700;color:var(--tx-2);font-variant-numeric:tabular-nums}
.slotinfo em{display:block;font-style:normal;font-size:11px;font-weight:800;color:#FBBF24}

/* ── 8. DOCUMENT LIST ───────────────────────────────────────────────── */
.dtype{display:inline-block;padding:3px 9px;border-radius:6px;font-size:10px;font-weight:700;
  color:var(--c,#3B6BFF);background:color-mix(in srgb,var(--c,#3B6BFF) 17%,transparent);white-space:nowrap}
.dt-grn{--c:#2ED47A} .dt-dn{--c:#38BDF8} .dt-pl{--c:#8B7CFF} .dt-sl{--c:#FBBF24}
.dt-adj{--c:#FB923C} .dt-tr{--c:#2DD4BF} .dt-rt{--c:#FB7185} .dt-dmg{--c:#EE6D4A}
.dacts{display:flex;align-items:center;gap:5px;justify-content:flex-end}
.dacts button{display:grid;place-items:center;width:24px;height:24px;border-radius:6px;color:var(--tx-4)}
.dacts button:hover{color:var(--tx);background:var(--bg-hover)}
.dacts svg{stroke:currentColor;fill:none;stroke-width:1.7}
.pager{display:flex;align-items:center;gap:5px;justify-content:flex-end;margin-top:12px}
.pager button{min-width:28px;height:28px;padding:0 8px;border-radius:7px;font-size:11.5px;font-weight:600;
  color:var(--tx-3);border:1px solid var(--line-soft)}
.pager button:hover{color:var(--tx);border-color:var(--line-hot)}
.pager button.on{color:#fff;background:linear-gradient(135deg,#3B92FF,#1C63D6);border-color:transparent}

.docthumbs{display:grid;grid-template-columns:repeat(5,minmax(0,1fr));gap:11px}
.docthumb{border-radius:10px;overflow:hidden;border:1px solid var(--line-soft);background:var(--bg-tile)}
.docthumb svg{width:100%;height:auto;display:block;background:#F4F7FC}
.docthumb__c{padding:8px 9px}
.docthumb__n{font-size:10px;font-weight:700;color:var(--tx-2)}
.docthumb__s{font-size:9.5px;color:var(--tx-4);margin-top:2px}

/* ── 9. AUTOMATION WORKFLOW (10 ขั้น) ───────────────────────────────── */
.awf{display:flex;gap:8px;overflow-x:auto;padding:4px 0 8px}
.awf__s{flex:1 0 128px;min-width:0;border-radius:12px;border:1px solid var(--line-soft);
  background:var(--bg-tile);padding:12px 10px;text-align:center;
  border-top:2.5px solid var(--c,#3B6BFF)}
.awf__n{display:grid;place-items:center;width:26px;height:26px;margin:0 auto 8px;border-radius:50%;
  font-size:11px;font-weight:800;color:#08131F;background:var(--c,#3B6BFF)}
.awf__t{font-size:11px;font-weight:700;color:var(--tx-2);line-height:1.3}
.awf__d{font-size:9.5px;color:var(--tx-4);margin-top:2px}
.awf__l{margin-top:9px;text-align:left;padding-left:13px}
.awf__l li{font-size:9.5px;color:var(--tx-3);line-height:1.75;list-style:none;position:relative}
.awf__l li::before{content:"◦";position:absolute;left:-11px;color:var(--c,#3B6BFF);font-weight:800}
.awf__b{display:block;margin-top:10px;padding:4px 0;border-radius:7px;font-size:10px;font-weight:800;
  color:var(--c,#2ED47A);background:color-mix(in srgb,var(--c,#2ED47A) 14%,transparent)}
.awf__b--e{--c:#FB7185}

.brain{display:flex;align-items:center;gap:13px;justify-content:center;margin-top:6px;padding:13px 18px;
  border-radius:13px;border:1px solid color-mix(in srgb,#8B7CFF 34%,transparent);
  background:color-mix(in srgb,#8B7CFF 9%,transparent)}
.brain svg{flex-shrink:0;stroke:#8B7CFF;fill:none;stroke-width:1.6}
.brain__t{font-size:12.5px;font-weight:800;color:#A99BFF}
.brain__d{font-size:10.5px;color:var(--tx-3);margin-top:3px;line-height:1.5}

/* ── 10. BALANCED SCORECARD MAP ─────────────────────────────────────── */
.bsc{width:100%;border-collapse:separate;border-spacing:8px 9px;font-size:10.5px}
.bsc th{font-size:10px;font-weight:700;color:var(--tx-4);padding-bottom:2px;text-align:center;letter-spacing:.03em}
.bsc th.p{text-align:left}
.bsc td{padding:9px 11px;border-radius:9px;border:1px solid var(--line-soft);background:var(--bg-tile);
  color:var(--tx-2);text-align:center;line-height:1.4}
.bsc td.p{text-align:left;border-left:3px solid var(--c,#3B6BFF);font-weight:700}
.bsc td.p small{display:block;font-size:9.5px;font-weight:500;color:var(--tx-4);margin-top:2px}
.bsc td.k{font-weight:800;color:var(--c,#3B6BFF)}
.bsc td.s{border:0;background:none;padding:0}

/* ── 11. GANTT แบบเปอร์เซ็นต์ ───────────────────────────────────────── */
.gtt{width:100%;border-collapse:separate;border-spacing:0 8px;font-size:11px}
.gtt th{font-size:9.5px;font-weight:600;color:var(--tx-4);padding:0 3px 5px;text-align:center}
.gtt th.lane,.gtt td.lane{text-align:left;width:168px;font-size:11px;color:var(--tx-2);font-weight:600;padding-right:10px}
.gtt td.lane span{display:flex;align-items:center;gap:8px}
.gtt td.pc{width:44px;text-align:right;font-weight:800;font-variant-numeric:tabular-nums;color:var(--tx-2)}
.gtt td.bar{padding:0 2px}
.gbar{display:block;height:20px;border-radius:6px;background:var(--c,#3B6BFF)}
.gnum{display:grid;place-items:center;width:19px;height:19px;border-radius:5px;flex-shrink:0;
  font-size:10px;font-weight:800;color:#08131F;background:var(--c,#3B6BFF)}

/* ── 12. RESPONSIVE ─────────────────────────────────────────────────── */
@media (max-width:1500px){ .kpis--8{grid-template-columns:repeat(4,1fr)} }
@media (max-width:1400px){
  .g-wh1{grid-template-columns:minmax(0,1fr)}
  .g-wh5{grid-template-columns:repeat(3,minmax(0,1fr))}
  .camgrid{grid-template-columns:repeat(2,minmax(0,1fr))}
  .docthumbs{grid-template-columns:repeat(3,minmax(0,1fr))}
}
@media (max-width:1100px){
  .g-wh4{grid-template-columns:repeat(2,minmax(0,1fr))}
  .g-wh5{grid-template-columns:repeat(2,minmax(0,1fr))}
  .slotwrap{grid-template-columns:minmax(0,1fr)}
}
@media (max-width:640px){
  .kpis--8{grid-template-columns:repeat(2,1fr)}
  .g-wh4,.g-wh5{grid-template-columns:minmax(0,1fr)}
  .camgrid,.docthumbs{grid-template-columns:minmax(0,1fr)}
  .heat{grid-template-columns:repeat(10,1fr)}
}

/* select เต็มความกว้าง (Scenario Planning หน้า 54) */
.sel--wide{width:100%}