/*
 * mobile.css — small-screen tuning layer for the Soft UI Dashboard chrome.
 *
 * Loaded LAST in includes/head.html (after soft-ui-dashboard.css and
 * dashboard-vocabulary.css) so these rules win source-order ties against
 * Soft UI's `!important` spacing utilities.
 *
 * Scope: this file ONLY corrects desktop-first chrome/density that Soft UI
 * ships with. It does NOT lay out tables — table→card collapse already lives
 * in the per-template `d-none d-md-block` / `d-md-none` markup (the 2026-03
 * modal-mobile work). Desktop (>= the breakpoints below) is untouched.
 *
 * Two breakpoints, matching how the layout actually behaves:
 *   < 1200px  — sidebar is off-canvas (Soft UI `xl`); tune the page chrome.
 *   <  768px  — phone; tune touch targets + density.
 */

/* ===========================================================================
 * Chrome — tablet-and-down (sidebar already off-canvas below xl)
 * ======================================================================== */
@media (max-width: 1199.98px) {

  /* The floating navbar "pill" ships with mx-4 (1.5rem each side) + mt-4 +
     border-radius-xl, which looks like a shrunk desktop widget on a phone and
     eats ~48px of horizontal space. Pull it close to the edges, keep a small
     radius, and respect the iOS status-bar safe area (PWA runs standalone). */
  .navbar-main {
    margin: calc(0.5rem + env(safe-area-inset-top)) 0.5rem 0 !important;
    border-radius: 0.75rem !important;
  }
  .navbar-main > .container-fluid {
    padding-left: 0.5rem !important;
    padding-right: 0.5rem !important;
  }

  /* `.main-content` is locked to max-height:100vh + height:100% by Soft UI,
     which clips the bottom of pages behind the iOS address bar and creates a
     nested scroll region. Let the page scroll the body naturally. */
  .main-content {
    max-height: none !important;
    height: auto !important;
  }

  /* Page content is wrapped in .container-fluid with generous px on desktop.
     Tighten the outer gutter so content isn't double-margined on a phone. */
  .main-content > .container-fluid {
    padding-left: 0.75rem !important;
    padding-right: 0.75rem !important;
  }
}

/* ===========================================================================
 * Touch + density — phone only
 * ======================================================================== */
@media (max-width: 767.98px) {

  /* 16px is the threshold below which iOS Safari auto-zooms on input focus.
     Anything smaller makes every form feel like it "jumps". */
  .form-control,
  .form-select {
    font-size: 16px !important;
  }

  /* 44px is the Apple/Android minimum comfortable tap target. Applied to the
     interactive controls you actually poke on a phone. flex-centering keeps
     existing label/icon alignment intact when we add the height floor. */
  .btn,
  .form-control,
  .form-select,
  .page-link,
  .navbar-nav .nav-link {
    min-height: 44px;
  }
  .btn,
  .navbar-nav .nav-link,
  .page-link {
    display: inline-flex;
    align-items: center;
    justify-content: center;
  }

  /* Sidebar (off-canvas) nav links: roomier rows are easier to thumb. */
  .sidenav .navbar-nav > .nav-item > .nav-link {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Card chrome is tuned for a 27" monitor (1.5rem body padding + large
     radius + bottom margins). Tighten so more signal fits above the fold. */
  .card > .card-body {
    padding: 1rem !important;
  }
  .card {
    border-radius: 0.75rem;
  }

  /* Matrix tables that intentionally stay tabular (e.g. phase imbalance)
     get momentum scrolling instead of a stiff overflow box. */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }

  /* App-modal: use the full width on a phone instead of Bootstrap's centered
     narrow dialog, and clear the home-indicator safe area. */
  #app-modal .modal-dialog {
    margin: 0.5rem;
    max-width: none;
  }
  #app-modal .modal-body {
    padding: 1rem;
    padding-bottom: calc(1rem + env(safe-area-inset-bottom));
  }

  /* Modal action row → full-width stacked buttons, pinned as a sticky footer.
     Hooks the canonical `d-flex justify-content-end gap-2` button row shared by
     ~88 form partials (and the rarer justify-content-between wizard rows). No
     .modal-footer element exists — #modal-body IS the scrollable .modal-body, so
     position:sticky pins the row to the bottom of the scroll viewport.
     Scoped to #modal-body so the same partials' full-page fallback is untouched. */
  #modal-body .d-flex.justify-content-end,
  #modal-body .d-flex.justify-content-between {
    flex-direction: column-reverse; /* primary (submit, last in DOM) on top */
    align-items: stretch;
    position: sticky;
    bottom: 0;
    z-index: 2;
    /* tinted footer background + top divider come from theme-enhance.css (the
       gradient is opaque, so it works as a sticky-footer backdrop). Here we add
       only the mobile behavior + a home-bar-safe bottom inset. */
    margin: 0.5rem -1rem calc(-1rem - env(safe-area-inset-bottom));
    padding: 0.75rem 1rem calc(0.75rem + env(safe-area-inset-bottom));
  }
  #modal-body .d-flex.justify-content-end > .btn,
  #modal-body .d-flex.justify-content-between > .btn {
    width: 100%;
    margin: 0;
  }

  /* `background-attachment: fixed` (set in theme-enhance.css) forces a repaint
     on every scroll frame on mobile Safari — jank we specifically don't want.
     Let the textured background scroll with the page on phones. */
  body.bg-gray-100 { background-attachment: scroll; }

  /* Breadcrumb can wrap awkwardly in the tight navbar; keep it on one line. */
  .navbar-main .breadcrumb {
    flex-wrap: nowrap;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
  }
}