/* ═══════════════════════════════════════════════════════════════════════════
   App-Modus — greift nur, wenn die Seite in der nativen FeierAbend-App läuft
   (body.app-mode, gesetzt in base.html.twig über das Twig-Global is_app_mode).
   Im Browser ist keine dieser Regeln aktiv.
   ═══════════════════════════════════════════════════════════════════════════ */

/* Weichzeichner hinter der iOS-/Android-Statusleiste (Uhr, Akku, Empfang).
   Kein harter Balken: Scrollender Seiteninhalt läuft darunter durch und geht
   weich in eine Weichzeichnung mit leichter Abdunklung über (nativer iOS-Look).
   Der Verlauf in der Maske lässt den Blur nach unten sanft auslaufen. */
.app-statusbar-shim {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(env(safe-area-inset-top, 0px) + 22px);
    background: linear-gradient(to bottom,
        rgba(12, 12, 14, 0.50) 0%,
        rgba(12, 12, 14, 0.26) 55%,
        rgba(12, 12, 14, 0) 100%);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    -webkit-mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
    mask-image: linear-gradient(to bottom, #000 0%, #000 50%, transparent 100%);
    pointer-events: none;
    z-index: 10500;
}

/* Mit sichtbarer Topbar übernimmt diese die Statusleisten-Zone selbst —
   der Scrim würde sonst doppelt blurren. */
body.app-mode--nav .app-statusbar-shim {
    display: none;
}

/* Grund-Polster: Inhalt beginnt unter der Statusleiste. */
body.app-mode {
    padding-top: env(safe-area-inset-top, 0px);
}

/* Eingeloggt (Topbar + Tab-Bar sichtbar): Platz für beide Leisten reservieren. */
body.app-mode--nav {
    padding-top: calc(env(safe-area-inset-top, 0px) + 40px);
    padding-bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}

/* Kompakter Einstieg: Die Seiten bringen fürs Web große Kopf-Abstände mit
   (5–6rem Platz für den Website-Header) — in der App sitzt darüber schon die
   Topbar. Gilt zentral für ALLE internen Seiten (Lou, 28.08.). */
body.app-mode--nav .dashboard-section,
body.app-mode--nav .admin-container,
body.app-mode--nav .profile-section {
    padding-top: 1rem;
}
body.app-mode--nav .cal-app {
    padding-top: 0.75rem;
}
/* Kalender-Kopfkarte klebt beim Scrollen unter der App-Topbar (statt unter
   dem alten Website-Header bei 70px). */
body.app-mode--nav .cal-topbar {
    top: calc(env(safe-area-inset-top, 0px) + 40px);
}
/* Dateimanager: Vollhöhen-Layout zwischen App-Topbar und Tab-Bar. */
body.app-mode--nav .fm {
    margin-top: 0.75rem;
    height: calc(100dvh - env(safe-area-inset-top, 0px) - 40px - 0.75rem - 56px - env(safe-area-inset-bottom, 0px));
}

/* ─── Obere Steuerleiste ─── */
.app-topbar {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    height: calc(env(safe-area-inset-top, 0px) + 40px);
    padding-top: env(safe-area-inset-top, 0px);
    display: flex;
    align-items: center;
    justify-content: center;
    background: rgba(12, 12, 14, 0.72);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
    z-index: 11000;
}

/* Weicher Auslauf unter der Topbar statt harter Kante: gescrollter Inhalt
   verschwimmt sanft, bevor er unter der Leiste liegt. */
.app-topbar::after {
    content: "";
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    height: 16px;
    background: linear-gradient(to bottom, rgba(12, 12, 14, 0.28), rgba(12, 12, 14, 0));
    -webkit-backdrop-filter: blur(8px);
    backdrop-filter: blur(8px);
    -webkit-mask-image: linear-gradient(to bottom, #000, transparent);
    mask-image: linear-gradient(to bottom, #000, transparent);
    pointer-events: none;
}

.app-topbar__back {
    position: absolute;
    left: 0.25rem;
    bottom: 0;
    height: 40px;
    width: 44px;
    display: flex;
    align-items: center;
    justify-content: center;
    background: none;
    border: none;
    color: #fff;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
}

.app-topbar__back svg {
    width: 24px;
    height: 24px;
}

.app-topbar__back:active {
    opacity: 0.5;
}

.app-topbar__title {
    color: #fff;
    font-size: 0.95rem;
    font-weight: 600;
    letter-spacing: 0.02em;
    max-width: 62%;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* ─── Untere Tab-Bar ─── */
.app-tabbar {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    display: flex;
    background: rgba(12, 12, 14, 0.82);
    -webkit-backdrop-filter: blur(18px) saturate(1.3);
    backdrop-filter: blur(18px) saturate(1.3);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
    padding-bottom: env(safe-area-inset-bottom, 0px);
    z-index: 11000;
}

.app-tabbar__item {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 3px;
    height: 56px;
    color: #8e8e93;
    text-decoration: none;
    font-size: 0.62rem;
    font-weight: 500;
    -webkit-tap-highlight-color: transparent;
}

.app-tabbar__item svg {
    width: 23px;
    height: 23px;
}

.app-tabbar__item.is-active {
    color: #ffffff;
}

.app-tabbar__item:active {
    opacity: 0.55;
}

/* "Ansicht als"-Banner sitzt sonst hinter der Tab-Bar. */
body.app-mode .view-as-global-banner {
    bottom: calc(56px + env(safe-area-inset-bottom, 0px));
}

/* ═══ Premium-Gefühl (nur App): Animations-Tonart, Leisten-Verankerung,
   Tap-Feedback, Tab-Feder ═══ */
:root {
    --app-spring: cubic-bezier(0.34, 1.56, 0.64, 1);
    --app-smooth: cubic-bezier(0.32, 0.72, 0, 1);
}

/* Beim Seitenwechsel bleiben die App-Leisten stehen (eigene Transition-Gruppen)
   — nur der Inhalt gleitet. Das ist der native Navigations-Look. */
body.app-mode--nav .app-topbar { view-transition-name: app-topbar; }
body.app-mode--nav .app-tabbar { view-transition-name: app-tabbar; }
body.app-mode .app-statusbar-shim { view-transition-name: app-shim; }

/* Jede Berührung antwortet: kurzes Eindrücken statt grauem Tap-Blitz. */
body.app-mode * { -webkit-tap-highlight-color: transparent; }
body.app-mode button:not(:disabled),
body.app-mode .action-btn,
body.app-mode .admin-tile,
body.app-mode .gig-card,
body.app-mode .task-item,
body.app-mode .cal-btn,
body.app-mode .app-tabbar__item {
    transition: transform 0.12s var(--app-smooth);
}
body.app-mode button:not(:disabled):active,
body.app-mode .action-btn:active,
body.app-mode .admin-tile:active,
body.app-mode .gig-card:active,
body.app-mode .task-item:active,
body.app-mode .cal-btn:active {
    transform: scale(0.97);
}
body.app-mode .app-tabbar__item:active { transform: scale(0.92); }

/* Die Seiten-eigenen „← Dashboard"-Zurück-Links sind in der App doppelt —
   die Topbar hat ihren eigenen Zurück-Pfeil. Im Web bleiben sie natürlich. */
body.app-mode--nav .admin-back-link,
body.app-mode--nav .cal-back-link,
body.app-mode--nav .am-back-link {
    display: none;
}

/* Der aktive Tab federt kurz nach (Spring mit leichtem Überschwingen). */
body.app-mode .app-tabbar__item.is-active svg {
    animation: appTabPop 0.35s var(--app-spring);
}
@keyframes appTabPop {
    0%   { transform: scale(1); }
    45%  { transform: scale(1.16); }
    100% { transform: scale(1); }
}