/* Map Layers Sidebar Styles */
/* Minimal styles, prioritizing Bootstrap, inspired by myaccount.php */
.sidebar-container-maps {
    padding: 0;
    display: flex;
    flex-direction: column;
}

/* Apply max-width only for desktop sizes */
@media (min-width: 768px) {
    .sidebar-container-maps {
        max-width: 300px;
    }
}

.map-layers-sidebar {
    background-color: #ebf4fa;
    border-right: 1px solid #d9e8f5;
    height: 100%;
    min-height: calc(100vh - 0px);
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    overflow-y: auto;
}

/* Apply max-width only for desktop sizes */
@media (min-width: 768px) {
    .map-layers-sidebar {
        max-width: 300px;
    }
}

.map-layers-sidebar::-webkit-scrollbar { display: none; }
.map-layers-sidebar { -ms-overflow-style: none; scrollbar-width: none; }

.map-layers-sidebar .sidebar-header {
    background-color: #ebf4fa;
    color: #011e61;
    padding: 15px;
    text-align: left;
    border-bottom: 1px solid #f8f9fa;
}

.map-layers-sidebar .sidebar-header h5 {
    margin: 0;
    font-weight: 600;
}

.map-layers-sidebar .nav-item {
    width: 100%;
    border-bottom: 1px solid #f8f9fa;
}
.map-layers-sidebar .nav-item:last-child {
    border-bottom: none;
}

/* Styling for the container of group title and toggle icon */
.map-layers-sidebar .nav-link-group-container {
    /* padding: 12px 0px 12px 16px; */ /* Padding moved to title and icon */
    color: #011e61;
    /* No background-color hover here; hover is on title/icon */
}

/* Styling for the navigational title link */
.map-layers-sidebar .nav-link-title {
    color: #011e61;
    text-decoration: none;
    font-weight: 600;
    font-size: 0.95em;
    padding: 12px 16px; /* Apply consistent padding here */
    display: inline-block; 
}
.map-layers-sidebar .nav-link-title:hover,
.map-layers-sidebar .nav-link-title:focus {
    background-color: #d7fade;
}

/* Styling for the toggle icon */
.map-layers-sidebar .toggle-icon {
    font-weight: bold;
    cursor: pointer;
    padding: 12px 16px; /* Consistent padding with title */
    margin-left: auto; 
    align-self: center; 
    user-select: none; 
}

/* Standard links (those without sub-items or sub-links) - This rule might become redundant or need adjustment */
.map-layers-sidebar .nav-link {
    /* This class is now primarily on sub-links and mobile solitary title links */
    color: #011e61;
    text-decoration: none;
    font-weight: 600; /* or normal for sub-links? */
    padding: 12px 16px; /* Default padding */
    transition: all 0.2s ease;
    font-size: 0.95em; /* Default size */
    border-radius: 0;
}

.map-layers-sidebar .nav-link.active { /* Specifically for solitary mobile title links - NOT sub-links */
    background-color: #d9e8f5; 
    color: #011e61;
}

/* Active state for sub-links (the actual layer items) - highlight the whole line */
/* Target the nav-link inside active nav-item-sub */
li.nav-item-sub.active > a.nav-link,
.nav-item-sub.active > .nav-link,
.map-layers-sidebar .nav-item-sub.active > .nav-link,
.map-layers-navbar .nav-item-sub.active > .nav-link {
    background-color: #b8d0e5 !important; /* Darker shade for active sub-item */
    color: #011e61 !important;
    font-weight: 600 !important; /* Make active sub-link bolder */
    border-left: 4px solid #011e61 !important;
    padding-left: 12px !important; /* adjust for left border */
    display: block !important; /* Ensure it takes full width */
}

/* Keep darker background for active sub-links even on hover */
.nav-item-sub.active > .nav-link:hover,
.map-layers-sidebar .nav-item-sub.active > .nav-link:hover,
.map-layers-navbar .nav-item-sub.active > .nav-link:hover,
li.nav-item-sub.active > a.nav-link:hover {
    background-color: #a8c0d5 !important; /* Even darker on hover for active sub-link */
    color: #011e61 !important;
}

/* Sub-item styling for desktop */
.map-layers-sidebar ul.collapse {
    background-color: #f0f8ff; /* Visual for when shown, hidden by display:none */
    /* Default state: no indentation */
    margin-left: 0;
    padding-left: 0;
    border-left: none;
}
.map-layers-sidebar ul.collapse.show {
    margin-left: 15px;      /* Indent for the VR when shown */
    padding-left: 15px;     /* Space between VR and text when shown */
    border-left: 1px solid #011e61; /* Vertical Rule when shown */
}
.map-layers-sidebar .nav-item-sub .nav-link.sub-link {
    font-size: 0.85em;
    font-weight: normal;
    padding: 10px 15px; /* Adjusted padding */
    display: block; /* Make full width clickable for sub-items */
}
 .map-layers-sidebar .nav-item-sub .nav-link.sub-link:hover {
    background-color: #d7fade;
}
.map-layers-sidebar ul.collapse .nav-item-sub {
  border-bottom: 1px solid #e0f0fb;
}
.map-layers-sidebar ul.collapse .nav-item-sub:last-child {
  border-bottom: none;
}

