/* ShutterOS — mobile UI/UX fixes.
   Loaded AFTER the built app stylesheet so these rules win.
   Keep this file hand-editable; do not let a bundler overwrite it. */

@media (max-width: 768px) {

  /* ── Bottom nav ────────────────────────────────────────────────────────
     The app renders inline <svg> inside .bn-icon, but the built CSS only
     sets `font-size:19px` on it (written back when the icons were emoji).
     An inline SVG with no width/height and no CSS size collapses to 0x0,
     so the whole bar rendered as bare 9px text labels. Give it a real box. */
  .bn-icon {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 24px;
    height: 24px;
  }
  .bn-icon svg {
    width: 22px;
    height: 22px;
    display: block;
  }

  /* Eight tabs across a 375px screen leaves ~46px each. Reclaim the padding,
     keep every tab a full-height touch target, and respect the iPhone home
     indicator so the last row of tabs is not sitting under it. */
  .bottom-nav {
    height: auto;
    min-height: var(--nav-h-mob, 68px);
    padding: 4px 0 calc(4px + env(safe-area-inset-bottom, 0px));
    gap: 0;
    overflow-x: hidden;
  }
  .bn-item {
    min-height: 52px;
    justify-content: center;
    padding: 4px 2px;
    max-width: none;
    -webkit-tap-highlight-color: transparent;
  }
  .bn-label {
    font-size: 10px;
    line-height: 1.1;
  }
  /* The active pill was sized for the old label-only bar and cropped the icon. */
  .bn-item.active::before {
    top: 3px;
    width: 46px;
    height: 30px;
  }

  /* Content must clear the fixed bar, including the safe-area inset. */
  body {
    padding-bottom: calc(var(--nav-h-mob, 68px) + env(safe-area-inset-bottom, 0px));
  }

  /* ── Filter chips ──────────────────────────────────────────────────────
     "All / Running / Upcoming / Completed" wrapped onto two rows and pushed
     the first result card below the fold. Make it one swipeable row. */
  .chips {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
    padding-bottom: 2px;
    scroll-snap-type: x proximity;
  }
  .chips::-webkit-scrollbar { display: none; }
  .chips > * {
    flex: 0 0 auto;
    scroll-snap-align: start;
  }

  /* ── Row actions (Invoice / Pay Due / Edit / Del) ──────────────────────
     These render 24px tall on mobile — roughly half the comfortable minimum,
     and "Del" is destructive. Grow them and stop them wrapping one orphan
     button onto its own line. */
  button.text-xs,
  a.text-xs {
    min-height: 40px;
    padding-left: 14px;
    padding-right: 14px;
    font-size: 13px;
    -webkit-tap-highlight-color: transparent;
  }
  .flex.flex-wrap.items-center.gap-1\.5 {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 6px;
    width: 100%;
  }
  .flex.flex-wrap.items-center.gap-1\.5 > * {
    min-width: 0;
  }

  /* ── General touch polish ─────────────────────────────────────────────── */
  html {
    -webkit-text-size-adjust: 100%;
    overscroll-behavior-y: contain;
  }
  /* Long client names / venue strings must not force a sideways scroll. */
  body {
    overflow-x: hidden;
  }
}

/* Very narrow phones (iPhone SE and similar): drop the labels to a size that
   still fits without truncating "Events" or "Admin". */
@media (max-width: 360px) {
  .bn-label { font-size: 9px; }
  .bn-icon, .bn-icon svg { width: 20px; height: 20px; }
}