/* Sidebar search dropdown styles */
.search-sticky {
  position: relative; /* changed from sticky to relative to fix layout issues */
  z-index: 100;
  background: #fff;
  padding-bottom: var(--sidebar-tools-vpad, 8px);
  border-bottom: 1px solid #ddd;
  box-shadow: 0 1px 0 rgba(0,0,0,0.06);
}
/* Ensure dropdown is positioned relative to the input wrapper */
.search-box-wrap { position: relative; }
/* Sidebar title above the search bar */
.sidebar-title {
  height: var(--sidebar-title-height, 34px);
  line-height: var(--sidebar-title-height, 34px);
  font-size: var(--sidebar-title-font-size, 18px);
  font-weight: var(--sidebar-title-font-weight, 700);
  color: var(--sidebar-title-color, #222);
  background: var(--sidebar-title-bg, #fff);
  padding: 0 var(--sidebar-title-padding-x, 6px);
  border-bottom: var(--sidebar-title-divider-width, 2px) solid var(--sidebar-title-divider-color, #ddd);
  margin-bottom: var(--gap-below-title, 24px);
  margin-top: 0px;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.sidebar-title .title-emojis { letter-spacing: var(--title-emoji-gap, -5px); }
.sidebar-search-dropdown {
  position: absolute;
  top: 38px;
  left: 0;
  right: 0;
  background: #fff;
  border: 1px solid #ccc;
  border-radius: 6px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.12);
  margin-top: 0;
  margin-bottom: 0px;
  z-index: var(--z-search-dropdown);
  max-height: 220px;
  overflow-y: auto;
  display: none;
}
.sidebar-search-dropdown.active {
  display: block;
}
.sidebar-search-dropdown .dropdown-item {
  padding: 8px 14px;
  cursor: pointer;
  font-size: 0.98em;
  border-bottom: 1px solid #eee;
}
.sidebar-search-dropdown .dropdown-item:last-child {
  border-bottom: none;
}
.sidebar-search-dropdown .dropdown-item:hover, .sidebar-search-dropdown .dropdown-item.active {
  background: #f0f4fa;
  color: #1976d2;
}
html, body, #map { height:100%; margin:0; }
/* Prevent horizontal scroll when sidebar is translated */
html, body { overflow-x: hidden; }
/* ==========================================================================
   CSS Custom Properties - Centralized Design System
   ========================================================================== 
   
   This file uses CSS custom properties (variables) to maintain consistency
   across the application. All design tokens are defined here and organized
   by category:
   
   - Responsive Breakpoints: Screen size breakpoints for responsive design
   - Layout & Spacing: Core layout dimensions and spacing values
   - Spacing System: Standardized spacing scale (xs, sm, md, lg, xl, xxl)
   - Shadow System: Consistent shadow values for depth and elevation
   - Touch & Interaction: Touch target sizes and interaction dimensions
   - Sidebar Components: Sidebar-specific sizing and spacing
   - Button System: Button sizing and icon dimensions
   - Color System: Color values for UI elements
   - Map Labels: Map label styling properties
   - App Overlays: Modal and overlay properties
   - Z-Index System: Layering system for proper stacking order
   
   Usage: Use these variables instead of hardcoded values for consistency.
   Example: box-shadow: var(--shadow-md); instead of box-shadow: 0 2px 8px rgba(0,0,0,0.2);
   ========================================================================== */
:root {
  /* ========== Responsive Breakpoints ========== */
  --mobile-small: 480px;
  --mobile-large: 768px;
  --tablet: 1024px;
  --desktop: 1200px;
  
  /* ========== Layout & Spacing ========== */
  --sidebar-width-mobile: 100vw;
  --sidebar-width-tablet: min(380px, 85vw);
  --sidebar-width-desktop: 380px;
  --sidebar-min-visible-tab: 44px;
  --gap-below-title: 0px;
  --active-list-top-gap: 8px;
  --sidebar-tools-vpad: 8px;
  
  /* ========== Spacing System ========== */
  --spacing-xs: 4px;
  --spacing-sm: 8px;
  --spacing-md: 12px;
  --spacing-lg: 16px;
  --spacing-xl: 20px;
  --spacing-xxl: 24px;
  
  /* ========== Shadow System ========== */
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.15);
  --shadow-md: 0 2px 8px rgba(0,0,0,0.2);
  --shadow-lg: 0 4px 20px rgba(0,0,0,0.15);
  --shadow-xl: 0 10px 30px rgba(0,0,0,0.25);
  
  /* ========== Touch & Interaction Targets ========== */
  --touch-target-min: 44px;
  --touch-target-small: 40px;
  --mouse-target-size: 34px;
  
  /* ========== Sidebar Components ========== */
  --sidebar-toggle-size: 34px; /* keep in sync with FAB framework */
  --sidebar-title-height: var(--sidebar-toggle-size);
  --sidebar-title-font-size: 18px;
  --sidebar-title-font-weight: 700;
  --sidebar-title-padding-x: 6px;
  --sidebar-title-divider-width: 2px;
  --sidebar-right-gap: 6px;
  --sidebar-right-pad-for-toggle: calc(var(--sidebar-toggle-size) + var(--sidebar-right-gap));
  
  /* ========== Button System ========== */
  --sidebar-button-emoji-size: 27px;
  --active-list-icon-size: 24px;
  --title-emoji-gap: -2px;
  
  /* ========== Color System ========== */
  --sidebar-title-color: #222;
  --sidebar-title-bg: #fff;
  --sidebar-title-divider-color: #ddd;
  
  /* Button background system with computed values */
  --sidebar-button-bg-base: #ffffff;
  --sidebar-button-darken-factor: 3%;
  --sidebar-button-hover-extra: 6%;
  --sidebar-button-bg: color-mix(in srgb,
    var(--sidebar-button-bg-base) calc(100% - var(--sidebar-button-darken-factor)),
    black var(--sidebar-button-darken-factor)
  );
  --sidebar-button-bg-hover: color-mix(in srgb,
    var(--sidebar-button-bg-base) calc(100% - calc(var(--sidebar-button-darken-factor) + var(--sidebar-button-hover-extra))),
    black calc(var(--sidebar-button-darken-factor) + var(--sidebar-button-hover-extra))
  );
  
  /* ========== Map Labels ========== */
  --label-bg: #fff;
  --label-color: #333;
  
  /* ========== App Overlays & Panels ========== */
  --app-overlay-bg: rgba(0,0,0,0.35);
  --app-panel-bg: #fff;
  --app-border: #ccc;
  
  /* ========== Z-Index System ========== */
  --z-sidebar: 1000;
  --z-fab: 2000;
  --z-overlay: 3000;
  --z-modal: 3001;
  --z-search-dropdown: 1100;
  --z-active-header: 10;
  --z-active-list-header: 5;
}
#layerMenu, .layer-menu {
  position: absolute;
  top: 10px;
  right: 10px;
  background: rgba(255,255,255,0.95);
  padding:  6px 16px;
  border-radius: 8px;
  z-index: var(--z-sidebar);
  font-family: sans-serif;
  max-height: 80vh;
  overflow-y: auto;
  box-shadow: var(--shadow-md);
  min-width: 260px;
  width: var(--sidebar-width-desktop);
  display: block;
  transition: transform .2s ease, opacity .2s ease;
}

/* Minimized state: slide panel off-screen leaving a tab visible */
.layer-menu.sidebar-minimized {
  transform: translateX(calc(100% - var(--sidebar-min-visible-tab)));
  opacity: 0.0; /* dim when minimized */
  pointer-events: none; /* disable mouse/touch interactions inside panel */
}

/* FAB (Floating Action Button) Base Classes */
.fab {
  position: fixed;
  z-index: var(--z-fab);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: var(--sidebar-button-bg, #f7f7f7);
  color: #333;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
  transition: all 0.2s ease;
}

.fab:hover {
  background: var(--sidebar-button-bg-hover, #f0f0f0);
  transform: scale(1.05);
}

.fab:active {
  transform: scale(0.98);
}

.fab-button {
  width: var(--sidebar-toggle-size, 34px);
  height: var(--sidebar-toggle-size, 34px);
  line-height: calc(var(--sidebar-toggle-size, 34px) - 4px);
  font-size: var(--sidebar-button-emoji-size, 18px);
  font-weight: 700;
}

.fab-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100%;
}

/* Legacy sidebar-toggle styles removed - replaced by FAB framework */

/* Inline tool buttons inside the sidebar (below title, above search) */
.sidebar-tools {
  display: flex;
  gap: 6px;
  padding-left: var(--sidebar-title-padding-x, 6px);
  padding-right: var(--sidebar-title-padding-x, 6px);
  padding-top: var(--sidebar-tools-vpad, 8px);
  padding-bottom: var(--sidebar-tools-vpad, 8px);
}
.sidebar-tool-btn {
  width: var(--sidebar-toggle-size, 34px);
  height: var(--sidebar-toggle-size, 34px);
  line-height: calc(var(--sidebar-toggle-size, 34px) - 4px);
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-size: var(--sidebar-button-emoji-size, 18px);
  font-weight: 700;
  border: 1px solid #ccc;
  border-radius: 6px;
  background: var(--sidebar-button-bg, #f7f7f7);
  color: #333;
  cursor: pointer;
  box-shadow: var(--shadow-sm);
}
.sidebar-tool-btn:hover { background: var(--sidebar-button-bg-hover, #f0f0f0); }
.sidebar-tool-btn:active { transform: scale(0.98); }
.layer-menu h4 {
  margin: 0;
  font-size: 1em;
  cursor: pointer;
  user-select: none;
  display: flex;
  align-items: center;
  background: #fff;
}
.category-header { font-weight: 600; }
.layer-menu h4:not(:first-child) {
  margin-top: 8px;
}
.collapsible-list {
  max-height: 30vh;
  overflow-y: auto;
  background: #fff;
  margin-bottom: 0px;
  border-radius: 0 0 8px 8px;
  padding-bottom: 0px;
}
#activeHeader {
  position: sticky;
  top: 0;
  z-index: var(--z-active-header);
  background: #fff;
}
.layer-menu label { display:block; margin:2px 0; font-size:0.95em; cursor:pointer; }
.layer-menu .group-controls { margin-bottom:8px; }
.layer-menu .divider { border-bottom:1px solid #ccc; margin:8px 0; }
.layer-menu .search-box {
  width:100%; margin-bottom:0; padding:2px 6px; font-size:0.95em;
  border:1px solid #ccc; border-radius:4px; box-sizing:border-box;
}
.collapse-arrow { display:inline-block; margin-right:6px; transition:transform .2s; font-size:1.3em; position: relative; top: -1px;}
.collapsed .collapse-arrow { transform:rotate(-90deg); }
.collapsed + .collapsible-list { display:none; }
.ses-unit-label {
  background:#fff; border:2px solid #cc7a00; border-radius:8px;
  padding:6px 14px; font-size:1em; font-weight:bold; color:#cc7a00;
  box-shadow:0 2px 8px rgba(255,153,0,0.15); position:relative;
}
.ses-unit-label:after {
  content:""; position:absolute; left:50%; bottom:-14px; transform:translateX(-50%);
  width:0; height:0; border-left:10px solid transparent; border-right:10px solid transparent;
  border-top:14px solid #cc7a00;
}
.leaflet-marker-icon.ses-unit-marker { background:transparent; border:none; }
.ambulance-emph { animation:amb-pulse 1.6s infinite; border-radius:50%; }
@keyframes amb-pulse {
  0% { box-shadow:0 0 0 0 rgba(211,47,47,0.55); }
  70% { box-shadow:0 0 0 14px rgba(211,47,47,0); }
  100% { box-shadow:0 0 0 0 rgba(211,47,47,0); }
}
/* Police emphasis ring */
.police-emph { animation:pol-pulse 1.6s infinite; border-radius:50%; }
@keyframes pol-pulse {
  0% { box-shadow:0 0 0 0 rgba(20,80,136,0.55); }
  70% { box-shadow:0 0 0 14px rgba(20,80,136,0); }
  100% { box-shadow:0 0 0 0 rgba(20,80,136,0); }
}
/* Legacy class for ambulance point labels: kept for compatibility; no visual impact */
.ambulance-name-label { pointer-events: auto; }
#activeList {
  /* Scrollable container for All Active items */
  max-height: 30vh;
  overflow-y: auto;
  background: #fff;
  /* Space above the 'Name' row for visual separation from the 'All Active' title */
  padding-top: var(--active-list-top-gap, 8px);
}

/* All Active: header row underline to separate header from items */
.active-list-header {
  /* Freeze header while the list scrolls */
  position: sticky;
  top: 0;
  z-index: var(--z-active-list-header);
  background: #fff;
}
.active-list-icon-header {
  font-size: 18px;
  line-height: 1;
}
.active-list-header::after {
  content: "";
  position: absolute;
  left: 28px;   /* slightly before "Name" column start (spacer is 32px) */
  right: 4px;   /* slightly after the last checkbox cell */
  bottom: -2px; /* small gap below header content */
  height: .5px;  /* match other horizontal lines */
  background: #ccc;
}

/* All Active: header cell for Name */
.active-list-name-header {
  font-weight: 750;
  font-size: 0.95rem;
  color: #222;
}

/* All Active: row Name cell */
.active-list-name {
  font-weight: 600;
  line-height: 1.2;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* Add styles for weatherBox bottom-left info box */
#weatherBox {
  font-family: Arial, sans-serif;
  font-size: 14px;
  transition: box-shadow 0.2s;
}
#weatherBox h3 {
  margin-top: 0;
  font-size: 16px;
}
#weatherBox ul {
  padding-left: 18px;
  margin-bottom: 12px;
}
#weatherBox li {
  margin-bottom: 4px;
}

/* Unified map label styling (polygons and points) */
.map-label {
  background: var(--label-bg, #fff);
  border: 2px solid var(--label-color, #333);
  border-radius: 8px;
  padding: 4px 12px;
  font-weight: bold;
  color: var(--label-color, #333);
  font-size: 1.2em;
  line-height: 1.2;
  text-align: center;
  display: inline-block;
  box-shadow: 0 2px 8px rgba(0,0,0,0.10);
  min-width: 60px;
  max-width: 480px;
  overflow-wrap: break-word;
  white-space: normal;
}
.map-label-wrapper.map-label--point .map-label {
  font-size: 0.95em;
  padding: 2px 8px;
  border-radius: 6px;
  box-shadow: 0 1px 4px rgba(0,0,0,0.15);
}

/* App overlays and panels (Info modal, Docs drawer) */
.app-overlay {
  position: fixed;
  inset: 0;
  background: var(--app-overlay-bg);
  z-index: var(--z-overlay);
}
.app-modal {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  z-index: var(--z-modal);
}
.app-modal[hidden], .app-overlay[hidden], .docs-drawer[hidden] { display: none !important; }
.app-modal-content {
  width: min(680px, 92vw);
  max-height: min(80vh, 720px);
  background: var(--app-panel-bg);
  border: 1px solid var(--app-border);
  border-radius: 10px;
  box-shadow: var(--shadow-xl);
  display: flex;
  flex-direction: column;
}
.app-modal-header {
  display: flex; align-items: center; justify-content: space-between;
  padding: 10px 14px; border-bottom: 1px solid var(--app-border);
}
.app-modal-title { margin: 0; font-size: 1.4rem; }
.app-modal-close { border:1px solid #ccc; background:#f7f7f7; border-radius:6px; cursor:pointer; padding:4px 8px; font-size: 1.1em; }
.app-modal-body { padding: 14px; overflow: auto; font-size: 1.1em; }

.docs-drawer {
  position: fixed; top: 0; right: 0; height: 100vh; width: min(920px, 92vw);
  background: var(--app-panel-bg); border-left: 1px solid var(--app-border);
  z-index: var(--z-modal); display: flex; flex-direction: column;
  box-shadow: -6px 0 24px var(--shadow-xl);
}
.docs-header { display:flex; align-items:center; justify-content:space-between; padding: 10px 14px; border-bottom:1px solid var(--app-border); font-size: 1.1em; }
.docs-close { border:1px solid #ccc; background:#f7f7f7; border-radius:6px; cursor:pointer; padding:4px 8px; font-size: 1.1em; }
.docs-body { display:flex; min-height: 0; flex: 1; }
.docs-toc { width: 240px; border-right:1px solid var(--app-border); padding: 12px; overflow:auto; font-size: 1.05em; }
.docs-toc ul { list-style:none; padding:0; margin:0; }
.docs-toc li { margin: 6px 0; }
.docs-toc a { color:#145088; text-decoration:none; }
.docs-toc a:hover { text-decoration:underline; }
.docs-content { flex:1; padding: 14px; overflow:auto; font-size: 1.1em; }

/* Legacy docs-fab CSS removed - now using unified .fab framework */

/* Legacy sidebar-fab CSS removed - now using unified .fab framework */

/* Documentation images - scale to content width */
.docs-content img {
  max-width: 100%;
  height: auto;
  display: block;
  margin: 16px 0;
  border-radius: 4px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.1);
}

/* Enhanced text readability for modal and documentation content */
.app-modal-body h1 { font-size: 1.6em; margin: 0.8em 0 0.5em 0; }
.app-modal-body h2 { font-size: 1.4em; margin: 0.8em 0 0.5em 0; }
.app-modal-body h3 { font-size: 1.25em; margin: 0.8em 0 0.5em 0; }
.app-modal-body h4 { font-size: 1.15em; margin: 0.8em 0 0.5em 0; }
.app-modal-body p { line-height: 1.6; margin: 0.8em 0; }
.app-modal-body ul, .app-modal-body ol { line-height: 1.6; margin: 0.8em 0; }
.app-modal-body li { margin: 0.3em 0; }

.docs-content h1 { font-size: 1.8em; margin: 1em 0 0.6em 0; }
.docs-content h2 { font-size: 1.5em; margin: 1em 0 0.6em 0; }
.docs-content h3 { font-size: 1.3em; margin: 1em 0 0.6em 0; }
.docs-content h4 { font-size: 1.2em; margin: 1em 0 0.6em 0; }
.docs-content p { line-height: 1.7; margin: 1em 0; }
.docs-content ul, .docs-content ol { line-height: 1.7; margin: 1em 0; }
.docs-content li { margin: 0.4em 0; }

@media (max-width: 720px) {
  .docs-body {
    flex-direction: column;
  }
  
  .docs-toc {
    width: 100%;
    border-right: none;
    border-bottom: 1px solid var(--app-border);
    max-height: 120px;
    overflow-y: auto;
    background: #f8f9fa;
  }
  
  .docs-toc-toggle {
    display: block;
    width: 100%;
    padding: 16px 20px;
    background: linear-gradient(135deg, #1976d2, #1565c0);
    color: white;
    border: none;
    border-bottom: 1px solid var(--app-border);
    cursor: pointer;
    font-size: 1.2em;
    font-weight: bold;
    text-align: left;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
    transition: all 0.2s ease;
    position: relative;
    overflow: hidden;
  }
  
  /* Subtle pulse animation to draw attention */
  .docs-toc-toggle.highlight {
    animation: gentlePulse 2s ease-in-out 3;
  }
  
  @keyframes gentlePulse {
    0%, 100% { 
      box-shadow: 0 2px 4px rgba(0,0,0,0.1); 
    }
    50% { 
      box-shadow: 0 4px 12px rgba(25, 118, 210, 0.4), 0 2px 4px rgba(0,0,0,0.1); 
    }
  }
  
  .docs-toc-toggle:hover {
    background: linear-gradient(135deg, #1565c0, #0d47a1);
    transform: translateY(-1px);
    box-shadow: 0 4px 8px rgba(0,0,0,0.15);
  }
  
  .docs-toc-toggle:active {
    transform: translateY(0);
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
  }
  
  .docs-toc-toggle::before {
    content: "� ";
    margin-right: 8px;
    font-size: 1.1em;
  }
  
  .docs-toc-toggle::after {
    content: " ▼ Tap to navigate";
    float: right;
    font-size: 0.9em;
    opacity: 0.9;
    transition: transform 0.2s;
  }
  
  .docs-toc.collapsed .docs-toc-toggle::after {
    content: " ▶ Tap to navigate";
    transform: none;
  }
  
  .docs-toc.collapsed ul {
    display: none;
  }
  
  .docs-toc ul {
    margin: 0;
    padding: 8px 12px;
  }
  
  .docs-toc li {
    margin: 8px 0;
  }
  
  .docs-toc a {
    display: block;
    padding: 8px 12px;
    background: white;
    border-radius: 4px;
    margin: 2px 0;
    border: 1px solid #dee2e6;
    position: relative;
  }
  
  .docs-toc a:hover {
    background: #e9ecef;
    text-decoration: none;
  }
  
  .docs-toc a.active {
    background: #1976d2;
    color: white;
    border-color: #1976d2;
  }
  
  .docs-toc a.active:hover {
    background: #1565c0;
  }
  
  /* Add a visual separator between navigation and content */
  .docs-toc::after {
    content: "";
    display: block;
    height: 8px;
    background: linear-gradient(to bottom, #e9ecef, transparent);
  }
  
  .docs-content {
    padding: 16px 12px;
  }
  
  /* Add mobile navigation hint */
  .docs-content .mobile-nav-hint {
    display: block;
    padding: 12px 16px;
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.95em;
    color: #1565c0;
    text-align: center;
    line-height: 1.4;
  }
  
  .docs-content::before {
    content: "💡 Tap the blue 'Documentation Pages' button above to navigate between topics";
    display: block;
    padding: 12px 16px;
    background: #e3f2fd;
    border: 1px solid #bbdefb;
    border-radius: 8px;
    margin-bottom: 20px;
    font-size: 0.95em;
    color: #1565c0;
    text-align: center;
    line-height: 1.4;
  }
  
  /* Better mobile reading experience */
  .docs-content h1:first-child,
  .docs-content h2:first-child,
  .docs-content h3:first-child {
    margin-top: 0;
  }
}

/* ==========================================================================
   Enhanced Mobile-First Responsive Design System
   ========================================================================== */

/* Small phones (up to 480px) - Full overlay sidebar */
@media (max-width: 480px) {
  .layer-menu {
    position: fixed;
    top: 0;
    right: 0;
    left: 0;
    width: var(--sidebar-width-mobile);
    height: 100vh;
    max-height: 100vh;
    border-radius: 0;
    padding: 8px 12px;
    transform: translateX(100%); /* Start hidden off-screen */
    opacity: 1;
    pointer-events: auto;
  }
  
  .layer-menu:not(.sidebar-minimized) {
    transform: translateX(0); /* Slide in when expanded */
  }
  
  .layer-menu.sidebar-minimized {
    transform: translateX(calc(100% - var(--sidebar-min-visible-tab)));
    opacity: 0.9;
  }
  
  /* Stack sidebar tools vertically on very small screens */
  .sidebar-tools {
    flex-direction: column;
    gap: 4px;
    align-items: stretch;
  }
  
  .sidebar-tool-btn {
    width: 100%;
    height: var(--touch-target-min);
    justify-content: flex-start;
    padding-left: 12px;
  }
  
  /* Legacy sidebar-toggle styles removed - replaced by FAB framework */
  
  /* Full-width modals on small screens */
  .app-modal-content {
    width: 95vw;
    max-height: 90vh;
    margin: 0 auto;
  }
  
  .app-modal-body {
    font-size: 1.2em;
  }
  
  .app-modal-body h1 { font-size: 1.8em; }
  .app-modal-body h2 { font-size: 1.6em; }
  .app-modal-body h3 { font-size: 1.4em; }
  .app-modal-body h4 { font-size: 1.25em; }
  
  /* Docs drawer takes full screen */
  .docs-drawer {
    width: 100vw;
    left: 0;
  }
  
  .docs-content {
    font-size: 1.2em;
  }
  
  .docs-content h1 { font-size: 2em; }
  .docs-content h2 { font-size: 1.7em; }
  .docs-content h3 { font-size: 1.5em; }
  .docs-content h4 { font-size: 1.3em; }
  
  .docs-toc {
    font-size: 1.1em;
  }
  
  /* Adjust map controls for mobile */
  #lastUpdated {
    left: 8px;
    bottom: 8px;
    font-size: 0.85em;
    padding: 2px 8px;
  }
}

/* Large phones and small tablets (481px to 768px) */
@media (min-width: 481px) and (max-width: 768px) {
  .layer-menu {
    width: var(--sidebar-width-tablet);
    max-width: 400px;
  }
  
  /* Legacy sidebar-toggle styles removed - replaced by FAB framework */
  
  .sidebar-tool-btn {
    width: var(--touch-target-small);
    height: var(--touch-target-small);
  }
  
  /* Landscape phone optimization */
  @media (orientation: landscape) and (max-height: 500px) {
    .layer-menu {
      max-height: 95vh;
      top: 2.5vh;
    }
    
    .collapsible-list {
      max-height: 25vh;
    }
    
    #activeList {
      max-height: 25vh;
    }
  }
}

/* Tablet range (769px to 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .layer-menu {
    width: var(--sidebar-width-tablet);
    max-width: 420px;
  }
  
  /* Tablet-specific adjustments */
  .sidebar-tools {
    gap: 8px;
  }
  
  .docs-drawer {
    width: min(85vw, 800px);
  }
}

/* Desktop and large screens (1025px+) */
@media (min-width: 1025px) {
  .layer-menu {
    width: var(--sidebar-width-desktop);
    max-width: 450px;
  }
  
  /* Desktop-specific enhancements */
  .sidebar-tools {
    gap: 8px;
  }
  
  /* Larger docs drawer on desktop */
  .docs-drawer {
    width: min(920px, 85vw);
  }
  
  /* Show hover effects only on desktop */
  .layer-menu h4:hover {
    background: #fafafa;
    border-radius: 4px;
    transition: background-color 0.15s ease;
  }
}

/* Progressive Web App / Native App Mode */
@media (display-mode: standalone) {
  .layer-menu {
    padding-top: max(8px, env(safe-area-inset-top, 0px));
    padding-bottom: max(8px, env(safe-area-inset-bottom, 0px));
  }
  
  /* Legacy sidebar-toggle styles removed - replaced by FAB framework */
  
  #lastUpdated {
    bottom: max(8px, calc(env(safe-area-inset-bottom, 0px) + 8px));
    left: max(12px, calc(env(safe-area-inset-left, 0px) + 12px));
  }
  
  /* Prevent overscroll bounce in native apps */
  body {
    overscroll-behavior: none;
  }
}

/* PWA-specific enhancements */
.pwa-mode {
  /* Native app optimizations */
  user-select: none;
  -webkit-user-select: none;
  -webkit-touch-callout: none;
  -webkit-tap-highlight-color: transparent;
}

.pwa-mode .layer-menu {
  /* More native-like appearance in PWA mode */
  background: rgba(255,255,255,0.98);
  backdrop-filter: blur(10px);
  -webkit-backdrop-filter: blur(10px);
}

/* Platform-specific optimizations */
.ios-device {
  /* iOS-specific styling */
  -webkit-overflow-scrolling: touch;
}

.ios-device .layer-menu {
  /* iOS native appearance */
  border-radius: 12px;
}

.android-device .layer-menu {
  /* Android Material Design appearance */
  border-radius: 8px;
  box-shadow: 0 4px 12px rgba(0,0,0,0.15);
}

/* Breakpoint-specific body classes for JavaScript coordination */
.breakpoint-mobile-small .layer-menu,
.breakpoint-mobile-large .layer-menu {
  /* Ensure mobile behavior */
  position: fixed;
}

.breakpoint-tablet .layer-menu,
.breakpoint-desktop .layer-menu {
  /* Ensure desktop behavior */
  position: absolute;
}

/* Advanced orientation handling */
@media (orientation: landscape) and (max-height: 500px) {
  /* Compact landscape mode for phones */
  .layer-menu {
    padding: 4px 8px;
  }
  
  .sidebar-title {
    font-size: 16px;
    height: 28px;
    line-height: 28px;
  }
  
  .sidebar-tools {
    padding-top: 4px;
    padding-bottom: 4px;
  }
  
  .collapsible-list,
  #activeList {
    max-height: 20vh;
  }
  
  /* Smaller buttons in compact mode */
  .sidebar-tool-btn {
    width: 32px;
    height: 32px;
    font-size: 16px;
  }
}

/* Device capability based styling */
@media (hover: none) {
  /* No hover capability - remove hover states */
  .sidebar-toggle:hover,
  .sidebar-tool-btn:hover,
  .layer-menu label:hover,
  .layer-menu h4:hover {
    transform: none;
    background: inherit;
  }
}

/* High DPI / Retina display optimizations */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  .layer-menu {
    /* Sharper borders on high DPI */
    border: 0.5px solid rgba(0,0,0,0.1);
  }
  
  .map-label {
    /* Crisper text rendering */
    -webkit-font-smoothing: antialiased;
    -moz-osx-font-smoothing: grayscale;
  }
}

/* ==========================================================================
   CSS Environment Queries - Enhanced Touch and Hover Optimizations
   ========================================================================== */

/* Touch-friendly optimizations for coarse pointer devices (touch screens) */
@media (pointer: coarse) {
  .sidebar-tool-btn {
    width: var(--touch-target-min);
    height: var(--touch-target-min);
    font-size: 20px;
  }
  
  /* Larger checkboxes for easier touch interaction */
  .layer-menu input[type="checkbox"] {
    width: 20px;
    height: 20px;
    margin-right: 8px;
  }
  
  /* Increased padding for touch-friendly list items */
  .layer-menu label {
    padding: 12px 8px;
    margin: 6px 0;
    border-radius: 4px;
    transition: background-color 0.1s ease;
  }
  
  .layer-menu label:active {
    background: #f0f0f0;
  }
  
  /* Larger search input for touch typing */
  .layer-menu .search-box {
    padding: 16px 12px;
    font-size: 16px; /* Prevents zoom on iOS */
    border-radius: 8px;
    min-height: var(--touch-target-min);
  }
  
  /* Touch-friendly dropdown items */
  .sidebar-search-dropdown .dropdown-item {
    padding: 16px 20px;
    font-size: 16px;
    min-height: var(--touch-target-min);
  }
  
  /* Increased collapsible header touch area */
  .layer-menu h4 {
    padding: 16px 12px;
    margin: 8px 0;
    border-radius: 6px;
    min-height: var(--touch-target-min);
  }
  
  .layer-menu h4:active {
    background: #f0f0f0;
  }
  
  /* Larger modal close buttons */
  .app-modal-close,
  .docs-close {
    padding: 12px 16px;
    font-size: 18px;
    min-width: var(--touch-target-min);
    min-height: var(--touch-target-min);
  }
  
  /* Touch-optimized active list controls */
  .active-list-header {
    padding: 12px 8px;
  }
  
  /* Larger weather box for touch interaction */
  #weatherBox {
    font-size: 16px;
    padding: 16px;
  }
  
  /* Touch-friendly scrollable areas */
  .collapsible-list,
  #activeList {
    padding: 8px 4px;
  }
}

/* Hover enhancements for fine pointer devices (mouse, trackpad) */
@media (hover: hover) and (pointer: fine) {
  .sidebar-tool-btn:hover {
    background: var(--sidebar-button-bg-hover, #f0f0f0);
    transform: translateY(-1px);
    box-shadow: 0 2px 6px rgba(0,0,0,0.2);
  }
  
  /* Hover effects for list items */
  .layer-menu label:hover {
    background: #f9f9f9;
    border-radius: 4px;
    transition: background-color 0.15s ease;
  }
  
  /* Search dropdown hover refinement */
  .sidebar-search-dropdown .dropdown-item:hover {
    background: #e3f2fd;
    color: #1565c0;
    transition: background-color 0.15s ease;
  }
  
  /* Collapsible header hover indication */
  .layer-menu h4:hover {
    background: #fafafa;
    border-radius: 4px;
    transition: background-color 0.15s ease;
  }
  
  /* Modal and docs hover improvements */
  .app-modal-close:hover,
  .docs-close:hover {
    background: #e0e0e0;
    transform: scale(1.05);
  }
  
  /* Documentation table of contents hover */
  .docs-toc a:hover {
    text-decoration: underline;
    color: #0d47a1;
    transition: color 0.15s ease;
  }
  
  /* Weather box hover interaction */
  #weatherBox:hover {
    box-shadow: 0 4px 12px rgba(0,0,0,0.15);
    transition: box-shadow 0.2s ease;
  }
  
  /* Map label hover effects */
  .map-label:hover {
    transform: scale(1.02);
    box-shadow: 0 3px 12px rgba(0,0,0,0.2);
    transition: transform 0.15s ease, box-shadow 0.15s ease;
  }
}

/* Hybrid device optimizations - devices that support both touch and hover */
@media (hover: hover) and (pointer: coarse) {
  /* Use touch-friendly sizes but enable hover effects */
  .sidebar-tool-btn {
    width: var(--touch-target-min);
    height: var(--touch-target-min);
  }
  
  .layer-menu .search-box {
    padding: 12px 8px;
    font-size: 16px;
  }
  
  /* Enable hover effects for hybrid devices */
  .sidebar-tool-btn:hover {
    background: var(--sidebar-button-bg-hover, #f0f0f0);
  }
}

/* Reduced motion preferences */
@media (prefers-reduced-motion: reduce) {
  .sidebar-tool-btn:hover,
  .app-modal-close:hover,
  .docs-close:hover,
  .map-label:hover {
    transform: none;
    transition: none;
  }
  
  .sidebar-search-dropdown .dropdown-item:hover,
  .layer-menu h4:hover,
  .docs-toc a:hover {
    transition: none;
  }
}

/* ==========================================================================
   Mobile Documentation Navigation - Hamburger Menu
   ========================================================================== */

@media (max-width: 720px) {
  /* Hide the original TOC on mobile when hamburger menu is active */
  .docs-toc {
    display: none !important;
  }
  
  /* Hamburger Menu Container */
  .docs-mobile-menu-container {
    position: relative;
    margin-bottom: 1rem;
    z-index: 1000;
  }
  
  /* Hamburger Button */
  .docs-hamburger-btn {
    background: linear-gradient(135deg, #2196F3, #1976D2);
    border: none;
    border-radius: 8px;
    padding: 12px;
    cursor: pointer;
    transition: all 0.3s ease;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    width: 48px;
    height: 48px;
    box-shadow: 0 2px 8px rgba(33, 150, 243, 0.3);
    float: left;
    margin-right: 1rem;
    margin-top: -8px;
  }
  
  .docs-hamburger-btn:hover {
    background: linear-gradient(135deg, #1976D2, #1565C0);
    box-shadow: 0 4px 12px rgba(33, 150, 243, 0.4);
    transform: translateY(-1px);
  }
  
  .docs-hamburger-btn:active {
    transform: translateY(0);
    box-shadow: 0 2px 6px rgba(33, 150, 243, 0.3);
  }
  
  /* Hamburger Lines */
  .hamburger-line {
    width: 20px;
    height: 2px;
    background-color: white;
    margin: 2px 0;
    transition: all 0.3s ease;
    border-radius: 1px;
  }
  
  /* Active state - hamburger to X */
  .docs-hamburger-btn.active .hamburger-line:nth-child(1) {
    transform: rotate(45deg) translate(5px, 5px);
  }
  
  .docs-hamburger-btn.active .hamburger-line:nth-child(2) {
    opacity: 0;
  }
  
  .docs-hamburger-btn.active .hamburger-line:nth-child(3) {
    transform: rotate(-45deg) translate(7px, -6px);
  }
  
  /* Dropdown Menu */
  .docs-dropdown-menu {
    position: absolute;
    top: 56px;
    left: 0;
    background: white;
    border-radius: 12px;
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
    border: 1px solid #E0E0E0;
    min-width: 280px;
    max-width: 90vw;
    z-index: 1001;
    animation: slideDown 0.3s ease;
    overflow: hidden;
  }
  
  .docs-dropdown-menu.hidden {
    display: none;
  }
  
  @keyframes slideDown {
    from {
      opacity: 0;
      transform: translateY(-10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Menu Header */
  .docs-menu-header {
    background: linear-gradient(135deg, #f8f9fa, #e9ecef);
    padding: 16px 20px;
    border-bottom: 1px solid #E0E0E0;
  }
  
  .docs-menu-header h3 {
    margin: 0;
    font-size: 1.1em;
    color: #333;
    font-weight: 600;
  }
  
  /* Menu Links Container */
  .docs-menu-links {
    max-height: 60vh;
    overflow-y: auto;
    padding: 8px 0;
  }
  
  /* Menu Link */
  .docs-menu-link {
    display: block;
    padding: 12px 20px;
    color: #333;
    text-decoration: none;
    transition: all 0.2s ease;
    border-bottom: 1px solid #f5f5f5;
    font-size: 1.1em;
  }
  
  .docs-menu-link:last-child {
    border-bottom: none;
  }
  
  .docs-menu-link:hover {
    background-color: #f8f9fa;
    color: #2196F3;
    transform: translateX(4px);
  }
  
  .docs-menu-link.active {
    background-color: #e3f2fd;
    color: #1976D2;
    font-weight: 600;
    border-left: 4px solid #2196F3;
  }
  
  .docs-menu-link:active {
    background-color: #bbdefb;
  }
  
  /* Adjust page title spacing when hamburger is present */
  .docs-mobile-menu-container + h1 {
    clear: both;
    margin-top: 1rem;
  }
}