/**** Framework7 Color Scheme - Gaia Theme ****/
/* Based on Gaia/Illuminum color palette */
:root {
  /* Primary: Illuminum Blue #2FACBC */
  --f7-ios-primary: #2FACBC;
  --f7-ios-primary-shade: #268A99;
  --f7-ios-primary-tint: #52BCC9;
  --f7-ios-primary-rgb: 47, 172, 188;
  --f7-md-primary-shade: #268A99;
  --f7-md-primary-tint: #52BCC9;
  --f7-md-primary-rgb: 47, 172, 188;
  --f7-md-primary: #2FACBC;
  --f7-md-on-primary: #ffffff;
  --f7-md-primary-container: #C8E9EE;
  --f7-md-on-primary-container: #0A3942;

  /* Secondary: Illuminum Yellow #F2AF29 */
  --f7-md-secondary: #F2AF29;
  --f7-md-on-secondary: #ffffff;
  --f7-md-secondary-container: #FBE5B8;
  --f7-md-on-secondary-container: #4D3709;

  /* Surfaces - Gaia Grays */
  --f7-md-surface: #F7F9FC;
  --f7-md-on-surface: #464F60;
  --f7-md-surface-variant: #E9EAF5;
  --f7-md-on-surface-variant: #708794;
  --f7-md-outline: #D3D3D3;
  --f7-md-outline-variant: #E5E7EB;
  --f7-md-inverse-surface: #374151;
  --f7-md-inverse-on-surface: #F7F9FC;
  --f7-md-inverse-primary: #52BCC9;

  /* Surface levels */
  --f7-md-surface-1: #F7F9FC;
  --f7-md-surface-2: #E9EAF5;
  --f7-md-surface-3: #D3D3D3;
  --f7-md-surface-4: #A1B8B8;
  --f7-md-surface-5: #6B7280;
  --f7-md-surface-variant-rgb: 233, 234, 245;
  --f7-md-on-surface-variant-rgb: 112, 135, 148;
  --f7-md-surface-1-rgb: 247, 249, 252;
  --f7-md-surface-2-rgb: 233, 234, 245;
  --f7-md-surface-3-rgb: 211, 211, 211;
  --f7-md-surface-4-rgb: 161, 184, 184;
  --f7-md-surface-5-rgb: 107, 114, 128;

  --swiper-theme-color: var(--f7-theme-color);
  --f7-color-primary: #2FACBC;
}

/* Dark mode - Gaia dark surfaces */
.dark {
  --f7-md-primary-shade: #52BCC9;
  --f7-md-primary-tint: #7FCDD7;
  --f7-md-primary-rgb: 82, 188, 201;
  --f7-md-primary: #52BCC9;
  --f7-md-on-primary: #0A3942;
  --f7-md-primary-container: #1A5F6B;
  --f7-md-on-primary-container: #C8E9EE;
  --f7-md-secondary: #F5C563;
  --f7-md-on-secondary: #4D3709;
  --f7-md-secondary-container: #F2AF29;
  --f7-md-on-secondary-container: #FBE5B8;
  --f7-md-surface: #2C3438;
  --f7-md-on-surface: #F7F9FC;
  --f7-md-surface-variant: #374151;
  --f7-md-on-surface-variant: #D3D3D3;
  --f7-md-outline: #708794;
  --f7-md-outline-variant: #6B7280;
  --f7-md-inverse-surface: #F7F9FC;
  --f7-md-inverse-on-surface: #374151;
  --f7-md-inverse-primary: #2FACBC;
  --f7-md-surface-1: #374151;
  --f7-md-surface-2: #464F60;
  --f7-md-surface-3: #6B7280;
  --f7-md-surface-4: #708794;
  --f7-md-surface-5: #A1B8B8;
  --f7-md-surface-variant-rgb: 55, 65, 81;
  --f7-md-on-surface-variant-rgb: 211, 211, 211;
  --f7-md-surface-1-rgb: 55, 65, 81;
  --f7-md-surface-2-rgb: 70, 79, 96;
  --f7-md-surface-3-rgb: 107, 114, 128;
  --f7-md-surface-4-rgb: 112, 135, 148;
  --f7-md-surface-5-rgb: 161, 184, 184;
}

.ios {
  --f7-theme-color: var(--f7-ios-primary);
  --f7-theme-color-rgb: var(--f7-ios-primary-rgb);
  --f7-theme-color-shade: var(--f7-ios-primary-shade);
  --f7-theme-color-tint: var(--f7-ios-primary-tint);
}

.md {
  --f7-theme-color: var(--f7-md-primary);
  --f7-theme-color-rgb: var(--f7-md-primary-rgb);
  --f7-theme-color-shade: var(--f7-md-primary-shade);
  --f7-theme-color-tint: var(--f7-md-primary-tint);
}

/* Color primary class */
.color-primary {
  --f7-ios-primary: #2FACBC;
  --f7-ios-primary-shade: #268A99;
  --f7-ios-primary-tint: #52BCC9;
  --f7-ios-primary-rgb: 47, 172, 188;
  --f7-md-primary-shade: #268A99;
  --f7-md-primary-tint: #52BCC9;
  --f7-md-primary-rgb: 47, 172, 188;
  --f7-md-primary: #2FACBC;
  --f7-md-on-primary: #ffffff;
  --f7-md-primary-container: #C8E9EE;
  --f7-md-on-primary-container: #0A3942;
  --f7-md-secondary: #F2AF29;
  --f7-md-on-secondary: #ffffff;
  --f7-md-secondary-container: #FBE5B8;
  --f7-md-on-secondary-container: #4D3709;
  --f7-md-surface: #F7F9FC;
  --f7-md-on-surface: #464F60;
  --f7-md-surface-variant: #E9EAF5;
  --f7-md-on-surface-variant: #708794;
  --f7-md-outline: #D3D3D3;
  --f7-md-outline-variant: #E5E7EB;
  --f7-md-inverse-surface: #374151;
  --f7-md-inverse-on-surface: #F7F9FC;
  --f7-md-inverse-primary: #52BCC9;
  --f7-md-surface-1: #F7F9FC;
  --f7-md-surface-2: #E9EAF5;
  --f7-md-surface-3: #D3D3D3;
  --f7-md-surface-4: #A1B8B8;
  --f7-md-surface-5: #6B7280;
  --f7-md-surface-variant-rgb: 233, 234, 245;
  --f7-md-on-surface-variant-rgb: 112, 135, 148;
  --f7-md-surface-1-rgb: 247, 249, 252;
  --f7-md-surface-2-rgb: 233, 234, 245;
  --f7-md-surface-3-rgb: 211, 211, 211;
  --f7-md-surface-4-rgb: 161, 184, 184;
  --f7-md-surface-5-rgb: 107, 114, 128;
  --swiper-theme-color: var(--f7-theme-color);
}

/* Color primary dark mode */
.color-primary.dark,
.color-primary .dark,
.dark .color-primary {
  --f7-md-primary-shade: #52BCC9;
  --f7-md-primary-tint: #7FCDD7;
  --f7-md-primary-rgb: 82, 188, 201;
  --f7-md-primary: #52BCC9;
  --f7-md-on-primary: #0A3942;
  --f7-md-primary-container: #1A5F6B;
  --f7-md-on-primary-container: #C8E9EE;
  --f7-md-secondary: #F5C563;
  --f7-md-on-secondary: #4D3709;
  --f7-md-secondary-container: #F2AF29;
  --f7-md-on-secondary-container: #FBE5B8;
  --f7-md-surface: #2C3438;
  --f7-md-on-surface: #F7F9FC;
  --f7-md-surface-variant: #374151;
  --f7-md-on-surface-variant: #D3D3D3;
  --f7-md-outline: #708794;
  --f7-md-outline-variant: #6B7280;
  --f7-md-inverse-surface: #F7F9FC;
  --f7-md-inverse-on-surface: #374151;
  --f7-md-inverse-primary: #2FACBC;
  --f7-md-surface-1: #374151;
  --f7-md-surface-2: #464F60;
  --f7-md-surface-3: #6B7280;
  --f7-md-surface-4: #708794;
  --f7-md-surface-5: #A1B8B8;
  --f7-md-surface-variant-rgb: 55, 65, 81;
  --f7-md-on-surface-variant-rgb: 211, 211, 211;
  --f7-md-surface-1-rgb: 55, 65, 81;
  --f7-md-surface-2-rgb: 70, 79, 96;
  --f7-md-surface-3-rgb: 107, 114, 128;
  --f7-md-surface-4-rgb: 112, 135, 148;
  --f7-md-surface-5-rgb: 161, 184, 184;
  --swiper-theme-color: var(--f7-theme-color);
}

