/* ============================================================================
   RUSH PATCH 135 — Cross-platform responsive shell & mobile containment
   Scope: public website, patron portal, ambassador/partner standalone portals,
   staff/back-office shell, tables, forms, drawers and safe-area behaviour.
   No payment, ticket, QR, pricing or business-rule changes.
   ============================================================================ */

:root {
  --rush-responsive-content-gutter: clamp(.65rem, 2.6vw, 1.25rem);
  --rush-tablet-staff-breakpoint: 1200px;
}

html { max-width: 100%; overflow-x: clip; }
body { max-width: 100%; }
.ui-page-frame,
.ui-main,
.ui-main > *,
.ui-main :where(.grid,.flex) > *,
.ui-main :where(section,article,form,fieldset,label,details) {
  min-width: 0;
  box-sizing: border-box;
}
.ui-main :where(img,video,canvas,iframe,embed,object) { max-width: 100%; height: auto; }
.ui-main :where(pre,code,samp,kbd) { max-width: 100%; overflow-wrap: anywhere; }
.ui-main pre { overflow-x: auto; -webkit-overflow-scrolling: touch; }
.ui-main :where(input,select,textarea) { max-width: 100%; }

/* --------------------------------------------------------------------------
   STAFF/BACK OFFICE
   Keep the off-canvas mobile shell through tablets and compact landscape
   devices. 1024px iPads must not receive the full fixed desktop sidebar.
   -------------------------------------------------------------------------- */
@media (max-width: 1199px) {
  body.ui-staff-shell .ui-staff-sidebar,
  body.ui-staff-shell .ui-staff-brand { display: none !important; }

  body.ui-staff-shell .ui-menu-button--staff,
  body.ui-staff-shell .ui-staff-header__brand { display: inline-flex !important; }

  body.ui-staff-shell .ui-page-frame--staff,
  body.ui-staff-shell .ui-main--staff {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    margin-left: 0 !important;
    padding-left: 0 !important;
    overflow-x: clip !important;
  }

  body.ui-staff-shell .ui-staff-header__content {
    width: 100%;
    max-width: 100%;
    padding-left: max(.7rem, var(--rush-safe-left));
    padding-right: max(.7rem, var(--rush-safe-right));
    gap: .55rem;
  }

  body.ui-staff-shell .ui-staff-header__identity { flex: 1 1 auto; overflow: hidden; }
  body.ui-staff-shell .ui-page-identity { flex: 1 1 auto; overflow: hidden; }
  body.ui-staff-shell .ui-page-identity__title { max-width: min(46vw, 24rem); }
  body.ui-staff-shell .ui-staff-context { flex: 0 1 auto; min-width: 0; }

  body.ui-staff-shell .ui-mobile-drawer--staff {
    display: flex !important;
    z-index: 302 !important;
    width: min(92vw, 27rem) !important;
    max-width: calc(100vw - var(--rush-safe-left) - var(--rush-safe-right)) !important;
    height: var(--rush-visual-height, 100dvh);
    min-height: 0 !important;
    padding-left: var(--rush-safe-left);
    visibility: visible;
  }
  body.ui-staff-shell .ui-mobile-drawer--staff.-translate-x-full {
    transform: translateX(calc(-100% - var(--rush-safe-left))) !important;
    visibility: hidden !important;
    pointer-events: none !important;
  }
  body.ui-staff-shell .ui-mobile-drawer--staff:not(.-translate-x-full) {
    transform: translateX(0) !important;
    visibility: visible !important;
    pointer-events: auto !important;
  }
  body.ui-staff-shell .ui-mobile-overlay[data-admin-mobile-overlay]:not(.hidden) {
    display: block !important;
    z-index: 301 !important;
  }

  body.ui-staff-shell .ui-staff-page-tools {
    left: 0 !important;
    right: 0 !important;
    width: 100% !important;
    max-width: 100% !important;
  }

  body.ui-staff-shell .ui-main--staff > section,
  body.ui-staff-shell .ui-main--staff > div:not(.ui-staff-page-tools):not(.ui-page-loader):not(.ui-toast-region) {
    width: 100% !important;
    max-width: 100% !important;
    padding-left: var(--rush-responsive-content-gutter) !important;
    padding-right: var(--rush-responsive-content-gutter) !important;
  }

  body.ui-staff-shell .ui-main--staff :where(.glass-card,.ui-staff-card,article,form,fieldset) {
    max-width: 100% !important;
    min-width: 0 !important;
  }

  /* Wide admin tables stay inside a local scroller instead of widening page. */
  body.ui-staff-shell .ui-main--staff :where(.overflow-x-auto,.overflow-auto,.ui-staff-table-wrap) {
    max-width: 100% !important;
    min-width: 0 !important;
    overflow-x: auto !important;
    overscroll-behavior-inline: contain;
    -webkit-overflow-scrolling: touch;
  }
  body.ui-staff-shell .ui-main--staff table:not(.ui-responsive-table) {
    width: max-content;
    min-width: 100%;
    max-width: none !important;
  }
}

