/* ==========================================================================
   DOWNBEAT — Mobile & iOS native overrides
   ==========================================================================
   Loaded AFTER each page's inline <style> block so it wins the cascade on
   mobile. Desktop is not affected (all rules gated on max-width: 780px
   or presence of .capacitor-ios body class).

   Layer 1 — iOS safe areas (always active if inside Capacitor / PWA)
   Layer 2 — mobile viewport layout fixes (≤780px)
   Layer 3 — touch-size adjustments (≤780px)
   ========================================================================== */

/* ---- Layer 1: safe-area insets ----------------------------------------- */
/* Set up CSS custom properties that resolve to iOS safe-area insets when
   the app runs inside Capacitor (viewport-fit=cover), and to zero when
   opened in regular mobile Safari / on desktop. */
:root {
  --safe-top:    env(safe-area-inset-top, 0px);
  --safe-bottom: env(safe-area-inset-bottom, 0px);
  --safe-left:   env(safe-area-inset-left, 0px);
  --safe-right:  env(safe-area-inset-right, 0px);
}

/* When the app is running as an installed PWA or inside Capacitor, flag
   the body so targeted styles can apply. Capacitor sets `Capacitor` on
   the window object; app-shell.js adds this class on boot. */
body.capacitor-ios, body.pwa-standalone {
  /* Prevent rubber-band scroll from exposing the background. */
  overscroll-behavior-y: none;
  -webkit-user-select: none;
  user-select: none;
  /* Keep inputs + content-editable selectable. */
}
body.capacitor-ios input,
body.capacitor-ios textarea,
body.capacitor-ios select,
body.pwa-standalone input,
body.pwa-standalone textarea,
body.pwa-standalone select {
  -webkit-user-select: auto;
  user-select: auto;
}

/* Pull top of page content clear of the status-bar / notch area when the
   native status bar overlays the webview. StatusBar plugin overlays=false
   already does this at the native level; this is a belt-and-suspenders
   fallback for pages that render their own fixed headers. */
body.capacitor-ios > header,
body.capacitor-ios #appNavMount {
  padding-top: var(--safe-top);
}

body.capacitor-ios main,
body.pwa-standalone main {
  padding-bottom: calc(var(--safe-bottom) + 1rem);
}

/* ---- Layer 2: mobile layout fixes -------------------------------------- */
@media (max-width: 780px) {

  /* Every page's shell class gets shrunk padding. Without this, the 2rem
     horizontal padding on a 375px iPhone eats 32px of usable space. */
  .page-shell,
  .shows-shell,
  .dashboard-shell,
  .calendar-shell,
  .announcements-shell {
    padding-left: 1rem !important;
    padding-right: 1rem !important;
    padding-top: calc(var(--safe-top) + 1.5rem) !important;
    padding-bottom: calc(var(--safe-bottom) + 5rem) !important; /* leave room for bottom nav */
  }

  /* Typography — big headlines still have presence but stop blowing out
     narrow viewports. Using clamp in the source would be ideal but many
     pages use fixed rem values. */
  h1 {
    font-size: clamp(2rem, 8vw, 3rem) !important;
    line-height: 0.98 !important;
  }
  h2 { font-size: clamp(1.3rem, 5vw, 1.8rem) !important; }
  h3 { font-size: clamp(1.1rem, 4vw, 1.4rem) !important; }

  /* Tables shouldn't overflow horizontally — wrap or stack. Specific
     known grid layouts are already overridden in their own pages. */
  table { font-size: 0.85rem; }

  /* Forms — stretch inputs full-width, 16px font size to prevent iOS
     auto-zoom on focus. */
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="number"],
  input[type="date"],
  input[type="time"],
  input[type="search"],
  input[type="tel"],
  input[type="url"],
  textarea,
  select {
    font-size: 16px !important;  /* iOS won't auto-zoom when ≥16px */
    width: 100%;
    box-sizing: border-box;
  }

  /* Tabs — wrap instead of horizontal scroll */
  .tab-bar { overflow-x: auto; scrollbar-width: none; }
  .tab-bar::-webkit-scrollbar { display: none; }
  .tab { white-space: nowrap; }

  /* Modals — full-height bottom sheets feel more native than centered
     tiny boxes on mobile. */
  .modal-backdrop { padding: 0 !important; align-items: flex-end !important; }
  .modal-box {
    width: 100% !important;
    max-width: none !important;
    max-height: 92vh !important;
    border-radius: 16px 16px 0 0;
    padding: 1.5rem 1.2rem calc(var(--safe-bottom) + 1.5rem) !important;
    animation: slide-up 0.25s ease-out;
  }
  @keyframes slide-up {
    from { transform: translateY(100%); }
    to   { transform: translateY(0); }
  }

  /* Page head flex rows should stack */
  .page-head,
  .shows-head,
  .section-head {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.8rem !important;
  }

  /* Grid breakpoints — force single column on very narrow */
  .stats-row,
  .item-grid,
  .two-col {
    grid-template-columns: 1fr !important;
  }
}

