@import url('https://fonts.googleapis.com/css2?family=Inter:wght@400;500;600;700&family=Roboto:wght@400;500;700&display=swap');

/**** 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: liquid glass (matching desktop side panel) ---- */
.panel {
  background: rgba(55, 65, 81, 0.78) !important;
  backdrop-filter: blur(24px);
  -webkit-backdrop-filter: blur(24px);
  z-index: 11000 !important;
}

.panel-backdrop {
  z-index: 10900 !important;
}

.panel .panel-inner,
.panel .panel-content,
.panel .page-content {
  background: transparent !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: transparent;
  height: 100%;
  padding: 16px;
  display: flex;
  flex-direction: column;
}

/* Logo section at top of panel */
.gaia-panel-logo {
  margin-bottom: 16px;
  padding-top: 12px;
  padding-left: 8px;
  min-height: 48px;
}

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

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

/* Navigation button — glass icon tile + label row */
.gaia-nav-btn {
  display: flex;
  align-items: center;
  padding: 6px;
  margin-bottom: 8px;
  border-radius: 16px;
  background: transparent;
  color: #F7F9FC;
  text-decoration: none !important;
  transition: background 0.2s ease;
}

.gaia-nav-btn:hover {
  background: rgba(255, 255, 255, 0.08) !important;
}

/* Icon inside nav button — glass tile */
.gaia-nav-btn i {
  width: 40px;
  height: 40px;
  min-width: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 10px;
  background: rgba(55, 65, 81, 0.45);
  backdrop-filter: blur(8px);
  -webkit-backdrop-filter: blur(8px);
  border: 1px solid rgba(255, 255, 255, 0.06);
  font-size: 1rem;
  color: #F7F9FC;
  transition: background 0.2s ease, box-shadow 0.2s ease, border-color 0.2s ease;
}

.gaia-nav-btn:hover i {
  background: rgba(75, 85, 99, 0.6);
  border-color: rgba(255, 255, 255, 0.12);
  box-shadow: 0 0 12px rgba(255, 255, 255, 0.06);
}

.gaia-nav-btn span {
  font-size: 0.9375rem;
  font-weight: 500;
  margin-left: 10px;
}

/* External links section at bottom */
.gaia-panel-footer {
  border-top: 1px solid rgba(255, 255, 255, 0.10);
  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: 28px;
  max-width: 120px;
}

.gaia-panel-links a {
  text-decoration: none !important;
}

.gaia-social-link {
  display: flex;
  align-items: center;
  color: #F7F9FC;
  text-decoration: none !important;
  font-size: 1.125rem;
  padding-bottom: 0;
  transition: color 0.2s ease;
}

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

.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;
}

/* Date range picker styling */
.gaia-date-range-row {
  display: flex;
  flex-direction: column;
}

.gaia-date-range-row .shiny-date-range-input {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
}

.gaia-date-range-row .shiny-date-range-input .form-group {
  margin-bottom: 0 !important;
}

.gaia-date-range-row .shiny-date-range-input input[type="text"] {
  background: white !important;
  border: 1px solid #D3D3D3 !important;
  border-radius: 8px !important;
  padding: 10px 12px !important;
  font-size: 14px !important;
  color: #374151 !important;
  min-height: 40px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  flex: 1;
}

.gaia-date-range-row .shiny-date-range-input .input-daterange {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 8px;
  width: 100%;
}

.gaia-date-range-row .shiny-date-range-input .input-daterange>input {
  flex: 1;
  min-width: 0;
}

.gaia-date-range-row .shiny-date-range-input .input-daterange>span {
  color: #708794;
  font-size: 14px;
  flex-shrink: 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,
.gaia-extended-search .control-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,
.gaia-extended-search input[type="text"] {
  background: white !important;
  border: 1px solid #D3D3D3 !important;
  border-radius: 8px !important;
  padding: 8px 14px !important;
  font-size: 15px !important;
  color: #374151 !important;
  min-height: 32px !important;
  box-sizing: border-box !important;
  width: 100% !important;
  display: block !important;
}

/* The Shiny form-group wrapping each input should also span the full row */
.gaia-extended-search .form-group,
.gaia-extended-search .shiny-input-container {
  width: 100% !important;
  margin: 0 !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;
}

/* Selectize (used by shiny::selectInput when selectize=TRUE) — mirror the
 * native <select> styling defined above and hide the stray typeahead
 * <input> that otherwise shows up as a white rectangle next to the
 * selected item in the dateRange / relationships dropdowns. */
.gaia-extended-search .selectize-control {
  width: 100% !important;
  margin: 0 !important;
}

.gaia-extended-search .selectize-control .selectize-input {
  background: white !important;
  border: 1px solid #D3D3D3 !important;
  border-radius: 8px !important;
  padding: 12px 36px 12px 14px !important;
  font-size: 15px !important;
  color: #374151 !important;
  min-height: 44px !important;
  box-sizing: border-box !important;
  display: flex !important;
  align-items: center !important;
  position: relative !important;
  box-shadow: none !important;
}

.gaia-extended-search .selectize-control .selectize-input .item {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

/* Collapse the typeahead input — these dropdowns are static lists, no search */
.gaia-extended-search .selectize-control .selectize-input > input {
  position: absolute !important;
  width: 1px !important;
  min-width: 0 !important;
  max-width: 1px !important;
  height: 1px !important;
  opacity: 0 !important;
  padding: 0 !important;
  margin: 0 !important;
  border: 0 !important;
  pointer-events: none !important;
}

/* Chevron arrow on the right of the selectize box */
.gaia-extended-search .selectize-control.single .selectize-input::after {
  content: '' !important;
  display: block !important;
  position: absolute !important;
  right: 14px !important;
  top: 50% !important;
  margin-top: -2px !important;
  width: 0 !important;
  height: 0 !important;
  border-left: 5px solid transparent !important;
  border-right: 5px solid transparent !important;
  border-top: 5px solid #374151 !important;
  pointer-events: none !important;
}

/* Selectize dropdown menu styling */
.gaia-extended-search .selectize-dropdown {
  background: white !important;
  border: 1px solid #D3D3D3 !important;
  border-radius: 8px !important;
  margin-top: 4px !important;
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08) !important;
}

.gaia-extended-search .selectize-dropdown .option {
  padding: 10px 14px !important;
  font-size: 15px !important;
  color: #374151 !important;
}

.gaia-extended-search .selectize-dropdown .option.active,
.gaia-extended-search .selectize-dropdown .option:hover {
  background: #F3F4F6 !important;
}

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

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

/* Mobile Data View - Card-based Interface Content Sizing */
/* Note: Old DataTables styles removed - now using card-based interface */
#mobileDataOverlay .shiny-html-output {
  width: 100% !important;
}

/* Global DataTables wrapper fallback */
.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 global styling (for any remaining tables) */
/* dt-button-collection is appended to body */
.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;
  position: fixed !important;
}

.dt-button-background {
  z-index: 99998 !important;
}

.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;
}

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

.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: clip;
  /* clip prevents visual overflow like hidden, but does NOT create a scroll
     container — so it won't capture touch scroll events from child overlays
     (gallery, account, data) that need their own scrolling. */
}

.full-screen-map {
  /* Use dynamic viewport height that respects browser chrome and iOS safe areas */
  height: 100vh !important;
  /* Fallback for older browsers */
  height: 100dvh !important;
  /* Dynamic viewport height - excludes browser UI */
  max-height: calc(100dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px)) !important;
  width: 100%;
  position: absolute;
  top: 0;
  left: 0;
  z-index: 0;
  /* Base level */
}

/* Leaflet pane z-index hierarchy (matching desktop) */
.leaflet-pane {
  pointer-events: none !important;
}

.leaflet-tile-pane {
  z-index: 200 !important;
  pointer-events: none !important;
}

.leaflet-overlay-pane {
  z-index: 400 !important;
  pointer-events: auto !important;
}

.leaflet-shadow-pane {
  z-index: 500 !important;
  pointer-events: auto !important;
}

.leaflet-marker-pane {
  z-index: 600 !important;
  pointer-events: auto !important;
}

/* Custom markers pane (defined in foragerLeaflet.R with zIndex 650) */
.leaflet-markers-pane {
  z-index: 650 !important;
  pointer-events: auto !important;
}

/* Image miniatures overlay pane (JS overlays above circle markers, below popups) */
.leaflet-imageMiniatures-pane {
  z-index: 690 !important;
  pointer-events: auto !important;
}

/* H3 hexagonal grid pane (above markers + image miniatures, below popups) */
.leaflet-h3grid-pane {
  z-index: 695 !important;
  pointer-events: auto !important;
}

.leaflet-popup-pane {
  z-index: 11500 !important;
  /* Above mobile floating containers (11000) to allow clicks on popup links */
  pointer-events: auto !important;
}

/* Leaflet control container - must be absolute for controls to position correctly */
.leaflet-control-container {
  position: absolute !important;
  top: 0 !important;
  left: 0 !important;
  right: 0 !important;
  bottom: 0 !important;
  z-index: 1000 !important;
  pointer-events: none !important;
}

.leaflet-control-container>* {
  pointer-events: auto !important;
}

/* Leaflet top-right control area - contains layer control */
.leaflet-top.leaflet-right {
  position: absolute !important;
  top: 0 !important;
  right: 0 !important;
  pointer-events: auto !important;
}

.mobile-floating-container {
  position: absolute;
  z-index: 11000;
  /* Above Map */
  pointer-events: none;
  /* Allow clicks to pass through to popups below */
}

.mobile-floating-container>* {
  pointer-events: auto;
  /* Re-enable clicks on actual buttons/controls */
}

/* 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;
}

/* Map/Data navigation pills — top-right, same row as search bar */
/* Hidden on small screens (phones); shown on tablets and larger */
.mobile-data-nav {
  top: 12px;
  /* Same vertical position as search bar */
  right: 12px;
  display: none;
  flex-direction: row;
  gap: 0;
}

@media (min-width: 768px) {
  .mobile-data-nav {
    display: flex;
  }
}

.mobile-nav-pill {
  height: 44px;
  padding: 0 16px;
  background: #F2AF29;
  /* iColYellow */
  color: white;
  border-radius: 22px;
  /* Full pill — rounded both sides */
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  cursor: pointer;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.15);
}

.mobile-nav-pill:active {
  opacity: 0.8;
}

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

/* Leaflet Layer Control - position below action buttons on mobile */
.leaflet-control-layers {
  position: relative !important;
  margin-top: 164px !important;
  /* Below action buttons (64px + 44px + 12px + 44px) */
  margin-right: 12px !important;
  z-index: 11001 !important;
  /* Above mobile floating containers (11000) */
}

.leaflet-control-layers-toggle {
  width: 44px !important;
  height: 44px !important;
  background-size: 24px 24px !important;
  background-color: white !important;
  border-radius: 8px !important;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2) !important;
}

.leaflet-control-layers-expanded {
  background: white !important;
  border-radius: 8px !important;
  padding: 8px 12px !important;
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.2) !important;
  z-index: 11002 !important;
  /* Expanded panel above toggle */
}

.leaflet-control-layers-base label {
  display: flex;
  align-items: center;
  padding: 6px 0;
  font-size: 14px;
  color: #464F60;
}

.leaflet-control-layers-base input[type="radio"] {
  margin-right: 8px;
  width: 16px;
  height: 16px;
}

/* Measure Tool Popup Menu */
.measure-popup-menu {
  position: absolute;
  bottom: 60px;
  /* Position above the measure button */
  right: 0;
  background: white;
  border-radius: 12px;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.2);
  padding: 8px 0;
  min-width: 160px;
  z-index: 10002;
}

.measure-popup-menu.hidden {
  display: none !important;
}

.measure-popup-option {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 20px;
  color: #464F60;
  font-size: 15px;
  font-weight: 500;
  cursor: pointer;
  transition: background 0.15s ease;
}

.measure-popup-option:hover {
  background: #F7F9FC;
}

.measure-popup-option:active {
  background: #E9EAF5;
}

.measure-popup-option i {
  font-size: 16px;
  width: 20px;
  text-align: center;
  color: #2FACBC;
}

.measure-popup-option.measure-popup-danger {
  color: #DC2626;
}

.measure-popup-option.measure-popup-danger i {
  color: #DC2626;
}

.measure-popup-option.measure-popup-danger:hover {
  background: #FEF2F2;
}

/* Bottom-Right Action Buttons (search actions + console) */
.mobile-bottom-right-actions {
  position: absolute !important;
  bottom: calc(env(safe-area-inset-bottom, 0px) + 70px) !important;
  /* Lifted above scale bar (~25px) + attribution (~15px) + gap (~30px) + safe area */
  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-color: white;
  /* NO !important to allow animation */
  border-radius: 8px;
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.2);
  display: flex;
  align-items: center;
  justify-content: center;
  color: #333;
  /* NO transition - let animation work freely */
  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;
}

/* Glow animation for first-time users - draws attention to AI button */
/* NOTE: Cannot use !important in keyframes - it invalidates the animation */
@keyframes claudeGlow {

  0%,
  100% {
    background-color: #F2AF29;
    /* iColYellow - START with yellow */
  }

  50% {
    background-color: white;
  }
}

/* Simple selector - matches original working code */
/* ID selector has higher specificity than .mobile-action-btn */
#DivClaudeMcpBtn.claude-btn-glow {
  animation: claudeGlow 2.5s ease-in-out infinite !important;
  /* Relies on .mobile-action-btn .button { background: transparent } for inner transparency */
}

/* 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 0 4px 0 !important;
  /* No right padding — buttons form the right cap of the pill */
}

/* 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;
  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;
}

/* Button wrappers — no margins, buttons are flush inside the pill */
#DivSearchBtn {
  margin-right: 0 !important;
}

#DivStopSearchBtn {
  margin-right: 0 !important;
}


/* searchBtn — right cap of the pill, matching chromiumUI half-circle */
.btn-mobile-search {
  background-color: #F2AF29 !important;
  /* iColYellow */
  color: #464F60 !important; /* gColDarkText */
  border: 2px solid #E5E7EB !important;
  border-radius: 0 22px 22px 0 !important;
  /* Right half-circle matching search row */
  box-sizing: border-box;
  width: 48px !important;
  height: 42px !important;
  /* Fill search row height (44px - 2px border) */
  min-width: 48px !important;
  padding: 0 !important;
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
}

.btn-mobile-search:hover {
  background-color: #2FACBC !important;
  /* iColBlue */
}

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

/* stopSearchBtn — right cap during search (loadingGif hidden on webkit) */
button#stopSearchBtn,
button#stopSearchBtn.btn,
button#stopSearchBtn.btn.btn-default,
.btn-mobile-stop {
  background-color: #F25C33 !important;
  /* iColRed */
  color: white !important;
  border: 2px solid #E5E7EB !important;
  border-radius: 0 22px 22px 0 !important;
  /* Right half-circle — rightmost visible button during search */
  box-sizing: border-box;
  width: 48px !important;
  height: 42px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

button#stopSearchBtn:hover,
.btn-mobile-stop:hover {
  background-color: #c9441f !important;
  color: white !important;
}

button#stopSearchBtn i,
.btn-mobile-stop i {
  font-size: 14px !important;
  margin: 0 !important;
  color: white !important;
}

button#stopSearchBtn:hover i,
.btn-mobile-stop:hover i {
  color: white !important;
}

/* Reset Bootstrap .btn base styles on clear button to prevent grey blob */
.mobile-search-row #DivClearBtn .btn.btn-default {
  background: white !important;
  border: 2px solid #E5E7EB !important;
  border-right: none !important;
  box-shadow: none !important;
  outline: none !important;
  padding: 0 !important;
  margin: 0 !important;
  min-width: 0 !important;
  min-height: 0 !important;
  line-height: 1 !important;
}

/* clearBtn — left half-circle with gray outline, mirrors searchBtn geometry */
.btn-mobile-clear {
  background-color: white !important;
  color: #464F60 !important;
  border: 2px solid #E5E7EB !important;
  border-right: none !important;
  /* No right border — flush against searchBtn */
  border-radius: 22px 0 0 22px !important;
  /* Left half-circle matching search row pill */
  width: 44px !important;
  height: 42px !important;
  padding: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  box-shadow: none !important;
  outline: none !important;
}

.btn-mobile-clear:hover {
  background-color: #F0F0F0 !important;
  color: #464F60 !important;
}

.btn-mobile-clear i {
  font-size: 21px !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;
  color: #464F60 !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: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(0, 0, 0, 0.25);
  border: none;
  border-radius: 50%;
  color: white;
  font-size: 18px;
  cursor: pointer;
  transition: background 0.2s;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.btn-mobile-close-icon:hover {
  background: rgba(0, 0, 0, 0.4);
}

/**** appConsole — styled to match chromiumUI ****/
.mobile-console {
  position: fixed !important; /* fixed so z-index competes at viewport level, above overlays */
  z-index: 11200 !important; /* above overlays (11100), below leaflet popups (11500) */
  bottom: calc(env(safe-area-inset-bottom, 0px) + 70px);
  left: 12px; /* Aligns with menu toggle left edge */
  right: auto;
  width: 340px; /* 12px (menu left) + 44px (menu) + 12px (gap) + 284px (searchBar) - 12px (left) */
  max-width: calc(100vw - 24px); /* 12px each side */
  background: #374151; /* gColBG3 — matches chromium */
  color: white;
  border-radius: 8px;
  padding: 0;
  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
  max-height: 180px;
  overflow-y: auto;
  pointer-events: auto;
  display: flex;
  flex-direction: column;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.3);
}

/* Console header — matches chromium .console-header */
.mobile-console-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  background: #708794; /* gColGray4 — matches chromium */
  color: #464F60; /* gColDarkText */
  font-family: sans-serif;
  font-size: 13px;
  font-weight: 700;
  border-radius: 8px 8px 0 0;
  padding: 0 12px;
  height: 32px;
  min-height: 32px;
  flex-shrink: 0;
}

.mobile-console-title {
  font-weight: 700;
  color: #F7F9FC; /* white for contrast against #708794 header background */
  font-family: sans-serif;
  font-size: 13px;
}

/* Console navigation buttons — matches chromium .console-nav-btn */
.mobile-console .console-nav-btn {
  background-color: #374151; /* gColBG3 */
  color: rgba(255, 255, 255, 0.8); /* gColWhiteText */
  font-family: sans-serif;
  font-size: 11px;
  font-weight: 500;
  padding: 2px 6px;
  border-radius: 6px;
  border: 2px solid transparent;
  cursor: pointer;
  transition: all 0.15s;
}

