/**
 * iOS / Capacitor safe-area insets for all app shell pages.
 * Loaded via bottom-nav.css — applies to any page with .bottom-nav or .app-layout.
 */

:root {
  --safe-area-top: constant(safe-area-inset-top);
  --safe-area-top: env(safe-area-inset-top, 0px);
  --safe-area-bottom: constant(safe-area-inset-bottom);
  --safe-area-bottom: env(safe-area-inset-bottom, 0px);
  --safe-area-left: constant(safe-area-inset-left);
  --safe-area-left: env(safe-area-inset-left, 0px);
  --safe-area-right: constant(safe-area-inset-right);
  --safe-area-right: env(safe-area-inset-right, 0px);
  --app-gutter-phone: 1rem;
  --app-gutter-tablet: 1.25rem;
  --bottom-nav-height: 4rem;
  --sticky-action-height: 0px;
}

/* ── App shell (sidebar + main): top safe-area clearance ──
   Applies at every width — the physical status bar exists regardless of
   viewport size, but this was previously scoped to <1024px only, leaving
   the desktop-sidebar layout's header/icons colliding with the iOS status
   bar on wide iPads (both .app-sidebar, fixed to top:0, and the sticky
   .app-shell-header inside .app-main need this). */
body:has(.bottom-nav) .app-main,
body:has(.app-layout) .app-main,
body:has(.bottom-nav) .app-sidebar,
body:has(.app-layout) .app-sidebar {
  padding-top: var(--safe-area-top);
}

@media (max-width: 1023px) {
  /* Main scroll area — bottom padding above tab bar */
  body:has(.bottom-nav) .app-main > main,
  body:has(.bottom-nav) main.pb-bottom-nav {
    padding-bottom: calc(var(--bottom-nav-height, 4rem) + 1rem + var(--safe-area-bottom)) !important;
  }

  /* Page titles / first header row (Rechnungsübersicht, Kunden, etc.) */
  body:has(.bottom-nav) .app-main > main > div > h1:first-child,
  body:has(.bottom-nav) .app-main > main h1:first-of-type,
  body:has(.bottom-nav) #invoice-list-view > .flex:first-child,
  body:has(.bottom-nav) .app-page-head {
    padding-top: 0.25rem;
  }

  /* Dashboard: Übersicht / Rechnungen tabs (home + invoice list) */
  body:has(.bottom-nav) #dashboard-mobile-tabs {
    margin-top: 0.25rem;
  }
}

/* Auth pages without bottom nav */
@media (max-width: 1023px) {
  body.flex.items-center.justify-center.min-h-screen,
  body.min-h-screen.flex.items-center {
    padding-top: var(--safe-area-top);
    padding-bottom: var(--safe-area-bottom);
    padding-left: var(--safe-area-left);
    padding-right: var(--safe-area-right);
  }
}