/* ============================================
   ClariTrend Mobile Responsive (mobile.css)
   Target: 375px (iPhone) and up
   ============================================ */

/* ═══ NAV — TOP BAR ═══ */
@media (max-width: 768px) {
    .top-nav-container {
        padding: 0 10px !important;
        gap: 6px;
    }
    .logo {
        font-size: .85rem !important;
        gap: 5px !important;
        flex-shrink: 0;
    }
    .logo svg { width: 20px !important; height: 20px !important; }
    /* Search bar gets remaining space */
    .search-bar {
        flex: 1 !important;
        min-width: 60px !important;
        max-width: none !important;
        margin: 0 4px !important;
    }
    .search-bar input {
        font-size: 12px !important;
        padding: 6px 8px 6px 28px !important;
        height: 30px !important;
        box-sizing: border-box !important;
    }
    .search-bar input::placeholder {
        font-size: 11px !important;
    }
    .search-icon {
        left: 8px !important;
        width: 13px !important;
        height: 13px !important;
    }
    .search-shortcut { display: none !important; }
    /* Compact right side — remove all gaps */
    .top-nav-right {
        gap: 3px !important;
        flex-shrink: 0 !important;
    }
    /* Timezone — flag icon only */
    #tzDropdown .strategy-button {
        padding: 4px 6px !important;
        min-width: auto !important;
        gap: 0 !important;
    }
    #tzDropdown .strategy-button span:not(.strategy-btn-icon) { display: none !important; }
    #tzDropdown .strategy-button .dropdown-arrow { display: none !important; }
    /* HIDE individual buttons on mobile — they're in the more dropdown */
    #helpBtn { display: none !important; }
    #siteThemeBtn { display: none !important; }
    #settingsBtn { display: none !important; }
    #themeToggle { display: none !important; }
    /* SHOW the mobile more dropdown */
    .mobile-more-wrap { display: block !important; }
    .mobile-more-wrap .help-btn {
        width: 28px !important;
        height: 28px !important;
    }
    /* Clerk user button — hide on mobile */
    #user-button {
        display: none !important;
    }
    /* Tier badge — hide since user button is hidden */
    .ct-tier-badge {
        display: none !important;
    }
}

/* ═══ NAV — SECONDARY ═══ */
@media (max-width: 768px) {
    .secondary-nav-container {
        padding: 0 6px !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        gap: 0 !important;
        flex-wrap: nowrap !important;
    }
    .secondary-nav-container::-webkit-scrollbar { display: none; }
    .secondary-nav-container > a,
    .secondary-nav-container > .nav-dropdown > .nav-dropdown-btn {
        font-size: .58rem !important;
        padding: 6px 5px !important;
        white-space: nowrap;
        gap: 2px !important;
        flex-shrink: 0;
    }
    .secondary-nav-container .nav-icon {
        width: 12px !important;
        height: 12px !important;
    }
    .dropdown-arrow-small { display: none !important; }
}

/* ═══ CONTAINER — reduced padding ═══ */
@media (max-width: 768px) {
    .container {
        padding: 0 12px !important;
        max-width: 100% !important;
    }
}