.mobile-console .console-nav-btn:hover:not(:disabled) {
  background-color: #F2AF29; /* iColYellow */
  color: #464F60; /* gColDarkText */
  border-color: #F2AF29;
}

.mobile-console .console-nav-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

/* Console rows — matches chromium .console-row */
.mobile-console .console-row {
  display: flex;
  align-items: center;
  gap: 8px;
  background: #374151; /* gColBG3 */
  height: 28px;
  color: rgba(255, 255, 255, 0.8);
  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
  padding: 0 12px;
  border-left: 3px solid transparent;
  font-size: 11px;
  line-height: 1.3;
}

/* Last row — rounded bottom like chromium */
.mobile-console .console-row:last-child {
  border-radius: 0 0 8px 8px;
}

/* Row states — colored left border matching chromium */
.mobile-console .console-row.info {
  border-left-color: #2FACBC; /* iColBlue */
}

.mobile-console .console-row.success {
  border-left-color: #4DA02D; /* iColGreen */
}

.mobile-console .console-row.warning,
.mobile-console .console-row.loading {
  border-left-color: #F2AF29; /* iColYellow */
}

.mobile-console .console-row.error {
  border-left-color: #F25C33; /* iColRed */
}

/* Console icon */
.mobile-console .console-icon {
  width: 14px;
  flex-shrink: 0;
}

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

/* Console text — matches chromium .console-text */
.mobile-console .console-text {
  flex: 1;
  color: rgba(255, 255, 255, 0.8); /* gColWhiteText */
  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
  font-size: 11px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

/* Console timestamp — matches chromium .console-timestamp */
.mobile-console .console-timestamp {
  font-size: 10px;
  color: #E9EAF5; /* gColGray2 — matches chromium */
  font-family: 'SF Mono', 'Menlo', 'Monaco', 'Courier New', monospace;
  margin-left: 8px;
  flex-shrink: 0;
}

/* Console row icon colors — match chromium state colors */
.mobile-console .console-row.info .console-icon i {
  color: #2FACBC; /* iColBlue */
}

.mobile-console .console-row.success .console-icon i {
  color: #4DA02D; /* iColGreen — matches chromium */
}

.mobile-console .console-row.warning .console-icon i {
  color: #F2AF29; /* iColYellow — matches chromium */
}

.mobile-console .console-row.error .console-icon i {
  color: #F25C33; /* iColRed — matches chromium */
}

.mobile-console .console-row.loading .console-icon i {
  color: #F2AF29; /* iColYellow — matches chromium */
}

/* Tailwind-like utility classes for mobile overlays */
/* Positioning */
.absolute {
  position: absolute;
}

.relative {
  position: relative;
}

.inset-0 {
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}

.right-4 {
  right: 16px;
}

.top-8 {
  top: 32px;
}

.-translate-y-1\/2 {
  transform: translateY(-50%);
}

/* Z-index — overlays must be above mobile-floating-container (11000) */
.z-\[10500\] {
  z-index: 11100;
}

/* Display */
.flex {
  display: flex;
}

.items-center {
  align-items: center;
}

.justify-center {
  justify-content: center;
}

.flex-col {
  flex-direction: column;
}

.flex-shrink-0 {
  flex-shrink: 0;
}

.flex-1 {
  flex: 1 1 0%;
}

.gap-2 {
  gap: 0.5rem;
}

.min-h-0 {
  min-height: 0;
}

.hidden {
  display: none;
}

/* Overflow */
.overflow-y-scroll {
  overflow-y: scroll;
}

.overflow-y-auto {
  overflow-y: auto;
}

/* Backgrounds */
.bg-white {
  background-color: white;
}

.bg-gColGray1 {
  background-color: #F7F9FC;
}

.bg-iColBlue {
  background-color: #2FACBC;
}

.bg-iColYellow {
  background-color: #F2AF29;
}

.bg-gColBG3 {
  background-color: #374151;
}

/* Borders */
.border-b {
  border-bottom-width: 1px;
  border-bottom-style: solid;
}

.border-gColBorder {
  border-color: #E5E7EB;
}

.border-none {
  border: none;
}

.rounded-\[10px\] {
  border-radius: 10px;
}

/* Sizing */
.min-h-\[56px\] {
  min-height: 56px;
}

.w-full {
  width: 100%;
}

.h-full {
  height: 100%;
}

.h-12 {
  height: 3rem;
}

.h-10 {
  height: 2.5rem;
}

/* Text sizing */
.text-2xl {
  font-size: 1.5rem;
  line-height: 2rem;
}

/* Transforms */
.scale-175 {
  transform: scale(1.75);
}

.scale-150 {
  transform: scale(1.5);
}

.scale-125 {
  transform: scale(1.25);
}

/* Colors */
.text-gColGrey3 {
  color: #708794;
}

.pl-1 {
  padding-left: 0.25rem;
}

/* Spacing - Padding */
.p-0 {
  padding: 0;
}

.p-4 {
  padding: 16px;
}

.py-2 {
  padding-top: 8px;
  padding-bottom: 8px;
}

.py-3 {
  padding-top: 12px;
  padding-bottom: 12px;
}

.py-3\.5 {
  padding-top: 14px;
  padding-bottom: 14px;
}

.py-4 {
  padding-top: 16px;
  padding-bottom: 16px;
}

.py-5 {
  padding-top: 20px;
  padding-bottom: 20px;
}

.px-4 {
  padding-left: 16px;
  padding-right: 16px;
}

.px-6 {
  padding-left: 24px;
  padding-right: 24px;
}

/* Spacing - Margin */
.m-0 {
  margin: 0;
}

.mt-0 {
  margin-top: 0;
}

.mt-2 {
  margin-top: 8px;
}

.mt-3 {
  margin-top: 12px;
}

.ml-2 {
  margin-left: 8px;
}

.mr-2 {
  margin-right: 8px;
}

/* Typography */
.text-white {
  color: white;
}

.text-gColDarkText {
  color: #464F60;
}

.text-gColGray4 {
  color: #708794;
}

.text-gColBorder {
  color: #E5E7EB;
}

.text-iColBlue {
  color: #2FACBC;
}

.text-xs {
  font-size: 12px;
}

.text-sm {
  font-size: 14px;
}

.text-\[15px\] {
  font-size: 15px;
}

.text-base {
  font-size: 16px;
}

.text-lg {
  font-size: 18px;
}

.text-\[32px\] {
  font-size: 32px;
}

.font-semibold {
  font-weight: 600;
}

.font-bold {
  font-weight: 700;
}

.leading-normal {
  line-height: 1.5;
}

.no-underline {
  text-decoration: none;
}

/* Cursor */
.cursor-pointer {
  cursor: pointer;
}

/* Block display */
.block {
  display: block;
}

/* Grow (flexbox) */
.grow {
  flex-grow: 1;
}

/* 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 {
  border-radius: 18px !important;
  object-fit: cover !important;
  cursor: pointer !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;
}

/* Voronoi overlay on leaflet map (points-only mode) */
.voronoi-overlay {
  transition: opacity 0.3s ease-in-out;
}

/* Mobile Account Styles - Light Editorial Design (Stitch) */
.gaia-mobile-account {
  padding: 0 16px;
  background: transparent;
  min-height: 100%;
  font-family: 'Inter', sans-serif;
}

/* ---- Account Header ---- */
.gaia-account-header {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 20px 20px 12px;
  margin-bottom: 8px;
}

.gaia-account-avatar {
  margin-bottom: 12px;
}

.gaia-avatar-img {
  width: 88px;
  height: 88px;
  border-radius: 50%;
  object-fit: cover;
  border: 3px solid #e3e2e7;
  box-shadow: 0 4px 16px rgba(45, 33, 122, 0.08);
}

.gaia-account-info {
  text-align: center;
}

.gaia-account-name {
  font-family: 'Inter', sans-serif;
  font-size: 22px;
  font-weight: 700;
  color: #2e2e32;
  margin: 0 0 4px 0;
}

.gaia-account-email {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  color: #5b5b5f;
  margin: 0 0 8px 0;
}

.gaia-account-badge {
  display: inline-flex;
  align-items: center;
  padding: 4px 14px;
  background: #584fa7;
  color: white;
  border-radius: 9999px;
  font-size: 13px;
  font-weight: 500;
}

/* ---- Plans Hero Section ---- */
.gaia-plans-hero {
  text-align: center;
  padding: 4px 0 24px;
}

.gaia-plans-hero-title {
  font-family: 'Inter', sans-serif;
  font-size: 28px;
  font-weight: 700;
  color: #2e2e32;
  margin: 0 0 8px;
  letter-spacing: -0.01em;
}

.gaia-plans-hero-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #5b5b5f;
  margin: 0;
  line-height: 1.5;
}

/* ---- Section Title ---- */
.gaia-section-title {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #5b5b5f;
  text-align: center;
  margin: 16px 0 8px;
}

/* ---- Plan Cards ---- */

.gaia-plans-row {
  display: flex;
  flex-direction: column;
  gap: 16px;
  margin-bottom: 16px;
}

.gaia-plans-row .gaia-plan-card {
  margin-bottom: 0;
}

@media (min-width: 600px) {
  .gaia-plans-row {
    flex-direction: row;
  }
  .gaia-plans-row .gaia-plan-card {
    flex: 1;
    min-width: 0;
  }
}

/* Consistent width for all account sections */
.gaia-account-header,
.gaia-account-tabbar,
.gaia-plans-container,
.gaia-profile-container,
.gaia-settings-container {
  max-width: 800px;
  margin-left: auto;
  margin-right: auto;
  box-sizing: border-box;
  width: 100%;
}

.gaia-plan-card {
  margin-bottom: 16px;
}

/* Base plan card */
.gaia-card {
  border-radius: 16px;
  padding: 24px;
  border: none;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.gaia-card-light {
  background: #ffffff;
}

/* Featured plan card (Pro) */
.gaia-plan-featured .gaia-card {
  border: 2px solid #584fa7;
  box-shadow: 0 4px 20px rgba(88, 79, 167, 0.1);
}

/* Card title row */
.gaia-card-title-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 4px;
}

.gaia-card-title {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 600;
  color: #2e2e32;
  margin: 0;
}

.gaia-text-dark {
  color: #2e2e32 !important;
}

.gaia-text-light {
  color: #2e2e32 !important;
}

/* Popular badge */
.gaia-popular-badge {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  padding: 4px 12px;
  background: #584fa7;
  color: white;
  border-radius: 9999px;
  font-size: 12px;
  font-weight: 600;
  letter-spacing: 0.02em;
  white-space: nowrap;
}

/* Balance badge (free searches left) */
.gaia-balance-badge {
  font-family: 'Inter', sans-serif;
  font-size: 12px;
  font-weight: 500;
  background: #f1f0f4;
  color: #5b5b5f;
  border-radius: 9999px;
  padding: 4px 12px;
}

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

.gaia-plan-price .currency {
  font-family: 'Inter', sans-serif;
  font-size: 20px;
  font-weight: 600;
  color: #5b5b5f;
  vertical-align: top;
  margin-right: 2px;
}

.gaia-plan-price .amount {
  font-family: 'Inter', sans-serif;
  font-size: 40px;
  font-weight: 800;
  color: #2e2e32;
  letter-spacing: -1px;
}

.gaia-plan-price .period {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #5b5b5f;
}

/* ---- Feature rows ---- */
.gaia-feature-row {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 8px 0;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #2e2e32;
}

.gaia-icon-green {
  color: #584fa7 !important;
  font-size: 18px;
  flex-shrink: 0;
}

.gaia-icon-gray {
  color: #adadb0 !important;
  font-size: 18px;
  flex-shrink: 0;
}

/* ---- Plan card buttons ---- */
.gaia-card-btn {
  margin-top: 20px;
}

.gaia-card-btn .button,
.gaia-plan-card .button {
  background: linear-gradient(135deg, #584fa7, #a69dfc) !important;
  color: white !important;
  border: none !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  padding: 14px 20px !important;
  border-radius: 9999px !important;
  text-transform: none !important;
  letter-spacing: 0.3px !important;
  width: 100% !important;
  text-align: center !important;
  display: flex !important;
  justify-content: center !important;
  box-shadow: 0 4px 12px rgba(88, 79, 167, 0.25) !important;
  transition: all 0.25s ease !important;
}

.gaia-card-btn .button:hover,
.gaia-plan-card .button:hover {
  background: linear-gradient(135deg, #4c439b, #9990ed) !important;
  box-shadow: 0 4px 16px rgba(88, 79, 167, 0.35) !important;
}

/* Active plan button */
.gaia-btn-active .button {
  background: linear-gradient(135deg, #F2AF29, #f7ca6e) !important;
  color: #2C3438 !important;
  cursor: default !important;
  pointer-events: none !important;
  box-shadow: 0 4px 12px rgba(242, 175, 41, 0.25) !important;
}

/* Default button (Free plan "Current Plan") */
.gaia-btn-default .button {
  background: #f1f0f4 !important;
  color: #5b5b5f !important;
  border: none !important;
  cursor: default !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

/* Disabled plan button */
.gaia-btn-disabled .button {
  background: #f1f0f4 !important;
  color: #adadb0 !important;
  border: none !important;
  cursor: not-allowed !important;
  pointer-events: none !important;
  box-shadow: none !important;
}

/* Active plan card highlight */
.gaia-plan-active .gaia-card {
  border: 2px solid #584fa7 !important;
  box-shadow: 0 4px 20px rgba(88, 79, 167, 0.1) !important;
}

/* Disabled plan card */
.gaia-plan-disabled .gaia-card {
  opacity: 0.7;
}

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

/* ---- Profile Avatar Section (centered, in profile tab) ---- */
.gaia-profile-avatar-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding: 8px 0 24px;
}

.gaia-profile-avatar-section .gaia-avatar-img {
  width: 96px;
  height: 96px;
  margin-bottom: 16px;
  border: 3px solid #e3e2e7;
  box-shadow: 0 4px 16px rgba(45, 33, 122, 0.08);
}

.gaia-profile-name {
  font-family: 'Inter', sans-serif;
  font-size: 24px;
  font-weight: 700;
  color: #2e2e32;
  margin: 0 0 4px;
}

.gaia-profile-subtitle {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 400;
  color: #5b5b5f;
  margin: 0;
  text-transform: uppercase;
  letter-spacing: 0.03em;
}

/* ---- Section Cards (Profile & Settings) ---- */
.gaia-section-card {
  background: #ffffff;
  border: none;
  border-radius: 16px;
  padding: 20px;
  margin-bottom: 16px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
}

.gaia-section-header {
  font-family: 'Inter', sans-serif;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  color: #5b5b5f;
  margin: 0 0 16px 0;
}

/* ---- Info Fields ---- */
.gaia-info-grid {
  display: flex;
  flex-direction: column;
  gap: 0;
}

.gaia-info-field {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 0;
  border-bottom: 1px solid #f1f0f4;
}

.gaia-info-field:last-child {
  border-bottom: none;
  padding-bottom: 0;
}

.gaia-field-label {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #2e2e32;
  margin: 0;
}

.gaia-field-value {
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 400;
  color: #5b5b5f;
  background: transparent;
  border-radius: 0;
  padding: 0;
  margin: 0;
  text-align: right;
}

/* ---- Legal Links ---- */
.gaia-legal-link {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 14px 0;
  color: #584fa7 !important;
  text-decoration: none !important;
  font-family: 'Inter', sans-serif;
  font-size: 15px;
  font-weight: 500;
  border-bottom: 1px solid #f1f0f4;
  border-radius: 0;
  transition: color 0.2s ease;
}

.gaia-legal-link:last-child {
  border-bottom: none;
}

.gaia-link-icon {
  font-size: 12px;
}

/* ---- Action Buttons ---- */
/* Edit Profile button (compact, inline with section header) */
.gaia-btn-edit-profile {
  display: inline-flex !important;
  align-items: center;
  gap: 6px;
  padding: 5px 12px !important;
  background: #2e2e32 !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 12px !important;
  cursor: pointer !important;
  white-space: nowrap;
  width: auto !important;
  flex-shrink: 0;
  transition: background 0.2s ease !important;
  -webkit-tap-highlight-color: transparent;
}

.gaia-btn-edit-profile:hover {
  background: #584fa7 !important;
}

.gaia-btn-edit {
  width: 100%;
  background: #374151 !important;
  color: #FFFFFFCC !important;
  border: none !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  padding: 12px 20px !important;
  border-radius: 12px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.gaia-btn-edit:hover {
  background: #464F60 !important;
  color: #FFFFFF !important;
}

/* Danger card (delete account) */
.gaia-section-card-danger {
  border: 1px solid #fecaca !important;
  background: #fef2f2 !important;
}

.gaia-btn-danger {
  display: inline-flex !important;
  align-items: center;
  gap: 8px;
  padding: 10px 20px !important;
  background: #dc2626 !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 14px !important;
  cursor: pointer !important;
  text-decoration: none !important;
  transition: background 0.2s ease !important;
}

.gaia-btn-danger:hover {
  background: #b91c1c !important;
}

.gaia-btn-logout {
  width: 100%;
  background: #584fa7 !important;
  color: white !important;
  border: none !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important;
  font-size: 15px !important;
  padding: 14px 20px !important;
  border-radius: 9999px !important;
  cursor: pointer !important;
  transition: all 0.2s ease !important;
}

.gaia-btn-logout:hover {
  background: #4c439b !important;
}

/* ---- Account Tab Bar ---- */
.gaia-account-tabbar {
  display: flex !important;
  justify-content: center !important;
  gap: 4px !important;
  padding: 4px !important;
  margin-bottom: 20px !important;
  background: #f1f0f4 !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow: none !important;
  backdrop-filter: none !important;
  -webkit-backdrop-filter: none !important;
}

.gaia-account-tab {
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  gap: 3px !important;
  flex: 1 !important;
  padding: 10px 12px !important;
  color: #5b5b5f !important;
  font-family: 'Inter', sans-serif !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  border-radius: 12px !important;
  user-select: none !important;
  -webkit-tap-highlight-color: transparent !important;
  outline: none !important;
  border: none !important;
  background: transparent !important;
  transition: all 0.2s ease !important;
}

.gaia-account-tab i,
.gaia-account-tab .fa,
.gaia-account-tab svg {
  font-size: 16px !important;
}

.gaia-account-tab-active {
  background: #584fa7 !important;
  color: white !important;
  box-shadow: 0 2px 8px rgba(88, 79, 167, 0.25) !important;
}

.gaia-account-tab:not(.gaia-account-tab-active):active {
  background: #e3e2e7 !important;
}

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

/* Account overlay background */
#mobileAccountOverlay {
  background: #f7f6fa !important;
}

/* ---- Overlay Header (Stitch editorial: menu | brand | close) ---- */
.gaia-overlay-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 16px;
  background: #f7f6fa;
  flex-shrink: 0;
  position: sticky;
  top: 0;
  z-index: 10;
}

.gaia-overlay-menu-btn,
.gaia-overlay-close-btn {
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: transparent;
  border: none;
  color: #2e2e32;
  font-size: 20px;
  cursor: pointer;
  border-radius: 10px;
  flex-shrink: 0;
  -webkit-tap-highlight-color: transparent;
}

.gaia-overlay-menu-btn:active,
.gaia-overlay-close-btn:active {
  background: #e3e2e7;
}

.gaia-overlay-brand {
  font-family: 'Kanit', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #2e2e32;
  letter-spacing: 0.02em;
}

/* Forager menu button — matches search bar height (44px) */
.gaia-forager-menu-btn {
  width: 44px;
  height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  background: #ffffff;
  border: none;
  border-radius: 12px;
  color: #2e2e32;
  font-size: 20px;
  cursor: pointer;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1), 0 1px 2px rgba(0, 0, 0, 0.06);
  -webkit-tap-highlight-color: transparent;
}

.gaia-forager-menu-btn:active {
  background: #f1f0f4;
}

/* Gallery/Nexus overlay backgrounds */
#mobileGalleryOverlay,
#mobileNexusOverlay {
  background: #f7f6fa !important;
}

