/**
 * File: HeroX\assets\css\spa-fixes.css
 * Purpose:
 * - SPA-spezifische CSS-Fixes die nach allen anderen CSS geladen werden
 * - Fix: app-tabbar.css hat position:relative das position:fixed ueberschreibt
 * - Fix: body-padding fuer fixierte Tabbar
 * - Fix: SPA Content Area Spacing
 *
 * Dependencies:
 * - app-tabbar.css (muss vorher geladen sein)
 * - spa-shell.css
 *
 * Load Order: NACH allen Page-CSS
 * Version: 1.1.0
 */

/* =========================
   CRITICAL FIX: Tabbar muss fixed sein, nicht relative!
   app-tabbar.css setzt position:relative am Ende → ueberschreibt position:fixed
   ========================= */
.bottom-tabbar {
    position: fixed !important;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 9998;
}

/* =========================
   Body Padding fuer fixierte Tabbar
   ========================= */
body.body-with-tabbar {
    padding-bottom: calc(var(--tabbarH, 64px) + var(--safeB, 0px) + 16px);
}

/* =========================
   SPA Content: genug Platz nach unten
   ========================= */
.spa-content {
    min-height: calc(100vh - 56px - var(--tabbarH, 64px) - 32px);
    padding-bottom: 24px;
}

/* =========================
   Module Loading Skeleton
   ========================= */
[data-spa-module][data-loaded="false"] {
    min-height: 120px;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* =========================
   SPA Page Transitions
   ========================= */
.spa-content.spa-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s ease;
}

.spa-content:not(.spa-loading) {
    opacity: 1;
    transition: opacity 0.2s ease;
}

/* =========================
   Tabbar Hidden State (wenn per JS ausgeblendet)
   ========================= */
.bottom-tabbar.tabbar-hidden {
    transform: translateY(100%);
    pointer-events: none;
}

/* =========================
   Fix: Shell Header z-index ueber Content
   ========================= */
.spa-header {
    position: sticky;
    top: 0;
    z-index: 1020;
}