/* ============================================================
   WMS Agile Simulator — Cockpit CSS
   Tema: Dark Neon / Videogame HUD
   ============================================================ */

/* Variabili (eredita da style.css + extend) */
:root {
    --sim-bg:         #04060f;
    --sim-panel:      #080c1a;
    --sim-border:     #0d1a2e;
    --sim-accent:     #00d4ff;
    --sim-green:      #00ff88;
    --sim-orange:     #ff8c00;
    --sim-red:        #ff3860;
    --sim-purple:     #7c3aed;
    --sim-gold:       #ffd700;
    --sim-text:       #c8d8f0;
    --sim-muted:      #4a5a78;
    --sim-header-h:   52px;
    --sim-pipeline-h: 64px;
    --sim-bottom-h:   150px;
    --sim-right-w:    280px;
}

/* ============================================================
   LAYOUT COCKPIT
   ============================================================ */
html, body { height: 100%; overflow: hidden; }

#sim-cockpit {
    display: flex;
    flex-direction: column;
    height: 100vh;
    background: var(--sim-bg);
    background-image:
        radial-gradient(ellipse at 0% 0%, rgba(0,212,255,0.04) 0%, transparent 50%),
        radial-gradient(ellipse at 100% 100%, rgba(124,58,237,0.04) 0%, transparent 50%),
        linear-gradient(rgba(0,212,255,0.015) 1px, transparent 1px),
        linear-gradient(90deg, rgba(0,212,255,0.015) 1px, transparent 1px);
    background-size: 100% 100%, 100% 100%, 40px 40px, 40px 40px;
    font-family: 'Inter', 'Segoe UI', monospace;
    color: var(--sim-text);
    overflow: hidden;
}

/* ============================================================
   HEADER — barra superiore
   ============================================================ */
.sim-header {
    height: var(--sim-header-h);
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 0 12px;
    background: rgba(4,6,15,0.95);
    border-bottom: 1px solid var(--sim-border);
    box-shadow: 0 1px 20px rgba(0,212,255,0.08);
    flex-shrink: 0;
    position: relative;
    z-index: 10;
}

.sim-header::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0;
    height: 1px;
    background: linear-gradient(90deg, transparent, var(--sim-accent), transparent);
    opacity: 0.4;
}

.sim-brand {
    display: flex;
    align-items: center;
    gap: 8px;
    min-width: 200px;
}

.sim-logo {
    font-size: 1.4rem;
    color: var(--sim-accent);
    text-shadow: 0 0 15px var(--sim-accent);
    animation: pulse-glow 3s ease-in-out infinite;
}

.sim-title {
    font-size: 1.0rem;
    font-weight: 800;
    letter-spacing: 0.15em;
    color: var(--sim-accent);
    text-transform: uppercase;
}

.sim-scenario {
    font-size: 0.75rem;
    color: var(--sim-muted);
    letter-spacing: 0.05em;
}

/* Facility tabs */
.sim-facility-tabs {
    display: flex;
    gap: 4px;
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--sim-border);
    border-radius: 6px;
    padding: 3px;
}

.sim-fac-btn {
    background: none;
    border: none;
    color: var(--sim-muted);
    font-size: 0.82rem;
    font-weight: 700;
    padding: 4px 12px;
    border-radius: 4px;
    cursor: pointer;
    letter-spacing: 0.08em;
    transition: all 0.15s;
    font-family: inherit;
}

.sim-fac-btn.active {
    background: rgba(0,212,255,0.15);
    color: var(--sim-accent);
    box-shadow: 0 0 8px rgba(0,212,255,0.2);
}

.sim-fac-btn:hover:not(.active) { color: var(--sim-text); background: rgba(255,255,255,0.05); }

/* Speed controls */
.sim-controls {
    display: flex;
    gap: 3px;
    align-items: center;
}

.sim-speed-btn {
    background: rgba(0,0,0,0.4);
    border: 1px solid var(--sim-border);
    color: var(--sim-muted);
    font-size: 0.70rem;
    font-weight: 700;
    padding: 3px 5px;
    border-radius: 4px;
    cursor: pointer;
    font-family: 'Fira Code', monospace;
    letter-spacing: 0.03em;
    transition: all 0.15s;
    min-width: 26px;
}

.sim-speed-btn.active {
    background: rgba(0,212,255,0.2);
    border-color: var(--sim-accent);
    color: var(--sim-accent);
    box-shadow: 0 0 8px rgba(0,212,255,0.3);
}

.sim-speed-btn:hover:not(.active) { border-color: #2d4070; color: var(--sim-text); }

.sim-play-btn {
    background: rgba(0,255,136,0.1);
    border: 1px solid rgba(0,255,136,0.3);
    color: var(--sim-green);
    font-size: 0.8rem;
    padding: 5px 10px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
    margin-left: 4px;
}

.sim-play-btn:hover { background: rgba(0,255,136,0.2); }
.sim-play-btn.active { background: rgba(255,140,0,0.1); border-color: rgba(255,140,0,0.3); color: var(--sim-orange); }

.sim-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
}

/* Clock */
.sim-clock {
    font-size: 1.3rem;
    font-weight: 800;
    font-family: 'Fira Code', monospace;
    color: var(--sim-accent);
    letter-spacing: 0.1em;
    text-shadow: 0 0 12px rgba(0,212,255,0.5);
    min-width: 60px;
    text-align: center;
}

/* Score */
.sim-score-wrap {
    display: flex;
    flex-direction: column;
    align-items: center;
    position: relative;
}

.sim-score-label {
    font-size: 0.55rem;
    color: var(--sim-muted);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

.sim-score {
    font-size: 1.1rem;
    font-weight: 900;
    color: var(--sim-gold);
    font-family: 'Fira Code', monospace;
    text-shadow: 0 0 12px rgba(255,215,0,0.4);
    transition: transform 0.2s;
}

.sim-score.score-pop { transform: scale(1.2); }

.score-delta {
    position: absolute;
    top: -20px;
    color: var(--sim-gold);
    font-size: 0.75rem;
    font-weight: 700;
    animation: score-float 1s ease-out forwards;
    pointer-events: none;
    white-space: nowrap;
}

.sim-btn-secondary {
    background: rgba(0,0,0,0.3);
    border: 1px solid var(--sim-border);
    color: var(--sim-muted);
    font-size: 0.75rem;
    padding: 5px 8px;
    border-radius: 4px;
    cursor: pointer;
    transition: all 0.15s;
}

.sim-btn-secondary:hover { border-color: var(--sim-accent); color: var(--sim-accent); }

/* ============================================================
   CORPO — mappa + pannello destro
   ============================================================ */
.sim-body {
    flex: 1;
    display: flex;
    gap: 0;
    overflow: hidden;
    min-height: 0;
}

/* ============================================================
   MAPPA SVG
   ============================================================ */
.sim-map-panel {
    flex: 1;
    display: flex;
    flex-direction: column;
    border-right: 1px solid var(--sim-border);
    overflow: hidden;
}

.sim-panel-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 12px;
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--sim-muted);
    border-bottom: 1px solid var(--sim-border);
    background: rgba(0,0,0,0.2);
    flex-shrink: 0;
}

.sim-panel-header span:first-child { color: var(--sim-accent); }

.sim-badge {
    background: rgba(0,212,255,0.1);
    border: 1px solid rgba(0,212,255,0.25);
    color: var(--sim-accent);
    font-size: 0.72rem;
    padding: 2px 7px;
    border-radius: 10px;
    font-weight: 700;
}

