/* SteelPulse SaaS Demo v1.4 (Road + Rail + A-Zone split IN/OUT) */
:root{--bg-deep:#050810;--bg-panel:#080d1a;--bg-card:#0d1525;--bg-hover:#111d33;--border:#1a2d4a;--border-bright:#1e3a5f;--steel:#4a9eff;--steel-dim:#1a4a80;--steel-glow:rgba(74,158,255,.15);--amber:#f5a623;--amber-dim:rgba(245,166,35,.15);--red:#ff3d5a;--red-dim:rgba(255,61,90,.12);--green:#00e676;--green-dim:rgba(0,230,118,.12);--purple:#b44fff;--purple-dim:rgba(180,79,255,.12);--text-primary:#e8f0fe;--text-secondary:#6b8cae;--text-dim:#3a5070;--font-display:'Barlow Condensed',system-ui,-apple-system,Segoe UI,sans-serif;--font-mono:'Share Tech Mono',ui-monospace,SFMono-Regular,Menlo,Monaco,Consolas,monospace;--font-ui:'Rajdhani',system-ui,-apple-system,Segoe UI,sans-serif;--radius:12px;--shadow:0 0 24px rgba(0,0,0,.35)}
*,*::before,*::after{box-sizing:border-box}html,body{height:100%}body{margin:0;background:var(--bg-deep);color:var(--text-primary);font-family:var(--font-ui);overflow-x:hidden}button,input,select{font:inherit}
body::before{content:'';position:fixed;inset:0;background-image:url("data:image/svg+xml,%3Csvg viewBox='0 0 200 200' xmlns='http://www.w3.org/2000/svg'%3E%3Cfilter id='n'%3E%3CfeTurbulence type='fractalNoise' baseFrequency='0.9' numOctaves='4' stitchTiles='stitch'/%3E%3C/filter%3E%3Crect width='100%25' height='100%25' filter='url(%23n)' opacity='0.04'/%3E%3C/svg%3E");pointer-events:none;z-index:9999;opacity:.35}
body::after{content:'';position:fixed;inset:0;background:repeating-linear-gradient(0deg,transparent,transparent 2px,rgba(0,0,0,.03) 2px,rgba(0,0,0,.03) 4px);pointer-events:none;z-index:9998}

.app{display:flex;height:100vh;overflow:hidden}
.sidebar{width:76px;background:var(--bg-panel);border-right:1px solid var(--border);display:flex;flex-direction:column;align-items:center;padding:16px 0;gap:6px;flex-shrink:0;z-index:100}
.logo-mark{width:44px;height:44px;background:linear-gradient(135deg,var(--steel),#0055cc);border-radius:12px;display:flex;align-items:center;justify-content:center;margin-bottom:16px;position:relative;overflow:hidden;box-shadow:var(--shadow)}
.logo-mark::after{content:'';position:absolute;inset:0;background:linear-gradient(45deg,transparent 40%,rgba(255,255,255,.15) 50%,transparent 60%);animation:shimmer 3s infinite}
@keyframes shimmer{0%,100%{transform:translateX(-100%)}50%{transform:translateX(100%)}}
.logo-mark svg{width:22px;height:22px;fill:#fff;position:relative;z-index:1}
.nav-group{display:flex;flex-direction:column;gap:6px;width:100%;align-items:center}
.nav-sep{width:40px;height:1px;background:var(--border);margin:10px 0}
.nav-item{width:48px;height:48px;border-radius:14px;display:flex;align-items:center;justify-content:center;cursor:pointer;transition:all .18s ease;position:relative;color:var(--text-dim);border:1px solid transparent;background:transparent;outline:none}
.nav-item:hover{background:var(--bg-hover);color:var(--text-secondary)}
.nav-item.active{background:var(--steel-glow);color:var(--steel);border-color:var(--steel-dim)}
.nav-item.active::before{content:'';position:absolute;left:-1px;top:50%;transform:translateY(-50%);width:3px;height:22px;background:var(--steel);border-radius:0 3px 3px 0}
.nav-item svg{width:18px;height:18px}
.badge{position:absolute;top:7px;right:7px;width:9px;height:9px;background:var(--red);border-radius:50%;border:2px solid var(--bg-panel);animation:pulse-badge 2s infinite}
@keyframes pulse-badge{0%,100%{box-shadow:0 0 0 0 rgba(255,61,90,.4)}50%{box-shadow:0 0 0 5px rgba(255,61,90,0)}}

.main{flex:1;display:flex;flex-direction:column;overflow:hidden}
.topbar{height:58px;background:var(--bg-panel);border-bottom:1px solid var(--border);display:flex;align-items:center;padding:0 18px;gap:14px;flex-shrink:0}
.topbar-brand{font-family:var(--font-display);font-weight:800;font-size:20px;letter-spacing:3px;text-transform:uppercase;color:var(--steel);text-shadow:0 0 18px rgba(74,158,255,.55);user-select:none}
.topbar-sub{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);letter-spacing:2px;border-left:1px solid var(--border);padding-left:14px;white-space:nowrap;overflow:hidden;text-overflow:ellipsis;max-width:42vw}
.topbar-spacer{flex:1}
.live-indicator{display:flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:10px;color:var(--green);letter-spacing:1px;user-select:none}
.live-dot{width:6px;height:6px;background:var(--green);border-radius:50%;animation:pulse-green 1.5s infinite}
@keyframes pulse-green{0%,100%{opacity:1}50%{opacity:.35}}
.topbar-time{font-family:var(--font-mono);font-size:13px;color:var(--text-secondary);background:var(--bg-card);border:1px solid var(--border);padding:4px 12px;border-radius:8px}
.topbar-btn{width:36px;height:36px;border-radius:10px;background:var(--bg-card);border:1px solid var(--border);display:flex;align-items:center;justify-content:center;cursor:pointer;color:var(--text-secondary);transition:all .18s ease;position:relative}
.topbar-btn:hover{border-color:var(--steel-dim);color:var(--steel)}
.topbar-btn svg{width:16px;height:16px}
.avatar{width:36px;height:36px;border-radius:50%;background:linear-gradient(135deg,#1a4a80,var(--steel));border:2px solid var(--steel-dim);display:flex;align-items:center;justify-content:center;font-size:12px;font-weight:700;color:#fff;cursor:pointer;user-select:none}

.content{flex:1;overflow-y:auto;padding:16px 18px 24px;display:flex;flex-direction:column;gap:16px}
.page-header{display:flex;align-items:flex-end;gap:16px}.page-title{font-family:var(--font-display);font-weight:700;font-size:28px;letter-spacing:2px;text-transform:uppercase;line-height:1}.page-subtitle{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);letter-spacing:2px;margin-bottom:3px;text-transform:uppercase}.page-header-right{margin-left:auto;display:flex;gap:8px;align-items:center}
.btn{font-family:var(--font-display);font-size:13px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:8px 16px;border-radius:9px;border:none;cursor:pointer;transition:all .18s ease}.btn-ghost{background:transparent;border:1px solid var(--border);color:var(--text-secondary)}.btn-primary{background:var(--steel);color:var(--bg-deep);box-shadow:0 0 20px rgba(74,158,255,.3)}.btn-primary:hover{background:#6ab5ff;box-shadow:0 0 30px rgba(74,158,255,.5)}

.kpi-strip{display:grid;grid-template-columns:repeat(6,1fr);gap:10px}.kpi-card{background:var(--bg-card);border:1px solid var(--border);border-radius:var(--radius);padding:14px;position:relative;overflow:hidden;transition:all .22s ease}.kpi-card::before{content:'';position:absolute;top:0;left:0;right:0;height:2px;background:var(--accent,var(--steel));opacity:.7}.kpi-label{font-family:var(--font-mono);font-size:9px;letter-spacing:1.5px;color:var(--text-dim);text-transform:uppercase;margin-bottom:8px}.kpi-value{font-family:var(--font-display);font-size:28px;font-weight:700;line-height:1}.kpi-unit{font-size:14px;color:var(--text-secondary)}.kpi-change{font-family:var(--font-mono);font-size:10px;margin-top:4px}.kpi-change.up{color:var(--green)}.kpi-change.down{color:var(--red)}.kpi-change.neutral{color:var(--text-dim)}.kpi-spark{position:absolute;right:8px;bottom:8px;opacity:.3}

.main-grid{display:grid;grid-template-columns:1fr 1fr 380px;grid-template-rows:auto auto;gap:12px}.panel{background:var(--bg-card);border:1px solid var(--border);border-radius:14px;overflow:hidden;display:flex;flex-direction:column}.panel-header{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px;flex-shrink:0}.panel-title{font-family:var(--font-display);font-size:13px;font-weight:700;letter-spacing:2px;text-transform:uppercase;flex:1}.panel-badge{font-family:var(--font-mono);font-size:10px;padding:2px 8px;border-radius:6px;letter-spacing:1px;white-space:nowrap;border:1px solid transparent}.panel-badge.blue{background:var(--steel-glow);color:var(--steel);border-color:var(--steel-dim)}.panel-badge.amber{background:var(--amber-dim);color:var(--amber);border-color:rgba(245,166,35,.3)}.panel-badge.red{background:var(--red-dim);color:var(--red);border-color:rgba(255,61,90,.3)}.panel-badge.green{background:var(--green-dim);color:var(--green);border-color:rgba(0,230,118,.3)}
.tabs{display:flex;border-bottom:1px solid var(--border);padding:0 16px;flex-wrap:wrap}.tab{font-family:var(--font-display);font-size:11px;font-weight:600;letter-spacing:1.5px;text-transform:uppercase;padding:8px 14px;cursor:pointer;color:var(--text-dim);border-bottom:2px solid transparent;margin-bottom:-1px}.tab.active{color:var(--steel);border-bottom-color:var(--steel)}
.filter-row{display:flex;gap:8px;padding:8px 16px;border-bottom:1px solid var(--border);align-items:center;flex-wrap:wrap}.filter-chip{font-family:var(--font-mono);font-size:9px;letter-spacing:1px;padding:3px 10px;border-radius:6px;border:1px solid var(--border);background:transparent;color:var(--text-dim);cursor:pointer;text-transform:uppercase}.filter-chip.active{background:var(--steel-glow);border-color:var(--steel-dim);color:var(--steel)}
.search-box{display:flex;align-items:center;gap:6px;background:var(--bg-panel);border:1px solid var(--border);border-radius:8px;padding:0 10px;margin-left:auto}.search-box svg{width:12px;height:12px;color:var(--text-dim)}.search-box input{background:transparent;border:none;outline:none;font-family:var(--font-mono);font-size:11px;color:var(--text-primary);width:160px;padding:8px 0}
.scroll-area{overflow-y:auto;flex:1}

.shipment-row{display:grid;grid-template-columns:90px 1fr 150px 92px 120px 98px;align-items:center;padding:10px 16px;border-bottom:1px solid var(--border);gap:8px}
.shipment-row.header{background:rgba(255,255,255,.02);position:sticky;top:0;z-index:5}
.col-label{font-family:var(--font-mono);font-size:9px;letter-spacing:1.5px;color:var(--text-dim);text-transform:uppercase}
.ship-id{font-family:var(--font-mono);font-size:11px;color:var(--steel)}.ship-dest{font-size:13px;font-weight:600}.ship-dest-sub{font-size:10px;color:var(--text-secondary);font-family:var(--font-mono)}.ship-weight{font-family:var(--font-mono);font-size:12px;color:var(--text-secondary)}
.tag{display:inline-flex;align-items:center;gap:6px;font-family:var(--font-mono);font-size:9px;letter-spacing:1px;padding:2px 8px;border-radius:999px;border:1px solid var(--border);text-transform:uppercase}.tag.road{border-color:rgba(74,158,255,.35);color:var(--steel);background:rgba(74,158,255,.08)}.tag.rail{border-color:rgba(180,79,255,.35);color:var(--purple);background:rgba(180,79,255,.08)}
.status-pill{display:inline-flex;align-items:center;gap:4px;font-family:var(--font-mono);font-size:9px;letter-spacing:1px;padding:3px 8px;border-radius:6px;text-transform:uppercase;white-space:nowrap}.status-pill::before{content:'';width:5px;height:5px;border-radius:50%}
.status-pill.tendering{background:var(--amber-dim);color:var(--amber);border:1px solid rgba(245,166,35,.25)}.status-pill.confirmed{background:var(--green-dim);color:var(--green);border:1px solid rgba(0,230,118,.25)}.status-pill.building{background:var(--steel-glow);color:var(--steel);border:1px solid var(--steel-dim)}.status-pill.exception{background:var(--red-dim);color:var(--red);border:1px solid rgba(255,61,90,.25)}.status-pill.yard-check{background:var(--purple-dim);color:var(--purple);border:1px solid rgba(180,79,255,.25)}
.action-btn{font-family:var(--font-mono);font-size:9px;letter-spacing:1px;padding:6px 10px;border-radius:8px;border:1px solid var(--border);background:transparent;color:var(--text-secondary);cursor:pointer;text-transform:uppercase}

/* Yard split IN/OUT */
.bottom-row{display:grid;grid-template-columns:1fr 1fr 1fr;gap:12px}
.yard-grid{display:grid;gap:6px;padding:16px}
.yard-cell{border-radius:10px;border:1px solid var(--border);position:relative;overflow:hidden}
.yard-head{display:flex;align-items:center;justify-content:space-between;padding:6px 8px;background:rgba(255,255,255,.02);border-bottom:1px solid var(--border)}
.zone-id{font-family:var(--font-mono);font-size:10px;letter-spacing:1px;color:#fff;font-weight:700}
.zone-cap{font-family:var(--font-mono);font-size:9px;color:var(--text-dim)}

.split{display:grid;grid-template-columns:1fr 1fr;gap:0}
.half{min-height:52px;display:flex;flex-direction:column;align-items:center;justify-content:center;gap:2px}
.half.in{background:rgba(74,158,255,.10);border-right:1px solid var(--border)}
.half.out{background:rgba(180,79,255,.08)}
.half-label{font-family:var(--font-mono);font-size:9px;color:var(--text-dim);letter-spacing:1px;text-transform:uppercase}
.half-val{font-family:var(--font-display);font-size:18px;font-weight:700}
.half-val.low{color:var(--green)}.half-val.med{color:var(--steel)}.half-val.high{color:var(--amber)}.half-val.full{color:var(--red)}

.fifo-flag{position:absolute;top:8px;right:8px;font-family:var(--font-mono);font-size:9px;color:var(--red);background:rgba(255,61,90,.10);border:1px solid rgba(255,61,90,.25);padding:2px 6px;border-radius:999px;letter-spacing:1px}

@keyframes fifo-flash{0%,100%{box-shadow:0 0 0 0 rgba(255,61,90,.0)}50%{box-shadow:0 0 0 6px rgba(255,61,90,.10)}}
.yard-cell.fifo{animation:fifo-flash 1.5s infinite;border-color:rgba(255,61,90,.5)}

/* Tender, exceptions, agents, carrier lists (keep from v1.3 minimal) */
.tender-item{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;flex-direction:column;gap:8px}.tender-top{display:flex;align-items:center;gap:8px}.tender-id{font-family:var(--font-mono);font-size:11px;color:var(--steel);flex:1}.tender-carriers{display:flex;gap:4px;flex-wrap:wrap}.carrier-chip{font-family:var(--font-mono);font-size:9px;padding:2px 6px;border-radius:6px}.carrier-chip.accepted{background:var(--green-dim);color:var(--green)}.carrier-chip.declined{background:var(--red-dim);color:var(--red)}.carrier-chip.pending{background:var(--amber-dim);color:var(--amber)}.tender-progress-bar{height:4px;background:var(--border);border-radius:2px;overflow:hidden}.tender-progress-fill{height:100%;border-radius:2px;transition:width .35s ease}.tender-meta{display:flex;justify-content:space-between;font-family:var(--font-mono);font-size:9px;color:var(--text-dim)}
.exception-item{padding:12px 16px;border-bottom:1px solid var(--border);display:flex;gap:10px}.exc-severity{width:3px;border-radius:2px}.exc-severity.critical{background:var(--red)}.exc-severity.warning{background:var(--amber)}.exc-severity.info{background:var(--steel)}
.exc-type{font-family:var(--font-mono);font-size:9px;letter-spacing:1.5px;color:var(--text-dim);text-transform:uppercase;margin-bottom:2px}.exc-message{font-size:12px;font-weight:500}.exc-sub{font-size:11px;color:var(--text-secondary);margin-top:2px}.exc-time{font-family:var(--font-mono);font-size:9px;color:var(--text-dim)}
.agent-panel{padding:12px 16px;display:flex;flex-direction:column;gap:8px}.agent-row{display:flex;align-items:center;gap:10px;padding:10px 10px;border-radius:14px;background:var(--bg-panel);border:1px solid var(--border)}.agent-dot{width:8px;height:8px;border-radius:50%}.agent-dot.running{background:var(--green)}.agent-dot.idle{background:var(--text-dim)}.agent-dot.busy{background:var(--amber)}.agent-name{font-size:12px;font-weight:600;flex:1}.agent-status{font-family:var(--font-mono);font-size:9px;color:var(--text-dim)}.agent-count{font-family:var(--font-mono);font-size:10px;color:var(--text-secondary)}
.carrier-row{display:grid;grid-template-columns:28px 1fr 60px 80px 78px;align-items:center;padding:8px 16px;border-bottom:1px solid var(--border);gap:8px}.carrier-name{font-size:12px;font-weight:600}.carrier-rank{font-family:var(--font-mono);font-size:10px;color:var(--text-dim)}.carrier-otif{font-family:var(--font-mono);font-size:12px;font-weight:700}.otif-bar-wrap{height:4px;background:var(--border);border-radius:2px;overflow:hidden}.otif-bar{height:100%;border-radius:2px}.carrier-score{font-family:var(--font-mono);font-size:10px;padding:2px 6px;border-radius:8px;display:inline-block;text-align:center}

.view{display:none}.view.active{display:block}
.modal-backdrop{position:fixed;inset:0;background:rgba(0,0,0,.55);display:none;align-items:center;justify-content:center;z-index:20000}.modal-backdrop.show{display:flex}.modal{width:min(720px,92vw);background:var(--bg-card);border:1px solid var(--border);border-radius:18px;box-shadow:var(--shadow);overflow:hidden}.modal-head{padding:14px 16px;border-bottom:1px solid var(--border);display:flex;align-items:center;gap:10px}.modal-title{font-family:var(--font-display);font-weight:700;letter-spacing:2px;text-transform:uppercase}.modal-body{padding:16px}.modal-actions{padding:14px 16px;border-top:1px solid var(--border);display:flex;gap:10px;justify-content:flex-end}.field{display:flex;flex-direction:column;gap:6px;margin-bottom:12px}.label{font-family:var(--font-mono);font-size:10px;color:var(--text-dim);letter-spacing:1.5px;text-transform:uppercase}.input,select{background:var(--bg-panel);border:1px solid var(--border);border-radius:10px;color:var(--text-primary);padding:10px 12px}.helper{font-size:12px;color:var(--text-secondary)}
@media (max-width:1200px){.main-grid{grid-template-columns:1fr}.bottom-row{grid-template-columns:1fr}.kpi-strip{grid-template-columns:repeat(3,1fr)}}@media (max-width:860px){.sidebar{display:none}.kpi-strip{grid-template-columns:repeat(2,1fr)}.topbar-sub{display:none}}@media (max-width:520px){.kpi-strip{grid-template-columns:1fr}.page-header{flex-direction:column;align-items:flex-start}.page-header-right{margin-left:0}.shipment-row{grid-template-columns:1fr;gap:6px}.shipment-row.header{display:none}.search-box input{width:120px}}