/**
 * ENNU Life Progress Slice Official Styling
 * Production-ready progress visualization for pillar cards
 * 
 * @package ENNU_Life_Assessments
 * @version 99.8.5
 */

/* ===== SEGMENTED PROGRESS BAR CONTAINER ===== */
.segmented-progress-bar {
    display: flex !important;
    flex-direction: row !important;
    align-items: stretch !important;
    height: 20px !important;
    width: 100% !important;
    background: #f8f9fa !important;
    border: 1px solid #e9ecef !important;
    border-radius: 4px !important;
    overflow: hidden !important;
    position: relative !important;
}

/* Override the problematic transparent background */
.symptom-segmented-bar .segmented-progress-bar {
    background: #f8f9fa !important;
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* ===== INDIVIDUAL PROGRESS SLICES ===== */
.progress-slice {
    flex: 0 0 auto !important;
    height: 100% !important;
    min-width: 4px !important;
    border-right: 1px solid rgba(255, 255, 255, 0.3) !important;
    position: relative !important;
    cursor: pointer !important;
    transition: all 0.2s ease !important;
}

.progress-slice:last-child {
    border-right: none !important;
}

.progress-slice:hover {
    transform: scaleY(1.1) !important;
    z-index: 10 !important;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
}

/* ===== SYMPTOM SLICE COLORS ===== */
.symptom-slice {
    background-color: #6b7280 !important; /* Default gray */
}

.symptom-slice[data-severity="1"] {
    background-color: #8a8a8a !important; /* Light Gray - Mild */
}

.symptom-slice[data-severity="2"] {
    background-color: #6a6a6a !important; /* Medium Gray - Moderate */
}

.symptom-slice[data-severity="3"] {
    background-color: #4a4a4a !important; /* Dark Gray - Severe */
}

.symptom-slice[data-severity="4"] {
    background-color: #2a2a2a !important; /* Very Dark Gray - Critical */
}

/* ===== BIOMARKER SLICE COLORS ===== */
.progress-slice:not(.symptom-slice) {
    background-color: #5a5a5a !important; /* Professional gray for biomarkers */
}

/* Biomarker status-based colors */
.progress-slice[style*="rgb(220, 38, 38)"],
.progress-slice[style*="#dc2626"] {
    background-color: #dc2626 !important; /* Critical */
}

.progress-slice[style*="rgb(16, 185, 129)"],
.progress-slice[style*="#10b981"] {
    background-color: #10b981 !important; /* Optimal */
}

.progress-slice[style*="rgb(251, 191, 36)"],
.progress-slice[style*="#fbbf24"] {
    background-color: #fbbf24 !important; /* Needs Attention */
}

/* ===== EMPTY CATEGORY SLICES ===== */
.empty-category-slice {
    background: repeating-linear-gradient(
        45deg,
        #e5e7eb,
        #e5e7eb 4px,
        #f3f4f6 4px,
        #f3f4f6 8px
    ) !important;
    border: 1px dashed #9ca3af !important;
    opacity: 0.7 !important;
}

/* ===== SLICE FILLS (NESTED ELEMENTS) ===== */
.slice-fill {
    position: absolute !important;
    bottom: 0 !important;
    left: 0 !important;
    right: 0 !important;
    background: linear-gradient(to top, currentColor 0%, rgba(255,255,255,0.2) 100%) !important;
    transition: height 0.3s ease !important;
}

/* ===== PROGRESS BAR RESPONSIVENESS ===== */
@media (max-width: 768px) {
    .segmented-progress-bar {
        height: 16px !important;
    }
    
    .progress-slice {
        min-width: 3px !important;
    }
}

@media (min-width: 1200px) {
    .segmented-progress-bar {
        height: 24px !important;
    }
    
    .progress-slice {
        min-width: 6px !important;
    }
}

/* ===== ACCESSIBILITY ===== */
.progress-slice:focus {
    outline: 2px solid #3b82f6 !important;
    outline-offset: 2px !important;
}

/* ===== PIXFORT THEME OVERRIDE ===== */
/* Override PixFort theme hiding with pix-overlay-item class - HIGHEST SPECIFICITY */
html body:not(.render) .pix-overlay-item.progress-slice,
html body:not(.render) .pix-overlay-item.symptom-slice,
html body:not(.render) .pix-overlay-item.biomarker-slice,
html body:not(.render) .progress-slice,
html body:not(.render) .symptom-slice,
html body:not(.render) .biomarker-slice,
html body .pix-overlay-item.progress-slice,
html body .pix-overlay-item.symptom-slice,
html body .pix-overlay-item.biomarker-slice {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* Ensure container visibility against PixFort theme */
html body .progress-slice-container,
html body .symptom-segmented-bar,
html body .biomarker-container,
html body:not(.render) .progress-slice-container,
html body:not(.render) .symptom-segmented-bar,
html body:not(.render) .biomarker-container {
    opacity: 1 !important;
    visibility: visible !important;
    display: block !important;
}

/* ===== CHART DOT COMPATIBILITY ===== */
.progress-slice.chart-dot {
    /* Ensure chart dot functionality still works */
    cursor: pointer !important;
}

.progress-slice.chart-dot:hover {
    /* Enhanced hover for interactive elements */
    transform: scaleY(1.15) scaleX(1.05) !important;
}