/*
 * Phone-width fixes, and nothing else.
 *
 * Every rule is inside the media query below, so a screen 640px or wider
 * never reads a line of this file — the desktop panel is exactly as it was.
 * Linked from base.blade.php, so the user panel and the super admin shell
 * both get it.
 *
 * The rules hang off hook classes (`m-*`, `app-*`) added to the templates.
 * A class that no stylesheet styles above this width does nothing on its
 * own, which is what keeps the templates' desktop rendering unchanged.
 *
 * Here rather than as Tailwind utilities: app.css is a static build that
 * nothing regenerates, so a utility missing from it silently does nothing.
 */
/*
 * The panel's sidebar drawer, below the desktop breakpoint.
 *
 * app.css turns `.app-sidebar` into a fixed, off-canvas drawer under 1024px —
 * but the element also carries Tailwind's `relative` and `z-[1]`, which sit
 * later in the same sheet with the same specificity and win. So the "hidden"
 * drawer stayed in the page flow: 64px of every phone screen went to a rail
 * that was translated off to the left, a strip of it still showed, and when
 * opened it sat underneath the content.
 *
 * The Command Deck skin makes it worse: deck.css lifts every child of
 * `.dk-root` with `.dk-root > :not(.dk-scene) { position: relative;
 * z-index: 1 }`, which out-specifies the drawer rule too.
 *
 * `.dk-root > aside.app-sidebar` outranks that, and `aside.app-sidebar`
 * outranks the utilities on shells without the skin. Below 1024px only, so
 * the desktop layout is untouched.
 */
@media (max-width: 1023px) {
  aside.app-sidebar,
  .dk-root > aside.app-sidebar {
    position: fixed;
    z-index: 40;
  }

  /*
   * The menu button, caught by the same deck.css rule: it is `fixed` and a
   * direct child of `.dk-root`, so it was put back in the row as a 58px
   * column beside the page, and scrolled away with it instead of staying
   * pinned to the top corner. z-index 50 is the `z-50` it was written with.
   */
  .dk-root > button[data-sidebar-open] {
    position: fixed;
    z-index: 50;
  }
}

@media (max-width: 639px) {

  /* A page's action buttons (Back, Login as Subscriber, Reset Password,
     Suspend…). The row was `shrink-0` with no wrap, so the last buttons ran
     off the right edge where the shell clips them. */
  .sa-page-actions {
    flex-wrap: wrap;
    flex-shrink: 1;
    min-width: 0;
  }

  /* Pagination: a dozen page numbers do not fit in 375px. Wrap them onto a
     second line instead of pushing "next" out of reach. */
  .app-pagination {
    flex-wrap: wrap;
    row-gap: .25rem;
  }

  /* Tab rows. Several are `w-fit`, which sizes the row to its tabs and so
     never lets the row's own sideways scroll kick in. Capping the width at
     the column makes the tabs scroll instead of hanging off the page. Lists
     that already stack (flex-col) or wrap (flex-wrap) here are left alone. */
  .app-tabs-list:not(.flex-col):not(.flex-wrap) {
    max-width: 100%;
    overflow-x: auto;
    justify-content: flex-start;
  }

  .app-tabs-list:not(.flex-col):not(.flex-wrap) > * {
    flex-shrink: 0;
  }

  /* A one-column grid whose items hold long unbroken text (emails, owner
     names). A grid item defaults to `min-width: auto`, so the column grew to
     the text's full width and the cards overflowed; `truncate` never got the
     chance to truncate. */
  .m-grid-fit {
    grid-template-columns: minmax(0, 1fr);
  }

  .m-grid-fit > * {
    min-width: 0;
  }

  /* A card header with a title on the left and buttons on the right. At
     phone width the title was squeezed to one word per line and the buttons
     pushed off the card; let the buttons drop below the title instead. */
  .m-stack-head {
    flex-wrap: wrap;
    gap: .75rem;
  }

  .m-stack-head > :first-child {
    flex: 1 1 12rem;
    min-width: 0;
  }

  /* A wide data table inside a card: scroll it sideways within the card
     rather than cutting its right-hand columns off. */
  .m-table-scroll {
    overflow-x: auto;
  }

  .m-table-scroll > table {
    min-width: 36rem;
  }
}