.ios .color-primary,
.ios.color-primary {
  --f7-theme-color: var(--f7-ios-primary);
  --f7-theme-color-rgb: var(--f7-ios-primary-rgb);
  --f7-theme-color-shade: var(--f7-ios-primary-shade);
  --f7-theme-color-tint: var(--f7-ios-primary-tint);
}

.md .color-primary,
.md.color-primary {
  --f7-theme-color: var(--f7-md-primary);
  --f7-theme-color-rgb: var(--f7-md-primary-rgb);
  --f7-theme-color-shade: var(--f7-md-primary-shade);
  --f7-theme-color-tint: var(--f7-md-primary-tint);
}

/* Theme color utilities */
.text-color-primary {
  --f7-theme-color-text-color: #2FACBC;
}

.bg-color-primary {
  --f7-theme-color-bg-color: #2FACBC;
}

.border-color-primary {
  --f7-theme-color-border-color: #2FACBC;
}

.ripple-color-primary {
  --f7-theme-color-ripple-color: rgba(47, 172, 188, 0.3);
}

/**** iOS Safari/Chrome Compatibility Fixes ****/
/* iOS Chrome uses WebKit engine - these fixes address rendering issues */

/* Fix for iOS Safari/Chrome tap highlight */
* {
  -webkit-tap-highlight-color: transparent;
}

/* GPU acceleration for popups and overlays only (not the main map container) */
.leaflet-popup,
.leaflet-popup-pane {
  -webkit-transform: translate3d(0, 0, 0);
  transform: translate3d(0, 0, 0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}

/* iOS touch scrolling for map */
.leaflet-container {
  -webkit-overflow-scrolling: touch;
}

/**** Custom Mobile Styles ****/
/* Following CLAUDE.md conventions: Tailwind @apply syntax where possible */

/* Leaflet map mobile adjustments */
.leaflet-container {
  font-family: Inter, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
}

/* Mobile searchbar customization */
.searchbar-input-wrap {
  background: #F7F9FC !important;
  border: 1px solid #D3D3D3 !important;
  border-radius: 12px !important;
  height: 12px !important;
}

.searchbar-input-wrap input {
  font-family: Inter, sans-serif !important;
  color: #464F60 !important;
}

/* Mobile card spacing */
.card {
  margin: 8px 16px !important;
  border-radius: 12px !important;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
}

/* Mobile button styling */
.button {
  border-radius: 8px !important;
  font-family: Inter, sans-serif !important;
  font-weight: 500 !important;
  text-transform: none !important;
  width: 100% !important;
}

/* Mobile list items */
.list li {
  font-family: Inter, sans-serif !important;
}

.item-title {
  font-weight: 500 !important;
  color: #464F60 !important;
}

.item-subtitle {
  color: #708794 !important;
}

/* Mobile tabs */
.toolbar-bottom {
  background: #F7F9FC !important;
  border-top: 1px solid #E5E7EB !important;
}

.tab-link-active {
  color: #2FACBC !important;
}

/* Mobile navbar */
.navbar {
  background: #F7F9FC !important;
  border-bottom: 1px solid #E5E7EB !important;
}

/* Mobile panel - matching desktop sidebar (#374151 = gColBG3) */
.panel {
  background: #374151 !important;
}

.panel .panel-inner,
.panel .panel-content,
.panel .page-content {
  background: #374151 !important;
  height: 100% !important;
  padding: 0 !important;
}

/* Hide F7 panel navbar to show our custom content */
.panel .navbar,
.panel .navbar-inner,
.panel .view > .navbar {
  display: none !important;
}

/* Ensure panel content starts from top */
.panel .page {
  padding-top: 0 !important;
}

.panel .page-content {
  padding-top: env(safe-area-inset-top, 20px) !important;
}

/* Panel content container */
.gaia-panel-content {
  background: #374151;
  height: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

/* Logo section at top of panel */
.gaia-panel-logo {
  margin-bottom: 24px;
  padding-top: 16px;
  min-height: 64px;
}

.gaia-panel-logo img {
  height: 48px;
  display: block;
  max-width: 100%;
}

/* Navigation section */
.gaia-panel-nav {
  flex: 1;
}

/* Navigation button styling - matching desktop */
.gaia-nav-btn {
  display: flex;
  align-items: center;
  padding: 12px;
  margin-bottom: 8px;
  border-radius: 12px;
  background: #464F60;
  color: #F7F9FC;
  text-decoration: none;
  transition: background 0.2s;
}

.gaia-nav-btn:hover {
  background: #6B7280 !important;
}

.gaia-nav-btn i {
  font-size: 24px;
  width: 40px;
  color: #F7F9FC;
}

.gaia-nav-btn span {
  font-size: 18px;
  font-weight: 500;
}

/* External links section at bottom */
.gaia-panel-footer {
  border-top: 1px solid #6B7280;
  padding-top: 16px;
  margin-top: auto;
}

.gaia-panel-links {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}

.gaia-panel-links img {
  height: 32px;
}

.gaia-social-link {
  display: flex;
  align-items: center;
  color: white;
  text-decoration: none;
  font-size: 24px;
  padding-bottom: 9px;
}

.gaia-social-link:hover {
  color: #F7F9FC;
}

.gaia-panel-version {
  text-align: center;
  color: #708794;
  font-size: 12px;
}

/* Extended Search Bar - matching searchBar width */
.gaia-extended-search {
  display: none;
  margin-top: 8px;
  padding: 16px;
  background: #F7F9FC;
  border: 1px solid #E5E7EB;
  border-radius: 12px;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  max-width: 284px;
  /* Match searchBar max-width (220px + 64px wider) */
}

/* Small screens: extended search bar adapts to available width */
@media (max-width: 390px) {
  .gaia-extended-search {
    max-width: calc(100vw - 130px);
    /* 62px left + 68px right (12px gap + 44px locateMe button + 12px edge) */
  }
}

.gaia-extended-search.gaia-extended-search-visible {
  display: block;
}

.gaia-filter-row {
  margin-bottom: 12px;
}

.gaia-filter-row:last-child {
  margin-bottom: 0;
}

/* Style F7 selects in extended search - override F7 dark theme */
.gaia-extended-search .list,
.gaia-extended-search .list ul,
.gaia-extended-search .list li,
.gaia-extended-search .item-content,
.gaia-extended-search .item-inner,
.gaia-extended-search .gaia-filter-row {
  color: #374151 !important;
  background: inherit !important;
}

.gaia-extended-search .item-content {
  padding: 0 !important;
}

.gaia-extended-search .item-inner {
  padding: 4px 0 !important;
}

.gaia-extended-search .item-title.item-label {
  font-size: 13px !important;
  font-weight: 600 !important;
  color: #374151 !important;
  margin-bottom: 6px !important;
  width: 100% !important;
  line-height: 1.3 !important;
}

/* F7 list styling overrides */
.gaia-extended-search .list {
  margin: 0 !important;
}

.gaia-extended-search select,
.gaia-extended-search .input-wrap input,
.gaia-extended-search .smart-select .item-after {
  background: white !important;
  border: 1px solid #D3D3D3 !important;
  border-radius: 8px !important;
  padding: 12px 14px !important;
  font-size: 15px !important;
  color: #374151 !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
}

.gaia-extended-search select {
  width: 100% !important;
  -webkit-appearance: none !important;
  -moz-appearance: none !important;
  appearance: none !important;
  background-color: white !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='12' height='12' viewBox='0 0 12 12'%3E%3Cpath fill='%23374151' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
  background-repeat: no-repeat !important;
  background-position: right 12px center !important;
  padding-right: 32px !important;
}

/* Hide F7's default dropdown indicators in extended search */
/* The ::before pseudo-element creates a CSS triangle arrow using borders */
.gaia-extended-search .input-dropdown-wrap::before,
.gaia-extended-search .input-dropdown-wrap::after,
.gaia-extended-search .input-dropdown::after,
.gaia-extended-search .smart-select::after,
.gaia-extended-search .item-link .item-inner::after,
.gaia-extended-search .chevron-icon,
.gaia-extended-search i.icon-dropdown,
.gaia-extended-search .item-inner::after,
.gaia-extended-search select + .icon,
.gaia-extended-search select ~ .icon,
.gaia-extended-search select ~ i,
.gaia-extended-search .list .item-inner::after {
  display: none !important;
  border: none !important;
  content: none !important;
}

/* Mobile segment control */
.segmented {
  background: #E9EAF5 !important;
  border-radius: 8px !important;
}

.segmented-strong .button-active {
  background: #2FACBC !important;
  color: white !important;
}

/* DataTables mobile optimization */
.dataTables_wrapper {
  font-family: Inter, sans-serif !important;
  font-size: 14px !important;
}

table.dataTable {
  border-collapse: collapse !important;
}

table.dataTable thead th {
  background: #E9EAF5 !important;
  color: #464F60 !important;
  font-weight: 600 !important;
  padding: 12px 8px !important;
}

table.dataTable tbody td {
  padding: 8px !important;
  color: #464F60 !important;
}

table.dataTable tbody tr:hover {
  background: #F7F9FC !important;
}

/* DataTables Buttons - Mobile specific styling */
/* Hide 'More data' (colvis) button on mobile */
#mobileDataOverlay .btn.btn-info,
#mobileDataOverlay .buttons-colvis {
  display: none !important;
}

/* Style Download button for mobile */
#mobileDataOverlay .dt-buttons {
  display: flex !important;
  justify-content: flex-end !important;
  margin-bottom: 12px !important;
}

