/* Comprehensive styling for school results, layers, and menus */

/* ========== SCHOOL RESULTS SECTION ========== */
/* Overall container */

.container{
    padding: 0;
}

.school-results {
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, Oxygen, Ubuntu, Cantarell, 'Open Sans', 'Helvetica Neue', sans-serif;
    color: #333;
    max-height: none; /* Remove fixed max-height */
    flex: 1 1 auto;
    overflow-y: auto;
    padding: 0;
    margin: 0;
    border-radius: 4px;
}

/* School type container */
.container-shadow {
    margin-bottom: 15px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    overflow: hidden;
}

/* School type header */
.container-shadow-title {
    padding: 10px 12px;
    font-weight: 600;
    font-size: 15px;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    color: #333;
}

/* Different colors for school types */
.Elementary-Schools-title { border-left: 4px solid #21BAB5; }
.Middle-Schools-title { border-left: 4px solid #F9A440; }
.High-Schools-title { border-left: 4px solid #7400FF; }

/* Layer name styling */
.layer-name {
    font-weight: 500;
    font-size: 14px;
    padding: 8px 12px;
    margin: 0;
    cursor: pointer;
    border-bottom: 1px solid #eee;
    background-color: #fafafa;
    transition: background-color 0.2s;
    position: relative;
}

.layer-name:hover {
    background-color: #f0f0f0;
}

/* School result name styling */
.school-result-name {
    padding: 8px 15px 8px 15px;
    box-sizing: border-box;
    font-size: 13px;
    cursor: pointer;
    position: relative;
    margin: 0;
    border-bottom: 1px solid #f0f0f0;
    transition: background-color 0.2s;
}

.school-result-name:hover {
    background-color: #f5f5f5;
}

/* School information */
.school-result-name ul {
    display: none;
    padding: 10px 0 10px 0;
    margin: 0;
    background-color: #f9f9f9;
    border-top: 1px solid rgba(0,0,0,0.05);
}

.school-result-name.show ul {
    display: block;
}

.school-result-info {
    font-size: 12px;
    padding: 4px 15px;
    color: #555;
}

/* Standardize list styles */
.school-results ul {
    list-style-type: none;
    margin: 0;
    padding: 0;
}

/* Improve note display */
.result-notes {
    padding: 10px 15px;
    margin: 0;
    background-color: #fff8e1;
    border-left: 4px solid #ffb74d;
    font-style: italic;
    font-size: 13px;
}

/* Arrow indicators - only for school results, not layers */
/* .school-result-name::after {
    content: '▸';
    position: absolute;
    right: 15px;
    top: 50%;
    transform: translateY(-50%);
    transition: transform 0.2s;
    font-size: 12px;
    color: #555;
}

.school-result-name.show::after {
    transform: translateY(-50%) rotate(90deg);
} */

/* Hide arrows from layer names */
.layer-name::after {
    content: none;
}

/* Remove ANY conflicting arrow elements */
.layer-name::before, 
.school-result-name::before,
.layer-name > i, 
.school-result-name > i,
.layer-name > span, 
.school-result-name > span,
.layer-name span.arrow, 
.school-result-name span.arrow,
.layer-name .toggle-icon, 
.school-result-name .toggle-icon,
.layer-name .caret, 
.school-result-name .caret,
.layer-name .chevron, 
.school-result-name .chevron {
    display: none !important;
}

/* Ensure content property is explicitly set for specific elements */
.layer-name > *::after,
.school-result-name > *::after {
    content: none !important;
}

/* Improve visibility of active items */
.school-result-name.show {
    background-color: #f0f7ff;
    border-left: 3px solid #2196F3;
    padding-left: 12px !important;
    box-shadow: inset 0 0 0 1px rgba(33, 150, 243, 0.1);
    transition: all 0.2s ease-in-out;
}

/* Fix for nested lists */
.school-result-name ul li {
    position: relative;
    padding-left: 0;
}

/* Ensure nested lists don't show arrows */
.school-result-name ul li::after,
.school-result-name ul li::before {
    display: none;
}

/* Link styling */
.school-result-info a {
    color: #2196F3;
    text-decoration: none;
}

.school-result-info a:hover {
    text-decoration: underline;
}

/* ========== LAYER MENU SECTION ========== */
/* Layer menu container */
#The_LayerMenu {
    display: none;
    position: fixed;
    z-index: 1000;
    background-color: white;
    border-radius: 4px;
    box-shadow: 0 2px 10px rgba(0,0,0,0.1);
    padding: 4px;
    margin: 2px;
    max-height: 80vh;
    overflow-y: auto;
    min-width: 185px;
}

/* Button containers */
.TerrainButtonDiv,
.LayerControlOptiondiv,
.WalkZoneControlOptiondiv,
.MyCustomButtonDiv {
    display: flex;
    align-items: flex-start;
    margin-bottom: 4px;
    width: 100%;
    padding: 1px 0;
}

/* Button labels */
.TerrainButtonDiv label,
.LayerControlOptiondiv label,
.WalkZoneControlOptiondiv label,
.MyCustomButtonDiv label {
    margin-left: 5px;
    white-space: normal;
    font-size: 10px;
    line-height: 1.1;
    max-width: calc(100% - 20px);
    word-break: break-word;
}

/* Checkboxes */
.TerrainButtonDiv input[type="checkbox"],
.LayerControlOptiondiv input[type="checkbox"],
.WalkZoneControlOptiondiv input[type="checkbox"],
.MyCustomButtonDiv input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 1px;
    width: 12px;
    height: 12px;
}

/* Menu positioning */
.menu-positioned {
    position: fixed !important;
}

/* Dividers */
.divider {
    border-top: 1px solid #ddd;
    margin: 4px 0;
    width: 100%;
}

/* ========== EXTRA INFO CONTAINER STYLING ========== */
/* Make the container styling more specific to ensure it applies */
.container.extra-info-container {
    margin-bottom: 15px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    overflow: visible; /* Allow content to be fully visible */
    background-color: white;
}

/* Add higher specificity and !important to ensure the colored borders apply */
.info-sub-container.current-address-result-container {
    border-left: 4px solid #2196F3 !important; /* Blue to indicate location */
}

.info-sub-container.marker-boundary-status-container {
    border-left: 4px solid #F44336 !important; /* Red for warnings/status */
}

.info-sub-container.district-note-container {
    border-left: 4px solid #4CAF50 !important; /* Green for district info */
}

.info-sub-container.result-notes-container {
    border-left: 4px solid #FF9800 !important; /* Orange for notes */
}

/* Improved padding and margins for info containers */
.info-sub-container {
    padding: 12px 15px;
    margin: 0 0 8px 0;
    border-bottom: 1px solid #f0f0f0;
    display: flex;
    flex-direction: column;
}

/* Remove the overly aggressive hiding selectors that are breaking the structure */
/* Delete or comment out these problematic rules */
/* Hide redundant titles within school type sections */ 
/* 
.layer-name:first-child {
    display: none;
}

.layer-name:contains("Elementary"), 
.layer-name:contains("Middle"), 
.layer-name:contains("High") {
    display: none;
}
*/

/* Title styling for extra info sections */
.info-title {
    font-weight: 600;
    font-size: 13px;
    color: #555;
    margin-bottom: 5px;
}

/* Content styling for extra info sections */
.current-address-result,
.marker-boundary-status,
.district-note,
.result-notes {
    font-size: 14px;
    line-height: 1.4;
    color: #333;
}

/* Info text that should stand out */
.emphasis-text {
    font-weight: 500;
    color: #000;
}

/* ========== SCROLLBAR STYLING ========== */
.school-results::-webkit-scrollbar,
#The_LayerMenu::-webkit-scrollbar {
    width: 6px;
}

