/* ============================================================================
   Admin mobile pattern library
   Loaded on every page via the shell (header.ejs). Every rule here is either
   additive (a new tw- class no existing markup uses) or scoped to
   @media (max-width: 991.98px), so desktop (>=992px) rendering is unchanged.
   Spec: docs/superpowers/specs/2026-06-19-admin-mobile-usability-design.md
   ========================================================================= */

/* ---- Block 1: responsive padding scale ----------------------------------
   Replaces the p-5 (3rem) habit on admin card bodies. 1rem on phones, scaling
   to 3rem at lg. Opt-in via the tw-pad class; a scoped floor below tames the
   existing p-5 card columns without editing every template. */
.tw-pad { padding: 1rem; }
@media (min-width: 992px) {
  .tw-pad { padding: 3rem; }
}
/* Floor: existing admin card-body columns shed their oversized phone padding.
   Scoped to phones only — desktop keeps Bootstrap's p-5. */
@media (max-width: 991.98px) {
  .card > .row > [class*="col"].p-5 { padding: 1rem !important; }
}

/* ---- Block 2: hardened table scroll -------------------------------------
   The base .tw-table-wrap (overflow-x:auto) lives in tailwind.css. Here we add
   the right-edge fade affordance + sticky first column, mobile-only, as a
   GENERAL rule (not per-page id list like extra_style.css:520) so any admin
   table gets it by sitting in .tw-table-wrap. */
.tw-table-wrap { position: relative; }
.tw-table-wrap::after {
  content: "";
  position: absolute;
  top: 0; right: 0; bottom: 0;
  width: 36px;
  pointer-events: none;
  background: linear-gradient(to right, rgba(255,255,255,0), rgba(255,255,255,0.92));
  opacity: 0;
  transition: opacity 0.2s ease;
}
@media (max-width: 991.98px) {
  .tw-table-wrap.is-scrollable::after { opacity: 1; }
  .tw-table-wrap.is-scroll-end::after { opacity: 0; }
  /* sticky first column so a row's identity never scrolls out of view.
     Opt-in only (.tw-table-sticky-1 on the wrap) so this opaque-background
     repaint never silently hits customer-facing .tw-table instances. */
  .tw-table-wrap.tw-table-sticky-1 table.tw-table th:first-child,
  .tw-table-wrap.tw-table-sticky-1 table.tw-table td:first-child {
    position: sticky;
    left: 0;
    background: #fbf8f3;
    z-index: 1;
  }
}

/* ---- Block 3: master-detail (list + edit panel) -------------------------
   The master-detail system itself lives in tailwind.css (.tw-md / .tw-md-list
   / .tw-md-detail / .tw-md-back, toggled via .tw-md--detail-open). We do NOT
   redefine it here — admin_mobile.css loads after tailwind.css and a second
   definition would silently reshape the existing consumers (agencies.ejs,
   user_profile.ejs). admin_mobile.js drives the existing convention generically.

   Page-scoped wrinkle: bus_member_list wants its LIST pane wide (Bootstrap
   col-lg-8), but tailwind.css forces .tw-md-list to flex:0 0 25% on desktop.
   Neutralize that 25% only on this page (marker class .bus_member_md), leaving
   agencies.ejs / user_profile.ejs (no marker) on the default 25% layout. */
@media (min-width: 992px) {
  .bus_member_md .tw-md-list { flex: 0 0 auto; max-width: none; }
}

/* ---- Block 4: wrapping toolbar / tab strip ------------------------------
   Action rows and tab strips wrap instead of overflowing, with content-sized
   items and >=40px tap targets. On phones items grow to fill each line. */
.tw-bar {
  display: flex;
  flex-wrap: wrap;
  gap: 0.75rem;
  align-items: flex-end;
}
.tw-bar > * { min-width: 0; }
@media (max-width: 991.98px) {
  .tw-bar { gap: 0.5rem; }
  .tw-bar > .tw-bar__grow { flex: 1 1 100%; }
}

/* ---- Sweep helper: responsive item min-width ----------------------------
   Replaces inline style="min-width:160px" on flex/layout items. 0 on phones
   (so the row can shrink to the viewport), restores the desktop pin at lg. */
.tw-minw-row { min-width: 0; }
@media (min-width: 992px) {
  .tw-minw-row { min-width: 160px; }
}