/* --- Global & Template Styles --- */
html, body {  
    margin: 0; padding: 0;
    height: 100%;
    width: 100%;
    overflow: hidden;
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif;
}

#map { 
    position: absolute; 
    top: 0; bottom: 0; 
    height: 100%; 
    width: 100%; 
    padding: 0;
}

#loading {
    position: absolute;
    width: 220px;
    height: 19px;
    top: 50%;
    left: 50%;
    margin: -10px 0 0 -110px;
    z-index: 20001;
}

.mapbox-logo {
    display: none !important;
}

/* --- Navigation & Navbar --- */
.navbar {
    -webkit-box-shadow: 0 -1px 5px rgba(0,0,0,0.5);
    -moz-box-shadow: 0 -1px 5px rgba(0,0,0,0.5);
    box-shadow: 0 -1px 5px rgba(0,0,0,0.5);
    opacity: 0.9;
    z-index: 1001;
}

.navbar .navbar-brand {
    font-size: 20px;
    white-space: nowrap;
}

.logo {
    float: left;
    padding-top: 5px;
    padding-left: 5px;
}

.navbar-footer {
    height: 18px;
    opacity: 0.9;
}

/* --- Floating Layer Switcher (Popover Style) --- */

#layer-switcher {
    display: none;
    position: absolute;
    background: #fff;
    padding: 10px;
    margin-right: 8px;
    margin-top: 8px;
    border-radius: 4px;
    top: 50px;
    right: 0;
    z-index: 1000;
    border: 2px solid rgba(0,0,0,.2);
    overflow-y: auto;
    
    /* Lock width for both Desktop and Mobile */
    
    max-height: 420px;
    box-shadow: 0 1px 5px rgba(0,0,0,0.4);
}


/* --- Switcher Header & Close Button --- */
.switcher-header {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding-bottom: 10px;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
}

.switcher-title {
    font-weight: 700;
    font-size: 14px;
    color: #555;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    padding: 15px 15px 5px 0px;
}

.btn-close-switcher {
    background: #f1f1f1;
    border: none;
    border-radius: 50%;
    width: 44px;  /* Optimal touch target size */
    height: 44px;
    font-size: 24px;
    line-height: 44px;
    text-align: center;
    cursor: pointer;
    color: #666;
    transition: background 0.2s;
    display: flex;
    justify-content: center;
    align-items: center;
}

.btn-close-switcher:hover, .btn-close-switcher:active {
    background: #e0e0e0;
    color: #000;
}


/* --- THE TREEVIEW RESET (Fixes Bold, Font, Bullets & Spacing) --- */

/* 1. Force remove all bullets and list markers */
#treeview, 
#treeview ul, 
#treeview li {
    list-style: none !important;
    list-style-type: none !important;
    padding: 0 !important;
    margin: 0 !important;
    background-image: none !important;
}

/* 2. Indent nested levels without bullets */
#treeview ul {
    padding-left: 18px !important; 
}

/* 3. Global Typography Reset (Specifically overrides Bootstrap 3 bold labels) */
#treeview label,
#treeview span,
#treeview input {
    font-family: "Helvetica Neue", Helvetica, Arial, sans-serif !important;
    font-size: 12px !important;
    font-weight: 400 !important; /* Normal weight for imagery layers */
    line-height: 14px !important; /* Tight spacing for high density */
    margin: 0 !important;
}

/* 4. Layer Header Styling (Folders) */
#treeview .folder-label {
    display: flex !important;
    align-items: center;
    padding: 3px 0 !important;
    cursor: pointer;
}

#treeview .folder-label span,
#treeview .folder-label b {
    font-weight: 700 !important; /* Only folder titles stay bold */
}

/* 5. Individual Layer Styling (Files) */
#treeview .folder-content .file-label,
#treeview .folder-content .file-label span {
    font-weight: 400 !important; /* Explicitly non-bold imagery names */
    display: flex !important;
    align-items: center;
    padding: 1px 0 !important; 
    cursor: pointer;
}

