/* 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) {

  /* Mobile app shell: focused app bar, calm canvas and clear hierarchy. */
  :root { --nav-h-mob: 72px; }
  body { background: #f3f7f7; }
  .mobile-topbar {
    min-height: 60px;
    height: 60px;
    padding: 0 68px 0 16px;
    background: rgba(250,253,253,.94);
    -webkit-backdrop-filter: blur(16px);
    backdrop-filter: blur(16px);
    border-bottom: 1px solid rgba(0,73,76,.10);
    box-shadow: 0 2px 14px rgba(0,50,52,.07);
  }
  .mobile-topbar .mark,
  .mobile-topbar img { width: 40px; height: 40px; border-radius: 12px; }
  .mobile-topbar strong,
  .mobile-topbar .title { font-size: 18px; letter-spacing: -.02em; }
  .shell-content { padding: 18px 14px 20px; }
  .page { gap: 16px; }
  .page-header { gap: 10px; margin-bottom: 4px; }
  .page-title { font-size: 26px; line-height: 1.12; letter-spacing: -.035em; }
  .page-sub { font-size: 13px; line-height: 1.45; }
  .shuttr-dashboard-page .page-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
    align-items: center;
    gap: 10px;
  }
  .shuttr-dashboard-page .shuttr-action-status {
    order: 1;
    justify-self: start;
  }
  .shuttr-dashboard-page .shuttr-action-privacy {
    order: 2;
    justify-self: end;
    width: auto !important;
    min-height: 42px !important;
    padding: 0 16px !important;
  }
  .shuttr-dashboard-page .shuttr-action-booking {
    order: 3;
    grid-column: 1 / -1;
    width: 100%;
    min-height: 50px;
    justify-content: center;
    border-radius: 16px;
    box-shadow: 0 5px 14px rgba(0,106,112,.20);
  }
  .shuttr-dashboard-page .shuttr-action-refresh { display: none !important; }
  .kpi-grid { gap: 12px; }
  .kpi-card {
    min-height: 126px;
    padding: 17px 16px;
    border-radius: 20px;
    box-shadow: 0 3px 12px rgba(0,48,50,.08);
  }
  .surface {
    border-radius: 22px;
    box-shadow: 0 3px 14px rgba(0,48,50,.075);
  }

  /* ── 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;
    background: rgba(250,253,253,.96);
    -webkit-backdrop-filter: blur(18px);
    backdrop-filter: blur(18px);
    border-top-color: rgba(0,73,76,.10);
    box-shadow: 0 -5px 22px rgba(0,48,50,.08);
  }
  /* Five primary destinations; secondary tools remain in the menu. */
  .bottom-nav .bn-item:nth-child(n+6) { display: none; }
  .bn-item {
    min-height: 52px;
    justify-content: center;
    padding: 4px 2px;
    max-width: none;
    -webkit-tap-highlight-color: transparent;
    flex: 1 1 20%;
    border-radius: 14px;
  }
  .bn-label {
    font-size: 11px;
    font-weight: 650;
    line-height: 1.1;
  }
  /* The active pill was sized for the old label-only bar and cropped the icon. */
  .bn-item.active::before {
    top: 2px;
    width: 52px;
    height: 32px;
    background: #d4f2f2;
  }

  /* 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; }
}

/* ── The green (or red) message box covering the screen ──────────────────
   A bug in the built stylesheet. Three rules set .toast:

     base                      top:20px;  right:20px; max-width:360px
     @media (max-width:480px)  top:auto;  bottom:...; left:12px; right:12px
     @media (max-width:768px)  bottom:...

   The 768px rule sets `bottom` but never clears the base `top:20px`. So on
   anything between 481px and 768px wide - a phone held sideways, a tablet,
   a narrow browser window - the toast has BOTH top and bottom pinned and
   stretches into a full-height coloured column down the side of the screen.
   That is the tall green "Dashboard refreshed." box.

   Clearing `top` puts it back to a normal bar above the tab bar. */
@media (max-width: 768px) {
  .toast {
    top: auto;
    left: 12px;
    right: 12px;
    max-width: none;
    height: auto;
    width: auto;
  }
}