/* ============================================================
   OurWayTrips V4.7.2 — Mobile-first stabilization layer
   Purpose: consistent iPhone/Safari behavior without changing
   business logic, D1 schema, or existing trip data.
   ============================================================ */

html, body {
  max-width: 100%;
  overflow-x: hidden;
}

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

button, .btn, a.btn, input, select, textarea {
  box-sizing: border-box;
}

/* Avoid iOS Safari auto-zoom when focusing form controls. */
@media (max-width: 850px) {
  input, select, textarea {
    font-size: 16px !important;
  }

  button, .btn, a.btn, .text-action {
    min-height: 44px;
  }

  .btn, button {
    white-space: normal;
  }

  main {
    padding-bottom: calc(122px + env(safe-area-inset-bottom)) !important;
  }

  /* Any flex/grid child must be allowed to shrink instead of pushing page width. */
  main *,
  .view *,
  .section-block *,
  .card *,
  .manager-row *,
  .trip-details-panel *,
  .memory-sheet *,
  .smart-import-modal *,
  .attachment-modal * {
    min-width: 0;
  }

  .section-head,
  .compact-head,
  .page-title-actions,
  .budget-category-head,
  .settlement-toolbar {
    max-width: 100%;
  }

  .section-head > *,
  .compact-head > *,
  .page-title-actions > * {
    min-width: 0;
  }

  .section-head h1,
  .section-head h2,
  .section-head h3,
  .page-title-actions h1,
  .page-title-actions h2,
  .manager-row strong,
  .manager-row p,
  .trip-summary-card strong,
  .tool-hub-card strong {
    overflow-wrap: anywhere;
  }

  /* Forms should never retain desktop minimum widths. */
  .inline-manager-form,
  .manager-pro-form,
  .decision-form,
  .memory-form-grid,
  .split-detail-fields {
    width: 100%;
    max-width: 100%;
  }

  .inline-manager-form label,
  .inline-manager-form label.grow,
  .manager-pro-form label,
  .manager-pro-form label.grow,
  fieldset,
  .people-fieldset {
    min-width: 0 !important;
    width: 100%;
    max-width: 100%;
  }

  input, select, textarea {
    width: 100%;
    max-width: 100%;
  }

  /* Reservation actions: always usable on narrow iPhones. */
  .reservation-head-actions {
    display: grid !important;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 10px;
    width: 100%;
    max-width: 100%;
    margin-top: 10px;
  }

  .reservation-head-actions .btn {
    width: 100%;
    justify-content: center;
  }

  /* Details header should wrap rather than squeeze text. */
  .trip-details-panel > summary {
    flex-wrap: wrap;
    align-items: flex-start;
  }

  .trip-details-panel > summary small {
    white-space: normal;
  }

  /* Bottom navigation: preserve seven destinations and iPhone safe area. */
  .bottom-nav.trip-bottom-nav {
    min-height: calc(70px + env(safe-area-inset-bottom));
    padding-top: 7px;
    padding-bottom: calc(7px + env(safe-area-inset-bottom));
  }

  .bottom-nav.trip-bottom-nav a {
    min-height: 50px;
    justify-content: center;
    overflow: hidden;
  }

  .bottom-nav.trip-bottom-nav a small {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
  }

  /* Keep floating controls above the bottom navigation. */
  .memory-fab {
    bottom: calc(88px + env(safe-area-inset-bottom)) !important;
  }

  .app-toast,
  .owt-offline-banner {
    bottom: calc(92px + env(safe-area-inset-bottom)) !important;
    max-width: calc(100vw - 24px);
  }

  /* Sheets/modals must not hide controls behind Safari or the app nav. */
  .modal-backdrop,
  .memory-modal {
    padding-bottom: env(safe-area-inset-bottom);
  }

  .modal-backdrop .memory-modal,
  .memory-sheet,
  .smart-import-modal,
  .attachment-modal {
    max-width: calc(100vw - 20px);
    max-height: calc(100dvh - 24px);
    overscroll-behavior: contain;
    -webkit-overflow-scrolling: touch;
  }

  /* Splitwise rows and controls */
  #splitwise,
  #manage {
    max-width: 100%;
    overflow-x: hidden;
  }

  #splitwise .manager-row,
  #manage .manager-row {
    max-width: 100%;
  }

  #splitwise .manager-row-main,
  #manage .manager-row-main,
  #splitwise .expense-split-preview,
  #manage .expense-split-preview {
    overflow-wrap: anywhere;
    white-space: normal;
  }

  /* Itinerary / Today / Map controls */
  .today-switcher,
  .map-day-tabs,
  .checklist-tabs {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    scrollbar-width: none;
  }
  .today-switcher::-webkit-scrollbar,
  .map-day-tabs::-webkit-scrollbar,
  .checklist-tabs::-webkit-scrollbar { display:none; }

  /* Do not let long map/route labels create horizontal overflow. */
  .timeline-main,
  .map-detail-card,
  .interactive-stop-list,
  .today-route-list {
    overflow-wrap: anywhere;
  }

  /* Tables/data-like layouts should remain readable if later introduced. */
  .mobile-scroll-x {
    max-width: 100%;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }
}

@media (max-width: 520px) {
  .reservation-head-actions {
    grid-template-columns: 1fr;
  }

  .section-head.compact-head {
    align-items: stretch;
  }

  .section-head.compact-head > div:first-child {
    width: 100%;
  }

  .section-head.compact-head > .btn,
  .section-head.compact-head > a.btn {
    width: 100%;
    justify-content: center;
  }

  /* Hero/card headings should scale rather than clip. */
  h1 {
    overflow-wrap: anywhere;
  }
}

/* Safari dynamic viewport support. */
@supports (height: 100dvh) {
  .mobile-menu,
  .modal-backdrop,
  .memory-modal {
    min-height: 100dvh;
  }
}