/**
 * Mobile Fixes and Improvements for Verify 420
 * This file contains mobile-specific CSS fixes and improvements
 */

/* Fix sticky header on mobile */
@media (max-width: 768px) {
  /* Remove overflow hidden from container to allow sticky header */
  .vqr-app-container {
    overflow: visible !important;
    height: auto !important;
    min-height: 100vh;
    min-height: -webkit-fill-available;
  }
  
  /* Make header properly fixed on mobile */
  .vqr-app-header {
    position: fixed !important;
    top: 0;
    left: 0;
    right: 0;
    z-index: 100;
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
  }
  
  /* Adjust content to account for fixed header */
  .vqr-app-content {
    margin-top: 64px; /* Height of header */
    height: calc(100vh - 64px);
    overflow: visible;
  }
  
  /* Make main content scrollable */
  .vqr-app-main {
    height: auto;
    min-height: calc(100vh - 64px);
    overflow-y: auto;
    -webkit-overflow-scrolling: touch;
    padding-bottom: env(safe-area-inset-bottom, 20px); /* iOS safe area */
  }
  
  /* Improve header layout on mobile */
  .vqr-header-left {
    display: flex;
    align-items: center;
    gap: var(--space-sm);
    flex: 1;
  }
  
  .vqr-header-actions {
    display: flex;
    align-items: center;
    gap: var(--space-xs);
  }
  
  /* Optimize mobile menu button */
  .vqr-mobile-menu-btn {
    min-width: 44px;
    height: 44px;
    padding: 0;
    display: flex;
    align-items: center;
    justify-content: center;
  }
  
  /* Optimize cart button on mobile */
  .vqr-cart-btn {
    min-width: 44px;
    height: 44px;
    padding: 0;
    position: relative;
  }
  
  .vqr-cart-icon {
    width: 22px;
    height: 22px;
  }
  
  .vqr-cart-count {
    position: absolute;
    top: 6px;
    right: 6px;
    min-width: 18px;
    height: 18px;
    font-size: 11px;
    line-height: 18px;
    padding: 0 4px;
  }
  
  /* Optimize user menu on mobile */
  .vqr-user-menu-trigger {
    min-width: 44px !important;
    height: 44px !important;
    padding: 0 !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  .vqr-user-avatar {
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    display: block !important;
    flex-shrink: 0 !important;
  }
  
  /* Override any WordPress avatar styles */
  .vqr-user-menu-trigger img.avatar {
    width: 32px !important;
    height: 32px !important;
    margin: 0 !important;
    display: block !important;
    position: static !important;
    transform: none !important;
  }
  
  /* Fix user menu on mobile to ensure proper centering */
  .vqr-desktop-only.vqr-user-menu {
    display: flex !important;
  }
  
  /* Remove any inherited styles that might affect centering */
  .vqr-user-menu {
    position: relative !important;
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
  }
  
  /* Better touch targets for mobile */
  .vqr-btn {
    min-height: 44px;
    padding: 12px 20px;
    font-size: 16px; /* Prevent zoom on iOS */
  }
  
  /* Improve form inputs on mobile */
  .vqr-input,
  .vqr-select,
  .vqr-textarea {
    min-height: 44px;
    font-size: 16px; /* Prevent zoom on iOS */
    padding: 12px 16px;
  }
  
  /* Better spacing for mobile content */
  .vqr-app-main {
    padding: var(--space-md);
  }
  
  .vqr-card {
    margin-bottom: var(--space-md);
  }
  
  /* Optimize table for mobile */
  .vqr-table-container {
    margin: 0 calc(var(--space-md) * -1);
    padding: 0;
  }
  
  .vqr-table-scroll-wrapper {
    padding: 0 var(--space-md);
  }
  
  /* Stack form elements on mobile */
  .vqr-filters-form {
    gap: var(--space-md);
  }
  
  .vqr-filters-grid {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  
  /* Improve mobile navigation drawer */
  .vqr-mobile-nav-drawer {
    width: 85%;
    max-width: 320px;
    box-shadow: 2px 0 8px rgba(0, 0, 0, 0.15);
  }
  
  .vqr-mobile-nav-header {
    padding: var(--space-md);
    display: flex;
    align-items: center;
    justify-content: space-between;
    border-bottom: 1px solid var(--border);
    height: 64px; /* Match main header height */
  }
  
  .vqr-mobile-nav-close {
    min-width: 44px;
    height: 44px;
  }
  
  /* Mobile dropdown positioning */
  .vqr-cart-dropdown,
  .vqr-user-dropdown {
    position: fixed;
    right: 10px;
    top: 60px;
    width: calc(100vw - 20px);
    max-width: 320px;
  }
  
  /* Improve modal on mobile */
  .vqr-modal-container,
  .vqr-confirm-modal .vqr-modal-container {
    width: calc(100% - 32px);
    margin: 16px;
    max-height: calc(100vh - 32px);
    overflow-y: auto;
  }
  
  /* Better grid layouts on mobile */
  .vqr-grid-cols-2,
  .vqr-grid-cols-3,
  .vqr-grid-cols-4 {
    grid-template-columns: 1fr;
    gap: var(--space-md);
  }
  
  /* Optimize strain cards on mobile */
  .vqr-strain-card {
    padding: var(--space-md);
  }
  
  .vqr-strain-image {
    height: 200px;
  }
  

  
  .vqr-batch-stats {
    grid-template-columns: repeat(2, 1fr);
    gap: var(--space-sm);
  }
  
  /* Improve notification positioning on mobile */
  .vqr-notifications-container {
    top: 74px; /* Below fixed header */
    right: 10px;
    left: 10px;
    max-width: none;
  }
  
  .vqr-notification {
    margin-bottom: 10px;
  }
  
  /* iOS specific fixes */
  @supports (-webkit-touch-callout: none) {
    /* iOS only */
    .vqr-app-main {
      padding-bottom: calc(env(safe-area-inset-bottom, 20px) + 20px);
    }
    
    /* Fix iOS rubber band scrolling */
    .vqr-app-container {
      position: fixed;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
    }
  }
  
  /* Prevent horizontal scroll */
  body.vqr-app {
    overflow-x: hidden;
  }
  
  /* Fix z-index stacking on mobile */
  .vqr-mobile-nav-overlay {
    z-index: 998;
  }
  
  .vqr-mobile-nav-drawer {
    z-index: 999;
  }
  
  .vqr-cart-dropdown.active,
  .vqr-user-dropdown.active {
    z-index: 200;
  }
  
  /* Improve loading states on mobile */
  .vqr-loading-overlay {
    position: fixed;
    top: 64px; /* Below header */
  }
  
  /* Better error messages on mobile */
  .vqr-error-message,
  .vqr-alert {
    margin: var(--space-md);
    font-size: var(--font-size-sm);
  }
  
  /* Optimize file upload on mobile */
  .vqr-file-upload-area {
    padding: var(--space-lg);
    min-height: 150px;
  }
  
  .vqr-file-upload-text {
    font-size: var(--font-size-sm);
  }
  
  /* Fix button groups on mobile */
  .vqr-btn-group {
    flex-wrap: wrap;
    gap: var(--space-sm);
  }
  
  .vqr-btn-group .vqr-btn {
    flex: 1 1 auto;
    min-width: 120px;
  }
  
  /* Improve search bars on mobile */
  .vqr-search-container {
    position: relative;
  }
  
  .vqr-search-input {
    padding-right: 44px;
  }
  
  .vqr-search-icon {
    position: absolute;
    right: 12px;
    top: 50%;
    transform: translateY(-50%);
    width: 20px;
    height: 20px;
    pointer-events: none;
  }
  
  /* Better pagination on mobile */
  .vqr-pagination {
    flex-wrap: wrap;
    gap: var(--space-xs);
    justify-content: center;
  }
  
  .vqr-pagination-btn {
    min-width: 40px;
    height: 40px;
    padding: 0;
  }
  
  /* Optimize tabs on mobile */
  .vqr-tabs {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    margin: 0 calc(var(--space-md) * -1);
    padding: 0 var(--space-md);
  }
  
  .vqr-tabs-list {
    min-width: max-content;
  }
  
  /* Fix long text overflow */
  .vqr-text-truncate {
    max-width: 100%;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
  }
  
  /* Improve touch interactions */
  .vqr-clickable,
  .vqr-btn,
  .vqr-dropdown-trigger,
  .vqr-nav-link {
    -webkit-tap-highlight-color: transparent;
    touch-action: manipulation;
  }
  
  /* Better image handling on mobile */
  .vqr-responsive-image {
    width: 100%;
    height: auto;
    max-width: 100%;
  }
  
  /* Fix status badges on mobile */
  .vqr-badge,
  .vqr-status-badge {
    font-size: 11px;
    padding: 2px 8px;
    white-space: nowrap;
  }
  
  /* Improve QR code display on mobile */
  .vqr-qr-thumb {
    width: 40px;
    height: 40px;
  }
  
  .vqr-qr-preview {
    max-width: 200px;
    margin: 0 auto;
  }
  
  /* Better empty states on mobile */
  .vqr-empty-state {
    padding: var(--space-2xl) var(--space-lg);
    text-align: center;
  }
  
  .vqr-empty-state-icon {
    width: 64px;
    height: 64px;
    margin: 0 auto var(--space-md);
  }
  
  /* Fix overlapping elements */
  .vqr-tooltip,
  .vqr-popover {
    z-index: 1000;
  }
  
  /* Improve readability */
  .vqr-text-sm {
    font-size: 14px;
    line-height: 1.5;
  }
  
  .vqr-text-xs {
    font-size: 12px;
    line-height: 1.5;
  }
  
  /* Better focus states for mobile */
  .vqr-input:focus,
  .vqr-select:focus,
  .vqr-textarea:focus {
    outline: 2px solid var(--primary);
    outline-offset: 2px;
  }
}

/* Remove boxes and padding on checkout page mobile */
@media (max-width: 768px) {
  /* Make entire checkout page white background */
  .vqr-order-page,
  .vqr-order-page .vqr-app-main,
  .vqr-order-page .vqr-app-content {
    background: #ffffff !important;
  }
  
  /* Checkout page specific mobile styles */
  .vqr-order-page .vqr-order-section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: var(--space-md) 0 !important;
    margin: 0 !important;
  }
  
  .vqr-order-page .vqr-order-header {
    background: transparent !important;
    border: none !important;
    margin: 0 !important;
    padding: 0 0 var(--space-md) 0 !important;
  }
  
  .vqr-order-page .vqr-order-content {
    padding: 0 !important;
  }
  
  .vqr-order-page .vqr-form-row {
    margin: 0 0 var(--space-md) 0 !important;
  }
  
  .vqr-order-page .vqr-cart-summary {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  
  .vqr-order-page .vqr-summary-header {
    background: transparent !important;
    padding: var(--space-md) 0 !important;
    border-bottom: 1px solid var(--border) !important;
  }
  
  .vqr-order-page .vqr-summary-content {
    padding: var(--space-md) 0 !important;
  }
  
  .vqr-order-page .vqr-summary-footer {
    background: transparent !important;
    border-top: 1px solid var(--border) !important;
    padding: var(--space-md) 0 !important;
  }
  
  /* Remove borders from cart review section */
  .vqr-order-page .vqr-cart-review {
    background: #ffffff !important;
    border: none !important;
    box-shadow: none !important;
    padding: 0 !important;
  }
  
  /* Remove padding from cart edit section */
  .vqr-order-page .vqr-cart-edit-prompt {
    padding: 0 !important;
    margin: 0 0 var(--space-md) 0 !important;
  }
  
  /* Remove padding from batch items */
  .vqr-order-page .vqr-cart-batch {
    padding: var(--space-sm) 0 !important;
  }
  
  /* Remove all card styles and borders */
  .vqr-order-page .vqr-card {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: var(--space-md) 0 !important;
  }
  
  /* Remove gray backgrounds from any nested elements */
  .vqr-order-page .vqr-surface,
  .vqr-order-page .vqr-surface-dark,
  .vqr-order-page [style*="background"],
  .vqr-order-page [class*="bg-"] {
    background: transparent !important;
  }
  
  /* Remove gray container background that's showing through */
  body[data-page="order"] .vqr-app-container,
  body[data-page="order"] .vqr-app-content,
  body[data-page="order"] .vqr-app-main {
    background: #ffffff !important;
  }
  
  /* Remove any borders around form containers */
  .vqr-order-page .vqr-order-container,
  .vqr-order-page form {
    border: none !important;
    box-shadow: none !important;
    background: transparent !important;
  }
  
  /* Full width inputs on checkout mobile */
  .vqr-order-page .vqr-input,
  .vqr-order-page .vqr-select,
  .vqr-order-page .vqr-textarea {
    width: 100% !important;
  }
  
  /* Remove any card styling from payment section */
  .vqr-order-page #vqr-payment-section {
    background: transparent !important;
    border: none !important;
    box-shadow: none !important;
    padding: var(--space-md) 0 !important;
  }
  
  .vqr-order-page .vqr-wc-payment-form {
    background: transparent !important;
    border: none !important;
    padding: 0 !important;
  }
  
  /* Adjust main container padding */
  .vqr-order-page {
    padding: var(--space-md) !important;
  }
  
  /* Remove any section dividers or borders */
  .vqr-order-page hr,
  .vqr-order-page .vqr-divider {
    display: none !important;
  }
  
  /* Remove gray background from order actions/button area */
  .vqr-order-page .vqr-order-actions {
    background: transparent !important;
    border: none !important;
    padding: var(--space-md) 0 !important;
  }
  
  /* Ensure the complete order button area has no background */
  .vqr-order-page .vqr-btn-complete-order {
    background-color: var(--primary) !important;
  }
}

/* Landscape mobile specific */
@media (max-width: 768px) and (orientation: landscape) {
  .vqr-app-header {
    height: 56px;
  }
  
  .vqr-app-content {
    margin-top: 56px;
    height: calc(100vh - 56px);
  }
  
  .vqr-app-main {
    min-height: calc(100vh - 56px);
  }
  
  .vqr-mobile-nav-header {
    height: 56px;
  }
}