/* /Components/AlertChart.razor.rz.scp.css */
.chart-container[b-h2sdljmtqk] {
    width: 100%;
    height: 220px;
    position: relative;
    padding: 10px;
    background: rgba(255, 255, 255, 0.02);
    border-radius: 8px;
}

.chart-loading[b-h2sdljmtqk] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
    gap: 10px;
    color: #999;
    font-size: 14px;
}

.spinner-small[b-h2sdljmtqk] {
    width: 20px;
    height: 20px;
    border: 2px solid rgba(255, 255, 255, 0.1);
    border-top: 2px solid #007bff;
    border-radius: 50%;
    animation: spin-b-h2sdljmtqk 1s linear infinite;
}

@keyframes spin-b-h2sdljmtqk {
    0% { transform: rotate(0deg); }
    100% { transform: rotate(360deg); }
}

.chart-error[b-h2sdljmtqk] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
    color: #ff6b6b;
    font-size: 14px;
    background: rgba(255, 0, 0, 0.05);
    border: 1px solid rgba(255, 0, 0, 0.2);
    border-radius: 8px;
    padding: 20px;
    text-align: center;
}

.chart-no-data[b-h2sdljmtqk] {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 220px;
    color: #666;
    font-size: 14px;
    background: rgba(128, 128, 128, 0.05);
    border: 1px dashed rgba(128, 128, 128, 0.2);
    border-radius: 8px;
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .chart-container[b-h2sdljmtqk] {
        padding: 5px;
    }
}
/* /Components/AlertsComponent.razor.rz.scp.css */
.Alert_Container[b-gvukkyw0ui] {
    width: 90%;
    max-width: 800px;
    border: 1px solid rgba(41, 89, 106, 0.5);
    border-bottom: none;
    background-color: rgba(0, 0, 0, 0.3);
    margin: auto;
    margin-top: 20px;
    box-shadow: 0px 4px 10px 3px #00000046;
    position: relative;
    animation: fadeout 0.25s;
    transition: all 0.35s linear;
    cursor: pointer;
}

.Alert_Top[b-gvukkyw0ui] {
    display: flex;
    flex-direction: row;
    position: relative;
    background-color: rgba(220, 42, 51, 0.26);
    width: 100%;
    height: 30px;
    line-height: 30px;
    font-family: Helvetica;
    text-transform: uppercase;
    border-bottom: 1px solid rgba(200, 16, 46, 0.5);
}

.Alert_Top_Title[b-gvukkyw0ui] {
    width: 100%;
    font-family: Helvetica;
    text-align: center;
    font-size: 14px;
    letter-spacing: 5px;
    color: white;
    text-align: left;
    text-indent: 20px;
}

.Alert_Top_7Days[b-gvukkyw0ui] {
    position: absolute;
    right: 30px;
    top: 50%;
    color: white;
    transform: translateY(-50%);
    font-size: 12px;
    letter-spacing: 1px;
}

.Alert_Row[b-gvukkyw0ui] {
    width: 100%;
    height: 40px;
    font-family: Helvetica;
    font-size: 11px;
    letter-spacing: 2px;
    line-height: 40px;
    color: white;
    border-bottom: 1px solid rgba(41, 89, 106, 0.5);
    overflow: hidden;
    transition: all 0.5s ease;
}

.Alert_Row_Expanded[b-gvukkyw0ui] {
    width: 100%;
    height: auto;
    max-height: 500px;
    font-family: Helvetica;
    font-size: 11px;
    letter-spacing: 2px;
    line-height: 40px;
    color: white;
    border-bottom: 1px solid rgba(41, 89, 106, 0.5);
    overflow: hidden;
    transition: all 0.5s ease;
}

.Alert_Row_Content[b-gvukkyw0ui] {
    opacity: 0;
    max-height: 0;
    overflow: hidden;
    transition: all 0.5s ease;
}

.Alert_Row_Expanded .Alert_Row_Content[b-gvukkyw0ui] {
    opacity: 1;
    max-height: 460px;
}

.Alert_Row_Attention[b-gvukkyw0ui] {
    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(208, 80, 80, 0.15));
}

.Alert_Row_InProgress[b-gvukkyw0ui] {
    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(255, 255, 0, 0.15));
}

.Alert_Row_Resolved[b-gvukkyw0ui] {
    background: linear-gradient(to right, rgba(0, 0, 0, 0), rgba(0, 0, 0, 0), rgba(0, 255, 38, 0.15));
}

.Alert_Row_Top[b-gvukkyw0ui] {
    display: flex;
    flex-direction: row;
}

.Alert_Row_Top_date[b-gvukkyw0ui] {
    text-align: left;
    width: 40%;
    letter-spacing: 1px;
    text-indent: 15px;
}

.Alert_Row_Top_Location[b-gvukkyw0ui] {
    width: 50%;
}

.Alert_Row_Top_Icon[b-gvukkyw0ui] {
    width: 10%;
    display: flex;
    align-items: center;
    justify-content: center;
}

.Alert_SVG_Icon[b-gvukkyw0ui] {
    width: 25px;
    height: 25px;
}

.Alert_Row_Bottom[b-gvukkyw0ui] {
    color: rgba(208, 205, 206, 1);
    animation: fadeout 0.4s;
    width: 100%;
}

.Alert_Row_Separator_Attention[b-gvukkyw0ui] {
    border-top: 1px solid rgba(200, 16, 46, 0.3);
    width: 100%;
    margin: auto;
}

.Alert_Row_Separator_InProgress[b-gvukkyw0ui] {
    border-top: 1px solid rgba(255, 255, 0, 0.15);
}

.Alert_Row_Separator_Resolved[b-gvukkyw0ui] {
    border-top: 1px solid rgba(0, 255, 38, 0.15);
}

.Alert_Row_Bottom_Description[b-gvukkyw0ui] {
    display: flex;
    flex-direction: row;
    align-items: center;
    width: 100%;
    text-align: center;
    line-height: 40px;
    height: 40px;
    color: white;
}

.Alert_Row_Bottom_Description_Status[b-gvukkyw0ui] {
    text-align: left;
    width: 30%;
    letter-spacing: 1px;
    margin-left: 15px;
}

.Alert_Row_Bottom_Description_Definition[b-gvukkyw0ui] {
    text-align: center;
    width: 70%;
    letter-spacing: 1px;
}

.Alert_Row_Bottom_Chart[b-gvukkyw0ui] {
    width: 100%;
    height: auto;
    margin: auto;
}

.Alert_Row_Bottom_Spacer[b-gvukkyw0ui] {
    width: 100%;
    height: 20px;
}

.alert-dot[b-gvukkyw0ui] {
    display: inline-block;
    width: 5px;
    height: 5px;
    border-radius: 50%;
    margin-right: 8px;
    vertical-align: middle;
    position: relative;
    top: -1px;
}

.color_attention[b-gvukkyw0ui] {
    background-color: rgba(200, 16, 46, 1);
}

.color_progress[b-gvukkyw0ui] {
    background-color: rgba(255, 255, 0, 1);
}

.color_resolved[b-gvukkyw0ui] {
    background-color: rgba(0, 255, 38, 1);
}

.text_color_attention[b-gvukkyw0ui] {
    color: rgba(200, 16, 46, 1);
}

.text_color_inprogress[b-gvukkyw0ui] {
    color: rgba(255, 255, 0, 1);
}

.text_color_resolved[b-gvukkyw0ui] {
    color: rgba(0, 255, 38, 1);
}

.legend[b-gvukkyw0ui] {
    display: flex;
    font-family: Helvetica;
    font-size: 11px;
    line-height: 40px;
    color: grey;
    width: 90%;
    margin: auto;
    max-width: 800px;
    text-align: center;
}

.legend-item[b-gvukkyw0ui] {
    display: flex;
    align-items: center;
    justify-content: center;
    flex: 1;
    gap: 5px;
    color: rgba(208, 205, 206, 1);
}

