/* ============================================================
   RESPONSIVE STYLES - iPad & iPhone Compatibility
   Loaded AFTER all other stylesheets to override as needed.
   Breakpoints:
     1024px  - iPad landscape / small desktop
      768px  - iPad portrait / tablet
      480px  - iPhone landscape / large phone
   ============================================================ */

/* ============================================================
   MOBILE SIDEBAR - Overlay drawer behavior
   ============================================================ */

/* Sidebar backdrop overlay (injected by JS on mobile) */
.sidebar-backdrop {
  display: none;
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background: rgba(0, 0, 0, 0.5);
  z-index: 140;
  opacity: 0;
  transition: opacity 0.3s ease;
}

.sidebar-backdrop.visible {
  display: block;
  opacity: 1;
}

/* Mobile world info expand panel - hidden by default on all viewports */
.wi-expand-panel {
  display: none;
}

/* ============================================================
   iPad Portrait & below (max-width: 768px)
   ============================================================ */
@media (max-width: 768px) {
  /* -- Sidebar as slide-out overlay drawer -- */
  .sidebar {
    z-index: 150 !important;
    left: -240px !important;
    width: 240px !important;
    box-shadow: none;
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1), box-shadow 0.3s ease;
    border-right: 1px solid var(--border-color) !important;
    border-bottom: none !important;
  }

  /* When sidebar is open (NOT collapsed), slide in */
  body:not(.sidebar-collapsed) .sidebar {
    left: 0 !important;
    box-shadow: 4px 0 20px rgba(0, 0, 0, 0.3);
  }

  /* Override dashboard.css horizontal sidebar - keep vertical layout */
  .sidebar .nav-menu {
    display: block !important;
    overflow-x: visible !important;
  }

  .sidebar .sidebar-header {
    display: flex !important;
  }

  .sidebar .nav-item a {
    border-left: 3px solid transparent !important;
    border-bottom: none !important;
    white-space: normal !important;
  }

  .sidebar .nav-item.active a {
    border-left-color: var(--accent-color) !important;
    border-bottom: none !important;
  }

  /* Dashboard container stays row, not column */
  .dashboard-container {
    flex-direction: row !important;
  }

  /* Main content never shifts on mobile */
  .main-content {
    margin-left: 0 !important;
  }

  /* Banners never shift on mobile */
  .world-ending-banner,
  .free-period-banner,
  .low-credits-banner {
    margin-left: 0 !important;
  }

  /* -- Navbar adjustments -- */
  .nav-container {
    padding: 0.4rem 0.75rem !important;
    gap: 0.5rem !important;
    min-height: 55px !important;
  }

  /* World info - compact on tablet */
  .nav-world-info {
    padding: 0.25rem 0.5rem;
    gap: 0;
  }

  .wi-world {
    display: none;
  }

  .wi-world + .wi-sep {
    display: none;
  }

  .wi-date {
    font-size: 0.65rem;
  }

  .wi-time {
    font-size: 0.9rem;
    padding: 0.1rem 0.4rem;
  }

  .wi-day {
    font-size: 0.6rem;
  }

  .wi-balance {
    font-size: 0.8rem;
    padding-left: 0.5rem;
  }

  /* Credits dropdown */
  .credits-dropdown {
    width: 280px !important;
    right: -1rem !important;
  }

  /* -- Page content -- */
  .main-content {
    padding: 1rem !important;
  }

  .page-header {
    margin-bottom: 0.5rem !important;
  }

  .page-header h1 {
    font-size: 1.1rem !important;
  }

  /* -- Generic grid tables become scrollable -- */
  .fleet-header,
  .fleet-row {
    min-width: 500px;
  }

  .maintenance-header,
  .maintenance-row {
    min-width: 450px;
  }

  .market-header,
  .market-row {
    min-width: 500px;
  }

  /* Wrap the grid content in scrollable container */
  .fleet-type-group,
  .market-type-group {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Filter bars */
  .filter-bar {
    gap: 0.5rem !important;
    padding: 0.75rem !important;
  }

  .filter-bar input[style*="width: 120px"] {
    width: 100% !important;
  }

  .filter-bar > div {
    flex: 1;
    min-width: 0;
  }

  .filter-bar > div[style*="margin-left: auto"] {
    margin-left: 0 !important;
    flex-basis: 100%;
  }

  /* -- Modals -- */
  .modal-content {
    width: 95% !important;
    max-width: none !important;
  }

  .modal-content[style*="max-width: 950px"],
  .modal-content[style*="max-width: 500px"],
  .modal-content[style*="max-width: 450px"] {
    max-width: 95% !important;
  }

  .maint-modal {
    min-width: 0 !important;
    max-width: 95vw !important;
    width: 90vw;
  }

  .modal-header {
    padding: 0.75rem 1rem !important;
  }

  .modal-body {
    padding: 1rem !important;
  }

  .modal-footer {
    padding: 0.75rem 1rem !important;
  }

  /* -- Scheduling page -- */
  /* Controls panel - wrap items */
  .ops-panel .panel-body > div[style*="display: flex"][style*="gap: 1.5rem"] {
    flex-wrap: wrap !important;
    gap: 0.75rem !important;
  }

  /* Add route modal - full width on mobile */
  #addRouteModal {
    width: calc(100% - 1rem) !important;
    left: 0.5rem !important;
    right: 0.5rem !important;
    bottom: 0.5rem !important;
    max-height: 60vh !important;
  }

  /* -- Finances table - scrollable -- */
  .ops-panel table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ops-panel table thead,
  .ops-panel table tbody {
    min-width: 500px;
  }

  .ops-panel table th,
  .ops-panel table td {
    padding: 0.5rem 0.75rem !important;
    font-size: 0.8rem;
    white-space: nowrap;
  }

  /* Schedule grid table: keep as proper table so width: 100% works */
  #scheduleGrid table {
    display: table !important;
    overflow-x: visible !important;
  }

  #scheduleGrid table thead,
  #scheduleGrid table tbody {
    min-width: 0 !important;
  }

  /* -- Routes Create page -- */
  /* Step indicators */
  div[style*="display: flex"][style*="gap: 0.5rem"][style*="margin-bottom: 0.75rem"] > div[id^="step"] {
    font-size: 0.65rem !important;
    padding: 0.35rem 0.3rem !important;
  }

  /* Hide step connector lines on mobile */
  div[style*="display: flex"][style*="gap: 0.5rem"][style*="margin-bottom: 0.75rem"] > div[style*="width: 1rem; height: 2px"] {
    display: none;
  }

  /* Route config 3-col grid -> 1 col */
  div[style*="display: grid"][style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Selected destination 2-col -> stack */
  div[style*="display: grid"][style*="grid-template-columns: 2fr auto"] {
    grid-template-columns: 1fr !important;
    gap: 0.75rem !important;
  }

  div[style*="text-align: right; display: flex; align-items: center; gap: 1rem"] {
    text-align: left !important;
    justify-content: flex-start !important;
  }

  /* Flight timing/map side by side -> stack */
  #flightTimingMapContainer {
    grid-template-columns: 1fr !important;
  }

  /* Return sector 3-col -> 1 col */
  div[style*="display: grid"][style*="grid-template-columns: 1fr 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Pricing 2-col grid -> 1 col on mobile */
  div[style*="display: grid"][style*="grid-template-columns: repeat(2, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Cargo 3-col grid -> 1 col */
  div[style*="display: grid"][style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Advanced filters 3-col grid */
  details div[style*="display: grid"][style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr 1fr !important;
  }

  /* Results header flex -> wrap */
  div[style*="display: flex"][style*="justify-content: space-between"][style*="padding: 0.5rem 0.6rem"] {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  div[style*="display: flex"][style*="justify-content: space-between"][style*="padding: 0.5rem 0.6rem"] > div[style*="display: flex"][style*="gap: 0.75rem"] {
    flex-wrap: wrap !important;
    gap: 0.4rem !important;
  }

  /* -- Pricing page -- */
  .global-pricing-grid {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .global-pricing-grid.cargo {
    grid-template-columns: 1fr !important;
  }

  .pricing-row {
    grid-template-columns: repeat(2, 1fr) !important;
  }

  .pricing-row.cargo {
    grid-template-columns: 1fr !important;
  }

  .hierarchy-info {
    flex-wrap: wrap;
    gap: 0.4rem !important;
  }

  .hierarchy-info > span:last-child {
    display: none;
  }

  .aircraft-pricing-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* -- Credits page -- */
  div[style*="display: grid"][style*="grid-template-columns: 1fr 1fr"][style*="gap: 1rem"][style*="margin-bottom: 1rem"] {
    grid-template-columns: 1fr !important;
  }

  /* -- Aircraft Marketplace -- */
  /* Category tabs */
  div[style*="display: flex"][style*="gap: 1rem"][style*="margin-bottom: 1rem"][style*="border-bottom: 2px"] a {
    padding: 0.75rem 1rem !important;
    font-size: 0.8rem !important;
  }

  /* Balance display */
  div[style*="display: flex"][style*="align-items: center"][style*="justify-content: space-between"][style*="margin-bottom: 2rem"] {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem !important;
  }

  /* Filter selects - marketplace triple filter row */
  .form-group[style*="display: flex"][style*="gap: 1rem"] {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  /* Marketplace detail modal */
  .modal-content[style*="max-width: 950px"] {
    width: 95% !important;
    max-width: 95% !important;
  }

  /* -- Contact page -- */
  /* Already max-width: 600px so it's fine */

  /* -- FAQs page -- */
  /* Already max-width: 800px, add padding adjustment */
  .faqs-container,
  div[style*="max-width: 800px"] {
    padding: 0 !important;
  }

  /* -- Legend compact -- */
  .legend-compact {
    gap: 0.5rem !important;
    font-size: 0.65rem !important;
  }

  /* Maintenance grid scrollable container */
  #maintenanceGrid {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Panel header - wrap for small screens */
  .panel-header {
    flex-wrap: wrap;
    gap: 0.5rem;
  }

  /* All bulk action buttons wrapping */
  div[style*="display: flex"][style*="gap: 0.25rem"][style*="margin-top: 0.35rem"] {
    flex-wrap: wrap;
  }

  /* -- Routes Create: airport list compact -- */
  /* Hide competition column (6th) on tablet */
  .airport-list-header > span:nth-child(6),
  .airport-row > div:nth-child(6) {
    display: none;
  }

  .airport-row,
  .airport-list-header {
    grid-template-columns: 1fr 48px 70px 40px 54px !important;
  }
}

/* ============================================================
   iPhone & small phones (max-width: 480px)
   ============================================================ */
@media (max-width: 480px) {
  /* -- Navbar extremely compact -- */
  .nav-container {
    padding: 0.3rem 0.5rem !important;
    min-height: 48px !important;
  }

  .brand-initials {
    font-size: 1.1rem !important;
  }

  /* Hide tagline */
  .nav-brand div[style*="font-size: 0.45rem"] {
    display: none !important;
  }

  /* World info - tap to expand on iPhone */
  .nav-world-info {
    padding: 0;
    cursor: pointer;
    -webkit-tap-highlight-color: transparent;
    background: none;
    border: none;
    box-shadow: none;
  }

  /* Hide everything except time */
  .wi-world,
  .wi-world + .wi-sep,
  .wi-date,
  .wi-day,
  .wi-date-group + .wi-sep,
  .wi-balance {
    display: none !important;
  }

  .wi-date-group {
    gap: 0;
    padding: 0;
  }

  .wi-time {
    font-size: 0.85rem;
    padding: 0.1rem 0.35rem;
    display: flex;
    align-items: center;
    gap: 0.3rem;
  }

  /* Chevron indicator on time */
  .wi-time::after {
    content: '';
    display: inline-block;
    width: 0;
    height: 0;
    border-left: 3.5px solid transparent;
    border-right: 3.5px solid transparent;
    border-top: 4px solid currentColor;
    opacity: 0.5;
    transition: transform 0.2s ease;
  }

  .nav-world-info.wi-expanded .wi-time::after {
    transform: rotate(180deg);
  }

  /* World info expand panel */
  .wi-expand-panel {
    display: none;
    position: fixed;
    top: var(--navbar-height, 48px);
    left: 0;
    right: 0;
    background: var(--surface);
    border-bottom: 1px solid var(--border-color);
    padding: 0;
    z-index: 130;
    box-shadow: 0 4px 16px rgba(0, 0, 0, 0.4);
  }

  .wi-expand-panel.visible {
    display: block;
    animation: wiPanelSlide 0.2s ease-out;
  }

  @keyframes wiPanelSlide {
    from { opacity: 0; transform: translateY(-8px); }
    to { opacity: 1; transform: translateY(0); }
  }

  .wi-panel-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 0.5rem 1rem;
    border-bottom: 1px solid var(--border-color);
  }

  .wi-panel-row:last-child {
    border-bottom: none;
  }

  .wi-panel-label {
    font-size: 0.6rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--text-muted);
  }

  .wi-panel-value {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text-primary);
    font-family: 'Courier New', Courier, monospace;
  }

  .wi-panel-value.wi-panel-time {
    font-size: 0.9rem;
    color: var(--accent-color);
    font-weight: 700;
  }

  .wi-panel-value.wi-panel-balance {
    font-weight: 700;
  }

  /* User section */
  .nav-user-credits {
    padding: 0.2rem 0.4rem !important;
    font-size: 0.75rem;
  }

  .nav-logout-btn {
    padding: 0.25rem !important;
  }

  /* Credits dropdown full width */
  .credits-dropdown {
    position: fixed !important;
    width: calc(100% - 1rem) !important;
    left: 0.5rem !important;
    right: 0.5rem !important;
    top: auto !important;
  }

  /* -- Page content tighter -- */
  .main-content {
    padding: 0.75rem !important;
  }

  .page-header h1 {
    font-size: 0.95rem !important;
  }

  .subtitle {
    font-size: 0.65rem !important;
  }

  /* -- Dashboard stats row -- */
  .dashboard-stats-row {
    grid-template-columns: 1fr 1fr !important;
    gap: 0.4rem !important;
  }

  .dashboard-stat-card {
    padding: 0.35rem 0.6rem !important;
  }

  .dashboard-stat-card .stat-value {
    font-size: 0.95rem !important;
  }

  .dashboard-stat-card .stat-label {
    font-size: 0.5rem !important;
  }

  /* Quick actions smaller */
  .quick-action-btn {
    font-size: 0.65rem !important;
    padding: 0.35rem 0.5rem !important;
  }

  .quick-action-btn svg {
    width: 12px !important;
    height: 12px !important;
  }

  /* Dashboard panels - stack and shorter */
  .dashboard-panels {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }

  .panel-body-scroll {
    max-height: 200px !important;
  }

  /* Notification items tighter */
  .notification-item {
    padding: 0.4rem 0.75rem !important;
  }

  .notification-title {
    font-size: 0.75rem !important;
  }

  .notification-message {
    font-size: 0.7rem !important;
  }

  /* News items tighter */
  .news-item {
    padding: 0.4rem 0.75rem !important;
  }

  /* -- Filter bars stack vertically -- */
  .filter-bar {
    flex-direction: column !important;
    align-items: stretch !important;
    gap: 0.5rem !important;
  }

  .filter-bar > div {
    width: 100% !important;
  }

  .filter-bar input,
  .filter-bar select {
    width: 100% !important;
  }

  /* Panel header */
  .panel-header h2 {
    font-size: 0.75rem !important;
  }

  /* -- Scheduling page -- */
  /* Add route modal */
  #addRouteModal {
    width: calc(100% - 0.5rem) !important;
    left: 0.25rem !important;
    right: 0.25rem !important;
    bottom: 0.25rem !important;
    max-height: 50vh !important;
  }

  /* Scheduling controls panel: stack all items */
  .ops-panel .panel-body > div[style*="display: flex"][style*="gap: 1.5rem"] > div {
    width: 100% !important;
    flex: none !important;
  }

  /* Spacer div shouldn't take space */
  .ops-panel .panel-body > div[style*="display: flex"][style*="gap: 1.5rem"] > div[style*="flex: 1"] {
    display: none !important;
  }

  /* -- Routes Create -- */
  /* Advanced filters all 1 col */
  details div[style*="display: grid"][style*="grid-template-columns: repeat(3, 1fr)"] {
    grid-template-columns: 1fr !important;
  }

  /* Tech stop grid */
  div[style*="display: grid"][style*="grid-template-columns: 1fr 1fr"] {
    grid-template-columns: 1fr !important;
  }

  /* Day buttons smaller */
  .day-button,
  #daysOfWeekContainer button {
    padding: 0.5rem 0.25rem !important;
    font-size: 0.75rem !important;
  }

  /* Action buttons stack */
  div[style*="display: flex"][style*="gap: 1rem"][style*="justify-content: flex-end"] {
    flex-direction: column !important;
  }

  div[style*="display: flex"][style*="gap: 1rem"][style*="justify-content: flex-end"] button {
    width: 100% !important;
  }

  /* Step 3 route summary wrap */
  #step3RouteSummary {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  /* -- Pricing page phone -- */
  .global-pricing-grid,
  .global-pricing-grid.cargo {
    grid-template-columns: 1fr !important;
  }

  .pricing-row,
  .pricing-row.cargo {
    grid-template-columns: 1fr !important;
  }

  .aircraft-pricing-table input {
    max-width: 45px !important;
    font-size: 0.6rem !important;
  }

  .section-header {
    flex-wrap: wrap;
    gap: 0.3rem;
  }

  /* -- Marketplace filter row -- */
  .form-group[style*="display: flex"][style*="gap: 1rem"] > div[style*="flex: 1"] {
    flex: none !important;
    width: 100% !important;
  }

  /* Marketplace balance display */
  div[style*="font-size: 1.5rem"][id="marketplaceBalance"] {
    font-size: 1.2rem !important;
  }

  /* -- Banners -- */
  .world-ending-banner,
  .free-period-banner,
  .low-credits-banner {
    font-size: 0.75rem !important;
    padding: 0.4rem 0.75rem !important;
  }

  /* -- Modals -- */
  .modal-content {
    width: 98% !important;
    max-height: 90vh !important;
  }

  .maint-modal {
    width: 95vw !important;
    padding: 1rem !important;
  }

  .btn-primary,
  .btn-secondary,
  .btn-danger {
    padding: 0.5rem 1rem !important;
    font-size: 0.8rem !important;
  }

  /* Ops panel padding */
  .ops-panel .panel-body {
    padding: 0.75rem !important;
  }

  .ops-panel .panel-body[style*="padding: 0"] {
    padding: 0 !important;
  }

  /* -- Routes Create: selected destination panel padding -- */
  #selectedDestinationPanelStep1 .panel-body {
    padding: 1rem !important;
  }

  /* Stats grid: 2x2 instead of 4 columns */
  #selectedDestStats {
    grid-template-columns: 1fr 1fr !important;
  }

  /* -- Routes Create: airport list on iPhone -- */
  /* Hide competition (6th) AND class (5th) columns */
  .airport-list-header > span:nth-child(5),
  .airport-row > div:nth-child(5),
  .airport-list-header > span:nth-child(6),
  .airport-row > div:nth-child(6) {
    display: none;
  }

  .airport-row,
  .airport-list-header {
    grid-template-columns: 1fr 42px 60px 36px !important;
    gap: 0.15rem !important;
    padding: 0.35rem 0.5rem !important;
  }

  /* Truncate airport name on mobile */
  .airport-row .airport-select-zone {
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .airport-row .airport-select-zone span:first-child {
    font-size: 0.8rem !important;
  }

  .airport-row .airport-select-zone span:last-child {
    font-size: 0.65rem !important;
  }

  /* -- All fixed overlay modals on iPhone -- */
  #aircraftDetailOverlay,
  #globalMaintenanceModal,
  #maintenanceModalOverlay {
    padding: 0.5rem !important;
    align-items: flex-start !important;
  }

  #aircraftDetailOverlay > div,
  #globalMaintenanceModal > div,
  #maintenanceModalOverlay > div {
    max-height: calc(100vh - 1rem) !important;
    overflow-y: auto !important;
    border-radius: 8px !important;
    min-width: 0 !important;
    max-width: 100% !important;
    width: 100% !important;
  }

  /* Global maintenance: compact check rows */
  #globalMaintenanceModal span[style*="min-width: 100px"] {
    min-width: 70px !important;
    font-size: 0.8rem !important;
  }

  /* Hide description text in check rows */
  #globalMaintenanceModal span[style*="color: var(--text-muted)"][style*="font-size: 0.8rem"] {
    display: none !important;
  }

  /* Aircraft details: header compact */
  #aircraftDetailOverlay > div > div:first-child {
    padding: 0.75rem 1rem !important;
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
  }

  #aircraftDetailOverlay > div > div:first-child h2 {
    font-size: 1.1rem !important;
  }

  /* Aircraft details: stats row 3 columns instead of 6 */
  #aircraftDetailOverlay > div > div:nth-child(2) > div:first-child {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 0.5rem !important;
  }

  #aircraftDetailOverlay > div > div:nth-child(2) > div:first-child > div > div:last-child {
    font-size: 1rem !important;
  }

  /* Aircraft details: main grid stack vertically */
  #aircraftDetailOverlay > div > div:nth-child(2) > div:nth-child(2) {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }

  /* -- Scheduling: compact on iPhone -- */
  #scheduleGrid table {
    font-size: 0.75rem !important;
  }

  /* Narrow the AIRCRAFT column - all sticky-left cells */
  #scheduleGrid th:first-child,
  #scheduleGrid td:first-child {
    min-width: 60px !important;
    width: 60px !important;
    max-width: 60px !important;
    padding: 0.3rem 0.4rem !important;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }

  .aircraft-registration {
    font-size: 0.75rem !important;
  }

  .aircraft-status-badge {
    font-size: 0.55rem !important;
    padding: 0.05rem 0.2rem !important;
  }

  /* Narrow the ACTIONS column */
  #scheduleGrid th:last-child,
  #scheduleGrid td:last-child {
    min-width: 34px !important;
    width: 34px !important;
    max-width: 34px !important;
    padding: 0.2rem !important;
  }

  /* Replace ACTIONS text with icon */
  #scheduleGrid th:last-child {
    font-size: 0 !important;
    line-height: 0 !important;
  }

  #scheduleGrid th:last-child::after {
    content: '\2699';
    font-size: 0.85rem;
    line-height: 1;
  }

  #scheduleGrid td:last-child > div {
    flex-direction: column !important;
    gap: 0.15rem !important;
  }

  #scheduleGrid td:last-child button {
    width: 20px !important;
    height: 20px !important;
    font-size: 0.75rem !important;
  }

  /* -- Routes page: search bar stack on iPhone -- */
  #routeSearchInput,
  #aircraftTypeFilter {
    min-width: 0 !important;
    width: 100% !important;
    flex: none !important;
  }

  /* Stack the search + filter row vertically */
  #routeSearchInput + #aircraftTypeFilter,
  #routeSearchInput {
    flex: none !important;
  }

  /* Target the parent flex container */
  .ops-panel .panel-body > div[style*="display: flex"][style*="gap: 1rem"] {
    flex-direction: column !important;
    gap: 0.5rem !important;
  }

  /* -- Routes table: single scrollbar on iPhone -- */
  #routesTable {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .ops-panel table {
    display: table;
    overflow-x: visible !important;
    min-width: 600px;
  }

  /* -- Maintenance status modal: compact grid on iPhone -- */
  #maintenanceModalOverlay > div {
    padding: 1rem !important;
  }

  #maintenanceModalOverlay div[style*="grid-template-columns"] {
    grid-template-columns: 1fr 60px 40px 56px !important;
    gap: 0.25rem !important;
  }

  /* Hide Last Completed, Valid Until, Next Scheduled columns (3rd, 4th, 5th) */
  #maintenanceModalOverlay div[style*="grid-template-columns"] > :nth-child(3),
  #maintenanceModalOverlay div[style*="grid-template-columns"] > :nth-child(4),
  #maintenanceModalOverlay div[style*="grid-template-columns"] > :nth-child(5) {
    display: none !important;
  }

  /* Compact check name in maintenance modal */
  #maintenanceModalOverlay div[style*="grid-template-columns"] > div:first-child span:last-child {
    font-size: 0.7rem !important;
  }

  /* Auto Schedule All row: wrap on narrow screens */
  #maintenanceModalOverlay div[style*="justify-content: space-between"][style*="gap: 1rem"] {
    flex-wrap: wrap !important;
    gap: 0.5rem !important;
    padding: 0.75rem !important;
  }

  /* Compact bottom buttons */
  #saveAutoScheduleBtn,
  #closeMaintenanceModalBtn {
    padding: 0.6rem 1rem !important;
    font-size: 0.8rem !important;
  }

  /* -- Schedule grid: hide manufacturer in type group headers -- */
  .type-manufacturer {
    display: none !important;
  }

  /* -- Clear schedule modal: stack buttons vertically -- */
  #clearChoiceModal .modal-footer {
    flex-direction: column !important;
    align-items: stretch !important;
  }

  #clearChoiceModal .modal-footer .btn {
    width: 100% !important;
    text-align: center !important;
  }

  /* -- World Selection page -- */
  .worlds-grid {
    grid-template-columns: 1fr !important;
  }

  .world-card-stats {
    grid-template-columns: repeat(2, 1fr) !important;
  }
}