/* F7 card overrides for remaining F7 usage */
.gaia-mobile-account .card {
  border-radius: 12px !important;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05) !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 Popups — styled to match chromiumUI ****/

/* Popup wrapper — rounded pill, gColGray1 background. Width matches the
 * desktop chromium popup (340 px) so mobile and desktop render the same
 * combined image + sound + table layout without wrapping. */
.leaflet-popup-content-wrapper {
  max-width: 340px !important;
  width: 340px !important;
  background: #F7F9FC !important; /* gColGray1 */
  border-radius: 20px !important;
  padding: 0 !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
}

.leaflet-popup-content {
  max-width: 100% !important;
  width: 100% !important; /* Override Leaflet's inline width to fill wrapper */
  overflow: hidden !important;
  margin: 0 !important;
  padding: 0 !important;
  line-height: 1.3 !important;
}

/* When popup content exceeds popupOptions(maxHeight) leaflet adds this class.
 * Default .leaflet-popup-content `overflow: hidden` otherwise clips anything
 * below the image + sound player (the table rows go missing). Re-enable
 * vertical scrolling and momentum scrolling on iOS. */
.leaflet-popup-content.leaflet-popup-scrolled {
  overflow-y: auto !important;
  overflow-x: hidden !important;
  -webkit-overflow-scrolling: touch !important;
}

/* Hide close button (matches chromium) */
.leaflet-container a.leaflet-popup-close-button {
  visibility: hidden !important;
  width: 0 !important;
  height: 0 !important;
  padding: 0 !important;
}

/* Popup tip (triangle) — match wrapper background */
.leaflet-popup-tip {
  background: #F7F9FC !important; /* gColGray1 */
  width: 16px !important;
  height: 16px !important;
}

/* Images in popups - full width, cropped to fill (no white gaps) */
.leaflet-popup img {
  max-width: 100% !important;
  max-height: 50vh !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Scrollable container for popup images — rounded top like chromium */
.scrollableContainer {
  max-width: 100% !important;
  width: 100% !important;
  overflow: hidden !important;
  padding: 12px 0 8px 0 !important;
  border-radius: 20px 20px 0 0 !important;
}

/* Image slideshow container */
.image-slideshow {
  width: 100% !important;
  border-radius: 20px 20px 0 0 !important;
  overflow: hidden !important;
}

.slideshow-container {
  position: relative !important;
  width: 100% !important;
}

/* Individual slides — hidden by default, JS shows active */
.image-slide {
  display: none !important;
  width: 100% !important;
  max-width: 100% !important;
  overflow: hidden !important;
}

.image-slide[style*="display: block"],
.image-slide[style*="display:block"] {
  display: block !important;
}

/* Slide images — full width, cropped to fill (no white gaps on sides) */
.image-slide img {
  max-width: 100% !important;
  max-height: 40vh !important;
  width: 100% !important;
  height: auto !important;
  object-fit: cover !important;
  border-radius: 20px 20px 0 0 !important;
  display: block !important;
  margin: 0 !important;
  padding: 0 !important;
}

/* Image attribution text */
.image-attribution {
  text-align: center !important;
  margin-top: 4px !important;
}

.image-slide small {
  display: block !important;
  text-align: center !important;
  font-size: 11px !important;
  color: #464F60 !important;
  margin: 2px 12px !important;
  line-height: 1.4 !important;
}

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

/* Hide marker via class — outranks any inline style Leaflet puts back on
 * pan/zoom so the sound filter stays applied. */
.gbif-sound-hidden {
  display: none !important;
  visibility: hidden !important;
  pointer-events: none !important;
}

/* Speaker-icon overlay pane — sits above the occurrence-marker pane (z=650). */
.leaflet-soundIconsPane-pane,
.leaflet-pane.leaflet-soundIconsPane-pane {
  z-index: 680 !important;
  pointer-events: none !important;
}
/* Belt-and-suspenders: high inline z-index on the speaker <img> keeps it
 * above any image miniature at the same GPS point regardless of pane. */
.gbif-speaker-icon {
  z-index: 10000 !important;
  pointer-events: none !important;
}

/* GBIF sound player — lazy-loaded beneath the image slideshow.
 * Uses wavesurfer.js: play button + scrubbable waveform + time readout. */
.gbif-sound-container {
  display: block !important;
  min-height: 36px !important;
}
.gbif-sound-loading {
  background: #F7F9FC !important;
  padding: 8px 12px !important;
  border-top: 1px solid #E5E9F2 !important;
  font-family: Inter, sans-serif !important;
  font-size: 12px !important;
  color: #464F60 !important;
  text-align: center !important;
}
.gbif-sound-player {
  background: #F7F9FC !important;
  padding: 8px 12px !important;
  border-top: 1px solid #E5E9F2 !important;
  display: block !important;
}
.gbif-sound-row {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
}
.gbif-sound-playbtn {
  flex: 0 0 auto !important;
  width: 32px !important;
  height: 32px !important;
  border-radius: 50% !important;
  border: none !important;
  background: #FFD54F !important;
  color: #222 !important;
  cursor: pointer !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  font-size: 13px !important;
  line-height: 1 !important;
}
.gbif-sound-playbtn:hover,
.gbif-sound-playbtn:active {
  background: #FFC107 !important;
}
.gbif-sound-wave {
  flex: 1 1 auto !important;
  min-width: 0 !important;
  height: 36px !important;
  cursor: pointer !important;
}
.gbif-sound-time {
  flex: 0 0 auto !important;
  font-family: Inter, sans-serif !important;
  font-size: 11px !important;
  color: #464F60 !important;
  min-width: 32px !important;
  text-align: right !important;
  font-variant-numeric: tabular-nums !important;
}
.gbif-sound-player audio {
  width: 100% !important;
  height: 36px !important;
  display: block !important;
}
.gbif-sound-attribution {
  text-align: center !important;
  font-family: Inter, sans-serif !important;
  color: #464F60 !important;
  margin-top: 4px !important;
  line-height: 1.4 !important;
}

/* Popup table — matches chromium style */
.popupTable {
  max-width: 100% !important;
  background: #F7F9FC !important; /* gColGray1 */
  font-size: 13px !important;
  font-family: sans-serif !important;
  word-wrap: break-word !important;
  line-height: 1.2 !important;
  border-collapse: collapse !important;
  padding: 0 12px !important;
  margin: 6px 0 !important;
}

.popupTable th,
.popupTable td {
  padding: 2px 8px !important;
  word-wrap: break-word !important;
  overflow-wrap: break-word !important;
  vertical-align: top !important;
  font-size: 13px !important;
  color: #464F60 !important; /* gColDarkText */
}

.popupTable th {
  font-weight: 600 !important;
  white-space: nowrap !important;
  padding-left: 12px !important;
  width: auto !important;
}

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

/* Hide last row (image link) — matches chromium */
.popupTable tr:last-child {
  display: none !important;
}

/* Ensure links in popup table are clickable */
.popupTable a,
.leaflet-popup a,
.leaflet-popup-content a {
  pointer-events: auto !important;
  cursor: pointer !important;
  color: #2FACBC !important; /* iColBlue */
  text-decoration: underline !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).
   Use visually-hidden pattern (NOT display:none) for .leaflet-top.leaflet-right
   because toggleMapLayer() programmatically clicks the layer control radio inputs.
   display:none removes elements from the rendering tree — WebKit/Safari ignores
   .click() on radio inputs inside display:none containers, so the satellite/admin
   layer toggle silently fails. */
.leaflet-control-container .leaflet-top.leaflet-right {
  position: absolute !important;
  clip: rect(0 0 0 0) !important;
  clip-path: inset(50%) !important;
  overflow: hidden !important;
  width: 1px !important;
  height: 1px !important;
  white-space: nowrap !important;
}

.leaflet-control-container .leaflet-bottom.leaflet-left {
  display: none !important;
}

/* Show bottom-right for scale bar - position at bottom edge with safe area */
.leaflet-control-container .leaflet-bottom.leaflet-right {
  display: block !important;
  bottom: 0 !important;
  right: 0 !important;
  z-index: 1000 !important;
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
  /* At bottom edge, respecting safe area only */
}

/* 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:not(.leaflet-control-scale):not(.leaflet-control-attribution) {
  display: none !important;
}

/* Ensure scale bar and attribution are visible with high specificity */
.leaflet-control-scale.leaflet-control {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !important;
}

.leaflet-control-attribution.leaflet-control {
  display: block !important;
  visibility: visible !important;
  opacity: 1 !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;
  pointer-events: none;
  transition: opacity 0.3s ease;
}

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

/* Sheet container — light editorial */
.mobile-ai-sheet {
  position: fixed;
  left: 0;
  right: 0;
  bottom: 0;
  height: 80vh;
  /* Fallback for older browsers */
  height: 80dvh;
  /* Dynamic viewport - respects browser UI */
  max-height: calc(80dvh - env(safe-area-inset-top, 0px) - env(safe-area-inset-bottom, 0px));
  /* Respect safe areas */
  background: #f7f6fa;
  border-radius: 16px 16px 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 24px rgba(45, 33, 122, 0.1);
  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: #adadb0;
  border-radius: 2px;
}

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

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

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

.mobile-ai-sheet-close {
  width: 36px;
  height: 36px;
  border: none;
  background: #f1f0f4;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #6B7280;
  font-size: 16px;
  flex-shrink: 0;
  cursor: pointer;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

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

/** H3 Resolution Slider (inside KPI sheet header) **/
.h3-slider-container {
  flex: 1;
  justify-content: center;
}

.h3-res-slider {
  direction: rtl;
  width: 120px;
  height: 6px;
  cursor: pointer;
  accent-color: #2FACBC;
  -webkit-appearance: auto;
  appearance: auto;
}

/* H3 cell polygon hover effect */
.h3-cell {
  transition: fill-opacity 0.15s ease;
  cursor: pointer;
}

.h3-cell:hover {
  fill-opacity: 0.5 !important;
  stroke-width: 2.5 !important;
}

/* H3 KPI popup — override global 284px species-popup constraints */
.h3-kpi-popup .leaflet-popup-content-wrapper {
  border-radius: 16px !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1) !important;
  width: 400px !important;
  max-width: 90vw !important;
}

.h3-kpi-popup .leaflet-popup-content {
  width: auto !important;
  max-width: none !important;
  overflow-x: hidden !important;
  overflow-y: auto;
  margin: 0 !important;
  padding: 8px 12px !important;
  box-sizing: border-box !important;
  line-height: 1.4 !important;
  max-height: 60vh;
  overscroll-behavior: contain;
}

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

/**** KPI sheet content — match chromium styling at mobile scale ****/

/* Base colors — light editorial */
.mobile-ai-sheet-content #kpiModalContent,
.mobile-ai-sheet-content #nexusKpiModalContent {
  color: #2e2e32;
  font-family: 'Inter', sans-serif;
  padding: 12px 16px;
}

/* Hero numbers */
.mobile-ai-sheet-content #kpiModalContent .text-4xl,
.mobile-ai-sheet-content #nexusKpiModalContent .text-4xl {
  font-size: 24px !important;
  line-height: 1.2 !important;
  font-weight: 700 !important;
  color: #2FACBC !important;
}

/* Section headers, labels, values */
.mobile-ai-sheet-content #kpiModalContent .text-2xl,
.mobile-ai-sheet-content #nexusKpiModalContent .text-2xl {
  font-size: 14px !important;
  line-height: 1.4 !important;
  color: #2e2e32 !important;
}

/* Footnotes, interpretations */
.mobile-ai-sheet-content #kpiModalContent .text-xl,
.mobile-ai-sheet-content #nexusKpiModalContent .text-xl {
  font-size: 12px !important;
  line-height: 1.4 !important;
  color: #5b5b5f !important;
}

/* Hero subtitle labels */
.mobile-ai-sheet-content #kpiModalContent .text-gColGray4,
.mobile-ai-sheet-content #nexusKpiModalContent .text-gColGray4 {
  color: #5b5b5f !important;
}

/* Section header text */
.mobile-ai-sheet-content #kpiModalContent .text-gColDarkText,
.mobile-ai-sheet-content #nexusKpiModalContent .text-gColDarkText {
  color: #2e2e32 !important;
}

/* KPI accent — keep iColBlue */
.mobile-ai-sheet-content #kpiModalContent .text-iColBlue,
.mobile-ai-sheet-content #nexusKpiModalContent .text-iColBlue {
  color: #2FACBC !important;
}

/* Progress bars — compact for mobile, show with reduced height */
.mobile-ai-sheet-content #kpiModalContent .kpi-bar,
.mobile-ai-sheet-content #nexusKpiModalContent .kpi-bar {
  height: 6px !important;
  min-height: 6px !important;
  border-radius: 3px !important;
}

/* Row spacing — compact but readable */
.mobile-ai-sheet-content #kpiModalContent .py-3,
.mobile-ai-sheet-content #nexusKpiModalContent .py-3 {
  padding-top: 5px !important;
  padding-bottom: 5px !important;
}

/* Section spacing — match chromium proportions, scaled */
.mobile-ai-sheet-content #kpiModalContent .space-y-6 > * + *,
.mobile-ai-sheet-content #nexusKpiModalContent .space-y-6 > * + * {
  margin-top: 18px !important;
}

/* Inner section spacing */
.mobile-ai-sheet-content #kpiModalContent .space-y-1 > * + *,
.mobile-ai-sheet-content #nexusKpiModalContent .space-y-1 > * + * {
  margin-top: 2px !important;
}

/* Hero row gap */
.mobile-ai-sheet-content #kpiModalContent .gap-8,
.mobile-ai-sheet-content #nexusKpiModalContent .gap-8 {
  gap: 24px !important;
}

/* KPI row gap */
.mobile-ai-sheet-content #kpiModalContent .gap-4,
.mobile-ai-sheet-content #nexusKpiModalContent .gap-4 {
  gap: 8px !important;
}

/* Section bottom margin */
.mobile-ai-sheet-content #kpiModalContent .mb-3,
.mobile-ai-sheet-content #nexusKpiModalContent .mb-3 {
  margin-bottom: 8px !important;
}

/* Padding top on sections */
.mobile-ai-sheet-content #kpiModalContent .pt-3,
.mobile-ai-sheet-content #nexusKpiModalContent .pt-3 {
  padding-top: 8px !important;
}

/* Footnote left padding */
.mobile-ai-sheet-content #kpiModalContent .pl-4,
.mobile-ai-sheet-content #nexusKpiModalContent .pl-4 {
  padding-left: 12px !important;
}

/* IUCN badge font */
.mobile-ai-sheet-content #kpiModalContent .font-bold,
.mobile-ai-sheet-content #nexusKpiModalContent .font-bold {
  font-weight: 700 !important;
}

.mobile-ai-sheet-content #kpiModalContent .font-semibold,
.mobile-ai-sheet-content #nexusKpiModalContent .font-semibold {
  font-weight: 600 !important;
}

.mobile-ai-sheet-content #kpiModalContent .font-medium,
.mobile-ai-sheet-content #nexusKpiModalContent .font-medium {
  font-weight: 500 !important;
}

/* 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: #2D217A;
  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: #ffffff;
  border: 1px solid #f1f0f4;
  color: #2e2e32;
}

.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: #2D217A;
  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(242, 175, 41, 0.12);
  border: 1px solid rgba(242, 175, 41, 0.25);
  color: #2e2e32;
  margin-left: 24px;
  text-align: right;
}

/* Input area */
.mobile-ai-input-area {
  padding: 8px 12px;
  border-top: 1px solid #f1f0f4;
  background: #ffffff;
  display: flex;
  flex-direction: column;
  gap: 6px;
}

/* Shared toolbar classes — same definitions as chromiumUI */
.claudeMcpToolbarRow {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
  width: 100%;
}

.claudeMcpToolbarSpacer {
  flex: 1 1 0%;
}

/* Toolbar dropdowns (Model, Language, Questions) */
.claudeMcpToolbarSelect {
  flex: 0 0 auto;
  height: 34px;
  padding: 0 26px 0 10px;
  font-size: 13px;
  border: 1px solid #D3D3D3;
  border-radius: 9999px;
  background: white;
  color: #708794;
  cursor: pointer;
  font-family: Inter, sans-serif;
  -webkit-appearance: none !important;
  appearance: none !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='10' viewBox='0 0 24 24' fill='none' stroke='%23708794' stroke-width='3' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpolyline points='6 9 12 15 18 9'%3E%3C/polyline%3E%3C/svg%3E");
  background-repeat: no-repeat;
  background-position: right 8px center;
}

.claudeMcpToolbarSelect:focus {
  border-color: #2D217A;
  outline: none;
}

