/* ==========================================================================
   Shared Status Colors - Normalized across all grids
   ========================================================================== */

:root {
    /* Status Colors - Primary Palette */
    --status-excellent: #37b24d;      /* Green - Excellent/Full/Online */
    --status-good: #74b816;           /* Light Green - Good */
    --status-fair: #fab005;           /* Yellow/Amber - Fair/Warning */
    --status-weak: #fd7e14;           /* Orange - Weak/Low */
    --status-poor: #f03e3e;           /* Red - Poor/Critical/Offline */
    --status-none: #868e96;           /* Gray - N/A/Unknown */
    
    /* Temperature Specific */
    --temp-freezing: #339af0;         /* Blue - Freezing */
    --temp-cold: #22b8cf;             /* Cyan - Cold */
    --temp-normal: #37b24d;           /* Green - Normal */
    --temp-warm: #fd7e14;             /* Orange - Warm */
    --temp-hot: #f03e3e;              /* Red - Hot */
    
    /* Alert Severity */
    --alert-critical: #f03e3e;        /* Red */
    --alert-warning: #fab005;         /* Amber */
    --alert-info: #339af0;            /* Blue */
    
    /* Background variants (20% opacity) */
    --status-excellent-bg: rgba(55, 178, 77, 0.15);
    --status-good-bg: rgba(116, 184, 22, 0.15);
    --status-fair-bg: rgba(250, 176, 5, 0.15);
    --status-weak-bg: rgba(253, 126, 20, 0.15);
    --status-poor-bg: rgba(240, 62, 62, 0.15);
    --status-none-bg: rgba(134, 142, 150, 0.15);
}

/* ==========================================================================
   Signal Strength Classes
   ========================================================================== */
.signal-indicator {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.signal-bars {
    display: flex;
    align-items: flex-end;
    gap: 2px;
    height: 14px;
}

.signal-bar {
    width: 3px;
    border-radius: 1px;
}

.signal-bar.bar-1 { height: 3px; }
.signal-bar.bar-2 { height: 6px; }
.signal-bar.bar-3 { height: 10px; }
.signal-bar.bar-4 { height: 14px; }

.signal-bar.inactive { background-color: var(--kendo-color-border, #424242); }
.signal-bar.status-excellent { background-color: var(--status-excellent); }
.signal-bar.status-good { background-color: var(--status-good); }
.signal-bar.status-fair { background-color: var(--status-fair); }
.signal-bar.status-weak { background-color: var(--status-weak); }
.signal-bar.status-poor { background-color: var(--status-poor); }

.signal-value {
    font-size: 0.75rem;
    font-weight: 500;
    min-width: 28px;
    text-align: right;
}

/* ==========================================================================
   Battery Level Classes
   ========================================================================== */
.battery-indicator {
    display: inline-flex;
    align-items: center;
    gap: 0.4rem;
}

.battery-icon {
    position: relative;
    width: 22px;
    height: 10px;
    border: 1.5px solid var(--status-none);
    border-radius: 2px;
    background: transparent;
    overflow: hidden;
}

.battery-icon::after {
    content: '';
    position: absolute;
    right: -4px;
    top: 2px;
    width: 2px;
    height: 4px;
    background: var(--status-none);
    border-radius: 0 1px 1px 0;
}

.battery-fill {
    position: absolute;
    left: 0;
    top: 0;
    height: 100%;
    border-radius: 1px;
}

.battery-fill.status-excellent { background-color: var(--status-excellent); }
.battery-fill.status-good { background-color: var(--status-good); }
.battery-fill.status-fair { background-color: var(--status-fair); }
.battery-fill.status-weak { background-color: var(--status-weak); }
.battery-fill.status-poor { background-color: var(--status-poor); }

.battery-label {
    font-size: 0.65rem;
    font-weight: 500;
}

/* ==========================================================================
   Status Text Colors (for labels, values, etc.)
   ========================================================================== */
.text-excellent { color: var(--status-excellent); }
.text-good { color: var(--status-good); }
.text-fair { color: var(--status-fair); }
.text-weak { color: var(--status-weak); }
.text-poor { color: var(--status-poor); }
.text-none { color: var(--status-none); }

/* Temperature text colors */
.text-temp-freezing { color: var(--temp-freezing); }
.text-temp-cold { color: var(--temp-cold); }
.text-temp-normal { color: var(--temp-normal); }
.text-temp-warm { color: var(--temp-warm); }
.text-temp-hot { color: var(--temp-hot); }

/* Alert severity colors */
.text-alert-critical { color: var(--alert-critical); }
.text-alert-warning { color: var(--alert-warning); }
.text-alert-info { color: var(--alert-info); }

/* ==========================================================================
   Status Badges
   ========================================================================== */
.status-badge {
    display: inline-flex;
    align-items: center;
    gap: 0.35rem;
    padding: 0.2rem 0.5rem;
    border-radius: 12px;
    font-size: 0.75rem;
    font-weight: 500;
}

.status-badge.online {
    background: var(--status-excellent-bg);
    color: var(--status-excellent);
}

.status-badge.offline {
    background: var(--status-poor-bg);
    color: var(--status-poor);
}

/* ==========================================================================
   Alert Item Styling
   ========================================================================== */
.alert-item {
    display: flex;
    gap: 0.5rem;
    padding: 0.5rem;
    border-radius: 4px;
    border-left: 3px solid;
    background: var(--kendo-color-surface-alt, #222);
}

.alert-item.alert-critical {
    border-left-color: var(--alert-critical);
}

.alert-item.alert-critical .alert-icon {
    color: var(--alert-critical);
}

.alert-item.alert-warning {
    border-left-color: var(--alert-warning);
}

.alert-item.alert-warning .alert-icon {
    color: var(--alert-warning);
}

.alert-item.alert-info {
    border-left-color: var(--alert-info);
}

.alert-item.alert-info .alert-icon {
    color: var(--alert-info);
}

/* ==========================================================================
   Alert Count Badges
   ========================================================================== */
.alert-badge {
    padding: 0.1rem 0.4rem;
    border-radius: 10px;
    font-size: 0.65rem;
    font-weight: 600;
    min-width: 16px;
    text-align: center;
}

.alert-badge.critical {
    background: var(--status-poor-bg);
    color: var(--alert-critical);
}

.alert-badge.warning {
    background: var(--status-fair-bg);
    color: var(--alert-warning);
}

/* ==========================================================================
   Device Cell (combined online + VID)
   ========================================================================== */
.device-cell {
    display: flex;
    align-items: center;
    gap: 0.4rem;
}

.device-vid {
    font-weight: 500;
}

/* ==========================================================================
   Online/Offline Status Dot
   ========================================================================== */
.status-dot {
    display: inline-block;
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}

.status-dot.online {
    background-color: var(--status-excellent);
    box-shadow: 0 0 4px var(--status-excellent);
}

.status-dot.offline {
    background-color: var(--status-poor);
}

/* Larger variant */
.status-dot.lg {
    width: 10px;
    height: 10px;
}

/* Smaller variant */
.status-dot.sm {
    width: 6px;
    height: 6px;
}