/* ============================================================
   Touch-friendly improvements for all mobile devices
   ============================================================ */
@media (max-width: 1024px) {
  /* Larger touch targets */
  .sidebar-toggle {
    width: 36px !important;
    height: 36px !important;
  }

  /* Make checkboxes and radios easier to tap */
  input[type="checkbox"],
  input[type="radio"] {
    min-width: 18px;
    min-height: 18px;
  }

  /* Prevent zoom on input focus (iOS) - set base size on body
     iOS zooms when input font-size < 16px */
  .filter-bar input,
  .filter-bar select,
  .modal-body input,
  .modal-body select,
  .modal-body textarea {
    font-size: 16px !important;
  }

  /* Make sure selects are readable */
  select {
    min-height: 36px;
  }

  /* Ensure tap targets are at least 44px */
  .nav-item a {
    min-height: 44px;
    display: flex;
    align-items: center;
  }

  /* Sidebar items - easier to tap */
  .sidebar .nav-item a {
    padding: 0.6rem 1rem !important;
  }
}

/* ============================================================
   Prevent horizontal overflow on all pages
   ============================================================ */
@media (max-width: 768px) {
  html, body {
    overflow-x: hidden;
  }

  #pageContent {
    overflow-x: hidden;
  }

  /* Make sure images don't overflow */
  img {
    max-width: 100%;
    height: auto;
  }
}