.sim-badge.danger      { background: rgba(255,56,96,0.1); border-color: rgba(255,56,96,0.3); color: var(--sim-red); }
.sim-badge.cold        { background: rgba(0,180,255,0.12); border-color: rgba(0,180,255,0.35); color: #48cae4; }
.sim-badge.cold-breach { background: rgba(255,56,96,0.15); border-color: rgba(0,180,255,0.5); color: #ff6b9d; animation: pulse-cold 1.5s infinite; }
@keyframes pulse-cold  { 0%,100% { opacity:1; } 50% { opacity:.5; } }

.sim-map-wrapper {
    flex: 1;
    overflow: auto;
    padding: 6px;
    background: rgba(4,6,15,0.5);
}

.sim-map-loading {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    gap: 10px;
    color: var(--sim-muted);
    font-size: 0.8rem;
}

.sim-map-legend {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 5px 12px;
    font-size: 0.62rem;
    color: var(--sim-muted);
    border-top: 1px solid var(--sim-border);
    background: rgba(0,0,0,0.2);
    flex-wrap: wrap;
    flex-shrink: 0;
}

.sim-legend-item { display: flex; align-items: center; gap: 4px; }
.sim-legend-item.cold    { color: #00b4d8; }
.sim-legend-item.frozen  { color: #7cd8f8; }
.sim-legend-item.ambient { color: #94a3b8; }
.sim-legend-item.sep     { color: var(--sim-border); }

.sim-legend-dot {
    width: 8px; height: 8px;
    border-radius: 50%;
    display: inline-block;
}

/* SVG animations */
.map-zone.zone-flash rect {
    animation: zone-flash 1.5s ease-out;
}

.map-resource.agv-flash circle {
    animation: agv-flash 1s ease-out;
}

/* ============================================================
   PANNELLO DESTRO
   ============================================================ */
.sim-right-panel {
    width: var(--sim-right-w);
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overflow-x: hidden;
    flex-shrink: 0;
    background: rgba(4,6,15,0.8);
}

/* KPI Grid */
.sim-kpi-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 4px;
    padding: 6px;
}

.sim-kpi-card {
    background: rgba(13,21,38,0.8);
    border: 1px solid var(--sim-border);
    border-radius: 6px;
    padding: 6px 8px;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
    text-align: center;
    transition: border-color 0.3s;
}

.sim-kpi-card.success { border-color: rgba(0,255,136,0.2); }
.sim-kpi-card.warning { border-color: rgba(255,140,0,0.2); }
.sim-kpi-card.danger  { border-color: rgba(255,56,96,0.3); background: rgba(255,56,96,0.04); }

.sim-kpi-icon  { font-size: 0.85rem; opacity: 0.7; line-height: 1; }
.sim-kpi-value { font-size: 1.5rem; font-weight: 800; font-family: 'Fira Code', monospace; color: var(--sim-accent); line-height: 1; }
.sim-kpi-label { font-size: 0.60rem; color: var(--sim-muted); text-align: center; letter-spacing: 0.03em; line-height: 1.2; }

/* Temperature Gauges */
.sim-temp-gauges {
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: 6px;
}

.sim-temp-gauge {
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--sim-border);
    border-radius: 6px;
    padding: 7px 10px;
    transition: border-color 0.3s;
}

.sim-temp-gauge.cold   { border-color: rgba(0,180,216,0.2); }
.sim-temp-gauge.frozen { border-color: rgba(124,216,248,0.2); }

.sim-temp-gauge.temp-anomaly {
    border-color: var(--sim-red) !important;
    animation: temp-pulse 1s ease-in-out infinite;
}

.sim-temp-gauge.temp-flash {
    animation: temp-flash 2s ease-out;
}

.sim-temp-label {
    font-size: 0.72rem;
    font-weight: 700;
    color: var(--sim-muted);
    letter-spacing: 0.08em;
    text-transform: uppercase;
}

.sim-temp-value {
    font-size: 1.1rem;
    font-weight: 800;
    font-family: 'Fira Code', monospace;
    color: #00b4d8;
    transition: color 0.3s;
}

.sim-temp-value.temp-alert { color: var(--sim-red); text-shadow: 0 0 8px rgba(255,56,96,0.5); }

.sim-temp-bar {
    height: 3px;
    background: rgba(255,255,255,0.05);
    border-radius: 2px;
    margin: 4px 0;
    overflow: hidden;
}

.sim-temp-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 1s ease;
}
.sim-temp-fill.cold   { background: linear-gradient(90deg, #00b4d8, #7cd8f8); }
.sim-temp-fill.frozen { background: linear-gradient(90deg, #7cd8f8, #e0f4ff); }

.sim-temp-range { font-size: 0.68rem; color: var(--sim-muted); }

/* Fleet */
.sim-fleet { display: flex; flex-direction: column; gap: 3px; padding: 6px; }

.sim-fleet-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--sim-border);
    border-radius: 5px;
    font-size: 0.78rem;
    transition: all 0.2s;
}

.sim-fleet-item.fleet-warning {
    border-color: rgba(255,140,0,0.4);
    background: rgba(255,140,0,0.05);
    animation: fleet-warn 1s ease-in-out infinite;
}

.sim-fleet-icon { font-size: 1.0rem; }
.sim-fleet-code { font-weight: 700; color: var(--sim-accent); min-width: 60px; font-size: 0.75rem; }

.sim-fleet-battery {
    flex: 1;
    height: 4px;
    background: rgba(255,255,255,0.06);
    border-radius: 2px;
    overflow: hidden;
}

.sim-fleet-batt-fill {
    height: 100%;
    border-radius: 2px;
    transition: width 1s ease, background 0.5s;
}

.sim-fleet-batt-val {
    font-size: 0.7rem;
    color: var(--sim-muted);
    min-width: 28px;
    text-align: right;
    font-family: 'Fira Code', monospace;
}

.sim-fleet-status {
    width: 7px; height: 7px;
    border-radius: 50%;
    flex-shrink: 0;
}
.sim-fleet-status.available { background: var(--sim-green); box-shadow: 0 0 4px var(--sim-green); }
.sim-fleet-status.busy      { background: var(--sim-orange); box-shadow: 0 0 4px var(--sim-orange); }
.sim-fleet-status.charging  { background: var(--sim-gold); box-shadow: 0 0 4px var(--sim-gold); }
.sim-fleet-status.offline   { background: var(--sim-muted); }

/* ============================================================
   PIPELINE FLOW — visualizzazione flusso magazzino
   ============================================================ */
.sim-pipeline {
    display: flex;
    align-items: center;
    gap: 0;
    padding: 0 12px;
    height: 64px;
    background: rgba(4,6,15,0.92);
    border-bottom: 1px solid var(--sim-border);
    flex-shrink: 0;
    position: relative;
}
.sim-pipeline::before {
    content: '';
    position: absolute;
    bottom: 0; left: 0; right: 0; height: 1px;
    background: linear-gradient(90deg, transparent, rgba(0,212,255,0.15), transparent);
}

.sim-pipeline-flow {
    display: flex;
    align-items: center;
    gap: 2px;
    flex: 1;
}

.sim-pipe-stage {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    position: relative;
    padding: 4px 12px;
    border-radius: 6px;
    border: 1px solid rgba(255,255,255,0.05);
    background: rgba(13,26,46,0.6);
    min-width: 72px;
    cursor: default;
    transition: border-color 0.3s, background 0.3s;
}
.sim-pipe-stage:hover {
    border-color: rgba(0,212,255,0.3);
    background: rgba(0,212,255,0.05);
}
.pipe-success {
    border-color: rgba(0,255,136,0.2) !important;
    background: rgba(0,255,136,0.05) !important;
}

.sim-pipe-dot {
    position: absolute;
    top: 5px; right: 5px;
    width: 6px; height: 6px;
    border-radius: 50%;
    background: var(--sim-muted);
    transition: background 0.3s;
}
.sim-pipe-dot.pipe-dot-active {
    background: var(--sim-green);
    box-shadow: 0 0 6px var(--sim-green);
    animation: pipe-pulse 0.5s ease;
}

.sim-pipe-num {
    font-size: 1.1rem;
    font-weight: 700;
    font-family: 'Fira Code', monospace;
    color: var(--sim-accent);
    line-height: 1;
    min-width: 28px;
    text-align: center;
}
.pipe-success .sim-pipe-num { color: var(--sim-green); }

.sim-pipe-icon  { font-size: 0.85rem; line-height: 1; margin: 1px 0; }
.sim-pipe-label {
    font-size: 0.55rem;
    color: var(--sim-muted);
    text-transform: uppercase;
    letter-spacing: 0.06em;
    white-space: nowrap;
    line-height: 1;
}

.sim-pipe-arrow {
    font-size: 0.75rem;
    color: rgba(0,212,255,0.25);
    padding: 0 2px;
    flex-shrink: 0;
    align-self: center;
}

/* Stage flash on new event */
@keyframes pipe-pulse {
    0%   { transform: scale(1.8); opacity: 0.6; }
    100% { transform: scale(1);   opacity: 1;   }
}
.sim-pipe-stage.pipe-stage-flash {
    animation: stage-flash 0.8s ease-out;
}
@keyframes stage-flash {
    0%   { border-color: rgba(0,212,255,0.8); background: rgba(0,212,255,0.12); }
    100% { border-color: rgba(255,255,255,0.05); background: rgba(13,26,46,0.6); }
}

/* Pipeline time info (a destra) */
.sim-pipeline-time {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-left: 12px;
    flex-shrink: 0;
}
.sim-pipe-timecard {
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 4px 10px;
    border-radius: 6px;
    border: 1px solid var(--sim-border);
    background: rgba(8,12,26,0.8);
    min-width: 90px;
    cursor: default;
}
#pipe-speed-card { cursor: help; }
#pipe-speed-card:hover .sim-pipe-tinfo { color: var(--sim-accent); }

.sim-pipe-tlabel {
    font-size: 0.55rem;
    color: var(--sim-muted);
    text-transform: uppercase;
    letter-spacing: 0.08em;
    white-space: nowrap;
}
.sim-pipe-tval {
    font-size: 0.78rem;
    font-family: 'Fira Code', monospace;
    color: var(--sim-text);
    white-space: nowrap;
    line-height: 1.4;
}
.sim-pipe-tinfo {
    font-size: 0.6rem;
    color: var(--sim-muted);
    transition: color 0.2s;
}
.sim-info-countdown { color: var(--sim-text); }
.strip-countdown-urgent { color: var(--sim-red) !important; animation: blink 0.5s infinite; }
.strip-countdown-soon   { color: var(--sim-orange) !important; }

/* ============================================================
   BOTTOM — tab navigation
   ============================================================ */
/* ── Resize handle (drag verticale) ── */
.sim-resize-handle {
    height: 7px;
    flex-shrink: 0;
    background: linear-gradient(90deg, transparent 0%, rgba(0,212,255,0.18) 50%, transparent 100%);
    border-top: 1px solid rgba(0,212,255,0.12);
    cursor: ns-resize;
    transition: background 0.2s;
    position: relative;
}
.sim-resize-handle::after {
    content: '';
    position: absolute;
    left: 50%; top: 50%;
    transform: translate(-50%, -50%);
    width: 40px; height: 3px;
    border-radius: 2px;
    background: rgba(0,212,255,0.35);
}
.sim-resize-handle:hover,
.sim-resize-handle.dragging {
    background: linear-gradient(90deg, transparent 0%, rgba(0,212,255,0.4) 50%, transparent 100%);
}
.sim-resize-handle.dragging::after { background: rgba(0,212,255,0.8); }

.sim-bottom {
    height: var(--sim-bottom-h);
    min-height: 40px;
    display: flex;
    flex-direction: column;
    border-top: 1px solid var(--sim-border);
    flex-shrink: 0;
    background: rgba(4,6,15,0.9);
}

.sim-bottom-tabs {
    display: flex;
    align-items: stretch;
    height: 32px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--sim-border);
    background: rgba(8,12,26,0.9);
}

.sim-tab-btn {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 0 14px;
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.04em;
    text-transform: uppercase;
    color: var(--sim-muted);
    background: transparent;
    border: none;
    border-right: 1px solid var(--sim-border);
    border-bottom: 2px solid transparent;
    cursor: pointer;
    transition: color 0.2s, border-color 0.2s, background 0.2s;
    white-space: nowrap;
}
.sim-tab-btn:hover {
    color: var(--sim-text);
    background: rgba(255,255,255,0.03);
}
.sim-tab-btn.active {
    color: var(--sim-accent);
    border-bottom-color: var(--sim-accent);
    background: rgba(0,212,255,0.04);
}
.sim-tab-btn.sim-tab-alert {
    animation: tab-alert 0.4s ease 3;
}
@keyframes tab-alert {
    0%, 100% { background: transparent; }
    50%       { background: rgba(255,56,96,0.15); color: var(--sim-red); }
}

.sim-tab-spacer { flex: 1; }

.sim-tab-content {
    display: none;
    flex: 1;
    overflow: hidden;
}
.sim-tab-content.active { display: flex; flex-direction: column; }

/* Log inside tab */
.sim-tab-content .sim-log         { flex: 1; overflow-y: auto; padding: 4px 0; }
.sim-tab-content .sim-mission-list { flex: 1; overflow-y: auto; padding: 4px; }
.sim-tab-content .sim-bug-list     { flex: 1; overflow-y: auto; padding: 4px; }
.sim-tab-content .sim-commercial-scroll { flex: 1; overflow-y: auto; padding: 4px; }

/* legacy classes still used in shake animation */
.sim-bug-panel { display: contents; }

/* Event Log */
.sim-log {
    flex: 1;
    overflow-y: auto;
    padding: 4px 0;
}

.sim-log-item {
    display: flex;
    align-items: baseline;
    gap: 6px;
    padding: 2px 10px 2px 12px;
    font-size: 0.74rem;
    border-bottom: 1px solid rgba(255,255,255,0.02);
    border-left: 2px solid transparent;
    opacity: 0.95;
    line-height: 1.4;
}

.sim-log-item.sim-log-new {
    animation: log-flash 0.6s ease-out;
}

.sim-log-time {
    font-family: 'Fira Code', monospace;
    color: var(--sim-muted);
    font-size: 0.7rem;
    min-width: 38px;
    flex-shrink: 0;
}

.sim-log-icon { font-size: 0.78rem; flex-shrink: 0; min-width: 12px; }
.sim-log-msg  { color: var(--sim-text); flex: 1; word-break: break-word; }

.sim-log-item.sim-log-info     { border-left-color: transparent; }
.sim-log-item.sim-log-success  { border-left-color: rgba(0,255,136,0.4); }
.sim-log-item.sim-log-success  .sim-log-msg { color: #7fffd4; }
.sim-log-item.sim-log-warning  { border-left-color: rgba(255,187,68,0.6); background: rgba(255,187,68,0.025); }
.sim-log-item.sim-log-warning  .sim-log-msg { color: #ffbb44; }
.sim-log-item.sim-log-error    { border-left-color: rgba(255,102,128,0.6); background: rgba(255,102,128,0.03); }
.sim-log-item.sim-log-error    .sim-log-msg { color: #ff6680; }
.sim-log-item.sim-log-critical { border-left-color: var(--sim-red); background: rgba(255,56,96,0.06); }
.sim-log-item.sim-log-critical .sim-log-msg { color: #ff3860; font-weight: 700; }

.sim-btn-tiny {
    background: none;
    border: 1px solid var(--sim-border);
    color: var(--sim-muted);
    font-size: 0.58rem;
    padding: 1px 6px;
    border-radius: 3px;
    cursor: pointer;
    font-family: inherit;
}
.sim-btn-tiny:hover { color: var(--sim-accent); border-color: var(--sim-accent); }

/* Missioni */
.sim-mission-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px;
}

.sim-mission-item {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 4px 6px;
    border-radius: 4px;
    margin-bottom: 2px;
    background: rgba(0,0,0,0.15);
    font-size: 0.72rem;
}

.sim-mission-icon { font-size: 0.85rem; }
.sim-mission-info { flex: 1; }
.sim-mission-num  { color: var(--sim-accent); font-weight: 700; font-size: 0.7rem; font-family: 'Fira Code', monospace; }

.sim-mission-prog {
    height: 3px;
    background: rgba(255,255,255,0.05);
    border-radius: 2px;
    margin-top: 3px;
    overflow: hidden;
}

.sim-mission-prog-fill {
    height: 100%;
    background: linear-gradient(90deg, var(--sim-purple), var(--sim-accent));
    border-radius: 2px;
    transition: width 0.5s ease;
}

.sim-mission-pct { font-size: 0.7rem; color: var(--sim-muted); min-width: 28px; text-align: right; }
.sim-empty-state { text-align: center; color: var(--sim-muted); font-size: 0.65rem; padding: 16px 8px; }
.sim-empty-icon  { font-size: 1.4rem; opacity: 0.3; margin-bottom: 6px; }
.sim-empty-sub   { font-size: 0.60rem; color: var(--sim-muted); margin-top: 4px; opacity: 0.6; }

/* Pipeline stall detection */
.sim-pipe-stage.pipe-stage-idle    { opacity: 0.45; }
.sim-pipe-stage.pipe-stage-starved .sim-pipe-num { color: var(--sim-orange, #ff8c00); }
.sim-pipe-stage.pipe-stage-starved { border-color: rgba(255,140,0,0.25); }

/* Pipeline session badge */
.sim-pipe-session-badge {
    display: flex; align-items: center; gap: 3px;
    font-size: 0.46rem; color: var(--sim-muted);
    letter-spacing: 0.1em; text-transform: uppercase;
    flex-shrink: 0; opacity: 0.55; margin-right: 4px;
}
.sim-pipe-session-dot {
    width: 4px; height: 4px; border-radius: 50%;
    background: var(--sim-muted);
    animation: blink 2.5s ease-in-out infinite;
}

/* Bug Panel */
.sim-bug-list {
    flex: 1;
    overflow-y: auto;
    padding: 4px;
}

.sim-bug-empty {
    text-align: center;
    color: var(--sim-green);
    font-size: 0.65rem;
    padding: 16px 8px;
    opacity: 0.7;
}

.sim-bug-item {
    background: rgba(255,56,96,0.06);
    border: 1px solid rgba(255,56,96,0.2);
    border-radius: 4px;
    padding: 5px 8px;
    margin-bottom: 3px;
    font-size: 0.72rem;
}

.sim-bug-header {
    display: flex;
    justify-content: space-between;
    margin-bottom: 2px;
}

.sim-bug-type  { color: var(--sim-red); font-weight: 700; font-size: 0.7rem; }
.sim-bug-time  { color: var(--sim-muted); font-size: 0.68rem; font-family: 'Fira Code', monospace; }
.sim-bug-msg   { color: #ffb0b0; margin-bottom: 3px; line-height: 1.3; }
.sim-bug-detail { display: flex; gap: 8px; font-size: 0.68rem; }
.sim-bug-detail .expected { color: var(--sim-green); }
.sim-bug-detail .actual   { color: var(--sim-red); }

.sim-bug-panel.sim-bug-shake { animation: shake 0.5s ease; }

/* ============================================================
   SETUP WIZARD
   ============================================================ */
#sim-setup-overlay {
    position: fixed;
    inset: 0;
    background: rgba(4,6,15,0.95);
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 9999;
}

.sim-setup-modal {
    background: #080c1a;
    border: 1px solid rgba(0,212,255,0.2);
    border-radius: 16px;
    padding: 36px 40px;
    max-width: 580px;
    width: 90%;
    box-shadow: 0 0 80px rgba(0,212,255,0.08), 0 40px 80px rgba(0,0,0,0.6);
    position: relative;
}

.sim-setup-modal::before {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 2px;
    background: linear-gradient(90deg, transparent, var(--sim-accent), var(--sim-purple), transparent);
    border-radius: 16px 16px 0 0;
}

.sim-setup-logo {
    font-size: 2.0rem;
    color: var(--sim-accent);
    text-align: center;
    margin-bottom: 8px;
    font-weight: 900;
    letter-spacing: 0.15em;
    text-shadow: 0 0 20px rgba(0,212,255,0.5);
}

.sim-setup-title {
    font-size: 1.05rem;
    font-weight: 700;
    color: var(--sim-text);
    text-align: center;
    margin-bottom: 24px;
    opacity: 0.85;
}

.sim-setup-steps {
    display: flex;
    flex-direction: column;
    gap: 4px;
    margin-bottom: 20px;
}

.sim-step {
    padding: 8px 14px;
    border-radius: 5px;
    font-size: 0.88rem;
    color: var(--sim-muted);
    background: rgba(0,0,0,0.2);
    border: 1px solid transparent;
    transition: all 0.2s;
}

.sim-step.active {
    color: var(--sim-accent);
    border-color: rgba(0,212,255,0.25);
    background: rgba(0,212,255,0.05);
}

.sim-step.done {
    color: var(--sim-green);
    border-color: rgba(0,255,136,0.15);
    background: rgba(0,255,136,0.04);
}

.sim-step.error {
    color: var(--sim-red);
    border-color: rgba(255,56,96,0.2);
}

.sim-setup-progress {
    height: 4px;
    background: rgba(255,255,255,0.05);
    border-radius: 2px;
    overflow: hidden;
    margin-bottom: 10px;
}

.sim-setup-prog-bar {
    height: 100%;
    background: linear-gradient(90deg, var(--sim-accent), var(--sim-purple));
    border-radius: 2px;
    transition: width 0.5s ease;
}

.sim-setup-msg {
    font-size: 0.85rem;
    color: var(--sim-text);
    text-align: center;
    padding: 6px;
    min-height: 26px;
}

.sim-setup-log {
    max-height: 110px;
    overflow-y: auto;
    font-size: 0.72rem;
    color: var(--sim-muted);
    background: rgba(0,0,0,0.3);
    border-radius: 4px;
    padding: 6px;
    margin-top: 8px;
    font-family: 'Fira Code', monospace;
}

.setup-log-item { padding: 1px 0; border-bottom: 1px solid rgba(255,255,255,0.03); }
.setup-log-item.error { color: var(--sim-red); }

/* ============================================================
   TOAST NOTIFICHE
   ============================================================ */
#sim-toasts {
    position: fixed;
    bottom: calc(var(--sim-bottom-h) + 12px);
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 6px;
    z-index: 8000;
    pointer-events: none;
    max-width: 320px;
}

.sim-toast {
    background: rgba(8,12,26,0.95);
    border: 1px solid;
    border-radius: 6px;
    padding: 8px 14px;
    font-size: 0.72rem;
    color: var(--sim-text);
    opacity: 0;
    transform: translateX(20px);
    transition: all 0.3s ease;
    backdrop-filter: blur(6px);
    line-height: 1.4;
    pointer-events: auto;
    cursor: default;
}

.sim-toast.sim-toast-show { opacity: 1; transform: translateX(0); }

/* ============================================================
   INJECT MENU
   ============================================================ */
.sim-inject-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.6);
    display: flex;
    align-items: center;
    justify-content: center;
    z-index: 7000;
}

.sim-inject-menu {
    background: #0d1528;
    border: 1px solid rgba(0,212,255,0.2);
    border-radius: 12px;
    padding: 20px;
    min-width: 260px;
}

.sim-inject-title {
    font-size: 0.85rem;
    font-weight: 700;
    color: var(--sim-accent);
    text-align: center;
    margin-bottom: 14px;
    letter-spacing: 0.08em;
}

.sim-inject-item {
    display: block;
    width: 100%;
    background: rgba(0,0,0,0.2);
    border: 1px solid var(--sim-border);
    color: var(--sim-text);
    font-size: 0.75rem;
    padding: 8px 14px;
    border-radius: 5px;
    cursor: pointer;
    text-align: left;
    margin-bottom: 4px;
    font-family: inherit;
    transition: all 0.15s;
}

.sim-inject-item:hover { border-color: var(--sim-accent); color: var(--sim-accent); background: rgba(0,212,255,0.05); }

.sim-inject-close {
    display: block;
    width: 100%;
    background: none;
    border: 1px solid rgba(255,56,96,0.2);
    color: var(--sim-red);
    font-size: 0.72rem;
    padding: 6px;
    border-radius: 5px;
    cursor: pointer;
    margin-top: 8px;
    font-family: inherit;
    transition: all 0.15s;
}

.sim-inject-close:hover { background: rgba(255,56,96,0.08); }

/* ============================================================
   ANIMAZIONI
   ============================================================ */
@keyframes pulse-glow {
    0%, 100% { opacity: 1; text-shadow: 0 0 15px var(--sim-accent); }
    50%       { opacity: 0.7; text-shadow: 0 0 30px var(--sim-accent), 0 0 60px rgba(0,212,255,0.3); }
}

@keyframes score-float {
    0%   { opacity: 1; transform: translateY(0); }
    100% { opacity: 0; transform: translateY(-30px); }
}

@keyframes log-flash {
    0%   { background: rgba(0,212,255,0.12); }
    100% { background: transparent; }
}

@keyframes zone-flash {
    0%   { filter: brightness(2) saturate(2); }
    50%  { filter: brightness(1.5) saturate(1.5); }
    100% { filter: brightness(1) saturate(1); }
}

@keyframes agv-flash {
    0%   { filter: brightness(3); }
    100% { filter: brightness(1); }
}

@keyframes temp-pulse {
    0%, 100% { box-shadow: 0 0 5px rgba(255,56,96,0.2); }
    50%       { box-shadow: 0 0 15px rgba(255,56,96,0.5); }
}

@keyframes temp-flash {
    0%   { background: rgba(255,56,96,0.15); }
    100% { background: transparent; }
}

@keyframes fleet-warn {
    0%, 100% { box-shadow: none; }
    50%       { box-shadow: 0 0 8px rgba(255,140,0,0.4); }
}

@keyframes shake {
    0%, 100% { transform: translateX(0); }
    20%  { transform: translateX(-4px); }
    40%  { transform: translateX(4px); }
    60%  { transform: translateX(-3px); }
    80%  { transform: translateX(3px); }
}

/* ============================================================
   SCROLLBAR tema simulatore
   ============================================================ */
.sim-log::-webkit-scrollbar,
.sim-mission-list::-webkit-scrollbar,
.sim-bug-list::-webkit-scrollbar,
.sim-right-panel::-webkit-scrollbar,
.sim-setup-log::-webkit-scrollbar { width: 3px; }

.sim-log::-webkit-scrollbar-track,
.sim-mission-list::-webkit-scrollbar-track,
.sim-bug-list::-webkit-scrollbar-track { background: transparent; }

.sim-log::-webkit-scrollbar-thumb,
.sim-mission-list::-webkit-scrollbar-thumb,
.sim-bug-list::-webkit-scrollbar-thumb { background: #1a2540; border-radius: 2px; }

/* ============================================================
   GAMING SYSTEM — Fase 2: Truck Arrival, Stars Explosion,
   Danger Vignette, Zone Tremble, Screen Shake
   ============================================================ */

/* ── Truck Arrival Sprite ── */
.truck-sprite {
    position: fixed;
    z-index: 9300;
    font-size: 2.4rem;
    pointer-events: none;
    line-height: 1;
    filter: drop-shadow(0 0 10px rgba(0,212,255,0.6));
    animation: truck-enter 1.8s cubic-bezier(0.25, 0.46, 0.45, 0.94) forwards;
}

@keyframes truck-enter {
    0%   { transform: translateX(-140px); opacity: 0.4; }
    50%  { opacity: 1; }
    62%  { transform: translateX(var(--dock-x, 20vw)); }
    74%  { transform: translateX(calc(var(--dock-x, 20vw) + 12px)); }
    86%  { transform: translateX(calc(var(--dock-x, 20vw) - 5px)); }
    100% { transform: translateX(var(--dock-x, 20vw)); opacity: 0.85; }
}

/* ── Dust Particles ── */
.dust-particle {
    position: fixed;
    pointer-events: none;
    z-index: 9290;
    border-radius: 50%;
    animation: dust-burst var(--dur, 0.8s) ease-out forwards;
}

@keyframes dust-burst {
    0%   { opacity: 0.9; transform: translate(0, 0) scale(1); }
    100% { opacity: 0;   transform: translate(var(--dx, 20px), var(--dy, -30px)) scale(0.15); }
}

/* ── Mission Stars Explosion ── */
.mission-star {
    position: fixed;
    pointer-events: none;
    z-index: 9350;
    font-size: 1.1rem;
    line-height: 1;
    animation: star-burst var(--dur, 1.0s) ease-out forwards;
}

@keyframes star-burst {
    0%   { opacity: 1;   transform: translate(0, 0) scale(1.2) rotate(0deg); }
    30%  { opacity: 1;   transform: translate(calc(var(--tx,50px) * 0.3), calc(var(--ty,-60px) * 0.3)) scale(1.4) rotate(calc(var(--rot,180deg) * 0.3)); }
    100% { opacity: 0;   transform: translate(var(--tx, 50px), var(--ty, -60px)) scale(0.2) rotate(var(--rot, 180deg)); }
}

/* ── Danger Vignette (overlay rosso bordi schermo) ── */
.danger-vignette {
    position: fixed;
    inset: 0;
    pointer-events: none;
    z-index: 9200;
    animation: vignette-pulse var(--loop-dur, 0.7s) ease-in-out var(--loops, 3);
}

@keyframes vignette-pulse {
    0%, 100% { box-shadow: inset 0 0 0px rgba(255,56,96,0); }
    50%       { box-shadow: inset 0 0 90px rgba(255,56,96,0.55), inset 0 0 160px rgba(255,56,96,0.2); }
}

/* ── Screen Shake Critical (NCR blocking / SLA breach) ── */
@keyframes screen-shake-critical {
    0%, 100% { transform: translate(0, 0) rotate(0deg); }
    10%  { transform: translate(-5px, -3px) rotate(-0.3deg); }
    20%  { transform: translate(5px, 3px) rotate(0.3deg); }
    30%  { transform: translate(-4px, 2px) rotate(-0.2deg); }
    40%  { transform: translate(4px, -2px) rotate(0.2deg); }
    50%  { transform: translate(-3px, 3px) rotate(-0.1deg); }
    60%  { transform: translate(3px, -3px) rotate(0.1deg); }
    70%  { transform: translate(-4px, 1px); }
    80%  { transform: translate(4px, -1px); }
    90%  { transform: translate(-2px, 2px); }
}

#sim-cockpit.screen-shake {
    animation: screen-shake-critical 0.6s ease;
}

/* ── Zone Tremble (stock low / NCR sulla zona SVG) ── */
.zone-tremble .map-zone-rect,
.zone-tremble rect {
    animation: zone-tremble-anim 0.35s ease-in-out infinite;
}

@keyframes zone-tremble-anim {
    0%, 100% { transform: translateX(0); }
    25%       { transform: translateX(-2px); }
    75%       { transform: translateX(2px); }
}

/* Overlay rosso sulla zona in pericolo */
.zone-danger-overlay {
    position: absolute;
    pointer-events: none;
    border: 2px solid rgba(255,56,96,0.8);
    border-radius: 3px;
    animation: zone-danger-border 0.6s ease-in-out infinite alternate;
    z-index: 100;
}

@keyframes zone-danger-border {
    0%   { border-color: rgba(255,56,96,0.4); box-shadow: none; }
    100% { border-color: rgba(255,56,96,0.9); box-shadow: 0 0 12px rgba(255,56,96,0.5); }
}

/* ============================================================
   GAMING SYSTEM — Achievement Toasts, Combo Banner, HP Bars,
   Score Popup Float (Fase 1 — Quick Wins)
   ============================================================ */

/* ── Achievement Toast Container ── */
#sim-achievements {
    position: fixed;
    top: calc(var(--sim-header-h) + 12px);
    right: 16px;
    display: flex;
    flex-direction: column;
    gap: 8px;
    z-index: 9500;
    pointer-events: none;
    max-width: 280px;
}

.achievement-toast {
    background: linear-gradient(135deg, rgba(8,12,26,0.97), rgba(22,18,6,0.97));
    border: 1px solid var(--sim-gold);
    border-radius: 10px;
    padding: 10px 14px;
    display: flex;
    align-items: center;
    gap: 10px;
    position: relative;
    overflow: hidden;
    opacity: 0;
    transform: translateX(120%) scale(0.8);
    transition: opacity 0.05s, transform 0.55s cubic-bezier(0.34, 1.56, 0.64, 1);
    box-shadow: 0 0 24px rgba(255,215,0,0.25), 0 6px 24px rgba(0,0,0,0.6);
    pointer-events: auto;
    cursor: default;
}

.achievement-toast.ach-show {
    opacity: 1;
    transform: translateX(0) scale(1);
}

/* Golden sweep overlay */
.achievement-toast::after {
    content: '';
    position: absolute;
    top: 0; left: -100%; bottom: 0;
    width: 60%;
    background: linear-gradient(90deg, transparent, rgba(255,215,0,0.18), transparent);
    animation: ach-sweep 1.3s ease-out 0.4s forwards;
    pointer-events: none;
}

@keyframes ach-sweep {
    0%   { left: -100%; }
    100% { left: 200%; }
}

.ach-icon {
    font-size: 1.9rem;
    flex-shrink: 0;
    filter: drop-shadow(0 0 8px rgba(255,215,0,0.7));
    line-height: 1;
}

.ach-content { flex: 1; min-width: 0; }

.ach-header {
    font-size: 0.57rem;
    font-weight: 800;
    letter-spacing: 0.16em;
    color: var(--sim-gold);
    text-transform: uppercase;
    margin-bottom: 1px;
}

.ach-title {
    font-size: 0.86rem;
    font-weight: 900;
    color: #f1f5f9;
    letter-spacing: 0.02em;
    line-height: 1.2;
}

.ach-desc {
    font-size: 0.64rem;
    color: #94a3b8;
    margin-top: 2px;
    line-height: 1.3;
}

.ach-xp {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--sim-gold);
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    gap: 1px;
    flex-shrink: 0;
}

.ach-xp-label {
    font-size: 0.52rem;
    opacity: 0.65;
    font-weight: 500;
}

/* ── Combo Banner (centro schermo) ── */
#sim-combo-banner {
    position: fixed;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%) scale(0);
    z-index: 9600;
    pointer-events: none;
    text-align: center;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    opacity: 0;
}

#sim-combo-banner.combo-show {
    animation: combo-enter 0.5s cubic-bezier(0.34, 1.56, 0.64, 1) forwards;
}

