/* ══════════════════════════════════════════════════════════════
   MOBILE RESPONSIVE — MarketLens AI (Full Rewrite)
   ──────────────────────────────────────────────────────────────
   Fixes:
     ✅ Full app visible on mobile (not just Run Analysis button)
     ✅ Sidebar collapses to scrollable top nav strip
     ✅ Dropdown text readable (white on dark)
     ✅ Asset selection dropdown fully visible
     ✅ All nav buttons accessible via horizontal scroll
     ✅ Charts full-width with correct aspect ratio
     ✅ Grids collapse 4→2→1 column
     ✅ Tabs scroll horizontally
     ✅ Touch targets ≥44px
     ✅ iOS zoom prevention on inputs
     ✅ Safe area support (notched phones)
     ✅ Landscape phone support
   ══════════════════════════════════════════════════════════════ */


/* ══════════════════════════════════════════════════════════════
   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 (this was the root cause)
   ══════════════════════════════════════════════════════════════ */

/* Selected value text — was rendering black on dark bg */
.Select-value-label,
.Select--single .Select-value .Select-value-label,
.VirtualizedSelectOption,
.dash-dropdown .Select-value-label {
    color: #e2e8f0 !important;
    font-weight: 500 !important;
}

/* Placeholder text */
.Select-placeholder {
    color: #64748b !important;
}

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

/* Dropdown menu outer panel */
.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;
}

/* Each option in the list */
.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;
}

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

/* Search input inside dropdown */
.Select-input input {
    color: #e2e8f0 !important;
    font-size: 14px !important;
}


/* ══════════════════════════════════════════════════════════════
   LANDING / LOGIN PAGE
   ══════════════════════════════════════════════════════════════ */

@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;
    }
}

@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;
    }
    .landing-login-panel div[style*="display: flex"] {
        flex-wrap: wrap !important;
    }
}


/* ══════════════════════════════════════════════════════════════
   DASHBOARD LAYOUT — The main fix for "only button visible"
   Forces the full app to render, not just the predict button
   ══════════════════════════════════════════════════════════════ */

/* Make sure the root layout fills the screen */
#_dash-app-content > div,
#_dash-app-content > div > div {
    min-height: 100vh;
    width: 100%;
}

/* Dashboard wrapper: sidebar + content side by side on desktop */
.dashboard-wrapper {
    display: flex !important;
    flex-direction: row !important;
    width: 100% !important;
    min-height: 100vh !important;
    overflow-x: hidden !important;
}

/* Main content must be visible and scrollable */
.main-content-area {
    flex: 1 1 auto !important;
    min-width: 0 !important;
    overflow-x: hidden !important;
    overflow-y: auto !important;
}

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

/* ── MOBILE: Stack sidebar above content ── */
@media (max-width: 768px) {

    /* Stack vertically */
    .dashboard-wrapper {
        flex-direction: column !important;
    }

    /* Sidebar becomes compact horizontal top bar */
    .sidebar-container {
        width: 100% !important;
        height: auto !important;
        max-height: none !important;
        position: relative !important;
        overflow: visible !important;
        flex-shrink: 0 !important;
        z-index: 200 !important;
    }

    .sidebar-wrap {
        min-height: auto !important;
        padding: 10px 12px 8px !important;
        border-right: none !important;
        border-bottom: 1px solid rgba(99,102,241,0.12) !important;
        flex-direction: column !important;
        gap: 6px !important;
    }

    /* Logo: compact but bold */
    .sidebar-logo {
        font-size: 16px !important;
        font-weight: 800 !important;
        letter-spacing: -0.3px !important;
    }
    .sidebar-sub { display: none !important; }

    /* Section labels: smaller */
    .sidebar-section-label {
        font-size: 8px !important;
        margin: 4px 0 3px !important;
        letter-spacing: 1.5px !important;
    }

    /* ── Navigation: visible 2-column grid instead of hidden scroll strip ── */
    .nav-buttons-container {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
        overflow: visible !important;
        mask-image: none !important;
        -webkit-mask-image: none !important;
        padding-bottom: 6px !important;
    }
    .nav-buttons-container::-webkit-scrollbar { display: none !important; }

    /* Nav buttons: bold, tappable, clearly labeled */
    .sidebar-nav-btn {
        padding: 10px 12px !important;
        font-size: 12px !important;
        font-weight: 600 !important;
        gap: 6px !important;
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        border-radius: 10px !important;
        min-height: 44px !important;
        justify-content: flex-start !important;
        border: 1px solid rgba(99,102,241,0.15) !important;
        background: rgba(15,23,42,0.5) !important;
        transition: background 0.15s !important;
    }
    .sidebar-nav-btn:active {
        background: rgba(99,102,241,0.18) !important;
    }
    .sidebar-nav-btn span:first-child {
        font-size: 15px !important;
        min-width: 20px !important;
    }
    /* Active nav button glow */
    .sidebar-nav-btn[style*="background: rgba(99,102,241"] {
        border-color: rgba(99,102,241,0.4) !important;
        box-shadow: 0 0 12px rgba(99,102,241,0.15) !important;
    }

    /* Quick select pills */
    .sidebar-quick-btn {
        padding: 4px 10px !important;
        font-size: 10px !important;
    }

    /* Asset selection dropdown — ensure visible */
    .sidebar-wrap .dash-dropdown,
    .sidebar-wrap .Select-control {
        min-height: 40px !important;
        width: 100% !important;
    }

    /* Hide non-essential sidebar sections on mobile */
    .sidebar-model-checklist { display: none !important; }
    .sidebar-status-block { display: none !important; }

    /* Content area: full width, properly padded */
    .main-content-area {
        padding: 14px 10px !important;
        max-width: 100% !important;
        width: 100% !important;
        display: block !important;
        visibility: visible !important;
        overflow-y: auto !important;
    }

    /* Ensure ALL content sections are visible — critical fix */
    .main-content-area > *,
    .main-content-area > div,
    .main-content-area > div > div {
        display: block !important;
        visibility: visible !important;
        opacity: 1 !important;
        max-width: 100% !important;
    }

    /* Override any fixed heights that could clip content */
    .main-content-area > div[style*="height"] {
        height: auto !important;
        min-height: 0 !important;
    }
}

