/* css/responsive.css - Responsive Design for Mobile & Tablet */

/* ===== ALWAYS VISIBLE: Fetch button label on all screen sizes ===== */
#headerFetchBtn .btn-label {
    display: inline !important;
    font-size: 13px;
    font-weight: 600;
}

/* ===== MOBILE BOTTOM NAV (hidden on desktop) ===== */
.mobile-bottom-nav {
    display: none;
}

.mobile-more-sheet {
    display: none;
}

.mobile-more-overlay {
    display: none;
    position: fixed;
    inset: 0;
    z-index: 940;
    background: rgba(0, 0, 0, 0.3);
    opacity: 0;
    pointer-events: none;
    transition: opacity 0.3s ease;
}

.mobile-more-overlay.visible {
    display: block;
    opacity: 1;
    pointer-events: auto;
}

/* ===== TABLET LANDSCAPE (1024px and below) ===== */
@media (max-width: 1024px) {
    .header-title-group h1 {
        font-size: 18px;
    }

    .chart-options {
        font-size: 11px;
    }

    .btn-header-action .btn-label {
        display: none;
    }

    .main-tab-btn {
        padding: 5px 8px;
        font-size: 11px;
    }

    .tab-icon {
        width: 18px;
        height: 18px;
    }

    .header-hamburger {
        min-width: 44px;
        min-height: 44px;
    }

    .btn-header-action {
        min-width: 44px;
        min-height: 44px;
    }
}

