/**
 * DS-10: Mobile Responsive Enhancements
 * Comprehensive mobile fixes for all major pages
 * Uses DS tokens and responsive.css utilities
 */

/* ========================================
 * Builders (Round / Mocktail / Solo Serve)
 * ======================================== */

@media (max-width: 767px) {
  /* Builder Container */
  .builder-container,
  section[data-tab="make"],
  section[data-tab="mocktails"] {
    padding: var(--space-md, 16px);
    padding-bottom: calc(56px + var(--safe-area-inset-bottom, 0px) + var(--space-lg, 24px));
  }

  /* Builder Cards */
  .builder-card,
  .make-card,
  .mocktail-card {
    padding: var(--space-md, 16px);
    margin-bottom: var(--space-md, 16px);
    border-radius: var(--radius-md, 12px);
  }

  /* Builder Sections */
  .builder-section,
  .make-section,
  .mocktail-section {
    margin-bottom: var(--space-xl, 32px);
  }

  /* Builder Form Controls */
  .builder-form,
  .make-form,
  .mocktail-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md, 16px);
  }

  /* Builder Buttons */
  .builder-actions,
  .make-actions,
  .mocktail-actions {
    display: flex;
    flex-direction: column;
    gap: var(--space-sm, 12px);
  }

  .builder-actions .btn,
  .make-actions .btn,
  .mocktail-actions .btn {
    width: 100%;
    min-height: 44px;
  }

  /* Builder Results Grid */
  .builder-results,
  .make-results,
  .mocktail-results {
    display: flex;
    flex-direction: column;
    gap: var(--space-md, 16px);
  }

  /* Builder Result Cards */
  .result-card,
  .make-result-card,
  .mocktail-result-card {
    width: 100%;
    padding: var(--space-md, 16px);
    margin-bottom: var(--space-md, 16px);
  }

  /* Builder Tabs */
  .make-subtabs,
  .inventory-subtabs {
    flex-wrap: wrap;
    gap: var(--space-xs, 8px);
    padding: var(--space-sm, 12px);
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
  }

  .make-subtab,
  .inventory-subtab {
    min-width: auto;
    flex: 1 1 auto;
    padding: var(--space-xs, 8px) var(--space-sm, 12px);
    font-size: var(--type-micro-size, 0.8125rem);
    white-space: nowrap;
  }
}

/* ========================================
 * TikTok Studio
 * ======================================== */

@media (max-width: 767px) {
  .tiktok-studio-container,
  .studio-container {
    flex-direction: column;
    height: auto;
    min-height: 100vh;
    padding-bottom: calc(56px + var(--safe-area-inset-bottom, 0px));
  }

  .tiktok-studio-sidebar,
  .studio-sidebar {
    width: 100%;
    max-height: 40vh;
    min-height: 200px;
    border-right: none;
    border-bottom: 1px solid var(--border, rgba(196, 126, 66, 0.28));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  .tiktok-studio-preview,
  .studio-preview {
    width: 100%;
    min-height: 60vh;
    padding: var(--space-md, 16px);
  }

  .studio-controls {
    flex-direction: column;
    gap: var(--space-sm, 12px);
    padding: var(--space-md, 16px);
  }

  .studio-controls .btn {
    width: 100%;
    min-height: 44px;
  }

  .studio-scenes {
    grid-template-columns: 1fr;
    gap: var(--space-md, 16px);
  }
}

/* ========================================
 * Analytics Dashboard
 * ======================================== */

@media (max-width: 767px) {
  .analytics-container,
  .analytics-page {
    padding: var(--space-md, 16px);
    padding-bottom: calc(56px + var(--safe-area-inset-bottom, 0px) + var(--space-lg, 24px));
  }

  .analytics-grid,
  .analytics-metrics-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md, 16px);
  }

  .analytics-metric-card,
  .metric-card {
    padding: var(--space-md, 16px);
    min-height: auto;
  }

  .analytics-chart-container {
    width: 100%;
    min-height: 200px;
    padding: var(--space-md, 16px);
  }

  .analytics-filters {
    flex-direction: column;
    gap: var(--space-sm, 12px);
  }

  .analytics-filters .btn,
  .analytics-filters select {
    width: 100%;
    min-height: 44px;
  }
}