/* ═══ SCANNER PAGE ═══ */
@media (max-width: 768px) {
    /* Quick stats — 2x2 grid, compact */
    .quick-stats-bar {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
        padding: 10px 12px !important;
        margin-bottom: 8px !important;
    }
    .quick-stat-item {
        padding: 6px 8px !important;
        gap: 6px !important;
    }
    .quick-stat-value { font-size: .8rem !important; }
    .quick-stat-label { font-size: .5rem !important; }
    .quick-stat-icon { width: 14px !important; height: 14px !important; }

    /* Filter bar — break into two rows */
    .filter-bar-wrapper {
        padding: 4px 0 !important;
        overflow: hidden !important;
    }
    .filter-bar {
        flex-direction: column !important;
        height: auto !important;
        gap: 4px !important;
        padding: 6px !important;
        overflow: hidden !important;
    }

    /* Chips row — horizontal scroll */
    .filter-chips {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        flex: none !important;
    }
    .filter-chips::-webkit-scrollbar { display: none; }
    .chip {
        flex-shrink: 0 !important;
        font-size: .6rem !important;
        padding: 3px 7px !important;
        gap: 3px !important;
    }
    .chip svg { width: 11px !important; height: 11px !important; }
    .chip-count { font-size: .55rem !important; padding: 0 4px !important; }

    /* Controls row — horizontal scroll */
    .filter-controls {
        display: flex !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
        width: 100% !important;
        flex-shrink: 1 !important;
        padding-left: 0 !important;
        gap: 2px !important;
    }
    .filter-controls::-webkit-scrollbar { display: none; }
    .ctrl-btn {
        flex-shrink: 0 !important;
        font-size: .58rem !important;
        padding: 4px 6px !important;
        gap: 3px !important;
    }
    .ctrl-btn svg { width: 11px !important; height: 11px !important; }
    .sep { display: none !important; }

    /* Dropdown panels — full-width bottom sheet */
    .drop-panel {
        position: fixed !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        bottom: 0 !important;
        max-height: 75vh !important;
        overflow-y: auto !important;
        border-radius: 14px 14px 0 0 !important;
        z-index: 10001 !important;
        box-shadow: 0 -8px 32px rgba(0,0,0,.5) !important;
        padding: 16px 12px !important;
        width: 100% !important;
        min-width: 0 !important;
    }

    /* Signal cards — smaller */
    .signal-scroll-row .signal-card {
        min-width: 220px !important;
        max-width: 260px !important;
    }
    .signal-card {
        padding: 10px !important;
    }
    .coin-logo { width: 28px !important; height: 28px !important; }
    .coin-details h3 { font-size: .85rem !important; }
    .coin-pair { font-size: .65rem !important; }
    .sc-head { margin-bottom: 8px !important; }
    .sig-badge { padding: 3px 7px !important; font-size: .65rem !important; }
    .sig-badge svg { width: 11px !important; height: 11px !important; }

    /* Signal sections */
    .signal-section { margin-bottom: 8px !important; }
    .section-header {
        flex-wrap: wrap !important;
        gap: 4px !important;
        padding: 0 !important;
    }
    .section-label { font-size: .7rem !important; }
    .section-pills {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
        max-width: 100% !important;
    }
    .section-pills::-webkit-scrollbar { display: none; }
    .section-pill {
        white-space: nowrap !important;
        flex-shrink: 0 !important;
        font-size: .55rem !important;
        padding: 3px 6px !important;
    }

    /* Table — scrollable */
    [style*="overflow-x:auto"],
    [style*="overflow-x: auto"] {
        max-width: 100% !important;
    }

    /* Coin search input — prevent iOS zoom */
    #coinSearch { font-size: 16px !important; }
    
    /* fpills in filter dropdown */
    .fpill {
        font-size: .62rem !important;
        padding: 3px 7px !important;
    }
}

@media (max-width: 480px) {
    .signal-scroll-row .signal-card {
        min-width: 180px !important;
        max-width: 220px !important;
    }
    .ctrl-btn {
        font-size: .52rem !important;
        padding: 3px 5px !important;
    }
    .chip {
        font-size: .55rem !important;
        padding: 2px 5px !important;
    }
}

