/**
 * Responsive Design System
 * WooCommerce to Shopify Sync Plugin
 * 
 * Comprehensive responsive styles for all screen sizes.
 * Mobile-first approach with progressive enhancement.
 */

/* ============================================
   BREAKPOINT DEFINITIONS
   ============================================
   Mobile: < 768px
   Tablet: 768px - 1023px
   Desktop: 1024px - 1399px
   Large Desktop: >= 1400px
   ============================================ */

/* ============================================
   MOBILE OPTIMIZATIONS (< 768px)
   ============================================ */
@media (max-width: 767px) {

  /* Global Mobile Adjustments */
  :root {
    --w2ssyn-spacing-xs: 4px;
    --w2ssyn-spacing-sm: 8px;
    --w2ssyn-spacing-md: 12px;
    --w2ssyn-spacing-lg: 16px;
    --w2ssyn-spacing-xl: 24px;
    --w2ssyn-spacing-2xl: 32px;
  }

  /* Container Adjustments */
  .w2ssyn-container {
    padding: 0 var(--w2ssyn-spacing-md);
  }

  /* Typography Adjustments */
  .w2ssyn-sync-direction__title,
  .w2ssyn-modules-section__title,
  .w2ssyn-mapping-page__title,
  .w2ssyn-audit-log-page__title {
    font-size: var(--w2ssyn-font-size-xl);
  }

  /* Cards - Full Width on Mobile */
  .w2ssyn-card,
  .w2ssyn-module-card,
  .w2ssyn-auth-card {
    width: 100%;
    margin-bottom: var(--w2ssyn-spacing-lg);
  }

  /* Buttons - Full Width on Mobile */
  .w2ssyn-btn,
  .w2ssyn-btn-primary,
  .w2ssyn-btn-secondary {
    width: 100%;
    min-height: 44px;
    /* Touch-friendly minimum */
    padding: var(--w2ssyn-spacing-md) var(--w2ssyn-spacing-lg);
  }

  /* Forms - Full Width Inputs */
  .w2ssyn-input,
  .w2ssyn-select,
  .w2ssyn-textarea {
    width: 100%;
    min-height: 44px;
    /* Touch-friendly */
    font-size: 16px;
    /* Prevents zoom on iOS */
  }

  /* Grid Layouts - Single Column */
  .w2ssyn-auth-grid,
  .w2ssyn-modules-grid,
  .w2ssyn-mapping-buttons,
  .w2ssyn-direction-options {
    grid-template-columns: 1fr;
    gap: var(--w2ssyn-spacing-md);
  }

  /* Tables - Horizontal Scroll */
  .w2ssyn-field-mapping__table,
  .w2ssyn-custom-fields__table,
  .smack-table-container table,
  .wp-list-table {
    display: block;
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
  }

  .w2ssyn-field-mapping__table thead,
  .w2ssyn-custom-fields__table thead,
  .smack-table-container table thead,
  .wp-list-table thead {
    display: none;
    /* Hide headers on mobile, show in cells */
  }

  .w2ssyn-field-mapping__table tbody,
  .w2ssyn-custom-fields__table tbody,
  .smack-table-container table tbody,
  .wp-list-table tbody {
    display: block;
  }

  .w2ssyn-field-mapping__table tr,
  .w2ssyn-custom-fields__table tr,
  .smack-table-container table tr,
  .wp-list-table tr {
    display: block;
    margin-bottom: var(--w2ssyn-spacing-md);
    border: 1px solid var(--w2ssyn-border-color);
    border-radius: var(--w2ssyn-radius-md);
    padding: var(--w2ssyn-spacing-md);
  }

  .w2ssyn-field-mapping__table td,
  .w2ssyn-custom-fields__table td,
  .smack-table-container table td,
  .wp-list-table td {
    display: block;
    text-align: right;
    padding: var(--w2ssyn-spacing-xs) 0;
    border: none;
    white-space: normal;
  }

  .w2ssyn-field-mapping__table td::before,
  .w2ssyn-custom-fields__table td::before,
  .smack-table-container table td::before,
  .wp-list-table td::before {
    content: attr(data-label) ": ";
    float: left;
    font-weight: var(--w2ssyn-font-weight-semibold);
    color: var(--w2ssyn-text-secondary);
  }

  /* Toggle Switches - Larger Touch Targets */
  .w2ssyn-toggle {
    width: 52px;
    height: 28px;
  }

  .w2ssyn-toggle-slider:before {
    width: 22px;
    height: 22px;
  }

  /* Modals - Full Screen on Mobile */
  .smackws-pro-modal-content {
    width: 100%;
    max-width: 100%;
    margin: 0;
    border-radius: 0;
    max-height: 100vh;
    overflow-y: auto;
  }

  /* Toast Notifications - Full Width */
  .w2ssyn-toast-container {
    left: var(--w2ssyn-spacing-md);
    right: var(--w2ssyn-spacing-md);
    top: 46px;
    /* WordPress admin bar height on mobile */
  }

  .w2ssyn-toast {
    min-width: auto;
    max-width: 100%;
  }

  /* Navigation Tabs - Scrollable */
  .smack-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    white-space: nowrap;
    flex-wrap: nowrap;
  }

  .smack-tab {
    flex: 0 0 auto;
    min-width: 120px;
  }

  /* Hide Non-Essential Elements */
  .w2ssyn-pro-badge {
    font-size: var(--w2ssyn-font-size-xs);
    padding: 2px 6px;
  }

  /* Spacing Adjustments */
  .w2ssyn-sync-direction,
  .w2ssyn-modules-section,
  .w2ssyn-field-mapping,
  .w2ssyn-custom-fields {
    margin-bottom: var(--w2ssyn-spacing-xl);
  }
}