/* ===== TABLET PORTRAIT (768px and below) ===== */
@media (max-width: 768px) {
    .main-grid {
        grid-template-columns: 1fr;
    }

    /* Push top-panel-container below the fixed header */
    #top-panel-container {
        margin-top: 60px;
    }

    .container {
        padding: 12px;
    }

    /* ======================================================
       MODULE MOBILE LAYOUT — stack all side-by-side panels
       Uses attribute selectors to cover JS-rendered inline styles
       ====================================================== */

    /* Network: CSS-class layout */
    .network-grid {
        grid-template-columns: 1fr !important;
    }
    .network-controls {
        flex-wrap: wrap !important;
    }
    /* Network sidebar fills full width on mobile */
    .network-sidebar {
        width: 100% !important;
        max-width: 100% !important;
    }

    /* Network view-tabs — scroll horizontally on mobile */
    .view-tabs {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        scrollbar-width: none;
        padding-bottom: 0;
        border-bottom: 2px solid var(--border-color);
    }
    .view-tabs::-webkit-scrollbar {
        display: none;
    }
    .view-tab-btn {
        flex-shrink: 0;
        padding: 10px 16px;
        font-size: 13px;
        white-space: nowrap;
    }

    /* Sankey / network viz — viewBox SVG fills container, no horizontal scroll needed */
    #networkVizContainer {
        padding: 12px !important;
        overflow: hidden;
    }
    #sankeyChart {
        height: 420px !important;
    }

    /* Evolution charts — keep full width, reduce height */
    #evolutionChart,
    #worldEvolutionChart {
        max-height: 280px;
    }

    /* Intra-Group: stack chord + sankey vertically */
    .intra-group-layout {
        grid-template-columns: 1fr !important;
    }
    .chart-box {
        height: auto !important;
        min-height: 380px;
    }
    #chordChart {
        height: 350px !important;
    }
    #groupSankeyChart {
        height: 350px !important;
    }

    /* Metrics panel — 1 column on mobile */
    .metrics-panel {
        grid-template-columns: 1fr !important;
    }

    /* Topology: stack 2D + 3D panels vertically on portrait mobile */
    .topology-panels-container {
        flex-direction: column !important;
        height: auto !important;
        padding: 0 !important;
    }
    #topology2DBox,
    #topology3DBox {
        width: 100% !important;
        height: 360px !important;
        flex: none !important;
    }

    /* Topology filters bar: two-row layout on mobile */
    .topology-filters-bar {
        flex-wrap: wrap !important;
        justify-content: flex-start !important;
        padding: 8px 12px;
        gap: 8px;
    }

    /* FLOWS button group scrolls horizontally within its row */
    .topology-filters-bar > div:first-child {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-shrink: 0;
        max-width: 100%;
        scrollbar-width: none;
    }
    .topology-filters-bar > div:first-child::-webkit-scrollbar {
        display: none;
    }

    /* Separator hidden on mobile */
    .topology-filters-bar > div:nth-child(2) {
        display: none;
    }

    /* Sliders group wraps to second row, scrolls horizontally */
    .topology-filters-bar > div:last-child {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        max-width: 100%;
        scrollbar-width: none;
    }
    .topology-filters-bar > div:last-child::-webkit-scrollbar {
        display: none;
    }

    /* Topology header area spacing */
    #topologyView > div > div:first-child {
        margin: 0 !important;
    }

    /* DSA: already has 1fr fallback, reinforce */
    .dsa-grid {
        grid-template-columns: 1fr !important;
    }

    /* ---- Inline style overrides via attribute selectors ---- */

    /* 2-col grids: 1fr 1fr  (also catches 1fr 1fr 1fr, 1fr 1fr 1fr 1fr) */
    [style*="grid-template-columns: 1fr 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* repeat(2,…) variants */
    [style*="grid-template-columns: repeat(2, 1fr)"],
    [style*="grid-template-columns: repeat(2,1fr)"] {
        grid-template-columns: 1fr !important;
    }

    /* 3-col grids */
    [style*="grid-template-columns: repeat(3, 1fr)"],
    [style*="grid-template-columns: repeat(3,1fr)"] {
        grid-template-columns: 1fr 1fr !important;
    }

    /* Nowcasting: main 1fr 2fr split → single column */
    [style*="grid-template-columns: 1fr 2fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Nowcasting maritime: 180px sidebar → full width */
    [style*="grid-template-columns: 180px 1fr"] {
        grid-template-columns: 1fr !important;
    }

    /* Fixed-px sidebar layouts */
    [style*="grid-template-columns: 1fr 350px"],
    [style*="grid-template-columns: 1fr 380px"] {
        grid-template-columns: 1fr !important;
    }

    /* Allow all inline flex-nowrap to wrap */
    [style*="flex-wrap: nowrap"] {
        flex-wrap: wrap !important;
    }

    /* Charts control bar: reduce gap for mobile */
    [style*="grid-template-columns: 1fr 1fr 1fr 1fr auto auto"] {
        grid-template-columns: 1fr 1fr !important;
        gap: 6px !important;
    }

    /* Toggle button always visible on mobile */
    #topPanelToggle {
        display: flex;
    }

    /* ---- HIDE Settings sidebar by default on mobile ---- */
    .sidebar {
        display: none !important;
    }

    /* ---- Show Settings sidebar as full-screen overlay when opened ---- */
    .sidebar.mobile-settings-open {
        display: block !important;
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        width: 100% !important;
        height: 100dvh !important;
        z-index: 2000 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        transform: none !important;
        visibility: visible !important;
        border-radius: 0 !important;
        background: var(--sidebar-bg) !important;
        padding: 0 16px 80px !important;
        box-sizing: border-box !important;
    }

    /* Show contents inside open settings sidebar overlay */
    .sidebar.mobile-settings-open .mobile-settings-panel-header {
        display: flex !important;
        align-items: center !important;
        justify-content: space-between !important;
        padding: 16px 0 12px !important;
        border-bottom: 1px solid var(--border-color) !important;
        margin-bottom: 12px !important;
        position: sticky !important;
        top: 0 !important;
        background: var(--sidebar-bg) !important;
        z-index: 1 !important;
    }

    .sidebar.mobile-settings-open .mobile-settings-panel-title {
        display: block !important;
        font-size: 17px;
        font-weight: 700;
        color: var(--text-primary);
    }

    .sidebar.mobile-settings-open .mobile-settings-panel-close {
        display: flex !important;
        align-items: center;
        justify-content: center;
        background: none;
        border: none;
        color: var(--text-primary);
        cursor: pointer;
        padding: 4px;
        border-radius: 6px;
    }

    .sidebar.mobile-settings-open .mobile-settings-modules {
        display: block !important;
    }

    /* Ensure year buttons and country groups are fully visible */
    .sidebar.mobile-settings-open .relative-date-buttons {
        display: flex !important;
        flex-wrap: wrap !important;
        gap: 6px !important;
        margin-top: 8px !important;
        margin-bottom: 12px !important;
    }

    .sidebar.mobile-settings-open .relative-date-buttons button {
        flex: 1 1 auto !important;
        min-width: 32px !important;
        font-size: 10px !important;
        padding: 4px 6px !important;
    }

    .sidebar.mobile-settings-open .quick-select {
        display: grid !important;
        grid-template-columns: repeat(4, 1fr) !important;
    }

    .sidebar.mobile-settings-open .control-group {
        display: block !important;
    }

    .sidebar.mobile-settings-open label {
        display: block !important;
    }

    /* Reduce action button sizes in mobile overlay */
    .sidebar.mobile-settings-open .action-buttons-grid .btn-primary,
    .sidebar.mobile-settings-open .action-buttons-grid .btn-secondary,
    .sidebar.mobile-settings-open .action-buttons-grid .crisis-btn {
        font-size: 11px !important;
        padding: 6px 8px !important;
        height: auto !important;
        gap: 4px !important;
    }

    .sidebar.mobile-settings-open .action-buttons-grid .btn-icon-small {
        width: 26px !important;
        height: 26px !important;
    }

    /* Reduce quick select button sizes */
    .sidebar.mobile-settings-open .quick-select button {
        font-size: 9px !important;
        padding: 4px 2px !important;
    }

    .sidebar-close-btn {
        display: none !important;
    }

    .sidebar-desktop-collapse-btn {
        display: none !important;
    }
    
    /* ---- Mobile data selection accordion as collapsible panel at top ---- */
    #indicator-accordion {
        position: relative !important;
        top: auto !important;
        left: auto !important;
        width: 100% !important;
        height: auto !important;
        border-radius: var(--radius-md) !important;
        z-index: auto !important;
        overflow-y: visible !important;
        overflow-x: hidden !important;
        transform: none !important;
        visibility: visible !important;
        transition: max-height 0.3s ease !important;
        box-shadow: var(--shadow-sm) !important;
        margin-bottom: 12px !important;
        max-height: 800px !important;
        background: var(--sidebar-bg) !important;
        border: 1px solid var(--border-color) !important;
        display: block !important;
        padding: 12px !important;
    }

    #indicator-accordion.sidebar-collapsed {
        max-height: 0 !important;
        overflow: hidden !important;
        border: none !important;
        box-shadow: none !important;
        margin-bottom: 0 !important;
        padding: 0 !important;
    }
    
    /* ---- HIDE Mobile settings panel on mobile ---- */
    .mobile-settings-panel-header {
        display: none !important;
    }
    
    .mobile-settings-modules {
        display: none !important;
    }

    .mobile-settings-panel-title {
        display: none !important;
    }

    .mobile-settings-panel-close {
        display: none !important;
    }

    .mobile-settings-section-label {
        font-size: 10px;
        font-weight: 700;
        text-transform: uppercase;
        letter-spacing: 0.08em;
        color: var(--text-secondary);
        margin-bottom: 6px;
    }

    .mobile-settings-modules-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
        margin-bottom: 6px;
    }

    .mobile-settings-module-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 3px;
        padding: 6px 4px;
        border-radius: 8px;
        border: 1px solid var(--border-color);
        background: var(--card-bg);
        cursor: pointer;
        color: var(--text-primary);
        font-size: 9px;
        font-weight: 400;
        min-height: 54px;
        transition: background 0.15s ease;
    }

    .mobile-settings-module-item img {
        width: 26px;
        height: 26px;
        object-fit: contain;
    }

    .mobile-settings-module-item:active {
        background: var(--accent-color);
        color: white;
    }

    .mobile-beta-separator {
        grid-column: 1 / -1;
        display: flex;
        align-items: center;
        gap: 8px;
        font-size: 9px;
        font-weight: 700;
        letter-spacing: 0.07em;
        text-transform: uppercase;
        color: #b45309;
        padding: 4px 2px;
        cursor: pointer;
        user-select: none;
        border-radius: 4px;
        transition: background 0.15s;
    }
    .mobile-beta-separator:hover {
        background: rgba(245, 158, 11, 0.08);
    }
    .mobile-beta-separator .beta-chevron {
        font-size: 8px;
        transition: transform 0.2s ease;
        display: inline-block;
        margin-left: auto;
    }
    .mobile-beta-separator.expanded .beta-chevron {
        transform: rotate(90deg);
    }

    .mobile-beta-separator::before,
    .mobile-beta-separator::after {
        content: '';
        flex: 1;
        height: 1px;
        background: rgba(245, 158, 11, 0.35);
    }
    .mobile-beta-separator::after {
        display: none;
    }

    /* Mobile beta group: hidden by default */
    .mobile-beta-group {
        display: none;
        grid-column: 1 / -1;
        grid-template-columns: repeat(3, 1fr);
        gap: 6px;
    }
    .mobile-beta-group.expanded {
        display: grid;
    }

    /* Hamburger hidden on mobile — settings tab handles it */
    .header-hamburger {
        display: none;
    }

    .header {
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        padding: 8px 12px;
        border-radius: 0;
        z-index: 1000;
        width: 100%;
        box-sizing: border-box;
        background: var(--header-bg);
        backdrop-filter: blur(12px);
        -webkit-backdrop-filter: blur(12px);
        box-shadow: var(--shadow-md);
        border-bottom: 1px solid var(--border-color);
    }

    .header-logo {
        height: 32px;
    }

    .header-title-group h1 {
        font-size: 16px;
    }

    .performance-badge {
        display: none;
    }

    .btn-header-action .btn-label {
        display: none;
    }

    .header-left {
        gap: 8px;
    }

    .header-actions {
        gap: 6px;
    }

    .main-tabs-nav {
        display: none !important;
    }

    .mobile-bottom-nav {
        display: flex;
        position: fixed;
        bottom: 0;
        left: 0;
        right: 0;
        height: 60px;
        background: var(--card-bg);
        border-top: 1px solid var(--border-color);
        box-shadow: 0 -2px 10px rgba(0, 0, 0, 0.08);
        z-index: 900;
        align-items: stretch;
        padding: 0 4px;
        padding-bottom: env(safe-area-inset-bottom, 0);
    }

    .map-controls-row {
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scroll-behavior: smooth;
        min-width: 0;
        padding: 2px 6px;
        margin-bottom: 3px;
        gap: 3px;
        font-size: 8px;
        align-items: center;
        height: auto;
        line-height: 1;
    }

    .map-control-label {
        font-size: 8px;
        white-space: nowrap;
        line-height: 1;
    }

    .map-control-select,
    .map-control-input,
    .map-action-btn {
        padding: 2px 4px;
        font-size: 8px;
        height: 22px;
        line-height: 1;
    }

    /* Settings panel: year buttons all in one row */
    .sidebar .relative-date-buttons {
        display: flex !important;
        flex-wrap: nowrap !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        gap: 4px;
        margin-top: 6px;
        margin-bottom: 8px;
        padding-bottom: 2px;
        justify-content: flex-start !important;
    }

    .sidebar .relative-date-buttons button {
        flex: 1 1 auto !important;
        min-width: 32px;
        font-size: 10px;
        padding: 4px 6px;
        white-space: nowrap;
    }

    /* Settings panel: 4 country groups per row */
    .sidebar .quick-select {
        grid-template-columns: repeat(4, 1fr);
        gap: 4px;
    }

    .sidebar .quick-select button {
        font-size: 9px;
        padding: 4px 2px;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    .mobile-nav-btn {
        flex: 1;
        display: flex;
        flex-direction: column;
        align-items: center;
        justify-content: center;
        gap: 2px;
        background: none;
        border: none;
        color: var(--text-muted);
        font-size: 10px;
        font-weight: 400;
        cursor: pointer;
        padding: 4px 2px;
        transition: color var(--transition-fast);
        position: relative;
    }

    .mobile-nav-btn img,
    .mobile-nav-btn svg {
        width: 22px;
        height: 22px;
        object-fit: contain;
        opacity: 0.5;
        transition: opacity var(--transition-fast);
    }

    .mobile-nav-btn.active {
        color: var(--accent-color);
    }

    .mobile-nav-btn.active img {
        opacity: 1;
        filter: none;
    }

    .mobile-nav-btn.active::after {
        content: '';
        position: absolute;
        top: 0;
        left: 25%;
        right: 25%;
        height: 2px;
        background: var(--accent-color);
        border-radius: 0 0 2px 2px;
    }

    .mobile-nav-btn:not(.active) img {
        filter: grayscale(100%);
    }

    .mobile-nav-btn.active svg {
        opacity: 1;
        color: var(--accent-color);
    }

    .content {
        width: 100%;
        padding-bottom: 70px;
    }

    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    .main-grid.sidebar-collapsed .content {
        padding-left: 0;
    }

    /* AI search panel: compact layout on mobile */
    .ai-search-layout {
        display: flex;
        flex-direction: column;
        gap: 6px;
    }

    /* Row 1: Title + Search button side by side */
    .ai-search-title-row {
        display: flex;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
    }

    .ai-search-panel h3 {
        font-size: 13px !important;
        white-space: normal !important;
        flex: 1;
    }

    #aiSearchInput {
        min-width: unset !important;
        width: 100% !important;
        font-size: 12px !important;
        box-sizing: border-box;
    }

    #aiSearchBtn.ai-search-button {
        flex-shrink: 0;
        padding: 5px 10px !important;
        font-size: 11px !important;
        min-height: 32px !important;
        min-width: unset !important;
        white-space: nowrap;
    }

    #aiSearchBtn.ai-search-button .btn-icon-small {
        width: 14px !important;
        height: 14px !important;
    }

    /* Row 3: Examples compact */
    .ai-search-panel .ai-search-examples {
        font-size: 9px !important;
        flex-wrap: wrap !important;
        white-space: normal !important;
        line-height: 1.6;
    }

    /* Indicator list: compact font/padding to match providers on mobile */
    .indicator-item {
        padding: 5px 8px !important;
        margin-bottom: 1px !important;
    }

    .indicator-item label {
        font-size: 10px !important;
        white-space: normal !important;
    }

    .indicator-item input[type="checkbox"] {
        width: 14px !important;
        height: 14px !important;
        margin-right: 6px !important;
    }

    .dataset-dropdown {
        padding: 6px !important;
    }

    /* Theme dropdown: readable but compact */
    .theme-option {
        font-size: 11px !important;
        padding: 5px 8px !important;
        gap: 6px !important;
    }

    .theme-option .inline-icon-small {
        width: 14px !important;
        height: 14px !important;
    }

    /* Provider/dataset buttons: smaller on mobile to match app font */
    .provider-buttons-container {
        gap: 5px !important;
        padding-bottom: 8px !important;
        margin-bottom: 8px !important;
        justify-content: flex-start !important;
    }

    .provider-buttons-container span {
        font-size: 10px !important;
    }

    .provider-buttons-container button {
        font-size: 10px !important;
        padding: 3px 8px !important;
        border-radius: 12px !important;
        min-height: unset !important;
    }

    .dataset-buttons-container button {
        font-size: 10px !important;
        padding: 3px 8px !important;
        border-radius: 6px !important;
        min-height: unset !important;
    }

    /* Top panel: compact on mobile, toggle tab stays tappable */
    .top-panel-container {
        margin-bottom: 24px; /* space for the toggle tab that hangs below */
    }

    #top-panel {
        padding: 8px 12px !important;
        max-height: 40vh;
    }

    /* Keep toggle small — override the touch 44px min-height rule */
    #topPanelToggle {
        min-height: 16px !important;
        height: 16px !important;
        width: 80px !important;
        font-size: 8px !important;
    }

    .chart-card {
        margin-bottom: 12px;
    }

    .chart-options {
        flex-wrap: wrap;
        gap: 5px;
        font-size: 10px;
    }

    .chart-options > div {
        flex: 1 1 auto;
        min-width: 120px;
    }

    .beta-options {
        flex-wrap: wrap;
    }

    #dataTable {
        font-size: 11px;
    }

    #dataTable th,
    #dataTable td {
        padding: 6px;
    }

    .button-group {
        flex-direction: column;
        gap: 8px;
    }

    .btn-primary,
    .btn-secondary,
    .btn-info,
    .btn-warning {
        width: 100%;
        padding: 10px;
    }

    .mobile-more-sheet {
        display: block;
        position: fixed;
        bottom: -100%;
        left: 0;
        right: 0;
        z-index: 950;
        transition: bottom 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    }

    .mobile-more-sheet.open {
        bottom: 60px;
        bottom: calc(60px + env(safe-area-inset-bottom, 0));
    }

    .mobile-more-sheet-inner {
        background: var(--card-bg);
        border-radius: var(--radius-xl) var(--radius-xl) 0 0;
        padding: 12px 16px 16px;
        box-shadow: 0 -4px 20px rgba(0, 0, 0, 0.12);
        border: 1px solid var(--border-color);
        border-bottom: none;
    }

    .mobile-more-handle {
        width: 36px;
        height: 4px;
        background: var(--border-color);
        border-radius: 2px;
        margin: 0 auto 12px;
    }

    .mobile-more-grid {
        display: grid;
        grid-template-columns: repeat(4, 1fr);
        gap: 8px;
    }

    .mobile-more-item {
        display: flex;
        flex-direction: column;
        align-items: center;
        gap: 4px;
        padding: 10px 4px;
        background: var(--bg-color);
        border: 1px solid var(--border-color);
        border-radius: var(--radius-md);
        color: var(--text-secondary);
        font-size: 10px;
        font-weight: 400;
        cursor: pointer;
        transition: all var(--transition-fast);
    }

    .mobile-more-item img {
        width: 24px;
        height: 24px;
        object-fit: contain;
    }

    .mobile-more-item:hover,
    .mobile-more-item:active {
        background: var(--border-color);
        border-color: var(--accent-color);
    }

}

