@import "tailwindcss";

@import '@skeletonlabs/skeleton';
@import '@skeletonlabs/skeleton/optional/presets';
@import '@skeletonlabs/skeleton/themes/cerberus';

@source '../../node_modules/@skeletonlabs/skeleton-react/dist';

:root {
  /* Light mode sophisticated grey palette */
  --background: #fafafa;
  --foreground: #1a1a1a;
  --surface-1: #ffffff;
  --surface-2: #f5f5f5;
  --surface-3: #eeeeee;
  --border-1: #e0e0e0;
  --border-2: #d1d5db;
  --border-3: #9ca3af;
  --text-primary: #1f2937;
  --text-secondary: #4b5563;
  --text-tertiary: #6b7280;
  --text-muted: #9ca3af;

  /* New color palette for panels and sidebars */
  --panel-lightest: #E4E4E5;
  --panel-light: #BEBEBE;
  --panel-medium: #949494;
  --panel-dark: #7A7A7A;
  --panel-darker: #545454;
  --panel-darkest: #3C3C3C;
}

@theme inline {
  --color-background: var(--background);
  --color-foreground: var(--foreground);
  --font-sans: var(--font-geist-sans);
  --font-mono: var(--font-geist-mono);
}

@media (prefers-color-scheme: dark) {
  :root {
    /* Dark mode sophisticated black/grey palette */
    --background: #0f0f0f;
    --foreground: #e5e5e5;
    --surface-1: #1a1a1a;
    --surface-2: #2a2a2a;
    --surface-3: #363636;
    --border-1: #2a2a2a;
    --border-2: #404040;
    --border-3: #525252;
    --text-primary: #f5f5f5;
    --text-secondary: #d1d5db;
    --text-tertiary: #a1a1aa;
    --text-muted: #71717a;

    /* New color palette for panels and sidebars - darker versions for dark mode */
    --panel-lightest: #7A7A7A;
    --panel-light: #545454;
    --panel-medium: #3C3C3C;
    --panel-dark: #2A2A2A;
    --panel-darker: #1F1F1F;
    --panel-darkest: #141414;
  }
}

body {
  background: var(--background);
  color: var(--foreground);
  font-family: Arial, Helvetica, sans-serif;
}

/* Map control theming that follows sophisticated grey palette */
.map-control {
  position: absolute;
  bottom: 50px;
  right: 12px;
  z-index: 2;
  background: var(--surface-1);
  color: var(--text-primary);
  padding: 12px;
  border-radius: 10px;
  font-size: 13px;
  width: 240px;
  backdrop-filter: blur(8px);
  border: 1px solid var(--border-1);
  box-shadow: 0 6px 18px rgba(0,0,0,0.15);
}

.map-select {
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border-2);
  padding: 4px 6px;
  border-radius: 4px;
}

/* control panel helper classes */
.mc-title {
  margin-bottom: 8px;
  font-weight: 700;
  font-size: 14px;
}

.mc-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  margin-bottom: 8px;
}

.mc-label {
  flex: 1;
  font-size: 13px;
  color: var(--text-secondary);
}

.mc-range {
  width: 100%;
  -webkit-appearance: none;
  appearance: none;
  height: 6px;
  background: var(--surface-3);
  border-radius: 6px;
}
.mc-range::-webkit-slider-thumb {
  -webkit-appearance: none;
  width: 14px;
  height: 14px;
  border-radius: 50%;
  background: var(--text-primary);
  box-shadow: 0 1px 3px rgba(0,0,0,0.2);
}

/* Option styling: native dropdowns sometimes ignore inherited styles; try to explicitly set colors */
.map-select option {
  color: var(--foreground) !important;
  background: var(--background) !important;
}

/* WebKit / Blink specific appearance tweaks for better contrast */
.map-select {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
}

.zoom-btn {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--surface-1);
  color: var(--text-primary);
  border: 1px solid var(--border-1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
}

@media (prefers-color-scheme: dark) {
  .map-control { 
    background: var(--surface-1);
    border: 1px solid var(--border-1); 
    box-shadow: 0 8px 24px rgba(0,0,0,0.4); 
  }
  .map-select { 
    background: var(--surface-2);
    border: 1px solid var(--border-2); 
  }
  .zoom-btn { 
    background: var(--surface-2); 
    color: var(--text-primary); 
    border: 1px solid var(--border-2); 
  }
}

/* enhance label and control spacing */
.map-control .mc-row { display: flex; gap: 8px; align-items: center; margin-bottom: 8px; }
.map-control .mc-label { flex: 1; font-size: 13px; color: var(--text-secondary); }
.map-control .mc-title { margin-bottom: 8px; font-weight: 700; color: var(--text-primary); }

/* style sliders */
.map-control input[type="range"] { appearance: none; height: 6px; background: var(--surface-3); border-radius: 6px; }
.map-control input[type="range"]::-webkit-slider-thumb { -webkit-appearance: none; width: 14px; height: 14px; border-radius: 50%; background: var(--text-primary); box-shadow: 0 1px 3px rgba(0,0,0,0.2); cursor: pointer; }
.map-control input[type="range"]::-moz-range-thumb { width: 14px; height: 14px; border-radius: 50%; background: var(--text-primary); cursor: pointer; }

/* compact checkbox */
.map-control input[type="checkbox"] { width: 16px; height: 16px; }

