/* Styles for the layer menu */

/* Layer controls styling */
.mapboxgl-ctrl-group1.mapboxgl-ctrl {
    background-color: #fff;
    border-radius: 4px;
    box-shadow: 0 0 0 2px rgba(0,0,0,0.1);
    overflow: hidden;
    margin: 10px;
    padding: 0;
}


#The_LayerHamburger {
    position: absolute;
    top: 10px;
    right: 10px;
    width: 100px;
    color: #000000;
    background-color: #ffffff;
    letter-spacing: 2px;
    height: 17px;
    text-align: left;
    padding: 9px;
    padding-left: 12px;
    cursor: pointer;
    font-weight: 100;
    font-family: ui-sans-serif;
}


#The_LayerHamburger:after {
    content: "";
    width: 25px;
    height: 26px;
    background-image: url('../images/LayersIcon.svg');
    top: 2px;
    right: 3px;
    position: absolute;
    display: inline-block;
}

#The_LayerHamburger:hover {
    box-shadow: 2px 2px 3px 0px black;
}

    #The_LayerHamburger:hover:after {
        filter: invert(48%) sepia(79%) saturate(2476%) hue-rotate(204deg) brightness(118%) contrast(119%);
    }

/* Add media query specifically for mobile column layout */
@media screen and (max-width: 500px) {
    /* When in column layout, fix menu positioning */
    .mapboxgl-ctrl-top-right .mapboxgl-ctrl #The_LayerMenu {

    }
}

/* Layer menu dropdown - renamed from The_LayerMenu to The_LayerMenu */
#The_LayerMenu {
    position: relative;
    top: 60px; /* Height of hamburger (17px) + padding (9px*2) + small gap */
    right: 17px; /* Same right alignment as the hamburger */
    background: white;
    border-radius: 4px;
    box-shadow: 0 0 10px rgba(0,0,0,0.2);
    z-index: 100;
    padding: 8px;
    display: none;
    flex-direction: column;
    /* position: absolute; */
    overflow-y: auto;
    max-height: 70vh;
    width: auto;
    min-width: 180px;
}

#The_LayerMenu div {
    margin: 4px 0;
}

#The_LayerMenu label {
    margin-left: 8px;
    font-size: 12px;
    cursor: pointer;
    user-select: none;
}

/* Button types within menu */
.TerrainButtonDiv, 
.LayerControlOptiondiv, 
.WalkZoneControlOptiondiv, 
.MyCustomButtonDiv {
    display: flex;
    align-items: center;
    padding: 4px 0;
}

/* Color indicators for walk zones */
.color-indicator {
    flex-shrink: 0;
}

/* Menu separators */
.menu-separator {
    height: 1px;
    background-color: #ddd;
    margin: 6px 0;
    width: 100%;
}

.TerrainButtonDiv,
.LayerControlOptiondiv,
.WalkZoneControlOptiondiv,
.MyCustomButtonDiv {
    display: flex;
    align-items: flex-start; /* Align items to the top for proper text wrapping */
    margin-bottom: 4px; /* Reduced bottom margin */
    width: 100%;
    padding: 1px 0; /* Reduced padding */
}

.TerrainButtonDiv label,
.LayerControlOptiondiv label,
.WalkZoneControlOptiondiv label,
.MyCustomButtonDiv label {
    margin-left: 5px; /* Reduced left margin */
    white-space: normal;
    font-size: 10px; /* Smaller font size */
    line-height: 1.1; /* Tighter line spacing */
    max-width: calc(100% - 20px); /* Leave space for the checkbox */
    word-break: break-word; /* Allow long words to break */
}

/* Make checkboxes smaller and better aligned */
.TerrainButtonDiv input[type="checkbox"],
.LayerControlOptiondiv input[type="checkbox"],
.WalkZoneControlOptiondiv input[type="checkbox"],
.MyCustomButtonDiv input[type="checkbox"] {
    flex-shrink: 0;
    margin-top: 1px; /* Better alignment with smaller text */
    width: 12px; /* Smaller checkbox */
    height: 12px; /* Smaller checkbox */
}

/* Walk zone specific styles */
.WalkZoneControlOptiondiv {
    margin-top: 3px; /* Reduced top margin */
    padding-top: 3px; /* Reduced top padding */  
}