.dot[b-gvukkyw0ui] {
    width: 5px;
    height: 5px;
    border-radius: 50%;
    display: inline-block;
}

.dot-red[b-gvukkyw0ui] {
    background-color: red;
}

.dot-yellow[b-gvukkyw0ui] {
    background-color: yellow;
}

.dot-green[b-gvukkyw0ui] {
    background-color: green;
}

.loading-spinner[b-gvukkyw0ui] {
    color: rgba(208, 205, 206, 1);
    font-family: Helvetica;
    font-size: 12px;
}

.chart-placeholder[b-gvukkyw0ui] {
    padding: 20px;
    text-align: center;
    color: rgba(208, 205, 206, 1);
    font-size: 11px;
}

/* Mobile responsiveness */
@media (max-width: 768px) {
    .Alert_Container[b-gvukkyw0ui] {
        width: 95%;
    }
    
    .Alert_Row_Top_date[b-gvukkyw0ui],
    .Alert_Row_Top_Location[b-gvukkyw0ui] {
        font-size: 10px;
    }
    
    .Alert_Top_Title[b-gvukkyw0ui] {
        font-size: 12px;
        letter-spacing: 3px;
    }
    
    .Alert_Top_7Days[b-gvukkyw0ui] {
        font-size: 10px;
        right: 15px;
    }
    
    .legend[b-gvukkyw0ui] {
        width: 95%;
    }
    
    .legend-item[b-gvukkyw0ui] {
        font-size: 10px;
    }
}

/* Modern Alert Cards Layout */
.alerts-list[b-gvukkyw0ui] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    padding: 20px;
}

/* Alert Card */
.alert-card[b-gvukkyw0ui] {
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(8px);
    border: 1px solid;
    border-radius: 24px;
    transition: all 0.3s;
    cursor: pointer;
}

.alert-card:hover[b-gvukkyw0ui] {
    transform: translateY(-2px);
    box-shadow: 0 8px 16px rgba(0, 0, 0, 0.3);
}

.alert-card-critical[b-gvukkyw0ui] {
    border-color: rgba(239, 68, 68, 0.15);
    background: linear-gradient(135deg, rgba(220, 38, 38, 0.05), rgba(234, 88, 12, 0.05));
}

.alert-card-warning[b-gvukkyw0ui] {
    border-color: rgba(245, 158, 11, 0.15);
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.05), rgba(234, 179, 8, 0.05));
}

.alert-card-success[b-gvukkyw0ui] {
    border-color: rgba(16, 185, 129, 0.15);
    background: linear-gradient(135deg, rgba(16, 185, 129, 0.05), rgba(34, 197, 94, 0.05));
}

.alert-glow[b-gvukkyw0ui] {
    position: absolute;
    top: -40px;
    right: -40px;
    width: 128px;
    height: 128px;
    border-radius: 50%;
    filter: blur(80px);
    opacity: 0.5;
    pointer-events: none;
}

.alert-glow-critical[b-gvukkyw0ui] { background: rgba(239, 68, 68, 0.1); }
.alert-glow-warning[b-gvukkyw0ui] { background: rgba(245, 158, 11, 0.1); }
.alert-glow-success[b-gvukkyw0ui] { background: rgba(16, 185, 129, 0.1); }

.alert-header[b-gvukkyw0ui] {
    padding: 16px 20px;
}

.alert-content[b-gvukkyw0ui] {
    display: flex;
    align-items: flex-start;
    gap: 12px;
}

.alert-icon[b-gvukkyw0ui] {
    border-radius: 16px;
    padding: 12px;
    flex-shrink: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

.alert-icon-critical[b-gvukkyw0ui] { background: rgba(239, 68, 68, 0.2); }
.alert-icon-warning[b-gvukkyw0ui] { background: rgba(245, 158, 11, 0.2); }
.alert-icon-success[b-gvukkyw0ui] { background: rgba(16, 185, 129, 0.2); }

.alert-info[b-gvukkyw0ui] {
    flex: 1;
    min-width: 0;
}

.alert-title-row[b-gvukkyw0ui] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
    flex-wrap: wrap;
}

.alert-title[b-gvukkyw0ui] {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
}

.alert-badge[b-gvukkyw0ui] {
    padding: 2px 8px;
    border: 1px solid;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
}

.alert-badge-critical[b-gvukkyw0ui] {
    background: rgba(239, 68, 68, 0.3);
    color: #fca5a5;
    border-color: rgba(239, 68, 68, 0.4);
}

.alert-badge-warning[b-gvukkyw0ui] {
    background: rgba(245, 158, 11, 0.3);
    color: #fcd34d;
    border-color: rgba(245, 158, 11, 0.4);
}

.alert-badge-success[b-gvukkyw0ui] {
    background: rgba(16, 185, 129, 0.3);
    color: #6ee7b7;
    border-color: rgba(16, 185, 129, 0.4);
}

.alert-device[b-gvukkyw0ui] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin-bottom: 8px;
}

.alert-meta[b-gvukkyw0ui] {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
    flex-wrap: wrap;
}

.alert-meta svg[b-gvukkyw0ui] {
    width: 16px;
    height: 16px;
}

/* Expanded content */
.alert-expanded-content[b-gvukkyw0ui] {
    padding: 0 20px 20px 20px;
    animation: expand-fade-in-b-gvukkyw0ui 0.3s ease-out;
}

@keyframes expand-fade-in-b-gvukkyw0ui {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.alert-details-section[b-gvukkyw0ui] {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 12px 16px;
    margin-bottom: 12px;
}

.alert-detail-item[b-gvukkyw0ui] {
    display: flex;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid rgba(255, 255, 255, 0.05);
}

.alert-detail-item:last-child[b-gvukkyw0ui] {
    border-bottom: none;
}

.alert-detail-label[b-gvukkyw0ui] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.5);
}

.alert-detail-value[b-gvukkyw0ui] {
    font-size: 12px;
    color: rgba(255, 255, 255, 0.9);
    font-weight: 500;
}

.alert-chart-section[b-gvukkyw0ui] {
    background: rgba(0, 0, 0, 0.2);
    border-radius: 12px;
    padding: 16px;
}