#sim-combo-banner.combo-hide {
    animation: combo-exit 0.3s ease-in forwards;
}

@keyframes combo-enter {
    0%   { opacity: 0; transform: translate(-50%, -50%) scale(0.3); }
    70%  { opacity: 1; transform: translate(-50%, -50%) scale(1.08); }
    100% { opacity: 1; transform: translate(-50%, -50%) scale(1); }
}

@keyframes combo-exit {
    0%   { opacity: 1; transform: translate(-50%, -50%) scale(1); }
    100% { opacity: 0; transform: translate(-50%, -50%) scale(0.8); }
}

.combo-text {
    font-size: 2.4rem;
    font-weight: 900;
    letter-spacing: 0.06em;
    text-shadow: 0 0 20px currentColor, 0 0 50px currentColor;
    font-family: 'Fira Code', monospace;
    line-height: 1;
}

.combo-sub {
    font-size: 0.82rem;
    font-weight: 700;
    letter-spacing: 0.2em;
    opacity: 0.75;
    text-transform: uppercase;
}

/* Tiers */
.combo-x2 { color: var(--sim-accent); }
.combo-x3 { color: var(--sim-gold); }
.combo-x4 { color: var(--sim-orange); }
.combo-x5 {
    color: var(--sim-red);
    animation: combo-ultra-pulse 0.4s ease-in-out infinite alternate;
}