.zoom-btn {
  width: 40px;
  height: 40px;
  border-radius: 8px;
  background: var(--surface-1);
  color: var(--text-primary);
  border: 1px solid var(--border-1);
  cursor: pointer;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  font-weight: 700;
  font-size: 18px;
  line-height: 1;
}
.zoom-btn:hover { 
  transform: translateY(-1px); 
  opacity: 0.95; 
  background: var(--surface-2);
}

/* Mapbox popup theming to match sophisticated palette */
.mapboxgl-popup {
  --popup-bg: var(--surface-1);
  --popup-fg: var(--text-primary);
}
.mapboxgl-popup-content {
  background: var(--popup-bg) !important;
  color: var(--popup-fg) !important;
  border-radius: 8px !important;
  padding: 8px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.15) !important;
  border: 1px solid var(--border-1) !important;
  font-size: 13px;
}
.mapboxgl-popup-tip {
  filter: drop-shadow(0 2px 6px rgba(0,0,0,0.1));
}
.mapboxgl-popup-close-button {
  color: var(--popup-fg) !important;
  opacity: 0.7;
}
.mapboxgl-popup a { color: inherit; }

/* Custom React popup styles */
.custom-popup { 
  transition: opacity 180ms ease, transform 180ms cubic-bezier(.2,.8,.2,1);
  opacity: 0; 
  transform: translateY(-6px) scale(0.98);
  z-index: 50;
}
.custom-popup.visible { opacity: 1; transform: translateY(-10px) scale(1); }
.mapbox-popup-inner button[aria-label="Close popup"] { border-radius: 6px; padding: 6px; background: var(--surface-2); }
.mapbox-popup-inner button[aria-label="Close popup"]:focus { outline: 2px solid var(--border-3); }
.mapbox-popup-inner button[aria-label="Close popup"] { cursor: pointer; }

/* Directions sidebar (left-side, full-height, collapsible) */
/* Directions sidebar styling is now handled via Tailwind classes in the component. Legacy CSS removed. */

/* MapboxGeocoder styling override scoped to the directions sidebar */
.directions-sidebar-geocoder .mapboxgl-ctrl-geocoder {
  background: transparent;
  padding: 0;
}
.directions-sidebar-geocoder .mapboxgl-ctrl-geocoder input[type="text"],
.directions-sidebar-geocoder .mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--input {
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border-2);
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  box-shadow: none;
}
.directions-sidebar-geocoder .mapboxgl-ctrl-geocoder input[type="text"]::placeholder,
.directions-sidebar-geocoder .mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--input::placeholder {
  color: var(--text-muted);
}
.directions-sidebar-geocoder .mapboxgl-ctrl-geocoder input[type="text"]:focus,
.directions-sidebar-geocoder .mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--input:focus {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255, 126, 95, 0.12);
  border-color: rgba(255,126,95,0.6);
}
.directions-sidebar-geocoder .mapboxgl-ctrl-geocoder--suggestions,
.directions-sidebar-geocoder .suggestions {
  background: var(--surface-1);
  color: var(--text-primary);
  border: 1px solid var(--border-1);
  border-radius: 0.5rem;
  overflow: hidden;
}

.directions-sidebar-geocoder .custom-suggestions { z-index: 60; }
.directions-sidebar-geocoder .mapboxgl-ctrl-geocoder--suggestions .suggestion,
.directions-sidebar-geocoder .suggestions .suggestion {
  padding: 0.5rem 0.75rem;
}
.directions-sidebar-geocoder .mapboxgl-ctrl-geocoder--suggestions .suggestion:hover,
.directions-sidebar-geocoder .suggestions .suggestion:hover {
  background: var(--surface-2);
}

/* custom inline geocoder input and dropdown styling */
.directions-sidebar-geocoder input[type="text"] {
  background: var(--surface-2);
  color: var(--text-primary);
  border: 1px solid var(--border-2);
  padding: 0.5rem 0.75rem;
  border-radius: 0.5rem;
  width: 100%;
  box-sizing: border-box;
}
.directions-sidebar-geocoder .custom-suggestions button {
  width: 100%;
  text-align: left;
  padding: 0.5rem 0.75rem;
}
.directions-sidebar-geocoder .custom-suggestions button:hover { 
  background: var(--surface-3); 
}

/* hide the magnifying/search icon inside the embedded geocoder input */
.directions-sidebar-geocoder .mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--icon {
  display: none !important;
}

/* make the geocoder control and input expand to the container width */
.directions-sidebar-geocoder .mapboxgl-ctrl-geocoder {
  width: 100%;
}
.directions-sidebar-geocoder .mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--input {
  width: 100% !important;
}

/* Strong overrides to ensure the geocoder input fits into the sidebar layout */
.directions-sidebar-geocoder .mapboxgl-ctrl-geocoder {
  display: block !important;
  width: 100% !important;
  max-width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  box-sizing: border-box !important;
}
.directions-sidebar-geocoder .mapboxgl-ctrl-geocoder input[type="text"],
.directions-sidebar-geocoder .mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--input {
  display: block !important;
  width: 100% !important;
  box-sizing: border-box !important;
  padding: 0.5rem 0.85rem !important;
  font-size: 0.95rem !important;
  line-height: 1.2 !important;
  margin: 0 !important;
}
.directions-sidebar-geocoder .mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--icon,
.directions-sidebar-geocoder .mapboxgl-ctrl-geocoder .mapboxgl-ctrl-geocoder--button {
  /* hide icon and buttons that overlap the input; keep clear if needed */
  display: none !important;
}
.directions-sidebar-geocoder .mapboxgl-ctrl-geocoder--suggestions {
  width: calc(100% - 0px) !important;
  box-sizing: border-box !important;
}
