/* ═══════════════════════════════════════════════════════════════════════════
   TSCWORLD AI™ — Manufacturing AI components
   factory map (isometric) · alerts · downtime · material · energy · copilot insight
   Blueprint ref: เล่ม 10 Make
   ═══════════════════════════════════════════════════════════════════════════ */

/* ─────────────────────────────────────────────────────────────
   1. FACTORY MAP (isometric)
   ───────────────────────────────────────────────────────────── */
.fmap{position:relative;border-radius:14px;overflow:hidden;border:1px solid var(--line-soft);
  background:
    radial-gradient(120% 90% at 50% 40%,rgba(30,80,170,.30),rgba(6,12,26,.92) 72%),
    linear-gradient(180deg,rgba(10,20,44,.9),rgba(4,9,20,.96))}
.fmap::before{content:"";position:absolute;inset:0;pointer-events:none;
  background-image:linear-gradient(rgba(90,150,235,.06) 1px,transparent 1px),
                   linear-gradient(90deg,rgba(90,150,235,.06) 1px,transparent 1px);
  background-size:34px 34px}
.fmap svg{position:relative;width:100%;height:auto;display:block}

.fmap__ctl{position:absolute;top:11px;right:11px;display:flex;gap:5px;z-index:3}
.fmap__ctl button{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;
  color:var(--tx-2);border:1px solid var(--line);background:rgba(8,16,34,.82);transition:all .2s}