.claudeMcpToolbarSelect option {
  background: white;
  color: #464F60;
}

/* Free text input */
input.claudeMcpTextInput,
input[type="text"].claudeMcpTextInput {
  flex: 1 1 0% !important;
  min-width: 0 !important;
  width: auto !important;
  height: 34px !important;
  padding: 0 12px !important;
  font-size: 13px !important;
  border: 1px solid #D3D3D3 !important;
  border-radius: 9999px !important;
  background: white !important;
  color: #2e2e32 !important;
  font-family: Inter, sans-serif !important;
  -webkit-appearance: none !important;
  appearance: none !important;
  box-sizing: border-box !important;
}

input.claudeMcpTextInput::placeholder {
  color: #9CA3AF !important;
}

input.claudeMcpTextInput:focus {
  outline: none !important;
  border-color: #2D217A !important;
}

/* Send + Word buttons — compact pills */
button.claudeMcpSendBtn,
button.claudeMcpWordBtn {
  flex: 0 0 auto !important;
  width: auto !important;
  height: 34px !important;
  padding: 0 12px !important;
  border: none !important;
  background: #2D217A !important;
  border-radius: 9999px !important;
  color: white !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 5px !important;
  cursor: pointer;
  font-size: 13px !important;
  font-family: Inter, sans-serif;
  font-weight: 500 !important;
  white-space: nowrap !important;
}

button.claudeMcpSendBtn:hover,
button.claudeMcpWordBtn:hover {
  background: #3a2b99 !important;
}

button.claudeMcpSendBtn i,
button.claudeMcpWordBtn i {
  font-size: 11px;
}

/* uiOutput wrapper for text input — takes full remaining width, wraps to new line on narrow screens */
.claudeMcpToolbarRow > .shiny-html-output:has(input) {
  flex: 1 1 60% !important;
  min-width: 0 !important;
  display: flex !important;
}

/* uiOutput wrapper for dropdown — shrink to content */
.claudeMcpToolbarRow > .shiny-html-output:has(select) {
  flex: 0 0 auto !important;
  display: flex !important;
}

/* uiOutput wrapper for send label inside button — inline */
.claudeMcpSendBtn > .shiny-html-output {
  display: inline !important;
}

/* 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: 11500;
  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: 11501;
  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: 44px;
  height: 44px;
  border: none;
  background: #F3F4F6;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  color: #464F60;
  font-size: 18px;
  touch-action: manipulation;
  -webkit-tap-highlight-color: transparent;
}

.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: 10px !important;
  padding: 8px 12px !important;
  margin: 0 !important;
  background: #F7F9FC !important; /* gColGray1 — match chromium */
}

/* 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;
}

/**** Hide default Shiny disconnect overlay ****/
#shiny-disconnected-overlay,
.shiny-notification-panel,
#ss-overlay,
#ss-connect-dialog {
  display: none !important;
  visibility: hidden !important;
  opacity: 0 !important;
  pointer-events: none !important;
}

/* Hide Framework7 disconnect toast (added via JavaScript - see uiWebkit.R) */
.toast.gaia-hide-toast {
  display: none !important;
}

/**** Mobile Disconnect/Crash Screen ****/
.mobile-disconnect-screen {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  z-index: 99999;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(55, 65, 81, 0.9);
  padding: 16px;
}

.mobile-disconnect-screen.hidden {
  display: none !important;
}

.mobile-disconnect-modal {
  background: #F7F9FC;
  border-radius: 24px;
  padding: 32px 24px;
  text-align: center;
  max-width: 320px;
  width: 100%;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3);
}

.mobile-disconnect-logo {
  margin-bottom: 16px;
}

.mobile-disconnect-logo img {
  width: 64px;
  height: 64px;
}

.mobile-disconnect-title {
  color: #464F60;
  font-size: 20px;
  font-weight: 700;
  margin: 0 0 8px 0;
}

.mobile-disconnect-subtitle {
  color: #708794;
  font-size: 14px;
  margin: 0 0 16px 0;
}

.mobile-disconnect-console {
  background: #2C3438;
  border-radius: 12px;
  padding: 12px;
  margin-bottom: 16px;
  max-height: 120px;
  overflow-y: auto;
  text-align: left;
}

.mobile-disconnect-console-title {
  color: #708794;
  font-size: 11px;
  margin: 0 0 8px 0;
}

.mobile-disconnect-console-content {
  font-family: monospace;
  font-size: 11px;
  color: white;
}

.mobile-disconnect-button {
  width: 100%;
  background: #2FACBC;
  color: white;
  border: none;
  border-radius: 16px;
  padding: 14px 24px;
  font-size: 16px;
  font-weight: 600;
  cursor: pointer;
  margin-bottom: 12px;
  transition: background 0.2s;
}

.mobile-disconnect-button:hover {
  background: #259DAD;
}

.mobile-disconnect-alt {
  color: #708794;
  font-size: 13px;
  margin: 0;
}

.mobile-disconnect-alt a {
  color: #2FACBC;
  text-decoration: underline;
}

/**** Chrome-specific fixes for Leaflet controls ****/
/* Chrome sometimes hides controls due to GPU rendering issues */
@supports (-webkit-appearance: none) {

  .leaflet-control-scale,
  .leaflet-control-attribution {
    display: block !important;
    visibility: visible !important;
    opacity: 1 !important;
    transform: translateZ(0) !important;
    -webkit-transform: translateZ(0) !important;
  }

  .leaflet-bottom.leaflet-right {
    display: block !important;
    visibility: visible !important;
  }
}

/**** Mobile Measure Tool & Leaflet Controls ****/
.leaflet-control-measure {
  display: block !important;
  visibility: visible !important;
  border: 2px solid rgba(0, 0, 0, 0.2) !important;
  background-clip: padding-box !important;
  border-radius: 4px !important;
}

.leaflet-control-measure .leaflet-control-measure-toggle,
.leaflet-control-measure .leaflet-control-measure-toggle:hover {
  width: 36px !important;
  height: 36px !important;
  background-size: 16px 16px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background-color: white !important;
  background-image: none !important;
  /* Disable default image which might be missing */
  text-decoration: none !important;
}

/* Inject FontAwesome icon since default image might be missing/invisible */
.leaflet-control-measure .leaflet-control-measure-toggle::before {
  content: "\f545" !important;
  /* fa-ruler-combined */
  font-family: "Font Awesome 6 Free" !important;
  font-weight: 900 !important;
  font-size: 20px !important;
  color: #333 !important;
}

.leaflet-control-measure .leaflet-control-measure-toggle:hover {
  background-color: #f7f7f7 !important;
}

/* Fix for measure tool popup on mobile - ensure it's usable */
.leaflet-measure-resultpopup {
  font-family: Inter, sans-serif !important;
  min-width: 200px !important;
  z-index: 12000 !important;
}

.leaflet-measure-resultpopup .tasks {
  margin: 12px 0 0 0 !important;
  text-align: center !important;
}

.leaflet-measure-resultpopup .btn {
  display: inline-block !important;
  padding: 8px 16px !important;
  margin-bottom: 0 !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  line-height: 1.42857143 !important;
  text-align: center !important;
  white-space: nowrap !important;
  vertical-align: middle !important;
  cursor: pointer !important;
  border: none !important;
  border-radius: 8px !important;
  text-decoration: none !important;
  color: #333 !important;
  background-color: #F2AF29 !important;
  /* Standard yellow button */
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1) !important;
}

/**** DataTables Styling ****/
/* position of the datatables */
.datatables {
  margin-left: 0 !important;
}

/* dt-buttons container */
.dt-buttons {
  display: flex !important;
  flex-direction: row !important;
  gap: 1rem !important;
  margin-bottom: 1rem !important;
}

/* Style More data button (matches Map tab styling) */
.btn.btn-info,
.dt-button.buttons-colvis {
  height: 4rem !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  border-radius: 0.5rem !important;
  text-align: center !important;
  color: #464F60 !important;
  background-color: #E9EAF5 !important;
  font-family: "Roboto", serif !important;
  cursor: pointer !important;
}

.btn.btn-info:hover,
.dt-button.buttons-colvis:hover {
  background-color: #6B7280 !important;
  color: #F7F9FC !important;
}

/* Style Download button (matches Data dropdown styling) */
.btn.btn-primary,
.dt-button.buttons-collection {
  height: 4rem !important;
  padding-left: 1.5rem !important;
  padding-right: 1.5rem !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  border-radius: 0.5rem !important;
  text-align: center !important;
  color: #464F60 !important;
  background-color: #F2AF29 !important;
  font-family: "Roboto", serif !important;
  cursor: pointer !important;
}

.btn.btn-primary:hover,
.dt-button.buttons-collection:hover {
  background-color: #6B7280 !important;
  color: #F7F9FC !important;
}

/* dt-collapsible btn */
.dt-button-collection>*:nth-child(1) {
  display: flex !important;
  flex-direction: column !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  padding-left: 3rem !important;
  padding-right: 3rem !important;
  place-content: center !important;
}

/* info and stats of datatable */
.dataTables_info {
  margin-top: -54px !important;
  width: fit-content !important;
  margin-left: 264px !important;
  height: 4rem !important;
  padding-left: 2rem !important;
  padding-right: 2rem !important;
  padding-top: 1rem !important;
  padding-bottom: 1rem !important;
  margin-bottom: 2rem !important;
  border-radius: 1rem !important;
  background-color: #2FACBC !important;
  font-size: 1.875rem !important;
}

@media (max-width: 1279px) {
  .dataTables_info {
    visibility: hidden !important;
  }
}

/* pagination */
.dataTables_paginate {
  padding-top: 4rem !important;
  border-radius: 1rem !important;
  place-self: center !important;
}

/* background of table header */
.table th {
  background-color: #374151 !important;
}

.table th:nth-child(1) {
  border-top-left-radius: 1rem !important;
  border-bottom-left-radius: 1rem !important;
}

/* label of table header */
.sorting {
  color: #FFFFFFCC !important;
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
  font-family: "Roboto", serif !important;
}

@media (min-width: 768px) {
  .sorting {
    font-size: 1.25rem !important;
  }
}

/* table cell */
.table td {
  background-color: #F7F9FC !important;
  color: #464F60 !important;
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
  border-color: #E5E7EB !important;
  padding: 0.5rem !important;
}

@media (min-width: 768px) {
  .table td {
    font-size: 1.25rem !important;
    line-height: 1.75rem !important;
  }
}

/* selected line */
.table dataTable>tr.odd.selected,
.table dataTable>tr.even.selected {
  box-shadow: 0 0 0 2px #F2AF29 !important;
}

/* Mobile Data Cards */
.mobile-data-card {
  background-color: #ffffff !important;
  padding: 1rem !important;
  border-radius: 0.75rem !important;
  box-shadow: 0 1px 2px 0 rgb(0 0 0 / 0.05) !important;
  border: 1px solid #f3f4f6 !important;
  margin-bottom: 0.75rem !important;
}

.mobile-data-card h4 {
  font-size: 1.125rem !important;
  line-height: 1.75rem !important;
  font-weight: 600 !important;
  color: #464F60 !important;
  margin: 0 !important;
  margin-bottom: 0.25rem !important;
}

.mobile-data-card .card-subtitle {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: #708794 !important;
  margin: 0 !important;
  margin-bottom: 0.5rem !important;
  font-style: italic !important;
}

.mobile-data-card .card-row {
  display: flex !important;
  justify-content: space-between !important;
  padding-top: 1px !important;
  padding-bottom: 1px !important;
  border-bottom: 1px solid #f9fafb !important;
}

.mobile-data-card .card-row:last-child {
  border-bottom: 0 !important;
}

.mobile-data-card .card-label {
  font-size: 0.75rem !important;
  line-height: 1rem !important;
  font-weight: 600 !important;
  color: #D3D3D3 !important;
  text-transform: uppercase !important;
  letter-spacing: 0.05em !important;
}

.mobile-data-card .card-value {
  font-size: 0.875rem !important;
  line-height: 1.25rem !important;
  color: #464F60 !important;
  font-weight: 500 !important;
  text-align: right !important;
}

.mobile-data-card img {
  width: 100% !important;
  height: 10rem !important;
  object-fit: cover !important;
  border-radius: 0.5rem !important;
  margin-bottom: 0.75rem !important;
}

/* Force Leaflet controls to bottom edge in WebkitUI (only for left-side controls) */
/* Note: .leaflet-bottom.leaflet-right positioning is handled separately above with console toggle clearance */
.leaflet-bottom.leaflet-left {
  bottom: 0 !important;
  /* Ensure it respects safe area but sits flush otherwise */
  padding-bottom: env(safe-area-inset-bottom, 0px) !important;
}

.leaflet-bottom .leaflet-control {
  margin-bottom: 0 !important;
}

/* Specific fix for attribution and scale to likely remove any default gaps */
.leaflet-control-attribution,
.leaflet-control-scale {
  margin-bottom: 0 !important;
  border-bottom-left-radius: 0 !important;
  border-bottom-right-radius: 0 !important;
}

/* ============================================
   Mobile Data View - Simple Summary Interface
   ============================================ */

/* Empty state styling */
.mobile-data-empty {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 40px 20px;
  text-align: center;
}

/* Download button styling */
.mobile-download-btn,
.mobile-download-btn.btn {
  background: #2FACBC !important;
  color: white !important;
  border: none !important;
  border-radius: 8px !important;
  padding: 10px 16px !important;
  font-size: 14px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  text-decoration: none !important;
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
}

.mobile-download-btn:hover {
  background: #259EAD !important;
}

/* Data Overlay Container */
#mobileDataOverlay {
  background: white !important;
}

/* Fixed Header */
.data-overlay-header {
  position: sticky;
  top: 0;
  z-index: 10;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 16px;
  background: white;
  border-bottom: 1px solid #E5E7EB;
  min-height: 56px;
}

.data-overlay-header h2 {
  margin: 0;
  font-size: 18px;
  font-weight: 600;
  color: #111827;
}

.data-overlay-header .btn-mobile-close-icon {
  position: absolute;
  right: 16px;
}

/* Tab Bar */
.data-tab-bar {
  display: flex;
  background: white;
  border-bottom: 1px solid #E5E7EB;
  padding: 0 8px;
  position: sticky;
  top: 56px;
  z-index: 9;
}

.data-tab {
  flex: 1;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 12px 8px;
  background: transparent;
  border: none;
  border-bottom: 2px solid transparent;
  font-family: Inter, sans-serif;
  font-size: 14px;
  font-weight: 500;
  color: #6B7280;
  cursor: pointer;
  transition: all 0.2s ease;
}

.data-tab:hover {
  color: #374151;
}

.data-tab.active {
  color: #2FACBC;
  border-bottom-color: #2FACBC;
}

.data-tab-label {
  white-space: nowrap;
}

.data-tab-count {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 20px;
  height: 20px;
  padding: 0 6px;
  background: #E5E7EB;
  border-radius: 10px;
  font-size: 11px;
  font-weight: 600;
  color: #374151;
}

.data-tab.active .data-tab-count {
  background: #2FACBC;
  color: white;
}

/* Loading State */
.data-loader {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  background: #F3F4F6;
}

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

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

.data-loader-text {
  margin-top: 16px;
  font-size: 14px;
  color: #6B7280;
}

/* Scrollable Content */
.data-content-scroll {
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding-bottom: env(safe-area-inset-bottom, 20px);
}

/* Tab Content Panels */
.data-tab-content {
  display: none;
  padding: 16px;
}

.data-tab-content.active {
  display: block;
}

/* Empty State */
.data-empty-state {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 60px 20px;
  text-align: center;
}

.data-empty-icon {
  font-size: 48px;
  color: #D1D5DB;
  margin-bottom: 16px;
}

.data-empty-title {
  font-size: 18px;
  font-weight: 600;
  color: #374151;
  margin: 0 0 8px 0;
}

.data-empty-subtitle {
  font-size: 14px;
  color: #6B7280;
  margin: 0;
}

/* Results Header */
.data-results-header {
  padding: 0 0 12px 0;
}

.data-results-count {
  font-size: 13px;
  font-weight: 500;
  color: #6B7280;
}

/* Cards Container */
.data-cards-container {
  display: flex;
  flex-direction: column;
  gap: 12px;
}

/* Observation Card */
.data-card {
  background: white;
  border-radius: 12px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  cursor: pointer;
  transition: box-shadow 0.2s ease;
}

.data-card:active {
  box-shadow: 0 2px 8px rgba(0, 0, 0, 0.12);
}

.data-card.expanded {
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
}

/* Card Header */
.data-card-header {
  display: flex;
  align-items: center;
  padding: 12px;
  gap: 12px;
}

/* Card Image */
.data-card-image {
  width: 56px;
  height: 56px;
  flex-shrink: 0;
  border-radius: 8px;
  overflow: hidden;
  background: #F3F4F6;
}

.data-card-image img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.data-card-placeholder {
  width: 100%;
  height: 100%;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
  font-size: 20px;
}

