/*
 * Globale Light-DOM-Styles der App.
 *
 * Konvention (aus dem GlassKit-Web-SKILL):
 *   · GlassKit-KLASSEN (glass-*, gl-*) nur im Light DOM.
 *   · In Shadow-DOM-Views ausschließlich <glk-*>-Elemente und die --gl-*-Custom-Properties,
 *     die durch die Shadow-Grenze hindurch erben.
 *   · Farben kommen aus /shared/brand.css, nicht von hier.
 *   · Eigene Klassen tragen das Präfix ep-.
 */

html,
body {
  margin: 0;
  padding: 0;
}

/* dvh statt vh: auf mobilen Browsern wächst der Viewport mit der Adressleiste; 100vh hinterlässt
   einen Überhang, der die Seite grundlos scrollbar macht. */
body {
  min-height: 100dvh;
  font-family: var(--gl-font-family);
  color: var(--gl-color-text);
  background: var(--gl-color-bg-dark);
  -webkit-font-smoothing: antialiased;
}

.glass-bg {
  min-height: 100dvh;
}

/* ---- Sichere Ränder der installierten App -------------------------------------------
 *
 * `viewport-fit=cover` in index.html legt die Seite unter Dynamic Island, Notch und
 * Home-Indicator. Ohne die Insets verschwindet die Kopfzeile unter der Island.
 *
 * Zwei Details entscheiden, ob das funktioniert (gelernt in voice-office-hub und
 * stripe-jack-cloud):
 *   · Oben ADDITIV, nicht max(): Auf einem Gerät mit Dynamic Island ist der Inset rund 59 px;
 *     max() liefert dann nur den Inset, und der Kopf klebt ohne Luft an der Island. Der
 *     normale Abstand kommt OBENDRAUF.
 *   · Alle vier Seiten: im Querformat wandert die Aussparung nach links oder rechts. Dort
 *     ist max() richtig, damit der Desktop seine 16 px behält.
 */
:root {
  --safe-t: env(safe-area-inset-top, 0px);
  --safe-b: env(safe-area-inset-bottom, 0px);
  --safe-l: max(var(--gl-space-lg), env(safe-area-inset-left, 0px));
  --safe-r: max(var(--gl-space-lg), env(safe-area-inset-right, 0px));
}

/* Der Freiraum für die schwebende Tab-Bar kommt aus GlassKits .glass-bg--has-tab-bar-floating;
   hier kommt nur der Home-Indicator dazu, denn die Klasse kennt keine Safe Areas. */
app-root {
  display: block;
  padding: calc(var(--gl-space-lg) + var(--safe-t)) var(--safe-r) var(--safe-b) var(--safe-l);
  max-width: 960px;
  margin: 0 auto;
  box-sizing: border-box;
}

/* ---- Schwebende Tab-Bar ---------------------------------------------------------------
 * Der Host übernimmt die feste Platzierung, nicht GlassKits Dock. Das Dock wird in
 * app-tabbar.js `static` gesetzt, weil es sich mit `transform: translateX(-50%)` zentriert —
 * ein transform öffnet eine neue Backdrop-Wurzel, und der backdrop-filter der Bar hätte
 * nichts mehr zu verwischen. Das Glas wirkt dann flach, obwohl jede Farbe stimmt.
 * Zentriert wird deshalb per Flexbox; die Bar bekommt aus demselben Grund keinen
 * view-transition-name.
 */
#ep-tabbar {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--gl-tab-bar-floating-bottom) + var(--safe-b));
  z-index: 900;
  display: flex;
  justify-content: center;
  /* Querformat: die Leiste darf nicht unter die seitliche Aussparung geraten. */
  padding-inline: var(--safe-l) var(--safe-r);
  box-sizing: border-box;
  /* Der Streifen ist volle Breite, damit er zentrieren kann; klickbar ist nur die Bar. */
  pointer-events: none;
}

