/* ============================================================================
   responsive.css — mobile & tablet refinements.

   PURPOSE
   The app shell is already responsive (app.css collapses the grid below 992px
   and turns the sidebar into a slide-out overlay). This file ADDS to that: it
   closes the remaining gaps on phones and tablets without touching the desktop
   layout.

   RULES OF THE ROAD
   • Every declaration here lives inside a `max-width` (or `hover: none`) media
     query, so desktop rendering is byte-for-byte unchanged.
   • Breakpoints follow the Bootstrap-5 / app.css convention already in use:
       tablet  ≤ 991.98px   (lg)
       mobile  ≤ 767.98px   (md)
       phone   ≤ 575.98px   (sm)
   • Loaded globally from base.html (after app.css) — head links are not
     re-injected on hx-boost body swaps, so a per-page link would only apply on
     a hard reload. Global + media-scoped is the correct pattern here.
   ========================================================================== */


/* ============================================================================
   PHASE 1 — SHELL FIXES
   ========================================================================== */

@media (max-width: 991.98px) {
  /* The floating hamburger (.mobile-menu-trigger) is position:fixed at
     top:.75rem / left:.75rem and is 40px wide, so its right edge lands at
     ~3.25rem. The sticky top bar gives its inner row no left inset below 992px,
     so the ☰ button overlaps the workspace/team pill. Pad the row's start so
     the pill begins to the right of the button. */
  .topbar__inner { padding-left: 3.4rem; }

  /* The workspace pill can eat up to 52vw; with the ☰ inset above that risks a
     squeeze on small tablets. Cap it a little tighter here. */
  .workspace-pill { max-width: min(46vw, 420px); }

  /* Guard against a stray wide child forcing the whole page to scroll
     sideways. `clip` (not `hidden`) does not create a scroll container, so it
     won't break position:sticky descendants or trap inner scrollers. Real
     horizontal scrollers (tables, code blocks) keep their own overflow-x. */
  .app-shell__content { overflow-x: clip; }
}

@media (max-width: 767.98px) {
  /* Wide data tables were clipped, not scrollable: `.data-table` sets
     `overflow:hidden` (for the rounded corners) while `.data-table__body`/
     `__table` are width:100% with nowrap headers — so extra columns simply
     disappeared off-screen with no way to reach them. Make the BODY the
     horizontal scroller (the rounded parent still clips it cleanly) and give
     the table a sensible min-width so columns don't crush together. */
  .data-table__body {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
  .data-table__table { min-width: 560px; }

  /* Any bare <table> dropped into page content (reports, detail views) should
     scroll rather than blow out the layout. Scoped to .main so it never
     touches the chrome. */
  .main > table,
  .main .table-responsive-auto > table { display: block; overflow-x: auto; }
}


/* ============================================================================
   PHASE 2 — PAGE SWEEP (stacking & spacing)
   ========================================================================== */

@media (max-width: 767.98px) {
  /* Page headers: the title + trailing action sit on one baseline-aligned row
     on desktop. On phones stack them so a right-aligned "New…" button doesn't
     collide with a long title. */
  .page-header {
    flex-direction: column;
    align-items: flex-start;
    gap: .85rem;
    margin-bottom: 1.5rem;
  }
  .page-header h1 { font-size: 1.6rem; }
  /* Trailing action clusters go full-width so buttons are easy to tap. */
  .page-header > .page-header__actions,
  .page-header > .btn,
  .page-header > .d-flex { width: 100%; }

  /* Detail-card headers (title | action) stack like page headers. */
  .detail-card__head {
    flex-direction: column;
    align-items: flex-start;
    gap: .6rem;
  }

  /* Horizontal tab strips: keep them on ONE line and let them scroll sideways
     rather than wrapping into a tall stack that shoves content down. The
     settings sub-nav already scrolls (app.css); mirror that for these. */
  .tabs,
  .settings-tabs {
    flex-wrap: nowrap;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .tabs::-webkit-scrollbar,
  .settings-tabs::-webkit-scrollbar { display: none; }
  .tabs > *,
  .settings-tabs__link { flex: 0 0 auto; }

  /* Trim the main content's vertical padding so phones aren't mostly gutter.
     Horizontal padding keeps app.css's clamp() (min 1.5rem). */
  .main { padding-top: 1.25rem; padding-bottom: calc(1.5rem + var(--statusbar-h)); }
}

@media (max-width: 575.98px) {
  .page-header h1 { font-size: 1.42rem; }
  /* Two-up / three-up auto-fit card grids already collapse; nudge the gap down
     so single-column stacks aren't overly spaced on small phones. */
  .grid-cards-2, .grid-cards-3, .grid-cards-4 { gap: .75rem; }
}


/* ============================================================================
   PHASE 3 — TOUCH TARGETS, FORMS, MODALS
   ========================================================================== */

/* Prevent iOS Safari from auto-zooming the viewport when a form field is
   focused — it zooms whenever the computed font-size is < 16px. Only applied on
   coarse (touch) pointers so desktop's compact controls are untouched. */
@media (max-width: 767.98px) and (hover: none) {
  .form-control,
  .form-select,
  textarea,
  input[type="text"],
  input[type="email"],
  input[type="password"],
  input[type="search"],
  input[type="tel"],
  input[type="number"],
  input[type="url"] { font-size: 16px; }
}

/* Comfortable minimum tap size for icon-only controls on touch devices. The
   visual box is unchanged on desktop; here we just guarantee ≥40px hit areas. */
@media (hover: none) and (max-width: 991.98px) {
  .icon-btn,
  .topbar__item--icon,
  .topbar__item--avatar { min-width: 40px; min-height: 40px; }
}

/* Modals: on small phones give dialogs the full width (Bootstrap default
   leaves a .5rem margin and caps width) and let tall bodies scroll inside a
   near-full-height sheet instead of overflowing the viewport. */
@media (max-width: 575.98px) {
  .modal-dialog:not(.modal-fullscreen):not(.modal-sm) {
    margin: .5rem;
    max-width: none;
  }
  .modal-dialog:not(.modal-fullscreen) .modal-content { max-height: calc(100dvh - 1rem); }
  .modal-dialog:not(.modal-fullscreen) .modal-body { overflow-y: auto; }
}