/* --- Global Styles --- */
body {
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
    margin: 0;
    padding: 30px;
    background-color: #f0f4f8; /* Soft background */
    color: #333;
    line-height: 1.6;
}

h1, h2 {
    color: #1e3a8a;
    margin-top: 0;
}
h2 {
    font-size: 1.4em;
    padding-bottom: 5px;
    border-bottom: 2px solid #e0f2fe;
    margin-bottom: 15px;
}
h3 {
    color: #166534;
    margin-top: 15px;
    margin-bottom: 8px;
    padding-bottom: 5px;
    border-bottom: 1px dashed #c0e0c0; /* Separator for metric groups */
}

/* --- Layout Grid: 3-COLUMN TOP, VERTICAL SPAN LEFT --- */
.main-grid {
    display: grid;
    /* Controls (1fr) | Visualization (2fr) | Metrics (1.5fr) */
    grid-template-columns: 1fr 2fr 1.5fr; 
    /* Row 1 (auto height) | Row 2 (fixed height for graphs) */
    grid-template-rows: auto 400px; 
    gap: 20px;
    max-width: 1400px;
    margin: 0 auto;
}

.panel {
    padding: 25px;
    border-radius: 12px;
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.1);
    transition: box-shadow 0.2s;
}
.panel:hover {
    box-shadow: 0 6px 12px rgba(0, 0, 0, 0.15);
}

/* Specific Panel Placement */
.controls-panel { 
    background-color: #f0f9ff; 
    grid-column: 1 / 2; /* Column 1 */
    grid-row: 1 / 3;   /* CRITICAL: Spans Row 1 and Row 2 */
} 
.visualization-panel { 
    background-color: #ecfdf5; 
    grid-column: 2 / 3; /* Column 2 */
    grid-row: 1 / 2;   /* Row 1 */
    min-width: 0; 
}
.metrics-panel { 
    background-color: #fef2f2; 
    grid-column: 3 / 4; /* Column 3 */
    grid-row: 1 / 2;   /* Row 1 */
} 

/* --- Graph Panel Placement --- */
.graph-panel { 
    background-color: #fff7ed; 
    grid-column: 2 / 4; /* CRITICAL: Spans Column 2 and Column 3 */
    grid-row: 2 / 3;   /* Row 2 (Under Visualization and Metrics) */
    
    height: 400px; /* Set by grid-template-rows */
    padding: 15px; 
    
    /* Chart Fixes */
    display: flex;
    flex-direction: column;
}

/* --- Chart Container Styling --- */
.chart-container-wrapper {
    display: flex;
    justify-content: space-around;
    gap: 15px;
    flex-grow: 1; 
    min-height: 0; 
}
.chart-container {
    flex: 1;
    min-width: 0;
    height: 100%;
}


/* --- Header & Scenario Description --- */
header { margin-bottom: 20px; }
.scenario-description {
    background-color: #fffbe6;
    border: 1px solid #ffe57f;
    padding: 15px;
    border-radius: 8px;
    margin-bottom: 20px;
    display: flex;
    align-items: flex-start;
    gap: 10px;
    color: #4a4a4a;
    font-size: 0.9em;
}
.scenario-description p { margin: 0; padding-left: 20px; }
.scenario-description .icon { font-size: 1.5em; flex-shrink: 0; }

/* --- Controls Panel Styles --- */
label { display: block; margin-top: 10px; font-weight: 500; }
input[type="number"], input[type="range"] { 
    width: 95%; 
    margin-bottom: 15px; 
    margin-top: 5px;
}
.button-group {
    margin-top: 20px;
    display: flex;
    justify-content: space-between; 
}
.button-group button {
    padding: 10px 12px;
    font-weight: bold;
    border: none;
    border-radius: 6px;
    flex-grow: 1;
    margin: 0 5px; 
}
.start-btn { background-color: #10b981; color: white; } 
.pause-btn { background-color: #fcd34d; color: #333; } 
.reset-btn { background-color: #ef4444; color: white; } 
.start-btn:hover { background-color: #059669; }

/* --- Visualization Styles --- */
.vis-header { 
    display: flex; 
    justify-content: space-between; 
    align-items: center; 
    margin-bottom: 15px; 
}

#queue-visualization {
    border: 2px solid #ccc;
    height: 80px; 
    margin-top: 10px;
    padding: 0 10px;
    position: relative;
    max-width: 100%; 
    overflow-x: auto; 
    white-space: nowrap; 
    display: flex; 
    align-items: center;
    background-color: #f9f9f9; 
}

#queue-line {
    display: flex;
    gap: 2px;
    padding-right: 60px; 
}

.car {
    font-size: 28px;
    margin-left: -5px; 
    animation: car-arrival 0.5s ease-out;
    display: inline-block; 
}

#gate-icon {
    font-size: 36px;
    position: sticky; 
    right: 10px; 
    z-index: 10;
    background-color: #f9f9f9; 
    padding-left: 10px; 
}

#server-status {
    position: absolute;
    right: 10px;
    bottom: 10px;
    padding: 8px 12px;
    border-radius: 20px;
    font-weight: bold;
    color: white;
}
#server-status span {
    display: block;
    font-size: 0.8em;
    opacity: 0.8;
}

/* --- Metrics Panel Styles --- */
.metrics-panel p { margin: 5px 0; }
.metrics-panel strong { font-weight: 700; color: #4c66ff; } 


/* Status colors (updated by JS) */
.status-idle { background-color: #4CAF50; }
.status-busy { background-color: #FF9800; }
.status-growing { color: #cc0000; font-weight: bold; } 
.status-dissipating { color: #e65100; font-weight: bold; } 
.status-ready { color: #333; font-weight: bold; }