/* ========================================
 * Event Planner
 * ======================================== */

@media (max-width: 767px) {
  .event-planner-container,
  .planner-container {
    padding: var(--space-md, 16px);
    padding-bottom: calc(56px + var(--safe-area-inset-bottom, 0px) + var(--space-lg, 24px));
  }

  .event-planner-grid,
  .planner-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md, 16px);
  }

  .planner-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md, 16px);
  }

  .planner-form .row {
    flex-direction: column;
    gap: var(--space-sm, 12px);
  }

  .planner-form label {
    width: 100%;
    margin-bottom: var(--space-xs, 8px);
  }

  .planner-form input,
  .planner-form textarea,
  .planner-form select {
    width: 100%;
    min-height: 44px;
  }

  .planner-actions {
    flex-direction: column;
    gap: var(--space-sm, 12px);
  }

  .planner-actions .btn {
    width: 100%;
    min-height: 44px;
  }

  .planner-preview {
    padding: var(--space-md, 16px);
  }
}

/* ========================================
 * History
 * ======================================== */

@media (max-width: 767px) {
  .history-container,
  .history-page {
    padding: var(--space-md, 16px);
    padding-bottom: calc(56px + var(--safe-area-inset-bottom, 0px) + var(--space-lg, 24px));
  }

  .history-list,
  .history-items {
    display: flex;
    flex-direction: column;
    gap: var(--space-md, 16px);
  }

  .history-item,
  .history-card {
    width: 100%;
    padding: var(--space-md, 16px);
    margin-bottom: var(--space-md, 16px);
  }

  .history-item-actions {
    flex-direction: column;
    gap: var(--space-xs, 8px);
    margin-top: var(--space-sm, 12px);
  }

  .history-item-actions .btn {
    width: 100%;
    min-height: 44px;
  }

  .history-filters {
    flex-direction: column;
    gap: var(--space-sm, 12px);
    margin-bottom: var(--space-lg, 24px);
  }

  .history-filters .btn,
  .history-filters select {
    width: 100%;
    min-height: 44px;
  }
}

/* ========================================
 * Favorites
 * ======================================== */

@media (max-width: 767px) {
  .favorites-container,
  .favorites-page {
    padding: var(--space-md, 16px);
    padding-bottom: calc(56px + var(--safe-area-inset-bottom, 0px) + var(--space-lg, 24px));
  }

  .favorites-header {
    flex-direction: column;
    gap: var(--space-sm, 12px);
    margin-bottom: var(--space-lg, 24px);
  }

  .favorites-search {
    width: 100%;
    min-height: 44px;
  }

  .favorites-filters {
    flex-direction: column;
    gap: var(--space-sm, 12px);
    margin-bottom: var(--space-lg, 24px);
  }

  .favorites-filters .btn {
    width: 100%;
    min-height: 44px;
  }

  .favorites-grid,
  .favorites-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md, 16px);
  }

  .favorite-card,
  .favorites-card {
    width: 100%;
    padding: var(--space-md, 16px);
    margin-bottom: var(--space-md, 16px);
  }

  .favorite-card-actions {
    flex-direction: column;
    gap: var(--space-xs, 8px);
    margin-top: var(--space-sm, 12px);
  }

  .favorite-card-actions .btn {
    width: 100%;
    min-height: 44px;
  }
}

/* ========================================
 * Settings / Profile / Subscription
 * ======================================== */

