/**
 * SmartCemic QESA Pro Sensors Section - Unified Styles
 * Version: 2.0.0
 * Apply across all pages for consistent design
 */

/* ============================================
   SENSOR SECTION CONTAINER
   ============================================ */
#smartcemic-sensor-section,
.smartcemic-sensor-section,
.qesa-sensors-section,
.sensor-modes-section,
#sensor-modes-section {
    background: linear-gradient(145deg, rgba(17, 24, 39, 0.98), rgba(31, 41, 55, 0.95)) !important;
    border: 1px solid rgba(16, 185, 129, 0.25) !important;
    border-radius: 20px !important;
    padding: 28px !important;
    margin: 24px 0 !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), inset 0 1px 0 rgba(255, 255, 255, 0.05) !important;
}

/* Section Header */
#smartcemic-sensor-section h3,
.smartcemic-sensor-section h3,
.qesa-sensors-section h3,
.sensor-modes-section h3,
#sensor-modes-section h3 {
    color: #10b981 !important;
    font-size: 1.25rem !important;
    font-weight: 700 !important;
    margin: 0 0 8px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 10px !important;
}

#smartcemic-sensor-section h3 i,
.smartcemic-sensor-section h3 i,
.qesa-sensors-section h3 i,
.sensor-modes-section h3 i,
#sensor-modes-section h3 i {
    color: #10b981 !important;
}

/* Section Subtitle */
#smartcemic-sensor-section .section-subtitle,
.smartcemic-sensor-section .section-subtitle,
#smartcemic-sensor-section > p,
.smartcemic-sensor-section > p,
.qesa-sensors-section .section-subtitle,
.sensor-modes-section .section-subtitle,
#sensor-modes-section .section-subtitle,
.qesa-sensors-section p,
.sensor-modes-section > p {
    color: rgba(255, 255, 255, 0.7) !important;
    font-size: 0.95rem !important;
    margin: 0 0 24px 0 !important;
    line-height: 1.5 !important;
    max-width: 100% !important;
}

/* ============================================
   SENSOR MODES GRID - RESPONSIVE
   ============================================ */
.sensor-modes-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
}

/* Tablet: 2 columns */
@media (max-width: 1024px) {
    .sensor-modes-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }
}

/* Mobile: 2 columns, smaller */
@media (max-width: 640px) {
    .sensor-modes-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }
    
    .qesa-sensors-section,
    .sensor-modes-section,
    #sensor-modes-section {
        padding: 16px !important;
        margin: 12px 0 !important;
    }
}

/* Very small mobile: still 2 columns but more compact */
@media (max-width: 380px) {
    .sensor-modes-grid {
        gap: 8px !important;
    }
}

/* ============================================
   SENSOR MODE BUTTONS - EXACT MATCH TO DEVICES.HTML
   ============================================ */
#smartcemic-sensor-section .sensor-modes-grid,
.smartcemic-sensor-section .sensor-modes-grid,
.sensor-modes-grid {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 16px !important;
    margin-bottom: 20px !important;
}

#smartcemic-sensor-section .sensor-mode-btn,
.smartcemic-sensor-section .sensor-mode-btn,
button.sensor-mode-btn,
.sensor-mode-btn {
    display: flex !important;
    flex-direction: column !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 12px !important;
    padding: 24px 18px !important;
    min-height: 160px !important;
    border-radius: 16px !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    background: linear-gradient(180deg, rgba(31, 41, 55, 0.95), rgba(17, 24, 39, 0.98)) !important;
    color: #fff !important;
    cursor: pointer !important;
    text-align: center !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.3) !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

