/* ✅ Main Container */
.missing-data-analysis-container {
    padding: 20px;
    background-color: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    max-width: 90%;
    margin: auto;
}

/* ✅ Header Styling */
.missing-data-header {
    background: #f8f9fa;
    padding: 15px;
    border-radius: 10px;
    font-size: 1.5rem;
    font-weight: bold;
    display: flex;
    align-items: center;
    color: #333;
    margin-bottom: 15px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* ✅ Dataset Selection Container */
.dataset-selection-container {
    display: flex;
    align-items: center;
    justify-content: space-between;
    background: #f8f9fa;
    padding: 10px;
    border-radius: 8px;
    color: #333;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
    margin-bottom: 15px;
}

/* ✅ Dataset Dropdown */
.dataset-dropdown {
    padding: 5px 10px;
    background: #e9ecef;
    border-radius: 5px;
    border: 1px solid #ccc;
    font-size: 1rem;
    color: #333;
}

/* ✅ Dataset Shape Display */
.dataset-shape {
    background: #e9ecef;
    padding: 8px 12px;
    border-radius: 8px;
    font-weight: bold;
    border: 1px solid #ccc;
    color: #333;
}

/* ✅ Column Selection Container */
.column-selection-container {
    margin-top: 10px;
    padding: 10px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1);
}

/* ✅ Column Label */
.column-label {
    font-size: 1rem;
    font-weight: bold;
    color: #333;
    display: block;
    margin-bottom: 5px;
}

/* ✅ Column Dropdown Button */
.column-dropdown-button {
    background: #43617e;
    color: white;
    border: none;
    padding: 10px 15px;
    font-size: 16px;
    border-radius: 5px;
    cursor: pointer;
    width: 200px;
    font-weight: bold;
    box-shadow: 2px 4px 10px rgba(0, 0, 0, 0.1);
    text-align: left;
}

/* ✅ Column Dropdown */
.column-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    width: 250px;
    background: white;
    box-shadow: 0 4px 8px rgba(0,0,0,0.2);
    border-radius: 5px;
    max-height: 250px;
    overflow-y: auto;
    border: 1px solid #ccc;
    z-index: 1000;
}

/* ✅ Close Button for Dropdown */
.close-dropdown {
    background: transparent;
    border: none;
    font-size: 16px;
    cursor: pointer;
    position: absolute;
    top: 5px;
    right: 10px;
    color: #333;
}

.close-dropdown:hover {
    color: red;
}

/* ✅ Column List */
.column-list {
    max-height: 250px;
    overflow-y: auto;
    padding: 5px;
}

/* ✅ Column Item */
.column-item {
    display: flex;
    align-items: center;
    padding: 5px;
    cursor: pointer;
    font-size: 14px;
}

/* ✅ Search Input */
.column-search {
    width: 90%;
    padding: 8px;
    margin: 5px;
    border: 1px solid #ccc;
    border-radius: 4px;
    font-size: 14px;
}

/* ✅ Generate Analysis Button */
.generate-analysis-btn {
    background-color: #43617e;
    color: white;
    border: none;
    padding: 10px 15px;
    margin-top: 10px;
    cursor: pointer;
    font-size: 16px;
    border-radius: 5px;
}

.generate-analysis-btn:hover {
    background-color: #0056b3;
}

/* ✅ Analysis Method Selection */
.method-selection-container {
    display: flex;
    align-items: center;
    background: #ffffff;
    padding: 10px 15px;
    border-radius: 8px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.1);
    border: 1px solid #ccc;
    min-width: 200px;
}

/* ✅ Method Label */
.method-label {
    margin-right: 10px;
    font-weight: bold;
    color: #000;
    
}

/* ✅ Dropdown Button */
.method-dropdown-button {
    background-color: #ffffff;
    border: 1px solid #ccc;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 14px;
    border-radius: 4px;
    min-width: 180px;
    text-align: left;
    font-weight: bold;
    color: #000;
}

/* ✅ Dropdown List */
.method-dropdown-list {
    position: absolute;
    top: 40px;
    left: 0;
    width: 250px;
    background: white;
    border: 1px solid #ccc;
    border-radius: 4px;
    box-shadow: 0px 4px 10px rgba(0, 0, 0, 0.2);
    z-index: 100;
    max-height: 200px;
    overflow-y: auto;
}

