:root {
    --bg-dark: #0f172a; --bg-panel: #1e293b; --accent-blue: #38bdf8; --accent-green: #10b981;
    --text-main: #f8fafc; --text-muted: #94a3b8; --border-color: #334155; --tab-bg: #0f172a;
}

* { margin: 0; padding: 0; box-sizing: border-box; font-family: 'Segoe UI', system-ui, sans-serif; }
body { background-color: var(--bg-dark); color: var(--text-main); display: flex; height: 100vh; overflow: hidden; }

/* --- SIDEBAR & NAVIGATION --- */
.sidebar { width: 260px; background-color: var(--bg-panel); border-right: 1px solid var(--border-color); display: flex; flex-direction: column; z-index: 50; }
.logo { padding: 1.5rem; font-size: 1.2rem; font-weight: bold; color: var(--accent-blue); border-bottom: 1px solid var(--border-color); display: flex; align-items: center; gap: 10px; }
.nav-menu { padding: 1rem 0; list-style: none; flex-grow: 1; }
.nav-item { padding: 1rem 1.5rem; display: flex; align-items: center; gap: 15px; color: var(--text-muted); cursor: pointer; transition: all 0.2s; }
.nav-item:hover, .nav-item.active { background-color: rgba(56, 189, 248, 0.1); color: var(--accent-blue); border-right: 4px solid var(--accent-blue); }
.deploy-btn { background-color: rgba(16, 185, 129, 0.1); color: var(--accent-green); border-right: none; margin-top: auto; margin-bottom: 2rem;}
.deploy-btn:hover { background-color: var(--accent-green); color: #fff; }

/* --- MAIN CONTENT & SETUP VIEWS --- */
.main-content { flex-grow: 1; padding: 2rem; overflow-y: auto; display: flex; flex-direction: column;}
.header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; }
.header h1 { font-size: 1.8rem; font-weight: 600; }

.asset-overview { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; margin-bottom: 2rem; }
.stat-card { background-color: var(--bg-panel); padding: 1.5rem; border-radius: 12px; border: 1px solid var(--border-color); display: flex; align-items: center; justify-content: space-between; }
.stat-info h3 { color: var(--text-muted); font-size: 0.9rem; margin-bottom: 0.5rem; text-transform: uppercase; letter-spacing: 1px; }
.stat-info .value { font-size: 2rem; font-weight: bold; color: var(--text-main); display: flex; align-items: center; gap: 15px; }
.counter-btn { background: none; border: none; color: var(--text-muted); cursor: pointer; font-size: 1.2rem; transition: color 0.2s; }
.counter-btn:hover { color: var(--accent-blue); }
.stat-icon { font-size: 2.5rem; color: rgba(56, 189, 248, 0.2); }

.view-section { display: none; flex-direction: column; flex-grow: 1;}
.view-section.active { display: flex; }
.asset-tabs { display: flex; gap: 0.5rem; margin-bottom: 1.5rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; overflow-x: auto;}
.asset-tab { padding: 0.5rem 1.5rem; background-color: var(--tab-bg); color: var(--text-muted); border: 1px solid var(--border-color); border-radius: 6px; cursor: pointer; transition: all 0.2s; white-space: nowrap;}
.asset-tab:hover { border-color: var(--accent-blue); color: var(--text-main); }
.asset-tab.active { background-color: var(--accent-blue); color: #0f172a; border-color: var(--accent-blue); font-weight: bold; }

.config-section { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem; }
.config-section.single-col { grid-template-columns: 1fr; }
.panel { background-color: var(--bg-panel); padding: 1.5rem; border-radius: 12px; border: 1px solid var(--border-color); }
.panel-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 1.5rem; padding-bottom: 1rem; border-bottom: 1px solid var(--border-color); }