.fmap__ctl button:hover{color:#fff;border-color:var(--line-hot);background:rgba(46,139,255,.22)}
.fmap__ctl button.on{color:#fff;background:linear-gradient(135deg,#3B92FF,#1C63D6);border-color:transparent}

/* zone label cards floating over the map */
.fzone{position:absolute;transform:translate(-50%,-50%);z-index:2;
  padding:7px 13px;border-radius:10px;text-align:center;white-space:nowrap;
  border:1.5px solid color-mix(in srgb,var(--c,#3B8CFF) 55%,transparent);
  background:rgba(7,14,30,.9);-webkit-backdrop-filter:blur(6px);backdrop-filter:blur(6px);
  box-shadow:0 6px 18px rgba(0,0,0,.45);transition:transform .2s var(--ease),box-shadow .2s;cursor:pointer}
.fzone:hover{transform:translate(-50%,-50%) scale(1.06);box-shadow:0 10px 26px rgba(0,0,0,.6)}
.fzone__n{font-size:11.5px;font-weight:700;color:#E6EFFB}
.fzone__v{font-size:15px;font-weight:800;margin-top:2px;color:var(--c,#3B8CFF);font-variant-numeric:tabular-nums}

/* zone label positions — matched to the isometric tile centres in the SVG
   (viewBox 800×500; centre → left = x/800, top = y/500, nudged up 4% to sit on the tile) */
.fzone[data-z="warehouse"]  {left:50.0%;top:37.4%}
.fzone[data-z="assembly-a"] {left:64.8%;top:49.2%}
.fzone[data-z="assembly-b"] {left:79.5%;top:61.0%}
.fzone[data-z="machining"]  {left:35.3%;top:49.2%}
.fzone[data-z="qc"]         {left:50.0%;top:61.0%}
.fzone[data-z="packing"]    {left:64.8%;top:72.8%}

.fmap__lgd{display:flex;gap:22px;flex-wrap:wrap;position:absolute;left:14px;bottom:12px;z-index:2;
  font-size:11px;color:var(--tx-3)}
.fmap__lgd span{display:flex;align-items:center;gap:7px}
.fmap__lgd i{width:8px;height:8px;border-radius:50%;background:var(--c)}

/* ─────────────────────────────────────────────────────────────
   2. REAL-TIME ALERT ROW
   ───────────────────────────────────────────────────────────── */
.alrt{display:flex;align-items:flex-start;gap:11px;padding:11px 4px;border-bottom:1px solid var(--line-soft)}
.alrt:last-of-type{border-bottom:0}
.alrt__tx{flex:1;min-width:0}
.alrt__t{font-size:12.8px;font-weight:700;line-height:1.35}
.alrt__s{font-size:11px;color:var(--tx-3);margin-top:3px;line-height:1.4}
.alrt__r{flex-shrink:0;text-align:right}
.alrt__w{font-size:11px;color:var(--tx-4);font-variant-numeric:tabular-nums}
.sev{display:inline-block;margin-top:6px;padding:2.5px 10px;border-radius:7px;
  font-size:10px;font-weight:800;white-space:nowrap;
  color:var(--tone,var(--blue-hi));
  background:color-mix(in srgb,var(--tone,#3B8CFF) 16%,transparent);
  border:1px solid color-mix(in srgb,var(--tone,#3B8CFF) 32%,transparent)}
.sev--crit{--tone:#FB7185} .sev--warn{--tone:#FBBF24}
.sev--info{--tone:#38BDF8} .sev--good{--tone:#2ED47A}

/* ─────────────────────────────────────────────────────────────
   3. DOWNTIME / DEFECT BREAKDOWN
   ───────────────────────────────────────────────────────────── */
.brk{display:grid;gap:12px}
.brk li{display:grid;grid-template-columns:118px 1fr 96px;align-items:center;gap:11px;font-size:12px}
.brk b{font-weight:500;color:var(--tx-2);white-space:nowrap;overflow:hidden;text-overflow:ellipsis}
.brk span{text-align:right;color:var(--tx-3);font-variant-numeric:tabular-nums;white-space:nowrap}
.brk i{display:block;height:9px;border-radius:99px;width:0;transition:width 1.1s var(--ease);
  background:linear-gradient(90deg,var(--c,#3B8CFF),color-mix(in srgb,var(--c,#3B8CFF) 55%,#0A1830))}
.brk__tot{display:flex;align-items:baseline;justify-content:space-between;gap:12px;
  margin-bottom:14px;padding-bottom:12px;border-bottom:1px solid var(--line-soft)}
.brk__tot span{font-size:12.5px;color:var(--tx-3)}
.brk__tot b{font-size:19px;font-weight:800;font-variant-numeric:tabular-nums}

/* ─────────────────────────────────────────────────────────────
   4. QUALITY SPLIT (donut + two stat rows)
   ───────────────────────────────────────────────────────────── */
.qsplit{display:flex;align-items:center;gap:18px;flex-wrap:wrap}
.qsplit svg{width:150px;height:150px;flex-shrink:0}
.qsplit__rows{flex:1;min-width:170px;display:grid;gap:10px}
.qrow{display:flex;align-items:center;gap:11px;padding:11px 13px;border-radius:11px;
  border:1px solid var(--line-soft);background:var(--bg-tile)}
.qrow__ic{width:26px;height:26px;border-radius:8px;display:grid;place-items:center;flex-shrink:0;
  color:var(--c);background:color-mix(in srgb,var(--c) 16%,transparent)}
.qrow b{flex:1;font-size:12.5px;font-weight:600;color:var(--tx-2)}
.qrow span{font-size:13px;font-weight:800;font-variant-numeric:tabular-nums}

/* ─────────────────────────────────────────────────────────────
   5. ENERGY MONITOR
   ───────────────────────────────────────────────────────────── */
.energy{display:flex;gap:16px;align-items:flex-start;flex-wrap:wrap}
.energy__l{display:grid;gap:14px;flex:0 0 148px}
.estat{display:flex;align-items:flex-start;gap:11px}
.estat__ic{width:30px;height:30px;border-radius:9px;display:grid;place-items:center;flex-shrink:0;
  color:var(--c);background:color-mix(in srgb,var(--c) 15%,transparent)}
.estat__k{font-size:11px;color:var(--tx-3);line-height:1.35}
.estat__v{font-size:18px;font-weight:800;margin-top:3px;font-variant-numeric:tabular-nums}
.estat__d{font-size:11px;margin-top:2px}
.energy__c{flex:1;min-width:190px}

/* ─────────────────────────────────────────────────────────────
   6. AI COPILOT INSIGHT
   ───────────────────────────────────────────────────────────── */
.coplist{display:grid;gap:11px;margin-bottom:16px}
.coplist li{display:flex;align-items:flex-start;gap:10px;font-size:12.5px;line-height:1.5;color:var(--tx-2)}
.coplist svg{flex-shrink:0;margin-top:1px;color:var(--up)}
.btn--violet{color:#fff;border:0;
  background:linear-gradient(135deg,#8B7CFF,#5B4BD6);
  box-shadow:0 6px 20px rgba(90,70,220,.4),inset 0 1px 0 rgba(255,255,255,.2)}
.btn--violet:hover{background:linear-gradient(135deg,#A594FF,#6B5AE6);box-shadow:0 10px 28px rgba(120,100,255,.5)}

/* ─────────────────────────────────────────────────────────────
   7. MATERIAL STATUS PILL
   ───────────────────────────────────────────────────────────── */
.mstat{display:inline-flex;align-items:center;gap:7px;font-size:11.5px;font-weight:700;white-space:nowrap}
.mstat i{width:7px;height:7px;border-radius:50%;background:var(--c);flex-shrink:0}
.mstat--ok{--c:#2ED47A;color:#8FE6B8}
.mstat--warn{--c:#FBBF24;color:#FCD9A0}
.mstat--crit{--c:#FB7185;color:#FCA5B4}

/* ─────────────────────────────────────────────────────────────
   8. PLANT SELECTOR / LIVE CLOCK
   ───────────────────────────────────────────────────────────── */
.plantbar{display:flex;align-items:center;gap:14px;flex-wrap:wrap;justify-content:flex-end;margin:-6px 0 18px}
.clockx{display:flex;align-items:center;gap:10px;font-size:13px;color:var(--tx-2)}
.clockx b{font-weight:600}
.clockx i{width:1px;height:15px;background:var(--line);display:inline-block}
.clockx time{font-variant-numeric:tabular-nums;font-weight:700;color:var(--tx)}

/* ─────────────────────────────────────────────────────────────
   9. GRID
   ───────────────────────────────────────────────────────────── */
.kpis--8{grid-template-columns:repeat(8,1fr)}
.g-mfg1{display:grid;grid-template-columns:minmax(0,1.85fr) minmax(0,1fr) minmax(0,1.15fr);gap:16px}
.g-mfg2{display:grid;grid-template-columns:repeat(4,1fr);gap:16px}

@media (max-width:1760px){ .kpis--8{grid-template-columns:repeat(4,1fr)} }
@media (max-width:1560px){
  .g-mfg1{grid-template-columns:minmax(0,1fr) minmax(0,1fr)}
  .g-mfg1 > *:first-child{grid-column:1/-1}
  .g-mfg2{grid-template-columns:repeat(2,1fr)}
}
@media (max-width:1180px){
  .kpis--8{grid-template-columns:repeat(2,1fr)}
  .g-mfg1{grid-template-columns:minmax(0,1fr)}
  .g-mfg1 > *:first-child{grid-column:auto}
  .fzone{font-size:10px;padding:5px 9px}
  .fzone__v{font-size:13px}
}
@media (max-width:680px){
  .kpis--8,.g-mfg2{grid-template-columns:minmax(0,1fr)}
  .brk li{grid-template-columns:92px 1fr 76px}
  .fmap__lgd{position:static;padding:10px 14px 12px}
  .qsplit svg{width:126px;height:126px}
}
@media (prefers-reduced-motion:reduce){ .brk i{transition:none!important} }