#smartcemic-sensor-section .sensor-mode-btn::before,
.sensor-mode-btn::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: linear-gradient(90deg, transparent, var(--mode-color, #00d4ff), transparent) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

#smartcemic-sensor-section .sensor-mode-btn:hover,
.sensor-mode-btn:hover {
    border-color: var(--mode-color, #00d4ff) !important;
    background: linear-gradient(180deg, rgba(55, 65, 81, 0.95), rgba(31, 41, 55, 0.98)) !important;
    transform: translateY(-4px) !important;
    box-shadow: 0 12px 28px rgba(0, 0, 0, 0.4), 0 0 20px rgba(var(--mode-color-rgb, 0, 212, 255), 0.15) !important;
}

#smartcemic-sensor-section .sensor-mode-btn:hover::before,
.sensor-mode-btn:hover::before {
    opacity: 1 !important;
}

#smartcemic-sensor-section .sensor-mode-btn i,
.sensor-mode-btn i {
    font-size: 2.5rem !important;
    color: var(--mode-color, #00d4ff) !important;
    filter: drop-shadow(0 0 12px rgba(var(--mode-color-rgb, 0, 212, 255), 0.6)) !important;
    transition: transform 0.3s ease !important;
    margin-bottom: 4px !important;
}

#smartcemic-sensor-section .sensor-mode-btn:hover i,
.sensor-mode-btn:hover i {
    transform: scale(1.1) !important;
}

#smartcemic-sensor-section .sensor-mode-btn .mode-name,
.sensor-mode-btn .mode-name {
    font-weight: 700 !important;
    font-size: 1rem !important;
    color: #fff !important;
    letter-spacing: 0.02em !important;
    line-height: 1.3 !important;
}

#smartcemic-sensor-section .sensor-mode-btn .mode-desc,
.sensor-mode-btn .mode-desc {
    font-size: 0.85rem !important;
    color: rgba(255, 255, 255, 0.65) !important;
    line-height: 1.4 !important;
    max-width: 200px !important;
}

/* Tablet - 1024px */
@media (max-width: 1024px) {
    #smartcemic-sensor-section .sensor-modes-grid,
    .sensor-modes-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 14px !important;
    }

    #smartcemic-sensor-section .sensor-mode-btn,
    .sensor-mode-btn {
        min-height: 150px !important;
        padding: 22px 16px !important;
    }

    .sensor-mode-btn i {
        font-size: 2.2rem !important;
    }

    .sensor-mode-btn .mode-name {
        font-size: 0.95rem !important;
    }
}

/* Mobile - 768px */
@media (max-width: 768px) {
    #smartcemic-sensor-section .sensor-modes-grid,
    .sensor-modes-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 12px !important;
    }

    #smartcemic-sensor-section .sensor-mode-btn,
    .sensor-mode-btn {
        padding: 18px 14px !important;
        min-height: 140px !important;
    }

    .sensor-mode-btn i {
        font-size: 2rem !important;
    }

    .sensor-mode-btn .mode-name {
        font-size: 0.9rem !important;
    }

    .sensor-mode-btn .mode-desc {
        font-size: 0.78rem !important;
    }
}

/* Small Mobile - 640px */
@media (max-width: 640px) {
    .sensor-modes-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }

    .sensor-mode-btn {
        padding: 14px 10px !important;
        min-height: 125px !important;
    }

    .sensor-mode-btn i {
        font-size: 1.75rem !important;
        margin-bottom: 2px !important;
    }

    .sensor-mode-btn .mode-name {
        font-size: 0.82rem !important;
    }

    .sensor-mode-btn .mode-desc {
        font-size: 0.72rem !important;
        line-height: 1.3 !important;
    }
}

/* Very Small Mobile - 380px - Vertical Layout */
@media (max-width: 380px) {
    .sensor-modes-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .sensor-mode-btn {
        flex-direction: row !important;
        min-height: auto !important;
        padding: 16px !important;
        text-align: left !important;
        justify-content: flex-start !important;
        gap: 16px !important;
    }

    .sensor-mode-btn i {
        font-size: 1.8rem !important;
        min-width: 45px !important;
        margin-bottom: 0 !important;
    }

    .sensor-mode-btn .mode-info {
        display: flex !important;
        flex-direction: column !important;
        gap: 4px !important;
    }

    .sensor-mode-btn .mode-name {
        font-size: 0.9rem !important;
    }

    .sensor-mode-btn .mode-desc {
        max-width: none !important;
        font-size: 0.75rem !important;
    }
}

/* ============================================
   SENSOR COLOR THEMES
   ============================================ */
/* LED-NIR - Green */
.sensor-mode-btn[data-mode="led-nir"],
.sensor-mode-btn.nir-sensor {
    --mode-color: #10b981;
    --mode-color-rgb: 16, 185, 129;
}
.sensor-mode-btn[data-mode="led-nir"] i,
.sensor-mode-btn.nir-sensor i {
    color: #10b981 !important;
}

/* MID-IR/QCL - Purple/Blue */
.sensor-mode-btn[data-mode="mid-ir"],
.sensor-mode-btn.mir-sensor {
    --mode-color: #8b5cf6;
    --mode-color-rgb: 139, 92, 246;
}
.sensor-mode-btn[data-mode="mid-ir"] i,
.sensor-mode-btn.mir-sensor i {
    color: #8b5cf6 !important;
}

/* PPG - Red/Pink */
.sensor-mode-btn[data-mode="ppg"],
.sensor-mode-btn.ppg-sensor {
    --mode-color: #ef4444;
    --mode-color-rgb: 239, 68, 68;
}
.sensor-mode-btn[data-mode="ppg"] i,
.sensor-mode-btn.ppg-sensor i {
    color: #ef4444 !important;
}

/* Fusion - Amber/Orange */
.sensor-mode-btn[data-mode="fusion"],
.sensor-mode-btn.fusion-sensor {
    --mode-color: #f59e0b;
    --mode-color-rgb: 245, 158, 11;
}
.sensor-mode-btn[data-mode="fusion"] i,
.sensor-mode-btn.fusion-sensor i {
    color: #f59e0b !important;
}

/* ============================================
   ACTIVE & MEASURING STATES
   ============================================ */
.sensor-mode-btn.active {
    border-color: var(--mode-color, #10b981) !important;
    background: linear-gradient(145deg, 
        rgba(var(--mode-color-rgb, 16, 185, 129), 0.15), 
        rgba(var(--mode-color-rgb, 16, 185, 129), 0.05)) !important;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        0 0 20px rgba(var(--mode-color-rgb, 16, 185, 129), 0.2),
        inset 0 0 20px rgba(var(--mode-color-rgb, 16, 185, 129), 0.05) !important;
}

.sensor-mode-btn.active::before {
    opacity: 1 !important;
}

.sensor-mode-btn.measuring {
    animation: sensorPulse 1.5s ease-in-out infinite !important;
    pointer-events: none !important;
}

.sensor-mode-btn.measuring i {
    animation: sensorIconSpin 2s linear infinite !important;
}

@keyframes sensorPulse {
    0%, 100% { 
        box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2), 0 0 20px rgba(var(--mode-color-rgb, 16, 185, 129), 0.2);
    }
    50% { 
        box-shadow: 0 4px 24px rgba(0, 0, 0, 0.3), 0 0 40px rgba(var(--mode-color-rgb, 16, 185, 129), 0.4);
    }
}

@keyframes sensorIconSpin {
    0% { transform: scale(1.1); }
    25% { transform: scale(1.2); }
    50% { transform: scale(1.1); }
    75% { transform: scale(1.2); }
    100% { transform: scale(1.1); }
}

/* ============================================
   MEASUREMENT RESULTS PANEL
   ============================================ */
.sensor-result-panel {
    display: none;
    background: linear-gradient(145deg, rgba(16, 185, 129, 0.1), rgba(16, 185, 129, 0.02)) !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
    border-radius: 12px !important;
    padding: 20px !important;
    margin-top: 20px !important;
}

.sensor-result-panel.visible {
    display: block !important;
    animation: resultsFadeIn 0.4s ease-out !important;
}

@keyframes resultsFadeIn {
    from { opacity: 0; transform: translateY(10px); }
    to { opacity: 1; transform: translateY(0); }
}

.sensor-result-panel h4 {
    color: #10b981 !important;
    font-size: 1rem !important;
    font-weight: 600 !important;
    margin: 0 0 16px 0 !important;
    display: flex !important;
    align-items: center !important;
    gap: 8px !important;
}

.sensor-result-panel h4 i {
    color: #10b981 !important;
}

/* Results Grid */
.result-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(140px, 1fr)) !important;
    gap: 12px !important;
    margin-bottom: 16px !important;
}