.form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 1.5rem 1rem; }
.form-grid-3 { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem 1rem; }
.input-group { display: flex; flex-direction: column; gap: 0.5rem; }
.input-group label { font-size: 0.85rem; color: var(--text-muted); }
.input-wrapper { position: relative; display: flex; align-items: center; }
.input-wrapper input { width: 100%; background-color: var(--bg-dark); border: 1px solid var(--border-color); color: var(--text-main); padding: 0.75rem 1rem; border-radius: 6px; font-size: 1rem; outline: none; transition: border 0.2s; }
.input-wrapper input:focus { border-color: var(--accent-blue); }
.input-unit { position: absolute; right: 1rem; color: var(--text-muted); font-size: 0.85rem; }
.input-wrapper input:focus { border-color: var(--accent-blue); }
.input-wrapper input:read-only { background-color: #1e293b; color: var(--text-muted); cursor: not-allowed; border-color: #334155; }
.input-group.fixed label { color: #fca5a5; } /* Colore leggermente diverso per label fissi */
.parameter-section { margin-bottom: 2rem; }
.parameter-section h3 { font-size: 1rem; color: var(--text-main); margin-bottom: 1rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; }

.chart-container { width: 100%; height: 250px; margin-top: 1rem; }
.btn-primary { background-color: var(--accent-blue); color: #0f172a; border: none; padding: 0.75rem 1.5rem; border-radius: 6px; font-weight: bold; cursor: pointer; transition: opacity 0.2s; }
.btn-primary:hover { opacity: 0.9; }

/* --- SETUP LOGS --- */
.log-panel { grid-column: 1 / -1; margin-top: 1rem; }
.log-list { list-style: none; max-height: 150px; overflow-y: auto; font-size: 0.85rem; }
.log-item { padding: 0.6rem 0; border-bottom: 1px solid var(--border-color); color: var(--text-muted); display: flex; gap: 12px; }
.log-item:last-child { border-bottom: none; }
.log-time { color: var(--accent-blue); font-weight: bold; white-space: nowrap; }
.log-message strong { color: var(--text-main); }


/* =========================================
   INDUSTRIAL SCADA HMI STYLES (MONITOR)
   ========================================= */
#view-monitor {
    --mon-accent: #ea580c; 
    background-color: #f1f5f9; 
    color: #0f172a;
    padding: 2rem;
    font-family: Arial, Helvetica, sans-serif;
    margin: -2rem; 
    min-height: 100vh;
    overflow-y: auto;
}

.monitor-wrapper { max-width: 1400px; margin: 0 auto; width: 100%; display: flex; flex-direction: column; }

.ems-header { display: flex; justify-content: space-between; align-items: center; margin-bottom: 2rem; border-bottom: 2px solid #cbd5e1; padding-bottom: 1.5rem; }
.ems-title h2 { font-size: 1.6rem; font-weight: 800; color: #1e293b; text-transform: uppercase; margin-bottom: 5px; }
.status-badge { font-size: 0.8rem; color: var(--mon-accent); display: flex; align-items: center; gap: 6px; font-weight: bold; }

.nav-telemetry { display: flex; gap: 2.5rem; background: #ffffff; padding: 1rem 2rem; border-radius: 10px; border: 1px solid #e2e8f0; box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05); }
.nav-item { display: flex; flex-direction: column; }
.nav-item span { font-size: 0.75rem; color: #64748b; font-weight: bold; display: flex; align-items: center; gap: 5px; margin-bottom: 4px;}
.nav-item strong { font-size: 1.3rem; color: #0f172a; font-weight: 900;}

.ems-mode { text-align: right; }
.ems-mode label { font-size: 0.8rem; color: #64748b; font-weight: bold; display: block; margin-bottom: 4px;}
.ems-mode select { background: transparent; color: var(--mon-accent); border: none; outline: none; font-weight: 900; font-size: 1.2rem; cursor: pointer; padding: 0;}

/* --- ROUTE MAP --- */
.ems-map-panel { background: #1e293b; height: 380px; padding: 0; margin-bottom: 3rem; border-radius: 12px; border: 1px solid #cbd5e1; position: relative; display: flex; flex-direction: column; overflow: hidden; box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }
.map-overlay-text { position: absolute; top: 15px; left: 15px; font-weight: bold; color: #334155; font-size: 0.85rem; z-index: 10; background: rgba(255,255,255,0.9); padding: 6px 12px; border-radius: 6px; border: 1px solid #cbd5e1; box-shadow: 0 2px 4px rgba(0,0,0,0.1); }
.map-legend { display: flex; gap: 20px; background: rgba(255,255,255,0.95); padding: 12px 20px; border-top: 1px solid #cbd5e1; font-size: 0.8rem; font-weight: bold; color: #334155; justify-content: flex-end; z-index: 10; }
.legend-item { display: flex; align-items: center; gap: 8px; }
.legend-item .line { width: 25px; height: 4px; border-radius: 2px;}
.legend-item .line.dashed { background: repeating-linear-gradient(90deg, #64748b, #64748b 6px, transparent 6px, transparent 10px); }
.legend-item .line.solid { background: #10b981; }
.legend-item .circle { width: 14px; height: 14px; border-radius: 50%; }
.legend-item .circle.weather { background: rgba(239, 68, 68, 0.4); border: 2px solid #ef4444; }

/* --- TOPOLOGY & HMI CARDS --- */
.topology-section { 
    display: flex; flex-direction: column; align-items: center; 
    width: 100%; 
    gap: 2.5rem; /* Definisce la distanza ESATTA di 40px tra le righe e il bus */
}
.hmi-row { 
    display: flex; flex-wrap: wrap; gap: 2rem; justify-content: center; 
    position: relative; width: 100%; 
}

.hmi-card { 
    background: #ffffff; border: 1px solid #e2e8f0; border-radius: 12px; 
    padding: 1.5rem 1.5rem 0 1.5rem; /* <-- Tolto il padding inferiore per incollare il banner DSS */
    width: 280px; position: relative;
    box-shadow: 0 4px 6px -1px rgba(0,0,0,0.05), 0 2px 4px -1px rgba(0,0,0,0.03);
    transition: transform 0.2s, box-shadow 0.2s;
    display: flex; flex-direction: column; 
}
.hmi-card:hover { transform: translateY(-3px); box-shadow: 0 10px 15px -3px rgba(0,0,0,0.1); }

.hmi-card-header { margin-bottom: 1.5rem; display: flex; flex-direction: column; text-align: center; }
.hmi-card-header h4 { font-size: 1.1rem; font-weight: 800; color: #0f172a; margin-bottom: 0.3rem; }
.hmi-card-header small { color: #64748b; font-size: 0.8rem; font-weight: 600; }
.text-blue { color: var(--mon-accent); font-weight: bold; font-size: 0.95rem; margin-top: 8px; }
.text-green { color: #10b981; font-weight: bold; font-size: 0.95rem; }

/* --- GAUGES INSIDE HMI CARDS --- */
.hmi-gauge-container { display: flex; justify-content: space-between; align-items: flex-end; height: 100px; margin-bottom: 1rem; }
.hmi-telemetry { display: flex; flex-direction: column; gap: 8px; font-size: 1rem; text-align: left;}
.hmi-telemetry small { color: #64748b; font-size: 0.75rem; font-weight: bold; margin-left: 3px; }
.hmi-telemetry strong { font-size: 1.2rem; font-weight: 800; }

.soc-bar-container { display: flex; flex-direction: row; align-items: center; gap: 10px; height: 100%;}
.soc-label { font-size: 0.85rem; color: #334155; font-weight: 800; }
.soc-bar { width: 16px; height: 80px; border: 2px solid var(--mon-accent); background: #f8fafc; border-radius: 4px; position: relative; display: flex; align-items: flex-end; padding: 2px; overflow: hidden; }
.soc-fill { width: 100%; background-color: var(--mon-accent); border-radius: 2px; transition: height 0.5s linear; }

.circular-gauge { width: 90px; height: 90px; border-radius: 50%; background: conic-gradient(var(--mon-accent) 0% 0%, #e2e8f0 0% 100%); display: flex; justify-content: center; align-items: center; position: relative; box-shadow: 0 2px 5px rgba(0,0,0,0.1); }
.gauge-center { width: 76px; height: 76px; background-color: #ffffff; border-radius: 50%; display: flex; flex-direction: column; justify-content: center; align-items: center; box-shadow: inset 0 2px 4px rgba(0,0,0,0.05);}
.gauge-val { font-size: 1.3rem; font-weight: 900; color: #0f172a; }
.gauge-unit { font-size: 0.7rem; color: #64748b; font-weight: bold;}

/* --- LIVE LOGS INSIDE CARDS --- */
.hmi-card-log {
    margin-top: auto; 
    padding-top: 0.8rem;
    margin-bottom: 1.5rem; /* Mantiene lo spazio prima del fondo card */
    border-top: 1px dashed #cbd5e1;
    font-size: 0.75rem; color: #64748b; font-family: 'Courier New', Courier, monospace;
    text-align: left; line-height: 1.3; min-height: 42px; width: 100%;
}

.log-msg.ok { color: #10b981; }
.log-msg.warn { color: #f59e0b; font-weight: bold; }
.log-msg.err { color: #ef4444; font-weight: bold; }

/* --- DST OPTIMIZER BANNER --- */
.dst-indicator {
    display: none; 
    align-items: center; justify-content: space-between;
    background: #f8fafc; border-top: 1px solid #e2e8f0;
    padding: 0.8rem 1.5rem;
    margin: 0 -1.5rem 0 -1.5rem; /* Si allarga ai bordi sx/dx */
    border-radius: 0 0 12px 12px; /* Chiude gli angoli inferiori della card */
}
.dst-indicator.active { display: flex; }
.dst-label { display: flex; flex-direction: column; }
.dst-label small { font-size: 0.65rem; color: #64748b; text-transform: uppercase; letter-spacing: 0.5px; }
.dst-val { color: #0f172a; font-size: 1rem; }
.dst-led { width: 14px; height: 14px; border-radius: 50%; background-color: #cbd5e1; box-shadow: inset 0 2px 4px rgba(0,0,0,0.3); transition: all 0.3s ease; }
.dst-led.green { background-color: #10b981; box-shadow: 0 0 8px #10b981, inset 0 1px 2px rgba(255,255,255,0.5); }
.dst-led.yellow { background-color: #f59e0b; box-shadow: 0 0 8px #f59e0b, inset 0 1px 2px rgba(255,255,255,0.5); }
.dst-led.red { background-color: #ef4444; box-shadow: 0 0 8px #ef4444, inset 0 1px 2px rgba(255,255,255,0.5); }

/* --- MAIN BUS & CONNECTIONS --- */
/* Container del Bus */
.main-bus { 
    display: flex; align-items: center; 
    justify-content: flex-end; /* Spinge il badge all'estrema destra */
    height: 40px; 
    position: relative; 
    width: 100%; 
    max-width: 100%; /* <-- IL FIX È QUI: la sbarra ora occupa tutto lo schermo */
    margin: 0; 
}

/* La sbarra di rame/potenza orizzontale */
.bus-line { 
    position: absolute; left: 0; right: 0; 
    top: 50%; transform: translateY(-50%); 
    height: 8px; background-color: var(--mon-accent); 
    border-radius: 4px; z-index: 1; 
}

/* Il Badge testuale centrale */
.bus-voltage { 
    position: relative; z-index: 3; background: #ffffff; 
    padding: 0.5rem 1.5rem; color: #0f172a; 
    font-weight: 900; font-size: 1.1rem; letter-spacing: 1px;
    border: 4px solid var(--mon-accent); 
    border-radius: 8px; 
    box-shadow: 0 4px 6px rgba(0, 0, 0, 0.1); 
    margin-right: 1.5rem; /* Un piccolo margine per non incollarlo proprio al bordo della finestra */
}
.hmi-icon { 
    position: absolute; bottom: -20px; left: 50%; transform: translateX(-50%); 
    background: #ffffff; border: 3px solid var(--mon-accent); 
    width: 40px; height: 40px; border-radius: 50%; 
    display: flex; justify-content: center; align-items: center; 
    color: var(--mon-accent); font-size: 1.1rem; z-index: 5; 
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1); 
}

/* Linea verticale che scende al BUS */
.hmi-icon::after { 
    content: ''; position: absolute; 
    top: 36px; /* Parte dal bordo inferiore dell'icona */
    width: 6px; /* Più spessa, in scala col bus */
    height: 44px; /* Calcolo esatto per colpire il centro del bus */
    background: var(--mon-accent); 
    z-index: -1; /* Passa sotto l'icona */
}


/* Nodo terminale (pallino sul BUS) */
.hmi-icon::before {
    content: ''; position: absolute;
    top: 73px; /* Centrato esattamente sulla bus-line */
    left: 50%; transform: translateX(-50%);
    width: 14px; height: 14px;
    background: var(--mon-accent);
    border-radius: 50%;
    z-index: 2; /* Sopra la bus-line ma sotto il badge */
    box-shadow: 0 0 0 3px #f1f5f9; /* Crea uno "stacco" visivo dal colore di sfondo */
}
/* --- THRUSTERS (MOTORI) --- */
.thruster-card { margin-top: 0; text-align: center; display: flex; flex-direction: column; align-items: center; }

/* Sposta l'icona in alto */
.thruster-card .hmi-icon { top: -20px; bottom: auto; }

/* La linea sale verso l'alto */
.thruster-card .hmi-icon::after { 
    top: auto; bottom: 36px; height: 44px; 
}

/* Il nodo terminale sul BUS */
.thruster-card .hmi-icon::before {
    top: auto; bottom: 73px;
}

/* (Lascia i CSS del testo thruster e slider come li avevi prima) */
.thruster-val { font-size: 1.8rem; font-weight: 900; margin: 1rem 0; color: #0f172a;}
.thruster-slider { width: 85%; height: 10px; background: #e2e8f0; margin-bottom: 1.5rem; border-radius: 5px; overflow: hidden; border: 1px solid #cbd5e1;}
.slider-fill { height: 100%; background: var(--mon-accent); transition: width 0.3s; }
.thruster-icon { font-size: 3.5rem; color: var(--mon-accent); filter: drop-shadow(0 4px 2px rgba(0,0,0,0.1)); }

/* --- NEW SHIP INFORMATION SECTION --- */
#view-ship { flex-direction: column; flex-grow: 1; }
.ship-info-container { display: flex; flex-direction: column; gap: 2rem; }
.ship-image { max-width: 100%; height: auto; border-radius: 12px; border: 1px solid var(--border-color); align-self: center; }
.ship-data-grid { display: grid; grid-template-columns: repeat(3, 1fr); gap: 1.5rem; }
.data-table-panel { background-color: var(--bg-panel); padding: 1.5rem; border-radius: 12px; border: 1px solid var(--border-color); }
.data-table-panel h2 { font-size: 1.2rem; color: var(--accent-blue); margin-bottom: 1rem; border-bottom: 1px solid var(--border-color); padding-bottom: 0.5rem; text-transform: uppercase; }
.data-table-panel table { width: 100%; border-collapse: collapse; }
.data-table-panel td { padding: 0.5rem 0; border-bottom: 1px solid rgba(51, 65, 85, 0.5); font-size: 0.9rem; }
.data-table-panel td:first-child { color: var(--text-muted); font-weight: 500; }
.data-table-panel td:last-child { color: var(--text-main); text-align: right; font-weight: bold; }

/* Stile per i bottoni della velocità (Manetta) */
.speed-btn {
    background-color: #f1f5f9;
    color: var(--mon-accent);
    border: 1px solid #cbd5e1;
    border-radius: 50%;
    width: 32px;
    height: 32px;
    display: flex;
    justify-content: center;
    align-items: center;
    cursor: pointer;
    transition: all 0.2s;
    box-shadow: 0 2px 4px rgba(0,0,0,0.05);
}
.speed-btn:hover {
    background-color: var(--mon-accent);
    color: white;
    transform: scale(1.1);
}
.speed-btn:active {
    transform: scale(0.95);
}

/* Aggiustamento specifico per i gauge dei thruster */
.thruster-card .hmi-gauge-container {
    width: 100%;
    margin-bottom: 0.5rem;
}