/* ====================== RESPONSIVE ====================== */
@media (max-width: 767px) {
  body {
    grid-template-columns: 1fr;
    grid-template-rows: 1fr;
  }
  #sidebar { display: none !important; }
  #bottomBar { display: flex; }
  #mainContent {
    grid-column: 1;
    padding-bottom: calc(72px + env(safe-area-inset-bottom, 0px));
  }
  #contentHeader {
    padding: 16px 16px 0;
  }

  /* === SEGMENT CONTROLS (pill → grid on mobile) === */
  .overview-pills, .plan-pills, .reservations-pills, .attractions-pills,
  .setup-pills, .tools-pills {
    display: grid !important;
    grid-template-columns: repeat(auto-fit, minmax(0, 1fr)) !important;
    gap: 4px !important;
    overflow-x: visible !important;
    padding: 4px !important;
    margin-bottom: 16px !important;
    border-radius: 12px !important;
  }

  /* Setup (5 pills) — 3+2 wrap */
  .setup-pills {
    grid-template-columns: repeat(3, 1fr) !important;
  }

  /* Tools (8 pills) — 4+4 wrap */
  .tools-pills {
    grid-template-columns: repeat(4, 1fr) !important;
  }

  /* Individual segment buttons */
  .overview-pill, .plan-pill, .reservations-pill, .attractions-pill,
  .setup-pill, .tools-pill {
    min-height: 44px !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    text-align: center !important;
    white-space: nowrap !important;
    border-radius: 10px !important;
    font-size: 13px !important;
    font-weight: 600 !important;
    padding: 8px 6px !important;
    border: none !important;
  }

  /* Itinerary day pills — horizontal scroll is fine, but bigger targets */
  .itin-pills {
    gap: 6px !important;
  }
  .itin-pill {
    min-height: 40px !important;
    padding: 8px 16px !important;
    font-size: 13px !important;
  }

  /* === TYPOGRAPHY === */
  #contentHeader h1 {
    font-size: 22px !important;
    line-height: 1.3 !important;
  }
  #contentHeader .view-description,
  #contentHeader p {
    font-size: 14px !important;
    line-height: 1.5 !important;
  }

  /* === CARDS & SECTIONS === */
  .card {
    padding: 12px !important;
    border-radius: 12px !important;
  }

  /* === TABLES — horizontal scroll === */
  table {
    display: block !important;
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch !important;
    max-width: 100% !important;
  }

  /* =============================================================
     FORM SIZING SYSTEM — Mobile (< 767px)
     3 tiers: Default → 44px, Compact → 36px, Checkbox → 20px
     16px font prevents iOS zoom on all inputs.
     ============================================================= */

  /* --- Tier 1: Default inputs — 44px touch targets, 16px font --- */
  input[type="text"], input[type="number"], input[type="date"],
  input[type="time"], input[type="email"], input[type="url"],
  input[type="password"], select, textarea {
    min-height: 44px !important;
    font-size: 16px !important;
    padding: 8px 12px !important;
    box-sizing: border-box !important;
  }

  /* Narrow inputs — full-width on mobile */
  .form-input-narrow {
    width: 100% !important;
  }

  /* --- Tier 2: Compact inputs — smaller touch target for dense UI --- */
  .compact-input, .compact-select, .crowd-input {
    min-height: 36px !important;
    font-size: 14px !important;
    padding: 4px 8px !important;
  }

  /* --- Tier 3: Checkboxes --- */
  input[type="checkbox"] {
    width: 20px !important;
    height: 20px !important;
    min-width: 20px !important;
    min-height: 20px !important;
  }

  /* --- Buttons --- */
  .btn, button[type="submit"] {
    min-height: 44px !important;
    padding: 10px 16px !important;
  }

  /* --- Tables — inherits tier system, just ensures readability --- */
  table {
    font-size: 14px !important;
  }

  /* --- Crowd grid — 2×2 layout on mobile --- */
  .crowd-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px 12px !important;
  }
  .crowd-item {
    min-width: 0 !important;
    gap: 8px !important;
  }
  .crowd-input {
    width: 56px !important;
    min-width: 56px !important;
    min-height: 36px !important;
    font-size: 16px !important;
    padding: 4px 8px !important;
    -webkit-appearance: none !important;
    -moz-appearance: textfield !important;
    appearance: none !important;
  }

  /* --- Autocomplete items — tappable --- */
  .autocomplete-list .ac-item,
  .autocomplete-list div {
    min-height: 44px !important;
    padding: 10px 12px !important;
    font-size: 14px !important;
  }

  /* --- Export FAB — above bottom nav --- */
  .export-fab {
    bottom: calc(80px + env(safe-area-inset-bottom, 0px)) !important;
    right: 16px !important;
    width: 44px !important;
    height: 44px !important;
    font-size: 18px !important;
    opacity: 0.8 !important;
  }

  /* --- Component-specific layout fixes --- */

  /* Party table */
  #partyMembers table {
    table-layout: fixed !important;
  }
  #partyMembers table th:first-child,
  #partyMembers table td:first-child {
    width: 40% !important;
  }
  #partyMembers table th:last-child,
  #partyMembers table td:last-child {
    width: 50px !important;
  }

  /* Itinerary header */
  .itin-header {
    flex-wrap: wrap !important;
    gap: 8px !important;
  }
  .itin-controls {
    flex: 1 !important;
    justify-content: flex-end !important;
  }

  /* Trip tasks */
  .task-row {
    flex-wrap: wrap !important;
    gap: 6px !important;
  }
  .task-meta {
    width: 100% !important;
    padding-left: 28px !important;
  }
  .task-assignee {
    flex: 1 !important;
    min-width: 0 !important;
  }

  /* === MODALS — bottom-aligned sheet on mobile === */
  .modal-backdrop.show {
    align-items: flex-end !important;
  }
  .modal {
    position: relative !important;
    width: 100% !important;
    max-width: 100% !important;
    max-height: 90vh !important;
    border-radius: 20px 20px 0 0 !important;
    padding-bottom: calc(20px + env(safe-area-inset-bottom, 0px)) !important;
    animation: slideUpMobile 0.3s ease-out !important;
  }

  /* === TOUCH BEHAVIOR === */
  button, a, select, input, textarea,
  .overview-pill, .plan-pill, .reservations-pill, .attractions-pill,
  .setup-pill, .tools-pill, .itin-pill, .tab, .btn {
    touch-action: manipulation !important;
    -webkit-tap-highlight-color: transparent !important;
  }

  /* === CLEAN SCROLLBARS === */
  ::-webkit-scrollbar { display: none !important; }
  * { scrollbar-width: none !important; }
}