/* Make distance text in walk zones even smaller */
.WalkZoneControlOptiondiv label span {
    font-size: 8px; /* Even smaller font for distance text */
    line-height: 1;
}

/* Add scrollbar styling for better appearance */
#The_LayerMenu::-webkit-scrollbar {
    width: 4px; /* Thinner scrollbar */
}

#The_LayerMenu::-webkit-scrollbar-track {
    background: #f1f1f1;
}

#The_LayerMenu::-webkit-scrollbar-thumb {
    background: #888;
    border-radius: 3px;
}

#The_LayerMenu::-webkit-scrollbar-thumb:hover {
    background: #555;
}



/* Add title styling for section headers */
.section-header {
    font-size: 11px;
    font-weight: bold;
    margin: 3px 0;
    padding-bottom: 2px;
    border-bottom: 1px solid #ddd;
}

.section-header-borderless {
    font-size: 11px;
    font-weight: bold;
    margin: 3px 0;
    padding-bottom: 2px;    
}

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

/* Walk Zone Results styling */
.walkzone-results {
    margin-top: 20px;
    padding-top: 10px;
    border-top: 2px solid #ddd;
}

.walkzone-results-title {
    font-size: 16px;
    font-weight: bold;
    margin: 0 0 10px 0;
    color: #333;
}

/* Consolidate repeated styles */
.walkzone-group-container,
.walkzone-item {
    padding: 8px;
    margin: 5px 0;
    border-radius: 4px;
}

.walkzone-group-container {
    background-color: rgba(245, 245, 245, 0.7);
    margin-bottom: 15px;
}

.walkzone-item {
    background-color: white;
    border-left: 3px solid;
}

/* Common text styles */
.walkzone-group-title,
.walkzone-name {
    font-weight: bold;
}

.walkzone-group-title {
    font-size: 14px;
    margin-bottom: 5px;
}

.walkzone-distance-info,
.walkzone-description,
.walkzone-school {
    color: #666;
}

.walkzone-distance-info {
    font-size: 12px;
    margin-bottom: 8px;
    font-style: italic;
}

.walkzone-description {
    font-size: 12px;
    margin-top: 3px;
    color: #555;
}

.walkzone-group-title {
    font-weight: bold;
    font-size: 14px;
    margin-bottom: 5px;
}

.walkzone-distance-info {
    font-size: 12px;
    color: #666;
    margin-bottom: 8px;
    font-style: italic;
}

.walkzone-item {
    margin: 5px 0;
    padding: 5px;
    background-color: white;
    border-radius: 3px;
    border-left: 3px solid;
}

.walkzone-name {
    font-weight: bold;
    font-size: 13px;
}

.walkzone-description {
    font-size: 12px;
    color: #555;
    margin-top: 3px;
}

.walkzone-info-text {
    font-style: italic;
    color: #666;
}

.walkzone-error {
    color: #d9534f;
    font-style: italic;
}

/* Enhanced Walk Zone styling */
.walkzone-school {
    font-size: 11px;
    font-style: italic;
    color: #555;
}

.walkzone-header {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
}

/* Error message styling */
.error-message {
    color: #d9534f;
    font-style: italic;
    padding: 10px;
    margin: 10px 0;
    border-left: 3px solid #d9534f;
    background-color: rgba(217, 83, 79, 0.1);
}

/* Update any color references in CSS */
.walkzone-item[data-type="TK"] {
    border-left-color: #E57373; /* Muted coral for TK */
}

.walkzone-item[data-type="1-6"] {
    border-left-color: #81C784; /* Muted green for 1-6 */
}

.walkzone-item[data-type="7-8"] {
    border-left-color: #64B5F6; /* Muted blue for 7-8 */
}

.walkzone-item[data-type="9-12"] {
    border-left-color: #BA68C8; /* Muted purple for 9-12 */
}

/* Update walk zone type styles for combined Elementary */
.walkzone-item[data-type="Elementary"] {
    border-left-color: #21BAB5; /* Match Elementary Schools color */
}

.walkzone-item[data-type="7-8"] {
    border-left-color: #F9A440; /* Match Middle Schools color */
}

.walkzone-item[data-type="9-12"] {
    border-left-color: #7400FF; /* Match High Schools color */
}