/* ============================================================
   NOA - Cross-Platform Bridge (CSS)
   ------------------------------------------------------------
   Wird NACH styles.css geladen. Gleicht Unterschiede zwischen
   Desktop-Chrome, iOS Safari, Android Chrome, In-App-Browsern,
   PWA-Standalone-Modus und mobilen Viewports aus.

   Referenz-Optik: Desktop-Chrome auf dem PC.
   Diese Datei verändert das Layout NICHT, sondern stabilisiert es
   nur über alle Plattformen hinweg.
   ============================================================ */

/* ------------------------------------------------------------
   1) Plattform-Variablen
   --app-vh / --app-height werden zusätzlich aus JS gesetzt.
   --sat / --sab / --sal / --sar mappen die safe-area-insets.
   ------------------------------------------------------------ */
:root {
  --sat: env(safe-area-inset-top, 0px);
  --sar: env(safe-area-inset-right, 0px);
  --sab: env(safe-area-inset-bottom, 0px);
  --sal: env(safe-area-inset-left, 0px);
  /* Fallback-Höhe: dvh wird von JS auf realen Wert verfeinert */
  --app-height: 100dvh;
}

/* ------------------------------------------------------------
   2) Mobile-Browser-Defaults neutralisieren
   ------------------------------------------------------------ */
html {
  /* iOS-Querformat: verhindert automatische Schriftvergrößerung */
  -webkit-text-size-adjust: 100%;
  text-size-adjust: 100%;
  /* Stabilisiert das Scroll-Verhalten auf iOS */
  -webkit-overflow-scrolling: touch;
}

html, body {
  /* Verhindert horizontales Scrollen durch versehentliche Overflows */
  overflow-x: hidden;
  /* Verhindert Browser-Bounce (iOS) bzw. Pull-to-Refresh (Android) */
  overscroll-behavior-y: none;
}

body {
  /* Echte App-Höhe (JS füllt --app-vh, sonst 100dvh, sonst 100vh) */
  min-height: 100vh;
  min-height: var(--app-vh, 100dvh);
  /* Bessere Glyph-Glättung auf macOS/iOS-Webkit-Engines */
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-rendering: optimizeLegibility;
}

/* Inputs/Buttons/Selects auf iOS entkrampfen.
   - keine ungewollten Rundungen
   - keine doppelten Schatten
   - kein blau-grauer Standard-Tap-Highlight */
input,
select,
textarea,
button {
  -webkit-appearance: none;
  -moz-appearance: none;
  appearance: none;
  -webkit-tap-highlight-color: transparent;
  /* iOS-Standard: rundet Inputs sonst automatisch ab */
  input,
  select,
  textarea {
    border-radius: 0;
  }
}
/* Border-Radius wo gewollt wieder erlauben (Designsystem) */
/* Border-Radius aus dem Designsystem nach iOS-Reset gezielt wiederherstellen */
.field input,
.field select,
.field textarea {
  border-radius: 12px;
}

.btn {
  border-radius: 14px;
}

.icon-btn,
.back-btn {
  border-radius: 50%;
}

.iconbtn {
  border-radius: 10px;
}

.row-link,
.select-card,
.contact-pick,
.list-item,
.quick,
.status-tile {
  border-radius: var(--radius-sm);
}

.card,
.device-card,
.device-card-big {
  border-radius: var(--radius);
}

.sheet {
  border-radius: 24px 24px 0 0;
}

.toggle,
.lang-flag {
  border-radius: 999px;
}

.tab {
  border-radius: 10px;
}

/* Inputs: iOS-Auto-Zoom verhindern + Cursor sichtbar */
input,
select,
textarea {
  font-size: 16px;        /* < 16px löst auf iOS Auto-Zoom aus */
  line-height: 1.4;
}

/* Date-/Time-/Number-Inputs auf iOS visuell normalisieren */
input[type="date"],
input[type="time"],
input[type="datetime-local"],
input[type="month"],
input[type="week"],
input[type="number"] {
  -webkit-appearance: none;
  appearance: none;
  min-height: 48px;
  background-clip: padding-box;
}

/* Eigene Spinner / Steppers bei number-Inputs zähmen */
input[type="number"]::-webkit-outer-spin-button,
input[type="number"]::-webkit-inner-spin-button {
  -webkit-appearance: none;
  margin: 0;
}

/* Search-Input auf iOS hat sonst eine spezielle Optik */
input[type="search"] {
  -webkit-appearance: none;
  appearance: none;
}
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  -webkit-appearance: none;
}

/* iOS macht Buttons standardmäßig rund + blauen Tap. Beides aus. */
button {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;     /* entfernt 300ms-Klick-Delay */
}

/* Links: Tap-Highlight aus */
a {
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}