#ep-tabbar > * {
  pointer-events: auto;
}

#ep-tabbar glk-tab-item svg {
  width: 22px;
  height: 22px;
}

/* ---- Kopfzeile -------------------------------------------------------------------------
 * Nur was im Light DOM lebt, steht hier: Kopf, Verbindungsstreifen, Betreiberzeile.
 * `nowrap` mit Absicht: auf 402 px (iPhone 16 Pro) darf die Zeile nicht umbrechen; die
 * Marke gibt nach und kürzt ihren Text, das Logo bleibt.
 */
.ep-header {
  display: flex;
  flex-wrap: nowrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--gl-space-sm);
  margin-bottom: var(--gl-space-lg);
}

.ep-header:empty {
  display: none;
}

.ep-brand {
  display: inline-flex;
  align-items: center;
  gap: var(--gl-space-xs);
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  font-family: inherit;
  font-size: var(--gl-font-size-base);
  color: var(--gl-color-text);
  min-width: 0;
  flex: 0 1 auto;
}

.ep-brand span {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  min-width: 0;
}

.ep-brand b {
  font-weight: var(--gl-font-weight-semibold);
}

.ep-tenant-logo { width: 28px; height: 28px; border-radius: 8px; object-fit: cover; margin-left: 6px; }
.ep-brand-sub {
  font-size: var(--gl-font-size-xs);
  color: var(--gl-color-text-muted);
}

.ep-avatar {
  background: none;
  border: 0;
  padding: 0;
  cursor: pointer;
  display: inline-flex;
}

.ep-brand img {
  border-radius: 7px;
  flex: 0 0 auto;
}

.ep-header-actions {
  display: flex;
  align-items: center;
  gap: var(--gl-space-sm);
  flex: 0 0 auto;
}

.ep-icon-btn {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 34px;
  height: 34px;
  padding: 0;
  border-radius: var(--gl-radius-full);
  border: 1px solid var(--gl-border-subtle);
  background: transparent;
  color: var(--gl-icon-muted);
  cursor: pointer;
  transition: var(--gl-transition);
}

.ep-icon-btn:hover {
  color: var(--gl-color-text);
}

.ep-icon-btn:focus-visible {
  outline: 2px solid var(--gl-color-primary);
  outline-offset: 3px;
}

.ep-icon-btn svg {
  width: 18px;
  height: 18px;
}

/* ---- Verbindungsstreifen --------------------------------------------------------------
 * Warnfarbe statt Fehler: kein Netz ist ein Zustand, kein Defekt. GlassKit hat
 * --gl-color-warning, aber keine passende -surface; die Fläche kommt aus --gl-surface-2.
 */
.ep-connection {
  margin-bottom: var(--gl-space-md);
  padding: var(--gl-space-sm) var(--gl-space-md);
  border-radius: var(--gl-radius-card);
  border: 1px solid var(--gl-color-warning);
  background: var(--gl-surface-2);
  color: var(--gl-color-text);
  font-size: var(--gl-font-size-sm);
  line-height: 1.5;
}

.ep-connection[hidden] {
  display: none;
}

/* ---- Toast -------------------------------------------------------------------------------
 * GlassKit setzt .glass-toast auf top: var(--gl-space-4xl) (56 px); der Kopf endet bei 64 px.
 * Die Regel liegt im Shadow Root, der Token erbt hindurch: also den Token für diesen
 * Teilbaum anheben, plus Safe-Area-Inset, weil der Kopf auf einer Dynamic Island mitwandert.
 */
#ep-toast {
  --gl-space-4xl: calc(78px + var(--safe-t));
}

.ep-center {
  display: flex;
  flex-direction: column;
  gap: var(--gl-space-md);
  align-items: center;
  text-align: center;
  padding-top: 8vh;
}

.ep-lead {
  font-size: var(--gl-font-size-lg);
  font-weight: var(--gl-font-weight-semibold);
  margin: 0;
}