/* ✅ Method Item */
.method-item {
    display: flex;
    align-items: center;
    padding: 8px;
    cursor: pointer;
    color: #000;
}

/* ✅ Error Message */
.error-message {
    color: red;
    font-weight: bold;
    margin-top: 10px;
}








/* ✅ Ensure horizontal scrolling for large datasets */
/* ✅ Ensure heatmap images are fully visible and scrollable */
.missing-data-visualization {
    overflow-x: auto;
    overflow-y: auto; /* Enable vertical scrolling */
    white-space: nowrap;
    display: flex;
    justify-content: flex-start;
    padding: 10px;
    max-width: 100%;
    max-height: 600px; /* Prevent excessive stretching */
    margin: auto;
    scrollbar-width: thin;
    max-height: 50vh; /* Ensure it does not break the page */
}

/* ✅ Style the missing data image */
.missing-data-image {
    height: auto; /* Allow height to be flexible */
    width: auto; /* Allow width to be flexible */
    min-width: 600px; /* Ensure minimum width for visibility */

    border: 1px solid #ccc; /* Add subtle border */
    border-radius: 8px;
    background: #fff;
    display: block;
}





.missing-matrix-scroll-container {
    overflow-x: auto;  /* Allow horizontal scrolling */
    overflow-y: auto;  /* Allow vertical scrolling */
    max-width: 100%;  /* Ensure it doesn't overflow unnecessarily */
    padding: 10px;
    display: flex;
    flex-direction: row;
    scrollbar-width: thin; /* Firefox */
    scrollbar-color: #888 #f1f1f1;
    max-height: 50vh;  /* Prevent page from breaking */
    border: 1px solid #ccc; /* Add subtle border */
    background: #fff;
    
    

}

.missing-data-chart-container {
    flex: 0 0 auto;
    padding: 10px;
    
}



/* ✅ Improve Scrollbar Appearance */
.missing-data-visualization::-webkit-scrollbar {
    height: 10px;
    width: 10px;
}

.missing-data-visualization::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 5px;
}

.missing-data-visualization::-webkit-scrollbar-thumb {
    background: #888; 
    border-radius: 5px;
}

.missing-data-visualization::-webkit-scrollbar-thumb:hover {
    background: #555;
}





/* ✅ Style scrollbar for better user experience */
.missing-matrix-scroll-container::-webkit-scrollbar {
    height: 12px;
    width: 12px;
}

.missing-matrix-scroll-container::-webkit-scrollbar-track {
    background: #f1f1f1; 
    border-radius: 5px;
}

.missing-matrix-scroll-container::-webkit-scrollbar-thumb {
    background: #888; 
    border-radius: 10px;
}

.missing-matrix-scroll-container::-webkit-scrollbar-thumb:hover {
    background: #555;
}








/* ✅ Ensure Missing Data Pattern title is always visible */
.missing-data-title {
    font-size: 1.5rem;
    font-weight: bold;
    color: var(--text-color, #000); /* Uses a CSS variable for adaptability */
    margin-bottom: 10px;
    transition: color 0.3s ease-in-out;
}

/* ✅ Dark Mode Styling */
@media (prefers-color-scheme: dark) {
    .missing-data-title {
        color: #fff;  /* Ensure it stays readable in dark mode */
    }
}











/* ✅ Ensure correlation heatmap scales properly */
.missing-data-correlation {
    max-height: 600px; 
    width: auto;
    min-width: 800px;
    object-fit: contain; /* Keep proportions */
    
}


/* ✅ Save Button (Top-Right Corner) */
.save-chart-btn {
    position: relative;
    top: 10px;
    right: 0px;
    background: none;
    border: none;
    cursor: pointer;
    font-size: 1.5rem;
    color: #555;
    transition: color 0.3s ease-in-out;
    
}

.save-chart-btn:hover {
    color: #000;
}








/* ✅ Scrollable UI for Large Datasets */
.missing-data-visualization-container {
    position: relative;
    padding: 20px;
    background: white;
    border-radius: 8px;
    box-shadow: 0 4px 8px rgba(0,0,0,0.1);
    max-width: 100%;
    
    overflow: hidden; /* Prevent breaking layout */
    margin: auto;
}