#mobileDataOverlay .btn.btn-primary {
  background: #F2AF29 !important;
  color: #2C3438 !important;
  border: none !important;
  border-radius: 10px !important;
  padding: 12px 20px !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
}

#mobileDataOverlay .btn.btn-primary:hover {
  background: #D99A1F !important;
}

/* Style Download dropdown menu */
/* Note: dt-button-collection is appended to body, so needs global styling */
.dt-button-collection {
  background: white !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 10px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  padding: 8px 0 !important;
  min-width: 150px !important;
  z-index: 99999 !important;  /* Very high z-index since it's appended to body */
  position: fixed !important;  /* Ensure it's positioned relative to viewport */
}

/* Dropdown background overlay */
.dt-button-background {
  z-index: 99998 !important;
}

#mobileDataOverlay .dt-button-collection .dt-button,
.dt-button-collection .dt-button {
  display: block !important;
  width: 100% !important;
  padding: 12px 20px !important;
  text-align: left !important;
  background: white !important;
  color: #464F60 !important;
  border: none !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
}

#mobileDataOverlay .dt-button-collection .dt-button:hover,
.dt-button-collection .dt-button:hover {
  background: #F7F9FC !important;
}

#mobileDataOverlay .dt-button-collection .dt-button span,
.dt-button-collection .dt-button span {
  color: #464F60 !important;
}

/** Toast Messages (SweetAlert2) - Mobile styling **/
/* Main toast container - using mobile color palette */
.swal2-popup {
  background: #464F60 !important;
  border-radius: 12px !important;
  border-left: 4px solid transparent !important;
  padding: 1.5rem !important;
  box-shadow: 0 4px 6px rgba(0, 0, 0, 0.3) !important;
  font-family: Inter, sans-serif !important;
  max-width: 90vw !important;
}

/* Toast title */
.swal2-title {
  color: #FFFFFF !important;
  font-family: Inter, sans-serif !important;
  font-size: 1.25rem !important;
  font-weight: 700 !important;
  margin-bottom: 0.5rem !important;
  padding: 0 !important;
}

