/* ================================================
   AlphaTerminal — Mobile Responsive Overrides
   Baseline: 375px (iPhone SE). Loaded AFTER design-system.css.
   Fixes: nav overflow, grid collapse, table scroll, tap targets,
   modal containment, sidebar collapse, toast positioning.
   ================================================ */

/* ---- 600px: tablets & large phones ---- */
@media (max-width: 600px) {
    /* Force multi-column grids to max 2 columns */
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Sidebar layouts collapse */
    .content-sidebar,
    .sidebar {
        display: none !important;
    }

    /* Fixed sidebar layouts become single column */
    .content-layout {
        display: flex !important;
        flex-direction: column !important;
    }

    .content-main,
    .main-content {
        width: 100% !important;
        max-width: 100% !important;
    }
}

/* ---- 480px: phones ---- */
@media (max-width: 480px) {
    /* === NAVIGATION === */
    /* Hide horizontal nav links, show hamburger toggle */
    .nav-links,
    .suite-apps,
    .suite-nav,
    .header-right .nav-link,
    nav .nav-links {
        display: none !important;
    }

    /* Ensure mobile toggle is visible */
    .nav-toggle,
    .mobile-menu-toggle,
    .menu-toggle {
        display: flex !important;
        align-items: center;
        justify-content: center;
        min-width: 44px;
        min-height: 44px;
        font-size: 22px;
        background: none;
        border: 1px solid var(--border, #222233);
        border-radius: 6px;
        color: var(--text, #e8e8f0);
        cursor: pointer;
    }

    /* When nav links are shown via JS toggle */
    .nav-links.mobile-open,
    .suite-apps.mobile-open {
        display: flex !important;
        flex-direction: column !important;
        position: absolute;
        top: 100%;
        left: 0;
        right: 0;
        background: var(--bg-card, #12121a);
        border-bottom: 1px solid var(--border, #222233);
        padding: 12px 16px;
        gap: 8px;
        z-index: 150;
    }

    .nav-links.mobile-open a,
    .suite-apps.mobile-open a {
        padding: 12px 16px;
        min-height: 44px;
        display: flex;
        align-items: center;
        border-radius: 6px;
    }

    .nav-links.mobile-open a:hover,
    .suite-apps.mobile-open a:hover {
        background: var(--bg-card-hover, #1a1a26);
    }

    /* Nav base styling */
    nav,
    .nav,
    .header,
    .topnav,
    .suite-header,
    .hud-header,
    .topbar {
        padding: 10px 12px !important;
        flex-wrap: wrap;
        gap: 8px;
        position: relative;
    }

    /* Nav divider hidden on mobile */
    .suite-divider {
        display: none;
    }

    /* === SECTIONS & CONTAINERS === */
    .section,
    .page,
    .main,
    .container {
        padding-left: 12px !important;
        padding-right: 12px !important;
    }

    .section {
        padding-top: 24px !important;
        padding-bottom: 24px !important;
    }

    /* === GRIDS === */
    /* Force all multi-column grids to single column */
    .grid-cols-2,
    .grid-cols-3,
    .grid-cols-4 {
        grid-template-columns: 1fr !important;
    }

    /* Cards in grid get less padding */
    .card,
    .card-glass {
        padding: 16px !important;
    }

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

    /* === TABLES — horizontal scroll === */
    .table-wrap,
    .table-container,
    .table-scroll {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        max-width: 100vw;
    }

    table {
        font-size: 11px !important;
        min-width: 500px;
    }

    th, td {
        padding: 6px 8px !important;
        white-space: nowrap;
    }

    /* === MODALS — full width on mobile === */
    .modal {
        width: calc(100vw - 24px) !important;
        max-width: calc(100vw - 24px) !important;
        max-height: 85vh !important;
        padding: 16px !important;
        margin: 12px;
        border-radius: 12px;
    }

    .modal-overlay {
        padding: 12px !important;
    }

    /* === TOAST NOTIFICATIONS === */
    .toast-container {
        left: 12px !important;
        right: 12px !important;
        bottom: 16px !important;
    }

    .toast {
        min-width: 0 !important;
        max-width: 100% !important;
        width: 100%;
    }

    /* === BUTTONS — touch targets === */
    .btn,
    button,
    .cta-btn,
    .btn-primary,
    .btn-outline,
    .btn-secondary,
    .btn-ghost,
    .auth-btn,
    .back-btn {
        min-height: 44px;
        min-width: 44px;
        font-size: 13px;
    }

    /* Full-width CTA buttons on mobile */
    .btn-lg,
    .cta-btn-lg {
        width: 100%;
    }

    /* === TYPOGRAPHY === */
    h1, .section-title {
        font-size: clamp(24px, 7vw, 36px) !important;
        word-break: break-word;
    }

    h2 {
        font-size: clamp(20px, 5vw, 28px) !important;
    }

    h3 {
        font-size: clamp(16px, 4vw, 22px) !important;
    }

    .section-subtitle {
        font-size: 15px !important;
    }

    /* Prevent text overflow */
    p, span, div, li, a, td, th, label {
        overflow-wrap: break-word;
        word-wrap: break-word;
    }

    /* Stat highlights smaller on mobile */
    .stat-highlight {
        font-size: 24px !important;
    }

    /* === SIDEBAR LAYOUTS === */
    .sidebar,
    .content-sidebar {
        display: none !important;
    }

    /* Fixed layouts become scrollable */
    .content-layout {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        right: auto !important;
        bottom: auto !important;
        height: auto !important;
        flex-direction: column !important;
    }

    .content-main {
        width: 100% !important;
        overflow-y: visible !important;
        height: auto !important;
    }

    /* === FORMS === */
    input, textarea, select {
        font-size: 16px !important; /* prevents iOS zoom */
        min-height: 44px;
    }

    /* === FLEX ROWS — wrap on mobile === */
    .flex-row,
    .header-right,
    .nav-right,
    .modal-footer,
    .btn-group,
    .actions,
    .controls,
    .filter-bar,
    .toolbar {
        flex-wrap: wrap !important;
        gap: 8px;
    }

    /* === BADGES & TAGS === */
    .badge, .tag, .tier-badge, .nav-tag {
        font-size: 10px !important;
        padding: 3px 8px !important;
    }

    /* === PRICING GRIDS === */
    .pricing-grid,
    .plan-grid,
    .plans {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }

    /* === HIDE DECORATIVE ELEMENTS === */
    .grid-bg,
    .cockpit-bg,
    .data-rain,
    .glow-orb {
        display: none !important;
    }

    /* === FIXED-PIXEL GRID LAYOUTS (class-based overrides) ===
       These target grids defined in <style> blocks that attribute
       selectors can't reach. */
    .main,
    .main-grid,
    .sim-grid,
    .layout,
    .page-grid,
    .content-grid,
    .app-layout,
    .screener-layout,
    .docs-layout {
        grid-template-columns: 1fr !important;
    }

    /* Two-column grids with fixed left panel */
    .main-content {
        grid-template-columns: 1fr !important;
    }

    /* Collapse multi-column stat/data grids */
    .stats-grid,
    .stat-grid,
    .kpi-grid,
    .metrics-grid,
    .tier-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }

    /* Fixed-pixel table-like grids (e.g. 80px 100px 80px) */
    .staking-row,
    .data-table-row,
    .order-row,
    .trade-row,
    .position-row {
        grid-template-columns: 1fr 1fr !important;
        gap: 4px !important;
    }

    /* Right panels / sidebars in grid layouts */
    .right-panel {
        display: none !important;
    }

    /* 100vh fixes for mobile dynamic chrome */
    .layout,
    .app-layout,
    .docs-layout,
    .screener-layout {
        min-height: auto !important;
        height: auto !important;
    }

    /* Input min-width overrides */
    input[style*="min-width"],
    .search-input,
    .compare-input {
        min-width: auto !important;
        width: 100% !important;
    }

    /* Inline grid 1fr 1fr 1fr patterns → 1 column */
    [style*="grid-template-columns:1fr 1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr 1fr"],
    [style*="grid-template-columns:1fr 1fr 1fr 1fr"],
    [style*="grid-template-columns: 1fr 1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Inline grid with fixed pixel columns → overflow protection */
    [style*="grid-template-columns:80px"],
    [style*="grid-template-columns: 80px"],
    [style*="grid-template-columns:40px 1fr"],
    [style*="grid-template-columns: 40px 1fr"],
    [style*="grid-template-columns:36px"],
    [style*="grid-template-columns: 36px"] {
        grid-template-columns: 1fr !important;
        gap: 4px !important;
    }

    /* Inline flex nowrap → allow wrapping */
    [style*="flex-wrap:nowrap"],
    [style*="flex-wrap: nowrap"] {
        flex-wrap: wrap !important;
    }

    /* Inline min-width on any element → auto */
    [style*="min-width:260"],
    [style*="min-width: 260"],
    [style*="min-width:280"],
    [style*="min-width: 280"],
    [style*="min-width:300"],
    [style*="min-width: 300"],
    [style*="min-width:320"],
    [style*="min-width: 320"] {
        min-width: auto !important;
        width: 100% !important;
    }

    /* Radar/chart fixed-size elements */
    .radar-wrap,
    .chart-wrap {
        width: 80px !important;
        height: 80px !important;
    }

    /* QR code sizing */
    .qr-section canvas,
    .qr-box {
        width: 100px !important;
        height: 100px !important;
    }

    /* === CHARTS/GRAPHS === */
    canvas {
        max-width: 100% !important;
        height: auto !important;
    }

    /* === STATS STRIPS/ROWS === */
    .stats-strip,
    .stats-row,
    .stat-cards,
    .metrics-row,
    .kpi-row {
        display: grid !important;
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 8px !important;
    }

    /* === LEADERBOARD / DATA LISTS === */
    .leaderboard-row,
    .data-row,
    .list-item {
        flex-wrap: wrap;
        padding: 10px !important;
        gap: 6px;
    }

    /* === TABS === */
    .tabs,
    .tabs-wrap,
    .tab-bar {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap;
        gap: 4px !important;
        padding-bottom: 4px;
    }

    .tabs > *, .tab-bar > * {
        flex-shrink: 0;
        white-space: nowrap;
        min-height: 44px;
        padding: 8px 12px !important;
        font-size: 12px !important;
    }

    /* === APP SWITCHER === */
    .app-switcher {
        order: 10;
    }

    .switcher-menu {
        position: fixed !important;
        top: auto !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        max-height: 70vh;
        border-radius: 16px 16px 0 0 !important;
    }

    /* === AVATAR / ICON BUTTONS === */
    .avatar,
    .nav-btn,
    .icon-btn {
        min-width: 44px !important;
        min-height: 44px !important;
        display: flex;
        align-items: center;
        justify-content: center;
    }

    /* === BOTTOM NAV (if present) === */
    .bottom-nav {
        display: flex !important;
    }
}

/* ---- 375px: iPhone SE baseline ---- */
@media (max-width: 375px) {
    /* Tighter padding */
    .section,
    .page,
    .main {
        padding-left: 8px !important;
        padding-right: 8px !important;
    }

    nav, .nav, .header, .topnav, .suite-header, .topbar {
        padding: 8px !important;
    }

    /* Card padding */
    .card, .card-glass {
        padding: 12px !important;
    }

    /* Even smaller typography */
    h1, .section-title {
        font-size: 22px !important;
    }

    h2 {
        font-size: 18px !important;
    }

    h3 {
        font-size: 16px !important;
    }

    /* Logo sizing */
    .logo {
        font-size: 16px !important;
    }

    .logo-icon {
        width: 32px !important;
        height: 32px !important;
        font-size: 18px !important;
    }

    /* Stats in single column */
    .stats-strip,
    .stats-row,
    .stat-cards,
    .metrics-row {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Buttons stack full-width */
    .btn-group,
    .actions,
    .modal-footer {
        flex-direction: column !important;
    }

    .btn-group > *,
    .actions > *,
    .modal-footer > * {
        width: 100% !important;
    }

    /* Price/value text */
    .price,
    .value,
    .amount {
        font-size: 14px !important;
    }

    /* Grids always 1 column */
    [style*="grid-template-columns: repeat(auto-fill"],
    [style*="grid-template-columns: repeat(auto-fit"],
    [style*="grid-template-columns:repeat(auto-fill"],
    [style*="grid-template-columns:repeat(auto-fit"] {
        grid-template-columns: 1fr !important;
    }

    /* Fixed-width flex children wrap */
    [style*="flex: 0 0"],
    [style*="flex:0 0"] {
        flex: 1 1 100% !important;
    }
}

/* ---- Terminal header: user badge + buttons overflow fix ---- */
@media (max-width: 768px) {
    .top-nav {
        height: auto !important;
        min-height: 48px;
        padding: 8px 12px !important;
        flex-wrap: wrap;
        gap: 6px;
    }
    .user-badge {
        flex-wrap: wrap !important;
        gap: 4px !important;
        max-width: 100%;
        overflow: hidden;
    }
    .user-email {
        max-width: 120px !important;
        font-size: 10px !important;
    }
    .upgrade-btn,
    .manage-btn,
    .buy-crypto-btn,
    .settings-btn,
    .whats-new-btn,
    .logout-btn {
        font-size: 10px !important;
        padding: 4px 8px !important;
    }
    .pro-badge,
    .suite-badge {
        font-size: 9px !important;
        padding: 2px 6px !important;
    }
    /* Coin table images on mobile */
    .coin-icon {
        width: 24px !important;
        height: 24px !important;
        max-width: 24px !important;
        max-height: 24px !important;
    }
    .coin-name {
        max-width: 90px !important;
        font-size: 12px !important;
    }
}

@media (max-width: 375px) {
    .user-email {
        display: none !important;
    }
    .coin-icon {
        width: 20px !important;
        height: 20px !important;
        max-width: 20px !important;
        max-height: 20px !important;
    }
    .coin-cell {
        gap: 6px !important;
    }
}

/* ---- Prevent horizontal scroll globally ---- */
html, body {
    overflow-x: hidden;
    max-width: 100vw;
}

/* ---- Safe area insets for notched phones ---- */
@supports (padding-bottom: env(safe-area-inset-bottom)) {
    .bottom-nav,
    .toast-container,
    .bottom-sheet {
        padding-bottom: calc(8px + env(safe-area-inset-bottom));
    }

    nav, .nav, .header, .topnav, .suite-header {
        padding-top: env(safe-area-inset-top);
    }
}

/* ---- Scrollbar styling for horizontal scroll containers ---- */
@media (max-width: 480px) {
    .table-wrap::-webkit-scrollbar,
    .tabs::-webkit-scrollbar,
    .tab-bar::-webkit-scrollbar {
        height: 4px;
    }

    .table-wrap::-webkit-scrollbar-track,
    .tabs::-webkit-scrollbar-track,
    .tab-bar::-webkit-scrollbar-track {
        background: transparent;
    }

    .table-wrap::-webkit-scrollbar-thumb,
    .tabs::-webkit-scrollbar-thumb,
    .tab-bar::-webkit-scrollbar-thumb {
        background: rgba(255, 255, 255, 0.1);
        border-radius: 2px;
    }
}

/* ---- Pricing grid: 2 cols at desktop, 1 col on phones ---- */
.pricing-grid,
.plan-grid {
    display: grid;
    grid-template-columns: repeat(2, 1fr);
    gap: 24px;
}

@media (max-width: 700px) {
    .pricing-grid,
    .plan-grid {
        grid-template-columns: 1fr !important;
        gap: 16px !important;
    }
}

/* ---- Trust-badges row: tighten gap on phones ---- */
@media (max-width: 480px) {
    .trust-badges-row {
        gap: 14px !important;
        justify-content: flex-start !important;
        padding: 0 4px;
    }
}

/* ---- Hero glow: contain on small screens ---- */
@media (max-width: 480px) {
    .hero-glow {
        width: 100vw !important;
        left: 0 !important;
        transform: none !important;
    }
}

/* ---- Testimonial cards: don't overflow on phones ---- */
@media (max-width: 480px) {
    .testimonial-card {
        flex: 1 1 calc(100vw - 32px) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 32px) !important;
    }
}

/* ---- Social proof stats: 2-col on mobile ---- */
@media (max-width: 480px) {
    .social-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}

/* ---- Inline minmax grids: override at 480px ---- */
@media (max-width: 480px) {
    [style*="minmax(300px"],
    [style*="minmax(320px"],
    [style*="minmax(340px"],
    [style*="minmax(360px"] {
        grid-template-columns: 1fr !important;
    }
}

/* ---- Pricing page compare table scroll wrapper ---- */
.compare-section {
    overflow-x: auto;
    -webkit-overflow-scrolling: touch;
}

@media (max-width: 480px) {
    .compare-section {
        padding-left: 0;
        padding-right: 0;
    }
    .compare-table {
        min-width: 520px;
    }
}

/* ---- Testimonial cards: full responsive override ---- */
/* index.html base sets min-width:280px + flex:0 0 calc(33.33%-14px).
   mobile-responsive.css loaded AFTER so these rules cascade last. */

/* Tablet (≤900px): show 1-2 cards per row */
@media (max-width: 900px) {
    .testimonials-carousel-wrap {
        overflow: visible !important;
    }
    .testimonials-track {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .testimonials-track::-webkit-scrollbar { display: none; }
    .testimonial-card {
        flex: 0 0 calc(50% - 10px) !important;
        min-width: 0 !important;
    }
}

/* Large phone (≤600px): 1 card per row, full width */
@media (max-width: 600px) {
    .testimonials-carousel-wrap {
        overflow: visible !important;
    }
    .testimonials-track {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 8px;
    }
    .testimonials-track::-webkit-scrollbar { display: none; }
    .testimonial-card {
        flex: 0 0 calc(100% - 32px) !important;
        min-width: 0 !important;
    }
    .testimonials-controls {
        margin-top: 20px;
    }
}

/* Small phone (≤480px): single card per view */
@media (max-width: 480px) {
    .testimonials-carousel-wrap {
        overflow: visible !important;
    }
    .testimonials-track {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
    }
    .testimonials-track::-webkit-scrollbar { display: none; }
    .testimonial-card {
        flex: 0 0 calc(100vw - 32px) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 32px) !important;
    }
}

/* iPhone SE baseline (≤375px): tighter padding, single card */
@media (max-width: 375px) {
    .testimonial-card {
        flex: 0 0 calc(100vw - 24px) !important;
        min-width: 0 !important;
        max-width: calc(100vw - 24px) !important;
        padding: 20px !important;
    }
}