/* ═══ SIGNAL DETAIL PAGE ═══ */
@media (max-width: 768px) {
    .signal-hero {
        padding: 12px 0 !important;
    }
    /* Signal header box — compact on mobile */
    .signal-header {
        padding: 12px !important;
        margin-bottom: 10px !important;
        flex-direction: column !important;
        gap: 10px !important;
        align-items: stretch !important;
    }
    .signal-header-left {
        gap: 10px !important;
    }
    .coin-logo-large {
        width: 38px !important;
        height: 38px !important;
        padding: 4px !important;
    }
    .coin-avatar-large {
        width: 38px !important;
        height: 38px !important;
        font-size: .85rem !important;
    }
    .signal-header-info h1 {
        font-size: 1.05rem !important;
        margin-bottom: 4px !important;
    }
    .signal-meta {
        font-size: .68rem !important;
        gap: 6px !important;
    }
    .tf-signal-pills {
        gap: 3px !important;
    }
    .tf-signal-pills button {
        font-size: .55rem !important;
        padding: 2px 5px !important;
    }
    /* Signal header — badge floats top-right */
    .signal-header {
        position: relative !important;
    }
    /* Signal badge — absolute top-right corner of header */
    .signal-badge {
        position: absolute !important;
        top: 12px !important;
        right: 12px !important;
        font-size: .65rem !important;
        padding: 4px 10px !important;
        border-radius: 20px !important;
    }
    /* Coin name — leave room for badge */
    .signal-header-info h1 {
        padding-right: 70px !important;
    }

    /* Buttons — two rows */
    .signal-header-right {
        display: grid !important;
        grid-template-columns: 1fr 1fr !important;
        grid-template-rows: auto auto !important;
        gap: 6px !important;
    }
    /* Primary buttons — take trade & shadow — span each col, first row */
    #btnTakeTradeToggle {
        grid-column: 1 !important;
        grid-row: 1 !important;
    }
    #btnShadowTradeToggle {
        grid-column: 2 !important;
        grid-row: 1 !important;
    }
    /* Secondary buttons — share & coin detail — second row */
    .signal-header-right button:nth-child(3),
    .signal-header-right a#coinDetailLink {
        grid-row: 2 !important;
    }
    .signal-header-right button:nth-child(3) {
        grid-column: 1 !important;
    }
    .signal-header-right a#coinDetailLink {
        grid-column: 2 !important;
    }

    /* All buttons — uniform style */
    .share-btn {
        font-size: .65rem !important;
        padding: 8px 6px !important;
        gap: 4px !important;
        justify-content: center !important;
        border-radius: 8px !important;
        white-space: nowrap !important;
    }
    .share-btn svg {
        width: 13px !important;
        height: 13px !important;
        flex-shrink: 0 !important;
    }
    /* Primary buttons slightly taller */
    #btnTakeTradeToggle,
    #btnShadowTradeToggle {
        padding: 10px 6px !important;
        font-size: .68rem !important;
        font-weight: 600 !important;
    }
    /* Secondary buttons more muted */
    .signal-header-right button:nth-child(3),
    .signal-header-right a#coinDetailLink {
        opacity: 0.75 !important;
        font-size: .6rem !important;
    }

    /* Chart toggle bar — two clear rows */
    .chart-toggle-bar {
        flex-direction: column !important;
        flex-wrap: nowrap !important;
        gap: 0 !important;
        padding: 8px 10px !important;
        align-items: stretch !important;
    }

    /* HIDE strategy buttons on mobile — replaced by dropdown */
    .chart-toggle-btn {
        display: none !important;
    }

    /* Row 1: strategy dropdown — full width, clearly placed */
    #mobileStratSelect {
        width: 100% !important;
        padding: 7px 10px !important;
        font-size: .72rem !important;
        border-radius: 7px !important;
        margin-bottom: 7px !important;
        box-sizing: border-box !important;
    }

    /* Row 2: chart-toggle-right — full width, horizontally scrollable */
    .chart-toggle-right {
        flex-wrap: nowrap !important;
        gap: 3px !important;
        margin-left: 0 !important;
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        width: 100% !important;
        border-top: 1px solid var(--border) !important;
        padding-top: 7px !important;
    }
    .chart-toggle-right::-webkit-scrollbar { display: none; }
    .chart-tf-btn {
        font-size: .58rem !important;
        padding: 3px 6px !important;
        flex-shrink: 0 !important;
        white-space: nowrap !important;
    }
    .chart-select-group { flex-shrink: 0 !important; }
    .chart-select { font-size: .6rem !important; padding: 2px 4px !important; }
    .chart-select-label { font-size: .5rem !important; }

    /* SHOW the mobile strategy dropdown */
    .mobile-strategy-select {
        display: block !important;
    }

    /* Chart height on mobile */
    #clarizone-chart, #claritrend-chart, #clariflow-chart {
        height: 300px !important;
    }

    /* Below chart grid */
    .below-chart-grid {
        grid-template-columns: 1fr !important;
    }
    /* Position card inputs */
    #positionCard [style*="grid-template-columns: 1fr 1fr 1fr"],
    #positionCard [style*="grid-template-columns:1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
        gap: 8px !important;
    }
    #positionCard [style*="grid-template-columns: repeat(4"],
    #positionCard [style*="grid-template-columns:repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Shadow card same treatment */
    #shadowCard [style*="grid-template-columns: 1fr 1fr 1fr"],
    #shadowCard [style*="grid-template-columns:1fr 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }
    #shadowCard [style*="grid-template-columns: repeat(4"],
    #shadowCard [style*="grid-template-columns:repeat(4"] {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Setup sections */
    .setup-section {
        padding: 10px !important;
    }
}

