/* 📱 Aetheron Platform - Mobile Optimization Styles */

/* Mobile-First Responsive Design */
/* Applied automatically to all pages */

/* Base Mobile Styles (< 640px) */
@media (max-width: 640px) {
  /* Typography */
  h1 {
    font-size: 1.8rem !important;
  }

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

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

  p {
    font-size: 0.95rem !important;
  }

  /* Navigation */
  .navbar {
    padding: 0.75rem 1rem !important;
  }

  .navbar-content {
    flex-direction: column;
    gap: 1rem;
  }

  .logo {
    font-size: 1.2rem !important;
  }

  .nav-links {
    flex-direction: column;
    align-items: stretch;
    gap: 0.75rem !important;
    width: 100%;
  }

  .nav-link {
    padding: 0.75rem;
    text-align: center;
    border-radius: 8px;
    background: rgba(255, 255, 255, 0.05);
  }

  /* Mobile Navigation Menu (Hamburger) */
  .mobile-menu-toggle {
    display: block;
    background: none;
    border: none;
    color: #fff;
    font-size: 1.5rem;
    cursor: pointer;
    padding: 0.5rem;
  }

  .nav-links.mobile-hidden {
    display: none;
  }

  .nav-links.mobile-visible {
    display: flex;
    position: absolute;
    top: 100%;
    left: 0;
    right: 0;
    background: rgba(26, 26, 46, 0.98);
    -webkit-backdrop-filter: blur(10px);
    backdrop-filter: blur(10px);
    padding: 1rem;
    box-shadow: 0 10px 30px rgba(0, 0, 0, 0.5);
    z-index: 999;
  }

  /* Container */
  .container {
    padding: 0 1rem !important;
    margin: 1rem auto !important;
  }

  /* Hero Section */
  .hero {
    padding: 1.5rem !important;
    border-radius: 16px !important;
  }

  /* Cards */
  .card {
    border-radius: 12px !important;
    padding: 1rem !important;
  }

  .card-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.5rem;
  }

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

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

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

  /* Main Grid Layout */
  .main-grid {
    grid-template-columns: 1fr !important;
    gap: 1rem !important;
  }

  .calculator-grid,
  .charts-grid {
    grid-template-columns: 1fr !important;
  }

  /* Buttons */
  .btn {
    padding: 0.875rem 1.25rem !important;
    font-size: 0.95rem !important;
    width: 100%;
    margin-bottom: 0.5rem;
  }

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

  .d-grid {
    grid-template-columns: 1fr !important;
    gap: 0.5rem !important;
  }

  /* Touch-Friendly Interactions */
  .btn,
  .nav-link,
  .pool-card,
  .feature-card {
    min-height: 44px; /* Apple recommendation for touch targets */
    min-width: 44px;
  }

  /* Input Fields */
  .input-field {
    font-size: 16px !important; /* Prevents zoom on iOS */
    padding: 1rem !important;
  }

  select {
    font-size: 16px !important;
    padding: 1rem !important;
  }

  /* Staking Pools */
  .pool-card {
    padding: 1rem !important;
  }

  .pool-selector {
    grid-template-columns: 1fr !important;
  }

  .pool-option {
    padding: 1.25rem !important;
  }

  /* Charts */
  .chart-wrapper {
    height: 250px !important;
  }

  .chart-container {
    padding: 1rem !important;
    min-height: 300px !important;
  }

  .chart-header {
    flex-direction: column;
    align-items: flex-start !important;
    gap: 1rem;
  }

  .timeframe-selector {
    width: 100%;
    justify-content: space-between;
  }

  .timeframe-btn {
    flex: 1;
    padding: 0.75rem 0.5rem !important;
    font-size: 0.8rem !important;
  }

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

  .feature-card {
    padding: 1.25rem !important;
  }

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

  /* Tables */
  .projection-table {
    font-size: 0.85rem !important;
  }

  .projection-table th,
  .projection-table td {
    padding: 0.75rem 0.5rem !important;
  }

  /* Transaction History */
  .transaction-item {
    padding: 1rem !important;
    flex-direction: column;
    align-items: flex-start !important;
    gap: 0.75rem;
  }

  /* Wallet */
  .wallet-connected {
    flex-direction: column !important;
    gap: 1rem;
    align-items: stretch !important;
  }

  .balance-display .amount {
    font-size: 2rem !important;
  }

  /* Modals */
  .modal {
    max-width: 95% !important;
    margin: 1rem !important;
  }

  /* Footer */
  footer {
    padding: 1.5rem 1rem !important;
    text-align: center;
  }

  footer .footer-link {
    display: block;
    margin: 0.5rem 0 !important;
  }

  /* Alerts */
  .alert {
    padding: 1rem !important;
    font-size: 0.9rem !important;
  }

  /* Loading States */
  .loading-lg {
    width: 50px !important;
    height: 50px !important;
  }

  /* Hide Desktop-Only Elements */
  .desktop-only {
    display: none !important;
  }

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

  /* Calculator Inputs */
  .calculator-section {
    padding: 1.25rem !important;
  }

  /* Analytics Dashboard */
  .insights-section {
    padding: 1rem !important;
  }

  .insight-item {
    padding: 1rem !important;
  }

  /* Scrollable Tables */
  .table-wrapper {
    overflow-x: auto;
  }

  /* Better touch feedback */
  .btn:active,
  .nav-link:active,
  .pool-card:active,
  .feature-card:active {
    transform: scale(0.98);
    opacity: 0.9;
  }
}