.result-item {
    background: rgba(15, 23, 42, 0.6) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 10px !important;
    padding: 14px !important;
    text-align: center !important;
}

.result-item .analyte-name {
    font-size: 0.75rem !important;
    color: rgba(255, 255, 255, 0.6) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
    margin-bottom: 6px !important;
}

.result-item .analyte-value {
    font-size: 1.5rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.2 !important;
}

.result-item .analyte-unit {
    font-size: 0.75rem !important;
    font-weight: 400 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    margin-left: 4px !important;
}

.result-item .analyte-status {
    font-size: 0.7rem !important;
    padding: 3px 8px !important;
    border-radius: 4px !important;
    margin-top: 8px !important;
    display: inline-block !important;
    text-transform: uppercase !important;
    font-weight: 600 !important;
    letter-spacing: 0.5px !important;
}

.result-item .analyte-status.normal {
    background: rgba(16, 185, 129, 0.2) !important;
    color: #10b981 !important;
}

.result-item .analyte-status.low {
    background: rgba(59, 130, 246, 0.2) !important;
    color: #3b82f6 !important;
}

.result-item .analyte-status.high {
    background: rgba(245, 158, 11, 0.2) !important;
    color: #f59e0b !important;
}

.result-item .analyte-status.critical {
    background: rgba(239, 68, 68, 0.2) !important;
    color: #ef4444 !important;
}