.school-results::-webkit-scrollbar-track,
#The_LayerMenu::-webkit-scrollbar-track {
    background: #f1f1f1;
    border-radius: 3px;
}

.school-results::-webkit-scrollbar-thumb,
#The_LayerMenu::-webkit-scrollbar-thumb {
    background: #c1c1c1;
    border-radius: 3px;
}

.school-results::-webkit-scrollbar-thumb:hover,
#The_LayerMenu::-webkit-scrollbar-thumb:hover {
    background: #a1a1a1;
}

/* Update container styling to match HTML structure */
.info-sub-container.container-shadow {
    margin-bottom: 10px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    overflow: hidden;
    background-color: white;
    padding: 12px 15px;
    display: flex;
    flex-direction: column;
}

/* Colored borders for different info types */
.info-sub-container:has(.district-note-title) {
    border-left: 4px solid #4CAF50 !important; /* Green for district info */
}

.info-sub-container:has(.result-notes-title) {
    border-left: 4px solid #FF9800 !important; /* Orange for notes/alerts */
}

.info-sub-container:has(.current-address-result-title) {
    border-left: 4px solid #2196F3 !important; /* Blue to indicate location */
}

.info-sub-container:has(.marker-boundary-status-title) {
    border-left: 4px solid #F44336 !important; /* Red for warnings/status */
}

.info-sub-container:has(.selected-layer-name-title) {
    border-left: 4px solid #9C27B0 !important; /* Purple for layer selection */
}

/* Title styling for info sections */
.info-menu-title {
    font-weight: 600;
    font-size: 13px;
    color: #555;
    margin-bottom: 8px;
}

/* Content styling for info sections */
.info-menu-item {
    font-size: 14px;
    line-height: 1.4;
    color: #333;
}

/* Show only when has content */
.info-sub-container {
    display: none;
}

