body { padding: 20px; padding-bottom: 60px; /* Account for status bar */ }
.progress-container, .chart-container {
    margin-bottom: 25px;
    text-align: center; /* Center chart labels */
}
.chart-label {
    font-weight: bold;
    margin-bottom: 5px;
    display: block;
}
.status-bar {
    position: fixed;
    bottom: 0;
    left: 0;
    width: 100%;
    background-color: #f8f9fa;
    border-top: 1px solid #dee2e6;
    padding: 5px 15px;
    font-size: 0.9em;
    z-index: 1000;
}
 /* Style for the overall progress bar - Removed as using Pie chart */

/* Style for panel charts */
.panel-chart-canvas {
    max-width: 150px; /* Control pie chart size */
    max-height: 150px;
    margin: 0 auto; /* Center the canvas */
    cursor: pointer; /* Indicate clickable */
}
#scada-panels-progress, #drawing-panels-progress {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)); /* Responsive grid */
    gap: 20px;
}
.modal-body table { width: 100%; }
.modal-body th, .modal-body td { padding: 5px 10px; border-bottom: 1px solid #eee; vertical-align: middle; }
.modal-body th { background-color: #f8f9fa; text-align: left; }
.status-yes { color: green; font-weight: bold; }
.status-no { color: red; font-weight: bold; }
nav { margin-bottom: 20px; } /* Added for nav spacing */

.chart-container > canvas,
.chart-container > div:not(.processing-indicator) {
    transition: opacity 0.3s ease-in-out;
}

.content-hidden-by-loader {
    display: none !important; /* Use important to override potential inline styles */
    opacity: 0;
}