/* Result Confidence */
.result-confidence {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    padding-top: 12px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.1) !important;
}

/* ============================================
   MOBILE RESPONSIVE ADJUSTMENTS
   ============================================ */
@media (max-width: 640px) {
    .sensor-mode-btn {
        padding: 16px 12px !important;
        min-height: 120px !important;
    }
    
    .sensor-mode-btn i {
        font-size: 1.75rem !important;
        margin-bottom: 10px !important;
    }
    
    .sensor-mode-btn .mode-name {
        font-size: 0.85rem !important;
    }
    
    .sensor-mode-btn .mode-desc {
        font-size: 0.7rem !important;
    }
    
    .result-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    
    .result-item .analyte-value {
        font-size: 1.25rem !important;
    }
}

@media (max-width: 380px) {
    .sensor-mode-btn {
        padding: 14px 10px !important;
        min-height: 110px !important;
    }
    
    .sensor-mode-btn i {
        font-size: 1.5rem !important;
        margin-bottom: 8px !important;
    }
    
    .sensor-mode-btn .mode-name {
        font-size: 0.8rem !important;
    }
    
    .sensor-mode-btn .mode-desc {
        font-size: 0.65rem !important;
        display: none; /* Hide on very small screens */
    }
}

/* ============================================
   LIGHT THEME SUPPORT
   ============================================ */
:root[data-theme="light"] .qesa-sensors-section,
:root[data-theme="light"] .sensor-modes-section,
:root[data-theme="light"] #sensor-modes-section {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.98)) !important;
    border-color: rgba(0, 100, 150, 0.15) !important;
}

:root[data-theme="light"] .sensor-mode-btn {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.95)) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
}

:root[data-theme="light"] .sensor-mode-btn .mode-name {
    color: #0f172a !important;
}

:root[data-theme="light"] .sensor-mode-btn .mode-desc {
    color: rgba(15, 23, 42, 0.6) !important;
}

:root[data-theme="light"] .result-item {
    background: rgba(248, 250, 252, 0.8) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

:root[data-theme="light"] .result-item .analyte-value {
    color: #0f172a !important;
}

/* ============================================
   MEASURE PAGE SENSOR TABS COMPATIBILITY
   (Different class names used in measure.html)
   ============================================ */

/* Sensor Tabs Container */
.sensor-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 12px !important;
    margin: 16px 0 !important;
    justify-content: center !important;
}

@media (max-width: 640px) {
    .sensor-tabs {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
}

/* Sensor Tab Buttons */
.sensor-tab {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    gap: 8px !important;
    padding: 12px 20px !important;
    background: linear-gradient(145deg, rgba(30, 41, 59, 0.8), rgba(15, 23, 42, 0.9)) !important;
    border: 1px solid rgba(255, 255, 255, 0.1) !important;
    border-radius: 10px !important;
    color: rgba(255, 255, 255, 0.8) !important;
    font-size: 0.9rem !important;
    font-weight: 500 !important;
    cursor: pointer !important;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1) !important;
    position: relative !important;
    overflow: hidden !important;
}

