/* === DarkPentra Mobile Responsive === */
@media (max-width: 768px) {
  /* Hide sidebar on mobile */
  .sidebar, .side-nav { display: none !important; }
  .main-content, .content, .page-content { margin-left: 0 !important; padding: 12px !important; width: 100% !important; }
  
  /* Header */
  .page-header { flex-direction: column; gap: 8px; align-items: flex-start !important; }
  .page-header h1, .greeting { font-size: 1.3rem !important; }
  .page-subtitle { font-size: 0.8rem !important; }
  .header-actions, .header-btns { display: flex; flex-wrap: wrap; gap: 6px; }
  .header-actions .btn, .header-btns .btn { font-size: 0.7rem !important; padding: 6px 10px !important; }
  
  /* Top stats grid - stack on mobile */
  .stats-row, .hero-widgets, .top-widgets { 
    display: grid !important; 
    grid-template-columns: 1fr 1fr !important; 
    gap: 8px !important; 
  }
  .stat-card, .widget-card, .hero-widget { 
    min-width: 0 !important; 
    padding: 12px !important; 
  }
  .stat-card h2, .stat-value { font-size: 1.4rem !important; }
  
  /* Market stats row */
  .market-stats, .stats-bar {
    display: grid !important;
    grid-template-columns: 1fr 1fr !important;
    gap: 8px !important;
  }
  .market-stat { padding: 10px !important; text-align: center; }
  .market-stat .value { font-size: 1.2rem !important; }
  
  /* Agent grid */
  .agent-grid, .agents-grid {
    display: grid !important;
    grid-template-columns: 1fr !important;
    gap: 10px !important;
  }
  .agent-card, .card { padding: 12px !important; }
  .agent-card .agent-name { font-size: 0.9rem !important; }
  
  /* Coin selector */
  .coin-selector, .coin-tabs {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 4px !important;
  }
  .coin-selector .btn, .coin-tab {
    padding: 4px 10px !important;
    font-size: 0.75rem !important;
  }
  
  /* Live signals */
  .signal-card, .live-signal-coin {
    padding: 12px !important;
  }
  
  /* Live feed grid */
  .live-feed-grid, .feed-grid {
    grid-template-columns: 1fr !important;
  }
  
  /* Heatmap */
  .heatmap, #heatmap {
    display: grid !important;
    grid-template-columns: repeat(4, 1fr) !important;
    gap: 4px !important;
  }
  .heatmap-cell {
    padding: 6px 4px !important;
    font-size: 0.65rem !important;
  }
  .heatmap-cell .symbol { font-size: 0.7rem !important; }
  
  /* Watchlist */
  .watchlist-item { padding: 8px 0 !important; font-size: 0.85rem !important; }
  
  /* Ticker tape */
  .ticker-tape { font-size: 0.75rem !important; }
  
  /* Tables */
  table { font-size: 0.75rem !important; }
  th, td { padding: 6px 4px !important; }
  
  /* News items */
  .news-item { padding: 12px !important; }
  .news-title { font-size: 0.9rem !important; }
  .news-meta { font-size: 0.7rem !important; flex-wrap: wrap; gap: 4px; }
  
  /* Scanner table scroll */
  .table-container, .scanner-table { overflow-x: auto !important; }
  
  /* Pricing grid */
  .pricing-grid, .price-cards { grid-template-columns: 1fr !important; }
  
  /* General */
  .card, .panel { border-radius: 10px !important; }
  body { font-size: 14px; }
  h1 { font-size: 1.5rem !important; }
  h2 { font-size: 1.2rem !important; }
  
  /* Modal / overlays */
  .modal-content, .auth-modal { width: 95% !important; max-width: 95% !important; margin: 10px auto !important; }
  
  /* Login page */
  .auth-container, .login-container { flex-direction: column !important; }
  .auth-left, .login-left { display: none !important; }
  .auth-right, .login-right { width: 100% !important; padding: 20px !important; }
  
  /* Footer */
  .footer-grid { grid-template-columns: 1fr !important; gap: 20px !important; }
  
  /* FAQ */
  .faq-question { font-size: 0.9rem !important; padding: 14px !important; }
}