@media (max-width: 767px) {
  .settings-container,
  .profile-container,
  .subscription-container,
  .settings-page,
  .profile-page,
  .subscription-page {
    padding: var(--space-md, 16px);
    padding-bottom: calc(56px + var(--safe-area-inset-bottom, 0px) + var(--space-lg, 24px));
  }

  .settings-section,
  .profile-section,
  .subscription-section {
    margin-bottom: var(--space-xl, 32px);
  }

  .settings-form,
  .profile-form {
    display: flex;
    flex-direction: column;
    gap: var(--space-md, 16px);
  }

  .settings-form .row,
  .profile-form .row {
    flex-direction: column;
    gap: var(--space-sm, 12px);
  }

  .settings-form label,
  .profile-form label {
    width: 100%;
    margin-bottom: var(--space-xs, 8px);
  }

  .settings-form input,
  .settings-form textarea,
  .settings-form select,
  .profile-form input,
  .profile-form textarea,
  .profile-form select {
    width: 100%;
    min-height: 44px;
  }

  .settings-actions,
  .profile-actions {
    flex-direction: column;
    gap: var(--space-sm, 12px);
  }

  .settings-actions .btn,
  .profile-actions .btn {
    width: 100%;
    min-height: 44px;
  }

  .subscription-plans {
    display: flex;
    flex-direction: column;
    gap: var(--space-md, 16px);
  }

  .subscription-plan-card {
    width: 100%;
    padding: var(--space-md, 16px);
  }
}

/* ========================================
 * Inventory
 * ======================================== */

@media (max-width: 767px) {
  section[data-tab="inventory"],
  .inventory-container {
    padding: var(--space-md, 16px);
    padding-bottom: calc(56px + var(--safe-area-inset-bottom, 0px) + var(--space-lg, 24px));
  }

  .inventory-grid,
  .inventory-list {
    display: flex;
    flex-direction: column;
    gap: var(--space-md, 16px);
  }

  .inventory-item,
  .inventory-card {
    width: 100%;
    padding: var(--space-md, 16px);
    margin-bottom: var(--space-md, 16px);
  }

  .inventory-actions {
    flex-direction: column;
    gap: var(--space-xs, 8px);
    margin-top: var(--space-sm, 12px);
  }

  .inventory-actions .btn {
    width: 100%;
    min-height: 44px;
  }

  .inventory-filters {
    flex-direction: column;
    gap: var(--space-sm, 12px);
    margin-bottom: var(--space-lg, 24px);
  }

  .inventory-filters .btn,
  .inventory-filters select,
  .inventory-filters input {
    width: 100%;
    min-height: 44px;
  }
}

/* ========================================
 * General Mobile Improvements
 * ======================================== */

@media (max-width: 767px) {
  /* Ensure all modals are mobile-friendly */
  .modal-dialog {
    max-width: calc(100vw - var(--space-lg, 24px));
    margin: var(--space-md, 16px);
    max-height: calc(100vh - var(--space-xl, 32px));
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
  }

  /* Ensure all drawers slide in from bottom on mobile */
  .drawer {
    max-height: 80vh;
    border-radius: var(--radius-lg, 16px) var(--radius-lg, 16px) 0 0;
  }

  /* Stack all multi-column layouts */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr;
  }

  /* Ensure proper spacing for stacked content */
  .stack-sm,
  .stack-md,
  .stack-lg {
    flex-direction: column;
  }

  /* Improve touch targets for all interactive elements */
  button,
  .btn,
  a[role="button"],
  input[type="button"],
  input[type="submit"],
  .bb-identity-dropdown__item,
  .bottom-nav__item {
    min-height: 44px;
    min-width: 44px;
  }

  /* Prevent text from being too small */
  body {
    font-size: var(--type-body-size, 1rem);
    line-height: var(--type-body-line, 1.6);
  }

  /* Improve form field spacing */
  input,
  textarea,
  select {
    margin-bottom: var(--space-sm, 12px);
  }

  /* Ensure cards don't overflow */
  .card,
  .bb-card {
    max-width: 100%;
    overflow-x: hidden;
  }
}

/* ========================================
 * Tablet Adjustments (768px - 1023px)
 * ======================================== */

@media (min-width: 768px) and (max-width: 1023px) {
  .grid-3,
  .grid-4 {
    grid-template-columns: repeat(2, 1fr);
  }

  .builder-results,
  .make-results,
  .mocktail-results {
    grid-template-columns: repeat(2, 1fr);
  }

  .analytics-grid {
    grid-template-columns: repeat(2, 1fr);
  }
}