/* ===== MOBILE (480px and below) ===== */
@media (max-width: 480px) {
    .container {
        padding: 8px;
    }

    .header {
        padding: 6px 10px;
    }

    .header-logo {
        height: 28px;
    }

    .header-title-group h1 {
        font-size: 14px;
    }

    .header-hamburger {
        width: 34px;
        height: 34px;
    }

    .btn-header-action {
        padding: 4px 6px;
    }

    .btn-header-action img {
        width: 20px;
        height: 20px;
    }

    .btn-header-round {
        width: 32px;
        height: 32px;
    }

    .sidebar {
        width: 100%;
        border-radius: 0;
    }

    .control-group {
        margin-bottom: 12px;
    }

    .control-group label {
        font-size: 12px;
    }

    .country-list {
        max-height: 250px;
    }

    .country-item {
        padding: 8px 4px;
        font-size: 11px;
    }

    #indicator-accordion {
        font-size: 11px;
    }

    .accordion-header {
        padding: 8px;
        font-size: 11px;
    }

    .accordion-content {
        padding: 5px;
    }

    .indicator-item {
        padding: 6px 4px;
        font-size: 10px;
    }

    .chart-container {
        height: 250px !important;
        min-height: 250px;
    }

    /* Keep chart-options as a row on mobile — button + grid side by side */
    .chart-options {
        flex-direction: row;
        flex-wrap: wrap;
        align-items: flex-start;
        gap: 6px;
    }

    /* 2-column grid for Frequency/Transform/Type/Unit on mobile */
    .chart-opts-grid {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 4px;
        flex: 1 1 auto;
    }

    /* Each label+select stacks vertically within its grid cell */
    .chart-opt-item {
        flex-direction: column;
        align-items: flex-start;
        gap: 2px;
    }

    .chart-opt-select {
        width: 100%;
    }

    /* Hide hint on mobile to save space */
    .chart-opts-hint {
        display: none;
    }

    /* Focus buttons row scrolls horizontally */
    #global-focus-container {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        flex-wrap: nowrap !important;
        max-width: 100%;
        scrollbar-width: none;
    }

    #global-focus-container::-webkit-scrollbar {
        display: none;
    }

    #global-focus-container .focus-btn {
        flex-shrink: 0;
    }

    .beta-toggle-btn {
        font-size: 10px;
        padding: 4px 8px;
    }

    .table-wrapper {
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
    }

    #dataTable {
        font-size: 10px;
        min-width: 600px;
    }

    #dataTable th,
    #dataTable td {
        padding: 4px;
        white-space: nowrap;
    }

    .modal-content {
        width: 95% !important;
        max-width: 95% !important;
        margin: 10px auto;
        padding: 15px;
    }

    .modal-header h3 {
        font-size: 1.1rem;
    }

    input[type="text"],
    input[type="month"],
    input[type="password"],
    input[type="number"],
    select,
    textarea {
        font-size: 16px;
        padding: 10px;
    }

    .quick-select {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 5px;
    }

    .button-group {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 5px;
    }

    .cache-status {
        font-size: 10px;
        padding: 4px 8px;
        right: 5px;
        top: 5px;
    }

    .alert {
        font-size: 11px;
        padding: 8px;
    }

    .theme-options {
        grid-template-columns: repeat(4, 1fr);
    }

    .theme-option {
        padding: 8px;
        font-size: 16px;
    }

    .recent-search-item {
        font-size: 10px !important;
        padding: 6px !important;
    }

    .mobile-more-grid {
        grid-template-columns: repeat(4, 1fr);
        gap: 6px;
    }

    .mobile-more-item {
        padding: 8px 2px;
        font-size: 9px;
    }

    .mobile-more-item img {
        width: 20px;
        height: 20px;
    }
}

