/**
 * ============================================
 * RESPONSIVE CSS - Media Queries
 * Dashboard V3 - Market Analysis
 * ============================================
 * Breakpoints:
 * - Large Desktop: 1600px+
 * - Desktop: 1200px - 1600px (default)
 * - Tablet: 992px - 1200px
 * - Mobile Landscape: 768px - 992px
 * - Mobile Portrait: 480px - 768px
 * - Small Mobile: < 480px
 */

/* Large Desktop (1600px+) */
@media (min-width: 1600px) {
    .dashboard {
        grid-template-columns: 260px 1fr 240px;
    }
    .dashboard.sidebar-collapsed {
        grid-template-columns: var(--sidebar-collapsed-width) 1fr 240px;
    }

    .heatmap-grid {
        grid-template-columns: repeat(8, 1fr);
    }

    .stat-cards-grid {
        grid-template-columns: repeat(6, 1fr);
    }

    .index-stats-grid {
        grid-template-columns: repeat(5, 1fr);
    }
}

/* Desktop (1200px - 1600px) - DEFAULT STYLES */

/* Tablet (992px - 1200px) — section-nav vẫn hiện, chỉ thu nhỏ */
@media (max-width: 1200px) {
    .dashboard {
        grid-template-columns: 200px 1fr 180px;
    }
    .dashboard.sidebar-collapsed {
        grid-template-columns: var(--sidebar-collapsed-width) 1fr 180px;
    }
    .dashboard.no-section-nav {
        grid-template-columns: 200px 1fr;
    }
    .dashboard.sidebar-collapsed.no-section-nav {
        grid-template-columns: var(--sidebar-collapsed-width) 1fr;
    }

    .section-nav {
        width: 180px;
        padding: var(--space-sm);
    }
    .section-nav .section-name {
        font-size: 11px;
    }
    .section-nav .shortcut-hint {
        display: none;
    }

    .heatmap-grid {
        grid-template-columns: repeat(5, 1fr);
    }

    .sidebar {
        width: 200px;
    }
    .sidebar.collapsed {
        width: var(--sidebar-collapsed-width);
    }

    .logo-text {
        font-size: var(--font-size-lg);
    }

    .index-stats-grid {
        grid-template-columns: repeat(3, 1fr);
    }
}

/* ==========================================
 * Mobile Landscape (<=992px) — MAJOR
 * ========================================== */
