/* =========================================
VIRTUALAB - FOGLIO DI STILE GLOBALE
Percorso sul server: /css/style.css
========================================= */

:root {
--dark: #2C3E50;
--light: #ECF0F1;
--bg-color: #1a252f;
--panel-bg: #27303f;
--physics: #3498DB;
--math: #9b59b6;
--fundamentals: #2ecc71;
--mechanics: #e67e22;
--quantum: #e74c3c;
--statics: #f1c40f;
}

body {
font-family: 'Segoe UI', Tahoma, sans-serif;
background: var(--bg-color);
color: var(--light);
margin: 0;
padding: 20px;
display: flex;
flex-direction: column;
align-items: center;
}

/* --- CLASSI PER I LABORATORI --- */
body.lab-page {
padding-top: 100px;
}

/* Barra in alto */
.fixed-top-bar {
position: fixed; top: 0; left: 0; right: 0; height: 75px;
background: rgba(30, 36, 48, 0.95); backdrop-filter: blur(8px);
border-bottom: 2px solid #3d4a60; display: flex; align-items: center; justify-content: center; z-index: 1000;
box-shadow: 0 4px 15px rgba(0,0,0,0.5);
}

.btn-back {
background: var(--panel-bg); border: 1px solid #3d4a60; color: var(--light);
padding: 10px 20px; font-size: 1em; border-radius: 5px; cursor: pointer; text-decoration: none; transition: 0.3s;
}
.btn-back:hover { background: #3d4a60; color: #fff; }
.desktop-back { position: absolute; right: 20px; }
.mobile-back-container { display: none; text-align: center; margin-bottom: 20px;}

.container { max-width: 1200px; width: 100%; display: flex; flex-direction: column; gap: 20px; }

/* Visualizzatore e Grafici */
.visualizer {
position: relative; background: #0a0f14; border-radius: 15px;
overflow: hidden; display: flex; flex-direction: column;
align-items: center; justify-content: center; border: 2px solid #333;
padding: 10px; box-shadow: inset 0 0 20px rgba(0,0,0,0.8); margin-bottom: 15px;
}
.canvas-title { color: #ccc; margin-top: 0; margin-bottom: 10px; font-size: 1.1em; font-weight: bold; text-align: center; }
canvas { background: transparent; display: block; width: 100%; border-radius: 8px;}

/* Controlli */
.controls { display: flex; flex-direction: column; gap: 15px; }
.control-group { background: rgba(0,0,0,0.3); padding: 15px; border-radius: 15px; border-left: 5px solid; position: relative; margin-bottom: 15px;}
.control-group h3 { margin-top: 0; margin-bottom: 10px; font-size: 1.2em; }
label { display: block; font-size: 0.9em; font-weight: bold; color: #ccc; margin-bottom: 4px; }

.custom-input-group { display: flex; align-items: center; background: var(--light); border-radius: 8px; border: 2px solid #555; height: 35px; overflow: hidden; margin-bottom: 5px;}
.btn-step { background: #bdc3c7; border: none; color: var(--dark); font-size: 1.2em; font-weight: bold; width: 40px; height: 100%; cursor: pointer; touch-action: manipulation; }
.btn-step:active { background: #95a5a6; }
.custom-input-group input { flex: 1; width: 100%; height: 100%; border: none; text-align: center; font-size: 1.1em; font-weight: bold; color: var(--dark); background: transparent; outline: none; }

input[type="range"] { width: 100%; cursor: pointer; margin-top: 5px; height: 8px; background: #555; border-radius: 5px; outline: none; -webkit-appearance: none; margin-bottom: 10px;}
input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; appearance: none; width: 20px; height: 20px; border-radius: 50%; background: #fff; cursor: pointer;}
select { width: 100%; padding: 10px; font-size: 1.1em; font-weight: bold; border-radius: 8px; border: 2px solid #555; background: var(--light); color: var(--dark); margin-bottom: 10px; cursor: pointer;}

/* Pannelli Teoria */
.theory-panel { background: rgba(0,0,0,0.3); border-radius: 15px; padding: 15px; border: 2px dashed rgba(255,255,255,0.2); margin-top: 5px;}
.formula-box { font-family: monospace; font-size: 1.1em; background: rgba(0,0,0,0.5); padding: 15px; border-radius: 10px; display: inline-block; text-align: left; line-height: 1.5; width: 100%; box-sizing: border-box; }
.status-panel { text-align: center; font-size: 1.2em; font-weight: bold; margin-top: 15px; padding: 15px; border-radius: 10px; border: 2px solid rgba(255,255,255,0.1); background: rgba(0,0,0,0.5); transition: 0.3s;}

/* --- RESPONSIVITÀ LABORATORI --- */
@media (min-width: 900px) {
body.lab-page { overflow: hidden; }
body.lab-page .container { flex-direction: row; align-items: stretch; height: calc(100vh - 120px); overflow: hidden; }
body.lab-page .viz-container { width: 55%; overflow-y: auto; padding-right: 15px; }
body.lab-page .controls { width: 45%; overflow-y: auto; padding-right: 15px; display: flex; flex-direction: column; }

.viz-container::-webkit-scrollbar, .controls::-webkit-scrollbar { width: 8px; }
.viz-container::-webkit-scrollbar-track, .controls::-webkit-scrollbar-track { background: rgba(0,0,0,0.2); border-radius: 4px; }
.viz-container::-webkit-scrollbar-thumb, .controls::-webkit-scrollbar-thumb { background: #555; border-radius: 4px; }
.viz-container::-webkit-scrollbar-thumb:hover, .controls::-webkit-scrollbar-thumb:hover { background: var(--physics); }


}

@media (max-width: 899px) {
.fixed-top-bar { position: relative; height: auto; padding: 15px; flex-direction: column; gap: 10px;}
.desktop-back { position: relative; right: 0; }
body.lab-page { padding-top: 20px; }
}

/* --- BREADCRUMB NEGLI ESPERIMENTI --- */
.breadcrumb-exp {
    font-size: 1.1em;
    color: #bdc3c7;
    display: flex;
    gap: 8px;
    align-items: center;
}
.breadcrumb-exp a {
    color: #bdc3c7;
    text-decoration: none;
    transition: color 0.3s;
}
.breadcrumb-exp a:hover {
    color: #fff;
}
.breadcrumb-exp .sep {
    color: #7f8c8d;
}
.breadcrumb-exp .current {
    color: #f1c40f; /* Il testo finale in Giallo */
    font-weight: bold;
}