/* Extra small phones */
@media (max-width: 480px) {
    .sidebar-wrap { padding: 8px 10px 6px !important; }
    .nav-buttons-container {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 5px !important;
    }
    .sidebar-nav-btn {
        padding: 8px 10px !important;
        font-size: 11px !important;
        font-weight: 600 !important;
        min-height: 40px !important;
    }
    .sidebar-nav-btn span:first-child {
        font-size: 13px !important;
    }
    .sidebar-logo { font-size: 13px !important; }
    .main-content-area { padding: 10px 8px !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.2rem !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: wrap on mobile */
    .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 bar */
    .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;
        font-weight: 800 !important;
    }
    .status-bar-row > div { flex: 1 1 100% !important; }
}


/* ══════════════════════════════════════════════════════════════
   PREDICT / RUN ANALYSIS BUTTON
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    #predict-btn {
        padding: 14px 20px !important;
        font-size: 15px !important;
        font-weight: 700 !important;
        width: 100% !important;
        min-height: 50px !important;
        letter-spacing: 0.3px !important;
    }
    #bt-run-btn, #pf-optimize-btn {
        width: 100% !important;
        padding: 14px !important;
        min-height: 44px !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;
        letter-spacing: -0.2px !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
   ══════════════════════════════════════════════════════════════ */

@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; }
}


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

@media (max-width: 768px) {
    /* Fix the original black text bug from old responsive.css */
    .Select-value-label {
        color: #e2e8f0 !important;  /* was #0a0a0a — caused invisible text */
        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;
    }
    /* Prevent iOS zoom on focus (needs font-size 16px) */
    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;
    }
}


/* ══════════════════════════════════════════════════════════════
   CONTACT MODAL
   ══════════════════════════════════════════════════════════════ */

@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; }
}


/* ══════════════════════════════════════════════════════════════
   DISCLAIMER OVERLAY
   ══════════════════════════════════════════════════════════════ */

@media (max-width: 768px) {
    #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: 8px 10px !important;
        margin-bottom: 6px !important;
    }
    #sidebar-logout-btn,
    #sidebar-upgrade-btn {
        padding: 4px 8px !important;
        font-size: 9px !important;
        min-height: 28px !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;
    }
}


/* ══════════════════════════════════════════════════════════════
   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
   ══════════════════════════════════════════════════════════════ */

@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 — Mobile global
   ══════════════════════════════════════════════════════════════ */

@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) {
        .sidebar-wrap {
            padding-left: calc(12px + env(safe-area-inset-left)) !important;
            padding-right: calc(12px + env(safe-area-inset-right)) !important;
        }
        .main-content-area {
            padding-bottom: calc(16px + env(safe-area-inset-bottom)) !important;
            padding-left: calc(10px + env(safe-area-inset-left)) !important;
            padding-right: calc(10px + env(safe-area-inset-right)) !important;
        }
    }
}


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

@media (max-width: 768px) and (max-height: 500px) and (orientation: landscape) {
    .sidebar-container {
        max-height: 110px !important;
        overflow-y: auto !important;
    }
    .sidebar-wrap { padding: 6px 12px 4px !important; }
    .main-content-area { padding: 10px 12px !important; }
}


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

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