@media (max-width: 480px) {
  .stats-row, .hero-widgets, .top-widgets { grid-template-columns: 1fr !important; }
  .market-stats, .stats-bar { grid-template-columns: 1fr 1fr !important; }
  .heatmap, #heatmap { grid-template-columns: repeat(3, 1fr) !important; }
  .header-actions .btn, .header-btns .btn { width: 100%; text-align: center; }
}

/* Dashboard top widget row */
@media (max-width: 768px) {
  .overview-widgets, .widgets-row, .top-row {
    display: flex !important;
    flex-direction: column !important;
    gap: 10px !important;
  }
  .overview-widgets > *, .widgets-row > *, .top-row > * {
    width: 100% !important;
    min-width: 0 !important;
  }
  /* Fix hamburger menu */
  .mobile-menu-btn, .hamburger { display: block !important; }
  /* Ensure no horizontal scroll */
  body, html { overflow-x: hidden !important; }
  .main { overflow-x: hidden !important; }
  /* Fix section titles */
  .section-title { font-size: 1rem !important; }
  /* Agent insights header */
  .agent-insights-header { flex-direction: column !important; gap: 8px !important; align-items: flex-start !important; }
  /* Signal cards */
  .signal-breakdown { flex-direction: column !important; }
  /* Ensure proper padding */
  .page { padding: 8px !important; }
  /* Run Analysis button */
  .run-analysis-btn { font-size: 0.75rem !important; padding: 6px 12px !important; }
}


/* =========================================
   MOBILE HEADER BAR + HAMBURGER
   ========================================= */
#mobile-header {
    display: none;
    position: fixed;
    top: 0; left: 0; right: 0;
    z-index: 1000;
    background: rgba(10,14,23,0.97);
    backdrop-filter: blur(12px);
    border-bottom: 1px solid rgba(139,92,246,0.2);
    padding: 10px 16px;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
}
#hamburger {
    background: none; border: none; color: #e2e8f0; font-size: 24px;
    cursor: pointer; padding: 4px 8px;
}
.mobile-logo {
    font-weight: 700; font-size: 16px;
    background: linear-gradient(135deg, #7c3aed, #a78bfa);
    -webkit-background-clip: text; -webkit-text-fill-color: transparent;
}
.mobile-actions {
    display: flex; align-items: center; gap: 8px;
}

@media (max-width: 768px) {
    #mobile-header { display: flex !important; }
    
    /* Sidebar as slide-in overlay */
    #sidebar, aside {
        display: block !important;
        position: fixed !important;
        top: 0; left: -280px;
        width: 260px !important;
        height: 100vh !important;
        z-index: 999;
        background: rgba(10,14,23,0.98) !important;
        transition: left 0.3s ease;
        overflow-y: auto;
        padding-top: 60px !important;
        border-right: 1px solid rgba(139,92,246,0.15);
    }
    #sidebar.open, aside.open {
        left: 0 !important;
    }
    
    /* Overlay behind sidebar */
    #sidebar.open::after, aside.open::after {
        content: '';
        position: fixed;
        top: 0; left: 260px; right: 0; bottom: 0;
        background: rgba(0,0,0,0.5);
    }
    
    /* Main content offset for mobile header */
    .main, main {
        margin-top: 54px !important;
        margin-left: 0 !important;
        width: 100% !important;
    }
    
    /* Ticker tape below mobile header */
    .ticker-tape {
        top: 54px !important;
        position: relative !important;
    }
    
    /* Market table responsive */
    .table-container, .market-table-wrap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }
    #market-table-body td, #market-table-body th {
        white-space: nowrap;
    }
    
    /* Charts page responsive */
    .toolbar {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 8px 10px !important;
    }
    .toolbar select {
        max-width: 140px;
    }
    .tf { padding: 4px 8px !important; font-size: 11px !important; }
    .stats { 
        flex-wrap: wrap !important; 
        gap: 6px 16px !important;
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
}

/* Close sidebar when clicking outside */
@media (max-width: 768px) {
    body.sidebar-open {
        overflow: hidden;
    }
}