/* ========================================
   VB SCANNER MOBILE RESPONSIVE STYLES
   ======================================== */

/* Hide mobile-only elements on desktop */
@media (min-width: 769px) {
    .vbd-mobile-only {
        display: none !important;
    }

    /* Hide mobile logos on desktop */
    .vbd-logo-mobile-light,
    .vbd-logo-mobile-dark {
        display: none !important;
    }

    /* Hide mobile navigation panel on desktop */
    .vbd-mobile-nav {
        display: none !important;
    }

    /* Hide filter overlay on desktop */
    .vbd-filter-overlay {
        display: none !important;
    }
}

/* Mobile styles (max-width: 768px) */
@media (max-width: 768px) {
    /* Reset body and html to ensure no gaps at top */
    html, body {
        margin: 0 !important;
        padding: 0 !important;
        overflow-x: hidden !important;
        max-width: 100vw !important;
    }

    /* AGGRESSIVE WHITE SPACE REMOVAL */
    #vbd-scanner,
    #vbd-scanner.vbd-container,
    .vbd-container {
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
        min-height: 100vh !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Main content area takes remaining space */
    .vbd-content-wrapper {
        flex: 1 !important;
        display: flex !important;
        flex-direction: column !important;
        padding-top: 140px; /* 52px header + 40px controls + 48px info */
    }

    body.admin-bar .vbd-content-wrapper {
        padding-top: 186px; /* 46px admin + 140px bars */
    }

    .vbd-main-content {
        flex: 1 !important;
        overflow-y: auto !important;
        padding: 0;
    }

    /* Force all parent containers to have no top spacing */
    body,
    body > *,
    .site,
    .site-content,
    .content-area,
    .entry-content,
    .page-content,
    article,
    main,
    .ast-container,
    .wp-site-blocks,
    .wp-block-post-content {
        padding-top: 0 !important;
        margin-top: 0 !important;
    }

    /* Hide desktop navigation sidebar completely on mobile */
    .vbd-nav-sidebar {
        display: none !important;
    }

    /* Hide refresh bar on mobile to avoid white gap */
    .vbd-refresh-bar-container {
        display: none !important;
    }

    /* Mobile header - fixed at top */
    .vbd-header {
        position: fixed !important;
        top: 0 !important;
        left: 0 !important;
        right: 0 !important;
        z-index: 1000 !important; /* Above content, below filter panel */
        background: var(--vbd-bg-secondary);
        padding: 8px !important;
        height: 52px !important;
        display: flex;
        pointer-events: auto !important;
        flex-direction: row;
        align-items: center;
        justify-content: space-between;
        gap: 8px;
        border-bottom: 1px solid var(--vbd-border);
        margin: 0 !important;
    }

    /* Info bar fixed positioning */
    .vbd-info-bar {
        margin-top: 0 !important;
        position: fixed;
        top: 96px; /* 52px header + 44px controls (with extra padding) */
        left: 0;
        right: 0;
        z-index: 999 !important; /* Below header, above content */
        background: var(--vbd-bg-primary);
        border-bottom: 1px solid var(--vbd-border);
        pointer-events: auto !important;
    }

    body.admin-bar .vbd-info-bar {
        top: 142px; /* 46px admin + 52px header + 44px controls */
    }

    /* Show mobile menu button on right */
    .vbd-mobile-menu-btn {
        display: flex !important;
        align-items: center;
        justify-content: center;
        width: 36px;
        height: 36px;
        padding: 6px;
        background: transparent;
        border: 1px solid var(--vbd-border);
        border-radius: 4px;
        color: var(--vbd-text-primary);
        cursor: pointer;
        order: 10; /* Push to end */
    }

    /* Header sections reorganized */
    .vbd-header-left {
        display: flex;
        align-items: center;
        gap: 8px;
        flex: 0 0 auto;
    }

    .vbd-header-center {
        display: none; /* Hide on mobile */
    }

    .vbd-header-right {
        display: flex;
        align-items: center;
        gap: 4px;
        flex: 0 0 auto;
    }

    /* Show filter toggle in header-right on mobile */
    .vbd-filter-toggle {
        display: flex !important;
        width: 36px;
        height: 36px;
        padding: 6px;
        margin: 0;
        background: transparent;
        border: 1px solid var(--vbd-border);
        border-radius: 4px;
        align-items: center;
        justify-content: center;
        order: 1;
        position: relative;
        z-index: 10;
        cursor: pointer;
        touch-action: manipulation;
    }

    .vbd-filter-toggle svg {
        width: 20px;
        height: 20px;
        pointer-events: none; /* Let clicks go through to button */
    }

    /* Make all header interactive elements work */
    .vbd-header select,
    .vbd-header button,
    .vbd-header .vbd-btn-icon,
    .vbd-header .vbd-select-compact {
        position: relative;
        z-index: 10;
        pointer-events: auto !important;
        touch-action: manipulation;
    }

    /* CLEAN LOGO IMPLEMENTATION - ONLY ONE LOGO VISIBLE */
    /* Force hide ALL desktop logos first */
    .vbd-header-left img.vbd-logo-light,
    .vbd-header-left img.vbd-logo-dark {
        display: none !important;
    }

    /* Hide ALL mobile logos by default */
    .vbd-header-left img.vbd-logo-mobile-light,
    .vbd-header-left img.vbd-logo-mobile-dark {
        display: none !important;
    }

    /* Show white logo by default (dark theme) */
    .vbd-header-left img.vbd-logo-mobile-dark {
        display: block !important;
        height: 32px !important;
        width: 32px !important;
        object-fit: contain !important;
    }

    /* Light theme: swap to dark logo */
    .vbd-light-theme .vbd-header-left img.vbd-logo-mobile-dark {
        display: none !important;
    }

    .vbd-light-theme .vbd-header-left img.vbd-logo-mobile-light {
        display: block !important;
        height: 32px !important;
        width: 32px !important;
        object-fit: contain !important;
    }

    /* Market status - hide desktop version, show mobile version in info bar */
    .vbd-market-status.vbd-desktop-only {
        display: none !important;
    }

    .vbd-market-status.vbd-mobile-only {
        display: inline-flex !important;
        padding: 2px 6px !important;
        font-size: 10px !important;
        margin-left: 8px !important;
        background: var(--vbd-bg-tertiary) !important;
        border: 1px solid var(--vbd-border) !important;
        border-radius: 4px !important;
    }

    .vbd-market-status .vbd-status-dot {
        width: 6px !important;
        height: 6px !important;
    }

    .vbd-market-status .vbd-status-text {
        font-size: 9px !important;
    }

    /* Hide selects on mobile main header - move to secondary bar */
    #vbd-watchlist-select,
    #vbd-status-select {
        display: none;
    }

    /* Icon buttons smaller and inline */
    .vbd-btn-icon {
        width: 36px !important;
        height: 36px !important;
        padding: 6px !important;
        min-width: unset !important;
    }

    /* Ensure theme toggle shows */
    #vbd-theme-toggle {
        display: flex !important;
        order: 2;
    }

    /* Ensure settings button shows */
    #vbd-column-settings {
        display: flex !important;
        order: 3;
    }

    #vbd-btn-refresh {
        display: none; /* Hide refresh on mobile */
    }

    /* Hide desktop-only elements */
    .vbd-desktop-only {
        display: none !important;
    }

    /* Show mobile-only elements */
    .vbd-mobile-only {
        display: block !important;
    }

    /* Add mobile control bar below header */
    .vbd-mobile-controls {
        display: flex !important;
        padding: 8px;
        padding-bottom: 12px; /* Add extra space at bottom */
        background: var(--vbd-bg-primary);
        border-bottom: 1px solid var(--vbd-border);
        gap: 8px;
        position: fixed;
        top: 52px;
        left: 0;
        right: 0;
        z-index: 998 !important; /* Below header and info bar */
        pointer-events: auto !important;
    }

    body.admin-bar .vbd-mobile-controls {
        top: 98px; /* 46px admin + 52px header */
    }

    .vbd-mobile-controls select {
        flex: 1;
        padding: 8px;
        font-size: 14px;
        background: var(--vbd-bg-secondary);
        border: 1px solid var(--vbd-border);
        color: var(--vbd-text-primary);
        border-radius: 4px;
        position: relative;
        z-index: 10;
        pointer-events: auto !important;
        touch-action: manipulation;
    }

    /* Info bar simplified */
    .vbd-info-bar {
        padding: 8px;
        flex-direction: row;
        justify-content: space-between;
        align-items: center;
        font-size: 12px;
    }

    .vbd-stats-group {
        display: flex;
        gap: 10px;
    }

    .vbd-stat {
        display: none; /* Hide stats on mobile */
    }

    /* Filter toggle moved to header - hide in info bar */
    .vbd-info-bar .vbd-filter-toggle {
        display: none !important;
    }

    /* Pagination minimal */
    .vbd-pagination-compact {
        display: flex;
        align-items: center;
        gap: 4px;
    }

    .vbd-page-info {
        font-size: 11px;
    }

    #vbd-page-numbers {
        display: none;
    }

    .vbd-page-select {
        width: 50px;
        padding: 4px;
        font-size: 11px;
    }

    /* Filter panel overlay - DISABLED for now to avoid blocking issues */
    .vbd-filter-overlay {
        display: none !important;
    }

    /* Filter panel as bottom sheet */
    .vbd-filter-panel {
        position: fixed !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        top: auto !important;
        width: 100% !important;
        max-width: 100vw !important;
        max-height: 70vh;
        transform: translateY(100%);
        transition: transform 0.3s ease;
        z-index: 1002 !important; /* Above overlay and content */
        border-radius: 16px 16px 0 0;
        box-shadow: 0 -2px 20px rgba(0,0,0,0.2);
        overflow-x: hidden !important;
        overflow-y: auto !important;
        box-sizing: border-box !important;
        touch-action: pan-y; /* Allow vertical scrolling */
        -webkit-overflow-scrolling: touch; /* Smooth scrolling on iOS */
    }

    /* Force no horizontal scroll on filter panel and all children */
    .vbd-filter-panel * {
        max-width: 100% !important;
        box-sizing: border-box !important;
    }

    /* Override desktop collapsible styles that might cause overflow */
    .vbd-collapsible.collapsed .vbd-filter-content {
        overflow: hidden !important;
        width: 100% !important;
    }

    .vbd-collapsible:not(.collapsed) .vbd-filter-content {
        max-height: none !important; /* Override desktop max-height */
        width: 100% !important;
    }

    .vbd-filter-panel:not(.collapsed) {
        transform: translateY(0) !important;
    }

    .vbd-filter-panel.collapsed {
        transform: translateY(100%) !important;
        width: 100% !important; /* Override desktop width: 0 */
        min-width: 100% !important;
        opacity: 1 !important; /* Override desktop opacity */
        overflow: hidden !important;
        pointer-events: none !important; /* Don't block when collapsed */
    }

    .vbd-filter-panel:not(.collapsed) {
        pointer-events: auto !important; /* Allow interactions when open */
    }

    /* Filter panel header with handle */
    .vbd-filter-panel-header {
        position: relative;
        padding: 20px 16px 16px !important;
        cursor: grab;
        display: flex;
        justify-content: space-between;
        align-items: center;
    }

    .vbd-filter-panel-header::before {
        content: '';
        position: absolute;
        top: 8px;
        left: 50%;
        transform: translateX(-50%);
        width: 40px;
        height: 4px;
        background: var(--vbd-border);
        border-radius: 2px;
    }

    /* Close button for mobile filter panel */
    .vbd-filter-close {
        display: block !important;
        background: none;
        border: none;
        color: var(--vbd-text-primary);
        font-size: 32px;
        line-height: 1;
        padding: 0;
        width: 32px;
        height: 32px;
        cursor: pointer;
        opacity: 0.7;
        transition: opacity 0.2s;
    }

    .vbd-filter-close:hover {
        opacity: 1;
    }

    /* Filter panel content scrollable */
    .vbd-filter-panel-content {
        max-height: calc(70vh - 60px);
        overflow-y: auto;
        overflow-x: hidden !important;
        padding: 0 16px 20px;
        width: 100%;
        box-sizing: border-box;
    }

    /* Filter sections more compact */
    .vbd-filter-section {
        padding-bottom: 12px;
        margin-bottom: 12px;
    }

    .vbd-filter-header {
        font-size: 13px;
        padding: 8px 0;
    }

    .vbd-filter-buttons {
        display: grid;
        grid-template-columns: repeat(3, 1fr);
        gap: 4px;
    }

    .vbd-filter-btn {
        padding: 8px 4px;
        font-size: 11px;
        touch-action: manipulation; /* Improve button responsiveness */
        -webkit-tap-highlight-color: rgba(0,0,0,0.1); /* Visual feedback */
    }

    .vbd-filter-range {
        display: flex;
        gap: 8px;
        align-items: center;
    }

    .vbd-filter-range label {
        display: flex;
        align-items: center;
        flex: 1;
        font-size: 11px;
        color: var(--vbd-text-secondary);
    }

    .vbd-filter-range input {
        width: 60px;
        padding: 4px;
        font-size: 12px;
        margin-left: 4px;
    }

    /* Make price section more compact */
    .vbd-filter-section[data-section="price"] .vbd-filter-content {
        padding: 12px 0;
    }

    /* Price filters use standard filter button styles, just make them slightly smaller */
    .vbd-price-filters .vbd-filter-btn {
        padding: 7px 10px;
        font-size: 11px;
    }

    /* Hide count for price filters since they don't have counts */
    .vbd-price-filters .vbd-filter-count {
        display: none;
    }

    /* Mobile Card Layout for Table Data */
    .vbd-table-wrapper {
        width: 100%;
        padding: 0 8px;
    }

    /* Hide traditional table on mobile */
    .vbd-trading-table {
        display: none !important;
    }

    /* Show mobile cards instead */
    .vbd-mobile-cards {
        display: block !important;
        padding: 12px;
        margin-top: 0; /* No margin needed, fixed elements don't affect flow */
        padding-bottom: 20px;
        min-height: 100vh;
    }

    body.admin-bar .vbd-mobile-cards {
        margin-top: 0; /* No margin needed here either */
    }

    .vbd-trade-card {
        background: var(--vbd-bg-secondary);
        border: 1px solid var(--vbd-border);
        border-radius: 12px;
        padding: 14px;
        margin-bottom: 12px;
        position: relative;
        transition: transform 0.2s, box-shadow 0.2s;
    }

    .vbd-trade-card:active {
        transform: scale(0.98);
    }

    /* Card Header */
    .vbd-card-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-bottom: 10px;
        padding-bottom: 8px;
        border-bottom: 1px solid var(--vbd-border);
    }

    .vbd-card-symbol {
        font-size: 16px;
        font-weight: 700;
        color: var(--vbd-text-primary);
    }

    .vbd-card-side {
        padding: 3px 8px;
        border-radius: 4px;
        font-size: 11px;
        font-weight: 600;
        text-transform: uppercase;
    }

    .vbd-card-side.long {
        background: rgba(0, 200, 83, 0.15);
        color: #00c853;
    }

    .vbd-card-side.short {
        background: rgba(255, 23, 68, 0.15);
        color: #ff1744;
    }

    /* Card Body - Grid Layout */
    .vbd-card-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 8px;
    }

    .vbd-card-item {
        display: flex;
        flex-direction: column;
        gap: 2px;
    }

    .vbd-card-label {
        font-size: 10px;
        color: var(--vbd-text-secondary);
        text-transform: uppercase;
        letter-spacing: 0.5px;
    }

    .vbd-card-value {
        font-size: 13px;
        font-weight: 600;
        color: var(--vbd-text-primary);
    }

    /* Full width items */
    .vbd-card-item.full-width {
        grid-column: 1 / -1;
    }

    /* Card Footer */
    .vbd-card-footer {
        display: flex;
        justify-content: space-between;
        align-items: center;
        margin-top: 10px;
        padding-top: 8px;
        border-top: 1px solid var(--vbd-border);
    }

    .vbd-card-status {
        display: inline-flex;
        align-items: center;
        gap: 4px;
        padding: 2px 8px;
        border-radius: 4px;
        font-size: 10px;
        font-weight: 600;
    }

    .vbd-card-status.open {
        background: rgba(33, 150, 243, 0.15);
        color: #2196f3;
    }

    .vbd-card-status.target {
        background: rgba(0, 200, 83, 0.15);
        color: #00c853;
    }

    .vbd-card-status.stop {
        background: rgba(255, 23, 68, 0.15);
        color: #ff1744;
    }

    .vbd-card-actions {
        display: flex;
        gap: 8px;
    }

    .vbd-card-action {
        width: 32px;
        height: 32px;
        display: flex;
        align-items: center;
        justify-content: center;
        background: var(--vbd-bg-primary);
        border: 1px solid var(--vbd-border);
        border-radius: 6px;
        color: var(--vbd-text-secondary);
        cursor: pointer;
        transition: all 0.2s;
    }

    .vbd-card-action:hover {
        background: var(--vbd-accent);
        color: white;
        transform: scale(1.1);
    }

    /* Modal adjustments - ensure it's below admin bar */
    .vbd-modal {
        padding: 10px;
        z-index: 1005 !important; /* Above everything */
        pointer-events: auto !important;
    }

    /* Admin bar adjustment for modal */
    body.admin-bar .vbd-modal {
        top: 46px !important;
        height: calc(100vh - 46px) !important;
    }

    .vbd-modal-content {
        width: calc(100% - 20px);
        max-width: 100%;
        margin: 10px;
        border-radius: 12px;
        max-height: calc(100vh - 80px);
        overflow-y: auto;
    }

    body.admin-bar .vbd-modal-content {
        max-height: calc(100vh - 126px); /* Account for admin bar */
    }

    .vbd-modal-header {
        padding: 12px;
    }

    .vbd-modal-body {
        padding: 12px;
        max-height: 60vh;
        overflow-y: auto;
    }

    /* Column settings specific mobile optimizations */
    #vbd-column-modal .vbd-modal-content {
        width: calc(100% - 20px);
        max-width: 100%;
    }

    /* Stack the column groups vertically on mobile */
    #vbd-column-modal .vbd-modal-body {
        display: flex;
        flex-direction: column;
        gap: 20px;
    }

    #vbd-column-modal .vbd-column-group {
        width: 100%;
    }

    #vbd-column-modal .vbd-column-group h4 {
        font-size: 16px;
        margin-bottom: 10px;
        padding-bottom: 8px;
        border-bottom: 2px solid var(--vbd-border);
    }

    #vbd-column-modal .vbd-column-list {
        display: flex;
        flex-direction: column;
        gap: 8px;
    }

    #vbd-column-modal .vbd-column-item {
        padding: 12px;
        border: 1px solid var(--vbd-border);
        border-radius: 8px;
        display: flex;
        align-items: center;
        gap: 12px;
        background: var(--vbd-bg-secondary);
    }

    #vbd-column-modal .vbd-column-item label {
        flex: 1;
        font-size: 14px;
        cursor: pointer;
        display: flex;
        align-items: center;
        gap: 8px;
    }

    #vbd-column-modal input[type="checkbox"] {
        width: 20px;
        height: 20px;
        cursor: pointer;
    }

    /* Overlay for mobile */
    .vbd-sidebar-overlay {
        display: none;
        position: fixed;
        top: 0;
        left: 0;
        right: 0;
        bottom: 0;
        background: rgba(0, 0, 0, 0.5);
        z-index: 1003 !important; /* Below mobile nav */
        pointer-events: none;
    }

    .vbd-sidebar-overlay.active {
        display: block;
        pointer-events: auto;
    }

    /* Admin bar adjustments */
    body.admin-bar .vbd-header {
        top: 46px !important;
        margin-top: 0 !important;
    }

    body.admin-bar .vbd-filter-panel {
        max-height: calc(100vh - 46px);
    }

    /* Mobile navigation panel styles */
    .vbd-mobile-nav {
        position: fixed;
        top: 52px !important; /* Below mobile header */
        right: -100%;
        width: 280px;
        max-width: 280px;
        height: calc(100vh - 52px);
        background: var(--vbd-bg-secondary);
        z-index: 1004 !important; /* Above overlay */
        transition: right 0.3s ease;
        box-shadow: var(--vbd-shadow);
        overflow-x: hidden !important; /* Prevent horizontal scrollbar */
        overflow-y: auto; /* Allow vertical scrolling if needed */
        pointer-events: auto !important;
        box-sizing: border-box;
    }

    /* Admin bar adjustment */
    body.admin-bar .vbd-mobile-nav {
        top: 98px !important; /* 46px admin bar + 52px header */
        height: calc(100vh - 98px) !important;
    }

    /* Dark theme mobile nav */
    /* Theme handled via CSS variables */

    .vbd-mobile-nav.active {
        right: 0;
    }

    .vbd-mobile-nav-header {
        display: flex;
        justify-content: space-between;
        align-items: center;
        padding: 16px 20px;
        border-bottom: 1px solid var(--vbd-border);
        background: var(--vbd-bg-secondary);
    }

    .vbd-mobile-nav-header h3 {
        margin: 0;
        font-size: 18px;
        font-weight: 600;
        color: var(--vbd-text-primary);
    }

    /* Header uses variables for both themes */

    .vbd-mobile-nav-close {
        background: var(--vbd-bg-secondary);
        border: 1px solid var(--vbd-border);
        border-radius: 6px;
        color: var(--vbd-text-secondary);
        cursor: pointer;
        padding: 6px;
        display: flex;
        align-items: center;
        justify-content: center;
        min-width: 36px;
        min-height: 36px;
        transition: background 0.2s ease, color 0.2s ease;
    }

    /* Close button uses variables across themes */

    .vbd-mobile-nav-close:hover {
        background: var(--vbd-bg-hover);
        color: var(--vbd-text-primary);
    }

    /* Hover handled via variables */

    .vbd-mobile-nav-menu {
        list-style: none;
        padding: 8px;
        margin: 0;
        width: 100%;
        box-sizing: border-box;
    }

    /* Override desktop nav-menu styles that cause scrollbar */
    #vbd-nav-sidebar .vbd-nav-menu,
    .vbd-container .vbd-nav-menu,
    body .vbd-nav-menu {
        overflow-y: initial !important; /* Remove the auto scroll from desktop */
        overflow-x: hidden !important;
    }

    .vbd-mobile-nav-menu li {
        margin-bottom: 4px;
        width: 100%;
        box-sizing: border-box;
    }

    .vbd-dark-theme .vbd-mobile-nav-menu li {
        border-bottom: 1px solid transparent;
    }

    .vbd-mobile-nav-link {
        display: flex;
        align-items: center;
        gap: 12px;
        padding: 10px 14px;
        color: var(--vbd-text-secondary);
        text-decoration: none;
        transition: background 0.2s ease, color 0.2s ease;
        font-weight: 500;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
        border-radius: 6px;
    }

    .vbd-mobile-nav-link .vbd-nav-icon {
        width: 20px;
        height: 20px;
        flex-shrink: 0;
        color: currentColor;
    }

    /* Link text color via variables */

    .vbd-mobile-nav-link:hover {
        background: var(--vbd-bg-hover);
        color: var(--vbd-text-primary);
    }

    .vbd-mobile-nav-link.active {
        background: var(--vbd-accent-bg);
        color: var(--vbd-accent);
        box-shadow: inset 0 0 0 1px var(--vbd-accent-border);
    }

    .vbd-mobile-nav-link.active .vbd-nav-icon {
        color: currentColor;
    }

    /* Hover handled via variables */

    /* Active handled via variables */

    .vbd-mobile-nav-divider {
        height: 1px;
        background: var(--vbd-border);
        margin: 8px 0;
    }

    /* Divider uses variables */
}

