/* ============================================================
   RAPTOR TERMINAL — Mobile Responsive Overrides
   ============================================================
   
   Provides a usable mobile experience:
   - Chart takes full width
   - Tabs for switching between panels
   - Bottom navigation bar
   - Touch-optimized controls
*/

/* Mobile Bottom Navigation */
.mobile-bottom-nav {
    display: none;
    position: fixed;
    bottom: 0; left: 0; right: 0;
    height: 52px;
    background: var(--bg-2);
    border-top: 1px solid var(--border);
    z-index: 100;
    padding: 0 4px;
    align-items: center;
    justify-content: space-around;
}

.mobile-nav-btn {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    background: none;
    border: none;
    color: var(--text-3);
    cursor: pointer;
    padding: 6px 12px;
    font-size: 9px;
    font-family: inherit;
    min-width: 52px;
    transition: color 0.15s;
}

.mobile-nav-btn.active { color: var(--blue); }
.mobile-nav-btn:active { color: var(--text-1); }
.mobile-nav-btn .nav-icon { font-size: 18px; line-height: 1; }

@media (max-width: 900px) {
    .mobile-bottom-nav { display: flex; }
    
    /* App layout adjustments for bottom nav */
    .app {
        padding-bottom: 52px;
    }
    
    /* Main grid becomes single column */
    .main {
        grid-template-columns: 1fr !important;
        grid-template-rows: 1fr;
        overflow: hidden;
    }
    
    /* All panels hidden by default, shown via mobile nav */
    .main > .panel { 
        display: none !important;
        min-height: unset;
        border-bottom: none;
    }
    
    /* Chart always visible on mobile */
    .main > .panel.chart-panel {
        display: flex !important;
        min-height: calc(100vh - 100px);
    }
    
    /* When mobile tab is active, show that panel */
    .main > .panel.mobile-active {
        display: flex !important;
        position: fixed;
        top: 48px;
        left: 0; right: 0;
        bottom: 52px;
        z-index: 90;
        background: var(--bg-1);
        overflow-y: auto;
    }
    
    /* Chart toolbar adjustments */
    .chart-toolbar {
        height: 36px;
        padding: 0 6px;
        overflow-x: auto;
        scrollbar-width: none;
        gap: 2px;
    }
    .chart-toolbar::-webkit-scrollbar { display: none; }
    
    .tf-btns { 
        flex-shrink: 0;
        gap: 1px;
    }
    
    .tf-btn {
        padding: 6px 8px !important;
        font-size: 10px !important;
        min-width: 32px;
        min-height: 32px;
    }
    
    .chart-opts {
        display: none; /* Hide chart options on mobile, too small */
    }
    
    /* Indicators dropdown: full screen on mobile */
    .indicators-menu {
        position: fixed !important;
        top: 48px !important;
        left: 0 !important;
        right: 0 !important;
        bottom: 52px !important;
        width: 100% !important;
        max-height: none !important;
        border-radius: 0 !important;
        z-index: 200;
    }
    
    /* Drawing toolbar: horizontal on mobile */
    .drawing-toolbar {
        flex-direction: row;
        width: 100%;
        height: 32px;
        padding: 2px 6px;
        border-right: none;
        border-bottom: 1px solid var(--border);
        overflow-x: auto;
    }
    
    .drawing-toolbar-sep {
        width: 1px;
        height: 20px;
        margin: 0 4px;
    }
    
    /* Chart area wrapper: column on mobile */
    .chart-area-wrapper {
        flex-direction: column !important;
    }
    
    /* Header simplification */
    .header {
        height: 48px;
        padding: 0 8px;
    }
    
    .logo { font-size: 13px; }
    
    .symbol-btn {
        padding: 4px 8px;
    }
    
    /* Modals: full screen on mobile */
    .alerts-modal,
    .bot-perf-content {
        position: fixed !important;
        top: 0 !important; left: 0 !important;
        right: 0 !important; bottom: 0 !important;
        width: 100% !important;
        max-width: 100% !important;
        max-height: 100% !important;
        border-radius: 0 !important;
    }
    
    /* DOM rows larger for touch */
    .dom-row {
        height: 28px !important;
    }
    
    .dom-qty, .dom-price-cell, .dom-cum {
        font-size: 10px !important;
    }
    
    /* Trades list: larger rows */
    .trade {
        padding: 8px !important;
        font-size: 11px !important;
    }
    
    /* Indicator panels on mobile: taller */
    .indicator-panel {
        height: 130px !important;
    }
    
    /* Layout resize handles: hidden on mobile */
    .layout-resize-handle { display: none; }
}

@media (max-width: 480px) {
    .tf-btn {
        padding: 5px 6px !important;
        font-size: 9px !important;
        min-width: 28px;
    }
    
    .mobile-nav-btn {
        padding: 4px 8px;
        font-size: 8px;
    }
    
    .mobile-nav-btn .nav-icon { font-size: 16px; }
}