/*
 * responsive.css — AInvestorView Mobile & Tablet Styles
 * Phase 1 pre-launch patch: media queries for ≤1024px (tablet) and ≤768px (mobile).
 * Uses real element IDs and classes from layout.py.
 */

/* ── Tablet: ≤1024px ──────────────────────────────────────────────────────── */
@media (max-width: 1024px) {
    /* Narrow sidebar */
    #sidebar {
        width: 56px !important;
        min-width: 56px !important;
        padding-top: 8px !important;
    }

    /* Tighter subnav */
    #subnav-strip {
        padding: 0 12px !important;
    }

    /* Reduce section padding */
    #section-dashboard,
    #section-portfolio,
    #section-watchlist,
    #section-markets,
    #section-ai {
        padding: 16px 16px !important;
    }

    /* Tighten card padding */
    .card-inner {
        padding: 12px 14px !important;
    }
}

/* ── Mobile: ≤768px ───────────────────────────────────────────────────────── */
@media (max-width: 768px) {
    /* Hide sidebar by default on mobile */
    #sidebar {
        display: none !important;
    }

    /* Hamburger button — shown only on mobile */
    #mobile-sidebar-toggle {
        display: flex !important;
    }

    /* Sidebar visible state — toggled via JS/Dash callback or CSS class */
    #sidebar.sidebar-open {
        display: flex !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        height: 100vh !important;
        z-index: 300 !important;
        box-shadow: 4px 0 24px rgba(0, 0, 0, 0.7) !important;
    }

    /* Reduce header padding and font sizes */
    #subnav-strip {
        padding: 0 8px !important;
        font-size: 11px !important;
    }

    /* Section padding */
    #section-dashboard,
    #section-portfolio,
    #section-watchlist,
    #section-markets,
    #section-ai {
        padding: 12px 10px !important;
    }

    /* Stack flex rows vertically (metric tiles, chart rows, bottom rows) */
    /* Targets div rows that use display:flex with flex-wrap:wrap */
    #section-dashboard > div[style*="display: flex"],
    #section-portfolio > div > div[style*="display: flex"],
    #section-markets > div[style*="display: flex"] {
        flex-direction: column !important;
    }

    /* Make charts full-width */
    .js-plotly-plot,
    .plotly-graph-div {
        width: 100% !important;
    }

    /* Metric tiles — full width stacked */
    /* These have flex:1 and minWidth:130px in layout.py */
    div[style*="minWidth: 130px"],
    div[style*="min-width: 130px"] {
        flex: 1 1 100% !important;
        min-width: 0 !important;
    }

    /* Card rows — stack vertically */
    div[style*="minWidth: 300px"],
    div[style*="min-width: 300px"],
    div[style*="minWidth: 280px"],
    div[style*="min-width: 280px"],
    div[style*="minWidth: 200px"],
    div[style*="min-width: 200px"],
    div[style*="minWidth: 220px"],
    div[style*="min-width: 220px"] {
        flex: 1 1 100% !important;
        min-width: 0 !important;
        width: 100% !important;
    }

    /* Holdings and watchlist tables — horizontal scroll */
    #holdings-table,
    div[id="holdings-table"],
    .dash-spreadsheet-container,
    .dash-table-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }

    /* Watchlist layout — stack left panel above chart */
    #section-watchlist > div > div[style*="display: flex"] {
        flex-direction: column !important;
        height: auto !important;
    }

    /* Watchlist left panel — full width */
    #section-watchlist div[style*="width: 230px"] {
        width: 100% !important;
    }

    /* Nav item labels — smaller font */
    #sidebar span[style*="fontSize: 9px"] {
        font-size: 8px !important;
    }

    /* Header title — smaller on mobile */
    span[style*="fontSize: 18px"][style*="letterSpacing"] {
        font-size: 14px !important;
    }

    /* Avatar dropdown positioned correctly on mobile */
    #avatar-dropdown {
        right: 0 !important;
        left: auto !important;
        max-width: 90vw !important;
    }

    /* Action bar (buy/sell inline) — stack vertically */
    div[style*="display: flex"][style*="alignItems: center"] > div[style*="display: flex"][style*="gap: 7px"] {
        flex-wrap: wrap !important;
    }

    /* AI chat height — shorter on mobile */
    #chat-messages {
        height: calc(100vh - 500px) !important;
        min-height: 200px !important;
    }
}

/* ── Hamburger toggle button (hidden on desktop, shown on mobile) ─────────── */
#mobile-sidebar-toggle {
    display: none;
    align-items: center;
    justify-content: center;
    background: transparent;
    border: 1px solid #2a3242;
    border-radius: 6px;
    color: #9ba6b8;
    font-size: 16px;
    cursor: pointer;
    padding: 4px 8px;
    margin-right: 8px;
    flex-shrink: 0;
}