@media (max-width: 992px) {
    .dashboard {
        grid-template-columns: 1fr;
    }

    /* --- Ẩn section-nav trên mobile, hiện nút 📑 --- */
    .section-nav {
        display: none;
    }
    .mobile-section-btn {
        display: flex !important;
    }

    /* --- Mobile Header Bar: [☰ Trang] [Title] [Mục ☰] --- */
    .mobile-header-bar {
        display: flex;
        position: sticky;
        top: 0;
        z-index: 150;
        align-items: center;
        justify-content: space-between;
        padding: 12px 12px;
        background: var(--color-bg-secondary);
        border-bottom: 1px solid var(--color-border);
        gap: 10px;
    }

    /* --- Mobile theme FAB --- */
    .mobile-theme-fab {
        display: block;
    }

    /* --- Sidebar off-canvas (LEFT) --- */
    .sidebar {
        position: fixed;
        left: -260px;
        width: 260px !important;
        top: 0;
        height: 100vh;
        z-index: var(--z-modal);
        transition: left var(--transition-normal);
        padding: var(--space-md) !important;
        align-items: stretch !important;
        overflow-y: auto !important;
    }
    .sidebar.open {
        left: 0;
    }
    /* Disable collapsed state on mobile — always show expanded in off-canvas */
    .sidebar.collapsed {
        width: 260px !important;
        padding: var(--space-md) !important;
        align-items: stretch !important;
        overflow-y: auto !important;
    }
    .sidebar.collapsed .logo-text,
    .sidebar.collapsed .date-display,
    .sidebar.collapsed .version-info,
    .sidebar.collapsed .toggle-label,
    .sidebar.collapsed .index-item-text { display: inline !important; }
    .sidebar.collapsed .copyright-notice { display: block !important; }
    .sidebar.collapsed .search-box { display: block !important; position: relative !important; }
    .sidebar.collapsed .sidebar-footer-text { display: block !important; }
    .sidebar.collapsed .index-divider { display: list-item !important; }
    .sidebar.collapsed .index-group-name,
    .sidebar.collapsed .index-group-arrow { display: inline !important; }
    .sidebar.collapsed .index-item {
        width: auto !important;
        height: auto !important;
        padding: var(--space-sm) var(--space-md) !important;
        justify-content: flex-start !important;
        border-radius: 20px !important;
    }
    .sidebar.collapsed .index-item-icon {
        margin-right: var(--space-sm) !important;
        font-size: 16px !important;
    }
    .sidebar.collapsed .index-item[data-tooltip]::after,
    .sidebar.collapsed .index-group-header[data-tooltip]::after {
        display: none !important;
    }
    .sidebar.collapsed .index-group { width: auto !important; }
    .sidebar.collapsed .index-group-header {
        width: auto !important;
        height: auto !important;
        padding: var(--space-sm) var(--space-md) !important;
        justify-content: flex-start !important;
        border-radius: 20px !important;
    }
    .sidebar.collapsed .index-group-items { display: block !important; }
    .sidebar.collapsed .sidebar-toggle-btn {
        width: 100% !important;
        height: auto !important;
    }
    .sidebar-toggle-btn { display: none !important; }

    /* --- Section Nav off-canvas (RIGHT) --- */
    .section-nav {
        display: flex !important;
        position: fixed;
        right: -260px;
        width: 260px;
        top: 0;
        height: 100vh;
        z-index: var(--z-modal);
        transition: right var(--transition-normal);
        flex-direction: column;
        overflow-y: auto;
        border-left: 1px solid var(--color-border);
    }
    .section-nav.open {
        right: 0;
    }

    /* --- Mobile overlay (shared for both panels) --- */
    .mobile-overlay {
        display: block;
        z-index: calc(var(--z-modal) - 1);
    }
    .mobile-overlay.visible {
        opacity: 1;
        visibility: visible;
    }

    /* --- Hide old mobile buttons inside page-header only --- */
    .page-header .mobile-menu-btn,
    .page-header .mobile-section-btn {
        display: none !important;
    }

    /* --- Page header simplify --- */
    .page-header {
        flex-direction: column;
        align-items: flex-start;
    }
    .header-meta {
        width: 100%;
        justify-content: space-between;
    }

    /* --- Layout tweaks --- */
    .heatmap-grid {
        grid-template-columns: repeat(4, 1fr);
    }
    .main-content {
        padding: var(--space-md);
    }
    .index-stats-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    /* --- Global table scroll for mobile --- */
    .data-table,
    .pf-positions-table,
    .pf-perf-table,
    .pf-sn-metrics-table,
    .cg-table,
    .cg-ideal-table,
    .ss-table,
    .ss-wh-table,
    .ss-mini-table,
    .ss-tech-table,
    .ss-explain-table,
    .stk-peer-table,
    .crypt-peer-table,
    .crypt-screen-table,
    .bank-matrix-table {
        display: block;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ==========================================
 * Mobile Portrait (<=768px)
 * ========================================== */
@media (max-width: 768px) {
    .heatmap-grid {
        grid-template-columns: repeat(3, 1fr);
    }

    .stat-cards-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .heatmap-btn {
        padding: var(--space-sm);
        min-height: 70px;
    }

    .heatmap-symbol {
        font-size: var(--font-size-sm);
    }

    .heatmap-change {
        font-size: var(--font-size-xs);
    }

    .page-title {
        font-size: var(--font-size-lg);
    }

    .analysis-block {
        padding: var(--space-lg);
    }

    .block-body {
        padding: var(--space-md);
    }

    .insight-box {
        flex-direction: column;
        padding: var(--space-md);
    }

    .stock-info-grid {
        grid-template-columns: 1fr;
    }

    /* --- Modals near fullscreen --- */
    .modal {
        padding: 8px;
    }
    .modal-content {
        max-width: none !important;
        width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 16px) !important;
        margin: 8px !important;
        border-radius: 12px !important;
        padding: var(--space-lg);
    }
    .modal-content.large,
    .modal-content.full {
        width: calc(100vw - 16px) !important;
        max-height: calc(100vh - 16px) !important;
    }

    /* --- Tab bars horizontal scroll --- */
    .pf-stock-subtabs,
    .pf-action-subtabs,
    .cg-disc-subtabs,
    .bond-tab-bar,
    .bk-subtabs,
    .idx-tab-bar,
    .ss-tab-bar,
    .ss-rec-subtabs,
    .sys-tab-bar,
    .crypt-screen-tabs {
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        padding-bottom: 4px;
    }
    .pf-stock-subtabs::-webkit-scrollbar,
    .pf-action-subtabs::-webkit-scrollbar,
    .cg-disc-subtabs::-webkit-scrollbar,
    .bond-tab-bar::-webkit-scrollbar,
    .bk-subtabs::-webkit-scrollbar,
    .idx-tab-bar::-webkit-scrollbar,
    .ss-tab-bar::-webkit-scrollbar,
    .ss-rec-subtabs::-webkit-scrollbar,
    .sys-tab-bar::-webkit-scrollbar,
    .crypt-screen-tabs::-webkit-scrollbar {
        display: none;
    }

    /* Tab items don't shrink */
    .pf-stock-tab,
    .cg-disc-subtab,
    .bond-tab,
    .bk-subtab,
    .idx-tab,
    .ss-tab,
    .ss-rec-tab,
    .sys-tab,
    .crypt-screen-tab-btn {
        flex-shrink: 0;
        white-space: nowrap;
    }

    /* --- All multi-col grids 1 col --- */
    .stk-grid-2,
    .stk-grid-3,
    .crypt-grid-2,
    .crypt-grid-3,
    .cg-leader-grid,
    .cg-ai-cards-grid,
    .pf-overview-body,
    .pf-dashboard-compact,
    .pf-alloc-grid,
    .pf-action-cards-grid,
    .sys-health-grid,
    .sys-maint-grid,
    .sys-suggest-grid,
    .ss-hero-strip,
    .ss-compare-grid {
        grid-template-columns: 1fr !important;
    }

    /* --- Table overflow wrappers --- */
    .cg-ideal-table-wrap,
    .bond-market-page .block-body,
    .macro-table-wrap {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }
}

/* ==========================================
 * Small Mobile (<=480px)
 * ========================================== */
@media (max-width: 480px) {
    .heatmap-grid {
        grid-template-columns: repeat(2, 1fr);
    }

    .stat-cards-grid {
        grid-template-columns: 1fr;
    }

    .heatmap-btn {
        padding: var(--space-xs);
        min-height: 60px;
    }

    .main-content {
        padding: var(--space-sm);
    }

    .block-header {
        padding: var(--space-sm) var(--space-md);
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    .block-header h3 {
        font-size: var(--font-size-sm);
    }

    .view-large-btn {
        align-self: flex-end;
    }

    .donate-btn {
        font-size: var(--font-size-xs);
        padding: var(--space-xs) var(--space-sm);
    }

    .header-meta {
        flex-direction: column;
        align-items: flex-start;
        gap: var(--space-sm);
    }

    .index-stats-grid {
        grid-template-columns: 1fr;
    }

    .quick-stats-bar {
        flex-direction: column;
    }

    .quick-stat {
        flex-direction: row;
        justify-content: space-between;
        width: 100%;
    }

    /* Page title compact */
    .page-title {
        font-size: 1rem;
    }

    /* Remove empty state min-height */
    .empty-state,
    .section-content {
        min-height: auto;
    }

    /* Section nav narrower on small screens */
    .section-nav {
        width: 200px;
        right: -200px;
    }
    .section-nav.open {
        right: 0;
    }
}

/* Reduced Motion */
@media (prefers-reduced-motion: reduce) {
    *,
    *::before,
    *::after {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
        scroll-behavior: auto !important;
    }
}

/* High Contrast Mode */
@media (prefers-contrast: high) {
    :root {
        --color-border: #000000;
        --shadow-sm: none;
        --shadow-md: none;
        --shadow-lg: none;
    }

    .heatmap-btn,
    .stat-card,
    .analysis-block {
        border-width: 2px;
    }
}

/* Print Styles */
@media print {
    .sidebar,
    .section-nav,
    .mobile-menu-btn,
    .mobile-section-btn,
    .mobile-header-bar,
    .donate-btn,
    .theme-toggle,
    .modal {
        display: none !important;
    }

    .dashboard {
        display: block;
    }

    .main-content {
        padding: 0;
    }

    .heatmap-btn:hover {
        transform: none;
        box-shadow: none;
    }
}