/* SteelPulse WMS SaaS v1.7 — Cloudflare/Netlify static */
:root{
  --bg:#050810;--panel:#080d1a;--card:#0d1525;--hover:#111d33;
  --border:#1a2d4a;--border2:#1e3a5f;
  --steel:#4a9eff;--steel2:#1a4a80;--steelGlow:rgba(74,158,255,.18);
  --amber:#f5a623;--amberGlow:rgba(245,166,35,.16);
  --red:#ff3d5a;--redGlow:rgba(255,61,90,.14);
  --green:#00e676;--greenGlow:rgba(0,230,118,.14);
  --purple:#b44fff;--purpleGlow:rgba(180,79,255,.14);
  --cyan:#22d3ee;
  --text:#e8f0fe;--muted:#6b8cae;--dim:#3a5070;
  --display:'Barlow Condensed',system-ui,-apple-system,Segoe UI,sans-serif;
  --mono:'Share Tech Mono',ui-monospace,SFMono-Regular,Consolas,monospace;
  --ui:'Rajdhani',system-ui,-apple-system,Segoe UI,sans-serif;
}
*{box-sizing:border-box}
html,body{height:100%}
body{margin:0;background:var(--bg);color:var(--text);font-family:var(--ui)}

.topbar{height:66px;display:flex;align-items:center;justify-content:space-between;padding:0 16px;background:var(--panel);border-bottom:1px solid var(--border);gap:12px}
.brand{display:flex;align-items:center;gap:12px;min-width:0}
.mark{width:36px;height:36px;border-radius:10px;background:linear-gradient(135deg,var(--steel),#0055cc);display:flex;align-items:center;justify-content:center;font-weight:900;letter-spacing:1px;box-shadow:0 0 18px rgba(74,158,255,.25)}
.title{font-family:var(--display);font-weight:900;letter-spacing:2px;text-transform:uppercase;color:var(--steel);line-height:1}
.subtitle{font-family:var(--mono);font-size:10px;color:var(--dim);letter-spacing:1.5px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:52vw}

.right{display:flex;align-items:center;gap:10px;flex-wrap:wrap;justify-content:flex-end}
.live{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;color:var(--green);letter-spacing:1px}
.dot{width:6px;height:6px;border-radius:50%;background:var(--green);animation:pulse 1.5s infinite}
@keyframes pulse{0%,100%{opacity:1}50%{opacity:.35}}
.clock{font-family:var(--mono);font-size:12px;color:var(--muted);background:var(--card);border:1px solid var(--border);padding:6px 10px;border-radius:10px}

.btn{background:var(--card);border:1px solid var(--border);color:var(--muted);border-radius:10px;padding:8px 10px;cursor:pointer;transition:.15s}
.btn:hover{border-color:var(--steel2);color:var(--steel)}
.btn.primary{background:var(--steel);color:#06101f;border-color:transparent;font-weight:800}
.btn.primary:hover{filter:brightness(1.06)}
.btn.ghost{background:transparent}

.toggles{display:flex;gap:8px;flex-wrap:wrap}
.toggle{display:flex;align-items:center;gap:6px;font-family:var(--mono);font-size:10px;color:var(--dim);border:1px solid var(--border);border-radius:999px;padding:5px 8px;background:rgba(255,255,255,.02)}
.toggle input{accent-color: var(--steel)}

.wrap{padding:14px;display:grid;grid-template-columns: 1.7fr 1fr;gap:12px;align-items:start}
.panel{background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;display:flex;flex-direction:column}
.panel-head{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}
.panel-title{font-family:var(--display);font-weight:900;letter-spacing:2px;text-transform:uppercase}
.panel-badges{margin-left:auto;display:flex;gap:6px;flex-wrap:wrap}
.badge{font-family:var(--mono);font-size:10px;padding:2px 8px;border-radius:999px;border:1px solid transparent;letter-spacing:1px}
.badge.blue{background:var(--steelGlow);color:var(--steel);border-color:var(--steel2)}
.badge.red{background:var(--redGlow);color:var(--red);border-color:rgba(255,61,90,.3)}
.badge.green{background:var(--greenGlow);color:var(--green);border-color:rgba(0,230,118,.3)}
.badge.amber{background:var(--amberGlow);color:var(--amber);border-color:rgba(245,166,35,.3)}
.badge.purple{background:var(--purpleGlow);color:var(--purple);border-color:rgba(180,79,255,.3)}

.map-wrap{padding:14px}
.warehouse-svg{width:100%;height:auto;background:rgba(255,255,255,.015);border:1px solid var(--border);border-radius:14px}
.wh-border{fill:none;stroke:rgba(74,158,255,.18);stroke-width:2}
.crane-lane{stroke:rgba(245,166,35,.65);stroke-width:3}
.ped-path{stroke:rgba(34,211,238,.7);stroke-width:2;stroke-dasharray:8 7}
.lane-label{font-family:var(--mono);font-size:10px;fill:rgba(245,166,35,.85);letter-spacing:1px}
.lane-label.cyan{fill:rgba(34,211,238,.9)}

/* A-zones */
.zone-group{cursor:pointer}
.zone-box{fill:rgba(255,255,255,.02);stroke:rgba(148,163,184,.35);stroke-width:1;rx:10}
.zone-in{fill:url(#inGrad);stroke:rgba(74,158,255,.55)}
.zone-out{fill:url(#outGrad);stroke:rgba(180,79,255,.45)}
.zone-text{font-family:var(--mono);font-size:12px;fill:#fff;letter-spacing:1px}
.zone-small{font-family:var(--mono);font-size:10px;fill:rgba(232,240,254,.75)}
.zone-fifo{filter:url(#glow)}

/* Special zones */
.special{fill:url(#specialGrad);stroke:rgba(245,166,35,.55);stroke-width:1;rx:12}
.special-text{font-family:var(--mono);font-size:11px;fill:rgba(245,166,35,.95);letter-spacing:1px}

/* Truck bays */
.bay{fill:rgba(0,230,118,.12);stroke:rgba(0,230,118,.45);stroke-width:1;rx:10}
.bay-text{font-family:var(--mono);font-size:11px;fill:rgba(0,230,118,.95);letter-spacing:1px}

/* Cranes */
.crane{fill:rgba(245,166,35,.12);stroke:rgba(245,166,35,.65);stroke-width:1;rx:10}
.crane-text{font-family:var(--mono);font-size:10px;fill:rgba(245,166,35,.95);letter-spacing:1px}

/* Rail */
.rail-track{stroke:rgba(148,163,184,.55);stroke-width:4}
.rail-sleeper{stroke:rgba(148,163,184,.25);stroke-width:2;stroke-dasharray:3 10}
.wagon{fill:rgba(74,158,255,.10);stroke:rgba(74,158,255,.55);stroke-width:1;rx:10}
.wagon.loaded{fill:rgba(0,230,118,.10);stroke:rgba(0,230,118,.55)}
.wagon.hold{fill:rgba(245,166,35,.10);stroke:rgba(245,166,35,.55)}
.wagon-text{font-family:var(--mono);font-size:10px;fill:rgba(232,240,254,.9)}

.legend{margin-top:10px;display:flex;gap:10px;flex-wrap:wrap}
.leg{font-family:var(--mono);font-size:10px;color:var(--dim);display:flex;align-items:center;gap:6px}
.chip{width:10px;height:10px;border-radius:4px;display:inline-block}
.chip.in{background:rgba(74,158,255,.7)}
.chip.out{background:rgba(180,79,255,.7)}
.chip.fifo{background:rgba(255,61,90,.85)}
.chip.crane{background:rgba(245,166,35,.85)}
.chip.ped{background:rgba(34,211,238,.9)}
.chip.bay{background:rgba(0,230,118,.65)}
.chip.special{background:rgba(245,166,35,.7)}
.chip.rail{background:rgba(148,163,184,.7)}

.panel-body{padding:14px}
.method{border:1px solid var(--border);border-radius:14px;padding:10px 12px;background:rgba(255,255,255,.02);margin-bottom:10px}
.method-title{font-family:var(--display);font-weight:900;letter-spacing:1.5px;text-transform:uppercase;font-size:12px;margin-bottom:4px}
.method-text{color:var(--muted);font-size:12px;line-height:1.35}
.hint{margin-top:10px;font-family:var(--mono);font-size:11px;color:var(--dim)}
.hint code{color:var(--steel)}

/* Modal */
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.65);display:none;align-items:center;justify-content:center;z-index:9999}
.modal-backdrop.show{display:flex}
.modal{width:min(820px,92vw);background:var(--card);border:1px solid var(--border);border-radius:16px;overflow:hidden;box-shadow:0 0 30px rgba(0,0,0,.4)}
.modal-head{padding:12px 14px;border-bottom:1px solid var(--border);display:flex;align-items:center;justify-content:space-between;gap:10px}
.modal-title{font-family:var(--display);font-weight:900;letter-spacing:2px;text-transform:uppercase}
.modal-sub{font-family:var(--mono);font-size:11px;color:var(--muted)}
.modal-body{padding:14px;display:grid;grid-template-columns:1fr 1fr;gap:12px}
.modal-actions{padding:12px 14px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end}

.card{border:1px solid var(--border);border-radius:14px;overflow:hidden}
.card-head{padding:10px 12px;border-bottom:1px solid var(--border);display:flex;justify-content:space-between;align-items:center;gap:10px}
.card-title{font-family:var(--display);font-weight:900;letter-spacing:1.5px;text-transform:uppercase;font-size:12px}
.pill{font-family:var(--mono);font-size:10px;padding:2px 8px;border-radius:999px;border:1px solid transparent}
.pill.in{background:var(--steelGlow);color:var(--steel);border-color:var(--steel2)}
.pill.out{background:var(--purpleGlow);color:var(--purple);border-color:rgba(180,79,255,.3)}
.pill.fifo{background:var(--redGlow);color:var(--red);border-color:rgba(255,61,90,.3)}
.pill.ok{background:var(--greenGlow);color:var(--green);border-color:rgba(0,230,118,.3)}

.card-body{padding:10px 12px}
.row{display:flex;justify-content:space-between;gap:10px;font-family:var(--mono);font-size:11px;color:var(--muted);padding:6px 0;border-bottom:1px dashed rgba(26,45,74,.6)}
.row:last-child{border-bottom:none}

@media (max-width:1150px){
  .wrap{grid-template-columns:1fr}
  .subtitle{max-width:52vw}
}
@media (max-width:720px){
  .subtitle{display:none}
  .modal-body{grid-template-columns:1fr}
}