/* ===== LANDSCAPE ORIENTATION (Mobile) ===== */
@media (max-width: 768px) and (orientation: landscape) {
    .sidebar {
        width: 260px;
    }

    .chart-container {
        height: 300px !important;
    }

    .mobile-bottom-nav {
        height: 50px;
    }

    .mobile-nav-btn span {
        display: none;
    }

    .mobile-more-sheet.open {
        bottom: 50px;
    }
}

/* ===== TOUCH DEVICE IMPROVEMENTS ===== */
@media (hover: none) and (pointer: coarse) {
    button,
    .btn-primary,
    .btn-secondary,
    .btn-info,
    .btn-warning {
        min-height: 44px;
    }

    .mobile-nav-btn {
        min-height: 44px;
    }

    .mobile-more-item {
        min-height: 44px;
    }

    .btn-header-action {
        min-height: 44px;
    }

    .header-hamburger {
        min-height: 44px;
    }

    input[type="checkbox"] {
        width: 20px;
        height: 20px;
    }

    button:active,
    .theme-option:active,
    .country-item:active {
        transform: scale(0.95);
        opacity: 0.8;
    }

    .chart-options button:hover,
    .theme-option:hover {
        transform: none;
    }
}

/* ===== HIGH DPI DISPLAYS ===== */
@media (-webkit-min-device-pixel-ratio: 2),
       (min-resolution: 192dpi) {
    .chart-card,
    .sidebar,
    .header {
        border-width: 0.5px;
    }
}

