/**
 * SIGMIX Market Hub Styles v3.1
 * /css/market.css
 * Mobile-first with rich market data display
 */

/* ======================================== 
   CSS VARIABLES
======================================== */
:root {
    --primary: #070078;
    --primary-light: #1a1a8c;
    --accent: #10B981;
    --dark: #1a1a2e;
    --gray: #6B7280;
    --gray-200: #E5E7EB;
    --off-white: #F9FAFB;
    --white: #FFFFFF;
}

/* Utilities */
.sr-only { position: absolute; width: 1px; height: 1px; padding: 0; margin: -1px; overflow: hidden; clip: rect(0,0,0,0); border: 0; }
.text-green { color: #10B981 !important; }
.text-red { color: #EF4444 !important; }

/* Layout */
.header-spacer { height: 70px; }






/* Hero */
.market-hero { padding: 1.5rem 0; background: var(--off-white); border-bottom: 1px solid var(--gray-200); }
.hero-inner { display: flex; flex-direction: column; gap: 1.25rem; text-align: center; }
.hero-text h1 { font-size: 1.5rem; font-weight: 800; color: var(--dark); margin-bottom: 0.25rem; }
.hero-text h1 span { background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; }
.hero-text p { font-size: 0.9rem; color: var(--gray); }
.hero-text .last-updated { font-size: 0.8rem; color: var(--gray); margin-top: 0.5rem; display: flex; align-items: center; justify-content: center; gap: 0.4rem; }
.hero-text .last-updated i { color: var(--primary); }
.hero-stats { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.hero-stat { text-align: center; padding: 0.75rem 0.5rem; background: white; border-radius: 10px; border: 1px solid var(--gray-200); }
.hero-stat.stat-up { border-color: rgba(16,185,129,0.3); background: rgba(16,185,129,0.05); }
.hero-stat.stat-down { border-color: rgba(239,68,68,0.3); background: rgba(239,68,68,0.05); }
.hero-stat-value { font-size: 1.25rem; font-weight: 800; color: var(--primary); }
.stat-up .hero-stat-value { color: #10B981; }
.stat-down .hero-stat-value { color: #EF4444; }
.hero-stat-label { font-size: 0.7rem; color: var(--gray); font-weight: 600; margin-top: 0.1rem; }
.hero-stat-label i { margin-right: 0.25rem; }

/* Search */
.search-section { padding: 1rem 0; background: white; border-bottom: 1px solid var(--gray-200); }
.search-container { max-width: 100%; position: relative; }
.search-box { width: 100%; padding: 0.875rem 1rem 0.875rem 2.75rem; font-size: 1rem; border: 2px solid var(--gray-200); border-radius: 10px; outline: none; font-family: inherit; }
.search-box:focus { border-color: var(--primary); box-shadow: 0 0 0 4px rgba(7,0,120,0.1); }
.search-icon { position: absolute; left: 1rem; top: 50%; transform: translateY(-50%); color: var(--gray); }
.search-results { position: absolute; top: calc(100% + 0.5rem); left: 0; right: 0; background: white; border: 1px solid var(--gray-200); border-radius: 12px; max-height: 70vh; overflow-y: auto; display: none; box-shadow: 0 10px 40px rgba(0,0,0,0.15); z-index: 200; }
.search-results.active { display: block; }
.search-result-item { display: flex; align-items: center; gap: 0.75rem; padding: 0.75rem 1rem; text-decoration: none; color: inherit; border-bottom: 1px solid var(--gray-200); }
.search-result-item:hover { background: var(--off-white); }
.search-result-item img { width: 32px; height: 32px; border-radius: 6px; object-fit: contain; background: var(--off-white); }
.search-result-info { flex: 1; min-width: 0; }
.search-result-symbol { font-size: 0.7rem; color: var(--gray); font-weight: 700; font-family: monospace; display: block; }
.search-result-name { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.search-result-change { font-size: 0.75rem; font-weight: 700; padding: 0.2rem 0.4rem; border-radius: 4px; }
.search-result-change.up { background: rgba(16,185,129,0.15); color: #059669; }
.search-result-change.down { background: rgba(239,68,68,0.15); color: #DC2626; }
.search-no-results { padding: 1.5rem; text-align: center; color: var(--gray); }

/* Section Headers */
.section-header { display: flex; align-items: center; justify-content: space-between; margin-bottom: 1.25rem; flex-wrap: wrap; gap: 0.75rem; }
.section-header h2 { font-size: 1.1rem; font-weight: 800; color: var(--dark); display: flex; align-items: center; gap: 0.5rem; }
.section-header h2 i { color: var(--primary); font-size: 0.95rem; }
.view-all-link { color: var(--primary); font-weight: 600; font-size: 0.85rem; text-decoration: none; display: flex; align-items: center; gap: 0.3rem; }

/* No Data State */
.no-data { padding: 1.5rem; text-align: center; color: var(--gray); font-size: 0.9rem; background: var(--off-white); border-radius: 8px; border: 1px dashed var(--gray-200); }

/* Top Movers */
.movers-section { padding: 1.5rem 0; background: white; }
.movers-grid { display: grid; grid-template-columns: 1fr; gap: 1rem; }
.movers-card { background: var(--off-white); border: 1px solid var(--gray-200); border-radius: 12px; padding: 1rem; }
.movers-card h3 { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.75rem; display: flex; align-items: center; gap: 0.5rem; }
.movers-card.gainers h3 { color: #059669; }
.movers-card.losers h3 { color: #DC2626; }
.movers-card.volume h3 { color: var(--primary); }
.movers-list { display: flex; flex-direction: column; gap: 0.5rem; }
.mover-item { display: flex; align-items: center; gap: 0.6rem; padding: 0.6rem; background: white; border-radius: 8px; text-decoration: none; color: inherit; border: 1px solid transparent; transition: all 0.2s; }
.mover-item:hover { border-color: var(--primary); }
.mover-logo img { width: 32px; height: 32px; border-radius: 6px; object-fit: contain; background: var(--off-white); }
.mover-info { flex: 1; min-width: 0; }
.mover-symbol { font-size: 0.7rem; color: var(--gray); font-weight: 700; font-family: monospace; display: block; }
.mover-name { font-size: 0.8rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; color: var(--dark); }
.mover-data { text-align: right; }
.mover-price { font-size: 0.85rem; font-weight: 700; color: var(--dark); display: block; }
.mover-volume { font-size: 0.7rem; color: var(--primary); font-weight: 600; display: block; }
.mover-change { font-size: 0.75rem; font-weight: 700; }
.mover-change.up { color: #059669; }
.mover-change.down { color: #DC2626; }

/* Sector Heatmap */
.sectors-section { padding: 1.5rem 0; background: var(--off-white); }
.sectors-heatmap { display: grid; grid-template-columns: repeat(2, 1fr); gap: 0.5rem; }
.sector-heat-card { background: white; border: 1px solid var(--gray-200); border-radius: 10px; padding: 0.75rem; text-decoration: none; color: inherit; transition: all 0.2s; border-left: 3px solid transparent; }
.sector-heat-card:hover { transform: translateY(-2px); box-shadow: 0 4px 12px rgba(0,0,0,0.1); }
.sector-heat-card.sector-up { border-left-color: #10B981; }
.sector-heat-card.sector-down { border-left-color: #EF4444; }
.sector-heat-header { display: flex; align-items: center; gap: 0.4rem; margin-bottom: 0.4rem; }
.sector-heat-header i { color: var(--primary); font-size: 0.8rem; }
.sector-heat-name { font-size: 0.75rem; font-weight: 700; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.sector-heat-change { font-size: 1rem; font-weight: 800; margin-bottom: 0.3rem; }
.sector-up .sector-heat-change { color: #059669; }
.sector-down .sector-heat-change { color: #DC2626; }
.sector-heat-meta { display: flex; justify-content: space-between; font-size: 0.65rem; color: var(--gray); }
.sector-heat-breadth .up { color: #10B981; }
.sector-heat-breadth .down { color: #EF4444; }

/* Sector Link in Table */
.sector-link { color: var(--primary); text-decoration: none; font-size: 0.8rem; }
.sector-link:hover { text-decoration: underline; }

/* Trending */
.trending-section { padding: 1.5rem 0; background: white; }
.trending-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.trending-card { background: var(--off-white); border: 1px solid var(--gray-200); border-radius: 12px; padding: 1rem; text-decoration: none; color: inherit; transition: all 0.2s; position: relative; }
.trending-card:hover { border-color: var(--primary); transform: translateY(-2px); }
.trending-card.is-hot { border-color: #F59E0B; background: linear-gradient(135deg, rgba(245,158,11,0.05), transparent); }
.trending-header { display: flex; align-items: center; gap: 0.75rem; margin-bottom: 0.75rem; }
.trending-logo img { width: 36px; height: 36px; border-radius: 8px; object-fit: contain; background: white; }
.trending-info { flex: 1; min-width: 0; }
.trending-symbol { font-size: 0.7rem; color: var(--gray); font-weight: 700; font-family: monospace; display: block; }
.trending-name { font-size: 0.85rem; font-weight: 600; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; display: block; }
.hot-badge { font-size: 1rem; }
.trending-stats { display: flex; justify-content: space-between; align-items: center; margin-bottom: 0.5rem; }
.trending-price { font-size: 0.95rem; font-weight: 700; color: var(--dark); }
.trending-change { font-size: 0.8rem; font-weight: 700; padding: 0.2rem 0.5rem; border-radius: 4px; }
.trending-change.up { background: rgba(16,185,129,0.15); color: #059669; }
.trending-change.down { background: rgba(239,68,68,0.15); color: #DC2626; }
.trending-buzz { display: flex; gap: 1rem; font-size: 0.7rem; color: var(--gray); }
.trending-buzz i { margin-right: 0.25rem; }

/* Market Sentiment */
.sentiment-section { padding: 1.5rem 0; background: var(--off-white); }
.sentiment-card { background: white; border: 1px solid var(--gray-200); border-radius: 12px; padding: 1.5rem; display: flex; flex-direction: column; gap: 1.25rem; align-items: center; }
.sentiment-gauge { text-align: center; }
.gauge-value { font-size: 3rem; font-weight: 900; background: linear-gradient(135deg, var(--primary), var(--accent)); -webkit-background-clip: text; -webkit-text-fill-color: transparent; background-clip: text; line-height: 1; }
.gauge-label { font-size: 1rem; font-weight: 700; color: var(--dark); margin-top: 0.25rem; }
.sentiment-breakdown { display: flex; gap: 1.5rem; justify-content: center; flex-wrap: wrap; }
.sentiment-item { text-align: center; padding: 0.75rem 1rem; background: var(--off-white); border-radius: 8px; min-width: 80px; }
.sentiment-pct { font-size: 1.25rem; font-weight: 800; display: block; }
.sentiment-item.positive .sentiment-pct { color: #059669; }
.sentiment-item.neutral .sentiment-pct { color: var(--gray); }
.sentiment-item.negative .sentiment-pct { color: #DC2626; }
.sentiment-label { font-size: 0.7rem; color: var(--gray); font-weight: 600; text-transform: uppercase; letter-spacing: 0.5px; }
.sentiment-meta { font-size: 0.75rem; color: var(--gray); text-align: center; }

/* Stock Directory */
.all-stocks-section { padding: 1.5rem 0; background: var(--off-white); }
.stocks-mobile-list { display: flex; flex-direction: column; gap: 0.5rem; }
.stock-mobile-card { display: flex; align-items: center; gap: 0.75rem; padding: 0.875rem; background: white; border: 1px solid var(--gray-200); border-radius: 10px; text-decoration: none; color: inherit; }
.stock-mobile-card:hover { border-color: var(--primary); }
.stock-mobile-logo img { width: 40px; height: 40px; border-radius: 8px; object-fit: contain; background: var(--off-white); }
.stock-mobile-info { flex: 1; min-width: 0; }
.stock-mobile-name { font-size: 0.9rem; font-weight: 600; color: var(--dark); white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.stock-mobile-meta { display: flex; gap: 0.5rem; margin-top: 0.2rem; }
.stock-mobile-symbol { font-size: 0.7rem; color: var(--primary); font-weight: 700; font-family: monospace; }
.stock-mobile-sector { font-size: 0.7rem; color: var(--gray); }
.stock-mobile-price { text-align: right; }
.stock-mobile-price .price { font-size: 0.9rem; font-weight: 700; color: var(--dark); display: block; }
.stock-mobile-price .change { font-size: 0.75rem; font-weight: 700; }
.stock-mobile-price .change.up { color: #059669; }
.stock-mobile-price .change.down { color: #DC2626; }

/* Desktop Table */
.table-wrapper { display: none; overflow-x: auto; }
.stocks-table { width: 100%; background: white; border-radius: 12px; border: 1px solid var(--gray-200); border-collapse: collapse; }
.stocks-table th { background: var(--primary); color: white; padding: 0.875rem 1rem; text-align: left; font-size: 0.75rem; font-weight: 600; }
.stocks-table th:first-child { border-radius: 12px 0 0 0; }
.stocks-table th:last-child { border-radius: 0 12px 0 0; }
.stocks-table td { padding: 0.75rem 1rem; border-bottom: 1px solid var(--gray-200); font-size: 0.85rem; }
.stocks-table tbody tr:hover td { background: var(--off-white); }
.stocks-table tbody tr:last-child td:first-child { border-radius: 0 0 0 12px; }
.stocks-table tbody tr:last-child td:last-child { border-radius: 0 0 12px 0; }
.table-stock-info { display: flex; align-items: center; gap: 0.75rem; }
.table-stock-logo img { width: 32px; height: 32px; border-radius: 6px; object-fit: contain; background: var(--off-white); }
.table-stock-name { font-weight: 600; font-size: 0.85rem; }
.table-stock-symbol { font-size: 0.7rem; color: var(--gray); font-family: monospace; }
.table-price { font-weight: 700; }
.table-change { font-weight: 700; }
.table-change.up { color: #059669; }
.table-change.down { color: #DC2626; }
.trend-badge { font-size: 0.65rem; font-weight: 600; padding: 0.2rem 0.4rem; border-radius: 4px; text-transform: uppercase; }
.trend-badge.trend-uptrend { background: rgba(16,185,129,0.15); color: #059669; }
.trend-badge.trend-downtrend { background: rgba(239,68,68,0.15); color: #DC2626; }
.trend-badge.trend-sideways, .trend-badge.trend-n\/a { background: var(--gray-200); color: var(--gray); }
.table-link { color: var(--primary); text-decoration: none; font-weight: 600; font-size: 0.8rem; display: flex; align-items: center; gap: 0.3rem; }
.table-link:hover { text-decoration: underline; }
.table-footer { margin-top: 1rem; text-align: center; }
.btn-view-all { display: inline-flex; align-items: center; gap: 0.5rem; padding: 0.75rem 1.5rem; background: var(--primary); color: white; border-radius: 8px; font-weight: 600; text-decoration: none; transition: background 0.2s; }
.btn-view-all:hover { background: var(--dark); }

/* FAQ */
.faq-section { padding: 2rem 0; background: white; }
.faq-section h2 { font-size: 1.1rem; font-weight: 800; margin-bottom: 1.25rem; display: flex; align-items: center; gap: 0.5rem; }
.faq-section h2 i { color: var(--primary); }
.faq-grid { display: grid; grid-template-columns: 1fr; gap: 0.75rem; }
.faq-item { background: var(--off-white); border: 1px solid var(--gray-200); border-radius: 10px; padding: 1rem; }
.faq-item h3 { font-size: 0.9rem; font-weight: 700; margin-bottom: 0.5rem; color: var(--dark); }
.faq-item p { font-size: 0.85rem; color: var(--gray); line-height: 1.5; }

/* CTA */
.cta-section { padding: 2rem 0; background: linear-gradient(135deg, var(--primary), #1a1a5c); }
.cta-inner { display: flex; flex-direction: column; align-items: center; text-align: center; gap: 1.5rem; }
.cta-text { color: white; }
.cta-text h2 { font-size: 1.25rem; font-weight: 800; margin-bottom: 0.25rem; }
.cta-text p { font-size: 0.9rem; opacity: 0.9; }
.cta-buttons { display: flex; flex-direction: column; gap: 0.75rem; width: 100%; max-width: 280px; }
.cta-btn-primary, .cta-btn-secondary { display: flex; align-items: center; justify-content: center; gap: 0.5rem; padding: 0.875rem 1.5rem; border-radius: 8px; font-weight: 600; text-decoration: none; transition: all 0.2s; }
.cta-btn-primary { background: white; color: var(--primary); }
.cta-btn-primary:hover { background: var(--off-white); }
.cta-btn-secondary { background: transparent; color: white; border: 2px solid rgba(255,255,255,0.4); }
.cta-btn-secondary:hover { border-color: white; background: rgba(255,255,255,0.1); }

/* ======= RESPONSIVE ======= */
@media (min-width: 640px) {
    .sectors-heatmap { grid-template-columns: repeat(3, 1fr); }
    .trending-grid { grid-template-columns: repeat(2, 1fr); }
    .sentiment-card { flex-direction: row; justify-content: space-around; }
    .sentiment-breakdown { gap: 1rem; }
}

@media (min-width: 768px) {
    .hero-inner { flex-direction: row; justify-content: space-between; text-align: left; }
    .hero-text .last-updated { justify-content: flex-start; }
    .hero-stats { grid-template-columns: repeat(4, auto); gap: 1rem; }
    .hero-text h1 { font-size: 1.75rem; }
    .search-container { max-width: 500px; }
    .movers-grid { grid-template-columns: repeat(3, 1fr); }
    .sectors-heatmap { grid-template-columns: repeat(4, 1fr); }
    .trending-grid { grid-template-columns: repeat(3, 1fr); }
    .faq-grid { grid-template-columns: repeat(2, 1fr); }
    .cta-inner { flex-direction: row; justify-content: space-between; text-align: left; }
    .cta-buttons { flex-direction: row; max-width: none; width: auto; }
}

@media (min-width: 1024px) {
    .stocks-mobile-list { display: none; }
    .table-wrapper { display: block; }
    .sectors-heatmap { grid-template-columns: repeat(6, 1fr); }
    .faq-grid { grid-template-columns: repeat(4, 1fr); }
}

@media (min-width: 1280px) {
    .hero-text h1 { font-size: 2rem; }
    .section-header h2 { font-size: 1.25rem; }
}

/* Table Stock Info Link */
a.table-stock-info {
    display: flex;
    align-items: center;
    gap: 0.75rem;
    text-decoration: none;
    color: inherit;
    transition: opacity 0.2s;
}

a.table-stock-info:hover {
    opacity: 0.8;
}

a.table-stock-info:hover .table-stock-name {
    color: var(--primary);
    text-decoration: underline;
}

/* ============================================
   MOBILE HEADER FIXES
   ============================================ */
/* ============================================
   TOP MOVERS - HORIZONTAL SCROLL FIX
   ============================================ */
@media (max-width: 768px) {
    .movers-card {
        position: relative;
        overflow: hidden;
    }
    
    .movers-list {
        display: flex;
        flex-direction: row;
        gap: 0.5rem;
        overflow-x: auto;
        overflow-y: hidden;
        scroll-snap-type: x mandatory;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: thin;
        scrollbar-color: var(--primary) var(--gray-200);
        padding-bottom: 0.5rem;
    }
    
    .movers-list::-webkit-scrollbar {
        height: 4px;
    }
    
    .movers-list::-webkit-scrollbar-track {
        background: var(--gray-200);
        border-radius: 10px;
    }
    
    .movers-list::-webkit-scrollbar-thumb {
        background: var(--primary);
        border-radius: 10px;
    }
    
    .mover-item {
        min-width: 280px;
        max-width: 280px;
        flex-shrink: 0;
        scroll-snap-align: start;
    }
    
    /* Add scroll indicator hint */
    .movers-card::after {
        content: '';
        position: absolute;
        right: 0;
        top: 3rem;
        bottom: 1rem;
        width: 40px;
        background: linear-gradient(to left, var(--off-white), transparent);
        pointer-events: none;
    }
    
    /* Show there's more content with a subtle fade */
    .movers-card h3 {
        position: relative;
    }
    
    .movers-card h3::after {
        content: '← Swipe →';
        display: block;
        font-size: 0.65rem;
        font-weight: 400;
        color: var(--gray);
        margin-top: 0.25rem;
        font-style: italic;
    }
}