/* Card Info */
.data-card-info {
  flex: 1;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.data-card-title-row {
  display: flex;
  align-items: center;
  gap: 8px;
}

.data-card-title {
  font-family: Inter, sans-serif;
  font-size: 15px;
  font-weight: 600;
  color: #111827;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

.data-card-subtitle {
  font-family: Inter, sans-serif;
  font-size: 13px;
  color: #6B7280;
  font-style: italic;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}

/* IUCN Badges */
.data-card-badge {
  flex-shrink: 0;
  padding: 2px 6px;
  border-radius: 4px;
  font-size: 10px;
  font-weight: 700;
  text-transform: uppercase;
}

.badge-critical {
  background: #FEE2E2;
  color: #DC2626;
}

.badge-endangered {
  background: #FFEDD5;
  color: #EA580C;
}

.badge-vulnerable {
  background: #FEF3C7;
  color: #D97706;
}

.badge-near-threatened {
  background: #FEF9C3;
  color: #CA8A04;
}

.badge-least-concern {
  background: #DCFCE7;
  color: #16A34A;
}

.badge-data-deficient {
  background: #E5E7EB;
  color: #6B7280;
}

.badge-not-evaluated {
  background: #F3F4F6;
  color: #9CA3AF;
}

.badge-default {
  background: #E5E7EB;
  color: #6B7280;
}

/* Expand Indicator */
.data-card-expand {
  flex-shrink: 0;
  width: 24px;
  height: 24px;
  display: flex;
  align-items: center;
  justify-content: center;
  color: #9CA3AF;
  transition: transform 0.2s ease;
}

.data-card.expanded .data-card-expand {
  transform: rotate(180deg);
}

/* Card Details (Expandable) */
.data-card-details {
  max-height: 0;
  overflow: hidden;
  transition: max-height 0.3s ease;
  border-top: 1px solid transparent;
}

.data-card.expanded .data-card-details {
  max-height: 500px;
  border-top-color: #F3F4F6;
}

.data-card-details-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px;
  padding: 12px;
  background: #FAFAFA;
}

.data-card-detail-item {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.data-card-detail-label {
  font-size: 11px;
  font-weight: 500;
  color: #9CA3AF;
  text-transform: uppercase;
  letter-spacing: 0.5px;
}

.data-card-detail-value {
  font-size: 13px;
  color: #374151;
  word-break: break-word;
}

.data-card-no-details {
  padding: 16px;
  text-align: center;
  font-size: 13px;
  color: #9CA3AF;
  font-style: italic;
  margin: 0;
}

/* Relationship Card Specific */
.data-card-relationship .data-card-placeholder {
  color: #2FACBC;
}

/* Legacy Feed Styles (kept for backwards compatibility) */
.mobile-bio-feed-item {
  display: flex !important;
  align-items: center !important;
  padding: 12px 16px !important;
  background: white !important;
  border-bottom: 1px solid #F3F4F6 !important;
}

.mobile-bio-feed-item:last-child {
  border-bottom: none !important;
}

.feed-img-container {
  width: 56px !important;
  height: 56px !important;
  flex-shrink: 0 !important;
  margin-right: 16px !important;
  border-radius: 8px !important;
  overflow: hidden !important;
  background: #F9FAFB !important;
}

.feed-img-container img {
  width: 100% !important;
  height: 100% !important;
  object-fit: cover !important;
}

.feed-img-placeholder {
  width: 100% !important;
  height: 100% !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  color: #D1D5DB !important;
}

.feed-content {
  flex: 1 !important;
  min-width: 0 !important;
}

.feed-title {
  font-family: Inter, sans-serif !important;
  font-weight: 600 !important;
  font-size: 16px !important;
  color: #111827 !important;
  line-height: 1.2 !important;
  margin-bottom: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.feed-subtitle {
  font-family: Inter, sans-serif !important;
  font-size: 14px !important;
  color: #4B5563 !important;
  font-style: italic !important;
  margin-bottom: 2px !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.feed-meta {
  font-family: Inter, sans-serif !important;
  font-size: 12px !important;
  color: #9CA3AF !important;
  white-space: nowrap !important;
  overflow: hidden !important;
  text-overflow: ellipsis !important;
}

.feed-action {
  margin-left: 12px !important;
  color: #D1D5DB !important;
}

/**** Gallery Mobile ****/

/* Shiny uiOutput wrapper inside gallery/nexus overlay must fill parent */
#mobileGalleryOverlay .flex-1 > .shiny-html-output,
#mobileNexusOverlay .flex-1 > .shiny-html-output {
  height: 100%;
}

.gallery-mobile-panel {
  width: 100%;
  height: 100%;
  display: flex;
  flex-direction: column;
  overflow: visible;
}

/* Landing state */
.gallery-mobile-landing {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: calc(100vh - 120px);
  padding: 16px;
  position: relative;
}

.gallery-mobile-logo {
  height: 48px;
  margin-bottom: 32px;
}

/* Module name badge (in overlay header, right-aligned) */
.landing-module-badge {
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 600;
  color: white;
  padding: 5px 16px;
  border-radius: 9999px;
  letter-spacing: 0.02em;
}

.landing-module-badge-gallery {
  background: #2FACBC;
}

.landing-module-badge-nexus {
  background: #F25C33;
}

.landing-module-badge-account {
  background: #374151;
}

.gallery-mobile-search-container {
  width: 100%;
  max-width: 320px;
  display: flex;
  flex-direction: column;
  align-items: center;
}

/* Module name badge on landing pages */
.landing-module-name {
  position: absolute;
  top: 1rem;
  right: 1.25rem;
  font-size: 1.25rem;
  font-family: sans-serif;
  color: white;
  padding: 0.375rem 1rem;
  border-radius: 9999px;
}

.landing-module-name-gallery {
  background-color: #2FACBC;
}

.landing-module-name-nexus {
  background-color: #F25C33;
}

/* Scoped landing overrides — Chromium mobile breakpoint values */

/* Landing page search glow — rotating iCol colors */
@-webkit-keyframes gaiaSearchGlow {
  0%   { box-shadow: 0 0 18px 3px rgba(47, 172, 188, 0.5) !important; }
  25%  { box-shadow: 0 0 18px 3px rgba(242, 92, 51, 0.5) !important; }
  50%  { box-shadow: 0 0 18px 3px rgba(242, 175, 41, 0.5) !important; }
  75%  { box-shadow: 0 0 18px 3px rgba(77, 160, 45, 0.5) !important; }
  100% { box-shadow: 0 0 18px 3px rgba(47, 172, 188, 0.5) !important; }
}
@keyframes gaiaSearchGlow {
  0%   { box-shadow: 0 0 18px 3px rgba(47, 172, 188, 0.5) !important; }
  25%  { box-shadow: 0 0 18px 3px rgba(242, 92, 51, 0.5) !important; }
  50%  { box-shadow: 0 0 18px 3px rgba(242, 175, 41, 0.5) !important; }
  75%  { box-shadow: 0 0 18px 3px rgba(77, 160, 45, 0.5) !important; }
  100% { box-shadow: 0 0 18px 3px rgba(47, 172, 188, 0.5) !important; }
}

#galleryLanding .gallery-mobile-search-wrapper,
#nexusLanding .gallery-mobile-search-wrapper {
  -webkit-animation: gaiaSearchGlow 6s ease-in-out infinite !important;
  animation: gaiaSearchGlow 6s ease-in-out infinite !important;
}

/* Landing container: relative for badge */
#galleryLanding.gallery-mobile-landing,
#nexusLanding.gallery-mobile-landing {
  position: relative;
}

#galleryLanding .gallery-mobile-logo,
#nexusLanding .gallery-mobile-logo {
  height: 48px;
  margin-bottom: 48px !important;
}

#galleryLanding .gallery-mobile-search-container,
#nexusLanding .gallery-mobile-search-container {
  max-width: 340px;
}

@media (min-width: 768px) {
  #galleryLanding .gallery-mobile-search-container,
  #nexusLanding .gallery-mobile-search-container {
    max-width: 510px !important;
  }
}

@media (min-width: 1024px) {
  #galleryLanding .gallery-mobile-search-container,
  #nexusLanding .gallery-mobile-search-container {
    max-width: 600px !important;
  }
}

/* Search wrapper: white card — landing pages (glow via animation) */
#galleryLanding .gallery-mobile-search-wrapper,
#nexusLanding .gallery-mobile-search-wrapper {
  height: 48px;
  border-radius: 24px;
  border: none;
  background: #ffffff;
}

/* Search wrapper: gallery results — same height as landing */
#galleryResults .gallery-mobile-search-wrapper {
  height: 48px;
  border-radius: 24px;
  border: none;
  background: #ffffff;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.06);
}

/* Search buttons — landing pages (iColYellow) */
#galleryLanding .gallery-mobile-search-btn,
#nexusLanding .gallery-mobile-search-btn {
  height: 48px;
  width: 56px;
  min-width: 56px;
  border-radius: 0 24px 24px 0 !important;
  background: #F2AF29 !important;
  border: 2px solid #E5E7EB !important;
  box-sizing: border-box;
}

#galleryLanding .gallery-mobile-clear-btn,
#nexusLanding .gallery-mobile-clear-btn {
  height: 48px;
  width: 48px;
  min-width: 48px;
}

/* Gallery results — same height as landing */
#galleryResults .gallery-mobile-search-btn {
  height: 48px;
  width: 48px;
  min-width: 48px;
  border-radius: 0 24px 24px 0 !important;
}

#galleryResults .gallery-mobile-clear-btn {
  height: 48px;
  width: 48px;
  min-width: 48px;
  border-radius: 24px 0 0 24px !important;
  border: 2px solid #E5E7EB !important;
  background: white !important;
  color: #464F60 !important; /* gColDarkText */
  padding-left: 6px !important;
}

/* Gallery stop search button — scaled for mobile results */
#galleryResults #galleryStopSearchBtn {
  height: 48px !important;
  width: 48px !important;
  min-width: 48px !important;
  border: 2px solid #E5E7EB !important;
  border-radius: 24px 0 0 24px !important;
  background: #F25C33 !important; /* iColRed */
  color: white !important;
  cursor: pointer;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  padding: 0 !important;
  margin: 0 !important;
  line-height: 1 !important;
  box-sizing: border-box !important;
}

/* Gallery results loading gif — must match stop btn height exactly */
/* display must NOT use !important — shinyjs::hide() needs to override it */
#DivGallerySearchingGifResults {
  height: 48px !important;
  width: 48px !important;
  min-width: 48px !important;
  border-radius: 0 24px 24px 0 !important;
  background: #F2AF29 !important;
  border: 2px solid #E5E7EB !important;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 0 !important;
  margin: 0 !important;
  box-sizing: border-box !important;
}

/* Input text — mobile-appropriate font */
#galleryLanding input[type="text"],
#nexusLanding input[type="text"] {
  font-size: 16px;
  padding-left: 16px;
  height: 48px;
}

/* Gallery results input — compact */
#galleryResults input[type="text"] {
  font-size: 14px;
  padding-left: 12px;
  height: 36px;
}

/* Selectize dropdown inside Gallery/Nexus search bars — mobile size */
#galleryLanding .gallery-mobile-dropdown-inline,
#nexusLanding .gallery-mobile-dropdown-inline,
#galleryResults .gallery-mobile-dropdown-inline {
  flex-shrink: 0;
  align-self: center;
  display: flex;
  align-items: center;
  width: 140px;
  min-width: 0;
  margin-right: 0;
  z-index: 20;
}

#galleryLanding .gallery-mobile-dropdown-inline .form-group,
#nexusLanding .gallery-mobile-dropdown-inline .form-group,
#galleryResults .gallery-mobile-dropdown-inline .form-group {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

#galleryLanding .gallery-mobile-dropdown-inline .selectize-control,
#nexusLanding .gallery-mobile-dropdown-inline .selectize-control,
#galleryResults .gallery-mobile-dropdown-inline .selectize-control {
  display: flex;
  align-items: center;
  height: 100%;
}

#galleryLanding .gallery-mobile-dropdown-inline .selectize-control .selectize-input,
#nexusLanding .gallery-mobile-dropdown-inline .selectize-control .selectize-input,
#galleryResults .gallery-mobile-dropdown-inline .selectize-control .selectize-input {
  display: flex !important;
  align-items: center !important;
  flex-direction: row-reverse !important;
  flex-wrap: nowrap !important;
  justify-content: flex-start !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: sans-serif;
  font-size: 0.875rem !important;
  height: auto !important;
  min-height: 2.5rem !important;
  line-height: 1.25rem !important;
  padding: 0 0.5rem !important;
  overflow: hidden !important;
}

#galleryLanding .gallery-mobile-dropdown-inline .selectize-control .selectize-input input,
#nexusLanding .gallery-mobile-dropdown-inline .selectize-control .selectize-input input,
#galleryResults .gallery-mobile-dropdown-inline .selectize-control .selectize-input input {
  font-size: 0.875rem !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

#galleryLanding .gallery-mobile-dropdown-inline .selectize-control .selectize-input .item,
#nexusLanding .gallery-mobile-dropdown-inline .selectize-control .selectize-input .item,
#galleryResults .gallery-mobile-dropdown-inline .selectize-control .selectize-input .item {
  font-size: 0.875rem !important;
  white-space: nowrap !important;
  line-height: 1.25rem !important;
}

#galleryLanding .gallery-mobile-dropdown-inline .selectize-control .selectize-dropdown,
#nexusLanding .gallery-mobile-dropdown-inline .selectize-control .selectize-dropdown,
#galleryResults .gallery-mobile-dropdown-inline .selectize-control .selectize-dropdown {
  border-radius: 0.75rem !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
  font-family: sans-serif;
  font-size: 0.875rem !important;
}

#galleryLanding .gallery-mobile-dropdown-inline .selectize-control .selectize-dropdown .option,
#nexusLanding .gallery-mobile-dropdown-inline .selectize-control .selectize-dropdown .option,
#galleryResults .gallery-mobile-dropdown-inline .selectize-control .selectize-dropdown .option {
  font-size: 0.875rem !important;
  padding: 0.5rem 1rem !important;
}

/* Add an inline class for Relationship dropdowns */
.gallery-mobile-dropdown-inline {
  display: inline-flex;
  align-items: center;
  margin-right: 8px;
  min-width: 120px;
}

.gallery-mobile-dropdown-inline .smart-select .item-inner {
  padding-right: 8px !important;
  /* give space for selection */
}

.gallery-mobile-search-wrapper {
  display: flex;
  flex-direction: row;
  align-items: center;
  width: 100%;
  height: 48px;
  border-radius: 24px;
  border-radius: 24px;
  border: 1px solid #D3D3D3;
  background: #F7F9FC;
  overflow: visible;
}

.gallery-mobile-search-wrapper .form-group {
  flex: 1;
  margin-bottom: 0;
}

.gallery-mobile-search-wrapper input[type="text"] {
  background: transparent;
  border: 0;
  color: #2e2e32;
  font-size: 16px;
  width: 100%;
  outline: none;
  padding-left: 16px;
  height: 48px;
}

.gallery-mobile-search-wrapper input[type="text"]::placeholder {
  color: #5b5b5f;
}

.gallery-mobile-search-wrapper input[type="text"]:focus {
  outline: none;
  box-shadow: none !important;
}

.gallery-mobile-search-btn {
  height: 48px;
  width: 48px;
  min-width: 48px;
  border-radius: 0 24px 24px 0 !important;
  border: 0 !important;
  cursor: pointer;
  background: #F2AF29 !important;
  color: #464F60 !important; /* gColDarkText */
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-mobile-clear-wrapper {
  display: flex;
}

.gallery-mobile-clear-btn {
  height: 48px;
  width: 40px;
  min-width: 40px;
  border: 0 !important;
  border-radius: 0 !important;
  background: transparent !important;
  color: #708794 !important;
  cursor: pointer;
  display: flex;
  align-items: center;
  justify-content: center;
}

.gallery-mobile-search-btn i,
.gallery-mobile-clear-btn i {
  font-size: 21px !important;
}

/* Relationship section on landing */
.gallery-mobile-relationship-section {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 16px;
  width: 100%;
}

/* Hide filter label (matches chromium .gallery-filter-label { hidden }) */
.gallery-mobile-filter-label {
  display: none !important;
}

.gallery-mobile-relationship-section .form-group {
  margin-bottom: 0;
  width: 100%;
}

.gallery-mobile-relationship-section .control-label {
  display: none;
}

.gallery-mobile-relationship-section select {
  background: #F7F9FC;
  border: 1px solid #D3D3D3;
  color: #464F60;
  font-size: 14px;
  border-radius: 24px;
  height: 44px;
  padding: 0 16px;
  cursor: pointer;
  width: 100%;
}

.gallery-mobile-relationship-section select:focus {
  outline: none;
  box-shadow: none !important;
}

/* Results state */
.gallery-mobile-results {
  display: flex;
  flex-direction: column;
  width: 100%;
  min-height: 0;
  flex: 1;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.gallery-mobile-results-search {
  padding: 8px 12px;
}

.gallery-mobile-filters {
  display: flex;
  flex-direction: column;
  gap: 4px;
  padding: 0 12px 6px;
}

.gallery-mobile-filter-item {
  display: flex;
  flex-direction: column;
}

.gallery-mobile-filter-item .form-group {
  margin-bottom: 0;
  width: 100%;
}

.gallery-mobile-filter-item .control-label {
  display: none;
}

/* Native select fallback */
.gallery-mobile-filter-item select {
  background: #F7F9FC;
  border: 1px solid #D3D3D3;
  color: #464F60;
  font-size: 13px;
  border-radius: 16px;
  height: 32px;
  padding: 0 12px;
  cursor: pointer;
  width: 100%;
}

.gallery-mobile-filter-item select:focus {
  outline: none;
  box-shadow: none !important;
}

/* Selectize species filter — rounded pill matching chromium */
.gallery-mobile-filter-item .selectize-control {
  border-radius: 16px !important;
}

.gallery-mobile-filter-item .selectize-control .selectize-input {
  border-radius: 16px !important;
  height: 32px !important;
  min-height: 32px !important;
  display: flex !important;
  align-items: center !important;
  background: #F7F9FC !important; /* gColGray1 */
  border: 1px solid #D3D3D3 !important; /* gColBorder */
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.1) !important;
  font-family: sans-serif;
  font-size: 13px !important;
  color: #464F60 !important;
  padding: 0 12px !important;
  line-height: 32px !important;
}

.gallery-mobile-filter-item .selectize-control .selectize-input .item {
  font-size: 13px !important;
  line-height: 1.2 !important;
  color: #464F60 !important;
}

.gallery-mobile-filter-item .selectize-control .selectize-input input {
  font-size: 13px !important;
}

.gallery-mobile-filter-item .selectize-control .selectize-dropdown {
  border-radius: 12px !important;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.15) !important;
  font-size: 13px !important;
}

.gallery-mobile-filter-item .selectize-control .selectize-dropdown .option {
  font-size: 13px !important;
  padding: 6px 12px !important;
  color: #464F60 !important;
}

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

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

/* Gallery results module label — above image grid */
.gallery-results-module-label {
  text-align: center;
  font-size: 0.875rem;
  font-family: sans-serif;
  font-weight: 600;
  color: #2FACBC; /* iColBlue / Gallery brand color */
  padding: 4px 12px 2px;
  letter-spacing: 0.05em;
}

/* Image grid - responsive masonry columns */
.gallery-mobile-grid {
  padding: 8px 16px 16px;
  column-count: 1;
  column-gap: 12px;
}

@media (min-width: 640px) {
  .gallery-mobile-grid {
    column-count: 2;
  }
}

@media (min-width: 1024px) {
  .gallery-mobile-grid {
    column-count: 3;
  }
}

@media (min-width: 1400px) {
  .gallery-mobile-grid {
    column-count: 4;
  }
}