/* Toast body text */
.swal2-html-container {
  color: #FFFFFF !important;
  font-family: Inter, sans-serif !important;
  font-size: 1rem !important;
  line-height: 2 !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide default SweetAlert2 icon */
.swal2-icon {
  display: none !important;
}

/* Type-specific border colors */
.swal2-popup.swal2-toast.swal2-show[class*="swal2-info"],
.swal2-popup[class*="swal2-info"] {
  border-left-color: #2FACBC !important;
}

.swal2-popup.swal2-toast.swal2-show[class*="swal2-success"],
.swal2-popup[class*="swal2-success"] {
  border-left-color: #10B981 !important;
}

.swal2-popup.swal2-toast.swal2-show[class*="swal2-warning"],
.swal2-popup[class*="swal2-warning"] {
  border-left-color: #FFD700 !important;
}

.swal2-popup.swal2-toast.swal2-show[class*="swal2-error"],
.swal2-popup[class*="swal2-error"] {
  border-left-color: #EF4444 !important;
}

/* Toast close button */
.swal2-close {
  color: #FFFFFF !important;
  font-size: 1.5rem !important;
  opacity: 0.8 !important;
}

.swal2-close:hover {
  color: #FFD700 !important;
  opacity: 1 !important;
}

/* Toast actions container */
.swal2-actions {
  margin-top: 1rem !important;
  padding: 0 !important;
}

/* Toast confirm/cancel buttons */
.swal2-styled.swal2-confirm {
  background: #FFD700 !important;
  color: #464F60 !important;
  border-radius: 8px !important;
  padding: 0.5rem 1rem !important;
  font-family: Inter, sans-serif !important;
  font-weight: 700 !important;
  border: none !important;
}

.swal2-styled.swal2-confirm:hover {
  background: #2FACBC !important;
  color: #FFFFFF !important;
}

.swal2-styled.swal2-cancel {
  background: #708794 !important;
  color: #FFFFFF !important;
  border-radius: 8px !important;
  padding: 0.5rem 1rem !important;
  font-family: Inter, sans-serif !important;
  font-weight: 700 !important;
  border: none !important;
}

.swal2-styled.swal2-cancel:hover {
  background: #D3D3D3 !important;
}

/* Toast timer progress bar - bright for high contrast */
.swal2-timer-progress-bar {
  background: rgba(255, 255, 255, 0.9) !important;
  height: 4px !important;
}

/* Timer progress bar container */
.swal2-timer-progress-bar-container {
  background: rgba(255, 255, 255, 0.2) !important;
}


/**** Full Screen Map Overrides (Harmonized UI) ****/
.framework7-root {
  height: 100% !important;
}

.page,
.page-content {
  height: 100% !important;
  padding-top: 0 !important;
  padding-bottom: 0 !important;
  overflow: hidden;
  /* Prevent scrolling on map view */
}

.full-screen-map {
  height: 100vh !important;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  /* Base level */
}

.mobile-floating-container {
  position: absolute;
  z-index: 11000;
  /* Above Map */
}

/* Colors */
:root {
  --gaia-yellow: #F2AF29;
  --gaia-gray-bg: #F7F9FC;
}

.bg-gaia-gray {
  background-color: var(--gaia-gray-bg) !important;
  color: #333;
}

.text-gaia-yellow {
  color: var(--gaia-yellow) !important;
}

.bg-gaia-yellow {
  background-color: var(--gaia-yellow) !important;
}

/* Search Bar Positioning */
.mobile-search-bar {
  top: 12px;
  left: 68px;
  /* Space for Menu Button (12px + 44px + 12px gap) */
  right: auto;
  /* Don't use right positioning - use max-width only */
  max-width: 284px;
  /* 220px + 64px wider */
}

/* Small screens (iPhone SE, smaller iPhones): use available width */
@media (max-width: 390px) {
  .mobile-search-bar {
    max-width: calc(100vw - 136px);
    /* 68px left + 68px right (12px gap + 44px locateMe button + 12px edge) */
  }
}

/* Menu Button Top-Left */
.mobile-menu-btn {
  top: 12px;
  left: 12px;
  width: 44px;
  height: 44px;
  background: white;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
}

/* Gaia Logo in Menu Button */
.mobile-menu-btn .gaia-menu-logo {
  width: 28px;
  height: 28px;
  object-fit: contain;
}

/* Right Action Buttons (top-right: map tools) */
.mobile-right-actions {
  top: 64px;
  /* Aligned with extended search bar top edge (12px + 44px + 8px) */
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Bottom-Right Action Buttons (search actions + console) */
.mobile-bottom-right-actions {
  position: absolute !important;
  bottom: 70px !important;  /* Lifted above scale bar and attribution */
  right: 12px !important;
  left: auto !important;
  top: auto !important;
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Bottom Actions (Data Toggle) - legacy */
.mobile-bottom-actions {
  bottom: 140px;
  right: 12px;
}

.mobile-action-btn {
  width: 44px;
  height: 44px;
  background: white !important;
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  transition: all 0.2s;
  overflow: hidden;
}

/* Remove F7 button styling artifacts */
.mobile-action-btn .button,
.mobile-action-btn button {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
}

/* Hide empty F7 button label that causes icon misalignment */
.mobile-action-btn .f7-button-label {
  display: none !important;
}

.mobile-action-btn.active-state,
.mobile-action-btn.btn-active {
  background-color: #F2AF29 !important;  /* iColYellow */
}

.mobile-action-btn.active-state .button,
.mobile-action-btn.active-state i,
.mobile-action-btn.btn-active .button,
.mobile-action-btn.btn-active i,
.mobile-action-btn.btn-active .btn-mobile-action {
  color: white !important;
}

/* Mobile Data View Loader */
.mobile-data-loader {
  display: flex;
  justify-content: center;
  align-items: center;
  padding: 60px 16px;
}

.mobile-data-loader.hidden {
  display: none;
}

.mobile-loader-content {
  text-align: center;
}

/* Mobile Search Row - matches menu button height (44px) */
.mobile-search-row {
  box-sizing: border-box !important;
  height: 44px !important;
  min-height: 44px !important;
  border: 1px solid #e5e7eb;
  border-radius: 22px !important;
  /* Full pill shape (half of height) */
  overflow: hidden;
  padding: 4px 4px 4px 0 !important;
}

/* Search input container - allow shrinking */
.mobile-search-row #foragerSearchBarClosed {
  flex: 1 1 auto !important;
  min-width: 60px !important;
  overflow: hidden !important;
}

/* Filter toggle and search buttons - prevent shrinking */
.mobile-search-row > div:nth-child(2),
.mobile-search-row > div:nth-child(3) {
  flex: 0 0 auto !important;
}

/* Filter toggle button in search row */
.mobile-search-row #toggleExtendedSearchBtn,
.mobile-search-row .button {
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  min-height: 36px !important;
  padding: 0 !important;
  border-radius: 8px !important;
}

/* Mobile Search Input Styles */
.mobile-search-input {
  flex: 1;
  min-width: 0;
  /* Allow shrinking below content size */
  overflow: hidden;
}

.mobile-search-input .form-group {
  margin-bottom: 0 !important;
}

.mobile-search-input textarea {
  width: 100% !important;
  min-height: 32px !important;
  max-height: 100px !important;
  /* Allow expansion up to 100px */
  border: none !important;
  background: transparent !important;
  padding: 6px 8px !important;
  font-size: 14px !important;
  line-height: 20px !important;
  resize: none !important;
  outline: none !important;
  box-shadow: none !important;
  overflow-y: auto !important;
}

.mobile-search-input textarea::placeholder {
  color: #9CA3AF;
}

.mobile-search-input textarea:focus {
  outline: none !important;
  box-shadow: none !important;
}

/* Mobile Species Filter - shown after search results */
.gaia-species-filter {
  margin-top: 8px;
  padding: 4px 12px;
  background: white;
  border-radius: 16px;
  /* Rounded corners */
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.1);
  border: 1px solid #e5e7eb;
  max-width: 284px;
  /* Match searchBar max-width (220px + 64px wider) */
  min-height: 44px;
  /* Minimum height matches locateMe button, grows with content */
  display: flex;
  align-items: center;
}

/* Small screens: species filter adapts to available width */
@media (max-width: 390px) {
  .gaia-species-filter {
    max-width: calc(100vw - 130px);
    /* 62px left + 68px right (12px gap + 44px locateMe button + 12px edge) */
  }
}

.gaia-species-filter .form-group {
  margin-bottom: 0 !important;
  width: 100% !important;
}

.gaia-species-filter select {
  width: 100% !important;
  padding: 8px 12px !important;
  font-size: 13px !important;
  border: none !important;
  border-radius: 12px !important;
  background-color: #F7F9FC !important;
  min-height: 36px !important;
  height: auto !important;
  color: #464F60 !important;
  white-space: normal !important;
  word-wrap: break-word !important;
}

.gaia-species-filter select:focus {
  outline: none !important;
  border-color: #2FACBC !important;
}

/* Mobile Search Button Styles */
.mobile-search-btn {
  display: flex;
  align-items: center;
  justify-content: center;
}

/* Ensure equal right margin for search and stop buttons */
#DivSearchBtn {
  margin-right: 8px !important;
}

#DivStopSearchBtn {
  margin-right: 10px !important;
}