/* Mobile Navbar Styling - Adjusting to match desktop */
.map-layers-navbar {
    background-color: #ebf4fa;
    border-bottom: 1px solid #d9e8f5;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
    padding-top: .5rem;
    padding-bottom: .5rem;
}
.map-layers-navbar .navbar-brand {
    color: #011e61;
    font-weight: 600;
}
.map-layers-navbar .navbar-toggler {
    border-color: rgba(1, 30, 97, 0.25);
}
.map-layers-navbar .navbar-toggler-icon {
    background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 30 30'%3e%3cpath stroke='rgba(1, 30, 97, 0.75)' stroke-linecap='round' stroke-miterlimit='10' stroke-width='2' d='M4 7h22M4 15h22M4 23h22'/%3e%3c/svg%3e");
}

/* Style for the nav item li itself if it contains title + icon */
.map-layers-navbar .navbar-nav .nav-item {
    border-bottom: 1px solid #e0f0fb; 
}
.map-layers-navbar .navbar-nav .nav-item:last-child {
    border-bottom: none;
}

/* Mobile nav-link-title styling */
.map-layers-navbar .navbar-nav .nav-link-title {
    color: #011e61;
    font-weight: 500; 
    text-decoration: none;
    display: inline-block; 
    padding: 10px 12px; 
    /* .nav-link class is added by PHP, so it will get .nav-link general styles too */
}
/* For titles that are also .nav-link (mobile) and part of a flex container */
.map-layers-navbar .navbar-nav .d-flex > .nav-link-title.nav-link {
    /* flex-grow-1 is now in PHP, this ensures padding is just for the link text area */
}

.map-layers-navbar .navbar-nav .nav-link-title:hover,
.map-layers-navbar .navbar-nav .nav-link-title:focus {
    background-color: #d7fade; 
}

/* Mobile toggle-icon styling */
.map-layers-navbar .navbar-nav .toggle-icon {
    cursor: pointer;
    padding: 10px 12px; 
    font-weight: bold;
    user-select: none;
}


.map-layers-navbar .navbar-nav .nav-link:hover,
.map-layers-navbar .navbar-nav .nav-link:focus {
    background-color: #d7fade; 
}
.map-layers-navbar .navbar-nav .nav-link.active {
    background-color: #d9e8f5; /* Default active background */
    color: #011e61;
}

/* Specific override for active title links to not have bg color from general .nav-link.active */
.map-layers-navbar .navbar-nav .nav-link-title.active,
.map-layers-navbar .navbar-nav .nav-link-title.active:hover { /* Prevent hover from overriding active state appearance */
    background-color: transparent; /* No background for active titles, only bold and border */
    font-weight: 500; 
}
 .map-layers-navbar .navbar-nav .nav-link-title.active:hover{
    background-color: #d7fade; /* Keep text hover on active title */
 }

/* Mobile sub-menu VR */
.map-layers-navbar .navbar-nav ul.collapse {
    background-color: #f0f8ff; 
    margin-left: 0; /* Reset from desktop */
    padding-left: 0; /* Reset from desktop */
    border-left: none; /* Reset from desktop */
}
.map-layers-navbar .navbar-nav ul.collapse.show {
    margin-left: 10px; 
    padding-left: 10px; 
    border-left: 1px solid #011e61; /* Match desktop VR color */
}

/* Mobile sub-links */
.map-layers-navbar .navbar-nav ul.collapse .nav-link.sub-link {
    font-size: 0.9em;
    padding-left: 1.5rem; /* Indent sub-items */
    /* border-right is handled by general .nav-link rules */
}

/* Styling for the new toggle icon if needed */
.toggle-icon {
    font-weight: bold;
    user-select: none;
}

/* Search Section Styling */
.search-section {
    background-color: #ebf4fa;
    border-bottom: 1px solid #d9e8f5 !important;
}

.search-section-mobile {
    background-color: #ebf4fa;
    border-bottom: 1px solid #d9e8f5 !important;
}

.search-dropdown {
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: white;
    border: 1px solid #dee2e6;
    border-top: none;
    border-radius: 0 0 0.375rem 0.375rem;
    box-shadow: 0 0.5rem 1rem rgba(0, 0, 0, 0.15);
    z-index: 1000;
    max-height: 300px;
    overflow-y: auto;
}

.search-results-container {
    min-height: 30px;
}

.sidebar-search-result {
    cursor: pointer;
    transition: background-color 0.2s ease;
    padding: 8px 12px;
    border-bottom: 1px solid #f0f8ff;
}

.sidebar-search-result:hover {
    background-color: #f0f8ff;
}

.sidebar-search-result:last-child {
    border-bottom: none;
}

.sidebar-result-title {
    font-size: 0.85rem;
    font-weight: 600;
    line-height: 1.3;
    margin-bottom: 2px;
    color: #011e61;
}

.sidebar-result-type {
    font-size: 0.75rem;
    color: #6c757d;
    line-height: 1.2;
}

.sidebar-result-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    margin-right: 8px;
}

.sidebar-highlight {
    background-color: #fff3cd;
    padding: 1px 2px;
    border-radius: 2px;
}

.sidebar-more-results {
    text-align: center;
    padding: 8px 12px;
    background-color: #f0f8ff;
    border-top: 1px solid #d9e8f5;
    cursor: pointer;
    font-size: 0.8rem;
    color: #007bff;
    font-weight: 600;
}

.sidebar-more-results:hover {
    background-color: #d7fade;
}