/* Shared card classes (chromium CSS not loaded on webkit) */
.gallery-card {
  border-radius: 8px;
  overflow: hidden;
  background-color: #1f2937;
  break-inside: avoid;
  margin-bottom: 12px;
}

.gallery-card-img-wrapper {
  cursor: pointer;
}

.gallery-card-image {
  width: 100%;
  display: block;
  object-fit: cover;
}

.gallery-card-info {
  display: flex;
  flex-direction: column;
  padding: 8px 12px;
}

.gallery-card-species {
  color: #E9EAF5;
  font-size: 16px;
  font-style: italic;
}

.gallery-card-attribution {
  color: #708794;
  font-size: 13px;
  line-height: 1.3;
  margin-top: 4px;
}

/* No results */
.gallery-no-results {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  padding: 48px 0;
}

/* Infinite scroll sentinel */
.gallery-sentinel {
  height: 1px;
  width: 100%;
}

/* Lightbox - full screen on mobile */
.gallery-mobile-lightbox {
  position: fixed;
  inset: 0;
  z-index: 11000;
  display: none;
  align-items: center;
  justify-content: center;
  background-color: rgba(0, 0, 0, 0.95);
}

.gallery-mobile-lightbox.gallery-lightbox-open {
  display: flex;
}

.gallery-mobile-lightbox-close {
  position: absolute;
  top: max(12px, env(safe-area-inset-top));
  right: 12px;
  z-index: 11001;
  width: 40px;
  height: 40px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 50%;
  background: rgba(255, 255, 255, 0.2);
  color: white;
  border: 0;
  cursor: pointer;
}

.gallery-mobile-lightbox-content {
  display: flex;
  flex-direction: column;
  align-items: center;
  max-width: 95vw;
  max-height: 90vh;
  padding: 16px;
}

.gallery-mobile-lightbox-img {
  max-width: 95vw;
  max-height: 70vh;
  object-fit: contain;
  border-radius: 4px;
}

.gallery-mobile-lightbox-info {
  display: flex;
  flex-direction: column;
  align-items: center;
  margin-top: 12px;
  gap: 4px;
}

.gallery-mobile-lightbox-species {
  color: #E9EAF5;
  font-size: 16px;
  font-style: italic;
}

.gallery-mobile-lightbox-attribution {
  color: #708794;
  font-size: 13px;
}

.gallery-mobile-lightbox-source {
  color: #F2AF29;
  font-size: 13px;
  margin-top: 4px;
  text-decoration: none;
}

/* Bootstrap modals — styled for webkit (no Bootstrap CSS loaded) */
.modal-backdrop {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 11200 !important;
}

.modal {
  position: fixed;
  top: 0; left: 0; right: 0; bottom: 0;
  z-index: 11300 !important;
  display: flex !important;
  align-items: flex-start;
  justify-content: center;
  padding: 16px;
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
}

.modal-dialog {
  width: 100%;
  max-width: 440px;
  margin: 40px auto;
}

.modal-content {
  background: #ffffff;
  border-radius: 16px;
  box-shadow: 0 8px 32px rgba(0, 0, 0, 0.15);
  overflow: visible;
}

.modal-body {
  max-height: 60vh;
  overflow-y: auto;
}

.modal-header {
  padding: 20px 20px 12px;
  border-bottom: 1px solid #f1f0f4;
}

.modal-header .modal-title,
.modal-header h4 {
  font-family: 'Inter', sans-serif;
  font-size: 18px;
  font-weight: 600;
  color: #2e2e32;
  margin: 0;
}

.modal-header .close {
  background: none;
  border: none;
  font-size: 24px;
  color: #5b5b5f;
  cursor: pointer;
  float: right;
  line-height: 1;
}

.modal-body {
  padding: 16px 20px;
}

.modal-body .form-group {
  margin-bottom: 14px;
}

.modal-body label {
  display: block;
  font-family: 'Inter', sans-serif;
  font-size: 13px;
  font-weight: 500;
  color: #5b5b5f;
  margin-bottom: 4px;
}

.modal-body .form-control,
.modal-body input[type="text"],
.modal-body select {
  width: 100%;
  padding: 10px 12px;
  border: 1px solid #e3e2e7;
  border-radius: 8px;
  background: #f7f6fa;
  color: #2e2e32;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  box-sizing: border-box;
  -webkit-appearance: none;
  appearance: none;
}

.modal-body .form-control:focus,
.modal-body input[type="text"]:focus,
.modal-body select:focus {
  outline: none;
  border-color: #2D217A;
}

.modal-footer {
  padding: 12px 20px 20px;
  display: flex;
  gap: 8px;
  justify-content: flex-end;
  border-top: 1px solid #f1f0f4;
}

.modal-footer .btn,
.modal-footer button {
  padding: 10px 20px;
  border-radius: 9999px;
  font-family: 'Inter', sans-serif;
  font-size: 14px;
  font-weight: 500;
  cursor: pointer;
  border: none;
  transition: background 0.2s ease;
}

.modal-footer .btn-default,
.modal-footer button[data-dismiss="modal"] {
  background: #f1f0f4;
  color: #2e2e32;
}

.modal-footer .btn-default:hover,
.modal-footer button[data-dismiss="modal"]:hover {
  background: #e3e2e7;
}

.modal-footer .btn-primary,
.modal-footer .action-button {
  background: #2D217A;
  color: white;
}

.modal-footer .btn-primary:hover,
.modal-footer .action-button:hover {
  background: #3a2b99;
}

/* AI Assistant Bootstrap modal — spacing between chat and input */
#claudeMcpModalContent > * + * {
  margin-top: 12px;
}

/* AI Assistant Bootstrap modal — toolbar stacks on mobile */
.claudeMcpToolbar {
  display: flex !important;
  flex-direction: column !important;
  gap: 6px !important;
  padding: 8px 12px !important;
}

.claudeMcpToolbarRow {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  align-items: center !important;
}

/* Ensure modal shows — Bootstrap .fade/.in not managed without Bootstrap JS */
.modal.fade {
  display: flex !important;
  opacity: 1 !important;
}

.modal-backdrop.fade {
  opacity: 0.5 !important;
}

/* G4: Alias for chromium class used in shared lightbox code */
.gallery-lightbox-source-link {
  color: #F2AF29;
  font-size: 13px;
  margin-top: 4px;
  text-decoration: none;
}

/* Gallery results — compact selectize dropdown */
#galleryResults .gallery-mobile-dropdown-inline {
  width: 100px;
}

#galleryResults .gallery-mobile-dropdown-inline .selectize-control .selectize-input {
  min-height: 2.25rem !important;
  font-size: 0.8rem !important;
  padding: 0 0.375rem !important;
}

#galleryResults .gallery-mobile-dropdown-inline .selectize-control .selectize-input .item {
  font-size: 0.8rem !important;
}

#galleryResults .gallery-mobile-dropdown-inline .selectize-control .selectize-input input {
  font-size: 0.8rem !important;
}

/* Gallery results — compact loading gif image */
#galleryResults #DivGallerySearchingGifResults img {
  height: 1.5rem;
}

/* Gallery mobile search button wrapper */
.gallery-mobile-search-btn-wrapper {
  display: flex;
  align-items: center;
  justify-content: center;
  min-width: 40px;
}

/* Landing button wrapper */
#galleryLanding .gallery-mobile-search-btn-wrapper,
#nexusLanding .gallery-mobile-search-btn-wrapper {
  min-width: 56px;
  width: 56px;
  flex-shrink: 0;
  margin: 0;
  padding: 0;
}

/* Landing loading gif */
#galleryLanding #DivGallerySearchingGif,
#nexusLanding #DivNexusLandingSearchingGif {
  height: 48px;
  width: 56px;
  border-radius: 0 24px 24px 0;
  background-color: #F2AF29;
  border: 2px solid #F2AF29;
}

/**** Nexus Webkit CSS — matches chromiumUI layout ****/

/* Results container — relative for absolute children, fills viewport */
.nexus-webkit-results {
  position: relative;
  width: 100%;
  height: 100%;
  min-height: 0;
  flex: 1;
  overflow: hidden;
  background: white;
}

/* Top panel — absolute overlay like chromium (floats over canvas) */
.nexus-webkit-top-panel {
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  z-index: 20;
  pointer-events: none;
}

/* Single row: search bar + dropdowns */
.nexus-webkit-top-row {
  position: absolute;
  top: 8px;
  left: 12px;
  right: 12px;
  display: flex;
  flex-direction: row;
  flex-wrap: wrap;
  align-items: center;
  gap: 6px;
  pointer-events: auto;
}

/* Search bar pill — scaled for mobile webkit */
.nexus-webkit-search-bar {
  position: relative;
  display: flex;
  flex-direction: row;
  flex-shrink: 0;
  width: 300px;
  height: 40px;
  border-radius: 20px;
  background: #F7F9FC; /* gColGray1 */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
              0 2px 4px -2px rgba(0, 0, 0, 0.1);
}

@media (min-width: 768px) {
  .nexus-webkit-search-bar {
    width: 510px;
  }
}

@media (min-width: 1024px) {
  .nexus-webkit-search-bar {
    width: 600px;
  }
}

/* Remove form-group margin from search bar textarea wrapper */
.nexus-webkit-search-bar .form-group {
  margin-bottom: 0 !important;
}

/* Search bar textarea — scaled for mobile webkit */
#nexusResults #nexusSearchBar {
  position: absolute !important;
  z-index: 20;
  text-align: left;
  top: 0;
  left: 0;
  right: 0;
  border-radius: 20px;
  font-family: 'Roboto', serif;
  color: #2C3438 !important; /* gColDarkGreen — dark text for contrast */
  background: #F7F9FC !important; /* gColGray1 */
  border: 0 !important;
  box-shadow: none !important;
  outline: none !important;
  resize: none !important;
  overflow-y: hidden !important;
  padding-top: 10px !important;
  padding-left: 14px !important;
  line-height: 1.25rem !important;
  font-size: 0.875rem !important;
  min-height: 2.5rem !important;
  word-break: break-word;
  white-space: pre-wrap;
}

/* Search button — scaled for mobile webkit */
#nexusResults #nexusSearchBtn {
  z-index: 30;
  height: 40px;
  width: 50px;
  margin-right: 0;
  border-radius: 0 20px 20px 0 !important;
  background: #F2AF29 !important; /* iColYellow */
  color: #464F60 !important; /* gColDarkText */
  border: 2px solid #E5E7EB !important;
  box-sizing: border-box;
  cursor: pointer;
  padding: 0;
}

#nexusResults #nexusSearchBtn:hover {
  background: #2FACBC !important; /* iColBlue */
  color: #F7F9FC !important;
}

/* Clear button — scaled for mobile webkit */
#nexusResults #nexusClearBtn {
  z-index: 30;
  height: 40px;
  width: 50px;
  border-radius: 20px 0 0 20px !important;
  border: 2px solid #E5E7EB !important;
  background: #F7F9FC !important;
  cursor: pointer;
  padding: 0;
}

#nexusResults #nexusClearBtn:hover {
  background: #374151 !important;
  color: #F7F9FC !important;
}

/* Stop button — scaled for mobile webkit */
#nexusResults #nexusStopSearchBtn {
  z-index: 30;
  height: 40px;
  width: 50px;
  box-sizing: border-box;
  border-radius: 20px 0 0 20px !important;
  border: 2px solid #E5E7EB !important;
  background: #F25C33 !important; /* iColRed */
  color: rgba(255, 255, 255, 0.8) !important;
  cursor: pointer;
  padding: 0;
}

#nexusResults #nexusStopSearchBtn:hover {
  color: #F25C33 !important;
  background: #F7F9FC !important;
}

/* Button slot containers — scaled for mobile webkit */
.nexus-webkit-btn-slot {
  z-index: 20;
  display: flex;
  flex-direction: row;
  width: 50px;
  height: 40px;
  margin-right: 0;
  flex-shrink: 0;
}

#DivNexusSearchBtn,
#DivNexusStopSearchBtn,
#DivNexusClearBtn,
#DivNexusSearchingGif {
  margin-right: 0 !important;
  margin-left: auto !important;
  z-index: 40 !important;
}

/* Nexus translate button (webkit) */
.nexus-webkit-translate-btn-wrapper {
  pointer-events: auto;
  flex-shrink: 0;
  margin-top: 4px;
}

.nexus-webkit-translate-btn {
  display: flex;
  align-items: center;
  height: 40px;
  padding: 0 16px;
  border-radius: 20px;
  background: #F7F9FC; /* gColGray1 */
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
              0 2px 4px -2px rgba(0, 0, 0, 0.1);
  color: #464F60; /* gColDarkText */
  font-size: 0.875rem;
  font-weight: 500;
  white-space: nowrap;
  border: 0;
  cursor: pointer;
  -webkit-tap-highlight-color: transparent;
}

.nexus-webkit-translate-btn:hover {
  background: #E9EAF5; /* gColGray2 */
}

.nexus-webkit-translate-btn:active {
  background: #2FACBC; /* iColBlue */
  color: #F7F9FC;
}

.nexus-webkit-btn-slot button i,
#nexusLandingSearchBtn i {
  font-size: 21px !important;
}

/* Loading gif — exact same sizing as nexus-webkit-btn-slot */
.nexus-webkit-loading-gif {
  z-index: 20;
  display: flex;
  flex-direction: row;
  width: 50px;
  height: 40px;
  margin-right: 0;
  flex-shrink: 0;
}

.nexus-webkit-loading-gif .nexus-webkit-loading-img {
  height: 20px;
  padding-left: 0;
}

#DivNexusSearchingGif {
  z-index: 30 !important;
  height: 40px;
  width: 50px;
  min-width: 50px;
  box-sizing: border-box;
  border-radius: 0 20px 20px 0 !important;
  background: #F2AF29 !important;
  border: 2px solid #E5E7EB !important;
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

/* Inline relationship selector inside search bar — scaled for mobile */
.nexus-webkit-dropdown-inline {
  z-index: 30;
  flex-shrink: 0;
  margin-right: 4px;
  margin-left: auto;
  width: 9rem;
}

.nexus-webkit-dropdown-inline .form-group {
  margin-bottom: 0 !important;
  margin-top: 0 !important;
}

.nexus-webkit-dropdown-inline .selectize-control .selectize-input {
  display: flex !important;
  align-items: center !important;
  flex-direction: row-reverse !important;
  flex-wrap: wrap !important;
  justify-content: flex-start !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
  font-family: 'Roboto', serif;
  font-size: 0.875rem !important;
  height: auto !important;
  min-height: 2.5rem !important;
  line-height: 1.25rem !important;
  padding: 0.25rem 0.5rem !important;
}

.nexus-webkit-dropdown-inline .selectize-control .selectize-input .item {
  font-size: 0.875rem !important;
  white-space: nowrap !important;
  line-height: 1.25rem !important;
}

.nexus-webkit-dropdown-inline .selectize-control .selectize-input input {
  font-size: 0.875rem !important;
  min-width: 0 !important;
  flex: 1 1 auto !important;
}

.nexus-webkit-dropdown-inline .selectize-control .selectize-dropdown {
  border-radius: 0.75rem !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
  font-family: 'Roboto', serif;
  font-size: 0.875rem !important;
}

.nexus-webkit-dropdown-inline .selectize-control .selectize-dropdown .option {
  font-size: 0.875rem !important;
  padding: 0.375rem 0.75rem !important;
}

/* Red asterisk for required relationship selector */
.nexus-required-star {
  color: #ef4444;
  font-size: 0.875rem;
  font-weight: 700;
  align-self: center;
  flex-shrink: 0;
  margin-left: 0.15rem;
  margin-right: 0.35rem;
}

/* Dropdown wrappers (hierarchy, layout, species) — matches chromium */
.nexus-webkit-dropdown-wrapper {
  flex-shrink: 0;
  width: 200px;
}

.nexus-webkit-dropdown-wide {
  flex: 1;
  flex-shrink: 1;
  width: auto !important;
  min-width: 150px;
}

/* Selectize styling for nexus dropdown wrappers — scaled for mobile */
.nexus-webkit-dropdown-wrapper .selectize-control .selectize-input {
  border-radius: 20px !important;
  display: flex !important;
  align-items: center !important;
  flex-wrap: wrap !important;
  background: #F7F9FC !important;
  border: 0 !important;
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.1),
              0 2px 4px -2px rgba(0, 0, 0, 0.1) !important;
  font-family: 'Roboto', serif;
  font-size: 0.875rem !important;
  height: auto !important;
  min-height: 2.5rem !important;
  line-height: 1.25rem !important;
  padding: 0.25rem 0.75rem !important;
}

.nexus-webkit-dropdown-wrapper .selectize-control .selectize-input .item {
  font-size: 0.875rem !important;
  white-space: nowrap !important;
  line-height: 1.25rem !important;
}

.nexus-webkit-dropdown-wrapper .selectize-control .selectize-input input {
  font-size: 0.875rem !important;
}

.nexus-webkit-dropdown-wrapper .selectize-control .selectize-dropdown {
  border-radius: 0.75rem !important;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -4px rgba(0, 0, 0, 0.1) !important;
  font-family: 'Roboto', serif;
  font-size: 0.875rem !important;
}

.nexus-webkit-dropdown-wrapper .selectize-control .selectize-dropdown .option {
  font-size: 0.875rem !important;
  padding: 0.375rem 0.75rem !important;
}

.nexus-webkit-dropdown-wrapper .form-group {
  margin-bottom: 0 !important;
}

/* Hide Data dropdown, Diagram tab, and Species filter on small screens */
@media (max-width: 640px) {
  .nexus-webkit-nav-group,
  #DivNexusSpeciesFilter {
    display: none !important;
  }
}

/* Nav group (Map tab + Data dropdown) — right-aligned */
.nexus-webkit-nav-group {
  display: flex;
  flex-direction: row;
  gap: 8px;
  margin-left: auto;
}

/* Map tab button — scaled for mobile */
.nexus-webkit-nav-btn {
  height: 36px;
  padding: 6px 12px;
  border-radius: 8px;
  text-align: center;
  color: #464F60; /* gColDarkText */
  background: #E9EAF5; /* gColGray2 */
  cursor: pointer;
  border: none;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}

.nexus-webkit-nav-btn:hover {
  background: #6B7280; /* gColBG2 */
  color: #F7F9FC; /* gColGray1 */
}

.nexus-webkit-nav-btn:active {
  background: #2FACBC; /* iColBlue */
}

