@tailwind base;
@tailwind components;
@tailwind utilities;

@layer base {
  :root {
    --background: 0 0% 100%;
    --foreground: 222.2 84% 4.9%;
    --card: 0 0% 100%;
    --card-foreground: 222.2 84% 4.9%;
    --popover: 0 0% 100%;
    --popover-foreground: 222.2 84% 4.9%;
    --primary: 222.2 47.4% 11.2%;
    --primary-foreground: 210 40% 98%;
    --secondary: 210 40% 96.1%;
    --secondary-foreground: 222.2 47.4% 11.2%;
    --muted: 210 40% 96.1%;
    --muted-foreground: 215.4 16.3% 46.9%;
    --accent: 210 40% 96.1%;
    --accent-foreground: 222.2 47.4% 11.2%;
    --destructive: 0 84.2% 60.2%;
    --destructive-foreground: 210 40% 98%;
    --border: 214.3 31.8% 91.4%;
    --input: 214.3 31.8% 91.4%;
    --ring: 222.2 84% 4.9%;
    --radius: 0.5rem;
  }

  /* Nacht-Modus: Sehr dunkel, bernstein/rot-Akzente (Nachtsicht-Erhaltung) */
  .dark {
    --background: 0 0% 5%;
    --foreground: 30 20% 75%;
    --card: 0 0% 7%;
    --card-foreground: 30 20% 75%;
    --popover: 0 0% 8%;
    --popover-foreground: 30 20% 75%;
    --primary: 25 90% 45%;
    --primary-foreground: 0 0% 5%;
    --secondary: 0 0% 12%;
    --secondary-foreground: 30 20% 75%;
    --muted: 0 0% 12%;
    --muted-foreground: 30 10% 50%;
    --accent: 0 0% 14%;
    --accent-foreground: 30 20% 75%;
    --destructive: 0 70% 40%;
    --destructive-foreground: 30 20% 85%;
    --border: 0 0% 15%;
    --input: 0 0% 15%;
    --ring: 25 80% 45%;
  }
}

@layer base {
  * {
    @apply border-border;
  }
  body {
    @apply bg-background text-foreground;
  }
}

/* MapLibre styles */
.maplibregl-map {
  font-family: inherit;
}

/* Night mode: map stays bright (readable), only UI around it is dark */
/* MapLibre controls get subtle dark styling */
.dark .maplibregl-ctrl-group {
  background: #222 !important;
  border: 1px solid #444 !important;
}
.dark .maplibregl-ctrl-group button {
  background-color: #222 !important;
}
.dark .maplibregl-ctrl-group button .maplibregl-ctrl-icon {
  filter: invert(0.8);
}
.dark .maplibregl-ctrl-attrib {
  background: rgba(0,0,0,0.6) !important;
  color: #aaa !important;
}

.maplibregl-ctrl-group {
  @apply shadow-md rounded-lg overflow-hidden;
}

.maplibregl-ctrl-group button {
  width: 48px !important;
  height: 48px !important;
}

.maplibregl-ctrl-group button .maplibregl-ctrl-icon {
  transform: scale(1.4);
}

/* Touch-friendly: disable text selection on interactive elements */
.touch-none {
  touch-action: none;
  -webkit-touch-callout: none;
  -webkit-user-select: none;
  user-select: none;
}

/* Custom scrollbar */
::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

::-webkit-scrollbar-track {
  @apply bg-muted rounded-full;
}

::-webkit-scrollbar-thumb {
  @apply bg-muted-foreground/30 rounded-full hover:bg-muted-foreground/50;
}

/* Drawing tools cursor */
.draw-mode-point {
  cursor: crosshair;
}

.draw-mode-line,
.draw-mode-polygon,
.draw-mode-rectangle,
.draw-mode-circle {
  cursor: crosshair;
}

.draw-mode-select {
  cursor: default;
}

/* Symbol markers on map: no border/background (override global border-border) */
.symbol-marker-wrapper {
  border: none !important;
  background-color: transparent !important;
}
.symbol-marker {
  border: none !important;
  background-color: transparent !important;
}

/* Symbol dragging */
.symbol-dragging {
  @apply opacity-70 scale-110 shadow-lg;
  cursor: grabbing;
}

/* Moveable handles: larger and touch-friendly */
.moveable-control-box .moveable-control {
  width: 14px !important;
  height: 14px !important;
  margin-top: -7px !important;
  margin-left: -7px !important;
  border-radius: 50% !important;
  background: #3b82f6 !important;
  border: 2px solid #fff !important;
  box-shadow: 0 2px 6px rgba(0,0,0,0.3) !important;
}
.moveable-control-box .moveable-rotation .moveable-control {
  width: 28px !important;
  height: 28px !important;
  margin-top: -14px !important;
  margin-left: -14px !important;
  background: #f97316 !important;
  cursor: grab !important;
  border: 2px solid #fff !important;
  border-radius: 50% !important;
  box-shadow: 0 2px 8px rgba(0,0,0,0.35) !important;
  position: relative !important;
}
.moveable-control-box .moveable-rotation .moveable-control::after {
  content: '' !important;
  display: block !important;
  width: 16px !important;
  height: 16px !important;
  position: absolute !important;
  top: 50% !important;
  left: 50% !important;
  transform: translate(-50%, -50%) !important;
  background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='16' height='16' viewBox='0 0 24 24' fill='none' stroke='white' stroke-width='2.5' stroke-linecap='round' stroke-linejoin='round'%3E%3Cpath d='M21 12a9 9 0 1 1-9-9c2.52 0 4.93 1 6.74 2.74L21 8'/%3E%3Cpath d='M21 3v5h-5'/%3E%3C/svg%3E") !important;
  background-size: contain !important;
  background-repeat: no-repeat !important;
}
.moveable-control-box .moveable-rotation .moveable-control:active {
  cursor: grabbing !important;
  background: #ea580c !important;
}
.moveable-control-box .moveable-line {
  background: #3b82f6 !important;
  height: 2px !important;
}
.moveable-control-box .moveable-rotation .moveable-line {
  display: none !important;
}

/* Toast animations */
.toast-enter {
  animation: toast-enter 0.2s ease-out;
}

.toast-exit {
  animation: toast-exit 0.2s ease-in;
}

@keyframes toast-enter {
  from {
    opacity: 0;
    transform: translateX(100%);
  }
  to {
    opacity: 1;
    transform: translateX(0);
  }
}

@keyframes toast-exit {
  from {
    opacity: 1;
    transform: translateX(0);
  }
  to {
    opacity: 0;
    transform: translateX(100%);
  }
}