.chart-placeholder[b-gvukkyw0ui] {
    text-align: center;
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

.chart-placeholder p[b-gvukkyw0ui] {
    margin: 0 0 8px 0;
    font-size: 14px;
    font-weight: 600;
}

.chart-placeholder small[b-gvukkyw0ui] {
    font-size: 11px;
    color: rgba(255, 255, 255, 0.4);
}

/* Retry button */
.btn-retry[b-gvukkyw0ui] {
    background: rgba(153, 27, 27, 0.8);
    color: white;
    border: 1px solid rgba(153, 27, 27, 1);
    padding: 10px 20px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-retry:hover[b-gvukkyw0ui] {
    background: rgba(185, 28, 28, 0.9);
}

/* Loading spinner */
.loading-spinner[b-gvukkyw0ui] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

/* Responsive */
@media (max-width: 640px) {
    .alerts-list[b-gvukkyw0ui] {
        padding: 12px;
        gap: 12px;
    }
    
    .alert-header[b-gvukkyw0ui] {
        padding: 12px 16px;
    }
    
    .alert-title[b-gvukkyw0ui] {
        font-size: 14px;
    }
    
    .alert-device[b-gvukkyw0ui] {
        font-size: 12px;
    }
    
    .alert-meta[b-gvukkyw0ui] {
        font-size: 11px;
    }
}

/* Chart section styling */
.alert-chart-section[b-gvukkyw0ui] {
    background: rgba(0, 0, 0, 0.3);
    border-radius: 12px;
    padding: 16px;
    margin-top: 12px;
}

/* Override chart container for alert context */
.alert-chart-section .chart-container[b-gvukkyw0ui] {
    background: transparent;
    padding: 0;
}

/* Responsive chart */
@media (max-width: 640px) {
    .alert-chart-section[b-gvukkyw0ui] {
        padding: 12px;
    }
}

/* Larger font sizes for Site and Case ID */
.alert-detail-item-large[b-gvukkyw0ui] {
    padding: 8px 0; /* Slightly more padding */
}

.alert-detail-label-large[b-gvukkyw0ui] {
    font-size: 14px; /* Increased from 12px */
    color: rgba(255, 255, 255, 0.6);
    font-weight: 500;
}

.alert-detail-value-large[b-gvukkyw0ui] {
    font-size: 15px; /* Increased from 12px */
    color: rgba(255, 255, 255, 0.95);
    font-weight: 600; /* Slightly bolder */
}
/* /Components/DualChart.razor.rz.scp.css */
/* ✅ NEW: Threshold Meter Styles */
.threshold-meter-container[b-f955rxo87q] {
    margin-bottom: 16px;
    padding: 12px 16px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    animation: slideIn-b-f955rxo87q 0.3s ease-out;
}

@keyframes slideIn-b-f955rxo87q {
    from {
        opacity: 0;
        transform: translateY(-10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.threshold-labels[b-f955rxo87q] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    margin-bottom: 12px;
    gap: 12px;
}

.threshold-label[b-f955rxo87q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
}

.threshold-label-title[b-f955rxo87q] {
    font-size: 11px;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    opacity: 0.6;
    color: rgba(255, 255, 255, 0.7);
}

.threshold-label-value[b-f955rxo87q] {
    font-size: 16px;
    font-weight: 600;
    color: rgba(255, 255, 255, 0.95);
}

.threshold-min .threshold-label-value[b-f955rxo87q] {
    color: #ff9f40;
}

.threshold-max .threshold-label-value[b-f955rxo87q] {
    color: #ff9f40;
}

.threshold-current .threshold-label-value[b-f955rxo87q] {
    font-size: 20px;
    transition: color 0.3s ease;
}

.threshold-current.safe .threshold-label-value[b-f955rxo87q] {
    color: #3b82f6;
}

.threshold-current.danger .threshold-label-value[b-f955rxo87q] {
    color: #f44336;
    animation: pulse-b-f955rxo87q 2s ease-in-out infinite;
}

@keyframes pulse-b-f955rxo87q {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: 0.7;
    }
}

.threshold-bar[b-f955rxo87q] {
    position: relative;
    width: 100%;
    height: 8px;
}

.threshold-bar-track[b-f955rxo87q] {
    position: relative;
    width: 100%;
    height: 100%;
    background: linear-gradient(to right, 
        rgba(244, 67, 54, 0.3) 0%, 
        rgba(59, 130, 246, 0.5) 15%, 
        rgba(59, 130, 246, 0.5) 85%, 
        rgba(244, 67, 54, 0.3) 100%);
    border-radius: 4px;
    overflow: visible;
}

.threshold-bar-indicator[b-f955rxo87q] {
    position: absolute;
    top: 50%;
    transform: translate(-50%, -50%);
    transition: left 0.4s ease-out;
}

.threshold-bar-dot[b-f955rxo87q] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.4);
    transition: all 0.3s ease;
}

.threshold-bar-dot.safe[b-f955rxo87q] {
    background: #3b82f6;
    box-shadow: 0 0 12px rgba(59, 130, 246, 0.6), 0 2px 8px rgba(0, 0, 0, 0.4);
}

.threshold-bar-dot.danger[b-f955rxo87q] {
    background: #f44336;
    box-shadow: 0 0 16px rgba(244, 67, 54, 0.8), 0 2px 8px rgba(0, 0, 0, 0.4);
    animation: dangerPulse-b-f955rxo87q 1.5s ease-in-out infinite;
}

@keyframes dangerPulse-b-f955rxo87q {
    0%, 100% {
        transform: scale(1);
    }
    50% {
        transform: scale(1.2);
    }
}

.dual-chart-container[b-f955rxo87q] {
    width: 100%;
    height: 100%;
    position: relative;
    min-height: 300px;
}

.chart-loading[b-f955rxo87q],
.chart-error[b-f955rxo87q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    text-align: center;
    padding: 20px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
}

.chart-loading[b-f955rxo87q] {
    color: rgba(255, 255, 255, 0.7);
}

.chart-error[b-f955rxo87q] {
    color: rgba(255, 255, 255, 0.6);
}

.chart-error p[b-f955rxo87q] {
    margin: 0;
    color: rgba(255, 255, 255, 0.6);
}

.chart-error svg[b-f955rxo87q] {
    margin-bottom: 12px;
    opacity: 0.5;
}

/* ✅ Enhanced loading spinner */
.loading-spinner-container[b-f955rxo87q] {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 16px;
}

.loading-spinner[b-f955rxo87q] {
    width: 40px;
    height: 40px;
    border: 3px solid rgba(59, 130, 246, 0.3);
    border-top-color: #3b82f6;
    border-radius: 50%;
    animation: spin-b-f955rxo87q 1s linear infinite;
    margin: 0 auto 16px;
}

@keyframes spin-b-f955rxo87q {
    to { transform: rotate(360deg); }
}

.loading-text[b-f955rxo87q] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
    font-weight: 500;
    margin: 0;
}

/* ✅ NEW: Awaiting Data state */
.chart-awaiting-data[b-f955rxo87q] {
    display: flex;
    align-items: center;
    justify-content: center;
    min-height: 280px;
    background: rgba(0, 0, 0, 0.2);
    border-radius: 8px;
    padding: 40px;
}

.awaiting-content[b-f955rxo87q] {
    text-align: center;
    animation: fadeIn-b-f955rxo87q 0.3s ease-in;
}

.awaiting-content h3[b-f955rxo87q] {
    color: rgba(255, 255, 255, 0.9);
    margin: 0 0 8px 0;
    font-size: 18px;
}

.awaiting-content p[b-f955rxo87q] {
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
    font-size: 14px;
}

.awaiting-content p:last-child[b-f955rxo87q] {
    color: rgba(255, 255, 255, 0.4);
    margin: 8px 0 0 0;
    font-size: 12px;
}

