body {
    font-family: Arial, sans-serif;
    margin: 20px;
}
.controls {
    margin-bottom: 20px;
}
select {
    padding: 8px;
    margin-right: 10px;
}
button {
    padding: 10px 15px;
    background-color: #007bff;
    color: white;
    border: none;
    cursor: pointer;
}
button:hover {
    background-color: #0056b3;
}
#plot-container {
    text-align: center;
    margin-bottom: 20px;
}
#spray-chart-div {
    width: 800px; 
    height: 600px; 
    margin: auto;
    border: 1px solid #ddd;
}
/*#spray-chart-div {*/
    /* Use relative units for responsiveness */
    /* width: 90%; /* Example: take up 90% of parent width */
    /* max-width: 800px; /* Optional: set a maximum width for larger screens */
    /* height: 500px; /* Set a default height, Plotly will adapt its internal scaling */
                  /* Or, for aspect ratio, you could use a padding-bottom trick with position:relative */
/*    margin: auto;*/
/*    border: 1px solid #ddd;*/
/*}*/

/* Optional: For better aspect ratio handling, especially if height is critical */
/* This makes the div maintain a 4:3 aspect ratio */

/*#spray-chart-div {*/
/*    position: relative; /* Essential for the inner Plotly div */
/*    width: 90%;*/
/*    max-width: 800px;*/
/*    height: 0; /* Set height to 0 when using padding-bottom for aspect ratio */
/*    padding-bottom: 75%; /* (desired_height / desired_width) * 100% = (600 / 800) * 100% = 75% */
/*    margin: auto;*/
/*    border: 1px solid #ddd;*/
/*}*/

/* Add this rule to make the Plotly graph fill the new responsive container */
/*#spray-chart-div .js-plotly-plot {*/
/*    position: absolute;*/
/*    top: 0;*/
/*    left: 0;*/
/*    width: 100%;*/
/*    height: 100%;*/
/*}*/


.summary-stats {
    margin-top: 30px;
    border: 1px solid #ddd;
    padding: 15px;
    border-radius: 5px;
    background-color: #f9f9f9;
}
.summary-stats p {
    margin: 5px 0;
}