/* Data dropdown — matches chromium yellow toggle */
.nexus-webkit-data-dropdown {
  position: relative;
}

.nexus-webkit-data-toggle {
  height: 36px;
  padding: 6px 12px;
  width: 110px;
  border-radius: 8px;
  text-align: center;
  color: #464F60; /* gColDarkText */
  background: #F2AF29; /* iColYellow */
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 6px;
  border: none;
}

.nexus-webkit-data-toggle:hover {
  background: #6B7280; /* gColBG2 */
  color: #F7F9FC;
}

.nexus-webkit-data-toggle:active {
  background: #2FACBC; /* iColBlue */
}

.nexus-webkit-data-label {
  font-size: 0.75rem;
}

.nexus-webkit-chevron {
  font-size: 0.7rem;
  margin-left: 4px;
}

/* Backdrop for closing dropdown */
.nexus-webkit-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
}

/* Dropdown menu — scaled for mobile */
.nexus-webkit-dropdown-menu {
  position: absolute;
  top: 100%;
  right: 0;
  width: 110px;
  margin-top: 8px;
  background: white;
  border: 1px solid #E5E7EB;
  border-radius: 8px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -4px rgba(0, 0, 0, 0.1);
  z-index: 50;
}

.nexus-webkit-dropdown-menu-item {
  padding: 8px 12px;
  height: 36px;
  cursor: pointer;
  border-radius: 8px;
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 0.75rem;
  color: #464F60; /* gColDarkText */
}

.nexus-webkit-dropdown-menu-item:hover {
  background: #F3F4F6;
}

/* D3 canvas — full width/height like chromium */
.nexus-webkit-canvas {
  width: 100%;
  height: 100%;
  position: relative;
  touch-action: pan-x pan-y pinch-zoom;
}

/* Canvas loading placeholder — centered spinner */
.nexus-webkit-canvas-loading {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  display: flex;
  align-items: center;
  justify-content: center;
}

.nexus-webkit-canvas svg {
  width: 100%;
  height: 100%;
  display: block;
}

/* Table content — matches chromium layout */
.nexus-webkit-table-content {
  position: relative;
  z-index: 30;
  width: 100%;
  height: 100%;
  overflow: visible;
  -webkit-overflow-scrolling: touch;
  padding: 8px 8px 8px 12px;
}

/* Scroll only the actual DataTable, not the button toolbar */
.nexus-webkit-table-content .dataTables_wrapper {
  width: 100%;
  overflow-x: auto;
  overflow-y: auto;
  max-height: calc(100% - 60px);
}

/* DT Buttons inside nexus webkit table — mobile-sized */
.nexus-webkit-table-content .dt-buttons {
  position: relative;
  z-index: 50;
}

.nexus-webkit-table-content .btn.btn-primary,
.nexus-webkit-table-content .dt-button.buttons-collection,
.nexus-webkit-table-content .btn.btn-info {
  height: auto !important;
  padding: 6px 12px !important;
  font-size: 0.75rem !important;
}


.nexus-webkit-table-content table {
  font-size: 0.75rem;
  border-collapse: collapse;
}

/* Table header — dark background, white text (matches chromiumUI) */
.nexus-webkit-table-content table.dataTable thead th {
  background: #6B7280 !important; /* gColBG3 */
  color: white !important;
  font-weight: 600 !important;
  font-size: 0.75rem !important;
  padding: 8px 6px !important;
}

.nexus-webkit-table-content table.dataTable thead th:first-child {
  border-radius: 8px 0 0 8px;
}

.nexus-webkit-table-content table.dataTable thead th:last-child {
  border-radius: 0 8px 8px 0;
}

/* Table cells — light background, dark text (matches chromiumUI) */
.nexus-webkit-table-content table.dataTable tbody td {
  background: #F7F9FC !important; /* gColGray1 */
  color: #2C3438 !important; /* gColDarkGreen */
  padding: 6px !important;
  border-bottom: 1px solid #E5E7EB; /* gColBorder */
}

.nexus-webkit-table-content table.dataTable tbody tr:hover td {
  background: #E9EAF5 !important;
}

/* Citation column — blue links */
.nexus-webkit-table-content td.dt-col-citation {
  color: #2563EB !important; /* gColEdBlue */
}

.nexus-webkit-table-content td.dt-col-citation a {
  color: #2563EB !important;
  text-decoration: underline;
}

/* Sort icons — white for dark header */
.nexus-webkit-table-content table.dataTable thead .sorting::after,
.nexus-webkit-table-content table.dataTable thead .sorting_asc::after,
.nexus-webkit-table-content table.dataTable thead .sorting_desc::after {
  color: white !important;
  opacity: 0.7;
}

/* Filter inputs — readable text */
.nexus-webkit-table-content table.dataTable thead input {
  font-size: 0.7rem !important;
  padding: 4px 6px !important;
  border: 1px solid #D1D5DB !important;
  border-radius: 4px !important;
  color: #2C3438 !important;
  background: white !important;
}

/* Info text — dark readable text */
.nexus-webkit-table-content .dataTables_info {
  color: #464F60 !important;
  font-size: 0.75rem !important;
  padding: 8px 0 !important;
}

.nexus-webkit-table-content .dataTables_paginate {
  margin-top: 12px;
}

.nexus-webkit-table-content .dataTables_paginate .paginate_button {
  min-width: 36px;
  min-height: 36px;
  padding: 6px 10px;
}

/* Back to diagram button — scaled for mobile */
.nexus-webkit-back-btn {
  height: 36px;
  padding: 6px 12px;
  border-radius: 8px;
  text-align: center;
  color: #464F60; /* gColDarkText */
  background: #E9EAF5; /* gColGray2 */
  cursor: pointer;
  border: none;
  position: absolute;
  top: 0.5rem;
  right: 0.5rem;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 0.875rem;
}

.nexus-webkit-back-btn:hover {
  background: #6B7280; /* gColBG2 */
  color: #F7F9FC; /* gColGray1 */
}

.nexus-webkit-back-btn:active {
  background: #2FACBC; /* iColBlue */
}

/* Bottom-right controls — scaled for mobile */
.nexus-webkit-bottom-controls {
  position: absolute;
  bottom: 60px;
  right: 12px;
  display: flex;
  flex-direction: column;
  gap: 6px;
  z-index: 30;
}

/* Control buttons — mobile-appropriate size */
.nexus-webkit-control-btn {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: #F7F9FC; /* gColGray1 */
  color: #374151; /* gColBG3 */
  box-shadow: 0 2px 4px -1px rgba(0, 0, 0, 0.1),
              0 1px 2px -1px rgba(0, 0, 0, 0.1);
  border: 0;
  cursor: pointer;
  padding: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: normal !important;
  line-height: 1 !important;
  font-size: 1rem;
}

.nexus-webkit-control-btn:hover {
  background: #F2AF29 !important; /* iColYellow */
  color: #464F60 !important; /* gColDarkText */
}

.nexus-webkit-control-btn:active {
  background: #F2AF29; /* iColYellow */
  color: #464F60; /* gColDarkText */
}

/* Nexus stats bar — matches chromium absolute bottom center */
.nexus-stats-bar {
  display: none;
  position: absolute;
  bottom: 24px;
  left: 50%;
  transform: translateX(-50%);
  z-index: 20;
  padding: 8px 16px;
  border-radius: 16px;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 1px 2px rgba(0, 0, 0, 0.05);
  font-family: 'Roboto', serif;
  font-size: 12px;
  color: #6B7280;
  pointer-events: none;
}

.nexus-stats-bar:not(.hidden) {
  display: flex;
  gap: 12px;
  flex-wrap: wrap;
}

.nexus-stats-badge {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  border-radius: 12px;
  font-size: 0.875rem;
  font-weight: 500;
  color: #464F60; /* gColDarkText */
}

.nexus-stats-dot {
  width: 10px;
  height: 10px;
  border-radius: 50%;
  flex-shrink: 0;
}

/* Nexus tooltip — matches chromium design */
.nexus-tooltip {
  position: fixed;
  z-index: 50;
  background: #F7F9FC; /* gColGray1 */
  border-radius: 32px;
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1),
              0 4px 6px -4px rgba(0, 0, 0, 0.1);
  border: 1px solid #E5E7EB; /* gColBorder */
  font-family: 'Roboto', serif;
  width: 340px;
  max-width: 90vw;
  overflow: hidden;
  padding: 0;
  opacity: 0;
  display: none;
  pointer-events: auto;
  transition: opacity 0.15s ease;
}

.nexus-tooltip-header {
  padding: 12px 16px 8px;
}

.nexus-tooltip-colloquial {
  color: #464F60; /* gColDarkText */
  font-family: 'Roboto', serif;
  font-weight: 600;
  font-size: 1.5rem;
}

.nexus-tooltip-latin {
  display: flex;
  flex-direction: row;
  align-items: center;
  color: #464F60;
  font-family: 'Roboto', serif;
  font-size: 1.5rem;
  padding-bottom: 8px;
}

.nexus-tooltip-interaction {
  color: #2FACBC; /* iColBlue */
  font-size: 1.25rem;
  margin-top: 4px;
}

.nexus-tooltip-wiki-link {
  color: #3F83F8; /* gColEdBlue */
  display: inline-block;
  text-decoration: none;
}

.nexus-tooltip-wiki-link:hover {
  text-decoration: underline;
}

.nexus-tooltip-images {
  padding-bottom: 12px;
}

.nexus-tooltip-loading {
  color: #708794; /* gColGray4 */
  font-size: 0.875rem;
  padding: 8px 0;
}

.nexus-tooltip-no-images {
  color: #708794;
  font-size: 0.875rem;
  padding: 4px 0;
}

.nexus-tooltip-slideshow {
  margin-top: 0;
}

.nexus-tooltip-img {
  width: 100% !important;
  border-radius: 32px 32px 0 0 !important;
  height: auto !important;
}

.nexus-tooltip-nav {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 16px !important;
  padding: 12px !important;
  background: #F7F9FC !important;
}

.nexus-tooltip-nav button {
  padding: 8px 16px !important;
  border-radius: 12px !important;
  background: #374151 !important; /* gColBG3 */
  color: rgba(255, 255, 255, 0.8) !important;
  font-size: 1.25rem !important;
  font-weight: bold !important;
  cursor: pointer !important;
  transition: background-color 0.2s, color 0.2s !important;
  border: none !important;
}

.nexus-tooltip-nav button:hover {
  background: #F2AF29 !important; /* iColYellow */
  color: #464F60 !important;
}

.nexus-tooltip-counter {
  font-size: 1.25rem !important;
  color: #464F60 !important;
  font-family: 'Roboto', serif !important;
  min-width: 80px !important;
  text-align: center !important;
}

.nexus-tooltip-attribution {
  font-size: 0.875rem;
  color: #708794; /* gColGray4 */
  margin-top: 4px;
  text-align: center;
}

/* ======================================================================
 * ==== HARMONIZATION BLOCK (mobile) — appended 2026-04-22 ==============
 * ==== Mirrors the desktop tokens + harmonized components. Surfaces  ===
 * ==== stay LIGHT (Framework7 theme); only the interaction register  ===
 * ==== (yellow glow, radius, transitions) matches chromium.          ===
 * ====================================================================== */

