/* Base styling */
body {
  font-family:
    Arial,
    -apple-system,
    BlinkMacSystemFont,
    "Segoe UI",
    Roboto,
    Helvetica,
    Arial,
    sans-serif,
    "Apple Color Emoji",
    "Segoe UI Emoji",
    "Segoe UI Symbol";
  color: #333;
  background-color: #f4f4f9;
  margin: 0;
  padding: 0;
}

/* Links styling - exclude navbar, menu, card links */
a:not(.navbar a):not(.menu a):not(.btn):not(#map a):not(.editor-map a):not(
    .card-link
  ):not(.link) {
  color: #2e8b57;
  text-decoration: none;
  font-weight: bold;
}
a:not(.navbar a):not(.menu a):not(.btn):not(#map a):not(.editor-map a):not(
    .card-link
  ):hover:not(.link) {
  /* color: #1e5d3e; */
  text-decoration: underline;
}

/* velogrimpe theme is now defined in frontend/tailwind.config.js */

.indianRed {
  border-bottom: indianRed inset 4px;
}
.tomato {
  border-bottom: tomato inset 4px;
}
.lightSalmon {
  border-bottom: lightSalmon inset 4px;
}
.fireBrick {
  border-bottom: fireBrick inset 4px;
}
.darkorange {
  border-bottom: darkorange inset 4px;
}
.gold {
  border-bottom: gold inset 4px;
}
.paleVioletRed {
  border-bottom: palevioletred inset 4px;
}
.crimson {
  border-bottom: crimson inset 4px;
}
.mediumSlateBlue {
  border-bottom: mediumSlateBlue inset 4px;
}
.purple {
  border-bottom: purple inset 4px;
}
.hotPink {
  border-bottom: hotPink inset 4px;
}
.teal {
  border-bottom: teal inset 4px;
}
.mediumOrchid {
  border-bottom: mediumOrchid inset 4px;
}

.info {
  padding: 6px 8px;
  font:
    14px/16px Arial,
    Helvetica,
    sans-serif;
  background: white;
  background: rgba(255, 255, 255, 0.8);
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  margin-left: 55px;
}
.info h3 {
  margin: 0 0 5px;
}
.train-icon {
  border-radius: 50%;
}
.bgwhite {
  background-color: white;
}
.bgred {
  background-color: #a00;
}
.leaflet-control-layers-toggle {
  width: 30px !important;
  height: 30px !important;
  background-size: 22px 22px !important;
}

/* Links styling for maps */
#map a:not(.link):not(.btn):not(.leaflet-pm-action),
.editor-map a:not(.link):not(.btn):not(.leaflet-pm-action) {
  margin-top: unset;
  text-decoration: unset;
  color: unset;
}
#map a:not(.link):not(.btn):not(.leaflet-pm-action):hover,
.editor-map a:not(.link):not(.btn):not(.leaflet-pm-action):hover {
  color: unset;
  text-decoration: unset;
}
#map a.link,
.editor-map a.link {
  display: inline-block;
  color: #2e8b57;
  text-decoration: none;
  font-weight: bold;
}
#map a.link:hover,
.editor-map a.link:hover {
  /* color: #1e5d3e; */
  text-decoration: underline;
}

#map a.btn,
.editor-map a.btn {
  color: var(--color-base-100);
  text-decoration: none;
  font-weight: bold;
}
#map a.btn:hover,
.editor-map a.btn:hover {
  /* color: #1e5d3e; */
  text-decoration: underline;
}

/* Secteur label highlight (used dynamically by JS) */
.secteur-label-highlight {
  background-color: darkred !important;
  color: white !important;
}

/* Map marker icons (used dynamically by JS) */
.vg-parking-icon {
  background-color: #2563eb; /* blue-600 */
  color: white;
  border-radius: 9999px;
  display: flex;
  justify-content: center;
  align-items: center;
  font-weight: bold;
  border: 1px solid white;
  text-transform: uppercase;
}

/* Map color palette - defines --vg-color variable */
.vg-color-indianRed {
  --vg-color: indianRed;
}
.vg-color-tomato {
  --vg-color: tomato;
}
.vg-color-teal {
  --vg-color: teal;
}
.vg-color-paleVioletRed {
  --vg-color: paleVioletRed;
}
.vg-color-mediumSlateBlue {
  --vg-color: mediumSlateBlue;
}
.vg-color-lightSalmon {
  --vg-color: lightSalmon;
}
.vg-color-fireBrick {
  --vg-color: fireBrick;
}
.vg-color-crimson {
  --vg-color: crimson;
}
.vg-color-purple {
  --vg-color: purple;
}
.vg-color-hotPink {
  --vg-color: hotPink;
}
.vg-color-mediumOrchid {
  --vg-color: mediumOrchid;
}
.vg-color-black {
  --vg-color: black;
}

/* Velo tooltip - uses --vg-color */
.vg-velo-tooltip {
  padding: 1px;
  color: white;
  font-weight: bold;
  background-color: var(--vg-color);
  border-color: var(--vg-color);
}

/* Station/Falaise tooltip - uses --vg-color */
.vg-station-tooltip {
  padding: 1px 2px;
  color: white;
  border-radius: 0.375rem;
  background-color: var(--vg-color);
  border-color: var(--vg-color);
}
.vg-station-tooltip::before {
  border-right-color: var(--vg-color);
}

/* Remove input type number default up/down arrows */
input[type="number"]::-webkit-inner-spin-button,
input[type="number"]::-webkit-outer-spin-button {
  /* Chrome, Safari, Edge, Opera */
  -webkit-appearance: none;
  appearance: none;
  margin: 0;
}
input[type="number"] {
  /* Firefox */
  -moz-appearance: textfield;
}

/* Custom disabled-looking input (still submits with form, unlike disabled) */
.input-disabled {
  background-color: var(--color-base-200, #e5e7eb) !important;
  opacity: 0.7;
  cursor: not-allowed;
  pointer-events: none;
  border: none;
  font-weight: bold;
}
.input-disabled:not(:placeholder-shown) {
  background-color: oklch(from var(--color-primary) l c h / 0.15) !important;
}
.input-disabled:focus,
.input-disabled:focus-visible {
  outline: none !important;
  box-shadow: none !important;
}

.autocomplete-list {
  max-height: 150px;
  overflow-y: auto;
  z-index: 10000;
}
.autocomplete-active {
  background-color: #2e8b57 !important;
  color: #fff;
}

/* Popup pour les polygones de falaises voisines */
.vg-popup .leaflet-popup-content-wrapper {
  padding: 0;
  background-color: var(--color-primary);
  box-shadow: none;
  border: none;
  width: fit-content;
}
.vg-popup .leaflet-popup-content {
  margin: 0;
}
.vg-popup .leaflet-popup-tip {
  background-color: var(--color-primary);
  box-shadow: none;
}

.vg-tooltip {
  padding: 6px 8px;
  font:
    14px/16px Arial,
    Helvetica,
    sans-serif;
  border: 2px solid #e8cd51;
  width: max-content;
  max-width: 260px;
  box-shadow: 0 0 15px rgba(0, 0, 0, 0.2);
  border-radius: 5px;
  white-space: normal;
  overflow-wrap: break-word;
}

/* Prevent iOS Zoom on inputs */
@media (max-width: 600px) {
  input,
  textarea,
  select {
    font-size: 1rem !important;
  }
}