/* ===== C29-GOLDEN-EYE | MOBILE RESPONSIVE v2.0 ===== */
/* Separated file for all mobile/responsive styles */

/* ===== HAMBURGER BUTTON ===== */
.hamburger {
  display: none;
  background: none;
  border: none;
  color: var(--accent);
  font-size: 1.5rem;
  cursor: pointer;
  padding: 8px 12px;
  min-width: 44px;
  min-height: 44px;
  line-height: 1;
  z-index: 100;
  -webkit-tap-highlight-color: transparent;
}

/* ===== MOBILE SIDEBAR ===== */
.mobile-sidebar {
  position: fixed;
  top: 0;
  left: -300px;
  width: 280px;
  height: 100vh;
  height: 100dvh;
  background: var(--void-panel);
  border-right: 1px solid var(--border-glow);
  z-index: 10001;
  transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
  overflow-y: auto;
  -webkit-overflow-scrolling: touch;
  padding: 0;
}
.mobile-sidebar.open { left: 0; }

.mobile-sidebar-overlay {
  position: fixed;
  inset: 0;
  background: rgba(0, 0, 0, 0.6);
  z-index: 10000;
  opacity: 0;
  pointer-events: none;
  transition: opacity 0.3s ease;
  -webkit-tap-highlight-color: transparent;
}
.mobile-sidebar-overlay.open {
  opacity: 1;
  pointer-events: auto;
}

.mobile-sidebar-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding: 14px 16px;
  border-bottom: 1px solid var(--border);
  background: var(--void);
}
.mobile-sidebar-header .logo { font-size: 0.9rem; }

.sidebar-close {
  background: none;
  border: none;
  color: var(--text-primary);
  font-size: 1.6rem;
  cursor: pointer;
  padding: 8px;
  min-width: 44px;
  min-height: 44px;
  display: flex;
  align-items: center;
  justify-content: center;
  -webkit-tap-highlight-color: transparent;
}

.sidebar-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 8px;
}

.sidebar-nav-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 14px 12px;
  border-radius: var(--radius-xs);
  color: var(--text-secondary);
  font-family: var(--font-sans);
  font-size: 0.9rem;
  cursor: pointer;
  transition: all 0.2s;
  border: none;
  background: none;
  text-align: left;
  width: 100%;
  -webkit-tap-highlight-color: transparent;
  touch-action: manipulation;
}
.sidebar-nav-item:hover,
.sidebar-nav-item:active,
.sidebar-nav-item.active {
  background: var(--accent-dim);
  color: var(--accent);
}
.sidebar-nav-item .nav-icon {
  font-size: 1.2rem;
  width: 28px;
  text-align: center;
  flex-shrink: 0;
}
.sidebar-divider {
  height: 1px;
  background: var(--border);
  margin: 6px 12px;
}

/* ===== MOBILE BOTTOM NAV ===== */
.mobile-nav { display: none; }

/* ===== DESKTOP — HIDE MOBILE ELEMENTS ===== */
@media (min-width: 901px) {
  .mobile-nav,
  .hamburger,
  .mobile-sidebar,
  .mobile-sidebar-overlay { display: none !important; }
}