:root {
  --gaia-accent: #F2AF29;
  --gaia-accent-bg: rgba(242, 175, 41, 0.85);
  --gaia-accent-border: rgba(242, 175, 41, 0.40);
  --gaia-accent-glow: 0 0 16px rgba(242, 175, 41, 0.25);
  --gaia-accent-glow-strong: 0 0 20px rgba(242, 175, 41, 0.35);

  --gaia-danger: #dc2626;
  --gaia-danger-hover: #b91c1c;
  --gaia-danger-bg: rgba(220, 38, 38, 0.90);
  --gaia-danger-border: rgba(220, 38, 38, 0.40);
  --gaia-danger-glow: 0 0 16px rgba(220, 38, 38, 0.25);
  --gaia-danger-glow-strong: 0 0 20px rgba(220, 38, 38, 0.35);

  --gaia-radius-tile: 14px;
  --gaia-radius-panel: 20px;
  --gaia-shadow-soft: 0 2px 8px rgba(0, 0, 0, 0.10);
  --gaia-transition: 200ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* ---- Mobile search button: yellow glow on hover/active -------------- */
.gallery-mobile-search-btn {
  transition: box-shadow var(--gaia-transition), background var(--gaia-transition) !important;
}
.gallery-mobile-search-btn:hover,
.gallery-mobile-search-btn:active,
.gallery-mobile-search-btn:focus {
  box-shadow: var(--gaia-accent-glow) !important;
  outline: none !important;
}

/* ---- Mobile relationship select (legacy pill fallback): focus ring -- */
.gallery-mobile-relationship-section select {
  transition: border-color var(--gaia-transition), box-shadow var(--gaia-transition) !important;
}
.gallery-mobile-relationship-section select:focus {
  outline: none;
  border-color: var(--gaia-accent) !important;
  box-shadow: var(--gaia-accent-glow) !important;
}

/* ---- Danger zone heading icon (mobile) ------------------------------ */
.gaia-danger-heading-icon {
  color: var(--gaia-danger);
  margin-right: 8px;
  font-size: 1em;
}

/* Destructive button on mobile. */
.gaia-btn-danger {
  display: inline-flex !important;
  align-items: center; gap: 8px;
  padding: 10px 20px !important;
  background: var(--gaia-danger-bg) !important;
  color: white !important;
  border: 1px solid var(--gaia-danger-border) !important;
  border-radius: var(--gaia-radius-tile) !important;
  font-family: 'Inter', sans-serif !important;
  font-weight: 600 !important; font-size: 14px !important;
  cursor: pointer !important; text-decoration: none !important;
  box-shadow: var(--gaia-shadow-soft);
  transition: background var(--gaia-transition), box-shadow var(--gaia-transition), border-color var(--gaia-transition) !important;
}
.gaia-btn-danger:hover {
  background: var(--gaia-danger-hover) !important;
  box-shadow: var(--gaia-danger-glow) !important;
}
.gaia-btn-danger:active,
.gaia-btn-danger:focus {
  box-shadow: var(--gaia-danger-glow-strong) !important;
  outline: none;
}

/* ======================================================================
 * ---- Mobile modal light-glass (:has(.gaia-chromium-modal-marker)) --
 * Shares the marker class with chromium, styled as light glass to fit
 * Framework7's light theme.
 * ====================================================================== */
.modal:has(.gaia-chromium-modal-marker) .modal-content {
  background: rgba(255, 255, 255, 0.92) !important;
  backdrop-filter: blur(16px);
  -webkit-backdrop-filter: blur(16px);
  border: 1px solid rgba(211, 211, 211, 0.6) !important;
  border-radius: var(--gaia-radius-panel) !important;
  box-shadow: var(--gaia-shadow-soft) !important;
  color: #464F60;
}
.modal:has(.gaia-chromium-modal-marker) .modal-header,
.modal:has(.gaia-chromium-modal-marker) .modal-body,
.modal:has(.gaia-chromium-modal-marker) .modal-footer {
  background: transparent !important;
  border-color: rgba(211, 211, 211, 0.4) !important;
}
.modal:has(.gaia-chromium-modal-marker) .modal-title {
  color: #464F60 !important; font-weight: 600;
}
.modal:has(.gaia-chromium-modal-marker) .form-group,
.modal:has(.gaia-chromium-modal-marker) .selectize-control,
.modal:has(.gaia-chromium-modal-marker) .form-control,
.modal:has(.gaia-chromium-modal-marker) .selectize-input {
  width: 100% !important;
}
.modal:has(.gaia-chromium-modal-marker) .form-control,
.modal:has(.gaia-chromium-modal-marker) .selectize-input {
  border-radius: var(--gaia-radius-tile) !important;
  border: 1px solid #D3D3D3 !important;
  padding-right: 2.25rem !important;
  transition: border-color var(--gaia-transition), box-shadow var(--gaia-transition) !important;
}
.modal:has(.gaia-chromium-modal-marker) .form-control:focus,
.modal:has(.gaia-chromium-modal-marker) .selectize-control.focus .selectize-input,
.modal:has(.gaia-chromium-modal-marker) .selectize-input.focus {
  border-color: var(--gaia-accent) !important;
  box-shadow: var(--gaia-accent-glow) !important;
  outline: none !important;
}
.modal:has(.gaia-chromium-modal-marker) .selectize-control.single .selectize-input:after {
  content: "\f078" !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
  font-weight: 900 !important; border: none !important;
  color: var(--gaia-accent) !important; font-size: 12px !important;
  width: auto !important; height: auto !important; margin: 0 !important;
  right: 14px !important; top: 50% !important;
  transform: translateY(-50%) !important;
  transition: transform var(--gaia-transition) !important;
}
.modal:has(.gaia-chromium-modal-marker) .selectize-control.single.dropdown-active .selectize-input:after {
  transform: translateY(-50%) rotate(180deg) !important;
}
.modal:has(.gaia-chromium-modal-marker) .selectize-dropdown {
  border-radius: var(--gaia-radius-panel) !important;
  border: 1px solid rgba(211, 211, 211, 0.6) !important;
  overflow: hidden !important; padding: 4px !important;
}
.modal:has(.gaia-chromium-modal-marker) .selectize-dropdown-content {
  border-radius: calc(var(--gaia-radius-panel) - 4px) !important;
  overflow: hidden !important;
}
.modal:has(.gaia-chromium-modal-marker) .selectize-dropdown .option {
  transition: background var(--gaia-transition) !important;
  border-radius: 10px !important;
}
.modal:has(.gaia-chromium-modal-marker) .selectize-dropdown .option:hover,
.modal:has(.gaia-chromium-modal-marker) .selectize-dropdown .option.active {
  background: rgba(242, 175, 41, 0.12) !important;
}
.modal:has(.gaia-chromium-modal-marker) .selectize-dropdown .option.selected,
.modal:has(.gaia-chromium-modal-marker) .selectize-dropdown .option[aria-selected="true"],
.modal:has(.gaia-chromium-modal-marker) .selectize-dropdown .active.selected {
  background: rgba(242, 175, 41, 0.22) !important;
  color: #464F60 !important;
}
.modal:has(.gaia-chromium-modal-marker) .modal-footer button {
  border-radius: var(--gaia-radius-tile) !important;
  padding: 0.5rem 1.25rem;
  transition: box-shadow var(--gaia-transition), background var(--gaia-transition) !important;
}
.modal:has(.gaia-chromium-modal-marker) .modal-footer #saveProfileMobile,
.modal:has(.gaia-chromium-modal-marker) .modal-footer #saveProfile,
.modal:has(.gaia-chromium-modal-marker) .modal-footer #saveLanguage,
.modal:has(.gaia-chromium-modal-marker) .modal-footer .btn-primary {
  background: var(--gaia-accent-bg, #F2AF29) !important;
  border: 1px solid var(--gaia-accent-border) !important;
  color: #1f2937 !important;
  font-weight: 500;
}
.modal:has(.gaia-chromium-modal-marker) .modal-footer #saveProfileMobile:hover,
.modal:has(.gaia-chromium-modal-marker) .modal-footer #saveProfile:hover,
.modal:has(.gaia-chromium-modal-marker) .modal-footer #saveLanguage:hover,
.modal:has(.gaia-chromium-modal-marker) .modal-footer .btn-primary:hover {
  box-shadow: var(--gaia-accent-glow-strong) !important;
}

/* ======================================================================
 * ---- Mobile relationship picker (custom popover UI) ----------------
 * Wrapper .gallery-mobile-dropdown-inline gets .is-custom-picker once
 * relationshipPicker.js initialises. Native selectize is hidden; a
 * compact icon trigger + popover is painted instead. Legacy 140px
 * width is overridden to fit the icon only.
 * ====================================================================== */

#galleryLanding .gallery-mobile-dropdown-inline.is-custom-picker,
#nexusLanding  .gallery-mobile-dropdown-inline.is-custom-picker,
#galleryResults .gallery-mobile-dropdown-inline.is-custom-picker,
.gallery-mobile-dropdown-inline.is-custom-picker {
  width: auto !important;
  min-width: 2.5rem !important;
}

.gallery-mobile-dropdown-inline.is-custom-picker .form-group,
.gallery-mobile-dropdown-inline.is-custom-picker .selectize-control {
  position: absolute !important;
  width: 1px !important; height: 1px !important;
  overflow: hidden !important; opacity: 0 !important;
  pointer-events: none !important; left: -9999px !important;
}

.gallery-mobile-dropdown-inline .gaia-rel-trigger {
  width: 2.5rem;   /* 40px — just enough for the icon */
  height: 48px;    /* matches mobile search pill height */
  background: transparent;
  border: none;
  border-left: 1px solid rgba(55, 65, 81, 0.15);
  border-radius: 0; cursor: pointer;
  position: relative; display: flex;
  align-items: center; justify-content: center;
  color: #708794; padding: 0;
  margin-left: 0.15rem;
  transition: color var(--gaia-transition), background var(--gaia-transition);
}
.gallery-mobile-dropdown-inline .gaia-rel-trigger i {
  font-size: 1.25rem; line-height: 1;
}
.gallery-mobile-dropdown-inline .gaia-rel-trigger:hover,
.gallery-mobile-dropdown-inline .gaia-rel-trigger:active {
  color: #464F60;
  background: rgba(0, 0, 0, 0.03);
}
.gallery-mobile-dropdown-inline .gaia-rel-trigger.has-items,
.gallery-mobile-dropdown-inline .gaia-rel-trigger.has-items:hover,
.gallery-mobile-dropdown-inline .gaia-rel-trigger.has-items:active {
  color: var(--gaia-accent);
}
.gallery-mobile-dropdown-inline .gaia-rel-trigger.is-open {
  color: var(--gaia-accent);
  background: rgba(242, 175, 41, 0.08);
}
.gallery-mobile-dropdown-inline .gaia-rel-badge {
  position: absolute;
  top: 0.4rem; right: 0.15rem;
  min-width: 1rem; height: 1rem;
  padding: 0 0.25rem;
  border-radius: 9999px;
  background: var(--gaia-accent);
  color: #1f2937;
  font-size: 0.65rem; font-weight: 700;
  font-family: 'Inter', sans-serif;
  line-height: 1rem; text-align: center;
  box-shadow: 0 0 0 2px #F7F9FC;
  pointer-events: none;
}
.gallery-mobile-dropdown-inline .sr-only {
  position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px;
  overflow: hidden; clip: rect(0, 0, 0, 0); white-space: nowrap; border: 0;
}

/* Mobile popover (shinyWebkit.css doesn't inherit from chromium, so
   we redeclare the popover styles here). */
.gaia-rel-popover {
  position: absolute;
  z-index: 10000;
  min-width: 17rem;
  max-width: calc(100vw - 16px);
  background: #FFFFFF;
  border: 1px solid rgba(211, 211, 211, 0.6);
  border-radius: 16px;
  box-shadow: 0 12px 40px rgba(0, 0, 0, 0.18), 0 2px 6px rgba(0, 0, 0, 0.08);
  overflow: hidden;
  font-family: 'Inter', sans-serif;
  animation: gaia-rel-pop-in 140ms cubic-bezier(0.2, 0.9, 0.2, 1);
}
@keyframes gaia-rel-pop-in {
  from { opacity: 0; transform: translateY(-4px) scale(0.98); }
  to   { opacity: 1; transform: translateY(0)    scale(1); }
}
.gaia-rel-popover-header {
  display: flex; align-items: center; justify-content: space-between;
  gap: 12px; padding: 0.85rem 1.1rem;
  background: #F7F9FC; border-bottom: 1px solid #F1F0F4;
}
.gaia-rel-popover-title {
  font-weight: 600; font-size: 1.05rem; color: #464F60; letter-spacing: 0.01em;
}
.gaia-rel-clear {
  background: transparent; border: none; color: var(--gaia-danger);
  font-size: 0.95rem; font-weight: 500; cursor: pointer;
  padding: 5px 12px; border-radius: 8px;
  transition: background var(--gaia-transition);
}
.gaia-rel-clear:hover,
.gaia-rel-clear:active { background: rgba(220, 38, 38, 0.1); }
.gaia-rel-popover-body { padding: 12px 14px 14px; }
.gaia-rel-section-label {
  font-size: 0.8rem; font-weight: 600; color: #708794;
  text-transform: uppercase; letter-spacing: 0.05em; margin: 8px 4px 10px;
}
.gaia-rel-selected-row {
  display: flex; flex-wrap: wrap; gap: 8px; margin-bottom: 4px;
}
.gaia-rel-chip {
  display: inline-flex; align-items: center; gap: 6px;
  background: rgba(242, 175, 41, 0.18);
  border: 1px solid var(--gaia-accent-border);
  color: #1f2937; border-radius: 10px;
  padding: 5px 6px 5px 12px;
  font-size: 1rem; font-weight: 500; line-height: 1.25;
  max-width: 100%;
}
.gaia-rel-chip-label {
  white-space: nowrap; overflow: hidden; text-overflow: ellipsis; max-width: 12rem;
}
.gaia-rel-chip-remove {
  display: inline-flex; align-items: center; justify-content: center;
  background: transparent; border: none; color: var(--gaia-danger);
  cursor: pointer; width: 1.8rem; height: 1.8rem; border-radius: 8px;
  padding: 0; margin-left: 2px;
  transition: background var(--gaia-transition), transform var(--gaia-transition);
}
.gaia-rel-chip-remove:hover,
.gaia-rel-chip-remove:active { background: rgba(220, 38, 38, 0.15); }
.gaia-rel-chip-remove i { font-size: 0.95rem; }
.gaia-rel-divider {
  height: 1px; background: #F1F0F4; margin: 12px 0 4px;
}
.gaia-rel-options-list {
  display: flex; flex-direction: column; gap: 2px;
  max-height: 16rem; overflow-y: auto;
  margin: 0 -4px; padding: 0 4px;
  -webkit-overflow-scrolling: touch;
}
.gaia-rel-option {
  display: flex; align-items: center; gap: 12px;
  background: transparent; border: none;
  padding: 0.75rem 0.85rem; border-radius: 10px;
  font-size: 1.05rem; color: #1f2937;
  text-align: left; cursor: pointer;
  transition: background var(--gaia-transition);
  width: 100%; line-height: 1.35;
}
.gaia-rel-option:hover,
.gaia-rel-option:active { background: rgba(242, 175, 41, 0.12); }
.gaia-rel-option i {
  color: var(--gaia-accent); font-size: 0.9rem;
  width: 1.1rem; text-align: center; flex-shrink: 0;
}
.gaia-rel-empty {
  padding: 0.7rem 0.85rem; color: #708794;
  font-style: italic; font-size: 0.95rem;
}

/* ======================================================================
 * ---- Forager extended search bar inputs (mobile) -------------------
 * Same scoping as chromium — #foragerSearchBarExtendedItems. If the
 * container isn't present on a given mobile module the rules are
 * no-ops. Light surface (Framework7 theme), shared interaction tokens.
 * ====================================================================== */
#foragerSearchBarExtendedItems .form-control,
#foragerSearchBarExtendedItems .selectize-input {
  border: 1px solid #D3D3D3 !important;
  border-radius: var(--gaia-radius-tile) !important;
  box-shadow: none !important;
  transition: border-color var(--gaia-transition), box-shadow var(--gaia-transition) !important;
}
#foragerSearchBarExtendedItems .form-control:hover,
#foragerSearchBarExtendedItems .selectize-control:hover .selectize-input {
  border-color: rgba(55, 65, 81, 0.25) !important;
}
#foragerSearchBarExtendedItems .form-control:focus,
#foragerSearchBarExtendedItems .selectize-control.focus .selectize-input,
#foragerSearchBarExtendedItems .selectize-control .selectize-input.focus {
  border-color: var(--gaia-accent) !important;
  box-shadow: var(--gaia-accent-glow) !important;
  outline: none !important;
}

#foragerSearchBarExtendedItems .selectize-control .selectize-dropdown {
  border-radius: var(--gaia-radius-panel) !important;
  border: 1px solid rgba(211, 211, 211, 0.6) !important;
  overflow: hidden !important;
  padding: 4px !important;
}
#foragerSearchBarExtendedItems .selectize-control .selectize-dropdown-content {
  border-radius: calc(var(--gaia-radius-panel) - 4px) !important;
  overflow: hidden !important;
}
#foragerSearchBarExtendedItems .selectize-control .selectize-dropdown .option {
  border-radius: 10px !important;
  transition: background var(--gaia-transition) !important;
}
#foragerSearchBarExtendedItems .selectize-control .selectize-dropdown .option:hover,
#foragerSearchBarExtendedItems .selectize-control .selectize-dropdown .option.active {
  background: rgba(242, 175, 41, 0.12) !important;
}
#foragerSearchBarExtendedItems .selectize-control .selectize-dropdown .option.selected,
#foragerSearchBarExtendedItems .selectize-control .selectize-dropdown .option[aria-selected="true"],
#foragerSearchBarExtendedItems .selectize-control .selectize-dropdown .active.selected {
  background: rgba(242, 175, 41, 0.22) !important;
  color: inherit !important;
}

#foragerSearchBarExtendedItems .selectize-control.single .selectize-input {
  padding-right: 2.25rem !important;
}
#foragerSearchBarExtendedItems .selectize-control.single .selectize-input:after {
  content: "\f078" !important;
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome !important;
  font-weight: 900 !important;
  border: none !important;
  color: var(--gaia-accent) !important;
  font-size: 12px !important;
  width: auto !important; height: auto !important; margin: 0 !important;
  right: 14px !important; top: 50% !important;
  transform: translateY(-50%) !important;
  transition: transform var(--gaia-transition) !important;
}
#foragerSearchBarExtendedItems .selectize-control.single.dropdown-active .selectize-input:after {
  transform: translateY(-50%) rotate(180deg) !important;
}

#foragerSearchBarExtendedItems .input-daterange .input-group-addon {
  background: transparent !important;
  border: none !important;
  color: #708794;
  padding: 0 8px;
}

/* ======================================================================
 * ---- Datepicker popup (mobile) -------------------------------------
 * bootstrap-datepicker appends its popup to <body>, so the same rules
 * apply regardless of entry point. This CSS file is loaded in webkit,
 * so we restate them here (shinyWebkit.css doesn't inherit from
 * chromium). Mobile tweaks: larger tap targets on day cells, iOS
 * smooth-scroll for long month listings.
 * ====================================================================== */
.datepicker.datepicker-dropdown {
  background: #FFFFFF !important;
  border: 1px solid rgba(211, 211, 211, 0.6) !important;
  border-radius: var(--gaia-radius-panel) !important;
  box-shadow: 0 8px 40px rgba(0, 0, 0, 0.12), 0 1px 3px rgba(0, 0, 0, 0.06) !important;
  padding: 10px !important;
  font-family: 'Inter', sans-serif !important;
  color: #464F60 !important;
  -webkit-overflow-scrolling: touch;
}
.datepicker.datepicker-dropdown:before,
.datepicker.datepicker-dropdown:after {
  display: none !important;
}
.datepicker table tr th.datepicker-switch,
.datepicker table tr th.prev,
.datepicker table tr th.next {
  background: transparent !important;
  border-radius: 10px !important;
  color: #464F60 !important;
  font-weight: 600 !important;
  transition: background var(--gaia-transition), color var(--gaia-transition) !important;
}
.datepicker table tr th.datepicker-switch:hover,
.datepicker table tr th.datepicker-switch:active,
.datepicker table tr th.prev:hover,
.datepicker table tr th.prev:active,
.datepicker table tr th.next:hover,
.datepicker table tr th.next:active {
  background: rgba(242, 175, 41, 0.12) !important;
  color: var(--gaia-accent) !important;
}
.datepicker table tr th.prev,
.datepicker table tr th.next {
  font-size: 0 !important;
}
.datepicker table tr th.prev:before,
.datepicker table tr th.next:before {
  font-family: "Font Awesome 6 Free", "Font Awesome 5 Free", FontAwesome;
  font-weight: 900;
  font-size: 12px;
  color: var(--gaia-accent);
  display: inline-block;
  line-height: 1;
}
.datepicker table tr th.prev:before  { content: "\f053"; }
.datepicker table tr th.next:before  { content: "\f054"; }

.datepicker table tr th.dow {
  color: #708794 !important;
  font-weight: 500 !important;
  font-size: 11px !important;
  text-transform: uppercase;
  letter-spacing: 0.04em;
  padding-top: 4px !important;
}
.datepicker table tr td.day {
  border-radius: 10px !important;
  color: #464F60 !important;
  min-width: 2rem;        /* bigger tap target for mobile */
  min-height: 2rem;
  transition: background var(--gaia-transition), color var(--gaia-transition) !important;
}
.datepicker table tr td.day:hover,
.datepicker table tr td.day:active {
  background: rgba(242, 175, 41, 0.12) !important;
  color: #1f2937 !important;
}
.datepicker table tr td.day.old,
.datepicker table tr td.day.new {
  color: #c9ced9 !important;
}
.datepicker table tr td.day.disabled,
.datepicker table tr td.day.disabled:hover {
  color: #d1d5db !important;
  background: transparent !important;
  cursor: not-allowed;
}
.datepicker table tr td.today,
.datepicker table tr td.today:hover,
.datepicker table tr td.today.disabled {
  background: rgba(242, 175, 41, 0.18) !important;
  color: #1f2937 !important;
  border: 1px solid var(--gaia-accent-border) !important;
}
.datepicker table tr td.range,
.datepicker table tr td.range:hover {
  background: rgba(242, 175, 41, 0.10) !important;
  border-radius: 0 !important;
  color: #464F60 !important;
}
.datepicker table tr td.range.day.range-start {
  border-radius: 10px 0 0 10px !important;
}
.datepicker table tr td.range.day.range-end {
  border-radius: 0 10px 10px 0 !important;
}
.datepicker table tr td.active.day,
.datepicker table tr td.active.day:hover,
.datepicker table tr td.active.day.focused,
.datepicker table tr td.active.day.disabled,
.datepicker table tr td.active.day.disabled:hover {
  background: var(--gaia-accent) !important;
  color: #1f2937 !important;
  border: 1px solid var(--gaia-accent-border) !important;
  box-shadow: var(--gaia-accent-glow) !important;
}
.datepicker table tr td span.month,
.datepicker table tr td span.year {
  border-radius: 10px !important;
  color: #464F60 !important;
  transition: background var(--gaia-transition), color var(--gaia-transition) !important;
}
.datepicker table tr td span.month:hover,
.datepicker table tr td span.year:hover {
  background: rgba(242, 175, 41, 0.12) !important;
  color: #1f2937 !important;
}
.datepicker table tr td span.month.active,
.datepicker table tr td span.year.active,
.datepicker table tr td span.month.focused,
.datepicker table tr td span.year.focused {
  background: var(--gaia-accent) !important;
  color: #1f2937 !important;
  box-shadow: var(--gaia-accent-glow) !important;
}

/* ======================================================================
 * ---- Forager extended search (mobile, actual selectors) ------------
 * Mobile uses container class .gaia-extended-search (NOT
 * #foragerSearchBarExtendedItems like chromium) and native <select>/
 * <input> elements (selectize=FALSE). This block overrides the legacy
 * 8px-radius neutral styling with the sidebar-family tokens: 14px
 * tile radius, accent-yellow focus ring + glow, yellow caret on the
 * native select.
 * ====================================================================== */
.gaia-extended-search select,
.gaia-extended-search input[type="text"],
.gaia-extended-search .form-control,
.gaia-extended-search input[type="date"],
.gaia-extended-search .input-daterange input {
  border-radius: var(--gaia-radius-tile) !important;
  transition: border-color var(--gaia-transition), box-shadow var(--gaia-transition) !important;
}
.gaia-extended-search select:focus,
.gaia-extended-search input[type="text"]:focus,
.gaia-extended-search input[type="date"]:focus,
.gaia-extended-search .form-control:focus,
.gaia-extended-search .input-daterange input:focus {
  border-color: var(--gaia-accent) !important;
  box-shadow: var(--gaia-accent-glow) !important;
  outline: none !important;
}

/* Swap the grey chevron on the native <select> for accent-yellow. */
.gaia-extended-search select {
  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='%23F2AF29' d='M6 8L1 3h10z'/%3E%3C/svg%3E") !important;
}

/* Date range "to" separator — transparent so the two inputs read as
   a pair, same as desktop. */
.gaia-extended-search .input-daterange .input-group-addon {
  background: transparent !important;
  border: none !important;
  color: #708794 !important;
  padding: 0 8px !important;
}

/* ==== END HARMONIZATION BLOCK (mobile) ============================== */