/* Globaler Box-Sizing-Sweep (styles.css macht das schon, hier doppelt gesichert) */
*, *::before, *::after {
  box-sizing: border-box;
}

/* ------------------------------------------------------------
   3) App-Container - Höhe & Safe-Areas
   ------------------------------------------------------------ */
.app {
  /* Reihenfolge wichtig: jeder spätere Fallback überschreibt nur,
     wenn der Browser den Wert versteht. */
  height: 100vh;
  height: 100svh;                          /* iOS 15.4+ Safari */
  height: 100dvh;                          /* moderne Browser */
  height: var(--app-vh, 100dvh);           /* JS-Override für iOS Adressleiste */
  max-height: var(--app-vh, 100dvh);
}

/* Im Phone-Frame (Desktop) bleibt es bei max-height: 860px - greift
   nur im Mobile-Layout */
@media (max-width: 519px) {
  .app {
    max-height: var(--app-vh, 100dvh);
  }
}

/* Header bekommt Safe-Area-Top, damit Notch nicht auf Logo liegt */
.app-header {
  padding-top: calc(14px + var(--sat));
}
.app-header.transparent {
  padding-top: calc(14px + var(--sat));
}

/* Im Desktop-Phone-Frame KEIN Safe-Area-Padding nötig: dort liegt der
   Frame in der Mitte der Seite, kein Notch betroffen */
@media (min-width: 520px) {
  .app-header,
  .app-header.transparent {
    padding-top: 14px;
  }
}

/* Hauptbereich: Bottom-Padding um Safe-Area + Tabbar-Höhe ergänzen.
   styles.css hat 110px (Tabbar + Luft). Wir addieren Safe-Area-Bottom. */
.main {
  padding-bottom: calc(110px + var(--sab));
  /* iOS-Smooth-Scroll wieder ein, falls von * { ... } überschrieben */
  -webkit-overflow-scrolling: touch;
  /* Verhindert, dass das innere Scrollen Pull-to-Refresh des Browsers triggert */
  overscroll-behavior: contain;
}
.main.no-tabbar {
  padding-bottom: calc(24px + var(--sab));
}
.main.full-bleed {
  padding-bottom: calc(110px + var(--sab));
}

/* ------------------------------------------------------------
   4) Tabbar - Safe-Area-Bottom korrekt überall
   ------------------------------------------------------------ */
.tabbar {
  /* styles.css: padding: 6px 4px calc(6px + env(safe-area-inset-bottom)) */
  padding: 6px 4px calc(6px + var(--sab));
  padding-left: calc(4px + var(--sal));
  padding-right: calc(4px + var(--sar));
}

/* ------------------------------------------------------------
   5) Sheet / SOS-Overlay / Splash - Safe-Areas
   ------------------------------------------------------------ */
.sheet {
  padding-bottom: calc(28px + var(--sab));
  padding-left: calc(18px + var(--sal));
  padding-right: calc(18px + var(--sar));
}

.sos-live {
  padding-top: calc(30px + var(--sat));
  padding-bottom: calc(30px + var(--sab));
  padding-left: calc(20px + var(--sal));
  padding-right: calc(20px + var(--sar));
}

/* Toast: hebt sich über die Tabbar + Safe-Area-Bottom */
.toast {
  bottom: calc(100px + var(--sab));
}

/* Auth-Wrap: echte Viewport-Höhe + Safe-Area, ersetzt 100vh
   (auf iOS rechnet 100vh die Adressleiste raus) */
.auth-wrap {
  min-height: 100dvh;
  min-height: var(--app-vh, 100dvh);
  padding-top: calc(32px + var(--sat));
  padding-bottom: calc(22px + var(--sab));
  padding-left: calc(22px + var(--sal));
  padding-right: calc(22px + var(--sar));
}
@media (min-width: 520px) {
  /* Desktop-Frame: zurück auf Standard, keine Notch-Insets nötig */
  .auth-wrap {
    padding-top: 32px;
    padding-bottom: 22px;
    padding-left: 22px;
    padding-right: 22px;
  }
}

/* Sprach-Switcher oben rechts auf Welcome-Screen */
.lang-top {
  top: calc(14px + var(--sat));
  right: calc(14px + var(--sar));
}
@media (min-width: 520px) {
  .lang-top {
    top: 20px;
    right: 20px;
  }
}

/* ------------------------------------------------------------
   6) Hover-Effekte nur auf echten Hover-Geräten
   Auf Touch bleibt Hover sonst "kleben" nach dem Tap.
   ------------------------------------------------------------ */
@media (hover: none) {
  .lang-flag:hover { opacity: .55; }     /* zurück auf Default */
  /* Allgemeiner Schutz: keine sticky hover effects */
  *:hover { /* no-op */ }
}

/* Touch-Geräte: aktiv-Feedback statt Hover */
html.is-touch .lang-flag:hover {
  opacity: .55;
}
html.is-touch .lang-flag.active:hover {
  opacity: 1;
}

