/* Phase 1 mobile shell. Loaded after style.css — see the <link> in header.ejs,
   login.ejs, meeting-room-guest.ejs, meeting-guest-lobby.ejs, terms.ejs, privacy.ejs.
   Overrides here beat style.css purely on source order; anywhere style.css already
   uses !important (e.g. .nav-user, .expense-filter-form's inline flex-wrap) we
   match it with !important too. */

/* Aragorn's baseline (2026-09-21) found .nav-links overflowing the viewport by
   127px at 1280px and still overflowing at 1366px — the hamburger only takes
   over at <=1200px, and the row no longer fits at common laptop widths. */
@media (min-width: 1201px) and (max-width: 1400px) {
  /* .nav-links also carries flex-shrink:0 (style.css:181) — as .nav-bottom's
     only flex child it keeps most of its unwrapped max-content width
     regardless of flex-wrap (measured: only 127px -> 82px at 1280px).
     flex-shrink:1 + max-width:100% force it to actually shrink to the
     available width so the wrap fully engages. */
  .nav-links {
    flex-wrap: wrap;
    flex-shrink: 1;
    max-width: 100%;
    justify-content: center;
  }
}

.table-wrapper {
  -webkit-overflow-scrolling: touch;
}

.table-wrapper.has-overflow {
  /* Inset shadow instead of a ::after/position:relative trick, so it can't
     shift positioning context for absolutely-positioned children on any of
     the many pages that reuse .table-wrapper. Gated behind .has-overflow
     (see footer.ejs) so it only paints when the table genuinely overflows. */
  box-shadow: inset -20px 0 16px -16px rgba(15, 27, 45, 0.15);
}

@media (max-width: 768px) {
  html {
    overflow-x: hidden;
    overflow-x: clip;
  }

  body {
    overflow-x: clip;
  }

  img,
  svg,
  video,
  canvas {
    max-width: 100%;
  }

  .container,
  .container-wide,
  .container-full {
    max-width: 100%;
    padding-left: 1rem;
    padding-right: 1rem;
  }

  .nav-top {
    flex-wrap: nowrap;
    gap: 0.5rem;
    padding: 0.5rem 0.75rem;
    min-width: 0;
  }

  .navbar-title {
    position: static;
    top: auto;
    left: auto;
    transform: none;
    font-size: 1.05rem;
    flex: 1 1 auto;
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  .navbar-logo {
    height: 28px;
    width: auto;
  }

  /* The notify bell is a sibling of .nav-user-dropdown inside .nav-user.
     Hiding .nav-user-dropdown (not .nav-user) keeps the bell visible next to
     the hamburger without moving it in the markup; its links move into the
     drawer's Account section instead (see header.ejs). */
  .nav-user-dropdown {
    display: none;
  }

  #meeting-notify-bell {
    min-width: 44px;
    min-height: 44px;
  }

  .navbar-hamburger {
    order: 99;
    margin-left: auto;
  }

  .hero-banner {
    padding: 1.25rem 1rem;
  }

  .hero-logo-img {
    height: auto;
    width: min(100%, 260px);
    max-width: 100%;
  }

  .card-header {
    padding: 0.9rem 1rem;
    flex-wrap: wrap;
    row-gap: 0.5rem;
  }

  .card-header > span:first-child {
    min-width: 0;
    flex-wrap: wrap;
  }

  .btn {
    min-height: 44px;
    padding: 0.65rem 1rem;
  }

  .btn-small {
    min-height: 36px;
  }

  .navbar-mobile__link {
    min-height: 44px;
  }

  /* !important: several forms set font-size inline per-field (e.g. the
     Project input in expense-form.ejs is 0.875rem inline), which otherwise
     beats an external rule and re-opens the iOS zoom-on-focus bug. */
  .form-group input,
  .form-group select,
  .form-group textarea {
    font-size: 16px !important;
  }

  .badge {
    font-size: 0.68rem;
  }

  /* mileage.ejs sets flex-wrap: nowrap inline on .expense-filter-form, so the
     override needs !important to win (Aragorn baseline: 325px overflow here,
     the worst of the sweep). Only used on /mileage. */
  .expense-filter-form {
    flex-wrap: wrap !important;
  }

  .expense-filter-form select,
  .expense-filter-form input {
    flex: 1 1 100% !important;
    min-width: 0 !important;
    font-size: 16px !important;
  }

  .expense-filter-form .btn {
    flex: 1 1 auto !important;
  }
}

@media (max-width: 480px) {
  .navbar-title {
    display: none;
  }

  .card-header .btn {
    width: 100%;
    justify-content: center;
  }

  .modal .modal-content,
  .confirm-modal,
  .eve-modal,
  .ra-modal-content,
  .qb-error-modal {
    width: 100%;
    max-width: 100%;
    max-height: calc(100vh - 1.5rem);
    max-height: calc(100dvh - 1.5rem);
  }

  .confirm-modal {
    overflow-y: auto;
  }

  .ra-modal {
    padding: 1rem;
  }
}

@media print {
  .navbar-mobile-overlay,
  .navbar-hamburger {
    display: none !important;
  }
}