/* Add/Modify in your style.css file */

.invalid-input {
    border: 2px solid red;
    background-color: #ffeeee; /* Light red background */
}

.simulation-area {
    position: relative; /* Essential for positioning child elements */
    width: 600px; /* Match your tankCanvas width */
    height: 450px; /* Match your tankCanvas height */
    /* Add border or background for clarity if desired */
    border: 1px solid #ccc;
   background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background for better visibility */
    display: flex; /* Use flexbox to center content if needed */
    justify-content: center;
    align-items: center;
}

#tankCanvas {
    position: absolute; /* Position relative to .simulation-area */
    top: 0;
    left: 0;
    z-index: 1; /* Ensure it's behind the chart if desired, or adjust */
    background-color: transparent; /* Make sure the background is transparent */
}

#oilLevelChart {
    position: absolute; /* Position relative to .simulation-area */
    /* Adjust these values to position the graph as desired */
    top: 460px;   /* Example: 100px from the top of .simulation-area */
    left: 000px;  /* Example: 100px from the left of .simulation-area */
    width: 400px; /* Match the width set in index.html */
    height: 250px; /* Match the height set in index.html */
    z-index: 2; /* Ensure it's on top of tankCanvas */
    background-color: rgba(255, 255, 255, 0.8); /* Semi-transparent background for readability */
    border: 1px solid #ccc; /* Add a border for the graph area */
}



.controls-panel, .process-data-panel {
    background-color: #fff;
    padding: 20px;
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
    width: 300px; /* Fixed width for control panels */
    flex-shrink: 0; /* Prevents shrinking */
}

.controls-panel h2, .process-data-panel h2 {
    color: #007bff;
    margin-top: 0;
    border-bottom: 2px solid #eee;
    padding-bottom: 10px;
    margin-bottom: 20px;
}

.control-group {
    margin-bottom: 20px;
}

.control-group h3 {
    color: #555;
    margin-bottom: 10px;
}

.controls-panel label {
    display: block;
    margin-bottom: 5px;
    font-weight: bold;
}

.controls-panel input[type="number"],
.controls-panel input[type="range"] {
    width: calc(100% - 20px); /* Adjust width for padding */
    padding: 8px 10px;
    margin-bottom: 10px;
    border: 1px solid #ddd;
    border-radius: 4px;
}

.controls-panel input[type="range"] {
    margin-top: 5px;
}

.controls-panel span {
    font-weight: bold;
    color: #007bff;
    display: inline-block; /* Keep span next to slider */
    margin-left: 5px;
}

.simulation-area {
    /* Styles are moved up to combine with the new ones */
}

canvas {
    display: block; /* Remove extra space below canvas */
    /* styles for tankCanvas are now in #tankCanvas */
}

.process-data-panel p {
    font-size: 1.1rem;
    margin-bottom: 10px;
}

.process-data-panel span {
    font-weight: bold;
    color: #007bff;
}

.process-data-panel .button {
    display: block;
    width: calc(100% - 30px); /* Adjust for padding */
    text-align: center;
    margin-top: 0px;
}