.info-sub-container:has(.info-menu-item:not(:empty)) {
    display: flex;
}

/* Special styling for result notes as a list */
ul.result-notes {
    list-style-type: none;
    padding: 0;
    margin: 0;
}

ul.result-notes li {
    margin-bottom: 5px;
    padding-left: 12px;
    position: relative;
}

ul.result-notes li:before {
    content: "•";
    position: absolute;
    left: 0;
    color: #FF9800;
}

/* Selected layer name styling */
.selected-layer-name {
    font-weight: 500;
}

/* Title styling for main section headings */
.title {
    padding: 10px 12px;
    font-weight: 500;
    font-size: 14px;
    background-color: #f5f5f5;
    /* border-bottom: 1px solid #e0e0e0; */
    /* color: #333; */
    /* border-top-left-radius: 4px; */
    /* border-top-right-radius: 4px; */
}

/* School title wrapper improvements */
.school-title-wrapper {
    display: flex;
    justify-content: flex-start;
    align-items: center;
    padding: 0;
    white-space: nowrap;
    overflow: hidden;
    background-color: #f5f5f5;
    border-bottom: 1px solid #e0e0e0;
    border-top-left-radius: 4px;
    border-top-right-radius: 4px;
}

.school-title-wrapper .title {
    flex: 0 0 auto;
    border-bottom: none;
    overflow: hidden;
    text-overflow: ellipsis;
    padding: 10px 12px;
}

.flex-pad {
    flex: 1 1 auto;
    min-width: 10px;
}

.School-house {
    flex: 0 0 auto;
    padding-right: 12px;
    display: flex;
    align-items: center;
}

/* Fix for scrolling in left navigation area */
.nav-bar-wrapper {
    height: calc(100% - 70px); /* Account for geocoder height */
    overflow-y: auto;
    padding: 0 10px;
    display: flex;
    flex-direction: column;
}

/* Ensure containers properly fit within the scrollable area */
.school-results-wrapper {
    /* flex: 1 1 auto; */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    margin-bottom: 15px;
}

/* Ensure the container-shadow for school results expands properly */
.school-results-wrapper .container-shadow.extra-info {
    display: flex;
    flex-direction: column;
    height: 100%;
    overflow: hidden;
}

/* School-house icon positioning */
.School-house {
    padding-right: 12px;
    display: flex;
    align-items: center;
}

/* Fix scrolling for both containers within the nav bar wrapper */
.container.extra-info-container {
    margin-bottom: 15px;
    border-radius: 4px;
    border: 1px solid #e0e0e0;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    background-color: white;
    display: flex;
    flex-direction: column;
    overflow: hidden; /* Hide overflow at container level */
    max-height: 40vh; /* Limit height to prevent taking too much space */
}

/* Make the extra-info content area scrollable */
.container.extra-info-container .extra-info {
    overflow-y: auto;
    flex: 1;
    display: flex;
    flex-direction: column;
}

/* Fix both containers to have similar scrolling behavior */
.nav-bar-wrapper {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px;
}

/* Configure school results wrapper to have similar behavior */
.school-results-wrapper.container {
    /* flex: 1; */
    margin-bottom: 15px;
    display: flex;
    flex-direction: column;
    max-height: 50vh; /* Give more space to school results */
}

/* Make sure both container types don't take more than their allowed space */
@media screen and (max-height: 600px) {
    .container.extra-info-container {
        max-height: 35vh;
    }
    
    .school-results-wrapper.container {
        max-height: 55vh;
    }
}

/* Make the nav-bar-wrapper properly handle content distribution */
.nav-bar-wrapper {
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    flex: 1;
    display: flex;
    flex-direction: column;
    padding: 10px;
}

/* Make info container take only space it needs */
.container.extra-info-container {
    margin-bottom: 15px;
    flex: 0 0 auto; /* Don't grow, don't shrink, use content height */
    min-height: 0;
    display: flex;
    flex-direction: column;
}

/* Make school results wrapper properly flexible */
.school-results-wrapper.container {
    /* flex: 1 1 auto;  */
    flex-direction: column;
    margin-bottom: 15px;
    overflow: visible; /* Show all content */
    min-height: 0; /* Allow shrinking smaller than content */
    max-height: none; /* Remove height limit */
}

/* Make the school results container expand to fit its content */
.school-results-wrapper .container-shadow {
    display: flex;
    flex-direction: column;
    overflow: visible; /* Show overflow */
}

/* Make school results list scrollable when needed */
.school-results {
    overflow-y: auto;
    max-height: none;
    /* flex: 1 1 auto; */
}

/* Remove fixed height constraints on media queries */
@media screen and (max-height: 600px) {
    .container.extra-info-container {
        max-height: none;
    }
    
    .school-results-wrapper.container {
        max-height: none;
    }
}