/* Ibiza 2026 Companion — PWA App Styles */

html, body {
  overflow-x: hidden;
  width: 100%;
  max-width: 100vw;
}

.no-scrollbar::-webkit-scrollbar {
  display: none;
}

.no-scrollbar {
  -ms-overflow-style: none;
  scrollbar-width: none;
}

#map {
  height: 250px;
  width: 100%;
  border-radius: 1rem;
  z-index: 10;
  transition: height 0.25s ease-out;
}

#detail-map {
  height: 160px;
  width: 100%;
  border-radius: 1rem;
  z-index: 10;
}

@keyframes soundwave {
  0%, 100% { height: 8px; opacity: 0.5; }
  50% { height: 48px; opacity: 1; }
}

.soundwave-bar {
  animation: soundwave 1.1s ease-in-out infinite;
  transform-origin: center;
}

/* ==========================================================================
   Mobile-Ergonomie & Safe-Area (Layout-Audit 2026-09-21, docs/design/)
   Keine Logik — nur Abstaende, Trefferflaechen, Systemleisten.
   ========================================================================== */

/* Notch / Punch-Hole / Gestenleiste: Inhalte nicht unter Systemleisten legen.
   env() gilt nur, wenn index.html viewport-fit=cover setzt; ohneSupport
   faellt jede Deklaration auf den Wert davor zurueck. */
body.pb-20 {
  padding-bottom: 5rem;
  padding-bottom: calc(5rem + env(safe-area-inset-bottom));
}
header.sticky {
  padding-top: 0.5rem;
  padding-top: calc(0.5rem + env(safe-area-inset-top));
}
#radar-alert-banner {
  top: 3.5rem;
  top: calc(3.5rem + env(safe-area-inset-top));
}
#floating-voice-trigger-btn {
  margin-bottom: 0;
  margin-bottom: env(safe-area-inset-bottom);
}
#voice-modal {
  padding-bottom: 1.5rem;
  padding-bottom: calc(1.5rem + env(safe-area-inset-bottom));
}
#detail-view > div:last-child {
  padding-bottom: 1.25rem;
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
}
#burger-drawer > div:last-child {
  padding-bottom: 1.25rem;
  padding-bottom: calc(1.25rem + env(safe-area-inset-bottom));
}

/* Touch-Ziele: Mindesthoehe fuer haeufig getippte Controls.
   Richtwert 44px (WCAG 2.5.5 / Apple HIG); wo die Zeilendichte das sprengt
   (Chips, Karten-Buttons), 36px als Kompromiss — siehe Design-Befund. */
header.sticky button {
  min-height: 40px;
}
#spots-list button,
#detail-vote-buttons button,
#subcategory-chips-bar button,
#scout-chips-container button,
#voter-modal-options button {
  min-height: 36px;
}
#detail-vote-buttons button {
  min-height: 44px;
}

/* Schliessen-Buttons (x): das Glyphen-Zeichen ist nur ~20px gross,
   die Trefferflaeche waechst hier auf 36px ohne Layout-Aenderung. */
button[onclick*="closeModal"],
button[onclick*="toggleBurgerMenu"],
button[onclick*="closeDetailView"],
button[onclick*="closeVoiceAssistant"],
button[onclick*="dismissRadarAlert"] {
  min-width: 36px;
  min-height: 36px;
}

/* Starke Sonneneinstrahlung (OLED, Strand): Grenzen und Meta-Texte
   eine Stufe aufhellen, sobald das System hoheren Kontrast anfordert. */
@media (prefers-contrast: more) {
  body {
    --tw-text-opacity: 1;
  }
  .text-slate-500 {
    color: #94a3b8; /* slate-400 */
  }
  .text-slate-400 {
    color: #cbd5e1; /* slate-300 */
  }
  .border-slate-800 {
    border-color: #334155; /* slate-700 */
  }
}