/* =========================================================================
   Responsive / mobile
   -------------------------------------------------------------------------
   Loads LAST, after Krayin's Tailwind and after our other sheets, so it can
   correct layout without !important.

   Krayin's admin is desktop-first: it has breakpoint utilities in places, but
   the data-dense surfaces (dashboard columns, DataGrids, the record page) were
   built for a wide viewport and overflow below it. This sheet is the mobile
   layer for the whole portal rather than per-screen patches.

   Owner: design-system-agent
   ========================================================================= */

/* ------------------------------------------------- 1. FLEX MIN-WIDTH BUG -- */

/**
 * The single largest cause of horizontal scroll in this admin.
 *
 * A flex item defaults to `min-width: auto`, which means it will NOT shrink
 * below its content's intrinsic width. One wide child — a chart SVG, a long
 * unbroken string, a table — and the item pushes past the viewport, taking the
 * whole page with it. Measured on the dashboard at 375px: a flex column
 * reported 438px inside a 333px parent, giving the document 89px of overflow.
 *
 * `min-width: 0` restores the expected "shrink to fit" behaviour. It is scoped
 * to the admin content area so it cannot disturb the sidebar or header, and it
 * is applied at every width, not just mobile — the same bug bites a narrow
 * desktop window.
 */
/**
 * :not([class*="min-w-"]) matters. Krayin sets deliberate minimums in places —
 * the lead kanban columns are `min-w-[275px]` inside an `overflow-x-auto`
 * board, which is the correct pattern: the columns keep a readable width and
 * the BOARD scrolls. Because our sheets now load after Tailwind, an unscoped
 * `min-width: 0` wins that tie and crushed six columns to 49px with hyphenated
 * headings. Anything that declares its own minimum is left alone.
 */
/**
 * MOBILE ONLY. The overflow this fixes was measured at 375px; desktop never
 * had it. Applied at every width, the same rule lets flex tiles shrink below
 * their content on a wide screen too — it squeezed the dashboard's revenue
 * tiles until "Won Revenue" wrapped and "$0.00" split into "$0. / 00". Letting
 * a container shrink is only correct where there is genuinely no room.
 */
@media (max-width: 1023px) {
  .nav-offset .flex > *:not([class*="min-w-"]),
  .nav-offset .grid > *:not([class*="min-w-"]) {
    min-width: 0;
  }
}

/**
 * Long unbroken values — email addresses, ABNs, URLs — must wrap rather than
 * force their container wide.
 *
 * break-word, NOT anywhere. `anywhere` also shrinks the element's min-content
 * size, so the browser starts breaking text that would otherwise have fitted:
 * it split "Won Revenue" across two lines and cut "$0.00" into "$0.0 / 0" on
 * the dashboard tiles. `break-word` only breaks a word that genuinely cannot
 * fit on its own line, which is the behaviour wanted here.
 */
@media (max-width: 1023px) {
  .nav-offset :where(p, span, td, dd, h1, h2, h3, h4, h5) {
    overflow-wrap: break-word;
  }
}

/* ------------------------------------------------------- 2. THE PAGE BOX -- */

/* Belt and braces: nothing may create a horizontal scrollbar on the document.
   If something still overflows, it scrolls inside its own container (below)
   rather than dragging the page sideways. */
@media (max-width: 1023px) {
  html,
  body {
    overflow-x: hidden;
  }

  /* The desktop rail is hidden below lg; content must not reserve space for
     it. The offset rule in nav.css is already scoped to >=1024px, this simply
     guarantees the gutter is the mobile one. */
  .nav-offset {
    padding-inline: var(--space-3);
  }
}

/* -------------------------------------------------------- 3. WIDE THINGS -- */

/**
 * Tables and DataGrids cannot reflow into a phone width without losing meaning,
 * so they scroll INSIDE their own box. The rule is: the page never scrolls
 * sideways, but a table may.
 */
@media (max-width: 1023px) {
  .nav-offset table {
    display: block;
    width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Charts draw a fixed-width SVG. Cap it to the container so a chart that was
     measured wider (e.g. before an orientation change) cannot widen the page. */
  .nav-offset svg {
    max-width: 100%;
  }
}

/* ------------------------------------------------------ 4. RECORD PAGES -- */

/**
 * The lead record page is a 330px rail beside the content. Below lg that does
 * not fit, so the rail stops being a column and becomes a block above the
 * panels — the summary cards still come first, which is the right reading
 * order on a phone.
 */
@media (max-width: 1023px) {
  .record-layout {
    grid-template-columns: minmax(0, 1fr);
  }

  .record-layout__aside {
    border-right: none;
    border-bottom: 1px solid var(--divider);
  }

  /* The record head's action bar wraps instead of squeezing the buttons to
     unreadable widths. */
  .record-head__actions {
    flex-wrap: wrap;
  }

  /* Seven tabs do not fit a phone. They scroll horizontally as a strip, which
     is the standard pattern and keeps every tab reachable. */
  .tabs {
    overflow-x: auto;
    scrollbar-width: none;
    flex-wrap: nowrap;
  }

  .tabs::-webkit-scrollbar {
    display: none;
  }

  .tabs__tab {
    flex: none;
  }
}

/* ------------------------------------------------------------ 5. FORMS -- */

/* Three-column field grids collapse to one on a phone, two on a tablet. */
@media (max-width: 767px) {
  .field-grid,
  .record-panel .grid {
    grid-template-columns: minmax(0, 1fr) !important;
  }
}

@media (min-width: 768px) and (max-width: 1023px) {
  .field-grid {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }
}

/* ------------------------------------------------------- 6. TAP TARGETS -- */

/**
 * Pointer-coarse, not a width breakpoint: a touch laptop needs this and a
 * narrow desktop window does not. 44px is the WCAG 2.2 target-size minimum.
 */
@media (pointer: coarse) {
  .nav__link,
  .nav__sub-link,
  .tabs__tab,
  .btn,
  .primary-button,
  .secondary-button,
  .transparent-button {
    min-height: 44px;
  }

  .nav__toggle,
  .btn-icon {
    min-width: 44px;
    min-height: 44px;
  }
}

/* --------------------------------------------------------- 7. MODALS -- */

/* Full-height sheets on a phone rather than a centred box that overflows. */
@media (max-width: 640px) {
  .modal__panel {
    width: 100%;
    max-width: 100%;
    max-height: 100dvh;
    border-radius: var(--radius-lg) var(--radius-lg) 0 0;
    margin-top: auto;
  }
}