.sensor-tab::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 2px !important;
    background: var(--tab-color, #10b981) !important;
    opacity: 0 !important;
    transition: opacity 0.3s ease !important;
}

.sensor-tab:hover {
    transform: translateY(-2px) !important;
    border-color: var(--tab-color, rgba(255, 255, 255, 0.2)) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

.sensor-tab:hover::before {
    opacity: 1 !important;
}

.sensor-tab i {
    font-size: 1.1rem !important;
    transition: transform 0.3s ease !important;
}

.sensor-tab:hover i {
    transform: scale(1.1) !important;
}

/* Sensor Tab Color Themes */
.sensor-tab.nir {
    --tab-color: #10b981;
}
.sensor-tab.nir i {
    color: #10b981 !important;
}

.sensor-tab.mir {
    --tab-color: #f59e0b;
}
.sensor-tab.mir i {
    color: #f59e0b !important;
}

.sensor-tab.qcl {
    --tab-color: #3b82f6;
}
.sensor-tab.qcl i {
    color: #3b82f6 !important;
}

.sensor-tab.fusion {
    --tab-color: #8b5cf6;
}
.sensor-tab.fusion i {
    color: #8b5cf6 !important;
}

/* Active State */
.sensor-tab.active {
    background: linear-gradient(145deg, 
        rgba(var(--tab-rgb, 16, 185, 129), 0.2), 
        rgba(var(--tab-rgb, 16, 185, 129), 0.1)) !important;
    border-color: var(--tab-color, #10b981) !important;
    color: #ffffff !important;
    box-shadow: 
        0 4px 16px rgba(0, 0, 0, 0.2),
        0 0 16px rgba(var(--tab-rgb, 16, 185, 129), 0.15) !important;
}

.sensor-tab.active::before {
    opacity: 1 !important;
}

.sensor-tab.active i {
    color: #ffffff !important;
}

/* Set RGB values for active glow */
.sensor-tab.nir.active {
    --tab-rgb: 16, 185, 129;
}
.sensor-tab.mir.active {
    --tab-rgb: 245, 158, 11;
}
.sensor-tab.qcl.active {
    --tab-rgb: 59, 130, 246;
}
.sensor-tab.fusion.active {
    --tab-rgb: 139, 92, 246;
}

/* Light Theme for Sensor Tabs */
:root[data-theme="light"] .sensor-tab {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.9), rgba(248, 250, 252, 0.95)) !important;
    border-color: rgba(0, 0, 0, 0.1) !important;
    color: #334155 !important;
}

:root[data-theme="light"] .sensor-tab.active {
    color: #ffffff !important;
}

/* Mobile Responsive */
@media (max-width: 480px) {
    .sensor-tab {
        padding: 10px 14px !important;
        font-size: 0.8rem !important;
    }
    
    .sensor-tab i {
        font-size: 1rem !important;
    }
}

/* ============================================
   IMPROVED MEASUREMENT RESULTS DISPLAY
   ============================================ */

/* Results Grid - Better layout */
.sensor-result-panel .result-grid,
#sensor-results-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(130px, 1fr)) !important;
    gap: 14px !important;
    margin-bottom: 16px !important;
}

/* Result Item Card - Cleaner design */
.sensor-result-panel .result-item,
#sensor-results-grid .result-item {
    background: linear-gradient(145deg, rgba(15, 23, 42, 0.8), rgba(30, 41, 59, 0.6)) !important;
    border: 1px solid rgba(255, 255, 255, 0.08) !important;
    border-radius: 12px !important;
    padding: 16px 12px !important;
    text-align: center !important;
    position: relative !important;
    overflow: hidden !important;
    transition: all 0.3s ease !important;
}

.sensor-result-panel .result-item:hover {
    transform: translateY(-2px) !important;
    border-color: rgba(16, 185, 129, 0.3) !important;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2) !important;
}