/* Tablet styles */
@media (min-width: 769px) and (max-width: 1024px) {
    /* Column settings modal for tablet - keep side by side */
    #vbd-column-modal .vbd-modal-content {
        max-width: 700px;
        margin: 20px auto;
    }

    #vbd-column-modal .vbd-modal-body {
        display: grid;
        grid-template-columns: 1fr 1fr;
        gap: 20px;
    }

    #vbd-column-modal .vbd-column-group {
        width: 100%;
    }

    .vbd-modal-content {
        max-width: 90%;
        margin: 20px auto;
    }
}

/* No trading message for mobile */
@media (max-width: 768px) {
    .vbd-no-trades {
        display: none; /* Hidden by default, shown by JS when no trades */
        flex-direction: column;
        align-items: center;
        justify-content: center;
        padding: 40px 20px;
        text-align: center;
        min-height: 300px;
    }

    .vbd-no-trades.show {
        display: flex !important;
    }

    .vbd-no-trades-icon {
        font-size: 48px;
        margin-bottom: 16px;
        opacity: 0.3;
    }

    .vbd-no-trades-text {
        font-size: 18px;
        font-weight: 600;
        margin-bottom: 8px;
        color: var(--vbd-text-primary);
    }

    .vbd-no-trades-subtext {
        font-size: 14px;
        color: var(--vbd-text-secondary);
    }
}

/* Small mobile styles */
@media (max-width: 480px) {
    .vbd-header {
        padding: 6px !important;
    }

    .vbd-logo {
        height: 20px !important;
        max-width: 100px !important;
    }

    .vbd-btn-icon {
        width: 32px !important;
        height: 32px !important;
    }

    /* Keep settings button visible but smaller */
    #vbd-column-settings {
        display: flex !important;
        width: 30px !important;
        height: 30px !important;
        padding: 4px !important;
    }

    #vbd-column-settings svg {
        width: 18px !important;
        height: 18px !important;
    }

    /* Table - show only most essential columns */
    .vbd-trading-table th:nth-child(5),
    .vbd-trading-table td:nth-child(5),
    .vbd-trading-table th:nth-child(6),
    .vbd-trading-table td:nth-child(6) {
        display: none;
    }

    /* Simplify filter buttons */
    .vbd-filter-buttons {
        grid-template-columns: 1fr 1fr;
    }
}