/* ═══════════════════════════════════════════════════════════════════════
   DASHBOARD MOBILE STYLES v2.0
   4 sayfa: data-central, analytics-pro, telegram-signal, api-keys-new
   ═══════════════════════════════════════════════════════════════════════ */

/* Desktop — bottom nav gizle */
@media (min-width: 769px) {
    .dash-bot-bar,
    .dash-mob-hdr,
    .dash-slide-bg,
    .dash-slide-panel {
        display: none !important;
    }
}

/* ═══════════════════════════════════════════════════════════════════════
   MOBILE (≤768px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 768px) {

    /* ── GLOBAL ── */
    html, body {
        max-width: 100vw !important;
        overflow-x: hidden !important;
    }

    body {
        padding-top: 94px !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
    }

    /* Desktop header & tab-nav gizle */
    .elite-header,
    .mobile-header,
    .elite-nav.tab-nav,
    .header-actions {
        display: none !important;
    }

    /* mobile-menu-inject.js header'ini dashboard'da gizle */
    .mobile-pro-header {
        display: none !important;
    }

    /* mobile-common.js header'ini dashboard'da gizle */
    #mobileHeader,
    .mobile-header,
    #mobileMenuOverlay,
    #mobileMenuPanel {
        display: none !important;
    }

    /* inline mobile-nav gizle (data-central.html eski nav) */
    .mobile-nav {
        display: none !important;
    }

    /* Desktop header-actions mobilde gizle */
    .header-actions {
        display: none !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       SHARED CARD STYLES
       ═══════════════════════════════════════════════════════════════ */
    .terminal-card,
    .glass-card {
        border-radius: 12px !important;
        margin-bottom: 8px !important;
        overflow: hidden;
    }

    .terminal-card .terminal-header,
    .glass-card .card-header {
        padding: 10px 12px !important;
        flex-wrap: wrap;
        gap: 6px;
    }

    .terminal-card .terminal-body,
    .glass-card .card-body {
        padding: 10px 12px !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       GRID LAYOUTS → tek sutun
       ═══════════════════════════════════════════════════════════════ */
    .main-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 8px !important;
        padding: 0 !important;
    }

    .grid-column,
    .left-column,
    .center-column,
    .right-column {
        width: 100% !important;
        max-width: 100% !important;
    }

    .three-column-grid,
    .two-column-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       STATS / METRICS
       ═══════════════════════════════════════════════════════════════ */
    .stats-grid,
    .metrics-grid,
    .metrics-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    .stat-card,
    .metric-card {
        padding: 10px !important;
    }

    .stat-value,
    .metric-value {
        font-size: 1.05rem !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       CHART CONTAINERS
       ═══════════════════════════════════════════════════════════════ */
    .chart-container,
    .charts-grid {
        grid-template-columns: 1fr !important;
    }

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

    /* ═══════════════════════════════════════════════════════════════
       TABLE RESPONSIVE
       ═══════════════════════════════════════════════════════════════ */
    .table-wrapper,
    .data-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
    }

    .table-wrapper table,
    .data-table-wrapper table {
        min-width: 500px;
    }

    /* ═══════════════════════════════════════════════════════════════
       MODALS
       ═══════════════════════════════════════════════════════════════ */
    .modal-content,
    .bot-setup-content {
        width: 95vw !important;
        max-width: 95vw !important;
        margin: 10px auto !important;
        max-height: 85vh !important;
        border-radius: 16px !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       TOAST
       ═══════════════════════════════════════════════════════════════ */
    .toast-notification {
        left: 12px !important;
        right: 12px !important;
        bottom: 80px !important;
        max-width: none !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       BUTTONS / INPUTS (iOS zoom prevention)
       ═══════════════════════════════════════════════════════════════ */
    button, .btn, [class*="btn-"] {
        min-height: 40px;
        touch-action: manipulation;
    }

    input, select, textarea {
        font-size: 16px !important; /* iOS zoom onleme */
    }

    /* ═══════════════════════════════════════════════════════════════
       ORBITRON FONT SIZE
       ═══════════════════════════════════════════════════════════════ */
    .card-title,
    .terminal-title,
    h3[style*="Orbitron"] {
        font-size: 0.72rem !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       SCROLL CONTAINERS
       ═══════════════════════════════════════════════════════════════ */
    .scroll-container {
        -webkit-overflow-scrolling: touch;
    }

    /* ═══════════════════════════════════════════════════════════════
       FOOTER — hide on dashboard
       ═══════════════════════════════════════════════════════════════ */
    .bottom-bar,
    .sentinel-footer {
        display: none !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       AI CHAT WIDGET
       ═══════════════════════════════════════════════════════════════ */
    #ai-chat-btn {
        bottom: 16px !important;
    }

    #ai-chat-window {
        bottom: 76px !important;
        right: 10px !important;
        left: 10px !important;
        width: auto !important;
        max-height: 55vh !important;
    }

    /* ═══════════════════════════════════════════════════════════════
       POSITION / ORDER CARDS
       ═══════════════════════════════════════════════════════════════ */
    .position-card,
    .order-card {
        padding: 10px !important;
    }

    .position-header,
    .order-header {
        flex-wrap: wrap;
        gap: 6px;
    }

    /* Kill Switch */
    .kill-switch-btn-inline {
        font-size: 0.55rem !important;
        padding: 4px 8px !important;
    }

    /* Exchange tickers */
    .exchange-ticker {
        font-size: 0.62rem !important;
        padding: 3px 6px !important;
    }


    /* ═══════════════════════════════════════════════════════════════
       1. DATA-CENTRAL.HTML — ozel stiller
       ═══════════════════════════════════════════════════════════════ */
    .command-center {
        padding: 4px !important;
        padding-bottom: 16px !important;
    }

    .data-central-container {
        padding: 4px !important;
    }

    /* HEADER gizle — tüm desktop header */
    .elite-header,
    header.elite-header {
        display: none !important;
    }

    /* 3 sütunlu grid → tek sütun */
    .main-grid {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
        padding: 0 !important;
    }

    .left-sidebar-stack,
    .main-content-stack,
    .sidebar-stack {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    /* Sidebar resizer gizle */
    .sidebar-resizer,
    .sidebar-resizer-left,
    .sidebar-resizer-right {
        display: none !important;
    }

    /* 2 sütunlu flex grid → tek sütun */
    .main-content-flex-grid,
    .main-content-flex-grid.cols-2,
    .main-content-flex-grid.cols-1 {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    /* Terminal card tam genislik */
    .terminal-card {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
        overflow: hidden !important;
    }

    /* Chart — yuksekligi dusur */
    .chart-card .terminal-body {
        height: 300px !important;
    }

    #tradingview-widget {
        height: 300px !important;
    }

    /* Chart-whale combined layout → dikey */
    .chart-whale-combined {
        flex-direction: column !important;
        height: auto !important;
    }

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

    .whale-section,
    .liq-stream-section {
        width: 100% !important;
        max-height: 200px !important;
    }

    /* Chart toolbar — kucuk ekranda tasmayı onle */
    .chart-toolbar {
        flex-wrap: wrap !important;
        gap: 4px !important;
        padding: 4px 6px !important;
    }

    .chart-toolbar-left,
    .chart-toolbar-center,
    .chart-toolbar-right {
        flex-shrink: 1 !important;
        min-width: 0 !important;
    }

    .timeframe-btn-group {
        flex-wrap: wrap !important;
        gap: 2px !important;
    }

    .timeframe-btn {
        font-size: 0.6rem !important;
        padding: 3px 6px !important;
        min-width: 28px !important;
    }

    .coin-selector-trigger {
        font-size: 0.75rem !important;
    }

    /* HFT triple bar → dikey */
    .hft-triple-bar {
        flex-direction: column !important;
        gap: 6px !important;
    }

    .zeromq-latency-widget,
    .backtest-shield,
    .macro-guard {
        flex-direction: row !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    /* Positions card — tablo scroll */
    .positions-card .terminal-body {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .dc-positions-table {
        min-width: 650px !important;
    }

    .dc-pos-header,
    .dc-pos-row {
        font-size: 0.65rem !important;
    }

    /* Performance metrics grid */
    .performance-metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 4px !important;
    }

    .perf-metric-card {
        padding: 6px 8px !important;
    }

    /* Arbitrage table scroll */
    .arbitrage-table {
        font-size: 0.65rem !important;
    }

    /* Funding heatmap scroll */
    .funding-heatmap {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    .funding-heatmap .funding-header,
    .funding-heatmap .funding-row {
        min-width: 300px !important;
    }

    /* L2 orderbook */
    .l2-container {
        font-size: 0.7rem !important;
    }

    /* Exchange ticker strip → wrap */
    .exchange-ticker-strip {
        flex-wrap: wrap !important;
        gap: 4px !important;
        padding: 6px !important;
    }

    .ticker-item {
        min-width: calc(50% - 4px) !important;
        flex: 0 0 calc(50% - 4px) !important;
    }

    /* Macro list items */
    .macro-item {
        flex-wrap: wrap !important;
        gap: 4px !important;
        padding: 6px !important;
    }

    .macro-chart {
        width: 100% !important;
        order: 3 !important;
        height: 30px !important;
    }

    /* Greeks container */
    .greeks-row {
        padding: 6px 8px !important;
    }

    .greeks-label {
        font-size: 0.68rem !important;
    }

    .greeks-value {
        font-size: 0.78rem !important;
    }

    /* Inline style iceren elementler icin genel fix */
    [style*="grid-template-columns: repeat(3"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    [style*="display: flex"][style*="gap: 14px"] {
        flex-wrap: wrap !important;
    }

    /* Tooltip'leri mobilde daha kucuk yap */
    .metric-tooltip,
    .card-tooltip {
        max-width: 250px !important;
        font-size: 0.65rem !important;
    }

    /* Metrics bar */
    .metrics-bar {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        padding: 0 !important;
        margin-bottom: 8px !important;
    }

    .metric-card {
        padding: 8px !important;
        border-radius: 10px !important;
    }

    .metric-card-combined {
        grid-column: span 2 !important;
    }

    .metric-label {
        font-size: 0.58rem !important;
    }

    .metric-value {
        font-size: 0.85rem !important;
    }

    /* HFT Dashboard */
    .hft-dashboard {
        padding: 6px !important;
    }

    .hft-metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    /* Liquidity Heatmap */
    .liq-heatmap-container {
        flex-direction: column !important;
    }

    .liq-heatmap-sidebar {
        width: 100% !important;
        max-height: 200px;
    }

    /* Bot manager */
    .bot-manager-card {
        max-width: 100% !important;
    }

    .bot-manager-card .terminal-body {
        max-width: 100% !important;
        overflow-x: hidden !important;
    }

    /* Trading bot cards grid */
    .bot-cards-grid,
    .bots-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Consensus cards */
    .consensus-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    /* Whale tracker */
    .whale-tracker-grid {
        grid-template-columns: 1fr !important;
    }

    /* Terminal grid background */
    .terminal-grid-bg {
        display: none !important;
    }

    .scan-line-effect {
        display: none !important;
    }


    /* ═══════════════════════════════════════════════════════════════
       2. ANALYTICS-PRO.HTML — ozel stiller
       ═══════════════════════════════════════════════════════════════ */
    .analytics-container {
        padding-top: 0 !important;
        padding: 4px !important;
    }

    .analytics-main {
        flex-direction: column !important;
        padding: 4px !important;
    }

    .sidebar-left,
    .sidebar-right {
        display: none !important;
    }

    .main-content {
        width: 100% !important;
        min-width: 0 !important;
        padding: 0 !important;
        max-width: 100% !important;
        height: auto !important;
        overflow: visible !important;
        flex-direction: column !important;
    }

    /* Analytics — tüm grid'ler tek sütun */
    .analytics-grid,
    .analytics-cards-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    /* Analytics sections */
    .section {
        max-height: none !important;
        height: auto !important;
        flex: none !important;
        overflow: visible !important;
    }

    .section-body {
        max-height: none !important;
        overflow: visible !important;
    }

    /* Metrics grid */
    .metrics-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    /* Charts grid */
    .charts-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    /* Analytics chart panels */
    .chart-panel {
        margin-bottom: 6px !important;
        width: 100% !important;
        overflow: hidden !important;
    }

    .chart-panel canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    .chart-panel .chart-header {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

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

    /* Performance cards */
    .performance-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    /* Risk meters */
    .risk-meter-container {
        flex-direction: column !important;
        gap: 8px !important;
    }

    /* Analytics tabloları */
    .analytics-table-wrapper {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Account cards */
    .account-cards {
        gap: 6px !important;
    }

    .account-card {
        padding: 10px !important;
    }

    /* Chart timeframes */
    .chart-timeframes,
    .chart-actions {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }

    /* Info cards grid */
    .info-cards,
    .info-grid {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }

    /* Correlation heatmap */
    .correlation-heatmap,
    .heatmap-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Signal strength */
    .signal-cards {
        grid-template-columns: 1fr !important;
        gap: 6px !important;
    }


    /* ═══════════════════════════════════════════════════════════════
       3. TELEGRAM-SIGNAL.HTML — ozel stiller
       ═══════════════════════════════════════════════════════════════ */
    .tg-main-container {
        padding: 6px !important;
        padding-top: 0 !important;
    }

    .tg-grid {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
        display: flex !important;
        flex-direction: column !important;
    }

    .tg-left-column,
    .tg-right-column {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important;
    }

    .tg-mini-stats {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    .tg-mini-stat {
        padding: 10px !important;
    }

    .tg-mini-stat .stat-value {
        font-size: 1rem !important;
    }

    .tg-mini-stat .stat-label {
        font-size: 0.62rem !important;
    }

    .tg-card {
        margin-bottom: 8px !important;
        border-radius: 12px !important;
    }

    .tg-card-header {
        padding: 10px 12px !important;
        flex-wrap: wrap;
        gap: 6px;
    }

    .tg-card-header h3 {
        font-size: 0.78rem !important;
    }

    .tg-card-body {
        padding: 10px 12px !important;
    }

    .tg-setup-row {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }

    .tg-input-group input,
    .tg-input-group textarea,
    .tg-input-group select {
        font-size: 16px !important;
        padding: 10px 12px !important;
    }

    .tg-input-group label {
        font-size: 0.72rem !important;
    }

    .tg-connect-btn,
    .tg-disconnect-btn,
    .tg-back-btn {
        padding: 12px 16px !important;
        font-size: 0.82rem !important;
        width: 100% !important;
    }

    .tg-step-buttons {
        flex-direction: column !important;
        gap: 8px !important;
    }

    .tg-auth-tabs {
        flex-direction: column !important;
        gap: 4px !important;
    }

    .tg-auth-tab {
        padding: 10px 14px !important;
        font-size: 0.78rem !important;
    }

    /* Bottom row */
    .tg-bottom-row {
        grid-template-columns: 1fr !important;
    }

    /* Position list */
    .tg-position-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        gap: 4px !important;
        padding: 4px !important;
    }

    .tg-position-tab {
        white-space: nowrap;
        font-size: 0.7rem !important;
        padding: 6px 10px !important;
    }

    .tg-position-item {
        padding: 10px !important;
    }

    /* Log container */
    .tg-log-container {
        max-height: 250px !important;
    }

    /* Execute button */
    .tg-execute-btn {
        padding: 14px 20px !important;
        font-size: 0.85rem !important;
    }

    /* AI Extractor */
    .tg-mapping-grid {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    /* Exchange selector */
    .tg-exchange-options {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    /* Signal preview */
    .tg-signal-preview {
        font-size: 0.75rem !important;
    }

    /* Channel list */
    .tg-channel-item {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }


    /* ═══════════════════════════════════════════════════════════════
       4. API-KEYS-NEW.HTML — ozel stiller
       ═══════════════════════════════════════════════════════════════ */
    .api-container {
        padding: 6px 8px 40px !important;
        max-width: 100% !important;
    }

    /* Page Hero */
    .page-hero {
        padding: 14px 16px !important;
        margin-bottom: 16px !important;
        border-radius: 14px !important;
    }

    .page-hero-top {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 10px !important;
    }

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

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

    .page-hero-icon {
        width: 40px !important;
        height: 40px !important;
        border-radius: 10px !important;
    }

    .page-hero-icon i {
        font-size: 1rem !important;
    }

    /* Exchange Grid */
    .exchange-grid {
        grid-template-columns: 1fr !important;
        gap: 10px !important;
    }

    .exchange-card {
        padding: 14px !important;
        border-radius: 12px !important;
    }

    .exchange-card-header {
        flex-wrap: wrap;
        gap: 8px;
    }

    .exchange-icon {
        width: 36px !important;
        height: 36px !important;
    }

    .exchange-name {
        font-size: 0.88rem !important;
    }

    .exchange-description {
        font-size: 0.72rem !important;
    }

    /* Key input groups */
    .key-input-group {
        flex-direction: column !important;
        gap: 6px !important;
    }

    .key-input-group input {
        font-size: 16px !important;
        width: 100% !important;
        padding: 10px 12px !important;
    }

    .key-input-group button {
        width: 100% !important;
        padding: 10px !important;
    }

    /* Form groups */
    .form-group {
        margin-bottom: 12px !important;
    }

    .form-group label {
        font-size: 0.72rem !important;
        margin-bottom: 4px !important;
    }

    .form-group input {
        padding: 10px 12px !important;
    }

    /* Security section */
    .security-info {
        padding: 12px !important;
        font-size: 0.72rem !important;
    }

    /* Exchange status badges */
    .exchange-status-badge {
        font-size: 0.62rem !important;
        padding: 3px 8px !important;
    }

    /* Action buttons row */
    .exchange-actions {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }

    .exchange-actions button {
        flex: 1 1 auto !important;
        min-width: 80px !important;
        font-size: 0.72rem !important;
        padding: 8px 12px !important;
    }
}


/* ═══════════════════════════════════════════════════════════════════════
   VERY SMALL SCREENS (≤380px)
   ═══════════════════════════════════════════════════════════════════════ */
@media (max-width: 380px) {

    .stats-grid,
    .metrics-grid,
    .metrics-row,
    .tg-mini-stats,
    .hft-metrics-grid,
    .performance-grid {
        grid-template-columns: 1fr !important;
    }

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

    .metric-card-combined {
        grid-column: span 1 !important;
    }

    .stat-card,
    .metric-card {
        padding: 8px !important;
    }

    .tg-mapping-grid,
    .tg-exchange-options {
        grid-template-columns: 1fr !important;
    }

    body {
        padding-top: 58px !important;
    }
}