/* Status indicator bar at top */
.sensor-result-panel .result-item::before {
    content: '' !important;
    position: absolute !important;
    top: 0 !important;
    left: 0 !important;
    right: 0 !important;
    height: 3px !important;
    background: var(--status-color, #10b981) !important;
}

.sensor-result-panel .result-item[data-status="normal"]::before,
.sensor-result-panel .result-item .analyte-status.normal ~ *::before { --status-color: #10b981; }
.sensor-result-panel .result-item[data-status="low"]::before { --status-color: #3b82f6; }
.sensor-result-panel .result-item[data-status="high"]::before { --status-color: #f59e0b; }
.sensor-result-panel .result-item[data-status="critical"]::before { --status-color: #ef4444; }

/* Analyte Name Label */
.result-item .analyte-name {
    font-size: 0.7rem !important;
    font-weight: 600 !important;
    color: rgba(255, 255, 255, 0.5) !important;
    text-transform: uppercase !important;
    letter-spacing: 0.8px !important;
}

/* Value Display */
.result-item .analyte-value {
    font-size: 1.75rem !important;
    font-weight: 700 !important;
    color: #ffffff !important;
    line-height: 1.1 !important;
    margin-bottom: 4px !important;
    font-family: 'Plus Jakarta Sans', -apple-system, BlinkMacSystemFont, sans-serif !important;
}

.result-item .analyte-unit {
    font-size: 0.7rem !important;
    font-weight: 500 !important;
    color: rgba(255, 255, 255, 0.4) !important;
    margin-left: 3px !important;
    vertical-align: baseline !important;
}

/* Status Badge */
.result-item .analyte-status {
    display: inline-block !important;
    font-size: 0.65rem !important;
    font-weight: 700 !important;
    padding: 4px 10px !important;
    border-radius: 20px !important;
    margin-top: 8px !important;
    text-transform: uppercase !important;
    letter-spacing: 0.5px !important;
}

.result-item .analyte-status.normal {
    background: rgba(16, 185, 129, 0.15) !important;
    color: #10b981 !important;
    border: 1px solid rgba(16, 185, 129, 0.3) !important;
}

.result-item .analyte-status.low {
    background: rgba(59, 130, 246, 0.15) !important;
    color: #60a5fa !important;
    border: 1px solid rgba(59, 130, 246, 0.3) !important;
}

.result-item .analyte-status.high {
    background: rgba(245, 158, 11, 0.15) !important;
    color: #fbbf24 !important;
    border: 1px solid rgba(245, 158, 11, 0.3) !important;
}

.result-item .analyte-status.critical {
    background: rgba(239, 68, 68, 0.15) !important;
    color: #f87171 !important;
    border: 1px solid rgba(239, 68, 68, 0.3) !important;
    animation: criticalPulse 2s ease-in-out infinite !important;
}

@keyframes criticalPulse {
    0%, 100% { box-shadow: 0 0 0 0 rgba(239, 68, 68, 0.4); }
    50% { box-shadow: 0 0 0 6px rgba(239, 68, 68, 0); }
}

/* Result Footer */
.sensor-result-panel .result-confidence,
.result-confidence {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    font-size: 0.8rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    padding-top: 14px !important;
    margin-top: 8px !important;
    border-top: 1px solid rgba(255, 255, 255, 0.08) !important;
}

.result-confidence span {
    display: flex !important;
    align-items: center !important;
    gap: 6px !important;
}

/* Fusion weights display */
.fusion-weights {
    display: flex !important;
    justify-content: center !important;
    gap: 16px !important;
    margin-top: 12px !important;
    padding: 10px !important;
    background: rgba(15, 23, 42, 0.4) !important;
    border-radius: 8px !important;
}

.fusion-weight-item {
    text-align: center !important;
}

.fusion-weight-item .weight-label {
    font-size: 0.7rem !important;
    color: rgba(255, 255, 255, 0.5) !important;
    text-transform: uppercase !important;
}

.fusion-weight-item .weight-value {
    font-size: 0.9rem !important;
    font-weight: 600 !important;
    color: #ffffff !important;
}

/* Mobile adjustments */
@media (max-width: 640px) {
    .sensor-result-panel .result-grid,
    #sensor-results-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 10px !important;
    }
    
    .result-item .analyte-value {
        font-size: 1.4rem !important;
    }
    
    .result-item .analyte-name {
        font-size: 0.65rem !important;
    }
    
    .result-item {
        padding: 12px 10px !important;
    }
}

@media (max-width: 380px) {
    .result-item .analyte-value {
        font-size: 1.2rem !important;
    }
}

/* Light theme */
:root[data-theme="light"] .result-item {
    background: linear-gradient(145deg, rgba(255, 255, 255, 0.95), rgba(248, 250, 252, 0.9)) !important;
    border-color: rgba(0, 0, 0, 0.08) !important;
}

:root[data-theme="light"] .result-item .analyte-value {
    color: #0f172a !important;
}

:root[data-theme="light"] .result-item .analyte-name {
    color: rgba(15, 23, 42, 0.6) !important;
}


/* Enhanced active state - high visibility */
.smartcemic-sensor-section .sensor-mode-btn.active,
#smartcemic-sensor-section .sensor-mode-btn.active,
button.sensor-mode-btn.active {
    border: 3px solid var(--mode-color, #10b981) !important;
    background: linear-gradient(145deg,
        rgba(var(--mode-color-rgb, 16, 185, 129), 0.4),
        rgba(var(--mode-color-rgb, 16, 185, 129), 0.2)) !important;
    box-shadow:
        0 6px 24px rgba(0, 0, 0, 0.35),
        0 0 40px rgba(var(--mode-color-rgb, 16, 185, 129), 0.5) !important;
    transform: translateY(-3px) scale(1.02) !important;
}


/* ============================================
   WORKING ACTIVE STATE - Using direct styling
   ============================================ */
.sensor-mode-btn.active {
    border: 3px solid var(--mode-color, #10b981) !important;
    background: 
        linear-gradient(135deg, 
            color-mix(in srgb, var(--mode-color, #10b981) 30%, transparent),
            color-mix(in srgb, var(--mode-color, #10b981) 10%, transparent)
        ),
        rgba(31, 41, 55, 0.95) !important;
    box-shadow:
        0 8px 32px rgba(0, 0, 0, 0.4),
        0 0 0 1px var(--mode-color, #10b981),
        0 0 40px color-mix(in srgb, var(--mode-color, #10b981) 40%, transparent) !important;
    transform: translateY(-4px) scale(1.03) !important;
    z-index: 10 !important;
}

/* Fallback for browsers without color-mix */
@supports not (background: color-mix(in srgb, red 50%, blue)) {
    .sensor-mode-btn.active {
        border: 3px solid var(--mode-color, #10b981) !important;
        background: linear-gradient(135deg, rgba(16, 185, 129, 0.3), rgba(16, 185, 129, 0.1)), rgba(31, 41, 55, 0.95) !important;
        box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px var(--mode-color, #10b981), 0 0 40px rgba(16, 185, 129, 0.4) !important;
        transform: translateY(-4px) scale(1.03) !important;
    }
}

/* Per-mode active colors for maximum visibility */
.sensor-mode-btn[data-mode="led-nir"].active {
    border-color: #22c55e !important;
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.35), rgba(34, 197, 94, 0.15)), rgba(31, 41, 55, 0.95) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 2px #22c55e, 0 0 50px rgba(34, 197, 94, 0.5) !important;
}

.sensor-mode-btn[data-mode="mid-ir"].active {
    border-color: #8b5cf6 !important;
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.35), rgba(139, 92, 246, 0.15)), rgba(31, 41, 55, 0.95) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 2px #8b5cf6, 0 0 50px rgba(139, 92, 246, 0.5) !important;
}

.sensor-mode-btn[data-mode="ppg"].active {
    border-color: #ef4444 !important;
    background: linear-gradient(135deg, rgba(239, 68, 68, 0.35), rgba(239, 68, 68, 0.15)), rgba(31, 41, 55, 0.95) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 2px #ef4444, 0 0 50px rgba(239, 68, 68, 0.5) !important;
}

.sensor-mode-btn[data-mode="fusion"].active {
    border-color: #f59e0b !important;
    background: linear-gradient(135deg, rgba(245, 158, 11, 0.35), rgba(245, 158, 11, 0.15)), rgba(31, 41, 55, 0.95) !important;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 2px #f59e0b, 0 0 50px rgba(245, 158, 11, 0.5) !important;
}