.ep-muted {
  color: var(--gl-color-text-muted);
  font-size: var(--gl-font-size-sm);
  line-height: 1.6;
  margin: 0;
}

/* Eine SPA ist ohne JavaScript unbrauchbar — das verdient einen Satz, kein Schweigen. */
html:not(.js) app-root::before {
  content: 'Für EhrenPfoten wird JavaScript benötigt.';
  display: block;
  padding: var(--gl-space-xl);
  text-align: center;
  color: var(--gl-color-text-muted);
}

/* ---- Übergänge zwischen Ansichten ----------------------------------------------------
 * Der Tausch läuft synchron in document.startViewTransition() (app.js); hier wird er nur
 * benannt und getaktet. VORSICHT: ein view-transition-name ISOLIERT das Element — Glasflächen
 * mit backdrop-filter dürfen deshalb keinen bekommen, nur der getauschte Container.
 */
/*
 * Nur WÄHREND einer Transition (Klasse vt auf <html>, gesetzt in app.js): Ein
 * view-transition-name macht #app zu einem eigenen Stapelkontext, und ein Sheet oder Modal
 * aus einer View (z-index 1000, aber innerhalb von #app) verlöre dann gegen die schwebende
 * Tab-Bar (z-index 900 auf Dokumentebene). Gefunden in der Sichtung M2 mit dem Sheet
 * „Personal einladen“; dieselbe Falle wie .glass-bg > * in GlassKit vor 1.15.1.
 */
html.vt #app {
  view-transition-name: ep-content;
}

@media (prefers-reduced-motion: no-preference) {
  ::view-transition-old(ep-content),
  ::view-transition-new(ep-content) {
    animation-duration: 0.22s;
    animation-timing-function: cubic-bezier(0.22, 0.61, 0.36, 1);
  }
}

@media (prefers-reduced-motion: reduce) {
  ::view-transition-group(*),
  ::view-transition-old(*),
  ::view-transition-new(*) {
    animation: none !important;
  }

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    transition-duration: 0.01ms !important;
  }
}

/* ---- Betreiberzeile ---------------------------------------------------------------------
 * Leise gesetzt, aber vorhanden. Der Abstand nach unten hält sie über der schwebenden
 * Tab-Bar frei; der Betreiber (das Tierheim) kommt in M8 dazu.
 */
.ep-legal {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: center;
  gap: 6px 10px;
  margin: 40px auto 0;
  padding: 0 var(--safe-l) calc(96px + var(--safe-b)) var(--safe-r);
  max-width: 720px;
  font-size: var(--gl-font-size-xs);
  color: var(--gl-color-text-muted);
  text-align: center;
}

.ep-legal a {
  color: inherit;
  text-decoration: underline;
  text-underline-offset: 3px;
}

.ep-legal a:hover {
  color: var(--gl-color-primary);
}

/* ---- Übergänge zwischen Dokumenten ------------------------------------------------------
 * Innerhalb der App tauscht app.js die Ansicht per document.startViewTransition(). Für echte
 * Seitenwechsel (Anmeldelink, Direktlink /t/<slug>, Mockup ↔ App, später Webseite ↔ App)
 * übernimmt der Browser den Übergang selbst — CSS-only, progressive Enhancement, ohne
 * Unterstützung wird normal navigiert (Muster stripe-jack-cloud web/site.css).
 *
 * Die Kopfzeile trägt einen eigenen Namen und bleibt dabei stehen statt mitzufaden.
 * Testhinweis: Headless Chrome bleibt bei klick-ausgelösten Navigationen am render-
 * blockierenden Übergang hängen — Automatisierung mit reducedMotion: 'reduce' laufen
 * lassen, das greift über den Block unten.
 */
@view-transition {
  navigation: auto;
}

html.vt .ep-header {
  view-transition-name: ep-header;
}

@media (prefers-reduced-motion: reduce) {
  @view-transition {
    navigation: none;
  }
}