/* ═══ DASHBOARD PAGE ═══ */
@media (max-width: 768px) {
    .dash-banner {
        padding: 16px !important;
        min-height: auto !important;
    }
    .dash-banner h1 {
        font-size: 1.1rem !important;
    }

    /* Banner hero content — tighter padding */
    .hero-content {
        padding: 14px 16px 16px !important;
    }

    /* Top row — date+time left, buttons right, all on one line */
    .hero-content > div:first-of-type {
        flex-wrap: nowrap !important;
        align-items: center !important;
        gap: 8px !important;
        margin-bottom: 8px !important;
    }

    /* Date — keep on one line, no wrapping */
    #heroDate {
        white-space: nowrap !important;
        font-size: .68rem !important;
        letter-spacing: .04em !important;
    }

    /* Clock — keep compact */
    #heroClock {
        font-size: .68rem !important;
        gap: 3px !important;
        white-space: nowrap !important;
    }

    /* Date+clock wrapper — don't let it shrink too much */
    .hero-content > div:first-of-type > div:first-child {
        flex-shrink: 0 !important;
        gap: 6px !important;
    }

    /* Buttons wrapper — shrink and wrap if needed */
    .hero-content > div:first-of-type > div:last-child {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 5px !important;
        justify-content: flex-end !important;
        flex: 1 !important;
    }

    /* All banner btn-actions — compact */
    .hero-content .btn-action {
        font-size: .6rem !important;
        padding: 5px 8px !important;
        gap: 4px !important;
        border-radius: 7px !important;
        white-space: nowrap !important;
    }
    .hero-content .btn-action svg {
        width: 11px !important;
        height: 11px !important;
    }

    /* Greeting heading */
    .hero-content h1 {
        font-size: 1.15rem !important;
        margin-bottom: 2px !important;
    }

    /* Sub line */
    #greetingSub {
        font-size: .75rem !important;
    }
    .stats-row {
        grid-template-columns: repeat(2, 1fr) !important;
        gap: 6px !important;
    }
    .stat-card {
        padding: 10px !important;
    }
    .stat-value {
        font-size: 1rem !important;
    }
    .grid-2 {
        grid-template-columns: 1fr !important;
    }
    .grid-3 {
        grid-template-columns: 1fr !important;
    }
    .section {
        padding: 12px !important;
    }
    .sec-head {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    /* Fee settings bar */
    .fee-bar {
        flex-wrap: wrap !important;
    }
    /* Daily limits */
    .daily-limits-bar {
        flex-wrap: wrap !important;
        gap: 6px !important;
    }
    .dl-section {
        min-width: auto !important;
    }
    /* Watchlist grid */
    .wl-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    /* Trade rows */
    .trade-row {
        font-size: .7rem !important;
        padding: 8px 10px !important;
        gap: 6px !important;
    }
    .trade-time {
        display: none !important;
    }
    /* Position cards */
    .pos-top {
        flex-wrap: wrap !important;
        gap: 4px !important;
    }
}

@media (max-width: 480px) {
    .stats-row {
        grid-template-columns: 1fr 1fr !important;
    }
    .wl-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ═══ JOURNAL PAGE ═══ */
@media (max-width: 768px) {
    .j-tabs {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        scrollbar-width: none !important;
        flex-wrap: nowrap !important;
    }
    .j-tabs::-webkit-scrollbar {
        display: none;
    }
    .j-tab {
        white-space: nowrap !important;
        font-size: .68rem !important;
        padding: 8px 12px !important;
    }
    .j-stats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    .j-field-row {
        flex-direction: column !important;
        gap: 8px !important;
    }
    .j-entry-top {
        grid-template-columns: 44px 44px 1fr 60px !important;
        gap: 6px !important;
    }
    .j-entry-stars,
    .j-entry-date {
        display: none !important;
    }
    .j-modal {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 90vh !important;
    }
    /* Progress tab */
    #progStats {
        grid-template-columns: repeat(2, 1fr) !important;
    }
    #progAchievements {
        grid-template-columns: 1fr !important;
    }
}

/* ═══ ALERTS PAGE ═══ */
@media (max-width: 768px) {
    .alert-card {
        padding: 12px !important;
    }
    .alert-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ═══ COINS PAGE ═══ */
@media (max-width: 768px) {
    .coins-grid {
        grid-template-columns: repeat(2, 1fr) !important;
    }
}
@media (max-width: 480px) {
    .coins-grid {
        grid-template-columns: 1fr !important;
    }
}

/* ═══ PRICING PAGE ═══ */
@media (max-width: 900px) {
    .cards-row {
        grid-template-columns: 1fr !important;
        max-width: 420px !important;
        margin-left: auto !important;
        margin-right: auto !important;
    }
}

/* ═══ MODALS & OVERLAYS ═══ */
@media (max-width: 768px) {
    .journal-overlay .journal-modal,
    .j-overlay .j-modal {
        width: 95vw !important;
        max-width: 95vw !important;
        max-height: 85vh !important;
    }
    .pnl-modal {
        width: 95vw !important;
        max-width: 95vw !important;
    }
}

/* ═══ XP POPUPS ═══ */
@media (max-width: 768px) {
    .xp-popup-container {
        top: auto !important;
        bottom: 20px !important;
        right: 12px !important;
        left: 12px !important;
    }
    .xp-popup,
    .xp-levelup,
    .xp-achievement {
        min-width: auto !important;
        max-width: none !important;
    }
}

/* ═══ TOAST NOTIFICATIONS ═══ */
@media (max-width: 768px) {
    .signal-toast-container {
        right: 12px !important;
        left: 12px !important;
        max-width: none !important;
    }
}

/* ═══ UTILITY — prevent horizontal overflow ═══ */
@media (max-width: 768px) {
    html, body {
        overflow-x: hidden;
        max-width: 100vw;
    }
}