@keyframes combo-ultra-pulse {
    0%   { text-shadow: 0 0 20px #ff3860, 0 0 60px rgba(255,56,96,0.4); font-size: 2.4rem; }
    100% { text-shadow: 0 0 40px #ff3860, 0 0 90px rgba(255,56,96,0.7); font-size: 2.7rem; }
}

/* ── Score Popup Float ── */
.sim-score-popup {
    position: fixed;
    pointer-events: none;
    font-size: 1.4rem;
    font-weight: 900;
    font-family: 'Fira Code', monospace;
    color: var(--sim-gold);
    text-shadow: 0 0 10px rgba(255,215,0,0.7);
    z-index: 9400;
    white-space: nowrap;
    animation: score-popup-anim 2s ease-out forwards;
    user-select: none;
}

.sim-score-popup.popup-x2 { color: var(--sim-accent); font-size: 1.2rem; }
.sim-score-popup.popup-x3 { color: var(--sim-gold); font-size: 1.4rem; }
.sim-score-popup.popup-x4 { color: var(--sim-orange); font-size: 1.6rem; }
.sim-score-popup.popup-x5 {
    color: var(--sim-red);
    font-size: 1.9rem;
    text-shadow: 0 0 16px rgba(255,56,96,0.8);
}

@keyframes score-popup-anim {
    0%   { opacity: 0;   transform: translateY(0)    scale(0.5); }
    15%  { opacity: 1;   transform: translateY(-10px) scale(1.2); }
    80%  { opacity: 1;   transform: translateY(-60px) scale(1.0); }
    100% { opacity: 0;   transform: translateY(-90px) scale(0.8); }
}

/* ── HP Bars Section (MOBA style) ── */
.sim-hp-section {
    padding: 4px 6px 2px;
}

.sim-hp-row {
    display: flex;
    align-items: center;
    gap: 6px;
    padding: 5px 8px;
    background: rgba(0,0,0,0.25);
    border: 1px solid rgba(255,255,255,0.05);
    border-radius: 6px;
    margin-bottom: 3px;
    transition: border-color 0.4s, background 0.4s;
}

.sim-hp-row.hp-danger {
    border-color: rgba(255,56,96,0.35);
    background: rgba(255,56,96,0.05);
}

.sim-hp-row.hp-warning {
    border-color: rgba(255,140,0,0.28);
    background: rgba(255,140,0,0.03);
}

.sim-hp-icon {
    font-size: 0.88rem;
    flex-shrink: 0;
    width: 18px;
    text-align: center;
}

.sim-hp-label {
    font-size: 0.58rem;
    font-weight: 700;
    color: var(--sim-muted);
    letter-spacing: 0.07em;
    text-transform: uppercase;
    min-width: 50px;
    flex-shrink: 0;
}

.sim-hp-bar-wrap {
    flex: 1;
    height: 8px;
    background: rgba(255,255,255,0.06);
    border-radius: 4px;
    overflow: hidden;
    position: relative;
}

.sim-hp-bar-fill {
    height: 100%;
    border-radius: 4px;
    transition: width 0.9s ease, background 0.5s;
    position: relative;
}

/* Shine */
.sim-hp-bar-fill::after {
    content: '';
    position: absolute;
    top: 0; left: 0; right: 0;
    height: 45%;
    background: rgba(255,255,255,0.18);
    border-radius: 4px 4px 0 0;
}

.sim-hp-bar-fill.hp-high   { background: linear-gradient(90deg, #00b84a, #00ff88); }
.sim-hp-bar-fill.hp-medium { background: linear-gradient(90deg, #d97706, #ffb300); }
.sim-hp-bar-fill.hp-low    {
    background: linear-gradient(90deg, #b91c1c, #ff3860);
    animation: hp-danger-pulse 0.85s ease-in-out infinite alternate;
}

@keyframes hp-danger-pulse {
    0%   { box-shadow: none; }
    100% { box-shadow: 0 0 8px rgba(255,56,96,0.7); }
}

.sim-hp-pct {
    font-size: 0.70rem;
    font-weight: 700;
    font-family: 'Fira Code', monospace;
    min-width: 34px;
    text-align: right;
    flex-shrink: 0;
}

.sim-hp-pct.hp-high   { color: var(--sim-green); }
.sim-hp-pct.hp-medium { color: var(--sim-orange); }
.sim-hp-pct.hp-low    { color: var(--sim-red); }

/* ============================================================
   MEDIA: schermi piccoli
   ============================================================ */
@media (max-width: 900px) {
    :root { --sim-right-w: 220px; --sim-bottom-h: 110px; }
    .sim-speed-btn { min-width: 24px; padding: 3px 5px; font-size: 0.60rem; }
    .sim-clock { font-size: 1.0rem; }
    .sim-kpi-value { font-size: 1.0rem; }
}

/* ============================================================
   PAUSA OPERATORE / MULETTO FERMO — Mission Queue System
   ============================================================ */

/* Card missione in pausa */
.sim-mission-paused {
    border-left: 3px solid #ff8c00 !important;
    background: rgba(255, 140, 0, 0.06) !important;
    animation: pause-pulse 2s ease-in-out infinite;
}
@keyframes pause-pulse {
    0%,100% { border-left-color: #ff8c00; }
    50%      { border-left-color: #ff4500; }
}

/* Banner supervisore pausa (in cima alla lista missioni) */
.sim-pause-banner {
    display: flex;
    align-items: center;
    gap: 10px;
    background: linear-gradient(135deg, rgba(255,140,0,.18) 0%, rgba(255,69,0,.12) 100%);
    border: 1px solid rgba(255,140,0,.6);
    border-left: 4px solid #ff8c00;
    border-radius: 6px;
    padding: 10px 12px;
    margin-bottom: 8px;
    animation: banner-slide-in .4s cubic-bezier(0.34,1.56,0.64,1);
}
@keyframes banner-slide-in {
    from { opacity: 0; transform: translateX(-20px); }
    to   { opacity: 1; transform: translateX(0); }
}
.sim-pause-banner-icon { font-size: 1.6rem; flex-shrink: 0; }
.sim-pause-banner-body { flex: 1; min-width: 0; }
.sim-pause-banner-title {
    font-size: .85rem;
    font-weight: 700;
    color: #ff8c00;
    text-transform: uppercase;
    letter-spacing: .5px;
}
.sim-pause-banner-sub  { font-size: .72rem; color: #8899bb; margin-top: 2px; }
.sim-pause-banner-btn  {
    background: rgba(255,140,0,.2);
    border: 1px solid rgba(255,140,0,.5);
    border-radius: 5px;
    color: #ff8c00;
    font-size: .75rem;
    font-weight: 700;
    padding: 5px 10px;
    cursor: pointer;
    white-space: nowrap;
    transition: background .2s;
}
.sim-pause-banner-btn:hover { background: rgba(255,140,0,.35); }

/* Pulsante stress-test pausa nella toolbar MISSIONI */
.sim-stress-btn {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    background: rgba(255,69,0,.15);
    border: 1px solid rgba(255,69,0,.4);
    border-radius: 5px;
    color: #ff6030;
    font-size: .72rem;
    font-weight: 700;
    padding: 3px 9px;
    cursor: pointer;
    transition: background .2s;
}
.sim-stress-btn:hover { background: rgba(255,69,0,.28); }

/* ============================================================
   VISUAL CLARITY UPGRADE — Pipeline, Vital Rings, KPI Delta
   ============================================================ */

/* ── Pipeline: bigger numbers + icon on top ── */
.sim-pipe-num {
    font-size: 1.55rem !important;
    font-weight: 900 !important;
    line-height: 1 !important;
}
.sim-pipe-icon {
    font-size: 1.15rem !important;
    line-height: 1 !important;
    margin-bottom: 0 !important;
}
.sim-pipe-stage {
    gap: 1px !important;
    padding: 3px 10px !important;
    min-width: 68px !important;
}
.sim-pipe-delta {
    font-size: 0.62rem;
    font-weight: 700;
    color: transparent;
    height: 12px;
    line-height: 12px;
    text-align: center;
    transition: opacity 0.4s;
    letter-spacing: 0.03em;
}
.sim-pipe-delta.pipe-delta-active {
    color: var(--sim-green);
    text-shadow: 0 0 6px rgba(0,255,136,0.5);
    animation: delta-pop 2s ease-out forwards;
}
@keyframes delta-pop {
    0%   { opacity: 1; transform: translateY(0); }
    60%  { opacity: 1; transform: translateY(-3px); }
    100% { opacity: 0; transform: translateY(-6px); }
}

/* Animated arrow particles */
.sim-pipe-arrow {
    position: relative !important;
    overflow: visible !important;
    font-size: 0.9rem !important;
    color: rgba(0,212,255,0.35) !important;
}
.sim-pipe-arrow::after {
    content: '●';
    position: absolute;
    top: 50%; left: -8px;
    font-size: 5px;
    color: var(--sim-green);
    transform: translateY(-50%);
    animation: arrow-particle 2s linear infinite;
    opacity: 0;
}
@keyframes arrow-particle {
    0%   { left: -8px;  opacity: 0; }
    20%  { opacity: 0.8; }
    80%  { opacity: 0.8; }
    100% { left: 8px;   opacity: 0; }
}

/* ── Vital Stats: ring circles (sostituisce HP bars) ── */
.sim-vitals {
    display: flex;
    flex-direction: row;
    justify-content: space-around;
    align-items: center;
    padding: 6px 4px 4px;
    gap: 4px;
}

.sim-vital-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 3px;
    flex: 1;
}

.sim-vital-ring-wrap {
    position: relative;
    width: 68px;
    height: 68px;
    flex-shrink: 0;
}

.sim-vital-svg {
    width: 68px;
    height: 68px;
    transform: rotate(-90deg);
}

.sim-vital-track {
    fill: none;
    stroke: rgba(255,255,255,0.07);
    stroke-width: 7;
}

.sim-vital-ring-fill {
    fill: none;
    stroke-width: 7;
    stroke-linecap: round;
    stroke-dasharray: 201 201;
    stroke-dashoffset: 0;
    transition: stroke-dashoffset 1.2s ease, stroke 0.5s ease;
}
.sim-vital-ring-fill.hp-high   { stroke: #00ff88; filter: drop-shadow(0 0 4px rgba(0,255,136,0.5)); }
.sim-vital-ring-fill.hp-medium { stroke: #ffb300; filter: drop-shadow(0 0 4px rgba(255,179,0,0.5)); }
.sim-vital-ring-fill.hp-low    { stroke: #ff3860; filter: drop-shadow(0 0 4px rgba(255,56,96,0.6)); animation: ring-pulse 0.85s ease-in-out infinite alternate; }

@keyframes ring-pulse {
    from { filter: drop-shadow(0 0 4px rgba(255,56,96,0.6)); }
    to   { filter: drop-shadow(0 0 10px rgba(255,56,96,0.9)); }
}

/* testo % centrato nel ring */
.sim-vital-ring-wrap .sim-hp-pct {
    position: absolute;
    top: 50%; left: 50%;
    transform: translate(-50%, -50%);
    font-size: 0.82rem !important;
    font-weight: 900 !important;
    font-family: 'Fira Code', monospace;
    line-height: 1;
    pointer-events: none;
}
.sim-vital-ring-wrap .sim-hp-pct.hp-high   { color: #00ff88; }
.sim-vital-ring-wrap .sim-hp-pct.hp-medium { color: #ffb300; }
.sim-vital-ring-wrap .sim-hp-pct.hp-low    { color: #ff3860; }

.sim-vital-label {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--sim-muted);
    text-transform: uppercase;
    letter-spacing: 0.07em;
    text-align: center;
    line-height: 1.2;
}

.sim-vital-status {
    font-size: 0.58rem;
    color: #94a3b8;
    text-align: center;
    font-style: italic;
    max-width: 72px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.sim-vital-status.status-ok      { color: var(--sim-green); }
.sim-vital-status.status-warning  { color: var(--sim-orange); }
.sim-vital-status.status-critical { color: var(--sim-red); }

/* ── KPI delta indicator ── */
.sim-kpi-delta {
    font-size: 0.60rem;
    font-weight: 700;
    height: 11px;
    line-height: 11px;
    text-align: center;
    transition: opacity 0.4s;
}
.sim-kpi-delta.kpi-delta-up   { color: var(--sim-green); }
.sim-kpi-delta.kpi-delta-down { color: var(--sim-red); }
.sim-kpi-delta.kpi-delta-same { color: var(--sim-muted); }

/* KPI icons bigger */
.sim-kpi-icon  { font-size: 1.15rem !important; opacity: 0.85 !important; }
.sim-kpi-value { font-size: 1.45rem !important; }

/* ── Map zone icons (SVG emoji overlay) ── */
.map-zone-icon { pointer-events: none; }

/* Zone activity states */
.map-zone.zone-idle    rect { opacity: 0.6; }
.map-zone.zone-busy    rect { filter: brightness(1.3); }
.map-zone.zone-critical rect {
    filter: brightness(1.5);
    animation: zone-critical-pulse 1.2s ease-in-out infinite alternate;
}
@keyframes zone-critical-pulse {
    from { filter: brightness(1.2); }
    to   { filter: brightness(1.8) drop-shadow(0 0 4px #ff3860); }
}


/* ================================================================
   SIMCARTOON CAM — Live Camera System
   ================================================================ */

/* ── Camera room container ── */
.cam-room {
    display: flex;
    flex: 1;
    min-height: 0;
    padding: 4px;
    background: #020408;
    box-sizing: border-box;
}

/* ── 2×2 camera grid ── */
.cam-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    grid-template-rows: 1fr 1fr;
    gap: 4px;
    width: 100%;
    height: 100%;
    position: relative;
}

/* ── Individual camera cell ── */
.cam-cell {
    position: relative;
    background: #040810;
    border: 1px solid #0d1a2e;
    border-radius: 4px;
    overflow: hidden;
    cursor: pointer;
    transition: border-color 0.3s;
    /* Ensure transform-origin is center for JS zoom */
    transform-origin: center center;
}
.cam-cell:hover {
    border-color: rgba(0,212,255,0.45);
    box-shadow: 0 0 14px rgba(0,212,255,0.18), inset 0 0 0 1px rgba(0,212,255,0.1);
}

/* ── Camera scene container ── */
.cam-scene {
    width: 100%;
    height: 100%;
    position: absolute;
    inset: 0;
}
/* CRT vignette: darkens edges like a real surveillance lens */
.cam-scene::after {
    content: '';
    position: absolute;
    inset: 0;
    background: radial-gradient(
        ellipse 80% 75% at 50% 50%,
        transparent 45%,
        rgba(0,0,0,0.45) 100%
    );
    pointer-events: none;
    z-index: 2;
}
.cam-svg {
    width: 100%;
    height: 100%;
    display: block;
}

/* ── HUD bar (top overlay) — 2 righe: label + descrizione ── */
.cam-hud {
    position: absolute;
    top: 0; left: 0; right: 0;
    background: linear-gradient(180deg, rgba(2,4,8,0.93) 70%, transparent);
    backdrop-filter: blur(3px);
    -webkit-backdrop-filter: blur(3px);
    display: flex;
    flex-direction: column;
    padding: 5px 9px 6px;
    z-index: 4;
    pointer-events: none;
    gap: 2px;
}
.cam-hud-row {
    display: flex;
    align-items: center;
    gap: 7px;
    width: 100%;
}
.cam-label {
    font-family: 'Oxanium', 'Courier New', monospace;
    font-size: 0.82rem;
    font-weight: 700;
    color: #00d4ff;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    flex: 1;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.cam-rec {
    font-family: 'Oxanium', 'Courier New', monospace;
    font-size: 0.68rem;
    color: #ef4444;
    flex-shrink: 0;
    font-weight: 600;
    letter-spacing: 0.05em;
    animation: cam-rec-blink 1.6s infinite;
}
.cam-ts {
    font-family: 'Oxanium', 'Courier New', monospace;
    font-size: 0.68rem;
    color: #64748b;
    flex-shrink: 0;
}
/* Descrizione zona (seconda riga HUD) */
.cam-desc {
    font-family: 'Courier New', monospace;
    font-size: 0.65rem;
    color: #94a3b8;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    padding-left: 2px;
    letter-spacing: 0.03em;
}

/* ── Tooltip info panel (bottom, appare su hover) ── */
.cam-info-panel {
    position: absolute;
    bottom: 0; left: 0; right: 0;
    background: linear-gradient(0deg, rgba(2,4,12,0.97) 80%, transparent);
    padding: 10px 10px 8px;
    transform: translateY(100%);
    transition: transform 0.28s ease;
    z-index: 6;
    pointer-events: none;
}
.cam-cell:hover .cam-info-panel { transform: translateY(0); }
.cam-info-title {
    font-family: 'Courier New', monospace;
    font-size: 0.62rem;
    color: #00d4ff;
    font-weight: bold;
    text-transform: uppercase;
    letter-spacing: 0.08em;
    margin-bottom: 5px;
}
.cam-info-tags {
    display: flex;
    flex-wrap: wrap;
    gap: 4px;
}
.cam-info-tag {
    background: rgba(0,212,255,0.08);
    border: 1px solid rgba(0,212,255,0.25);
    border-radius: 3px;
    padding: 2px 6px;
    font-family: 'Courier New', monospace;
    font-size: 0.6rem;
    color: #7dd3fc;
    white-space: nowrap;
}

/* ── Status overlay — shown when camera zone is idle ── */
.cam-status-overlay {
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    font-family: 'Courier New', monospace;
    font-size: 0.85rem;
    font-weight: 700;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: rgba(148, 163, 184, 0.6);
    background: rgba(2, 4, 8, 0.55);
    z-index: 5;
    pointer-events: none;
    opacity: 0;
    transition: opacity 0.7s ease;
}
.cam-status-overlay.cam-overlay-active { opacity: 1; }

/* ── Belt box hover highlight ── */
.cam-belt-box { cursor: pointer; }
.cam-belt-box:hover { filter: brightness(1.5) drop-shadow(0 0 5px rgba(255,255,255,0.35)); }

/* ── Idle state: pause CSS animations on SVG elements ── */
svg.cam-idle .cam-worker-pick,
svg.cam-idle .cam-worker-scan,
svg.cam-idle .sf-1,
svg.cam-idle .sf-2,
svg.cam-idle .sf-3,
svg.cam-idle .sf-4 {
    animation-play-state: paused !important;
}

/* ── Live real-data info tag variant ── */
.cam-info-tag-live {
    background: rgba(16, 185, 129, 0.1);
    border-color: rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
}

/* ── Event badge (bottom-center of focused cam) ── */
.cam-event-badge {
    position: absolute;
    bottom: 38px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(2,4,12,0.92);
    border: 1.5px solid #00d4ff;
    border-radius: 12px;
    padding: 5px 14px;
    font-family: 'Courier New', monospace;
    font-size: 0.78rem;
    font-weight: bold;
    color: #00d4ff;
    white-space: nowrap;
    z-index: 7;
    pointer-events: none;
    animation: cam-badge-pop 0.3s ease;
    text-shadow: 0 0 12px rgba(0,212,255,0.6);
}
.cam-badge-hidden { display: none; }

/* ── Scanline CRT effect ── */
.cam-scanline {
    position: absolute;
    inset: 0;
    background: repeating-linear-gradient(
        0deg,
        transparent,
        transparent 3px,
        rgba(0,0,0,0.07) 3px,
        rgba(0,0,0,0.07) 4px
    );
    pointer-events: none;
    z-index: 3;
}
.cam-scanline::after {
    content: '';
    position: absolute;
    left: 0; right: 0;
    height: 45px;
    background: linear-gradient(180deg, transparent, rgba(255,255,255,0.022) 50%, transparent);
    animation: cam-scanline-move 7s linear infinite;
    pointer-events: none;
}

/* ── Corner brackets ── */
.cc {
    position: absolute;
    width: 11px; height: 11px;
    border-color: #00d4ff;
    border-style: solid;
    opacity: 0.6;
    z-index: 5;
    pointer-events: none;
}
.cc.tl { top: 5px;    left: 5px;    border-width: 2px 0 0 2px; }
.cc.tr { top: 5px;    right: 5px;   border-width: 2px 2px 0 0; }
.cc.bl { bottom: 5px; left: 5px;    border-width: 0 0 2px 2px; }
.cc.br { bottom: 5px; right: 5px;   border-width: 0 2px 2px 0; }

/* ── View toggle buttons (added to sim-panel-header) ── */
.sim-view-toggle {
    display: flex;
    gap: 4px;
    align-items: center;
    flex-shrink: 0;
    margin-left: auto;
}
.sim-view-btn {
    background: var(--sim-panel, #080c1a);
    border: 1px solid var(--sim-border, #0d1a2e);
    color: #64748b;
    padding: 3px 10px;
    border-radius: 4px;
    font-size: 0.75rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.2s;
    line-height: 1.6;
    white-space: nowrap;
}
.sim-view-btn:hover {
    background: rgba(0,212,255,0.1);
    border-color: #1e3a5f;
    color: #94a3b8;
}
.sim-view-btn.active {
    background: rgba(0,212,255,0.14);
    border-color: #00d4ff;
    color: #00d4ff;
}
/* CAM LIVE button pulsa quando inattivo per attirare l'attenzione */
.sim-cam-btn-highlight:not(.active) {
    border-color: rgba(0,212,255,0.4);
    color: #4a90d9;
    animation: cam-btn-pulse 3s ease-in-out infinite;
}
@keyframes cam-btn-pulse {
    0%,100% { box-shadow: 0 0 0 0 rgba(0,212,255,0); }
    50%      { box-shadow: 0 0 8px 2px rgba(0,212,255,0.35); }
}

/* ── Worker animations ── */
.cam-worker-pick {
    animation: cam-worker-pick 2.3s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: bottom center;
}
.cam-worker-scan {
    animation: cam-worker-scan 3.5s ease-in-out infinite;
    transform-box: fill-box;
    transform-origin: center;
}

/* ── Fan rotation ── */
.cam-fan-spin {
    transform-box: fill-box;
    transform-origin: center;
    animation: cam-fan-rotate 1.8s linear infinite;
}

/* ── Snowflakes ── */
.cam-snowflake {
    transform-box: fill-box;
    transform-origin: center;
}
.sf-1 { animation: cam-snow-drift 7s ease-in-out infinite 0s; }
.sf-2 { animation: cam-snow-drift 9s ease-in-out infinite -2.1s; }
.sf-3 { animation: cam-snow-drift 6s ease-in-out infinite -4.3s; }
.sf-4 { animation: cam-snow-drift 11s ease-in-out infinite -1.5s; }

/* ── FEFO shelf highlight ── */
.cam-fefo-glow { opacity: 0; }

/* ── Quality light ── */
.cam-quality-pulse { opacity: 0; }

/* ================================================================
   KEYFRAMES
   ================================================================ */

/* Scanline sweep */
@keyframes cam-scanline-move {
    from { top: -45px; }
    to   { top: 108%;  }
}

/* REC indicator blink */
@keyframes cam-rec-blink {
    0%, 44%  { opacity: 1; }
    50%, 94% { opacity: 0; }
    100%     { opacity: 1; }
}

/* Event badge entrance */
@keyframes cam-badge-pop {
    0%   { transform: translateX(-50%) scale(0.75); opacity: 0; }
    100% { transform: translateX(-50%) scale(1);    opacity: 1; }
}

/* Worker picking (lean-forward cycle) */
@keyframes cam-worker-pick {
    0%, 100% { transform: translateY(0)   rotate(0deg);   }
    28%      { transform: translateY(5px) rotate(-16deg); }
    60%      { transform: translateY(0)   rotate(0deg);   }
}

/* Worker scanning (side-to-side) */
@keyframes cam-worker-scan {
    0%, 100% { transform: translateX(0);    }
    35%      { transform: translateX(12px); }
    70%      { transform: translateX(-8px); }
}

/* Fan rotation */
@keyframes cam-fan-rotate {
    from { transform: rotate(0deg);   }
    to   { transform: rotate(360deg); }
}

/* Snowflake drift */
@keyframes cam-snow-drift {
    0%, 100% { transform: translate(0,0)     rotate(0deg);   }
    25%      { transform: translate(7px,-5px) rotate(30deg); }
    50%      { transform: translate(-4px,3px) rotate(-18deg);}
    75%      { transform: translate(5px,-7px) rotate(42deg); }
}

/* Alarm flash (breakdown / fleet failure) */
@keyframes cam-alarm-pulse {
    0%, 100% { opacity: 0.06; }
    50%      { opacity: 0.22; }
}

/* Cold breach flash */
@keyframes cam-breach-pulse {
    0%, 100% { opacity: 0.04; }
    50%      { opacity: 0.16; }
}

/* Cold cascade (faster, more intense) */
@keyframes cam-cascade-pulse {
    0%, 100% { opacity: 0.10; }
    50%      { opacity: 0.28; }
}

/* Flash sale background pop */
@keyframes cam-flashbg-pop {
    0%   { opacity: 0.30; }
    60%  { opacity: 0.10; }
    100% { opacity: 0;    }
}

/* FEFO shelf glow */
@keyframes cam-fefo-glow {
    0%, 100% { opacity: 0;    }
    50%      { opacity: 0.55; }
}

/* Quality inspection blink */
@keyframes cam-quality-blink {
    0%, 100% { opacity: 0;   }
    50%      { opacity: 0.9; }
}

/* Smoke puff rise */
@keyframes cam-smoke1 {
    0%   { transform: translate(0,0)    scale(1);    opacity: 0.5; }
    100% { transform: translate(-4px,-22px) scale(1.5); opacity: 0;   }
}
@keyframes cam-smoke2 {
    0%   { transform: translate(0,0)    scale(1);    opacity: 0.4; }
    100% { transform: translate(6px,-28px)  scale(1.6); opacity: 0;   }
}
@keyframes cam-smoke3 {
    0%   { transform: translate(0,0)    scale(1);    opacity: 0.3; }
    100% { transform: translate(-2px,-18px) scale(1.3); opacity: 0;   }
}

/* Smoke animations applied to SVG circles */
.cam-smoke1 { animation: cam-smoke1 1.8s ease-out infinite; }
.cam-smoke2 { animation: cam-smoke2 2.2s ease-out infinite 0.4s; }
.cam-smoke3 { animation: cam-smoke3 1.5s ease-out infinite 0.9s; }