@keyframes slideUpMobile {
  from { opacity: 0; transform: translateY(100%); }
  to { opacity: 1; transform: translateY(0); }
}

/* === SAFE AREA & STANDALONE === */
@media (max-width: 767px) and (display-mode: standalone) {
  #contentHeader {
    padding-top: calc(16px + env(safe-area-inset-top, 0px)) !important;
  }
}

/* Overscroll prevention (all viewports, mainly benefits mobile) */
html {
  overscroll-behavior: none;
}

@media (min-width: 768px) and (max-width: 1023px) {
  #sidebar:not(.collapsed) { width: 200px; }
}

@media (min-width: 1024px) {
  #sidebar:not(.collapsed) { width: 260px; }
}

@media print {
  * { visibility: hidden !important; }
  #exportPrintArea, #exportPrintArea * { visibility: visible !important; }
  #exportPrintArea { position: absolute !important; top: 0 !important; left: 0 !important; width: 100% !important; display: block !important; }
  body { padding: 0 !important; background: white !important; color: black !important; font-size: 12px !important; }
  .card { box-shadow: none !important; border: none !important; }
  @page { margin: 0.5in; size: letter; }
  table { page-break-inside: auto; }
  tr { page-break-inside: avoid; }
  div[style*="page-break-inside"] { page-break-inside: avoid; }
}

/* Reduced motion */
@media (prefers-reduced-motion: reduce) {
  *, *::before, *::after {
    animation-duration: 0.001ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.001ms !important;
    scroll-behavior: auto !important;
  }
}