.btn-mobile-search {
  background-color: #F2AF29 !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  width: 36px !important;
  height: 36px !important;
  min-width: 36px !important;
  padding: 0 !important;
  margin-right: 4px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

.btn-mobile-search:hover {
  background-color: #D99A1F !important;
}

.btn-mobile-search i {
  font-size: 14px !important;
  margin: 0 !important;
}

.btn-mobile-stop {
  background-color: #EF4444 !important;
  color: white !important;
  border: none !important;
  border-radius: 6px !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-mobile-stop i {
  font-size: 14px !important;
  margin: 0 !important;
}

.btn-mobile-clear {
  background-color: #6B7280 !important;
  color: white !important;
  border: none !important;
  border-radius: 6px !important;
  width: 36px !important;
  height: 36px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-mobile-clear i {
  font-size: 14px !important;
  margin: 0 !important;
}

/* Generic mobile action button (for actionButtons in action-btn containers) */
.btn-mobile-action {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
  width: 100% !important;
  height: 100% !important;
  padding: 0 !important;
  margin: 0 !important;
  color: #333 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

.btn-mobile-action:hover,
.btn-mobile-action:focus {
  background: transparent !important;
  box-shadow: none !important;
}

.btn-mobile-action i {
  font-size: 18px !important;
  margin: 0 !important;
}

/* Mobile close button for overlays */
.btn-mobile-close {
  background-color: #EF4444 !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 8px 16px !important;
  font-size: 14px !important;
}

.btn-mobile-close:hover {
  background-color: #DC2626 !important;
}

/* Icon-only close button for overlay headers */
.btn-mobile-close-icon {
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #E5E7EB;
  border: none;
  border-radius: 50%;
  color: #464F60;
  font-size: 16px;
  cursor: pointer;
  transition: background 0.2s;
}

.btn-mobile-close-icon:hover {
  background: #D3D3D3;
}

.mobile-console {
  bottom: 70px;  /* Aligned with toggle button bottom */
  left: 12px;
  right: 72px;
  background: rgba(30, 41, 59, 0.95);
  color: white;
  border-radius: 8px;
  padding: 8px 12px;
  font-size: 12px;
  font-family: monospace;
  max-height: 120px;
  overflow-y: auto;
  pointer-events: auto;
}

/* Mobile console header */
.mobile-console-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  padding-bottom: 4px;
  border-bottom: 1px solid rgba(255, 255, 255, 0.2);
}

.mobile-console-title {
  font-weight: bold;
  color: #94a3b8;
}

.mobile-console-close {
  font-size: 14px;
  color: #94a3b8;
  cursor: pointer;
}

.mobile-console-close:hover {
  color: white;
}

/* Mobile console rows - inherit from desktop styling */
.mobile-console .console-row {
  display: flex;
  align-items: center;
  padding: 2px 0;
  font-size: 11px;
  line-height: 1.3;
}

.mobile-console .console-icon {
  width: 16px;
  margin-right: 6px;
  flex-shrink: 0;
}

.mobile-console .console-icon i {
  font-size: 12px;
}

.mobile-console .console-text {
  flex: 1;
  color: white;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.mobile-console .console-timestamp {
  font-size: 10px;
  color: #708794;
  margin-left: 8px;
  flex-shrink: 0;
}

/* Console row type colors */
.mobile-console .console-row.info .console-icon i {
  color: #2FACBC;
}

.mobile-console .console-row.success .console-icon i {
  color: #10B981;
}

.mobile-console .console-row.warning .console-icon i {
  color: #FFD700;
}

.mobile-console .console-row.error .console-icon i {
  color: #EF4444;
}

.mobile-console .console-row.loading .console-icon i {
  color: #F2AF29;
}

.hidden {
  display: none;
}

/* Hide loading GIF in mobile searchBar */
#DivSearchingGif {
  display: none !important;
}

/* Image miniature markers - rounded corners */
.leaflet-marker-icon.marker-img-main,
.leaflet-marker-icon.marker-img-related {
  width: 72px !important;
  height: 72px !important;
  border-radius: 16px !important;
  object-fit: cover !important;
  z-index: 30 !important;
}

/* Yellow border for main species markers */
.leaflet-marker-icon.marker-img-main {
  border: 3px solid #F2AF29 !important;
}

/* Border for related species markers */
.leaflet-marker-icon.marker-img-related {
  border: 3px solid currentColor !important;
}

/* Collapsed image markers (when overlapping) - using iColYellow */
.collapsed-image-marker {
  background: transparent !important;
  border: none !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  width: 12px !important;
  height: 12px !important;
  margin: 0 !important;
  padding: 0 !important;
}

.collapsed-image-marker .circle-marker-inner {
  width: 12px !important;
  height: 12px !important;
  min-width: 12px !important;
  min-height: 12px !important;
  max-width: 12px !important;
  max-height: 12px !important;
  background-color: #F2AF29 !important;  /* iColYellow - matches main species marker border */
  border: 2px solid white !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.3) !important;
  box-sizing: border-box !important;
  aspect-ratio: 1 / 1 !important;
}

.collapsed-image-marker .circle-marker-inner:hover {
  width: 16px !important;
  height: 16px !important;
  min-width: 16px !important;
  min-height: 16px !important;
  max-width: 16px !important;
  max-height: 16px !important;
  box-shadow: 0 3px 6px rgba(0, 0, 0, 0.4) !important;
}

/* Mobile Account Styles */
.gaia-mobile-account {
  padding: 16px;
  background: #F7F9FC;
  min-height: 100%;
}

.gaia-account-header {
  display: flex;
  align-items: center;
  padding: 16px;
  background: white;
  border-radius: 12px;
  margin-bottom: 16px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

.gaia-account-avatar {
  margin-right: 16px;
}

.gaia-avatar-img {
  width: 64px;
  height: 64px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #E5E7EB;
}

.gaia-account-info {
  flex: 1;
}

.gaia-account-name {
  font-size: 20px;
  font-weight: 600;
  color: #464F60;
  margin: 0 0 4px 0;
}

.gaia-account-email {
  font-size: 14px;
  color: #708794;
  margin: 0 0 8px 0;
}

.gaia-account-badge {
  display: inline-block;
  padding: 4px 12px;
  background: #2FACBC;
  color: white;
  border-radius: 16px;
  font-size: 12px;
  font-weight: 500;
}

.gaia-plan-price {
  text-align: center;
  padding: 16px 0;
}

.gaia-plan-price .currency {
  font-size: 20px;
  color: #708794;
  vertical-align: top;
}

.gaia-plan-price .amount {
  font-size: 36px;
  font-weight: 700;
  color: #464F60;
}

.gaia-plan-price .period {
  font-size: 16px;
  color: #708794;
}

.gaia-current-plan {
  text-align: center;
  padding: 16px;
}

.gaia-current-plan h3 {
  font-size: 24px;
  font-weight: 600;
  color: #2FACBC;
  margin: 0 0 8px 0;
}

.gaia-searches-left {
  font-size: 14px;
  color: #708794;
  margin: 0;
}

.gaia-danger-zone {
  margin-top: 32px;
  padding: 16px;
  background: #FEF2F2;
  border-radius: 8px;
  border: 1px solid #FECACA;
}

/* Plan Card Styling - matching desktop colors */
.gaia-plan-card {
  margin-bottom: 12px;
}

/* Center all text in plan cards */
.gaia-plan-card .card-header,
.gaia-plan-card .card-content,
.gaia-plan-card .card-content p,
.gaia-plan-card .card-content-padding,
.gaia-plan-card .card-footer {
  text-align: center !important;
}

/* Free Plan - light grey background, dark text */
.gaia-plan-free .card,
.gaia-plan-free .card .card-content,
.gaia-plan-free .card .card-content-padding {
  background: #F7F9FC !important;
}

.gaia-plan-free .card-header,
.gaia-plan-free .card-content p,
.gaia-plan-free .gaia-plan-price .amount,
.gaia-plan-free .gaia-plan-price .period {
  color: #464F60 !important;
}

.gaia-plan-free .gaia-plan-price .currency {
  color: #708794 !important;
}

/* Day Pass & Week Pass - gColBG3 background, light text */
.gaia-plan-daypass .card,
.gaia-plan-daypass .card .card-content,
.gaia-plan-daypass .card .card-content-padding,
.gaia-plan-weekpass .card,
.gaia-plan-weekpass .card .card-content,
.gaia-plan-weekpass .card .card-content-padding {
  background: #374151 !important;
}

/* Day Pass & Week Pass text - light color for dark backgrounds */
.gaia-plan-daypass .card-header,
.gaia-plan-daypass .card-header *,
.gaia-plan-daypass .card-content p,
.gaia-plan-daypass .gaia-plan-price .amount,
.gaia-plan-daypass .gaia-plan-price .period,
.gaia-plan-daypass .gaia-plan-price .currency,
.gaia-plan-daypass .gaia-current-plan h3,
.gaia-plan-weekpass .card-header,
.gaia-plan-weekpass .card-header *,
.gaia-plan-weekpass .card-content p,
.gaia-plan-weekpass .gaia-plan-price .amount,
.gaia-plan-weekpass .gaia-plan-price .period,
.gaia-plan-weekpass .gaia-plan-price .currency,
.gaia-plan-weekpass .gaia-current-plan h3 {
  color: #F7F9FC !important;
}

/* Higher specificity for card headers on dark backgrounds */
.gaia-mobile-account .gaia-plan-daypass .card .card-header,
.gaia-mobile-account .gaia-plan-weekpass .card .card-header {
  color: #FFFFFF !important;
  font-weight: 600 !important;
}

/* Pro Subscription - darkest grey background, light grey text */
.gaia-plan-pro .card,
.gaia-plan-pro .card .card-content,
.gaia-plan-pro .card .card-content-padding {
  background: #2C3438 !important;
}

/* Pro card text - lighter grey on darkest background */
.gaia-plan-pro .card-header,
.gaia-plan-pro .card-header *,
.gaia-plan-pro .card-content p,
.gaia-plan-pro .gaia-plan-price .amount,
.gaia-plan-pro .gaia-plan-price .period,
.gaia-plan-pro .gaia-plan-price .currency,
.gaia-plan-pro .gaia-current-plan h3 {
  color: #E5E7EB !important;
}

/* Higher specificity for Pro card header */
.gaia-mobile-account .gaia-plan-pro .card .card-header {
  color: #F7F9FC !important;
  font-weight: 600 !important;
}

/* Plan card buttons - high contrast styling */
.gaia-plan-card .card-footer .button,
.gaia-plan-card .button-fill,
.gaia-mobile-account .gaia-plan-card .button {
  background: #F2AF29 !important;  /* iColYellow - high contrast on dark cards */
  color: #2C3438 !important;  /* Dark text for contrast */
  font-weight: 700 !important;
  font-size: 16px !important;
  padding: 14px 24px !important;
  border-radius: 10px !important;
  text-transform: none !important;
  letter-spacing: 0.3px !important;
}

.gaia-plan-card .card-footer .button:hover,
.gaia-plan-card .button-fill:hover,
.gaia-mobile-account .gaia-plan-card .button:hover {
  background: #D99A1F !important;
}

/* Plan button states - matching desktop behavior */
/* Active plan button - yellow background, non-interactive */
.gaia-btn-active .button,
.gaia-mobile-account .gaia-btn-active .button {
  background: #F2AF29 !important;  /* iColYellow */
  color: #2C3438 !important;
  cursor: default !important;
  pointer-events: none !important;
}

/* Disabled plan button - gray background, can't purchase */
.gaia-btn-disabled .button,
.gaia-mobile-account .gaia-btn-disabled .button {
  background: #9CA3AF !important;  /* Gray - can't purchase */
  color: #6B7280 !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  opacity: 0.7 !important;
}

/* Active plan card highlight */
.gaia-plan-active .card {
  border: 2px solid #F2AF29 !important;
}

/* Disabled plan card appearance */
.gaia-plan-disabled .card {
  opacity: 0.85 !important;
}

/* F7 Component Contrast Fixes for Account Page */
/* Card titles - ensure good contrast */
.gaia-mobile-account .card-header,
.gaia-mobile-account .card-content-padding .block-title {
  color: #464F60 !important;
  font-weight: 600 !important;
}

/* List item labels and values */
.gaia-mobile-account .item-title {
  color: #464F60 !important;
  font-weight: 500 !important;
}

.gaia-mobile-account .item-after {
  color: #1F2937 !important;  /* Dark gray for high contrast on white - WCAG AA compliant */
  font-weight: 500 !important;
}

.gaia-mobile-account .item-text {
  color: #1F2937 !important;  /* Dark gray for high contrast on white */
  font-weight: 400 !important;
}

/* Plan card anchor links - ensure proper styling */
.gaia-mobile-account .gaia-plan-link {
  text-decoration: none !important;
  display: block !important;
  width: 100% !important;
}

/* Block titles */
.gaia-mobile-account .block-title {
  color: #464F60 !important;
  font-weight: 600 !important;
  font-size: 14px !important;
}

/* Tab bar styling - use iColYellow for active indicator */
.gaia-mobile-account .toolbar {
  background: #F7F9FC !important;
  --f7-tabbar-link-active-color: #F2AF29 !important;
  --f7-tabbar-link-active-bg-color: #F2AF29 !important;
  --f7-tabbar-bg-color: #F7F9FC !important;
  --f7-segmented-strong-bg-color: #E9EAF5 !important;
  --f7-segmented-strong-button-active-bg-color: #F2AF29 !important;
}

.gaia-mobile-account .toolbar-inner {
  background: #F7F9FC !important;
  display: flex !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 12px !important;
  width: 100% !important;
  transform: none !important;
  transition: none !important;
}

.gaia-mobile-account .toolbar .tab-link {
  color: #708794 !important;
  min-width: 90px !important;  /* Fixed minimum width to prevent jumping */
  width: auto !important;
  flex: 0 0 auto !important;  /* Don't grow or shrink */
  padding: 10px 16px !important;
  margin: 0 !important;
  text-align: center !important;
  transform: none !important;
  transition: background-color 0.15s ease, color 0.15s ease !important;
}

.gaia-mobile-account .toolbar .tab-link-active {
  color: white !important;
  background: #F2AF29 !important;
  border-radius: 20px !important;
}

/* Override F7's tab-link-highlight (the sliding indicator) - use iColYellow */
.gaia-mobile-account .tab-link-highlight {
  background: #F2AF29 !important;
}

/* Override segmented button active state - use iColYellow */
.gaia-mobile-account .segmented-strong .button-active,
.gaia-mobile-account .segmented .button-active {
  background: #F2AF29 !important;
  color: white !important;
}

.gaia-mobile-account .segmented-strong-bg {
  background: #F2AF29 !important;
}

/* F7 Tabbar active button pill override - more specific selectors */
.gaia-mobile-account .tabbar .tab-link-active,
.gaia-mobile-account .tabbar-icons .tab-link-active,
.gaia-mobile-account .tabbar-scrollable .tab-link-active {
  background-color: #F2AF29 !important;
  color: white !important;
  border-radius: 20px !important;
}

/* Subnavbar for tabs - gray background */
.gaia-mobile-account .subnavbar,
.gaia-mobile-account .subnavbar-inner {
  background: #F7F9FC !important;
}

/* Override any brown/orange F7 default colors in account area */
.gaia-mobile-account .tabs-swipeable-wrap,
.gaia-mobile-account .tabs {
  background: #F7F9FC !important;
}

/* Fix tab container jumping on switch - disable transform animations */
.gaia-mobile-account .tabs-swipeable-wrap,
.gaia-mobile-account .tabs-swipeable-wrap .tabs {
  transform: none !important;
  transition: none !important;
  overflow: hidden !important;
}

.gaia-mobile-account .tabs .tab {
  position: relative !important;
  width: 100% !important;
  left: 0 !important;
  transform: none !important;
  flex-shrink: 0 !important;
}

.gaia-mobile-account .tabs .tab:not(.tab-active) {
  display: none !important;
  visibility: hidden !important;
}

.gaia-mobile-account .tabs .tab.tab-active {
  display: block !important;
  visibility: visible !important;
}

/* Stabilize toolbar tabs - prevent jumping */
.gaia-mobile-account .toolbar,
.gaia-mobile-account .toolbar-inner {
  position: relative !important;
  transform: none !important;
  transition: none !important;
}

/* Tab link transitions moved to main .tab-link rule above */

/* Disable F7 tab highlight sliding animation */
.gaia-mobile-account .tab-link-highlight {
  display: none !important;
}

/* Card backgrounds - default white, plan cards override below */
.gaia-mobile-account .card {
  border-radius: 12px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !important;
}

/* Default white background for non-plan cards */
.gaia-mobile-account .gaia-profile-container .card,
.gaia-mobile-account .gaia-settings-container .card {
  background: white !important;
}

/* Plan cards - re-apply with higher specificity to override defaults */
.gaia-mobile-account .gaia-plan-free .card {
  background: #F7F9FC !important;
}

.gaia-mobile-account .gaia-plan-daypass .card,
.gaia-mobile-account .gaia-plan-weekpass .card {
  background: #374151 !important;
}

.gaia-mobile-account .gaia-plan-pro .card {
  background: #2C3438 !important;
}

/* F7 Button text contrast */
.gaia-mobile-account .button-fill {
  color: white !important;
}

/* List backgrounds */
.gaia-mobile-account .list ul {
  background: white !important;
}

.gaia-mobile-account .item-content {
  background: transparent !important;
}

/**** Mobile Leaflet Popup Image Constraints ****/
/* Constrain popup images to fit within popup boundaries on mobile */
.leaflet-popup-content-wrapper {
  max-width: 284px !important;  /* Match searchBar max-width */
  width: auto !important;
  padding: 0 !important;
}

.leaflet-popup-content {
  max-width: 100% !important;
  overflow: hidden !important;
  margin: 0 !important;
}

/* Images in popups - full width, height scales with image proportions */
.leaflet-popup img {
  max-width: 100% !important;
  max-height: 50vh !important;  /* Allow tall images but cap at 50% viewport height */
  width: 100% !important;
  height: auto !important;
  object-fit: contain !important;  /* Preserve aspect ratio, fit within bounds */
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Scrollable container for popup images */
.scrollableContainer {
  max-width: 100% !important;
  overflow: hidden !important;
  padding: 0 !important;
  border-radius: 0 !important;
}

/* Image slide container */
.image-slide {
  max-width: 100% !important;
  overflow: hidden !important;
}

.image-slide img {
  max-width: calc(100% - 24px) !important;
  max-height: 40vh !important;  /* Allow taller images, cap at 40% viewport */
  width: auto !important;
  height: auto !important;
  object-fit: contain !important;
  border-radius: 8px !important;
  background: white !important;
  margin: 8px auto !important;
  padding: 4px !important;
}

/* Popup image container - no padding to touch map edges */
.popup-image-container {
  max-width: 100% !important;
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Popup table constraints - compact styling for mobile */
.popupTable {
  max-width: 100% !important;
  font-size: 13px !important;
  word-wrap: break-word !important;
  line-height: 1.15 !important;
  border-collapse: collapse !important;
  margin: 6px 8px !important;
}

.popupTable th,
.popupTable td {
  padding: 1px 4px !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  vertical-align: top !important;
}

.popupTable th {
  font-weight: 600 !important;
  color: #464F60 !important;
  white-space: nowrap !important;
  padding-left: 0 !important;
  width: auto !important;
}

.popupTable td {
  max-width: 180px !important;
  color: #708794 !important;
}

/* Compact popup content wrapper - minimal padding for images to touch edges */
.leaflet-popup-content {
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

/* Compact popup close button */
.leaflet-popup-close-button {
  padding: 4px 6px !important;
  font-size: 18px !important;
}

/**** Measure Tool Popup - add padding/margin (unlike species popups) ****/
.leaflet-measure-resultpopup > .leaflet-popup-content-wrapper {
  padding: 16px !important;
  text-align: center !important;
  max-width: 284px !important;  /* Match searchBar max-width */
  width: 284px !important;
}

.leaflet-measure-resultpopup .leaflet-popup-content {
  display: flex !important;
  flex-direction: column !important;
  width: 100% !important;
  text-align: center !important;
  margin: 0 !important;
}

.leaflet-measure-resultpopup .leaflet-popup-content > * {
  text-align: center !important;
  margin-left: auto !important;
  margin-right: auto !important;
}

/* Hide default Leaflet controls (except measure tool and scale bar) */
.leaflet-control-container .leaflet-top.leaflet-right,
.leaflet-control-container .leaflet-bottom.leaflet-left {
  display: none !important;
}

/* Show bottom-right for scale bar - position at very bottom edge */
.leaflet-control-container .leaflet-bottom.leaflet-right {
  display: block !important;
  bottom: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
}

/* Hide ALL controls in bottom-right except scale bar and attribution (mobile has its own floating buttons) */
.leaflet-control-container .leaflet-bottom.leaflet-right .leaflet-control {
  display: none !important;
}

/* Ensure scale bar and attribution are visible */
.leaflet-control-container .leaflet-bottom.leaflet-right .leaflet-control-scale,
.leaflet-control-container .leaflet-bottom.leaflet-right .leaflet-control-attribution {
  display: block !important;
}

/* Scale bar styling for mobile */
.leaflet-control-scale {
  margin-bottom: 0 !important;
}

.leaflet-control-scale-line {
  background: #2C3438 !important;
  color: #F7F9FC !important;
  border-color: #F7F9FC !important;
  text-align: center !important;
  font-size: 10px !important;
  padding: 2px 6px !important;
  margin-bottom: 0 !important;
}

.leaflet-control-scale-line:not(:first-child) {
  border-top: none !important;
  border-radius: 0 0 4px 4px !important;
}

.leaflet-control-scale-line:first-child {
  border-radius: 4px 4px 0 0 !important;
}

/* Keep top-left visible for measure control */
.leaflet-control-container .leaflet-top.leaflet-left {
  display: block !important;
  z-index: 10000 !important;
  pointer-events: auto !important;
}

/* Measure control - always in DOM, shown when active */
.leaflet-control-measure {
  background: white !important;
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.2) !important;
  margin-top: 70px !important;
  margin-left: 16px !important;
  width: calc(100vw - 32px) !important;  /* Full width minus margins */
  max-width: 284px !important;  /* Match searchBar max-width */
  z-index: 10000 !important;
}

/* Hide the toggle button visually but keep it functional */
/* Note: Using clip-path instead of opacity for iOS compatibility */
.leaflet-control-measure .leaflet-control-measure-toggle {
  width: 40px !important;
  height: 40px !important;
  opacity: 0.01 !important;  /* Near-zero but not 0 for iOS WebKit */
  -webkit-clip-path: inset(0) !important;
  clip-path: inset(0) !important;
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
}

/* Measure interaction panel */
.leaflet-control-measure .leaflet-control-measure-interaction {
  padding: 16px !important;
  font-size: 14px !important;
  background: white !important;
  border-radius: 12px !important;
  z-index: 10001 !important;
}

.leaflet-control-measure .tasks {
  padding: 12px 0 !important;
  font-size: 14px !important;
  color: #464F60 !important;
}

.leaflet-control-measure .tasks h3 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #464F60 !important;
  margin: 0 0 8px 0 !important;
}

.leaflet-control-measure .tasks p {
  font-size: 13px !important;
  color: #708794 !important;
  margin: 0 !important;
}

.leaflet-control-measure .results {
  padding: 12px !important;
  font-size: 14px !important;
  background: #F7F9FC !important;
  border-radius: 8px !important;
  margin-top: 8px !important;
  color: #464F60 !important;
}

.leaflet-control-measure a.start,
.leaflet-control-measure a.cancel,
.leaflet-control-measure a.finish {
  display: inline-block !important;
  padding: 10px 16px !important;
  margin: 4px !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  text-decoration: none !important;
  cursor: pointer !important;
}

.leaflet-control-measure a.start {
  background: #2FACBC !important;
  color: white !important;
}

.leaflet-control-measure a.cancel {
  background: #E5E7EB !important;
  color: #464F60 !important;
}

.leaflet-control-measure a.finish {
  background: #F2AF29 !important;
  color: white !important;
}

/* Attribution styling - match desktop */
.leaflet-control-attribution {
  display: block !important;
  font-size: 6px !important;
  background: #374151 !important;  /* gColBG3 */
  color: #F7F9FC !important;  /* gColGray1 */
  border-radius: 8px 0 0 8px !important;
  padding: 3px 6px 3px 10px !important;
}

.leaflet-control-attribution a {
  color: #2FACBC !important;  /* iColBlue */
}

/**** Mobile AI Assistant Slide-Up Sheet ****/
/* Backdrop */
.mobile-ai-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 11500;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.mobile-ai-backdrop.visible {
  opacity: 1;
}

/* Sheet container */
.mobile-ai-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 85vh;
  background: #F7F9FC;
  border-radius: 20px 20px 0 0;
  z-index: 11600;
  display: flex;
  flex-direction: column;
  transform: translateY(100%);
  transition: transform 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.15);
  will-change: transform;
}

.mobile-ai-sheet.visible {
  transform: translateY(0);
}

.mobile-ai-sheet.dragging {
  transition: none;
}

/* Drag handle */
.mobile-ai-sheet-handle {
  display: flex;
  justify-content: center;
  padding: 12px 0 8px 0;
  cursor: grab;
  touch-action: none;
}

.mobile-ai-sheet-handle:active {
  cursor: grabbing;
}

.mobile-ai-sheet-handle-bar {
  width: 40px;
  height: 4px;
  background: #D3D3D3;
  border-radius: 2px;
}

/* Header */
.mobile-ai-sheet-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0 16px 12px 16px;
  border-bottom: 1px solid #E5E7EB;
}

.mobile-ai-sheet-title {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 18px;
  font-weight: 600;
  color: #464F60;
}

.mobile-ai-sheet-title i {
  color: #2FACBC;
  font-size: 20px;
}

.mobile-ai-sheet-close {
  width: 32px;
  height: 32px;
  border: none;
  background: #E5E7EB;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6B7280;
  font-size: 14px;
  cursor: pointer;
}

.mobile-ai-sheet-close:hover {
  background: #D3D3D3;
}

/* Content area */
.mobile-ai-sheet-content {
  flex: 1;
  overflow-y: auto;
  padding: 16px;
  -webkit-overflow-scrolling: touch;
}

/* Loading state */
.mobile-ai-loading {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 16px;
}

.mobile-ai-spinner {
  width: 40px;
  height: 40px;
  border: 3px solid #E5E7EB;
  border-top-color: #2FACBC;
  border-radius: 50%;
  animation: spin 1s linear infinite;
}

@keyframes spin {
  to {
    transform: rotate(360deg);
  }
}

.mobile-ai-loading p {
  margin-top: 16px;
  color: #708794;
  font-size: 14px;
}

/* Chat messages - both mobile-ai-message and claudeMcpMessage (for restored history) */
.mobile-ai-chat-messages {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

.mobile-ai-message,
.claudeMcpMessage {
  padding: 12px;
  border-radius: 12px;
  font-size: 14px;
  line-height: 1.5;
}

.mobile-ai-message.assistant,
.claudeMcpMessage.assistant {
  background: white;
  border: 1px solid #E5E7EB;
  color: #464F60;
}

.mobile-ai-message.assistant h1,
.mobile-ai-message.assistant h2,
.mobile-ai-message.assistant h3,
.claudeMcpMessage.assistant h1,
.claudeMcpMessage.assistant h2,
.claudeMcpMessage.assistant h3 {
  color: #2FACBC;
  margin: 0 0 8px 0;
  font-weight: 600;
}

.mobile-ai-message.assistant h1,
.claudeMcpMessage.assistant h1 {
  font-size: 18px;
}

.mobile-ai-message.assistant h2,
.claudeMcpMessage.assistant h2 {
  font-size: 16px;
}

.mobile-ai-message.assistant h3,
.claudeMcpMessage.assistant h3 {
  font-size: 14px;
}

.mobile-ai-message.assistant p,
.claudeMcpMessage.assistant p {
  margin: 0 0 8px 0;
}

.mobile-ai-message.assistant ul,
.claudeMcpMessage.assistant ul {
  margin: 0 0 8px 0;
  padding-left: 20px;
}

.mobile-ai-message.assistant li,
.claudeMcpMessage.assistant li {
  margin-bottom: 4px;
}

.mobile-ai-message.user,
.claudeMcpMessage.user {
  background: rgba(47, 172, 188, 0.1);
  border: 1px solid rgba(47, 172, 188, 0.2);
  color: #464F60;
  margin-left: 24px;
}

/* Input area */
.mobile-ai-input-area {
  padding: 12px 16px;
  border-top: 1px solid #E5E7EB;
  background: white;
}

/* AI Toolbar - Model, Language, Word export */
.mobile-ai-toolbar {
  display: flex;
  gap: 8px;
  margin-bottom: 8px;
  align-items: center;
}

.mobile-ai-toolbar-select {
  flex: 1;
  padding: 8px 10px;
  border: 1px solid #D3D3D3;
  border-radius: 6px;
  background: #F7F9FC;
  color: #464F60;
  font-size: 13px;
  cursor: pointer;
}

.mobile-ai-toolbar-select:focus {
  outline: none;
  border-color: #2FACBC;
}

.mobile-ai-toolbar-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 12px;
  border: none;
  border-radius: 6px;
  background: #2FACBC;
  color: white;
  font-size: 13px;
  font-weight: 500;
  cursor: pointer;
  white-space: nowrap;
  margin-left: auto;  /* Push Word button to right */
  max-width: 72px;
}

.mobile-ai-toolbar-btn:hover {
  background: #268A99;
}

.mobile-ai-select {
  width: 100%;
  padding: 10px 12px;
  margin-bottom: 8px;
  border: 1px solid #D3D3D3;
  border-radius: 8px;
  background: #F7F9FC;
  color: #464F60;
  font-size: 14px;
  cursor: pointer;
}

.mobile-ai-input-row {
  display: flex;
  gap: 8px;
  align-items: flex-end;
  width: 100%;
}

.mobile-ai-textarea {
  flex: 1 1 auto;
  min-width: 0;  /* Allow flex item to shrink below content size */
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #D3D3D3;
  border-radius: 8px;
  background: white;
  color: #464F60;
  font-size: 14px;
  resize: none;
  min-height: 40px;
  max-height: 100px;
  font-family: Inter, sans-serif;
}

.mobile-ai-textarea:focus {
  outline: none;
  border-color: #2FACBC;
}

.mobile-ai-send-btn {
  width: 40px;
  height: 40px;
  border: none;
  background: #F2AF29;
  border-radius: 8px;
  color: white;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  flex-shrink: 0;
}

.mobile-ai-send-btn:hover {
  background: #D99A1F;
}

.mobile-ai-send-btn i {
  font-size: 14px;
}

/* Small screen responsive adjustments for AI Assistant */
@media (max-width: 400px) {
  .mobile-ai-toolbar {
    flex-wrap: wrap;
  }

  .mobile-ai-toolbar-select {
    flex: 1 1 calc(50% - 4px);
    min-width: 0;
    font-size: 12px;
    padding: 6px 8px;
  }

  .mobile-ai-toolbar-btn {
    flex: 0 0 auto;
    font-size: 12px;
    padding: 6px 10px;
  }

  .mobile-ai-select {
    font-size: 13px;
    padding: 8px 10px;
  }

  .mobile-ai-input-row {
    width: 100%;
  }

  .mobile-ai-textarea {
    width: 100%;
    min-width: 0;
    font-size: 13px;
  }
}

/**** Language Selection Sheet ****/
.mobile-language-backdrop {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 11000;
  opacity: 0;
  transition: opacity 0.3s ease;
  display: none;
}

.mobile-language-backdrop.visible {
  display: block;
  opacity: 1;
}

.mobile-language-sheet {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  height: 60vh;
  background: white;
  border-radius: 16px 16px 0 0;
  z-index: 11001;
  transform: translateY(100%);
  transition: transform 0.3s ease;
  display: none;
  flex-direction: column;
}

.mobile-language-sheet.visible {
  display: flex;
  transform: translateY(0);
}

.mobile-language-sheet.dragging {
  transition: none;
}

/* Hidden state - MUST come after main class to override */
.mobile-language-backdrop.hidden,
.mobile-language-sheet.hidden {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
}

.mobile-language-sheet-handle {
  display: flex;
  justify-content: center;
  padding: 12px 0 8px 0;
  cursor: grab;
}

.mobile-language-sheet-handle-bar {
  width: 40px;
  height: 4px;
  background: #D3D3D3;
  border-radius: 2px;
}

.mobile-language-sheet-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 0 16px 12px 16px;
  border-bottom: 1px solid #E5E7EB;
}

