/* =========================================================
   ANALYSIS DASHBOARD STYLES (Static & Dynamic)
   ========================================================= */

body { 
    background-color: transparent; 
    padding: 0; /* Removed padding to eliminate outer boundaries */
    margin: 0;
    height: 100vh;
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    overflow: hidden; 
}

/* Hide header section since the title was removed */
.header-section {
    display: none; 
}

/* --- THE 3-COLUMN MAIN WORKSPACE --- */
.static-dashboard-grid {
    display: grid;
    grid-template-columns: 400px 1fr 320px; 
    gap: 0; /* Removed gap amongst the 03 main windows */
    flex-grow: 1;
    min-height: 0; 
}

/* Add a subtle right border to panels so they don't blend into each other without the gap */
.panel {
    border-right: 1px solid #cbd5e1;
    border-radius: 0; /* Removing radius since they touch the edges */
}
.panel:last-child {
    border-right: none;
}

/* --- BUTTON STYLING (Tab Style) --- */
.panel-btn {
    width: 100%;
    padding: 10px;
    background-color: #f1f5f9; /* Gray when not selected */
    color: #475569;
    border: 1px solid #cbd5e1;
    border-radius: 4px;
    font-weight: bold;
    cursor: pointer;
    margin-bottom: 10px;
    transition: all 0.2s ease;
}

.panel-btn:hover, .panel-btn:active, .panel-btn:focus {
    background-color: #3498db; /* Blue when selected/hovered */
    color: white;
    border-color: #3498db;
}

/* =========================================================
   DYNAMIC SENSOR LIST STYLING (For the Left Panel)
   ========================================================= */

.sensor-type-group {
    margin-bottom: 15px;
    border: 1px solid #e2e8f0;
    border-radius: 4px;
    overflow: hidden;
    background-color: #ffffff;
}

.sensor-type-header {
    background-color: #f8fafc;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 700;
    color: #334155;
    border-bottom: 1px solid #e2e8f0;
    text-transform: uppercase;
}

/* THE CHECKBOX ROW/COLUMN LAYOUT */
.sensor-grid {
    display: grid;
    /* Arranges the checkboxes into 2 neat columns inside the category */
    grid-template-columns: repeat(2, 1fr); 
    gap: 8px;
    padding: 10px;
}

.sensor-checkbox-item {
    display: flex;
    align-items: center;
    font-size: 12px;
    color: #475569;
    cursor: pointer;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis; /* Adds '...' if the sensor name is too long */
}

.sensor-checkbox-item input[type="checkbox"] {
    margin-right: 8px;
    cursor: pointer;
    /* Makes the checkbox look a little sharper */
    width: 14px;
    height: 14px;
    accent-color: #3498db; 
}

.sensor-checkbox-item:hover {
    color: #0f172a;
}