/* ══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — MarketLens AI PWA
   ──────────────────────────────────────────────────────────────
   PWA-grade mobile experience:
     ✅ Bottom navigation bar (5 primary pages)
     ✅ Hamburger → slide-out drawer (full nav + settings)
     ✅ Sidebar completely hidden on mobile (replaced by drawer)
     ✅ Full app visible — no clipping
     ✅ Horizontal ticker/timeframe chip strips
     ✅ Touch targets ≥ 44px
     ✅ iOS safe area support
     ✅ Landscape support
     ✅ Dropdown text fix (all screens)
     ✅ Charts full-width
     ✅ Grids collapse 4→2→1
     ✅ iOS input zoom prevention
     ✅ Paper Trading Lab — tables, positions, equity curve
     ✅ Training Lab — tabs, quizzes, interactive elements
     ✅ Auto Scanner — signal rows, timing cards
     ✅ Plotly modebar — compact on mobile
   ══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   GLOBAL RESET
   ══════════════════════════════════════════════════════════════ */

html, body, #react-entry-point, #_dash-app-content {
    overflow-x: hidden !important;
    max-width: 100vw !important;
}

html {
    scroll-behavior: smooth;
    -webkit-text-size-adjust: 100%;
    -webkit-tap-highlight-color: transparent;
}

* { box-sizing: border-box !important; }


/* ══════════════════════════════════════════════════════════════
   DROPDOWN TEXT — Fix invisible text on dark background
   Applies on ALL screen sizes
   ══════════════════════════════════════════════════════════════ */

.Select-value-label,
.Select--single .Select-value .Select-value-label,
.VirtualizedSelectOption,
.dash-dropdown .Select-value-label {
    color: #e2e8f0 !important;
    font-weight: 500 !important;
}

