/* Mobile Responsive Styles for Loopr */

/* Tablet: 768px - 1024px */
@media (max-width: 1024px) {
  .dashboard-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem;
  }

  .chart-container {
    height: 300px !important;
  }

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

/* Mobile: 320px - 767px */
@media (max-width: 767px) {
  /* Typography */
  h1 {
    font-size: 2rem !important;
  }

  h2 {
    font-size: 1.5rem !important;
  }

  h3 {
    font-size: 1.25rem !important;
  }

  /* Layout */
  .container {
    padding: 1rem !important;
  }

  .card {
    padding: 1rem !important;
    margin-bottom: 1rem;
  }

  /* Navigation */
  .nav-tabs {
    flex-direction: column !important;
    gap: 0.5rem;
  }

  .nav-tab {
    width: 100% !important;
    text-align: center;
  }

  /* Stats Grid */
  .stats-grid {
    grid-template-columns: 1fr !important;
  }

  .stat-card {
    padding: 1rem !important;
  }

  .stat-value {
    font-size: 1.5rem !important;
  }

  /* Buttons */
  .btn {
    width: 100% !important;
    padding: 0.875rem !important;
    font-size: 1rem !important;
  }

  .btn-group {
    flex-direction: column !important;
    gap: 0.5rem;
  }

  /* Forms */
  input,
  select {
    font-size: 16px !important; /* Prevents zoom on iOS */
  }

  /* Chart */
  .chart-container {
    height: 350px !important;
    min-height: 350px !important;
    margin: 0 !important;
    padding: 0.5rem !important;
  }
  
  .chart-wrapper {
    width: 100% !important;
    height: 100% !important;
  }
  
  canvas {
    max-width: 100% !important;
    height: auto !important;
  }

  /* Modal */
  .modal {
    padding: 1rem !important;
  }

  .modal-content {
    width: 100% !important;
    max-width: 100% !important;
    margin: 0 !important;
  }

  /* Wallet Connect */
  .wallet-options {
    flex-direction: column !important;
  }

  .wallet-option {
    width: 100% !important;
  }

  /* Trading Controls */
  .trading-controls {
    flex-direction: column !important;
  }

  /* Table */
  .table-responsive {
    overflow-x: auto !important;
    -webkit-overflow-scrolling: touch;
  }

  table {
    font-size: 0.875rem !important;
  }

  td, th {
    padding: 0.5rem !important;
  }

  /* Status Indicators */
  .status-badge {
    font-size: 0.75rem !important;
    padding: 0.25rem 0.5rem !important;
  }

  /* Hide on Mobile */
  .hide-mobile {
    display: none !important;
  }

  /* Show only on Mobile */
  .show-mobile {
    display: block !important;
  }

  /* Transparency Dashboard */
  .transparency-grid {
    grid-template-columns: 1fr !important;
  }

  .transparency-card {
    padding: 1rem !important;
  }

  /* Logo */
  .logo {
    font-size: 2rem !important;
  }

  /* Network Selector */
  .network-info {
    flex-direction: column !important;
    align-items: flex-start !important;
    gap: 0.5rem;
  }
}

/* Small Mobile: <375px */
@media (max-width: 374px) {
  h1 {
    font-size: 1.75rem !important;
  }

  .stat-value {
    font-size: 1.25rem !important;
  }

  .btn {
    padding: 0.75rem !important;
    font-size: 0.875rem !important;
  }
}

/* Landscape Mobile */
@media (max-height: 500px) and (orientation: landscape) {
  .modal-content {
    max-height: 90vh !important;
    overflow-y: auto !important;
  }

  .chart-container {
    height: 250px !important;
    min-height: 250px !important;
  }
}

/* Touch-friendly adjustments */
@media (hover: none) and (pointer: coarse) {
  /* Larger touch targets */
  button,
  a,
  .clickable {
    min-height: 44px !important;
    min-width: 44px !important;
  }

  /* Remove hover states */
  .btn:hover {
    transform: none !important;
  }

  /* Better tap highlighting */
  * {
    -webkit-tap-highlight-color: rgba(147, 51, 234, 0.2);
  }
}

/* Print Styles */
@media print {
  .no-print {
    display: none !important;
  }

  .card {
    break-inside: avoid !important;
  }
}

/* High DPI Displays */
@media (-webkit-min-device-pixel-ratio: 2), (min-resolution: 192dpi) {
  /* Sharper borders */
  .card {
    border-width: 0.5px !important;
  }
}

/* Dark Mode Support (if system prefers) */
@media (prefers-color-scheme: dark) {
  /* Already dark by default, but could add overrides here */
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
  * {
    animation-duration: 0.01ms !important;
    animation-iteration-count: 1 !important;
    transition-duration: 0.01ms !important;
  }
}

/* Accessibility: Focus States */
@media (prefers-reduced-motion: no-preference) {
  *:focus-visible {
    outline: 2px solid #9333EA !important;
    outline-offset: 2px !important;
  }
}