/*
 * Baresha Network — PWA-specific styles only.
 * Global layout/theme styles live in css/*.css; this file must stay small.
 */

:root {
  --bn-pwa-brand: #ED3023;
  --bn-pwa-safe-top: env(safe-area-inset-top, 0px);
  --bn-pwa-safe-right: env(safe-area-inset-right, 0px);
  --bn-pwa-safe-bottom: env(safe-area-inset-bottom, 0px);
  --bn-pwa-safe-left: env(safe-area-inset-left, 0px);
}

/* ---- Offline / online connection banner ---- */
.bn-pwa-offline-banner {
  position: fixed;
  top: calc(8px + var(--bn-pwa-safe-top));
  left: calc(12px + var(--bn-pwa-safe-left));
  right: calc(12px + var(--bn-pwa-safe-right));
  z-index: 1080;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 16px;
  border-radius: 12px;
  background: #b91c1c;
  color: #fff;
  font-size: 13.5px;
  font-weight: 600;
  line-height: 1.4;
  text-align: center;
  box-shadow: 0 8px 24px rgba(0, 0, 0, 0.25);
  animation: bn-pwa-banner-in 0.25s ease;
}

.bn-pwa-offline-banner[hidden] {
  display: none;
}

@keyframes bn-pwa-banner-in {
  from { opacity: 0; transform: translateY(-8px); }
  to { opacity: 1; transform: translateY(0); }
}

@media (min-width: 768px) {
  .bn-pwa-offline-banner {
    left: auto;
    right: calc(16px + var(--bn-pwa-safe-right));
    max-width: 420px;
  }
}

/* ---- Install button (inside the sidebar footer pill) ---- */
.bn-footer-pill-btn#pwaInstallBtn[hidden] {
  display: none;
}

.bn-footer-pill-btn#pwaInstallBtn {
  color: var(--bn-pwa-brand);
}

.bn-footer-pill-btn#pwaInstallBtn:focus-visible {
  outline: 2px solid var(--bn-pwa-brand);
  outline-offset: 2px;
}

/* ---- Standalone (installed) application mode ---- */
@media (display-mode: standalone) {
  html {
    /* Keep rubber-band scroll chained inside the app window. */
    overscroll-behavior-y: none;
  }

  body {
    min-height: 100vh;
    min-height: 100dvh;
    padding-top: var(--bn-pwa-safe-top);
    padding-left: var(--bn-pwa-safe-left);
    padding-right: var(--bn-pwa-safe-right);
  }

  /* Keep the mobile sidebar toggle clear of the notch / status area. */
  .sidebar-mobile-toggle,
  .mobile-toggle-btn {
    top: calc(12px + var(--bn-pwa-safe-top));
    left: calc(12px + var(--bn-pwa-safe-left));
  }

  /* Sidebar footer pill clears the iPhone home indicator. */
  .bn-sidebar__footer,
  .sidebar-footer {
    padding-bottom: calc(10px + var(--bn-pwa-safe-bottom));
  }

  /* Bottom-anchored UI (toasts, sticky action bars) clears gesture area. */
  .bn-toast-container,
  .toast-container {
    bottom: calc(16px + var(--bn-pwa-safe-bottom));
  }
}

/* iOS standalone cannot be targeted via display-mode media query alone. */
html.bn-pwa-standalone-ios body {
  padding-top: var(--bn-pwa-safe-top);
}

html.bn-pwa-standalone-ios .sidebar-mobile-toggle,
html.bn-pwa-standalone-ios .mobile-toggle-btn {
  top: calc(12px + var(--bn-pwa-safe-top));
  left: calc(12px + var(--bn-pwa-safe-left));
}

html.bn-pwa-standalone-ios .bn-sidebar__footer,
html.bn-pwa-standalone-ios .sidebar-footer {
  padding-bottom: calc(10px + var(--bn-pwa-safe-bottom));
}

/* Touch-friendly minimum for the install action. */
#pwaInstallBtn {
  min-width: 40px;
  min-height: 40px;
}

@media (prefers-reduced-motion: reduce) {
  .bn-pwa-offline-banner {
    animation: none;
  }
}