/* Mobile layout overrides — supplements app.css */

@media (max-width: 768px) {
  html, body {
    width: 100% !important;
    max-width: 100% !important;
    height: auto !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
  }

  body * {
    box-sizing: border-box !important;
    max-width: 100% !important;
  }

  .app-layout,
  .main-content {
    height: auto !important;
    min-height: 100vh !important;
    overflow: visible !important;
  }

  .main-content {
    display: block !important;
  }

  .step-content-container {
    overflow: visible !important;
    padding: 12px 10px 86px !important;
  }

  .step-pane.active {
    display: block !important;
    height: auto !important;
  }

  /* --- Critical grid fixes --- */
  .review-grid {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 10px !important;
  }

  .audience-types-grid {
    display: grid !important;
    grid-template-columns: repeat(2, 1fr) !important;
    gap: 10px !important;
  }

  .audience-stats-row {
    display: grid !important;
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 8px !important;
  }

  .campaign-stats-grid {
    display: flex !important;
    flex-direction: row !important;
    gap: 8px !important;
  }

  /* --- Critical flex-column fixes --- */
  .manual-input-grid,
  .config-split-layout,
  .message-editor-preview-layout,
  .protection-row-two-cols,
  .inline-flex-row,
  .campaign-controls,
  .actions-row {
    display: flex !important;
    flex-direction: column !important;
    width: 100% !important;
    min-width: 0 !important;
    gap: 10px !important;
  }

  .manual-input-grid > *,
  .config-split-layout > *,
  .message-editor-preview-layout > * {
    width: 100% !important;
    max-width: 100% !important;
    min-width: 0 !important;
    flex: none !important;
  }

  .file-upload-card {
    width: 100% !important;
    min-width: 0 !important;
    padding: 16px !important;
  }

  /* --- Buttons full width --- */
  .btn,
  #btn-start-campaign,
  #btn-pause-campaign,
  #btn-stop-campaign {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* --- Inputs full width --- */
  textarea, input, select,
  .form-input, .form-select {
    width: 100% !important;
    min-width: 0 !important;
  }

  .select-instance-group,
  .select-instance-group select {
    width: 100% !important;
    min-width: 0 !important;
  }

  /* --- Step nav scrollable --- */
  .steps-nav {
    display: flex !important;
    flex-wrap: nowrap !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
    gap: 8px !important;
    padding: 8px 10px !important;
  }

  .step-tab {
    flex: 0 0 auto !important;
    min-width: 72px !important;
    min-height: 44px !important;
    white-space: nowrap !important;
  }

  .step-tab-spacer { display: none !important; }
}