/* Tablet/small laptop width: Tailwind's lg utilities would otherwise switch
   the desktop sidebar back on at 1024px. This block deliberately wins. */
@media (min-width: 1024px) and (max-width: 1199px) {
  body.ui-staff-shell .ui-staff-actions { display: none !important; }
  body.ui-staff-shell .ui-page-frame--staff { padding-left: 0 !important; }
  body.ui-staff-shell .ui-main--staff { width: 100vw !important; max-width: 100vw !important; }
  body.ui-staff-shell .ui-mobile-drawer--staff.lg\:hidden { display: flex !important; }
  body.ui-staff-shell .ui-menu-button--staff.lg\:hidden { display: inline-flex !important; }
}

@media (min-width: 1200px) {
  body.ui-staff-shell .ui-menu-button--staff { display: none !important; }
  body.ui-staff-shell .ui-mobile-drawer--staff,
  body.ui-staff-shell .ui-mobile-overlay[data-admin-mobile-overlay] { display: none !important; }
}

@media (max-width: 760px) {
  body.ui-staff-shell .ui-staff-header__brand .ui-brand-caption { display: none !important; }
  body.ui-staff-shell .ui-page-identity__eyebrow { display: none !important; }
  body.ui-staff-shell .ui-page-identity__title { max-width: 34vw; font-size: .78rem; }
  body.ui-staff-shell .ui-staff-page-tools { min-height: 3.75rem; }
  body.ui-staff-shell .ui-staff-page-tools__context { max-width: 38vw; }
  body.ui-staff-shell .ui-staff-page-tools__actions {
    flex: 1 1 auto;
    min-width: 0;
    max-width: 58vw;
    justify-content: flex-start;
    overflow-x: auto;
    flex-wrap: nowrap !important;
    scrollbar-width: none;
    -webkit-overflow-scrolling: touch;
  }
  body.ui-staff-shell .ui-staff-page-tools__actions::-webkit-scrollbar { display: none; }
  body.ui-staff-shell .ui-staff-page-tools__actions > * { flex: 0 0 44px; }

  body.ui-staff-shell .ui-main--staff form { min-width: 0 !important; width: 100%; max-width: 100%; }
  body.ui-staff-shell .ui-main--staff .ui-staff-table-wrap { overflow-x: auto !important; overflow-y: visible !important; }
  body.ui-staff-shell .ui-main--staff .ui-responsive-table { width: 100% !important; min-width: 0 !important; }
  body.ui-staff-shell .ui-main--staff table:not(.ui-responsive-table) { min-width: max(42rem, 100%); }
  body.ui-staff-shell .ui-main--staff :where(.pill-primary,.pill-secondary,.pill-ghost) { max-width: 100%; white-space: normal; text-align: center; }
}