.Select-placeholder { color: #64748b !important; }

.Select-control {
    background: rgba(15,23,42,0.85) !important;
    border: 1px solid rgba(99,102,241,0.22) !important;
    color: #e2e8f0 !important;
}

.Select-menu-outer {
    background: #0f1629 !important;
    border: 1px solid rgba(99,102,241,0.25) !important;
    border-radius: 12px !important;
    box-shadow: 0 8px 32px rgba(0,0,0,0.5) !important;
    z-index: 9999 !important;
}

.Select-option {
    background: transparent !important;
    color: #94a3b8 !important;
    font-size: 13px !important;
}
.Select-option:hover,
.Select-option.is-focused {
    background: rgba(99,102,241,0.12) !important;
    color: #e2e8f0 !important;
}
.Select-option.is-selected {
    background: rgba(99,102,241,0.20) !important;
    color: #a5b4fc !important;
    font-weight: 600 !important;
}

.Select-arrow { border-color: #6366f1 transparent transparent !important; }
.is-open .Select-arrow { border-color: transparent transparent #6366f1 !important; }

.Select-input input {
    color: #e2e8f0 !important;
    font-size: 14px !important;
}


/* ══════════════════════════════════════════════════════════════
   LANDING / LOGIN PAGE — Full-page scroll layout
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 900px) {
    .landing-wrapper {
        flex-direction: column !important;
        min-height: auto !important;
    }
    .landing-content-side {
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
    }
    .landing-content-side > div {
        padding: 28px 20px !important;
        max-height: none !important;
        overflow-y: visible !important;
    }
    .landing-login-panel {
        width: 100% !important;
        min-width: 0 !important;
        flex: none !important;
        border-left: none !important;
        border-top: 1px solid rgba(99,102,241,0.08) !important;
        padding: 28px 16px !important;
        max-height: none !important;
        overflow-y: visible !important;
    }
    .landing-login-panel > div {
        max-width: 420px !important;
        margin: 0 auto !important;
    }
}

/* Landing page (new full-page version) */
@media (max-width: 768px) {
    .lp-nav { padding: 0 16px !important; }
    .lp-nav-links { display: none !important; }
    .lp-stats-bar { grid-template-columns: repeat(2, 1fr) !important; }
    .lp-steps-grid { grid-template-columns: 1fr !important; }
    .lp-steps-grid::before { display: none !important; }
    .lp-features-grid { grid-template-columns: 1fr !important; }
    .lp-proof-grid { grid-template-columns: 1fr !important; }
    .lp-cta-features { flex-direction: column !important; align-items: center !important; gap: 12px !important; }
    .lp-cta-box { padding: 40px 20px !important; }
    .lp-hero { padding: 110px 0 50px !important; }
    .lp-auth-modal { 
        max-width: 95% !important; 
        padding: 28px 20px !important;
        margin: 0 auto !important;
    }
}

@media (max-width: 480px) {
    .landing-content-side > div { padding: 20px 14px !important; }
    .landing-login-panel { padding: 20px 12px !important; }
    .landing-login-panel > div {
        max-width: 100% !important;
        padding: 20px 14px !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   DASHBOARD LAYOUT — Root containers
   ══════════════════════════════════════════════════════════════ */

#_dash-app-content > div,
#_dash-app-content > div > div {
    min-height: 100vh;
    width: 100%;
}

.dashboard-wrapper {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
}

.main-content-area {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

/* Tablet: narrower sidebar */
@media (max-width: 1024px) {
    .sidebar-container {
        width: 220px !important;
        flex-shrink: 0 !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   MOBILE: BOTTOM NAV + HAMBURGER DRAWER
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── Hide desktop sidebar completely ── */
    .sidebar-container {
        position: fixed !important;
        left: -100% !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 300px !important;
        z-index: 9000 !important;
        transition: left 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background: rgba(8,12,22,0.98) !important;
        backdrop-filter: blur(24px) !important;
        box-shadow: none !important;
    }
    .sidebar-container.mobile-open {
        left: 0 !important;
        box-shadow: 8px 0 40px rgba(0,0,0,0.5) !important;
    }

    .sidebar-wrap {
        min-height: 100vh !important;
        padding: 16px !important;
        border-right: 1px solid rgba(99,102,241,0.08) !important;
        border-bottom: none !important;
        flex-direction: column !important;
        gap: 6px !important;
        overflow-y: auto !important;
    }

    /* Sidebar sub-text: show in drawer */
    .sidebar-sub {
        display: block !important;
        font-size: 10px !important;
        color: #4a5568 !important;
    }

    /* Section labels */
    .sidebar-section-label {
        font-size: 9px !important;
        margin: 12px 0 6px !important;
        letter-spacing: 2px !important;
    }

    /* Nav buttons in drawer — vertical stack */
    .nav-buttons-container {
        display: flex !important;
        flex-direction: column !important;
        gap: 3px !important;
        overflow: visible !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
    }

    .sidebar-nav-btn {
        padding: 12px 14px !important;
        font-size: 13px !important;
        font-weight: 500 !important;
        gap: 10px !important;
        white-space: nowrap !important;
        border-radius: 10px !important;
        min-height: 44px !important;
        justify-content: flex-start !important;
        border: none !important;
        background: transparent !important;
        transition: background 0.15s !important;
        width: 100% !important;
    }
    .sidebar-nav-btn:active {
        background: rgba(99,102,241,0.1) !important;
    }
    .sidebar-nav-btn span:first-child {
        font-size: 16px !important;
        min-width: 24px !important;
        text-align: center !important;
    }

    /* Active nav highlight in drawer */
    .sidebar-nav-btn[style*="background: rgba(99,102,241"] {
        background: rgba(99,102,241,0.1) !important;
        border-left: 3px solid #6366f1 !important;
    }

    /* Hide asset/MTF/model controls in sidebar drawer on mobile
       They are shown in .mobile-controls-strip in main content instead */
    .sidebar-model-checklist { display: none !important; }
    .sidebar-status-block { display: none !important; }
    .sidebar-asset-section { display: none !important; }
    .sidebar-mtf-section { display: none !important; }
    .sidebar-timeframe-section { display: none !important; }

    /* If user hasn't added wrapper classes, hide by component ID in sidebar */
    .sidebar-wrap #ticker-dropdown,
    .sidebar-wrap [id="ticker-dropdown"],
    .sidebar-wrap #mtf-checklist,
    .sidebar-wrap [id="mtf-checklist"],
    .sidebar-wrap #timeframe-dropdown,
    .sidebar-wrap [id="timeframe-dropdown"] {
        display: none !important;
    }
    /* Hide the labels/headers above those controls in sidebar */
    .sidebar-wrap .sidebar-section-label:has(+ #ticker-dropdown),
    .sidebar-wrap .sidebar-section-label:has(+ [id="ticker-dropdown"]),
    .sidebar-wrap div[style*="SELECT ASSET"],
    .sidebar-wrap div[style*="TIMEFRAME"],
    .sidebar-wrap div[style*="MULTI-TIMEFRAME"],
    .sidebar-wrap div[style*="Select Asset"],
    .sidebar-wrap div[style*="Timeframe"] {
        display: none !important;
    }

    /* Fallback: hide sidebar dropdowns in drawer (they live in main content now) */
    .sidebar-wrap .dash-dropdown,
    .sidebar-wrap .Select-control {
        min-height: 44px !important;
        width: 100% !important;
    }

    /* ── Sidebar overlay (backdrop) ── */
    .mobile-sidebar-overlay {
        position: fixed !important;
        inset: 0 !important;
        background: rgba(0,0,0,0.5) !important;
        z-index: 8999 !important;
        opacity: 0 !important;
        pointer-events: none !important;
        transition: opacity 0.3s !important;
    }
    .mobile-sidebar-overlay.active {
        opacity: 1 !important;
        pointer-events: all !important;
    }

    /* ── Stack layout vertically ── */
    .dashboard-wrapper {
        flex-direction: column !important;
        padding-top: 56px !important;   /* Space for fixed top bar */
        padding-bottom: 72px !important; /* Space for bottom nav */
        height: 100vh !important;
        overflow: hidden !important;
    }

    /* ── MOBILE TOP BAR ── */
    .mobile-top-bar {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 56px !important;
        z-index: 8000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 0 14px !important;
        background: rgba(6,10,18,0.94) !important;
        backdrop-filter: blur(20px) !important;
        border-bottom: 1px solid rgba(255,255,255,0.05) !important;
    }

    /* Hamburger button */
    .mobile-hamburger {
        width: 40px !important;
        height: 40px !important;
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        justify-content: center !important;
        gap: 5px !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        padding: 8px !important;
    }
    .mobile-hamburger span {
        display: block !important;
        width: 20px !important;
        height: 2px !important;
        background: #7b88a0 !important;
        border-radius: 2px !important;
        transition: all 0.3s !important;
    }

    /* Logo in top bar */
    .mobile-top-logo {
        display: flex !important;
        align-items: center !important;
        gap: 8px !important;
    }
    .mobile-top-logo-icon {
        width: 28px !important;
        height: 28px !important;
        background: linear-gradient(135deg, #6366f1 0%, #22d3ee 50%, #34d399 100%) !important;
        border-radius: 8px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        font-size: 13px !important;
    }
    .mobile-top-logo-text {
        font-weight: 700 !important;
        font-size: 15px !important;
        background: linear-gradient(135deg, #6366f1, #22d3ee, #34d399) !important;
        -webkit-background-clip: text !important;
        -webkit-text-fill-color: transparent !important;
        background-clip: text !important;
    }

    /* Plan badge in top bar */
    .mobile-plan-badge {
        padding: 3px 10px !important;
        border-radius: 6px !important;
        font-size: 9px !important;
        font-weight: 700 !important;
        letter-spacing: 1px !important;
        background: rgba(99,102,241,0.12) !important;
        color: #818cf8 !important;
        border: 1px solid rgba(99,102,241,0.2) !important;
    }

    /* ── BOTTOM NAV BAR ── */
    .mobile-bottom-nav {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        height: 72px !important;
        padding-bottom: env(safe-area-inset-bottom, 0px) !important;
        z-index: 8000 !important;
        display: flex !important;
        align-items: center !important;
        justify-content: space-around !important;
        background: rgba(6,10,18,0.95) !important;
        backdrop-filter: blur(20px) !important;
        border-top: 1px solid rgba(255,255,255,0.05) !important;
    }

    .mobile-nav-item {
        display: flex !important;
        flex-direction: column !important;
        align-items: center !important;
        gap: 2px !important;
        padding: 6px 10px !important;
        background: none !important;
        border: none !important;
        cursor: pointer !important;
        position: relative !important;
        transition: all 0.15s !important;
    }
    .mobile-nav-item .nav-icon {
        font-size: 20px !important;
        transition: transform 0.15s !important;
    }
    .mobile-nav-item .nav-label {
        font-size: 9px !important;
        font-weight: 600 !important;
        color: #4a5568 !important;
        letter-spacing: 0.3px !important;
    }
    .mobile-nav-item.active .nav-label {
        color: #818cf8 !important;
    }
    .mobile-nav-item.active::after {
        content: '' !important;
        position: absolute !important;
        top: -1px !important;
        left: 50% !important;
        transform: translateX(-50%) !important;
        width: 24px !important;
        height: 3px !important;
        background: #6366f1 !important;
        border-radius: 0 0 4px 4px !important;
    }
    .mobile-nav-item:active .nav-icon {
        transform: scale(0.9) !important;
    }

    /* Locked feature items in bottom nav */
    .mobile-nav-item.locked .nav-icon {
        opacity: 0.35 !important;
        filter: grayscale(1) !important;
    }
    .mobile-nav-item.locked .nav-label {
        color: #2d3748 !important;
    }
    .mobile-nav-item.locked::after {
        display: none !important;  /* no active indicator on locked items */
    }

    /* ── Content area adjustments ── */
    .main-content-area {
        padding: 14px 12px 16px !important;
        max-width: 100% !important;
        width: 100% !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        height: calc(100vh - 56px - 72px) !important;
    }

    /* Ensure content sections are visible — SAFE version
       (no longer forces display:block which breaks flex/grid layouts) */
    .main-content-area > div {
        visibility: visible !important;
        opacity: 1 !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
    }
}

/* Extra small phones */
@media (max-width: 480px) {
    .sidebar-container.mobile-open { width: 280px !important; }
    .sidebar-wrap { padding: 12px !important; }
    .sidebar-nav-btn {
        padding: 10px 12px !important;
        font-size: 12px !important;
    }
    .main-content-area { padding: 10px 8px !important; }
    .mobile-top-bar { padding: 0 10px !important; }
}


/* ══════════════════════════════════════════════════════════════
   HEADER CARD
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .header-card {
        padding: 14px 12px !important;
        border-radius: 14px !important;
        margin-bottom: 12px !important;
    }
    .header-card > div {
        flex-direction: column !important;
        align-items: flex-start !important;
        gap: 8px !important;
    }
    .header-title {
        font-size: 1.15rem !important;
        font-weight: 800 !important;
        letter-spacing: -0.3px !important;
    }
    .header-subtitle {
        font-size: 0.78rem !important;
        font-weight: 500 !important;
    }
    .header-card .ecard-badge {
        font-size: 10px !important;
        padding: 3px 10px !important;
    }

    .status-bar-row {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .status-bar-row > div {
        flex: 1 1 45% !important;
        min-width: 80px !important;
    }

    .ticker-info-row {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
}

@media (max-width: 480px) {
    .header-card { padding: 10px !important; }
    .header-title { font-size: 1.05rem !important; }
    .status-bar-row > div { flex: 1 1 100% !important; }
}


/* ══════════════════════════════════════════════════════════════
   MOBILE CONTROLS STRIP — Asset + MTF above Run Analysis
   ──────────────────────────────────────────────────────────────
   Add this container in app.py main content, above #predict-btn:
   
   html.Div(className="mobile-controls-strip", children=[
       html.Div(className="mcs-section", children=[
           html.Div("SELECT ASSET", className="mcs-label"),
           # your ticker-dropdown here (use id="mobile-ticker-dropdown" 
           # or duplicate the existing one)
       ]),
       html.Div(className="mcs-section", children=[
           html.Div("TIMEFRAMES", className="mcs-label"),
           # your mtf-checklist here
       ]),
   ])
   
   OR — simpler approach: wrap existing controls in a div with
   className="mobile-controls-strip" and use CSS to reposition.
   ══════════════════════════════════════════════════════════════ */

/* Desktop: hide mobile controls strip entirely */
.mobile-controls-strip {
    display: none !important;
}

@media (max-width: 768px) {
    /* Show the mobile controls strip */
    .mobile-controls-strip {
        display: flex !important;
        flex-direction: column !important;
        gap: 12px !important;
        padding: 14px !important;
        margin-bottom: 12px !important;
        background: rgba(15,23,42,0.6) !important;
        border: 1px solid rgba(99,102,241,0.1) !important;
        border-radius: 14px !important;
        backdrop-filter: blur(12px) !important;
        -webkit-backdrop-filter: blur(12px) !important;
    }

    /* Section within the strip */
    .mcs-section {
        display: flex !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    /* Labels */
    .mcs-label {
        font-size: 9px !important;
        font-weight: 700 !important;
        letter-spacing: 2px !important;
        text-transform: uppercase !important;
        color: rgba(148,163,184,0.6) !important;
        padding-left: 2px !important;
    }

    /* Dropdown inside mobile strip */
    .mobile-controls-strip .Select-control {
        min-height: 46px !important;
        border-radius: 10px !important;
        background: rgba(15,23,42,0.8) !important;
        border: 1px solid rgba(99,102,241,0.18) !important;
        transition: border-color 0.2s !important;
    }
    .mobile-controls-strip .Select-control:focus-within {
        border-color: rgba(99,102,241,0.45) !important;
        box-shadow: 0 0 0 3px rgba(99,102,241,0.08) !important;
    }

    /* MTF Checklist inside mobile strip — horizontal chip layout */
    .mobile-controls-strip .mtf-chip-row,
    .mobile-controls-strip [id*="mtf"] {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 8px !important;
    }

    /* MTF checklist items as chips */
    .mobile-controls-strip .dash-checklist label,
    .mobile-controls-strip [id*="mtf"] label {
        display: inline-flex !important;
        align-items: center !important;
        gap: 6px !important;
        padding: 8px 14px !important;
        background: rgba(15,23,42,0.7) !important;
        border: 1px solid rgba(99,102,241,0.15) !important;
        border-radius: 20px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        color: #94a3b8 !important;
        cursor: pointer !important;
        transition: all 0.15s ease !important;
        min-height: 36px !important;
        white-space: nowrap !important;
        user-select: none !important;
        -webkit-user-select: none !important;
    }
    .mobile-controls-strip .dash-checklist label:active,
    .mobile-controls-strip [id*="mtf"] label:active {
        transform: scale(0.96) !important;
    }
    .mobile-controls-strip .dash-checklist input:checked + span,
    .mobile-controls-strip [id*="mtf"] input:checked + span {
        color: #a5b4fc !important;
    }
    .mobile-controls-strip .dash-checklist label:has(input:checked),
    .mobile-controls-strip [id*="mtf"] label:has(input:checked) {
        background: rgba(99,102,241,0.12) !important;
        border-color: rgba(99,102,241,0.35) !important;
        color: #a5b4fc !important;
    }

    /* Divider between asset and MTF sections */
    .mcs-section + .mcs-section {
        padding-top: 12px !important;
        border-top: 1px solid rgba(99,102,241,0.06) !important;
    }
}

@media (max-width: 480px) {
    .mobile-controls-strip {
        padding: 10px !important;
        margin-bottom: 10px !important;
        border-radius: 12px !important;
        gap: 10px !important;
    }
    .mobile-controls-strip .dash-checklist label,
    .mobile-controls-strip [id*="mtf"] label {
        padding: 6px 10px !important;
        font-size: 11px !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   PREDICT / RUN ANALYSIS BUTTON — Sticky on mobile
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Wrapper for sticky predict button */
    .predict-btn-wrapper {
        position: sticky !important;
        top: 56px !important;  /* Below mobile top bar */
        z-index: 100 !important;
        padding: 10px 0 !important;
        background: linear-gradient(
            to bottom,
            rgba(6,10,18,0.98) 0%,
            rgba(6,10,18,0.95) 70%,
            transparent 100%
        ) !important;
        margin: 0 -12px !important;
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    #predict-btn {
        padding: 15px 20px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        width: 100% !important;
        min-height: 52px !important;
        letter-spacing: 0.3px !important;
        border-radius: 12px !important;
        /* Enhanced touch feedback */
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
        transition: transform 0.1s ease, box-shadow 0.2s ease !important;
    }
    #predict-btn:active {
        transform: scale(0.98) !important;
    }

    #bt-run-btn, #pf-optimize-btn {
        width: 100% !important;
        padding: 14px !important;
        min-height: 44px !important;
        touch-action: manipulation !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   CARDS — Base, Hero, Metric, etc.
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .ecard {
        padding: 14px !important;
        border-radius: 12px !important;
        margin-bottom: 10px !important;
    }
    .ecard:hover { transform: none !important; }

    .ecard-hero {
        padding: 20px 14px !important;
        border-radius: 14px !important;
    }
    .ecard-hero .hero-icon { font-size: 36px !important; }
    .ecard-hero .hero-title {
        font-size: 1.2rem !important;
        font-weight: 800 !important;
    }
    .ecard-hero .hero-sub {
        font-size: 0.82rem !important;
        font-weight: 500 !important;
    }

    .ecard-metric {
        padding: 12px 10px !important;
        border-radius: 10px !important;
    }
    .ecard-metric .metric-value {
        font-size: 1.05rem !important;
        font-weight: 700 !important;
        word-break: break-all !important;
    }
    .ecard-metric .metric-label {
        font-size: 9px !important;
        font-weight: 600 !important;
        text-transform: uppercase !important;
        letter-spacing: 0.4px !important;
    }
    .ecard-metric .metric-delta { font-size: 10px !important; }
    .ecard-metric:hover { transform: none !important; }

    .ecard-source-banner { padding: 12px 14px !important; }
    .ecard-source-banner h3 {
        font-size: 0.8rem !important;
        flex-wrap: wrap !important;
    }
    .ecard-source-banner p { font-size: 11px !important; }

    .ecard-section-header { margin: 16px 0 10px !important; }
    .ecard-section-header .section-icon { font-size: 18px !important; }
    .ecard-section-header .section-title {
        font-size: 0.92rem !important;
        font-weight: 700 !important;
    }

    .ecard-forecast-day { padding: 10px 8px !important; }
    .ecard-forecast-day .day-label { font-size: 10px !important; }
    .ecard-forecast-day .day-price { font-size: 0.95rem !important; }
    .ecard-forecast-day:hover { transform: none !important; }

    .ecard-trade-level { padding: 10px 12px !important; }
    .ecard-trade-level .level-label { font-size: 9px !important; }
    .ecard-trade-level .level-price { font-size: 0.95rem !important; }

    .ecard-risk { padding: 14px !important; }
    .ecard-risk .risk-title { font-size: 10px !important; }
    .ecard-risk .risk-value { font-size: 1.15rem !important; }

    .ecard-insight { padding: 12px 14px !important; }
    .ecard-insight p { font-size: 12px !important; }

    .status-card { padding: 8px 10px !important; }
    .status-card .status-label { font-size: 8px !important; }
    .status-card .status-value { font-size: 12px !important; }

    .scenario-card { padding: 14px !important; }
    .scenario-card .scenario-label { font-size: 10px !important; }
    .scenario-card .scenario-value { font-size: 1.1rem !important; }

    .checklist-item {
        padding: 8px 10px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 480px) {
    .ecard { padding: 10px !important; }
    .ecard-hero { padding: 16px 10px !important; }
    .ecard-hero .hero-icon { font-size: 28px !important; }
    .ecard-hero .hero-title { font-size: 1rem !important; }
    .ecard-metric .metric-value { font-size: 0.85rem !important; }
}


/* ══════════════════════════════════════════════════════════════
   GRIDS — Responsive column collapse
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .ecard-grid { gap: 8px !important; }
    .ecard-grid-2 { grid-template-columns: 1fr !important; }
    .ecard-grid-3,
    .ecard-grid-4,
    .ecard-grid-5 {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

@media (max-width: 480px) {
    .ecard-grid-2,
    .ecard-grid-3,
    .ecard-grid-4,
    .ecard-grid-5 {
        grid-template-columns: 1fr !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   TABS — Horizontal scroll on mobile
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .dash-tabs,
    .tab-container {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    .dash-tabs::-webkit-scrollbar,
    .tab-container::-webkit-scrollbar {
        display: none !important;
    }
    .dash-tabs .tab-parent,
    .tab-container {
        display: flex !important;
        flex-wrap: nowrap !important;
    }
    .dash-tab,
    .tab-container .tab,
    .tab {
        padding: 8px 14px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
    }
    .dash-tab--selected,
    .tab--selected {
        padding: 8px 14px !important;
        font-size: 11px !important;
    }
}

@media (max-width: 480px) {
    .dash-tab, .tab {
        padding: 7px 10px !important;
        font-size: 10px !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   CHARTS — Full width + Plotly modebar
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .dash-graph {
        width: 100% !important;
        overflow: hidden !important;
    }
    .js-plotly-plot, .plotly, .dash-graph {
        width: 100% !important;
    }
    .dash-graph > div { width: 100% !important; }
    .js-plotly-plot .plotly .main-svg { width: 100% !important; }

    /* Plotly modebar — compact and semi-transparent */
    .modebar-container {
        top: 4px !important;
        right: 4px !important;
    }
    .modebar-btn {
        font-size: 14px !important;
        padding: 4px !important;
    }
    .modebar-group {
        padding: 0 2px !important;
    }
    .modebar {
        opacity: 0.5 !important;
        transition: opacity 0.2s !important;
    }
    .modebar:active,
    .modebar:focus-within {
        opacity: 1 !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   DROPDOWNS — Mobile touch-friendly
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .Select-value-label {
        color: #e2e8f0 !important;
        font-weight: 500 !important;
        font-size: 14px !important;
    }
    .Select-menu-outer {
        z-index: 9999 !important;
        max-height: 50vh !important;
    }
    .Select-option {
        padding: 12px 14px !important;
        font-size: 13px !important;
        min-height: 44px !important;
        color: #94a3b8 !important;
    }
    .Select-option:hover,
    .Select-option.is-focused {
        color: #e2e8f0 !important;
    }
    .Select-control {
        min-height: 44px !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   INPUTS — Touch-friendly + prevent iOS zoom
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    button { min-height: 44px !important; }
    input[type="text"],
    input[type="email"],
    input[type="password"],
    input[type="number"],
    textarea,
    select,
    .Select-input input {
        font-size: 16px !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   PRICING PAGE — Single column on mobile
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    div[style*="gridTemplateColumns: repeat(auto-fit"] {
        grid-template-columns: 1fr !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   MODALS — Contact, Terms, Privacy, Disclaimer
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    #contact-modal > div {
        width: 95% !important;
        max-width: none !important;
        margin: 16px auto !important;
        padding: 24px 18px !important;
    }
    #contact-modal div[style*="display: flex"][style*="gap: 12px"] {
        flex-direction: column !important;
    }
    #contact-modal button { width: 100% !important; }

    #terms-panel > div,
    #privacy-panel > div {
        width: 95% !important;
        max-width: none !important;
        margin: 16px auto !important;
    }
    #terms-panel > div > div,
    #privacy-panel > div > div {
        max-height: 70vh !important;
        overflow-y: auto !important;
    }

    #disclaimer-container > div > div {
        width: 95% !important;
        max-width: none !important;
        max-height: 85vh !important;
        overflow-y: auto !important;
        padding: 20px 16px !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   USER / PLAN BADGE — Compact on mobile
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .sidebar-wrap > div[style*="borderRadius"][style*="background"] {
        padding: 10px 12px !important;
        margin-bottom: 8px !important;
    }
    #sidebar-logout-btn,
    #sidebar-upgrade-btn {
        padding: 6px 10px !important;
        font-size: 10px !important;
        min-height: 32px !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   MTF ANALYSIS — Indicators wrap
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .ecard[style*="borderLeft: 3px"] > div:last-child {
        flex-wrap: wrap !important;
        gap: 8px !important;
    }
    .ecard[style*="borderLeft: 3px"] > div:last-child > div {
        flex: 1 1 45% !important;
        min-width: 60px !important;
    }
}
@media (max-width: 480px) {
    .ecard[style*="borderLeft: 3px"] > div:last-child > div {
        flex: 1 1 100% !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   PAPER TRADING LAB — Tables, positions, equity curve
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Open positions & trade history tables — horizontal scroll */
    div[style*="overflowX"] table,
    .ecard table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        white-space: nowrap !important;
    }
    .ecard table td,
    .ecard table th {
        padding: 8px 10px !important;
        font-size: 11px !important;
        white-space: nowrap !important;
    }
    .ecard table th {
        font-size: 9px !important;
        letter-spacing: 0.5px !important;
        text-transform: uppercase !important;
    }

    /* Close button in position rows */
    .ecard table button {
        min-height: 32px !important;
        padding: 4px 8px !important;
        font-size: 11px !important;
    }

    /* Scan All / Reset buttons — stack vertically */
    div[style*="display: flex"][style*="gap"]:has(#paper-scan-btn):has(#paper-reset-btn) {
        flex-direction: column !important;
    }

    /* Paper trading metric cards — 2 columns */
    div[style*="gridTemplateColumns"][style*="minmax"]:has(.ecard-metric) {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }

    /* Equity curve chart */
    div[style*="Equity Curve"] .dash-graph,
    div:has(> div > span:first-child) .dash-graph {
        height: 250px !important;
    }

    /* Per-asset breakdown cards */
    div[style*="gridTemplateColumns"]:has(div[style*="ticker"]) {
        grid-template-columns: 1fr !important;
    }

    /* Close All Positions button */
    button[style*="rgba(239,68,68"] {
        width: 100% !important;
        min-height: 44px !important;
    }
}

@media (max-width: 480px) {
    /* Single column metrics on very small screens */
    div[style*="gridTemplateColumns"][style*="minmax"]:has(.ecard-metric) {
        grid-template-columns: 1fr !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   TRAINING LAB — Tabs, quizzes, interactive elements
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Training Lab tab strip — horizontal scroll */
    div[style*="display: flex"][style*="gap"]:has(button[style*="borderRadius: 10px"]) {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
        padding-bottom: 4px !important;
    }
    div[style*="display: flex"][style*="gap"]:has(button[style*="borderRadius: 10px"])::-webkit-scrollbar {
        display: none !important;
    }

    /* Quiz answer buttons — full width */
    div[style*="gap: 8px"] > button[style*="borderRadius"] {
        width: 100% !important;
        text-align: left !important;
        min-height: 48px !important;
        padding: 12px 14px !important;
    }

    /* Model architecture cards — single column */
    div[style*="gridTemplateColumns: repeat(auto-fill, minmax(260px"] {
        grid-template-columns: 1fr !important;
    }

    /* Flashcard / quiz containers */
    div[style*="maxWidth: 600px"] {
        max-width: 100% !important;
        padding: 0 !important;
    }

    /* Pattern trainer chart area */
    div[style*="minHeight: 300px"] {
        min-height: 220px !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   AUTO SCANNER — Signal rows, timing cards, controls
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Scanner signal rows — wrap content */
    div[style*="display: flex"][style*="alignItems: center"][style*="gap: 4px"][style*="padding: 4px 0"] {
        flex-wrap: wrap !important;
        gap: 6px !important;
        padding: 8px 0 !important;
    }

    /* Timing cards grid — 2 columns on mobile */
    div[style*="gridTemplateColumns: repeat(auto-fit, minmax(140px"] {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* Scanner control buttons — stack */
    div[style*="display: flex"][style*="gap"]:has(#admin-scanner-toggle-btn) {
        flex-wrap: wrap !important;
    }
    #admin-scanner-toggle-btn,
    #admin-scanner-manual-btn,
    #admin-telegram-toggle-btn {
        width: 100% !important;
        min-height: 44px !important;
    }

    /* Admin tab buttons — horizontal scroll */
    div[style*="display: flex"][style*="gap: 8px"][style*="flexWrap: wrap"]:has(button[class*="admin-tab"]) {
        flex-wrap: nowrap !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
    }
    div[style*="display: flex"][style*="gap: 8px"]:has(button[class*="admin-tab"])::-webkit-scrollbar {
        display: none !important;
    }
}

@media (max-width: 480px) {
    /* Single column timing cards */
    div[style*="gridTemplateColumns: repeat(auto-fit, minmax(140px"] {
        grid-template-columns: 1fr !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   SIGNAL PERFORMANCE TRACKER
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Performance stats cards — 2 col */
    div[style*="gridTemplateColumns"]:has(div[style*="textAlign: center"]) {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Signal history table */
    div[style*="overflowX: auto"] {
        -webkit-overflow-scrolling: touch !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   FTMO / PROP FIRM BRIDGE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* FTMO rule cards — single column */
    div[style*="gridTemplateColumns"]:has(div[style*="Daily Loss"]),
    div[style*="gridTemplateColumns"]:has(div[style*="Max Loss"]) {
        grid-template-columns: 1fr !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   ADMIN TABLES — Horizontal scroll
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    table {
        display: block !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
    }
    table td, table th {
        padding: 8px 10px !important;
        font-size: 12px !important;
        white-space: nowrap !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   PAYMENT SUCCESS PAGE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    div[style*="maxWidth: 480px"][style*="margin: 80px auto"] {
        margin: 40px 16px !important;
        max-width: 100% !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   UPGRADE PROMPT / LOCKED CARDS
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    div[style*="textAlign: center"][style*="padding: 80px"] {
        padding: 40px 16px !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   FOOTER — Offset for bottom nav
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .main-content-area > div:last-child > div {
        flex-direction: column !important;
        gap: 4px !important;
    }
    .main-content-area > div:last-child span,
    .main-content-area > div:last-child button {
        font-size: 11px !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   THIN SCROLLBAR
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    ::-webkit-scrollbar { width: 3px; height: 3px; }
    ::-webkit-scrollbar-track { background: transparent; }
    ::-webkit-scrollbar-thumb {
        background: rgba(99,102,241,0.2);
        border-radius: 4px;
    }
}


/* ══════════════════════════════════════════════════════════════
   SAFE AREAS — Notched phones (iPhone X+)
   ══════════════════════════════════════════════════════════════ */

@supports (padding: env(safe-area-inset-bottom)) {
    @media (max-width: 768px) {
        .mobile-bottom-nav {
            padding-bottom: env(safe-area-inset-bottom) !important;
            height: calc(72px + env(safe-area-inset-bottom)) !important;
        }
        .dashboard-wrapper {
            padding-bottom: calc(72px + env(safe-area-inset-bottom)) !important;
        }
        .main-content-area {
            height: calc(100vh - 56px - 72px - env(safe-area-inset-bottom)) !important;
        }
        .main-content-area {
            padding-left: calc(12px + env(safe-area-inset-left)) !important;
            padding-right: calc(12px + env(safe-area-inset-right)) !important;
        }
    }
}


/* ══════════════════════════════════════════════════════════════
   LANDSCAPE PHONE
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) and (max-height: 500px) and (orientation: landscape) {
    .mobile-top-bar { height: 44px !important; }
    .dashboard-wrapper { padding-top: 44px !important; }
    .mobile-bottom-nav { height: 56px !important; }
    .dashboard-wrapper { padding-bottom: 56px !important; }
    .main-content-area { padding: 8px 12px !important; }
    .main-content-area { height: calc(100vh - 44px - 56px) !important; }
}


/* ══════════════════════════════════════════════════════════════
   MOBILE UX ENHANCEMENTS — Smooth touch, better readability
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {

    /* ── Global touch improvements ── */
    a, button, .sidebar-nav-btn, .mobile-nav-item, .dash-tab, .tab,
    .Select-option, .dash-checklist label {
        -webkit-tap-highlight-color: transparent !important;
        touch-action: manipulation !important;
    }

    /* ── Smooth momentum scrolling everywhere ── */
    .main-content-area,
    .Select-menu-outer,
    .dash-table-container {
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-y: contain !important;
    }

    /* ── Loading / analysis state indicator ── */
    #predict-btn._dash-loading-state {
        opacity: 0.7 !important;
        pointer-events: none !important;
    }
    #predict-btn._dash-loading-state::after {
        content: '' !important;
        display: inline-block !important;
        width: 16px !important;
        height: 16px !important;
        border: 2px solid rgba(255,255,255,0.3) !important;
        border-top-color: #fff !important;
        border-radius: 50% !important;
        animation: mcs-spin 0.6s linear infinite !important;
        margin-left: 8px !important;
        vertical-align: middle !important;
    }
    @keyframes mcs-spin {
        to { transform: rotate(360deg); }
    }

    /* ── Better card spacing for thumb-zone scrolling ── */
    .ecard + .ecard { margin-top: 8px !important; }

    /* ── Readable text line lengths on mobile ── */
    .ecard-insight p,
    .ecard p,
    .scenario-card p {
        line-height: 1.55 !important;
        max-width: 100% !important;
    }

    /* ── Active states for interactive cards ── */
    .ecard-metric:active,
    .ecard-forecast-day:active,
    .ecard-trade-level:active,
    .scenario-card:active {
        transform: scale(0.98) !important;
        transition: transform 0.1s ease !important;
    }

    /* ── Swipeable horizontal sections (timeframe chips etc) ── */
    .chip-strip,
    .timeframe-chips,
    div[style*="display: flex"][style*="overflowX"] {
        scroll-snap-type: x mandatory !important;
        scroll-padding: 0 12px !important;
    }
    .chip-strip > *,
    .timeframe-chips > * {
        scroll-snap-align: start !important;
    }

    /* ── Focus ring for accessibility ── */
    button:focus-visible,
    .Select-control:focus-within,
    input:focus-visible {
        outline: 2px solid rgba(99,102,241,0.5) !important;
        outline-offset: 2px !important;
    }

    /* ── Reduced motion for those who prefer it ── */
    @media (prefers-reduced-motion: reduce) {
        *, *::before, *::after {
            animation-duration: 0.01ms !important;
            animation-iteration-count: 1 !important;
            transition-duration: 0.01ms !important;
        }
    }

    /* ── Empty state / no-data messaging ── */
    .ecard:empty::after {
        content: 'No data available' !important;
        display: block !important;
        text-align: center !important;
        padding: 20px !important;
        color: #4a5568 !important;
        font-size: 13px !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   MOBILE: QUICK ACTION FAB (optional — add in Python)
   ──────────────────────────────────────────────────────────────
   If you add a floating action button for quick-scan:
   html.Button("⚡", id="mobile-fab", className="mobile-fab")
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .mobile-fab {
        position: fixed !important;
        bottom: 84px !important;  /* Above bottom nav */
        right: 16px !important;
        width: 52px !important;
        height: 52px !important;
        border-radius: 50% !important;
        background: linear-gradient(135deg, #6366f1, #8b5cf6) !important;
        border: none !important;
        color: white !important;
        font-size: 22px !important;
        display: flex !important;
        align-items: center !important;
        justify-content: center !important;
        box-shadow: 0 4px 20px rgba(99,102,241,0.4) !important;
        z-index: 7000 !important;
        cursor: pointer !important;
        transition: transform 0.15s ease, box-shadow 0.2s ease !important;
    }
    .mobile-fab:active {
        transform: scale(0.92) !important;
        box-shadow: 0 2px 12px rgba(99,102,241,0.3) !important;
    }
}
@media (min-width: 769px) {
    .mobile-fab { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   MOBILE: TOAST / NOTIFICATION STYLING
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Notification toasts — mobile-optimized position */
    .dash-notification,
    div[class*="notification"],
    div[class*="toast"] {
        top: 60px !important;  /* Below top bar */
        left: 12px !important;
        right: 12px !important;
        max-width: calc(100vw - 24px) !important;
        border-radius: 12px !important;
        font-size: 13px !important;
        z-index: 9999 !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   MOBILE: SKELETON LOADING STATES (CSS-only)
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Pulse animation for loading cards */
    .ecard._dash-loading-state,
    .dash-graph._dash-loading-state {
        position: relative !important;
        overflow: hidden !important;
    }
    .ecard._dash-loading-state::after,
    .dash-graph._dash-loading-state::after {
        content: '' !important;
        position: absolute !important;
        inset: 0 !important;
        background: linear-gradient(
            90deg,
            transparent 0%,
            rgba(99,102,241,0.04) 50%,
            transparent 100%
        ) !important;
        animation: mcs-shimmer 1.5s infinite !important;
    }
    @keyframes mcs-shimmer {
        0% { transform: translateX(-100%); }
        100% { transform: translateX(100%); }
    }
}





/* ══════════════════════════════════════════════════════════════
   CAROUSEL — Mobile responsive
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    .lp-carousel-wrapper {
        max-height: 240px !important;
        border-radius: 12px !important;
    }
    .lp-carousel-slide img {
        height: 240px !important;
        object-fit: cover !important;
        object-position: center top !important;
    }
    .lp-carousel-caption {
        padding: 12px 16px !important;
    }
    .lp-carousel-caption-sub {
        display: none !important;
    }
    .lp-carousel-caption-text {
        font-size: 12px !important;
    }
    .lp-carousel-dots {
        gap: 6px !important;
    }
    .lp-carousel-dot {
        width: 6px !important;
        height: 6px !important;
    }
}

@media (max-width: 480px) {
    .lp-carousel-wrapper {
        max-height: 200px !important;
    }
    .lp-carousel-slide img {
        height: 200px !important;
    }
}

/* ══════════════════════════════════════════════════════════════
   PRINT
   ══════════════════════════════════════════════════════════════ */

@media print {
    .sidebar-container { display: none !important; }
    .mobile-top-bar { display: none !important; }
    .mobile-bottom-nav { display: none !important; }
    .main-content-area {
        padding: 0 !important;
        max-width: 100% !important;
    }
    .ecard { break-inside: avoid; }
}


/* ══════════════════════════════════════════════════════════════
   DESKTOP: Hide mobile-only elements
   ══════════════════════════════════════════════════════════════ */

@media (min-width: 769px) {
    .mobile-top-bar { display: none !important; }
    .mobile-bottom-nav { display: none !important; }
    .mobile-sidebar-overlay { display: none !important; }
}


/* ══════════════════════════════════════════════════════════════
   DEFENSIVE OVERRIDES — Ensure sidebar_enhanced.css cannot
   override mobile drawer behavior (it loads after responsive.css
   alphabetically). These rules use higher specificity.
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    /* Force sidebar off-screen by default — triple class for specificity */
    .dashboard-wrapper .sidebar-container {
        position: fixed !important;
        left: -100% !important;
        top: 0 !important;
        bottom: 0 !important;
        width: 300px !important;
        z-index: 9000 !important;
        transition: left 0.3s cubic-bezier(0.16, 1, 0.3, 1) !important;
        overflow-y: auto !important;
        -webkit-overflow-scrolling: touch !important;
        background: rgba(8,12,22,0.98) !important;
        backdrop-filter: blur(24px) !important;
        box-shadow: none !important;
        border-right: none !important;
        min-width: 0 !important;
        max-width: 300px !important;
        flex: none !important;
    }

    /* When toggled open */
    .dashboard-wrapper .sidebar-container.mobile-open {
        left: 0 !important;
        box-shadow: 8px 0 40px rgba(0,0,0,0.5) !important;
    }

    /* Ensure sidebar doesn't push content */
    .dashboard-wrapper {
        flex-direction: column !important;
    }

    /* Ensure overlay works */
    .mobile-sidebar-overlay {
        display: block !important;
        position: fixed !important;
        inset: 0 !important;
        z-index: 8999 !important;
    }
}