/* PTT Neo — Custom-CSS-Ergaenzungen zu Tailwind (Phase 4a).
 *
 * Hinweis: Tailwind Play-CDN unterstuetzt KEIN @apply in externen
 * CSS-Dateien. Daher hier nur reines CSS — Tailwind-Klassen werden im
 * HTML angewandt.
 */

/* Alpine: verhindert Flash-of-Unstyled-Content auf Elementen mit x-show/x-if */
[x-cloak] { display: none !important; }

/* Bottom-Nav-Tabs (Mobile) */
.nav-tab {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.125rem;
  padding: 0.375rem 0.75rem;
  font-size: 0.6875rem;       /* 11px */
  line-height: 1;
  color: rgb(113 113 122);    /* zinc-500 */
  transition: color 150ms;
  min-width: 60px;
  min-height: 48px;
  border-radius: 0.5rem;
}
.nav-tab:hover    { color: rgb(212 212 216); /* zinc-300 */ }
.nav-tab:focus    { outline: 2px solid rgb(245 158 11); outline-offset: -2px; }
.nav-tab.active   { color: rgb(245 158 11);  /* amber-500 */ }
.nav-tab span     { font-weight: 500; }

/* Side-Nav (Desktop) */
.side-tab {
  display: flex;
  align-items: center;
  gap: 0.75rem;
  padding: 0.625rem 1rem;
  margin: 0 0.5rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
  color: rgb(161 161 170);    /* zinc-400 */
  transition: background-color 150ms, color 150ms;
}
.side-tab:hover   { background-color: rgb(63 63 70); /* zinc-700 */ color: rgb(244 244 245); }
.side-tab:focus   { outline: 2px solid rgb(245 158 11); outline-offset: -2px; }
.side-tab.active  {
  background-color: rgb(245 158 11 / 0.1);
  color: rgb(245 158 11);     /* amber-500 */
  font-weight: 500;
}

/* Scrollbar (Webkit) — dunkel */
::-webkit-scrollbar         { width: 6px; height: 6px; }
::-webkit-scrollbar-track   { background: #18181b; /* zinc-900 */ }
::-webkit-scrollbar-thumb   {
  background: #3f3f46;       /* zinc-700 */
  border-radius: 3px;
}
::-webkit-scrollbar-thumb:hover { background: #52525b; /* zinc-600 */ }

/* Safe-Area fuer iOS-Geraete mit Notch / Home-Indicator */
.safe-bottom { padding-bottom: env(safe-area-inset-bottom, 0); }
.safe-top    { padding-top: env(safe-area-inset-top, 0); }

/* Globale Auswahl-Farbe */
::selection {
  background: rgb(245 158 11 / 0.4);
  color: rgb(244 244 245);
}

/* Buttons: Touch-Tap-Highlight unterdruecken (iOS) */
button, a { -webkit-tap-highlight-color: transparent; }

/* PTT-Button: Touch-Scrolling unterdruecken — sonst scrollt iOS bei
 * langem Druck und der Pointer-Up wird nicht korrekt erkannt. */
.ptt-button { touch-action: none; user-select: none; }

/* Toast-Slide-In (kurze Eingangs-Animation) */
@keyframes toast-slide-in {
  from { transform: translateX(20%); opacity: 0; }
  to   { transform: translateX(0); opacity: 1; }
}
.toast-enter { animation: toast-slide-in 180ms ease-out; }

/* Native <audio> ist standardmaessig hell. Quick-Hack fuer Dark-Mode:
 * invert + hue-rotate macht das Player-Chrome dunkel mit korrekten
 * Akzent-Farben. Nicht perfekt, aber gut genug fuer Phase 4. */
audio.audio-dark {
  width: 100%;
  height: 36px;
  filter: invert(1) hue-rotate(180deg);
}

/* Tabs (Admin-Panel-Sub-Navigation) — Touch-Target ≥36px */
button[class*="border-b-2"] { min-height: 40px; }

/* Line-Clamp fuer Alarm-Content Vorschau */
.line-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}