.mobile-language-sheet-close {
  width: 32px;
  height: 32px;
  border: none;
  background: #F3F4F6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #464F60;
}

.mobile-language-sheet-content {
  flex: 1;
  overflow-y: auto;
  padding: 8px 16px 16px 16px;
}

.mobile-language-list {
  display: flex;
  flex-direction: column;
  gap: 4px;
}

.mobile-language-item {
  width: 100%;
  padding: 14px 16px;
  border: none;
  background: #F7F9FC;
  border-radius: 8px;
  text-align: left;
  font-size: 16px;
  color: #464F60;
  cursor: pointer;
  transition: background 0.2s ease;
}

.mobile-language-item:hover,
.mobile-language-item:active {
  background: #E5E7EB;
}

.mobile-language-item.selected {
  background: #2FACBC;
  color: white;
}

/**** Map Popup Slideshow Navigation - compact for mobile ****/
.slideshow-nav {
  display: flex !important;
  flex-direction: row !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  margin: 8px 12px !important;  /* Added left/right margins */
}

/* Image source/attribution text - add left/right margins */
.leaflet-popup small,
.leaflet-popup-content small {
  display: block !important;
  margin: 4px 12px 8px 12px !important;
  color: #708794 !important;
  font-size: 11px !important;
  line-height: 1.4 !important;
}

.slideshow-nav button {
  padding: 4px 12px;
  border-radius: 6px;
  background: #374151;
  color: #F9FAFB;
  font-size: 0.875rem;
  font-weight: 600;
  cursor: pointer;
  transition: color 0.15s, background-color 0.15s;
  border: none;
  white-space: nowrap;
}

.slideshow-nav button:hover {
  background: #F2AF29;
  color: #464F60;
}

/* Image counter styling */
.slideshow-nav span,
.slideshow-nav .slide-counter {
  font-size: 0.875rem;
  color: #464F60;
  font-weight: 500;
  white-space: nowrap;
}

/**** Map Stability - prevent jumps on interaction ****/
/* Prevent map from auto-panning when opening popups */
.leaflet-popup {
  transition: none !important;
}

/* Prevent map panning during marker/image clicks */
.leaflet-container {
  scroll-behavior: auto !important;
}

/* Ensure popups don't trigger map recentering */
.leaflet-popup-content-wrapper,
.leaflet-popup-tip-container {
  pointer-events: auto !important;
}