/* ===== PRINT STYLES ===== */
@media print {
    .sidebar,
    .header-hamburger,
    #topPanelToggle,
    .theme-selector,
    .button-group,
    .cache-status,
    .mobile-bottom-nav,
    .mobile-more-sheet {
        display: none !important;
    }

    .main-grid {
        grid-template-columns: 1fr;
    }

    .chart-card {
        page-break-inside: avoid;
        break-inside: avoid;
    }

    body {
        background: white !important;
    }

    .chart-card,
    .header {
        background: white !important;
        box-shadow: none !important;
    }

    * {
        color: black !important;
    }
}

/* ===== ACCESSIBILITY IMPROVEMENTS ===== */
@media (prefers-reduced-motion: reduce) {
    * {
        animation-duration: 0.01ms !important;
        animation-iteration-count: 1 !important;
        transition-duration: 0.01ms !important;
    }
}

@media (prefers-contrast: high) {
    .chart-card,
    .sidebar,
    button {
        border-width: 2px !important;
        border-color: currentColor !important;
    }
}

/* Body scroll lock when sidebar/sheet is open */
body.scroll-locked {
    overflow: hidden;
    position: fixed;
    width: 100%;
}

/* ===== CHART LEGEND — MOBILE 2-PER-ROW ===== */
@media (max-width: 768px) {
    .custom-chart-legend {
        display: grid !important;
        grid-template-columns: 1fr 1fr;
        gap: 4px !important;
        padding: 8px !important;
    }

    .custom-chart-legend .legend-item {
        width: auto !important;
        max-width: none !important;
        min-width: 0 !important;
        padding: 4px 6px !important;
        font-size: 11px;
        overflow: hidden;
        white-space: nowrap;
        text-overflow: ellipsis;
    }

    .custom-chart-legend .legend-item span:last-child {
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
    }
}