/* 6. Icon and Input Spacing */
.fa-folder { color: #ffa500 !important; margin-right: 6px; }
.fa-map { color: #418bca !important; margin-right: 6px; }

#treeview input[type="checkbox"], 
#treeview input[type="radio"] {
    margin-right: 8px !important;
    margin-left: 2px !important;
    padding: 0 !important;
    width: 13px;
    height: 13px;
    vertical-align: middle;
    cursor: pointer;
    accent-color: #007bff; /* Blue checkbox fill */
}

/* 7. Default Collapsed State */
.folder-content {
    display: none;
}

/* --- Navbar Download Dropdown --- */
.dropdown-menu {
    min-width: 350px; /* Give the long names some breathing room */
    max-height: 450px;
    overflow-y: auto;
    padding: 5px 0;
    box-shadow: 0 6px 12px rgba(0,0,0,0.175);
    border: 1px solid #ccc;
}

.dropdown-menu li:last-child {
    border-bottom: none !important;
}

.dropdown-menu li:hover {
    background-color: #f8f9fa;
}

/* Ensure the links are easily clickable on touch devices */
.dropdown-menu a {
    padding: 2px 4px;
    display: inline-block;
}





/* --- Map Control Icons --- */
.mapboxgl-ctrl-togglelyr {
    background-image: url(data:image/svg+xml;base64,PD94bWwgdmVyc2lvbj0iMS4wIiBlbmNvZGluZz0iaXNvLTg4NTktMSI/Pg0KPHN2ZyB2ZXJzaW9uPSIxLjEiIGlkPSJDYXBhXzEiIHhtbG5zPSJodHRwOi8vd3d3LnczLm9yZy8yMDAwL3N2ZyIgeG1sbnM6eGxpbms9Imh0dHA6Ly93d3cudzMub3JnLzE5OTkveGxpbmsiIHg9IjBweCIgeT0iMHB4Ig0KCSB2aWV3Qm94PSIwIDAgMzIuNTA4IDMyLjUwOCIgc3R5bGU9ImVuYWJsZS1iYWNrZ3JvdW5kOm5ldyAwIDAgMzIuNTA4IDMyLjUwODsiIHhtbDpzcGFjZT0icHJlc2VydmUiPg0KPGc+DQoJPGcgaWQ9ImMzMF9wYXBlciI+DQoJCTxwYXRoIGQ9Ik0wLDExLjI1N2wxNi4yNTQtOS4wNzVsMTYuMjU0LDkuMDc1bC0xNi4yNTQsOS4wNzRMMCwxMS4yNTd6Ii8+DQoJCTxwYXRoIGQ9Ik0wLDE2LjI1NWwxLjkwOC0xLjYxNGwxNC4zNDYsNy43MTVsMTQuMzItNy43NDhsMS45MzQsMS42NDdsLTE2LjI1NCw5LjA3MkwwLDE2LjI1NXoiLz4NCgkJPHBhdGggZD0iTTAsMjEuMjU0bDEuOTA4LTEuNjE1bDE0LjM0Niw3LjcxNmwxNC4zMi03Ljc1bDEuOTM0LDEuNjQ5bC0xNi4yNTQsOS4wNzJMMCwyMS4yNTR6Ii8+DQoJPC9nPg0KPC9nPg0KPC9zdmc+DQo=);
    background-repeat: no-repeat; 
    background-size: 24px; 
    background-position: center;
    width: 30px; height: 30px; 
    background-color: white; 
    border: none; 
    cursor: pointer;
}

.maplibregl-ctrl-top-right, .mapboxgl-ctrl-top-right { top: 50px; }
.maplibregl-ctrl-top-left, .mapboxgl-ctrl-top-left { top: 50px; }
.maplibregl-ctrl-bottom-right, .mapboxgl-ctrl-bottom-right { bottom: 18px; right: 0px; }

/* --- Mouse Coordinates --- */
#mousecoords {
  position: absolute;
  padding: 0 5px;
  bottom: 0px;
  margin: 0;
  color: #333;
  font: 11px/1.5 "Helvetica Neue", Arial, sans-serif;
  z-index: 2000;
}


/* --- Targeted Footer Resource Styles --- */

#services, #metadata {
    padding: 15px 10px; /* Give the sections a bit more room */
}

/* Specific font bump for the resource links */
#services .fa-ul li, 
#metadata .fa-ul li {
    font-size: 15px !important; /* Larger, readable size */
    line-height: 1.6;           /* Added spacing between lines */
    margin-bottom: 12px;        /* Spacing between different links */
}

/* Making the labels (e.g., "Hawaii Floods WMTS:") stand out */
#services .fa-ul li b,
#metadata .fa-ul li b {
    font-size: 14px !important;
    color: #222;
    display: inline-block;
    margin-bottom: 4px;
}

/* URL styling */
#services .fa-ul li a,
#metadata .fa-ul li a {
    font-size: 14px !important; /* Slightly smaller than label, but bigger than UI */
    word-break: break-all;      /* Prevents long URLs from breaking the layout */
    color: #418bca;
}


/* --- Mobile View Support --- */
/*@media (max-width: 767px) {
    #layer-switcher { width: 240px; top: 60px; }
    .navbar .navbar-brand { font-size: 18px; }
    #mousecoords { display: none; }
}*/

/* --- Mobile Specific Adjustments (Height/Position only) --- */
@media (max-width: 767px) {
    #layer-switcher {
        max-width: 90vw; /* Safety fallback for very narrow phones */
        max-height: 75vh; /* Allow it to scroll on shorter screens */
        top: 50px;      /* Nudge down slightly to clear mobile navbars */
        right:0x;
    }
}