/* Mobile-First Enhancements for Order History */

@media (max-width: 768px) {
  /* Smooth scrolling for better UX */
  html {
    scroll-behavior: smooth;
  }
  
  /* Order History Modal - Native App Feel */
  #orderHistoryModal .modal-body {
    padding: 0.5rem;
    background: #f8f9fa;
  }
  
  /* Status badges - larger and more prominent */
  #ordersTable .badge {
    font-size: 0.75rem;
    padding: 0.4rem 0.8rem;
    font-weight: 600;
  }
  
  /* Order cards with better spacing */
  #ordersTable tbody tr {
    position: relative;
    animation: slideIn 0.3s ease-out;
  }
  
  @keyframes slideIn {
    from {
      opacity: 0;
      transform: translateY(10px);
    }
    to {
      opacity: 1;
      transform: translateY(0);
    }
  }
  
  /* Payment badge styling */
  #ordersTable .badge.bg-info,
  #ordersTable .badge.bg-success {
    display: inline-block;
    margin-top: 0.25rem;
  }
  
  /* Action buttons - app-like appearance */
  #ordersTable button {
    border-radius: 6px;
    font-weight: 500;
    transition: all 0.2s ease;
    box-shadow: 0 1px 3px rgba(0,0,0,0.1);
  }
  
  #ordersTable button:active {
    transform: scale(0.98);
  }
  
  /* Empty placeholder button slots */
  #ordersTable tbody td > div > div[style*="width:150px"] {
    display: none; /* Hide empty button slots on mobile */
  }
  
  /* Refresh button - sticky on mobile */
  #refreshOrders {
    position: sticky;
    top: 0;
    z-index: 10;
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 1rem;
  }
  
  /* Filter dropdown */
  #orderStatusFilter {
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 1rem;
    background: white;
  }
  
  /* My Orders header */
  .mb-3.d-flex .fw-semibold {
    font-size: 1.1rem;
    color: #212529;
  }
  
  /* Close button at bottom */
  #orderHistoryModal .modal-footer {
    position: sticky;
    bottom: 0;
    background: white;
    border-top: 1px solid #dee2e6;
    z-index: 10;
  }
  
  #orderHistoryModal .modal-footer button {
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 1rem;
    font-weight: 600;
  }
  
  /* Order cancelled modal - full screen on mobile */
  #orderCancelledModal .modal-dialog {
    margin: 1rem;
  }
  
  #orderCancelledModal .btn {
    border-radius: 8px;
    padding: 0.75rem;
  }
  
  /* User files modal - card layout */
  #userFilesModal .list-group-item {
    border-radius: 8px;
    margin-bottom: 0.5rem;
    border: 1px solid #dee2e6;
  }
  
  #userFilesModal .btn {
    border-radius: 6px;
    padding: 0.6rem;
  }
  
  /* Account settings - full height */
  #accountSettingsModal .modal-content {
    min-height: 100vh;
  }
  
  #accountSettingsModal .list-group-item {
    padding: 1rem;
    font-size: 1rem;
  }
  
  /* Edit order modal - better form layout */
  #editOrderModal .form-control,
  #editOrderModal .form-select {
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 1rem;
  }
  
  #editOrderModal .form-label {
    font-weight: 600;
    margin-bottom: 0.5rem;
    color: #495057;
  }
  
  /* Payment modal - optimized QR view */
  #paymentModal .form-select {
    border-radius: 8px;
    padding: 0.75rem;
    font-size: 1rem;
  }
  
  #qrContainer {
    padding: 1rem;
    text-align: center;
  }
  
  #qrContainer img {
    border-radius: 8px;
    box-shadow: 0 2px 8px rgba(0,0,0,0.1);
  }
  
  #qrContainer .bg-light {
    border-radius: 8px;
  }
  
  /* Improve touch targets - minimum 44px */
  button,
  a.btn,
  .form-control,
  .form-select {
    min-height: 44px;
  }
  
  /* Prevent zoom on input focus */
  input,
  select,
  textarea {
    font-size: 16px !important;
  }
  
  /* Better spacing for modal headers */
  .modal-header {
    padding: 1rem;
    border-bottom: 1px solid #dee2e6;
  }
  
  .modal-title {
    font-size: 1.25rem;
    font-weight: 600;
  }
  
  /* Table responsiveness indicator */
  .table-responsive {
    -webkit-overflow-scrolling: touch;
  }
}

/* iPhone SE and similar small screens */
@media (max-width: 375px) {
  #ordersTable tbody tr {
    padding: 0.75rem;
    margin-bottom: 0.75rem;
  }
  
  #ordersTable tbody td {
    font-size: 0.875rem;
  }
  
  #ordersTable tbody td::before {
    font-size: 0.75rem;
  }
  
  #ordersTable button {
    font-size: 0.875rem;
    padding: 0.5rem;
  }
}

/* Landscape orientation */
@media (max-width: 900px) and (orientation: landscape) {
  #orderHistoryModal .modal-content {
    height: auto;
    max-height: 100vh;
  }
  
  #orderHistoryModal .modal-body {
    max-height: calc(100vh - 140px);
    overflow-y: auto;
  }
}