/* ===== TABLET (≤900px) ===== */
@media (max-width: 900px) {
  /* Show hamburger */
  .hamburger {
    display: flex !important;
    align-items: center;
    justify-content: center;
  }

  /* Bottom nav bar */
  .mobile-nav {
    display: flex !important;
    position: fixed;
    bottom: 0;
    left: 0;
    right: 0;
    background: rgba(8, 8, 12, 0.9);
    backdrop-filter: blur(16px);
    -webkit-backdrop-filter: blur(16px);
    border-top: 1px solid rgba(0, 212, 255, 0.15);
    z-index: 9998;
    padding: 6px 0;
    padding-bottom: env(safe-area-inset-bottom);
    box-shadow: 0 -4px 20px rgba(0,0,0,0.5);
  }
  .mobile-nav button {
    flex: 1;
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 4px;
    padding: 8px 0;
    background: none;
    border: none;
    color: rgba(255, 255, 255, 0.4);
    font-family: var(--font-mono);
    font-size: 0.5rem;
    font-weight: 600;
    cursor: pointer;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    -webkit-tap-highlight-color: transparent;
    border-radius: 8px;
    margin: 0 2px;
  }
  .mobile-nav button.active { 
    color: var(--accent); 
    background: rgba(0, 212, 255, 0.08);
    text-shadow: 0 0 10px rgba(0,212,255,0.4);
  }
  .mobile-nav button .mnav-icon { 
    font-size: 1.1rem; 
    transition: transform 0.3s;
  }
  .mobile-nav button.active .mnav-icon {
    transform: translateY(-2px) scale(1.1);
  }

  /* Body padding for bottom nav */
  body {
    padding-bottom: 56px;
    overflow: auto;
  }

  /* Stacked layout — single column */
  .main-grid {
    grid-template-columns: 1fr !important;
    grid-template-rows: auto 1fr auto !important;
    height: auto !important;
    overflow-y: auto !important;
    gap: 4px !important;
    padding: 4px !important;
  }

  /* Hide left panel — use sidebar instead */
  .left-panel { display: none !important; }

  /* Chart area */
  .center-col { min-height: 300px; }
  #chart-container { min-height: 260px !important; }

  /* Chart toolbar compact */
  .chart-toolbar {
    flex-wrap: wrap;
    gap: 4px;
    padding: 6px 8px !important;
  }
  .chart-pair-label { font-size: 0.85rem; }
  .chart-pair-label .price-live { font-size: 1rem; }
  .tf-group { gap: 2px; }
  .tf-btn { padding: 6px 10px !important; font-size: 0.6rem !important; }

  /* Drawing tools */
  .draw-toolbar { margin-left: 0; }

  /* Indicators */
  .indicators-bar {
    grid-template-columns: repeat(3, 1fr) !important;
    gap: 3px !important;
    padding: 6px !important;
  }
  .ind-item { padding: 4px 6px !important; }

  /* Futures bar */
  .futures-bar { grid-template-columns: repeat(3, 1fr) !important; gap: 3px !important; }

  /* Right panel tabs — scrollable */
  .right-col { min-height: 400px; }
  .tab-bar {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
    flex-wrap: nowrap !important;
    gap: 2px;
    padding: 4px;
  }
  .tab-btn {
    flex: 0 0 auto;
    padding: 10px 12px;
    font-size: 0.5rem !important;
    white-space: nowrap;
  }

  /* Signal grid */
  .signal-grid { grid-template-columns: 1fr 1fr !important; }
  .consensus-grid { grid-template-columns: repeat(3, 1fr); gap: 2px; }

  /* Heatmap */
  .heatmap-grid { grid-template-columns: repeat(5, 1fr) !important; }

  /* Pattern markers */
  .pattern-markers { flex-wrap: wrap; }

  /* Header compact */
  .header-ticker { display: none; }
  .heartbeat-wrap { display: none; }
  .app-header { padding: 0 8px; }
}

/* ===== PHONE (≤480px) ===== */
@media (max-width: 480px) {
  html { font-size: 11px; }
  .app-header { height: 42px; }
  .logo { font-size: 0.8rem !important; letter-spacing: 1px; }
  .logo-sub { display: none; }
  .market-stat { display: none; }
  .conn-status .conn-dot { width: 6px; height: 6px; }

  #chart-container { min-height: 200px !important; }
  .indicators-bar { grid-template-columns: repeat(3, 1fr) !important; }
  .futures-bar { grid-template-columns: repeat(2, 1fr) !important; }
  .heatmap-grid { grid-template-columns: repeat(4, 1fr) !important; }
  .signal-grid { grid-template-columns: 1fr !important; }
  .tab-btn { padding: 8px 10px !important; font-size: 0.45rem !important; }
}