/* Tablet Styles (640px - 1024px) */
@media (min-width: 641px) and (max-width: 1024px) {
  .container {
    padding: 0 1.5rem;
  }

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

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

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

  .charts-grid {
    grid-template-columns: 1fr !important;
  }

  h1 {
    font-size: 2.2rem !important;
  }

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

/* Landscape Mobile (< 640px height) */
@media (max-height: 640px) and (orientation: landscape) {
  .hero {
    padding: 1rem !important;
  }

  .chart-wrapper {
    height: 200px !important;
  }

  .navbar-content {
    flex-direction: row;
  }

  .nav-links {
    flex-direction: row;
    flex-wrap: wrap;
  }
}

/* Utility Classes for Mobile */
.mobile-only {
  display: none;
}

.desktop-only {
  display: block;
}

@media (max-width: 640px) {
  .mobile-only {
    display: block;
  }

  .desktop-only {
    display: none;
  }
}

/* Pull-to-Refresh Indicator */
.pull-to-refresh {
  text-align: center;
  padding: 1rem;
  color: #999;
  display: none;
}

.pull-to-refresh.active {
  display: block;
}

/* Bottom Navigation for Mobile */
.mobile-bottom-nav {
  position: fixed;
  bottom: 0;
  left: 0;
  right: 0;
  background: rgba(26, 26, 46, 0.98);
  -webkit-backdrop-filter: blur(10px);
  backdrop-filter: blur(10px);
  display: none;
  padding: 0.5rem;
  border-top: 1px solid rgba(255, 255, 255, 0.1);
  z-index: 100;
}

@media (max-width: 640px) {
  .mobile-bottom-nav {
    display: flex;
    justify-content: space-around;
    align-items: center;
  }

  /* Add padding to body to account for bottom nav */
  body {
    padding-bottom: 70px;
  }
}

.mobile-bottom-nav a {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 0.25rem;
  color: #fff;
  text-decoration: none;
  padding: 0.5rem;
  border-radius: 8px;
  transition: all 0.3s ease;
  font-size: 0.75rem;
}

.mobile-bottom-nav a:active {
  background: rgba(139, 92, 246, 0.2);
}

.mobile-bottom-nav a i {
  font-size: 1.25rem;
}

/* Improved Form Controls for Mobile */
@media (max-width: 640px) {
  input[type='number'],
  input[type='text'],
  input[type='email'],
  select,
  textarea {
    font-size: 16px !important; /* Prevents iOS zoom */
    padding: 0.875rem !important;
    border-radius: 12px !important;
  }

  /* Better slider controls */
  input[type='range'] {
    height: 10px !important;
  }

  input[type='range']::-webkit-slider-thumb {
    width: 24px !important;
    height: 24px !important;
  }
}

/* Improved spacing for mobile */
@media (max-width: 640px) {
  .mb-1 {
    margin-bottom: 0.75rem !important;
  }
  .mb-2 {
    margin-bottom: 1rem !important;
  }
  .mt-1 {
    margin-top: 0.75rem !important;
  }
  .mt-2 {
    margin-top: 1rem !important;
  }
  .gap-1 {
    gap: 0.75rem !important;
  }
  .gap-2 {
    gap: 1rem !important;
  }
}

/* Prevent horizontal scroll */
body {
  overflow-x: hidden;
}

* {
  max-width: 100%;
}

/* Safe area insets for notched devices (iPhone X+) */
@supports (padding: max(0px)) {
  .navbar {
    padding-left: max(1rem, env(safe-area-inset-left));
    padding-right: max(1rem, env(safe-area-inset-right));
  }

  .mobile-bottom-nav {
    padding-bottom: max(0.5rem, env(safe-area-inset-bottom));
  }
}