/* ---- Layer 3: touch targets (44×44pt per Apple HIG) -------------------- */
@media (max-width: 780px) {
  button,
  .btn,
  .btn-xs,
  .action-btn,
  .tab,
  input[type="button"],
  input[type="submit"],
  a.btn,
  a.btn-ghost,
  a.btn-primary {
    min-height: 44px;
    touch-action: manipulation;  /* remove 300ms click delay */
  }

  /* Links in row-level UI stay compact but get a bigger hit region via
     padding. The visual doesn't change. */
  .quick-action,
  .event,
  .show-card,
  .admin-row,
  .item-card,
  .history-row,
  .lb-row,
  .orders-row {
    padding-top: 1rem;
    padding-bottom: 1rem;
  }

  /* Eliminate the tap-highlight grey flash on iOS (ugly default). */
  * {
    -webkit-tap-highlight-color: transparent;
  }
}

/* ---- Layer 4: bottom nav (Capacitor / PWA only, phone viewport) ------- */
/* app-nav.js renders a mobile-bottom variant when body has .capacitor-ios
   or .pwa-standalone. These styles position it above the home indicator. */
.mobile-bottom-nav {
  display: none;  /* hidden by default, shown below */
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: var(--ink-soft, #111);
  border-top: 1px solid var(--line, #2a2725);
  padding: 0.5rem 0 calc(var(--safe-bottom) + 0.4rem);
  display: none;
  justify-content: space-around;
  z-index: 900;
  backdrop-filter: saturate(180%) blur(20px);
  -webkit-backdrop-filter: saturate(180%) blur(20px);
  background: rgba(15, 13, 12, 0.92);
}
.mobile-bottom-nav a {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  padding: 0.4rem 0.2rem;
  color: var(--bone-dim);
  text-decoration: none;
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.6rem;
  letter-spacing: 0.08em;
  text-transform: uppercase;
}
.mobile-bottom-nav a.active { color: var(--flare); }
.mobile-bottom-nav a .icon {
  font-size: 1.35rem;
  line-height: 1;
}
.mobile-bottom-nav a .label {
  font-family: 'JetBrains Mono', monospace;
  font-size: 0.58rem;
}

body.capacitor-ios .mobile-bottom-nav,
body.pwa-standalone .mobile-bottom-nav {
  display: flex;
}

/* When the bottom nav is visible, add room at the bottom of every page
   so its content clears the nav bar. */
body.capacitor-ios main,
body.pwa-standalone main {
  padding-bottom: calc(var(--safe-bottom) + 75px);
}

/* Hide the top app nav when bottom nav is active on phone-sized viewports. */
@media (max-width: 780px) {
  body.capacitor-ios #appNavMount,
  body.pwa-standalone #appNavMount {
    display: none;
  }
}

/* ---- Layer 5: pull-to-refresh affordance ------------------------------- */
/* Native-feeling overscroll: native iOS rubber-banding does the visual
   work; we just hide the ugly background color that shows through. */
html, body {
  background-color: var(--ink, #0a0908);
}

/* ---- Layer 6: iOS Safari / Capacitor-specific quirks ------------------ */
/* 100vh on mobile Safari includes the URL bar, which causes jumpy layout.
   Use -webkit-fill-available or dvh (iOS 15.4+). */
@supports (height: 100dvh) {
  .fullscreen { height: 100dvh; }
}
.fullscreen {
  height: 100vh;  /* fallback */
  height: -webkit-fill-available;
}