/* ------------------------------------------------------------
   7) Scroll-Verhalten in horizontalen Listen
   ------------------------------------------------------------ */
[data-hscroll],
.hscroll {
  -webkit-overflow-scrolling: touch;
  overscroll-behavior-x: contain;
  scroll-snap-type: x proximity;
  scrollbar-width: none;
}
[data-hscroll]::-webkit-scrollbar,
.hscroll::-webkit-scrollbar {
  display: none;
}

/* Leaflet-Karte: Touch sauber halten, keine Browser-Gesten dazwischenfunken */
.map-canvas,
.leaflet-container {
  touch-action: pan-x pan-y;
  -webkit-tap-highlight-color: transparent;
}

/* ------------------------------------------------------------
   8) Buttons & Touch-Targets - Minimum 44px (Apple HIG)
   ------------------------------------------------------------ */
html.is-touch .icon-btn,
html.is-touch .iconbtn,
html.is-touch .back-btn,
html.is-touch .info-btn {
  /* Mindest-Trefferfläche, Visual bleibt unverändert */
  position: relative;
}
html.is-touch .icon-btn::after,
html.is-touch .iconbtn::after,
html.is-touch .back-btn::after,
html.is-touch .info-btn::after {
  content: "";
  position: absolute;
  inset: -6px;
  /* unsichtbarer Hit-Slop, damit kleine Buttons (24/30/36px)
     trotzdem komfortabel tappable sind */
}

/* ------------------------------------------------------------
   9) iOS Safari: Position-fixed + Tastatur-Behandlung
   Wenn die On-Screen-Tastatur erscheint, soll die Tabbar nicht
   über dem Input liegen.
   ------------------------------------------------------------ */
html.is-keyboard-open .tabbar {
  display: none;
}
html.is-keyboard-open .btn-sticky-bottom {
  position: static;
  margin-top: 18px;
}

/* ------------------------------------------------------------
  10) iOS Standalone (PWA-Modus): mehr Top-Padding für Statusbar
   ------------------------------------------------------------ */
html.is-standalone .app-header {
  padding-top: calc(14px + var(--sat));
}
html.is-standalone .auth-wrap {
  padding-top: calc(32px + var(--sat));
}

/* Im Standalone keine User-Selection auf UI-Elementen (App-Feel) */
html.is-standalone body {
  -webkit-user-select: none;
  user-select: none;
}
/* Inhalte mit Text müssen weiter selektierbar bleiben (Codes, IDs, etc.) */
html.is-standalone input,
html.is-standalone textarea,
html.is-standalone [contenteditable="true"],
html.is-standalone .refer-code .rc-value,
html.is-standalone .summary-value,
html.is-standalone .greet-name {
  -webkit-user-select: text;
  user-select: text;
}

/* ------------------------------------------------------------
  11) Android Chrome: Adressleisten-Toggle kompensieren
   --app-vh wird per JS bei jedem resize/visualViewport-Event
   neu gesetzt; hier nur die Variable nutzen.
   ------------------------------------------------------------ */
html.is-android .app {
  /* gleiche Höhe wie iOS, Verlass auf --app-vh */
  height: var(--app-vh, 100dvh);
  max-height: var(--app-vh, 100dvh);
}

/* ------------------------------------------------------------
  12) iOS spezifisch: Pinch-Zoom-Geste auf Karten erlauben
   ------------------------------------------------------------ */
html.is-ios .leaflet-container {
  touch-action: pan-x pan-y pinch-zoom;
}

/* ------------------------------------------------------------
  13) Print: Phone-Frame entfernen, fließender Inhalt
   ------------------------------------------------------------ */
@media print {
  .app {
    width: 100%;
    max-width: 100%;
    height: auto;
    box-shadow: none;
    border-radius: 0;
  }
  .tabbar,
  .app-header .icon-btn,
  .btn-sticky-bottom {
    display: none !important;
  }
}

/* ------------------------------------------------------------
  15) Reduced-Motion: Animationen abschwächen
   ------------------------------------------------------------ */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
  .live-dot,
  .map-pulse,
  .sos-live .step.active .stnum {
    animation: none !important;
  }
}

/* ------------------------------------------------------------
  16) Defensive: verhindert horizontales Wegrutschen auf
       schmalen Viewports durch unerwartete inline-styles.
   ------------------------------------------------------------ */
.main img,
.main video,
.main iframe {
  max-width: 100%;
}

/* ------------------------------------------------------------
  17) Dark-System-Theme: NICHT umfärben (App ist hellblau-türkis).
       Nur den Browser-UI Theme-Color verändert die meta-Tag-Logik.
   ------------------------------------------------------------ */
@media (prefers-color-scheme: dark) {
  html { color-scheme: light; }
}