@media (max-width: 430px) {
  body.ui-staff-shell .ui-mobile-drawer--staff { width: calc(100vw - .65rem) !important; }
  body.ui-staff-shell .ui-mobile-quick-grid { grid-template-columns: 1fr !important; }
  body.ui-staff-shell .ui-mobile-drawer__header,
  body.ui-staff-shell .ui-mobile-drawer__scroll,
  body.ui-staff-shell .ui-mobile-drawer__footer { padding-left: .75rem; padding-right: .75rem; }
  body.ui-staff-shell .ui-page-identity__title { max-width: 29vw; }
}

/* --------------------------------------------------------------------------
   PUBLIC WEBSITE NAVIGATION
   Keep the compact drawer through 899px. The former 768px switch was too
   early for pages with full navigation/account controls.
   -------------------------------------------------------------------------- */
@media (min-width: 768px) and (max-width: 899px) {
  body.ui-front-shell .ui-site-nav__desktop { display: none !important; }
  body.ui-front-shell .ui-menu-button[data-mobile-toggle] { display: inline-flex !important; }
  body.ui-front-shell .ui-mobile-drawer[data-mobile-panel] { display: flex !important; }
  body.ui-front-shell .ui-mobile-overlay[data-mobile-overlay]:not(.hidden) { display: block !important; }
}