@keyframes fadeIn-b-f955rxo87q {
    from {
        opacity: 0;
        transform: translateY(10px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

.chart-wrapper[b-f955rxo87q] {
    width: 100%;
    height: 350px; /* ✅ INCREASED: Same height as diagnostic mode */
    max-height: 350px;
    position: relative;
}

/* Responsive adjustments */
@media (max-width: 640px) {
    .chart-wrapper[b-f955rxo87q] {
        height: 240px;
        max-height: 240px;
    }
    
    .chart-awaiting-data[b-f955rxo87q],
    .chart-loading[b-f955rxo87q],
    .chart-error[b-f955rxo87q] {
        min-height: 240px;
    }
}

/* ✅ NEW: Threshold reference display */
.threshold-reference[b-f955rxo87q] {
    margin-top: 8px;
    text-align: center;
}

.threshold-ref-text[b-f955rxo87q] {
    font-size: 11px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

@media (max-width: 640px) {
    .threshold-ref-text[b-f955rxo87q] {
        font-size: 10px;
    }
}
/* /Components/Layout/MainLayout.razor.rz.scp.css */
#blazor-error-ui[b-havttf682b] {
    background: lightyellow;
    bottom: 0;
    box-shadow: 0 -1px 2px rgba(0, 0, 0, 0.2);
    display: none;
    left: 0;
    padding: 0.6rem 1.25rem 0.7rem 1.25rem;
    position: fixed;
    width: 100%;
    z-index: 1000;
}

    #blazor-error-ui .dismiss[b-havttf682b] {
        cursor: pointer;
        position: absolute;
        right: 0.75rem;
        top: 0.5rem;
    }
/* /Components/Pages/Alerts.razor.rz.scp.css */
/* Override stats grid for Alerts page - make compact and horizontal */
.stats-grid[b-gyc9t47bjm] {
    display: flex;
    flex-direction: row;
    gap: 8px;
    margin-top: 8px;
}

.stat-card[b-gyc9t47bjm] {
    flex: 1;
    padding: 8px 12px;
    min-height: auto;
    backdrop-filter: blur(16px); /* INCREASED: More blur for arrows behind */
    display: flex;
    flex-direction: column;
    align-items: center; /* CENTER the content */
}

.stat-label[b-gyc9t47bjm] {
    font-size: 13px; /* INCREASED from 10px */
    margin-bottom: 4px; /* INCREASED from 2px for better spacing */
    white-space: nowrap;
    font-weight: 600; /* Make labels bolder */
    text-align: center; /* Center the text */
}

.stat-value[b-gyc9t47bjm] {
    font-size: 24px; /* INCREASED from 20px */
    line-height: 1;
    text-align: center; /* CENTER the numbers */
}

/* Mobile: Keep horizontal but more compact */
@media (max-width: 640px) {
    .stats-grid[b-gyc9t47bjm] {
        gap: 6px;
    }
    
    .stat-card[b-gyc9t47bjm] {
        padding: 6px 8px;
    }
    
    .stat-label[b-gyc9t47bjm] {
        font-size: 11px; /* INCREASED from 9px */
    }
    
    .stat-value[b-gyc9t47bjm] {
        font-size: 22px; /* INCREASED from 18px */
    }
}

/* Very small screens: even more compact */
@media (max-width: 400px) {
    .stats-grid[b-gyc9t47bjm] {
        gap: 4px;
    }
    
    .stat-card[b-gyc9t47bjm] {
        padding: 6px 4px;
    }
    
    .stat-label[b-gyc9t47bjm] {
        font-size: 10px; /* INCREASED from 8px */
    }
    
    .stat-value[b-gyc9t47bjm] {
        font-size: 20px; /* INCREASED from 16px */
    }
}

/* ========================================
   FIXED ARROW DECORATIONS WITH BLUR
   ======================================== */

/* Arrow decorations - FIXED POSITION WITH BLUR */
.arrow-decoration[b-gyc9t47bjm] {
    position: fixed;
    width: auto;
    pointer-events: none;
    z-index: 0; /* BEHIND everything */
    opacity: 0.3; /* REDUCED from 0.4 for subtler effect */
    filter: blur(2px); /* ADDED: Slight blur on arrows themselves */
}

.arrow-left[b-gyc9t47bjm] {
    left: 0;
    top: 0;
    height: 384px;
}

.arrow-right[b-gyc9t47bjm] {
    right: 0;
    bottom: 0;
    height: 384px;
}

/* Ensure alerts screen allows content to scroll over fixed arrows */
.alerts-screen[b-gyc9t47bjm] {
    position: relative;
    z-index: 1;
}
/* /Components/Pages/ApexLogin.razor.rz.scp.css */
/* ========================================
   LOGIN PAGE - SIMPLIFIED (NO COMPLEX ANIMATIONS)
   ======================================== */

/* Simple fade-in for all elements */
.login-content.animation-active .logo-animate[b-8gwb79zno4],
.login-content.animation-active .form-animate[b-8gwb79zno4],
.login-content.animation-active .status-animate[b-8gwb79zno4] {
    animation: simple-fade-in-b-8gwb79zno4 0.8s ease-out forwards;
}

.login-content:not(.animation-active) .logo-animate[b-8gwb79zno4],
.login-content:not(.animation-active) .form-animate[b-8gwb79zno4],
.login-content:not(.animation-active) .status-animate[b-8gwb79zno4] {
    opacity: 0;
}

@keyframes simple-fade-in-b-8gwb79zno4 {
    from {
        opacity: 0;
        transform: translateY(20px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Stagger the animations slightly */
.logo-animate[b-8gwb79zno4] {
    animation-delay: 0s;
}

.form-animate[b-8gwb79zno4] {
    animation-delay: 0.2s;
}

.status-animate[b-8gwb79zno4] {
    animation-delay: 0.4s;
}

/* ========================================
   ERROR MESSAGE & STATES
   ======================================== */

/* Error Message */
.error-message[b-8gwb79zno4] {
    padding: 12px 16px;
    background: rgba(239, 68, 68, 0.1);
    border: 1px solid rgba(239, 68, 68, 0.3);
    border-radius: 12px;
    color: #fca5a5;
    font-size: 14px;
    text-align: center;
    animation: shake-b-8gwb79zno4 0.5s ease-in-out;
}

@keyframes shake-b-8gwb79zno4 {
    0%, 100% { transform: translateX(0); }
    10%, 30%, 50%, 70%, 90% { transform: translateX(-5px); }
    20%, 40%, 60%, 80% { transform: translateX(5px); }
}

/* Help Message - INCREASED SIZE */
.help-message[b-8gwb79zno4] {
    margin-top: 16px;
    text-align: center;
    color: rgba(255, 255, 255, 0.7);
    font-size: 16px; /* INCREASED from 14px */
    font-weight: 500;
}

/* Phone Link Styling - INCREASED SIZE */
.phone-link[b-8gwb79zno4] {
    color: rgba(153, 27, 27, 1);
    text-decoration: none;
    font-size: 17px; /* ADDED: Slightly bigger than surrounding text */
    font-weight: 600;
    transition: all 0.2s ease;
    border-bottom: 1px solid transparent;
}

.phone-link:hover[b-8gwb79zno4] {
    color: rgba(185, 28, 28, 1);
    border-bottom: 1px solid rgba(185, 28, 28, 0.5);
}

.phone-link:active[b-8gwb79zno4] {
    color: rgba(220, 38, 38, 1);
}

/* Loading state for button */
.btn-login:disabled[b-8gwb79zno4] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Input disabled state */
.form-input:disabled[b-8gwb79zno4] {
    opacity: 0.6;
    cursor: not-allowed;
}
/* /Components/Pages/Sensors.razor.rz.scp.css */
/* ========================================
   FIXED ARROW DECORATIONS WITH BLUR
   ======================================== */

/* Arrow decorations - FIXED POSITION WITH BLUR */
.arrow-decoration[b-gf4pqfn9oe] {
    position: fixed;
    width: auto;
    pointer-events: none;
    z-index: 0; /* BEHIND everything */
    opacity: 0.3; /* REDUCED from 0.4 for subtler effect */
    filter: blur(2px); /* ADDED: Slight blur on arrows themselves */
}

.arrow-left[b-gf4pqfn9oe] {
    left: 0;
    top: 0;
    height: 384px;
}

.arrow-right[b-gf4pqfn9oe] {
    right: 0;
    bottom: 0;
    height: 384px;
}

/* Ensure sensors screen allows content to scroll over fixed arrows */
.sensors-screen[b-gf4pqfn9oe] {
    position: relative;
    z-index: 1;
}

/* ========================================
   SENSORS SCREEN - Matching Figma prototype
   ======================================== */

/* Sensors List - CRITICAL SPACING: 16px gaps */
.sensors-list[b-gf4pqfn9oe] {
    display: flex;
    flex-direction: column;
    gap: 16px;
    position: relative;
    z-index: 1;
}

/* Base Sensor Card - ENHANCED BLUR */
.sensor-card[b-gf4pqfn9oe] {
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(16px); /* INCREASED from 8px - blurs arrows behind */
    border: 1px solid;
    border-radius: 24px;
    padding: 20px;
    transition: all 0.3s;
    cursor: pointer;
}

.sensor-card:hover[b-gf4pqfn9oe] {
    transform: scale(1.02);
    backdrop-filter: blur(20px); /* ADDED: Even more blur on hover */
}

/* CT / Current Sensors - Blue/Cyan */
.sensor-card-ct[b-gf4pqfn9oe] {
    background: linear-gradient(135deg, rgba(14, 165, 233, 0.08), rgba(6, 182, 212, 0.08));
    border-color: rgba(14, 165, 233, 0.3);
}

/* Temperature Sensors - Orange/Red */
.sensor-card-temp[b-gf4pqfn9oe] {
    background: linear-gradient(135deg, rgba(249, 115, 22, 0.08), rgba(239, 68, 68, 0.08));
    border-color: rgba(249, 115, 22, 0.3);
}

/* Voltage Sensors - Yellow */
.sensor-card-voltage[b-gf4pqfn9oe] {
    background: linear-gradient(135deg, rgba(234, 179, 8, 0.08), rgba(245, 158, 11, 0.08));
    border-color: rgba(234, 179, 8, 0.3);
}

/* Humidity Sensors - Blue/Aqua */
.sensor-card-humidity[b-gf4pqfn9oe] {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.08), rgba(147, 197, 253, 0.08));
    border-color: rgba(59, 130, 246, 0.3);
}

/* Pressure Sensors - Purple */
.sensor-card-pressure[b-gf4pqfn9oe] {
    background: linear-gradient(135deg, rgba(168, 85, 247, 0.08), rgba(192, 132, 252, 0.08));
    border-color: rgba(168, 85, 247, 0.3);
}

/* Power Sensors - Green */
.sensor-card-power[b-gf4pqfn9oe] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(74, 222, 128, 0.08));
    border-color: rgba(34, 197, 94, 0.3);
}

/* Default/Unknown Sensors - Gray */
.sensor-card-default[b-gf4pqfn9oe] {
    background: linear-gradient(135deg, rgba(100, 116, 139, 0.08), rgba(71, 85, 105, 0.08));
    border-color: rgba(100, 116, 139, 0.3);
}

/* Sensor Header */
.sensor-header[b-gf4pqfn9oe] {
    display: flex;
    align-items: center; /* CHANGED from flex-start to center for vertical centering */
    gap: 16px;
}

/* ✅ UPDATED: Even bigger icon wrapper with more padding */
.sensor-icon-wrapper[b-gf4pqfn9oe] {
    background: rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    padding: 24px; /* ✅ INCREASED from 20px for even bigger box */
    backdrop-filter: blur(8px);
    display: flex; /* ADDED: Flexbox for centering */
    align-items: center; /* ADDED: Vertical centering */
    justify-content: center; /* ADDED: Horizontal centering */
    flex-shrink: 0; /* ADDED: Prevent shrinking */
}

/* ✅ UPDATED: Even bigger icon container */
.sensor-icon[b-gf4pqfn9oe] {
    display: flex; /* ADDED: Flexbox for centering */
    align-items: center; /* ADDED: Vertical centering */
    justify-content: center; /* ADDED: Horizontal centering */
    width: 52px; /* ✅ INCREASED from 40px to 52px */
    height: 52px; /* ✅ INCREASED from 40px to 52px */
}

.sensor-icon svg[b-gf4pqfn9oe] {
    width: 52px; /* ✅ INCREASED from 40px to 52px */
    height: 52px; /* ✅ INCREASED from 40px to 52px */
    stroke-width: 2.5; /* ✅ INCREASED from 1.5 for thicker lines */
    display: block; /* ADDED: Remove inline spacing */
}

/* ✅ Updated icon styling for IMG elements - EVEN BIGGER with thicker appearance */
.sensor-icon img[b-gf4pqfn9oe] {
    width: 52px; /* ✅ INCREASED from 40px to 52px */
    height: 52px; /* ✅ INCREASED from 40px to 52px */
    display: block;
    object-fit: contain;
    /* ✅ Add drop-shadow to simulate thicker strokes for SVGs */
    filter: drop-shadow(0 0 0.5px currentColor) drop-shadow(0 0 0.5px currentColor);
}

/* Icon colors by type */
.sensor-icon-ct[b-gf4pqfn9oe] { color: #38bdf8; }
.sensor-icon-temp[b-gf4pqfn9oe] { color: #4ade80; } /* CHANGED from #fb923c (orange) to #4ade80 (green) */
.sensor-icon-voltage[b-gf4pqfn9oe] { color: #fbbf24; }
.sensor-icon-humidity[b-gf4pqfn9oe] { color: #60a5fa; }
.sensor-icon-pressure[b-gf4pqfn9oe] { color: #a78bfa; }
.sensor-icon-power[b-gf4pqfn9oe] { color: #4ade80; }
.sensor-icon-default[b-gf4pqfn9oe] { color: #94a3b8; }

/* ✅ Apply color filters for SVG img elements */
.sensor-icon-ct img[b-gf4pqfn9oe] { 
    filter: brightness(0) saturate(100%) invert(74%) sepia(48%) saturate(497%) hue-rotate(165deg) brightness(102%) contrast(98%) 
            drop-shadow(0 0 0.5px #38bdf8) drop-shadow(0 0 0.5px #38bdf8); 
}
.sensor-icon-temp img[b-gf4pqfn9oe] { 
    filter: brightness(0) saturate(100%) invert(75%) sepia(35%) saturate(634%) hue-rotate(92deg) brightness(96%) contrast(89%) 
            drop-shadow(0 0 0.5px #4ade80) drop-shadow(0 0 0.5px #4ade80); 
}
.sensor-icon-voltage img[b-gf4pqfn9oe] { 
    filter: brightness(0) saturate(100%) invert(82%) sepia(67%) saturate(491%) hue-rotate(358deg) brightness(100%) contrast(95%) 
            drop-shadow(0 0 0.5px #fbbf24) drop-shadow(0 0 0.5px #fbbf24); 
}
.sensor-icon-humidity img[b-gf4pqfn9oe] { 
    filter: brightness(0) saturate(100%) invert(64%) sepia(52%) saturate(538%) hue-rotate(188deg) brightness(101%) contrast(97%) 
            drop-shadow(0 0 0.5px #60a5fa) drop-shadow(0 0 0.5px #60a5fa); 
}
.sensor-icon-pressure img[b-gf4pqfn9oe] { 
    filter: brightness(0) saturate(100%) invert(63%) sepia(48%) saturate(1229%) hue-rotate(218deg) brightness(101%) contrast(94%) 
            drop-shadow(0 0 0.5px #a78bfa) drop-shadow(0 0 0.5px #a78bfa); 
}
.sensor-icon-power img[b-gf4pqfn9oe] { 
    filter: brightness(0) saturate(100%) invert(75%) sepia(35%) saturate(634%) hue-rotate(92deg) brightness(96%) contrast(89%) 
            drop-shadow(0 0 0.5px #4ade80) drop-shadow(0 0 0.5px #4ade80); 
}
.sensor-icon-default img[b-gf4pqfn9oe] { 
    filter: brightness(0) saturate(100%) invert(70%) sepia(8%) saturate(691%) hue-rotate(177deg) brightness(93%) contrast(87%) 
            drop-shadow(0 0 0.5px #94a3b8) drop-shadow(0 0 0.5px #94a3b8); 
}

.sensor-info[b-gf4pqfn9oe] {
    flex: 1;
}

.sensor-title-row[b-gf4pqfn9oe] {
    display: flex;
    align-items: center;
    gap: 8px;
    margin-bottom: 4px;
}

.sensor-name[b-gf4pqfn9oe] {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
}

/* Retry button */
.btn-retry[b-gf4pqfn9oe] {
    background: rgba(153, 27, 27, 0.8);
    color: white;
    border: 1px solid rgba(153, 27, 27, 1);
    padding: 10px 20px;
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 500;
    transition: all 0.2s;
}

.btn-retry:hover[b-gf4pqfn9oe] {
    background: rgba(185, 28, 28, 0.9);
}

/* Loading spinner */
.loading-spinner[b-gf4pqfn9oe] {
    color: rgba(255, 255, 255, 0.7);
    font-size: 14px;
}

/* Responsive */
@media (max-width: 640px) {
    .sensor-card[b-gf4pqfn9oe] {
        padding: 16px;
    }
    
    .sensor-name[b-gf4pqfn9oe] {
        font-size: 14px;
    }
    
    /* Slightly smaller icons on mobile */
    .sensor-icon[b-gf4pqfn9oe] {
        width: 40px;
        height: 40px;
    }
    
    .sensor-icon svg[b-gf4pqfn9oe] {
        width: 40px;
        height: 40px;
        stroke-width: 2.5;
    }
    
    .sensor-icon img[b-gf4pqfn9oe] {
        width: 40px;
        height: 40px;
    }
    
    .sensor-icon-wrapper[b-gf4pqfn9oe] {
        padding: 18px;
    }
}

/* Site filter card - ENHANCED BLUR */
.site-filter-card[b-gf4pqfn9oe] {
    position: relative;
    overflow: visible;
    backdrop-filter: blur(16px); /* INCREASED from 8px */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 16px;
    margin-bottom: 16px;
    z-index: 10;
}

.site-filter-row[b-gf4pqfn9oe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.site-filter-label[b-gf4pqfn9oe] {
    display: flex;
    align-items: center;
    gap: 8px;
}

.site-filter-label svg[b-gf4pqfn9oe] {
    width: 20px;
    height: 20px;
    color: rgba(255, 255, 255, 0.6);
}

.site-filter-label span[b-gf4pqfn9oe] {
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
    font-weight: 500;
}

/* Site dropdown */
.site-dropdown-container[b-gf4pqfn9oe] {
    position: relative;
}

.btn-site-select[b-gf4pqfn9oe] {
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 8px 16px;
    cursor: pointer;
    transition: all 0.3s;
    font-size: 14px;
    display: flex;
    align-items: center;
    gap: 8px;
}

.btn-site-select:hover[b-gf4pqfn9oe] {
    background: rgba(255, 255, 255, 0.2);
}

/* Dropdown menu */
.site-dropdown-menu[b-gf4pqfn9oe] {
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    min-width: 250px;
    background: rgba(15, 23, 42, 0.98);
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 16px;
    padding: 8px;
    z-index: 50;
    box-shadow: 0 10px 25px rgba(0, 0, 0, 0.5);
    backdrop-filter: blur(16px); /* INCREASED from 12px */
    max-height: 400px;
    overflow-y: auto;
}

.site-dropdown-item[b-gf4pqfn9oe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 16px;
    border-radius: 12px;
    cursor: pointer;
    transition: all 0.2s;
    color: rgba(255, 255, 255, 0.9);
    font-size: 14px;
}

.site-dropdown-item:hover:not(.disabled)[b-gf4pqfn9oe] {
    background: rgba(255, 255, 255, 0.1);
}

.site-dropdown-item.active[b-gf4pqfn9oe] {
    background: rgba(153, 27, 27, 0.3);
    color: #ffffff;
    font-weight: 600;
}

.site-dropdown-item.disabled[b-gf4pqfn9oe] {
    cursor: not-allowed;
    opacity: 0.5;
}

.site-count[b-gf4pqfn9oe] {
    color: rgba(255, 255, 255, 0.6);
    font-size: 12px;
}

/* Scrollbar for dropdown */
.site-dropdown-menu[b-gf4pqfn9oe]::-webkit-scrollbar {
    width: 6px;
}

.site-dropdown-menu[b-gf4pqfn9oe]::-webkit-scrollbar-track {
    background: rgba(255, 255, 255, 0.05);
    border-radius: 3px;
}

.site-dropdown-menu[b-gf4pqfn9oe]::-webkit-scrollbar-thumb {
    background: rgba(255, 255, 255, 0.2);
    border-radius: 3px;
}

.site-dropdown-menu[b-gf4pqfn9oe]::-webkit-scrollbar-thumb:hover {
    background: rgba(255, 255, 255, 0.3);
}

/* ========================================
   SENSOR DETAIL VIEW - ENHANCED BLUR
   ======================================== */

.sensor-detail-view[b-gf4pqfn9oe] {
    display: flex;
    flex-direction: column;
    gap: 16px;
}

/* NEW: Back Button Card - Larger, more prominent */
.back-button-card[b-gf4pqfn9oe] {
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(16px);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 16px;
}

/* NEW: Large Back Button - Matches diagnostic button size */
.btn-back-large[b-gf4pqfn9oe] {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 8px;
    width: 100%;
    background: rgba(255, 255, 255, 0.1);
    color: #ffffff;
    border: 1px solid rgba(255, 255, 255, 0.2);
    border-radius: 12px;
    padding: 12px 24px;
    cursor: pointer;
    font-size: 16px;
    font-weight: 600;
    transition: all 0.3s;
}

.btn-back-large:hover[b-gf4pqfn9oe] {
    background: rgba(255, 255, 255, 0.15);
    border-color: rgba(255, 255, 255, 0.3);
    transform: translateY(-2px);
}

.btn-back-large svg[b-gf4pqfn9oe] {
    width: 20px;
    height: 20px;
}

/* OLD: Remove old small back button styles (keeping for reference if needed elsewhere) */
.btn-back[b-gf4pqfn9oe] {
    display: flex;
    align-items: center;
    gap: 4px;
    background: transparent;
    color: rgba(255, 255, 255, 0.8);
    border: none;
    border-radius: 12px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    transition: all 0.3s;
    width: fit-content;
}

.btn-back:hover[b-gf4pqfn9oe] {
    background: rgba(255, 255, 255, 0.1);
}

.btn-back svg[b-gf4pqfn9oe] {
    width: 16px;
    height: 16px;
}

/* Sensor Detail Card - ENHANCED BLUR */
.sensor-detail-card[b-gf4pqfn9oe] {
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(16px);
    border: 1px solid;
    border-radius: 24px;
    padding: 24px;
}

/* NEW: Enhanced header layout with icon on right */
.detail-header-enhanced[b-gf4pqfn9oe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap: 20px;
}

/* OLD: Keep for backward compatibility but prefer enhanced version */
.detail-header-simple[b-gf4pqfn9oe] {
    display: flex;
    justify-content: space-between;
    align-items: center;
}

.detail-info[b-gf4pqfn9oe] {
    flex: 1;
    min-width: 0; /* Prevent text overflow */
}

/* NEW: Friendly type name (e.g., "Electrical Current") */
.detail-type-friendly[b-gf4pqfn9oe] {
    font-size: 22px;
    font-weight: 700;
    color: #ffffff;
    margin: 0 0 8px 0;
    line-height: 1.2;
}

/* OLD: Original type display */
.detail-type[b-gf4pqfn9oe] {
    font-size: 18px;
    font-weight: 600;
    color: #ffffff;
    margin: 0 0 4px 0;
}

/* NEW: Description • Site Name */
.detail-description-site[b-gf4pqfn9oe] {
    font-size: 16px; /* INCREASED from 14px */
    color: rgba(255, 255, 255, 0.7);
    margin: 0;
    line-height: 1.4;
}

/* OLD: Device name */
.detail-device[b-gf4pqfn9oe] {
    font-size: 14px;
    color: rgba(255, 255, 255, 0.6);
    margin: 0;
}

/* ✅ UPDATED: Even bigger icon wrapper for detail view */
.detail-icon-wrapper[b-gf4pqfn9oe] {
    flex-shrink: 0;
    background: rgba(255, 255, 255, 0.1);
    border-radius: 20px;
    padding: 26px; /* ✅ INCREASED from 22px */
    backdrop-filter: blur(8px);
    display: flex;
    align-items: center;
    justify-content: center;
}

/* ✅ UPDATED: Even bigger icon for detail view */
.detail-icon[b-gf4pqfn9oe] {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 60px; /* ✅ INCREASED from 48px to 60px */
    height: 60px; /* ✅ INCREASED from 48px to 60px */
}

.detail-icon svg[b-gf4pqfn9oe] {
    width: 60px; /* ✅ INCREASED from 48px to 60px */
    height: 60px; /* ✅ INCREASED from 48px to 60px */
    stroke-width: 2.5; /* ✅ INCREASED from 1.5 for thicker lines */
    display: block;
}

/* ✅ UPDATED: Even bigger detail icon IMG elements with thicker appearance */
.detail-icon img[b-gf4pqfn9oe] {
    width: 60px; /* ✅ INCREASED from 48px to 60px */
    height: 60px; /* ✅ INCREASED from 48px to 60px */
    display: block;
    object-fit: contain;
    /* ✅ Add drop-shadow to simulate thicker strokes */
    filter: drop-shadow(0 0 0.5px currentColor) drop-shadow(0 0 0.5px currentColor);
}

/* OLD: Sensor badge (no longer needed with icon) */
.sensor-badge[b-gf4pqfn9oe] {
    padding: 2px 8px;
    border-radius: 9999px;
    font-size: 12px;
    font-weight: 600;
    text-transform: uppercase;
    border: 1px solid;
}

.sensor-badge-online[b-gf4pqfn9oe] {
    background: rgba(16, 185, 129, 0.3);
    color: #a7f3d0;
    border-color: rgba(16, 185, 129, 0.4);
}

/* Diagnostic Card - ENHANCED BLUR */
.diagnostic-card-compact[b-gf4pqfn9oe] {
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(16px); /* INCREASED from 12px */
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 20px;
}

.diagnostic-header-row[b-gf4pqfn9oe] {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 16px;
}

.diagnostic-left[b-gf4pqfn9oe] {
    display: flex;
    align-items: center;
    gap: 12px;
}

/* ✅ UPDATED: Even bigger diagnostic icon box */
.diagnostic-icon-compact[b-gf4pqfn9oe] {
    border-radius: 16px;
    padding: 16px; /* ✅ INCREASED from 14px */
    display: flex;
    align-items: center;
    justify-content: center;
    transition: all 0.3s;
    width: 60px; /* ✅ INCREASED from 52px to 60px */
    height: 60px; /* ✅ INCREASED from 52px to 60px */
}

.diagnostic-icon-inactive[b-gf4pqfn9oe] {
    background: rgba(255, 255, 255, 0.1);
}

.diagnostic-icon-active[b-gf4pqfn9oe] {
    background: rgba(239, 68, 68, 0.2); /* ✅ Changed to red background when active */
}

.diagnostic-icon-compact svg[b-gf4pqfn9oe] {
    width: 28px; /* ✅ INCREASED from 24px to 28px */
    height: 28px; /* ✅ INCREASED from 24px to 28px */
    stroke-width: 2.5; /* ✅ INCREASED from 1.5 for thicker lines */
}

/* ✅ UPDATED: Much bigger diagnostic icon IMG elements - WHITE when inactive, RED when active */
.diagnostic-icon-compact img[b-gf4pqfn9oe] {
    width: 56px; /* ✅ DOUBLED from 28px to 56px */
    height: 56px; /* ✅ DOUBLED from 28px to 56px */
    display: block;
    object-fit: contain;
    transition: filter 0.3s ease;
}

.diagnostic-icon-inactive svg[b-gf4pqfn9oe],
.diagnostic-icon-inactive i[b-gf4pqfn9oe] {
    color: rgba(255, 255, 255, 0.6);
}

/* ✅ WHITE icon when inactive */
.diagnostic-icon-inactive img[b-gf4pqfn9oe] {
    filter: brightness(0) saturate(100%) invert(100%) 
            drop-shadow(0 0 0.5px rgba(255, 255, 255, 0.8)) 
            drop-shadow(0 0 0.5px rgba(255, 255, 255, 0.8));
}

.diagnostic-icon-active svg[b-gf4pqfn9oe],
.diagnostic-icon-active i[b-gf4pqfn9oe] {
    color: #ef4444;
}

/* ✅ RED icon when active */
.diagnostic-icon-active img[b-gf4pqfn9oe] {
    filter: brightness(0) saturate(100%) invert(35%) sepia(94%) saturate(2819%) hue-rotate(346deg) brightness(97%) contrast(89%)
            drop-shadow(0 0 0.5px #ef4444) 
            drop-shadow(0 0 0.5px #ef4444);
}

.diagnostic-title[b-gf4pqfn9oe] {
    color: #ffffff;
    font-size: 16px;
    font-weight: 600;
}

.btn-diagnostic-compact[b-gf4pqfn9oe] {
    padding: 8px 20px;
    border: none;
    border-radius: 12px;
    color: #ffffff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s;
    box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1);
    white-space: nowrap;
    flex-shrink: 0;
}

.btn-diagnostic-inactive[b-gf4pqfn9oe] {
    background: rgba(255, 255, 255, 0.1);
}

.btn-diagnostic-inactive:hover[b-gf4pqfn9oe] {
    background: rgba(255, 255, 255, 0.2);
}

.btn-diagnostic-active[b-gf4pqfn9oe] {
    background: linear-gradient(to right, #2563eb, #14b8a6);
}

.btn-diagnostic-active:hover[b-gf4pqfn9oe] {
    background: linear-gradient(to right, #3b82f6, #0d9488);
}

.diagnostic-status[b-gf4pqfn9oe] {
    margin-top: 16px;
    display: flex;
    align-items: center;
    gap: 8px;
    color: #60a5fa;
    font-size: 14px;
}

.diagnostic-status-dot[b-gf4pqfn9oe] {
    width: 8px;
    height: 8px;
    background: #60a5fa;
    border-radius: 50%;
    animation: pulse-dot-b-gf4pqfn9oe 2s ease-in-out infinite;
}

@keyframes pulse-dot-b-gf4pqfn9oe {
    0%, 100% { opacity: 1; }
    50% { opacity: 0.5; }
}

/* Chart Card - ENHANCED BLUR */
.chart-card[b-gf4pqfn9oe] {
    position: relative;
    overflow: hidden;
    backdrop-filter: blur(16px);
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 24px;
    padding: 24px;
}

/* REMOVED: Old chart title */
.chart-title[b-gf4pqfn9oe] {
    display: none; /* Hidden - replaced by time selection buttons */
}

/* NEW: Time Period Selection Buttons */
.chart-time-selection[b-gf4pqfn9oe] {
    display: flex;
    gap: 12px;
    margin-bottom: 20px;
    padding: 8px;
    background: rgba(255, 255, 255, 0.03);
    border-radius: 16px;
    border: 1px solid rgba(255, 255, 255, 0.08);
}

.btn-time-period[b-gf4pqfn9oe] {
    flex: 1;
    padding: 10px 20px;
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.7);
    border: 1px solid rgba(255, 255, 255, 0.15);
    border-radius: 12px;
    cursor: pointer;
    font-size: 14px;
    font-weight: 600;
    transition: all 0.3s;
    white-space: nowrap;
}

.btn-time-period:hover[b-gf4pqfn9oe] {
    background: rgba(255, 255, 255, 0.12);
    color: rgba(255, 255, 255, 0.9);
    border-color: rgba(255, 255, 255, 0.25);
    transform: translateY(-2px);
}

.btn-time-period.active[b-gf4pqfn9oe] {
    background: linear-gradient(to right, #2563eb, #14b8a6);
    color: #ffffff;
    border-color: transparent;
    box-shadow: 0 4px 12px rgba(37, 99, 235, 0.3);
}

.btn-time-period.active:hover[b-gf4pqfn9oe] {
    background: linear-gradient(to right, #3b82f6, #0d9488);
    transform: translateY(-2px);
}

.chart-container[b-gf4pqfn9oe] {
    width: 100%;
    height: auto; /* ✅ Allow chart to control its own height */
    min-height: 280px; /* ✅ Minimum height for consistency */
    position: relative;
}

/* Temperature Sensors - GREEN (changed from orange/red) */
.sensor-card-temp[b-gf4pqfn9oe] {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.08), rgba(74, 222, 128, 0.08));
    border-color: rgba(34, 197, 94, 0.3);
}

/* ========================================
   SITE GROUP HEADERS (for All Sites view)
   ======================================== */

.site-group[b-gf4pqfn9oe] {
    margin-bottom: 32px; /* Space between site groups */
}

.site-group:last-child[b-gf4pqfn9oe] {
    margin-bottom: 0;
}

.site-group-header[b-gf4pqfn9oe] {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    margin-bottom: 16px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 16px;
    backdrop-filter: blur(12px);
}

.site-group-name[b-gf4pqfn9oe] {
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    flex: 1;
}

.site-group-count[b-gf4pqfn9oe] {
    font-size: 14px;
    font-weight: 500;
    color: rgba(255, 255, 255, 0.6);
}

/* Responsive */
@media (max-width: 640px) {
    .site-group[b-gf4pqfn9oe] {
        margin-bottom: 24px;
    }
    
    .site-group-header[b-gf4pqfn9oe] {
        padding: 10px 14px;
        margin-bottom: 12px;
    }
    
    .site-group-name[b-gf4pqfn9oe] {
        font-size: 16px;
    }
    
    .site-group-count[b-gf4pqfn9oe] {
        font-size: 13px;
    }
}

.sensor-name[b-gf4pqfn9oe] {
    font-size: 16px;
    font-weight: 600;
    color: #ffffff;
}

/* NEW: Discreet site name under sensor name */
.sensor-site-name[b-gf4pqfn9oe] {
    font-size: 12px;
    font-weight: 400;
    color: rgba(255, 255, 255, 0.5);
    margin-top: 2px;
    display: block;
}


/* Responsive */
@media (max-width: 640px) {
    .diagnostic-header-row[b-gf4pqfn9oe] {
        flex-wrap: wrap;
        gap: 12px;
    }
    
    .diagnostic-left[b-gf4pqfn9oe] {
        justify-content: flex-start;
        flex: 1 1 auto;
    }
    
    .btn-diagnostic-compact[b-gf4pqfn9oe] {
        padding: 8px 16px;
        min-width: 80px;
    }
    
    /* ✅ FIXED: Changed from fixed 230px height to auto */
    .chart-container[b-gf4pqfn9oe] {
        height: auto;
        min-height: 230px;
    }
    
    .sensor-detail-card[b-gf4pqfn9oe] {
        padding: 20px;
    }
    
    /* NEW: Responsive back button */
    .btn-back-large[b-gf4pqfn9oe] {
        padding: 10px 20px;
        font-size: 15px;
    }
    
    .btn-back-large svg[b-gf4pqfn9oe] {
        width: 18px;
        height: 18px;
    }
    
    .back-button-card[b-gf4pqfn9oe] {
        padding: 12px;
    }
    
    /* NEW: Responsive detail card */
    .detail-type-friendly[b-gf4pqfn9oe] {
        font-size: 20px;
        margin-bottom: 6px;
    }
    
    .detail-description-site[b-gf4pqfn9oe] {
        font-size: 15px;
    }
    
    .detail-icon-wrapper[b-gf4pqfn9oe] {
        padding: 20px;
    }
    
    .detail-icon svg[b-gf4pqfn9oe],
    .detail-icon img[b-gf4pqfn9oe] {
        width: 44px;
        height: 44px;
    }
    
    /* NEW: Responsive time selection buttons */
    .chart-time-selection[b-gf4pqfn9oe] {
        gap: 8px;
        padding: 6px;
    }
    
    .btn-time-period[b-gf4pqfn9oe] {
        padding: 8px 12px;
        font-size: 13px;
    }
    
    /* Responsive diagnostic icon */
    .diagnostic-icon-compact[b-gf4pqfn9oe] {
        width: 52px;
        height: 52px;
        padding: 14px;
    }
    
    .diagnostic-icon-compact svg[b-gf4pqfn9oe],
    .diagnostic-icon-compact img[b-gf4pqfn9oe] {
        width: 48px; /* ✅ Scaled for mobile - still bigger than before */
        height: 48px; /* ✅ Scaled for mobile - still bigger than before */
    }
}

/* Very small screens */
@media (max-width: 400px) {
    .diagnostic-header-row[b-gf4pqfn9oe] {
        flex-direction: column;
        align-items: stretch;
    }
    
    .btn-diagnostic-compact[b-gf4pqfn9oe] {
        width: 100%;
    }
    
    /* NEW: Even smaller back button for very small screens */
    .btn-back-large[b-gf4pqfn9oe] {
        padding: 10px 16px;
        font-size: 14px;
    }
    
    /* NEW: Stack detail info on very small screens */
    .detail-header-enhanced[b-gf4pqfn9oe] {
        flex-direction: column;
        align-items: flex-start;
        gap: 12px;
    }
    
    .detail-icon-wrapper[b-gf4pqfn9oe] {
        align-self: flex-end;
        padding: 16px;
    }
    
    .detail-icon svg[b-gf4pqfn9oe],
    .detail-icon img[b-gf4pqfn9oe] {
        width: 36px;
        height: 36px;
    }
    
    /* NEW: Stack time period buttons on very small screens */
    .chart-time-selection[b-gf4pqfn9oe] {
        flex-direction: column;
        gap: 6px;
    }
    
    .btn-time-period[b-gf4pqfn9oe] {
        padding: 10px;
        font-size: 12px;
    }
}

.btn-diagnostic-compact:disabled[b-gf4pqfn9oe] {
    opacity: 0.6;
    cursor: not-allowed;
    background: rgba(100, 116, 139, 0.5) !important;
}

.btn-diagnostic-compact:disabled:hover[b-gf4pqfn9oe] {
    transform: none;
}

/* ✅ CRITICAL FIX: Organization dropdown must appear above Site filter */
.site-filter-card:first-of-type[b-gf4pqfn9oe] {
    z-index: 20; /* Higher z-index for organization filter */
}

.site-filter-card:first-of-type .site-dropdown-menu[b-gf4pqfn9oe] {
    z-index: 100; /* Ensure dropdown appears above everything */
}

/* Site filter gets lower z-index */
.site-filter-card:nth-of-type(2)[b-gf4pqfn9oe] {
    z-index: 10; /* Lower than organization filter */
}

.site-filter-card:nth-of-type(2) .site-dropdown-menu[b-gf4pqfn9oe] {
    z-index: 50; /* Lower than organization dropdown */
}

/* ✅ ALTERNATIVE: If the above doesn't work due to nth-of-type conflicts */
/* Add this class to organization filter in Razor markup */
.organization-filter[b-gf4pqfn9oe] {
    z-index: 20 !important;
}

.organization-filter .site-dropdown-menu[b-gf4pqfn9oe] {
    z-index: 100 !important;
}

/* /Components/SafeChart.razor.rz.scp.css */
/* SafeChart wrapper - ensures full height for chart rendering */
.safe-chart-wrapper[b-4vfagxpecc] {
    width: 100%;
    height: 100%;
    min-height: 300px;
    display: flex;
    flex-direction: column;
}

/* Chart.js canvas container */
.safe-chart-wrapper > *[b-4vfagxpecc] {
    flex: 1;
    min-height: 0; /* Allow flexbox to work properly */
}

/* Error boundary styling */
.chart-error[b-4vfagxpecc] {
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    height: 100%;
    min-height: 300px;
    text-align: center;
    padding: 20px;
    color: rgba(255, 255, 255, 0.6);
}

@media (max-width: 640px) {
    .safe-chart-wrapper[b-4vfagxpecc] {
        min-height: 250px;
    }
    
    .chart-error[b-4vfagxpecc] {
        min-height: 250px;
    }
}