/**
 * MOBILE RESPONSIVE BREAKPOINTS
 * Targeted media queries for mobile devices (≤768px)
 */

@media (max-width: 768px) {
  /* Hero Stats - Stack vertically on mobile */
  .hero-stats {
    display: flex !important;
    flex-direction: column !important;
    gap: 15px !important;
  }

  .stat-card {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Dashboard Container - Stack grids */
  .dashboard-container {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 20px !important;
  }

  .dashboard-panel {
    width: 100% !important;
    margin: 0 !important;
  }

  /* Trading Simulator - Stack elements */
  .trading-panel,
  .market-view {
    width: 100% !important;
    margin-bottom: 20px !important;
  }

  /* Calculator Panel - Full width */
  .calculator-panel {
    width: 100% !important;
    padding: 15px !important;
  }

  /* Battery Flex Fund - Stack specs */
  .spec-grid,
  .specs-grid {
    grid-template-columns: 1fr !important;
  }

  /* Financial Snapshot - Stack cards */
  .snapshot-grid {
    grid-template-columns: 1fr !important;
  }

  .snapshot-card {
    margin-bottom: 15px !important;
  }

  /* Charts - Reduce height on mobile */
  .chart-container {
    min-height: 250px !important;
    height: 250px !important;
  }

  canvas {
    min-height: 200px !important;
    height: 200px !important;
  }

  /* Section Padding - Reduce on mobile */
  section {
    padding: 30px 15px !important;
  }

  /* Hero Section - Adjust text size */
  .hero-title {
    font-size: 2rem !important;
  }

  .hero-subtitle {
    font-size: 1rem !important;
  }

  /* Navbar - Mobile adjustments */
  .nav-menu {
    flex-direction: column !important;
    width: 100% !important;
  }

  .nav-menu a {
    padding: 15px !important;
    width: 100% !important;
  }

  /* Energy Sources - Stack on mobile */
  .energy-sources-container {
    grid-template-columns: 1fr !important;
  }

  .energy-source {
    margin-bottom: 10px !important;
  }

  /* Assistant Interface - Stack sidebar */
  .assistant-interface {
    flex-direction: column !important;
  }

  .assistant-sidebar,
  .assistant-main {
    width: 100% !important;
    max-width: 100% !important;
  }

  /* Blockchain Explorer - Reduce controls */
  .explorer-controls {
    padding: 10px !important;
  }

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

  /* Market Overview - Stack */
  .market-overview {
    grid-template-columns: 1fr !important;
  }

  /* Hide decorative elements on mobile */
  .blockchain-animation,
  .particle-background {
    display: none !important;
  }

  /* Background animation ENABLED on mobile - FIXED positioning */
  #bgCanvas {
    display: block !important;
    opacity: 1 !important;
    visibility: visible !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    z-index: -1 !important;
    pointer-events: none !important;
  }

  /* Ensure body has solid background on mobile */
  body {
    background: var(--bg-color) !important;
  }

  /* Theme Toggle - Make it visible and clickable on mobile */
  #themeToggle,
  #heroThemeToggle,
  .hero-theme-toggle {
    display: flex !important;
    align-items: center !important;
    justify-content: center !important;
    width: 50px !important;
    height: 50px !important;
    font-size: 24px !important;
    cursor: pointer !important;
    pointer-events: auto !important;
    z-index: 1000 !important;
    position: relative !important;
    background: rgba(var(--accent-color-rgb), 0.1) !important;
    border: 2px solid var(--accent-color) !important;
    border-radius: 50% !important;
    padding: 0 !important;
    transition: all 0.3s ease !important;
  }

  #themeToggle:active,
  #heroThemeToggle:active,
  .hero-theme-toggle:active {
    transform: scale(0.95) !important;
    background: rgba(var(--accent-color-rgb), 0.3) !important;
  }

  /* Theme toggle container */
  .theme-toggles {
    display: flex !important;
    justify-content: center !important;
    margin: 20px 0 !important;
  }

  /* Typography - Smaller on mobile */
  h2 {
    font-size: 1.8rem !important;
  }

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

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

  /* Buttons - Full width on mobile */
  .btn,
  .cta-button,
  .trade-button {
    width: 100% !important;
    margin-bottom: 10px !important;
  }

  /* Tables - Scroll horizontally */
  table {
    display: block !important;
    overflow-x: auto !important;
    white-space: nowrap !important;
  }

  /* Grid Layouts - Single column */
  .grid-2,
  .grid-3,
  .grid-4 {
    grid-template-columns: 1fr !important;
  }
}

/* Tablet breakpoint (769px - 1024px) */
@media (min-width: 769px) and (max-width: 1024px) {
  .dashboard-container {
    grid-template-columns: repeat(2, 1fr) !important;
  }

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

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