@media (max-width: 899px) {
  body.ui-front-shell .ui-site-nav__inner { gap: .65rem; }
  body.ui-front-shell .ui-brand { max-width: calc(100% - 6.5rem); overflow: hidden; }
  body.ui-front-shell .ui-brand-mark { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  body.ui-front-shell .ui-mobile-drawer[data-mobile-panel] {
    z-index: 302;
    width: min(92vw, 25rem);
    max-width: calc(100vw - var(--rush-safe-left) - var(--rush-safe-right));
  }
  body.ui-front-shell .ui-mobile-overlay[data-mobile-overlay] { z-index: 301; }
}

/* --------------------------------------------------------------------------
   PATRON PORTAL
   There used to be a 721–900px dead zone: desktop navigation was hidden at
   900px while the bottom navigation only appeared at 720px. Keep a usable
   five-item bottom bar throughout phone and tablet widths.
   -------------------------------------------------------------------------- */
@media (min-width: 721px) and (max-width: 900px) {
  body.ui-patron-shell .ui-page-frame { padding-bottom: calc(var(--patron-bottom-height) + var(--rush-safe-bottom)); }
  body.ui-patron-shell .ui-patron-bottom-nav {
    position: fixed;
    z-index: 83;
    inset: auto 0 0;
    height: calc(var(--patron-bottom-height) + var(--rush-safe-bottom));
    padding: .4rem max(.7rem,var(--rush-safe-right)) max(.4rem,var(--rush-safe-bottom)) max(.7rem,var(--rush-safe-left));
    display: grid !important;
    grid-template-columns: repeat(5,minmax(0,1fr));
    align-items: start;
    border-top: 1px solid rgba(255,255,255,.14);
    background: rgba(8,8,12,.96);
    box-shadow: 0 -13px 36px rgba(0,0,0,.34);
    backdrop-filter: blur(22px) saturate(145%);
    -webkit-backdrop-filter: blur(22px) saturate(145%);
  }
  body.ui-patron-shell .ui-patron-bottom-link,
  body.ui-patron-shell .ui-patron-bottom-buy {
    min-width: 0;
    min-height: 3.45rem;
    border: 0;
    border-radius: .85rem;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-direction: column;
    gap: .22rem;
    color: var(--rush-faint);
    background: transparent;
    font-size: .62rem;
    font-weight: 720;
    line-height: 1;
  }
  body.ui-patron-shell .ui-patron-bottom-link .ui-icon { width: 1.22rem; height: 1.22rem; }
  body.ui-patron-shell .ui-patron-bottom-link.is-active { color: #fff; background: rgba(255,47,146,.075); }
  body.ui-patron-shell .ui-patron-bottom-link.is-active .ui-icon { color: var(--rush-pink-bright); }
  body.ui-patron-shell .ui-patron-bottom-buy { position: relative; color: #fff; }
  body.ui-patron-shell .ui-patron-bottom-buy .ui-icon {
    width: 2.55rem; height: 2.55rem; margin-top: -.95rem; border: 1px solid rgba(255,255,255,.18);
    border-radius: 1rem; padding: .68rem; background: linear-gradient(135deg,var(--rush-pink),#d71e81);
    box-shadow: 0 12px 26px rgba(255,47,146,.3);
  }
  body.ui-patron-shell .ui-patron-page,
  body.ui-patron-shell .ui-checkout-page {
    padding-bottom: calc(var(--patron-bottom-height) + var(--rush-safe-bottom) + 1.4rem) !important;
  }
}

@media (max-width: 900px) {
  body.ui-patron-shell .ui-patron-header__inner { min-width: 0; gap: .6rem; }
  body.ui-patron-shell .ui-patron-brand { min-width: 0; max-width: 46vw; overflow: hidden; }
  body.ui-patron-shell .ui-patron-brand .ui-brand-mark { max-width: 100%; overflow: hidden; text-overflow: ellipsis; }
  body.ui-patron-shell .ui-patron-header__actions { min-width: 0; gap: .4rem; }
  body.ui-patron-shell .ui-patron-more-drawer { width: 100%; max-width: 100%; }
  body.ui-patron-shell .ui-patron-page :where(.grid,.flex) > * { min-width: 0; }
}

@media (max-width: 520px) {
  body.ui-patron-shell .ui-patron-header__actions .ui-patron-site-button { display: none !important; }
  body.ui-patron-shell .ui-patron-header__actions .ui-patron-logout-form { display: none !important; }
  body.ui-patron-shell .ui-patron-brand { max-width: 58vw; }
}

/* --------------------------------------------------------------------------
   STANDALONE USER PORTALS (Ambassador, Performer, Promoter, Finance, Bar)
   These pages intentionally hide the shared shell. Keep their sticky headers,
   tab strips, action rows and forms contained on narrow screens.
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  body.ui-front-shell .ui-main--front > .min-h-screen,
  body.ui-front-shell .ui-main--front > main,
  body.ui-front-shell .ui-main--front > div { max-width: 100%; overflow-x: clip; }

  body.ui-front-shell .ui-main--front header.sticky > div,
  body.ui-front-shell .ui-main--front main { padding-left: var(--rush-responsive-content-gutter) !important; padding-right: var(--rush-responsive-content-gutter) !important; }

  body.ui-front-shell .ui-main--front header.sticky .flex.justify-between { align-items: flex-start; }
  body.ui-front-shell .ui-main--front header.sticky :where(.pill-primary,.pill-secondary,.pill-ghost) { width: auto; min-width: max-content; }
  body.ui-front-shell .ui-main--front header.sticky nav { max-width: 100%; scroll-padding-inline: .25rem; -webkit-overflow-scrolling: touch; }

  body.ui-front-shell .ui-main--front form { min-width: 0 !important; max-width: 100%; }
  body.ui-front-shell .ui-main--front :where(.overflow-x-auto,.overflow-auto) { max-width: 100%; -webkit-overflow-scrolling: touch; }
}

/* --------------------------------------------------------------------------
   COMMON FORMS, ACTIONS, MODALS AND TABLES
   -------------------------------------------------------------------------- */
@media (max-width: 760px) {
  .ui-main :where(dialog,[role="dialog"],.ui-modal__dialog,.ui-sheet) {
    max-width: calc(100vw - var(--rush-safe-left) - var(--rush-safe-right) - .8rem) !important;
    max-height: calc(var(--rush-visual-height,100dvh) - .8rem) !important;
  }

  .ui-main :where(.field,.input-dark,input:not([type="checkbox"]):not([type="radio"]),select,textarea) {
    width: 100%;
    min-width: 0;
  }

  .ui-main :where(.ui-staff-filter-actions,.ui-staff-form-actions,.ui-patron-page-header__actions) {
    width: 100%;
    min-width: 0;
  }

  .ui-main .whitespace-nowrap { max-width: 100%; }
  .ui-main a.whitespace-nowrap,
  .ui-main button.whitespace-nowrap { flex: 0 0 auto; }
}

/* 320–375px: no component may widen the document. */
@media (max-width: 375px) {
  :root { --rush-responsive-content-gutter: .6rem; }
  .ui-main :where(.rounded-3xl,.rounded-\[2rem\],.rounded-\[1\.8rem\]) { border-radius: 1.15rem !important; }
  .ui-main :where(.p-10,.p-9,.p-8,.p-7,.p-6) { max-width: 100%; }
  .ui-toast-region { left: .55rem !important; right: .55rem !important; }
}

/* Landscape phones/tablets: preserve vertical room and avoid giant overlays. */
@media (orientation: landscape) and (max-height: 620px) and (max-width: 1199px) {
  .ui-mobile-drawer__header { min-height: 3.6rem; padding-top: .55rem; padding-bottom: .55rem; }
  .ui-mobile-drawer__quick,
  .ui-mobile-staff-tools { padding-top: .5rem; padding-bottom: .5rem; }
  .ui-mobile-drawer__scroll { padding-top: .55rem; padding-bottom: .55rem; }
  .ui-patron-more-drawer { max-height: 96dvh; }
}

@media (prefers-reduced-motion: reduce) {
  .ui-mobile-drawer { transition: none !important; }
}

/* Public desktop hand-off: rush-ui's component display rules load after
   Tailwind utilities, so explicitly remove mobile controls once desktop nav
   takes over. */
@media (min-width: 900px) {
  body.ui-front-shell .ui-menu-button[data-mobile-toggle],
  body.ui-front-shell .ui-mobile-drawer[data-mobile-panel],
  body.ui-front-shell .ui-mobile-overlay[data-mobile-overlay] { display: none !important; }
}
@media (min-width: 900px) and (max-width: 1100px) {
  body.ui-front-shell .ui-site-nav__inner { gap: .65rem; }
  body.ui-front-shell .ui-site-nav__desktop { gap: .05rem; }
  body.ui-front-shell .ui-nav-link { padding-inline: .58rem; font-size: .72rem; }
  body.ui-front-shell .ui-nav-cta { padding-inline: .72rem; font-size: .74rem; }
}

/* Staff fixed header + fixed page-tools must reserve real document space.
   Older page-specific pt-28/pt-32 rules only worked visually on some desktop
   widths and could place the first row underneath the tools on tablets. */
body.ui-staff-shell.ui-staff-has-page-tools.ui-no-announcement .ui-main--staff {
  padding-top: calc(var(--rush-nav-height) + 4.5rem) !important;
}
body.ui-staff-shell.ui-staff-has-page-tools.ui-has-announcement .ui-main--staff {
  padding-top: calc(var(--rush-nav-height) + var(--rush-announcement-height) + 4.5rem) !important;
}
body.ui-staff-shell.ui-staff-has-page-tools .ui-main--staff > section.pt-28,
body.ui-staff-shell.ui-staff-has-page-tools .ui-main--staff > section.pt-32,
body.ui-staff-shell.ui-staff-has-page-tools .ui-main--staff > .ui-staff-page {
  padding-top: .85rem !important;
}

@media (max-width: 760px) {
  body.ui-patron-shell .ui-patron-page :where(.overflow-auto,.overflow-x-auto),
  body.ui-patron-shell .ui-checkout-page :where(.overflow-auto,.overflow-x-auto),
  body.ui-front-shell .ui-main--front :where(.overflow-auto,.overflow-x-auto) {
    width: 100%;
    max-width: 100%;
    min-width: 0;
    -webkit-overflow-scrolling: touch;
    overscroll-behavior-inline: contain;
  }
  .ui-main form :where(.pill-primary,.pill-secondary,.pill-ghost) {
    max-width: 100%;
    white-space: normal;
    overflow-wrap: anywhere;
  }
  .ui-main :where(h1,h2,h3,h4,p,label) {
    overflow-wrap: anywhere;
  }
}