/* Analytics Display Fix - Override all containment and visibility issues */

/* Force visibility for all hot/cold analytics sections */
.hot-cold-container,
.hot-numbers,
.cold-numbers, 
.absent-numbers {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    height: auto !important;
    max-height: none !important;
    contain: none !important;
    isolation: auto !important;
    transform: none !important;
}

/* Fix the Data Analytics card height to match Latest Lottery Results */
.data-analytics-preview {
    height: auto !important;
    min-height: auto !important;
    max-height: none !important;
    overflow: visible !important;
}

.data-analytics-preview .chart-card {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
    overflow: hidden !important;
    padding: 8px !important;
    padding-bottom: 10px !important;
}

/* Ensure bar chart fits properly */
.bar-chart-container {
    height: 240px !important;
    max-height: 240px !important;
    overflow: hidden !important;
}

/* Make Hot & Cold Numbers section with generous spacing */
.hot-cold-container {
    height: 300px !important;
    min-height: 300px !important;
    max-height: 300px !important;
    overflow: visible !important;
    display: flex !important;
    flex-direction: column !important;
    justify-content: space-between !important;
    padding: 8px !important;
}

/* Generous spacing for the three sections */
.hot-numbers, .cold-numbers, .absent-numbers {
    flex: 1 !important;
    margin-bottom: 6px !important;
    min-height: 85px !important;
    max-height: 95px !important;
    overflow: visible !important;
    padding: 6px 0 !important;
}

/* Ultra compact sections to fit all content */
.hot-numbers h6, .cold-numbers h6, .absent-numbers h6 {
    font-size: 0.65rem !important;
    margin-bottom: 1px !important;
    line-height: 1 !important;
    padding: 0 !important;
}

.hot-numbers h6 small, .cold-numbers h6 small, .absent-numbers h6 small {
    font-size: 0.55rem !important;
    display: block !important;
    line-height: 1 !important;
    margin-top: 0 !important;
}

/* Optimized lottery ball containers */
#hotNumbersContainer, #coldNumbersContainer, #absentNumbersContainer {
    max-height: 42px !important;
    overflow: hidden !important;
    margin-top: 3px !important;
}

/* Ensure absent numbers container specifically shows */
#absentNumbersContainer {
    display: flex !important;
    flex-wrap: wrap !important;
    visibility: visible !important;
    opacity: 1 !important;
    height: auto !important;
    overflow: visible !important;
}

/* Ensure absent number balls and text are visible */
.absent-number-item .lottery-ball .number {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    color: white !important;
    font-weight: bold !important;
}

/* Force visibility for all hot/cold number items */
.hot-number-item,
.cold-number-item,
.absent-number-item {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10 !important;
    contain: none !important;
    isolation: auto !important;
    transform: none !important;
}

/* Force visibility for lottery balls inside analytics */
.hot-number-item .lottery-ball,
.cold-number-item .lottery-ball,
.absent-number-item .lottery-ball {
    display: inline-flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    position: relative !important;
    z-index: 10 !important;
    contain: none !important;
    isolation: auto !important;
    transform: none !important;
}

/* Ensure containers are visible */
#hotNumbersContainer,
#coldNumbersContainer,
#absentNumbersContainer {
    display: flex !important;
    flex-wrap: wrap !important;
    visibility: visible !important;
    opacity: 1 !important;
    overflow: visible !important;
    contain: none !important;
    isolation: auto !important;
    transform: none !important;
    height: auto !important;
    max-height: none !important;
}

/* Override any mobile hiding rules */
@media (max-width: 576px) {
    .hot-cold-container {
        height: auto !important;
        min-height: auto !important;
        max-height: none !important;
        flex-direction: column !important;
    }
    
    .hot-numbers, .cold-numbers, .absent-numbers {
        flex: none !important;
        min-height: auto !important;
        margin-bottom: 15px !important;
    }
    
    .hot-cold-container,
    .hot-numbers,
    .cold-numbers, 
    .absent-numbers,
    .hot-number-item,
    .cold-number-item,
    .absent-number-item,
    #hotNumbersContainer,
    #coldNumbersContainer,
    #absentNumbersContainer {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        overflow: visible !important;
        contain: none !important;
        isolation: auto !important;
        transform: none !important;
    }
    
    .hot-number-item,
    .cold-number-item,
    .absent-number-item {
        display: inline-flex !important;
    }
    
    #hotNumbersContainer,
    #coldNumbersContainer,
    #absentNumbersContainer {
        display: flex !important;
        flex-wrap: wrap !important;
    }
}