/* ============================================
   TABLET OPTIMIZATIONS (768px - 1023px)
   ============================================ */
@media (min-width: 768px) and (max-width: 1023px) {

  /* Two Column Layouts */
  .w2ssyn-auth-grid {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--w2ssyn-spacing-lg);
  }

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

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

  /* Direction Options - Two Columns */
  .w2ssyn-direction-options {
    grid-template-columns: repeat(2, 1fr);
  }

  .w2ssyn-direction-option:nth-child(3) {
    grid-column: 1 / -1;
    /* Bidirectional spans full width */
  }

  /* Tables - Better Spacing */
  /* .w2ssyn-field-mapping__table,
  .w2ssyn-custom-fields__table {
    font-size: var(--w2ssyn-font-size-sm);
  } */

  /* Cards - Better Spacing */
  .w2ssyn-card,
  .w2ssyn-module-card {
    padding: var(--w2ssyn-spacing-lg);
  }

  /* Forms - Better Layout */
  .w2ssyn-form-group {
    margin-bottom: var(--w2ssyn-spacing-md);
  }

  /* Schedule Sync - Better Layout */
  .w2ssyn-schedule-sync__timing {
    flex-direction: row;
    align-items: center;
  }

  .w2ssyn-schedule-sync__date-group {
    flex-direction: row;
    align-items: center;
  }
}

/* ============================================
   DESKTOP OPTIMIZATIONS (1024px - 1399px)
   ============================================ */
@media (min-width: 1024px) and (max-width: 1399px) {

  /* Three Column Module Grid */
  .w2ssyn-modules-grid {
    grid-template-columns: repeat(3, 1fr);
  }

  /* Better Card Spacing */
  .w2ssyn-card {
    padding: var(--w2ssyn-spacing-xl);
  }

  /* Tables - Optimal Width */
  .w2ssyn-field-mapping__table,
  .w2ssyn-custom-fields__table {
    table-layout: auto;
  }
}

/* ============================================
   LARGE DESKTOP OPTIMIZATIONS (>= 1400px)
   ============================================ */
@media (min-width: 1400px) {

  /* Four Column Module Grid */
  .w2ssyn-modules-grid {
    grid-template-columns: repeat(4, 1fr);
  }

  /* Maximum Container Width */
  .w2ssyn-container {
    max-width: 1600px;
    margin: 0 auto;
  }

  /* Optimal Table Width */
  .w2ssyn-field-mapping__table,
  .w2ssyn-custom-fields__table {
    table-layout: fixed;
  }
}

/* ============================================
   TOUCH DEVICE OPTIMIZATIONS
   ============================================ */
@media (hover: none) and (pointer: coarse) {

  /* Larger Touch Targets */
  .w2ssyn-btn,
  .w2ssyn-toggle,
  .w2ssyn-mapping-button,
  .smack-mapping-button {
    min-height: 44px;
    min-width: 44px;
  }

  /* Remove Hover Effects */
  .w2ssyn-card:hover,
  .w2ssyn-module-card:hover,
  .w2ssyn-btn:hover {
    transform: none;
  }

  /* Better Tap Feedback */
  .w2ssyn-btn:active,
  .w2ssyn-toggle:active {
    opacity: 0.8;
    transform: scale(0.98);
  }

  /* Larger Form Controls */
  .w2ssyn-input,
  .w2ssyn-select {
    min-height: 44px;
    font-size: 16px;
    /* Prevents zoom on iOS */
  }
}

/* ============================================
   PRINT STYLES
   ============================================ */
@media print {

  .w2ssyn-btn,
  .w2ssyn-toggle,
  .w2ssyn-pro-badge,
  .smack-tabs,
  .w2ssyn-toast-container {
    display: none;
  }

  .w2ssyn-card,
  .w2ssyn-module-card {
    border: 1px solid #000;
    page-break-inside: avoid;
  }

  .w2ssyn-field-mapping__table,
  .w2ssyn-custom-fields__table {
    page-break-inside: avoid;
  }
}

/* ============================================
   HIGH CONTRAST MODE SUPPORT
   ============================================ */
@media (prefers-contrast: high) {

  .w2ssyn-card,
  .w2ssyn-module-card {
    border: 2px solid currentColor;
  }

  .w2ssyn-btn {
    border: 2px solid currentColor;
  }

  .w2ssyn-toggle-slider {
    border: 2px solid currentColor;
  }
}

/* ============================================
   REDUCED MOTION SUPPORT
   ============================================ */
@media (prefers-reduced-motion: reduce) {

  *,
  *::before,
  *::after {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* ============================================
   LANDSCAPE ORIENTATION ADJUSTMENTS
   ============================================ */
@media (max-width: 767px) and (orientation: landscape) {
  .w2ssyn-auth-grid {
    grid-template-columns: repeat(2, 1fr);
  }

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

  /* Reduce vertical spacing */
  .w2ssyn-card,
  .w2ssyn-module-card {
    padding: var(--w2ssyn-spacing-md);
  }
}