/* ─── AmpelTracker – Custom CSS ─────────────────────────────────────────────── */

/* Kritischer Fallback: garantiert, dass ausgeblendete Screens NIE angezeigt werden,
   auch wenn Tailwind CSS noch lädt oder durch Netzwerklatenz verzögert ist */
.hidden {
  display: none !important;
}

/* Google Font: Inter ist über index.html eingebunden */

/* ─── Animationen ──────────────────────────────────────────────────────────── */

@keyframes bounce-slow {
  0%, 100% { transform: translateY(0); }
  50%       { transform: translateY(-8px); }
}

.animate-bounce-slow {
  animation: bounce-slow 2.5s ease-in-out infinite;
}

@keyframes pulse-ring {
  0%   { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0.4); }
  70%  { box-shadow: 0 0 0 20px rgba(99, 102, 241, 0); }
  100% { box-shadow: 0 0 0 0 rgba(99, 102, 241, 0); }
}

/* ─── Auth-Tabs ────────────────────────────────────────────────────────────── */

.auth-tab-active {
  background: #4f46e5;
  color: white;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.4);
}

/* ─── Dashboard Tabs ───────────────────────────────────────────────────────── */

.tab-active {
  background: #4f46e5;
  color: white;
  font-weight: 700;
  box-shadow: 0 2px 8px rgba(79, 70, 229, 0.3);
}

.tab-inactive {
  background: transparent;
  color: #94a3b8;
}

/* ─── Ampel-Buttons: 3D-Pressed-Effekt ────────────────────────────────────── */

.btn-pressed {
  transform: scale(0.96) translateY(3px) !important;
  filter: brightness(0.85);
}

/* Rückmeldungs-Ripple nach Tastendruck */
.ampel-btn {
  position: relative;
  overflow: hidden;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

.ampel-btn::after {
  content: '';
  position: absolute;
  inset: 0;
  background: white;
  opacity: 0;
  transition: opacity 0.15s;
}

.ampel-btn:active::after {
  opacity: 0.1;
}

/* ─── Leaflet-Map Overrides ────────────────────────────────────────────────── */

.leaflet-container {
  background: #1e293b !important;
  font-family: 'Inter', sans-serif !important;
}

.leaflet-control-attribution {
  background: rgba(15, 23, 42, 0.8) !important;
  color: #64748b !important;
  font-size: 9px !important;
}

.leaflet-control-attribution a {
  color: #818cf8 !important;
}

.leaflet-control-zoom a {
  background: #1e293b !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}

.leaflet-control-zoom a:hover {
  background: #334155 !important;
}

.leaflet-popup-content-wrapper {
  background: #1e293b !important;
  color: #f1f5f9 !important;
  border: 1px solid #334155 !important;
  border-radius: 12px !important;
  box-shadow: 0 8px 24px rgba(0,0,0,0.5) !important;
}

.leaflet-popup-tip {
  background: #1e293b !important;
}

/* ─── Scrollbar ────────────────────────────────────────────────────────────── */

::-webkit-scrollbar { width: 4px; }
::-webkit-scrollbar-track { background: transparent; }
::-webkit-scrollbar-thumb { background: #334155; border-radius: 2px; }

/* ─── PWA Safe Area (iPhone Notch / Home-Indikator) ───────────────────────── */

body {
  padding-top: env(safe-area-inset-top);
  padding-bottom: env(safe-area-inset-bottom);
}

/* ─── Print Styles (für PDF-Export) ───────────────────────────────────────── */

@media print {
  body {
    background: white !important;
    color: black !important;
  }

  .no-print { display: none !important; }

  /* Karte soll gedruckt werden */
  .leaflet-container {
    background: #f8fafc !important;
  }
}