/* File: static/css/responsive.css */
/* Bullet point styling */
.bullet-item {
    display: flex;
    align-items: flex-start;
    margin-bottom: 0.5rem;
}

.bullet-item span:first-child {
    margin-right: 4px;
    flex-shrink: 0;
}

/* Base responsive styles */
@media screen and (max-width: 768px) {
    /* Main content wrapper */
    .chart-wrapper.text-base.w-full.h-full.p-8 {
        padding: 1rem !important;
    }
    /* Text size adjustments */
    .chart-wrapper {
        font-size: 0.9375rem !important;
    }

    /* Boxes/cards spacing */
    .rounded-lg.p-4.my-6 {
        padding: 1rem !important;
        margin: 1rem 0 !important;
    }

    /* List items spacing */
    .space-y-2 {
        margin-top: 0.75rem !important;
    }

    .flex.items-center.gap-2 {
        gap: 0.375rem !important;
    }

    /* Paragraph spacing */
    .mb-4, .mb-6 {
        margin-bottom: 0.75rem !important;
    }
    /* Controls Section */
    .flex.items-center.gap-4.mb-4.p-4 {
        flex-direction: column;
        gap: 1rem !important;
        padding: 1rem !important;
    }

    /* Time range buttons container */
    .flex.gap-2 {
        display: grid;
        grid-template-columns: repeat(2, 1fr);
        gap: 0.5rem !important;
        width: 100%;
    }

    /* Time range buttons */
    .flex.gap-2 button {
        width: 100%;
        padding: 0.5rem !important;
        font-size: 0.875rem;
    }

    /* Ticker input */
    input[type="text"] {
        width: 100% !important;
        max-width: none !important;
    }

    /* Stats grid */
    .grid.grid-cols-2.gap-4 {
        gap: 1rem !important;
    }

    /* Chart container */
    .relative.h-96.p-4 {
        padding: 0.5rem !important;
        height: 300px !important;
    }
    /* Container adjustments */
    .container-fluid {
        padding: 1rem !important;
    }

    /* Header and Navigation Layout */
    .flex.items-center.justify-between.mb-6 {
        flex-direction: column !important;
        gap: 0.5rem !important;
        margin-bottom: 0.5rem !important;
        align-items: center;
        width: 100% !important;
        margin-left: 0 !important;
    }

    /* Logo styling */
    .logotab {
        margin: 0 !important;
        padding-top: 0.25rem !important;
        padding-bottom: 0.25rem !important;
        width: auto;
        text-align: left;
    }

    /* Navigation tabs container */
    .flex.items-center.h-full {
        width: 100%;
        justify-content: center;
        padding: 0.25rem 0 !important;
        overflow-x: auto;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none; /* Firefox */
        -ms-overflow-style: none; /* IE and Edge */
    }

    /* Hide scrollbar for Chrome, Safari and Opera */
    .flex.items-center.h-full::-webkit-scrollbar {
        display: none;
    }

    /* Tab styling */
    .tab {
        padding: 4px 12px;
        font-size: 0.875rem;
        white-space: nowrap;
        flex-shrink: 0;
    }

    /* Remove right padding from header section */
    .flex.items-center.pr-8 {
        padding-right: 0 !important;
        width: 100%;
        justify-content: center;
    }

    /* Main content layout */
    .flex.w-full {
        flex-direction: column !important;
    }

    /* Chart container adjustments */
    .chart-container {
        width: 100% !important;
        min-width: unset !important;
        height: calc(70vh - 60px) !important;
        margin-bottom: 1rem;
        border-radius: 8px;
    }

    /* Right panel adjustments */
    .right-panel {
        width: 100% !important;
        max-width: 100% !important;
        min-width: unset !important;
        margin-left: 0 !important;
        height: auto !important;
        min-height: unset !important;
    }

    /* Input controls adjustment */
    .flex.items-center.gap-2.px-4.py-2 {
        justify-content: space-between;
    }

    input[type="text"] {
        max-width: 45% !important;
    }

    /* Scroll container height adjustment */
    .scroll-container {
        height: calc(60vh - 100px) !important;
    }

    /* Stats and heatmap adjustments */
    .gex-stats {
        padding: 0.5rem !important;
    }

    /* PulseView adjustments */
    .pulse-container {
        padding: 0.5rem !important;
    }

    /* Ensure pulse root has proper spacing from navigation */
    #pulse-root {
        padding-top: 0 !important;
        position: relative !important;
    }

    /* PulseView Mobile Layout */
    #pulse-root .flex.flex-row {
        flex-direction: column !important;
        width: 100%;
        padding: 0 !important;
        gap: 0;
    }

    /* Make each table container full width */
    #pulse-root .w-1/2 {
        width: 100% !important;
        margin: 0 !important;
        padding: 0.5rem !important;
        border-radius: 0 !important;
        transform: none !important; /* Ensure no transform */
        position: relative !important;
        top: 0 !important;
    }

    /* Extra padding for the first table to prevent clipping */
    #pulse-root .w-1/2:first-child {
        padding-top: 1rem !important;
    }

    /* Table styles */
    #pulse-root table {
        font-size: 0.75rem;
        width: 100%;
        min-width: 300px;
        table-layout: auto;
    }

    #pulse-root th,
    #pulse-root td {
        padding: 0.25rem !important;
        white-space: nowrap;
        overflow: hidden;
        text-overflow: ellipsis;
    }

    /* Adjust column widths */
    #pulse-root th:first-child,
    #pulse-root td:first-child {
        min-width: 80px;
    }

    #pulse-root th:not(:first-child),
    #pulse-root td:not(:first-child) {
        min-width: 100px;
    }

    /* Pagination controls */
    #pulse-root .flex.justify-center.items-center.mt-2 {
        width: 100%;
        flex-wrap: nowrap;
        gap: 0.5rem;
        justify-content: center;
    }

    #pulse-root button {
        min-width: 70px;
        padding: 0.25rem 0.5rem;
        font-size: 0.75rem;
    }

    #pulse-root .flex.justify-center.items-center.mt-2 span {
        font-size: 0.75rem;
        white-space: nowrap;
    }

    /* Modal adjustments */
    .modal-backdrop .max-w-md {
        margin: 1rem;
        max-width: calc(100% - 2rem) !important;
    }

    /* Chart.js canvas responsiveness */
    canvas {
        width: 100% !important;
        height: auto !important;
    }
    /* Ensure all chart containers have proper right padding on mobile */
    .chart-container,
    .chart-wrapper {
        padding-right: 6px !important;
    }

    /* Chart.js canvas responsiveness */
    canvas {
        width: 100% !important;
        height: auto !important;
        max-width: calc(100% - 8px) !important; /* Prevent overflow with padding */
    }

    /* Ensure all charts respect container boundaries */
    .chartjs-render-monitor {
        position: relative !important;
        box-sizing: border-box !important;
        padding-right: 4px !important;
    }

    /* Apply to all chart canvases */
    canvas.chartjs-render-monitor {
        max-width: calc(100% - 4px) !important;
    }

    /* Ensure proper right padding for history charts on mobile */
    #history-root .relative.p-4.bg-gray-800.rounded-lg {
        padding-right: 6px !important;
    }

    /* Additional padding for chart canvas elements */
    #history-root canvas {
        padding-right: 4px !important;
    }

    /* Prevent legend from overflowing on mobile */
    .chartjs-legend {
        overflow-x: auto !important;
        -webkit-overflow-scrolling: touch !important;
        max-width: 100% !important;
        padding-right: 4px !important;
    }
}

/* Tablet specific adjustments */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    .chart-container {
        min-width: unset;
        border-radius: 8px;
    }

    .right-panel {
        width: 280px !important;
        min-width: 280px !important;
    }

    .tab {
        padding: 6px 16px;
    }

}

/* Landscape mode adjustments */
@media screen and (max-width: 768px) and (orientation: landscape) {
    .chart-container {
        height: calc(100vh - 120px) !important;
        border-radius: 8px;
    }

    .scroll-container {
        height: calc(90vh - 140px) !important;
    }
}

@media screen and (min-width: 1400px) {
    .chart-wrapper.text-base.w-full.h-full.p-8 {
        max-width: 1200px;
        margin: 0 auto;
    }
}

/* Small screen specific adjustments */
@media screen and (max-width: 480px) {
    /* Further reduce padding */
    .chart-wrapper.text-base.w-full.h-full.p-8 {
        padding: 0.75rem !important;
    }

    /* Smaller text for very small screens */
    .chart-wrapper {
        font-size: 0.875rem !important;
    }

    /* Tighter spacing for boxes */
    .rounded-lg.p-4.my-6 {
        padding: 0.75rem !important;
        margin: 0.75rem 0 !important;
    }

    /* Tighter list spacing */
    .space-y-2 {
        margin-top: 0.5rem !important;
    }

    .flex.items-center.gap-2 {
        gap: 0.125rem !important;
    }

    /* Adjust bullet points and spacing */
    .flex.items-center.gap-2 span[style*="color: #B8860B"] {
        font-size: 1rem !important;
    }

    .flex.items-center.justify-between.mb-6 {
        gap: 0.25rem !important; /* Even smaller gap for very small screens */
    }
    .flex.gap-2 button {
        font-size: 0.75rem;
        padding: 0.375rem !important;
    }
    /* Further reduce padding and margins */
    .container-fluid {
        padding: 0.5rem !important;
    }

    .tab {
        padding: 3px 10px;
        font-size: 0.8rem;
    }

    /* Adjust input sizes for very small screens */
    input[type="text"] {
        max-width: 40% !important;
        font-size: 0.8rem !important;
    }

    #pulse-root th,
    #pulse-root td {
        padding: 0.2rem 0.5rem !important;
    }
}

/* Print styles */
@media print {
    .container-fluid {
        padding: 0 !important;
    }

    .chart-container {
        width: 100% !important;
        height: auto !important;
        border-radius: 8px;
    }

    .right-panel,
    .tab,
    .pulse-container {
        display: none !important;
    }
}

@media screen and (max-width: 768px) {
    /* Keep titles and toggle in single row */
    .chart-header .flex.items-center {
        display: flex;
        flex-wrap: nowrap !important; /* Prevent wrapping */
        width: 100%;
        justify-content: center;
        gap: 0.5rem !important;
    }

    /* Container for both titles and toggle */
    .chart-header {
        padding: 0.5rem 0 !important;
        width: 100%;
    }

    /* Adjust text and spacing */
    #chartTitle, #altTitle {
        font-size: 0.75rem !important;
        white-space: nowrap; /* Prevent text wrapping */
    }

    .toggle-switch {
        width: 20px;
        height: 11px;
        margin: 0 3px;
        flex-shrink: 0;
    }
    .toggle-slider {
        border-radius: 5.5px;
    }
    .toggle-slider:before {
        height: 7px;
        width: 7px;
        left: 2px;
        bottom: 2px;
    }
    input:checked + .toggle-slider:before {
        transform: translateX(9px);  /* Adjusted for new width (20px - 7px - 4px) */
    }
}

@media screen and (max-width: 480px) {
    .chart-header .flex.items-center {
        gap: 0.375rem !important;
    }

    #chartTitle, #altTitle {
        font-size: 0.7rem !important;
    }
    .toggle-switch {
        width: 18px;     /* Even smaller for very small screens */
        height: 10px;
    }

    .toggle-slider {
        border-radius: 5px;
    }

    .toggle-slider:before {
        height: 6px;
        width: 6px;
    }

    input:checked + .toggle-slider:before {
        transform: translateX(8px);  /* Adjusted for smallest size */
    }
}

/* Loading container base styles */
#chart-loading-container {
    display: flex;
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    align-items: center;
    justify-content: center;
    background-color: #2d2d2d;
    color: #9CA3AF;
    font-weight: bold;
    font-size: 0.75rem;
    z-index: 10;
    pointer-events: none;
    border-radius: 8px !important;
    text-align: center;
}

/* Mobile specific adjustments */
@media screen and (max-width: 480px) {
    #chart-loading-container {
        font-size: 0.7rem;
    }
}

/* Tablet specific adjustments */
@media screen and (min-width: 769px) and (max-width: 1024px) {
    #chart-loading-container {
        font-size: 0.8rem;
    }
}

/* Landscape mode adjustments */
@media screen and (max-width: 768px) and (orientation: landscape) {
    #chart-loading-container {
        font-size: 0.7rem;
    }
}

/* Add this to ensure the text itself is centered */
#chart-loading-container span,
#chart-loading-container div,
#chart-loading-container::before,
#chart-loading-container::after {
    margin: 0 auto;
    width: 100%;
    text-align: center;
}


/* Add these styles to your responsive.css file */

/* Special mobile table styling to reduce spacing */
@media screen and (max-width: 768px) {
    /* Debug: ensure pulse root starts at the right position */
    #pulse-root {
        margin-top: 0 !important;
        padding-top: 10px !important;
        min-height: 100vh !important;
    }

    /* Ensure the main flex container doesn't clip */
    #pulse-root > div:first-child {
        padding-top: 15px !important; /* More padding to prevent clipping */
        overflow-y: auto !important; /* Keep auto for scrolling */
        overflow-x: hidden !important;
        scroll-padding-top: 0 !important;
    }

    /* Specifically target the flex container when it's in column mode */
    #pulse-root .flex.flex-col {
        padding-top: 15px !important;
    }

    /* Target the pulse view tables specifically */
    #pulse-root table {
        border-spacing: 0 !important;
        border-collapse: collapse !important;
        width: 100% !important;
        table-layout: fixed !important;
        margin: 0 !important;
    }

    /* Ensure all cells have minimal padding */
    #pulse-root th,
    #pulse-root td {
        padding: 2px 1px !important;
        font-size: 0.65rem !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
        white-space: nowrap !important;
        line-height: 1.3 !important;
        margin: 0 !important;
        transform: none !important;
        position: relative !important;
    }

    /* Ensure first header row is fully visible */
    #pulse-root thead tr:first-child th {
        padding-top: 4px !important;
    }

    /* Remove any margins from cell content */
    #pulse-root td *,
    #pulse-root th * {
        margin: 0 !important;
    }

    /* Reduce height of table rows */
    #pulse-root tr {
        height: 22px !important;
        min-height: 22px !important;
        max-height: 22px !important;
    }

    /* Container padding adjusted to prevent clipping */
    #pulse-root .w-1/2 {
        padding: 4px !important;
        overflow: hidden !important; /* Keep hidden for proper layout */
        position: relative !important;
        display: flex !important;
        flex-direction: column !important;
    }

    /* Ensure title has space and doesn't get clipped */
    #pulse-root h2 {
        flex-shrink: 0 !important;
        margin-top: 4px !important;
        margin-bottom: 6px !important;
        font-size: 0.85rem !important;
    }

    /* Pagination controls */
    #pulse-root .flex.justify-center.items-center.mt-2 {
        margin-top: 4px !important;
    }

    #pulse-root .flex.justify-center.items-center.mt-2 button {
        padding: 2px 6px !important;
        font-size: 0.7rem !important;
    }

    #pulse-root .flex.justify-center.items-center.mt-2 span {
        font-size: 0.7rem !important;
    }

    /* Table scroll container - fixed for mobile */
    #pulse-root .table-scroll-container {
        overflow-x: auto !important;
        overflow-y: scroll !important; /* Force scroll even if not needed */
        width: 100% !important;
        -webkit-overflow-scrolling: touch !important;  /* Smooth scrolling on iOS */
        position: relative !important;
        /* Add padding inside to push content down */
        padding-top: 2px !important;
        padding-bottom: 2px !important;
        margin-top: 0 !important;
        border: 1px solid transparent !important; /* Force layout calculation */
    }
}

/* Extra small screen specific adjustments */
@media screen and (max-width: 480px) {
    #pulse-root th,
    #pulse-root td {
        padding: 1px 0 !important;
        font-size: 0.6rem !important;
    }

    /* Extra small screens need even smaller rows */
    #pulse-root tr {
        height: 20px !important;
        min-height: 20px !important;
        max-height: 20px !important;
    }
}

/* Add these CSS rules to your responsive.css file */

/* Comprehensive fix for all columns to prevent ellipsis when sorting */
@media screen and (max-width: 768px) {
    /* Overall table settings */
    #pulse-root table {
        border-collapse: collapse !important;
        border-spacing: 0 !important;
        width: 100% !important;
        table-layout: fixed !important;
    }

    /* Reduce font size for column headers */
    #pulse-root th {
        font-size: 0.62rem !important;
        padding: 1px 0 !important;
        line-height: 1.2 !important;
        vertical-align: middle !important;
        text-align: center !important;
    }

    /* Make column headers use centered text for better space usage */
    #pulse-root th:nth-child(n+2) {
        text-align: center !important; /* Center all columns except Ticker */
    }

    /* Keep ticker column left-aligned */
    #pulse-root th:first-child {
        text-align: left !important;
        padding-left: 2px !important;
    }

    /* More optimal column width distribution */
    #pulse-root th:nth-child(1),
    #pulse-root td:nth-child(1) {
        width: 17% !important; /* Ticker */
    }

    #pulse-root th:nth-child(2),
    #pulse-root td:nth-child(2) {
        width: 20% !important; /* GEX Ratio */
    }

    #pulse-root th:nth-child(3),
    #pulse-root td:nth-child(3) {
        width: 18% !important; /* Net GEX */
    }

    #pulse-root th:nth-child(4),
    #pulse-root td:nth-child(4) {
        width: 22% !important; /* Flow Ratio */
    }

    #pulse-root th:nth-child(5),
    #pulse-root td:nth-child(5) {
        width: 23% !important; /* Net Flow */
    }

    /* Ensure table cells match header styling but keep right alignment for values */
    #pulse-root td {
        font-size: 0.62rem !important;
        padding: 1px 1px !important;
        line-height: 1.2 !important;
        vertical-align: middle !important;
    }

    #pulse-root td:first-child {
        text-align: left !important;
        padding-left: 2px !important;
    }

    #pulse-root td:nth-child(n+2) {
        text-align: right !important;
        padding-right: 3px !important;
    }

    /* Make sure header text doesn't wrap */
    #pulse-root th,
    #pulse-root td {
        white-space: nowrap !important;
        overflow: hidden !important;
        text-overflow: ellipsis !important;
    }

    /* Ensure consistent row height */
    #pulse-root tr {
        height: 22px !important;
    }

    /* Make table fit content better */
    #pulse-root .w-1/2 {
    padding: 3px !important;
}

    /* Make header explicitly visible */
    #pulse-root thead {
        background-color: #2d2d2d !important;
        position: relative !important;
        z-index: 10 !important;
        top: 0 !important;
        transform: none !important;
        margin-top: 0 !important;
        visibility: visible !important;
        display: table-header-group !important;
    }

    /* Ensure the table header row is always visible */
    #pulse-root thead tr {
        display: table-row !important;
        visibility: visible !important;
    }

    /* Sticky pagination for better usability */
    #pulse-root .flex.justify-center.items-center.mt-2 {
        position: sticky !important;
        bottom: 0 !important;
        background-color: #1a1a1a !important;
        padding: 3px 0 !important;
        margin-top: 3px !important;
        z-index: 10 !important;
    }
}

/* Extra small screens need even more compact styling */
@media screen and (max-width: 480px) {
    #pulse-root th,
    #pulse-root td {
        font-size: 0.58rem !important;
        padding: 1px 0 !important;
    }

    #pulse-root tr {
        height: 20px !important;
    }

    /* Even more compact pagination */
    #pulse-root .flex.justify-center.items-center.mt-2 button {
        padding: 1px 4px !important;
        min-width: 60px !important;
        font-size: 0.65rem !important;
    }
}


/* Add these styles to your responsive.css file */

/* Enhanced landscape mode adjustments - keeping vertical layout */
@media screen and (max-width: 768px) and (orientation: landscape) {
    /* Keep vertical layout but optimize heights */
    #history-root .flex.flex-col.gap-4 {
        gap: 8px !important;
    }

    /* Adjust chart heights for landscape but maintain vertical stacking */
    #history-root .flex.flex-col.gap-4 > div {
        height: 30vh !important; /* Shorter height for each chart */
        min-height: 260px !important; /* Minimum height */
    }

    /* Make sure charts have proper spacing */
    #history-root .relative.p-4.bg-gray-800.rounded-lg {
        margin-bottom: 8px !important;
        padding: 6px !important;
    }

    /* Adjust controls section for landscape */
    #history-root .flex.flex-wrap.items-center.gap-4.mb-4.p-4 {
        padding: 4px !important;
        margin-bottom: 4px !important;
    }

    /* More compact time range buttons */
    #history-root .flex.flex-wrap.gap-2 button {
        padding: 2px 8px !important;
        font-size: 0.7rem !important;
    }
}

/* Improved legend interaction on mobile */
@media screen and (max-width: 768px) {
    /* Increase legend tap target size */
    #history-root .chart-js-legend li {
        padding: 8px 4px !important;
        margin: 0 4px !important;
    }

    /* Make sure legend labels have enough spacing */
    #history-root .chart-js-legend span {
        padding: 6px 8px !important;
        margin-left: 8px !important;
    }

    /* Add visual feedback for tapping */
    #history-root .chart-js-legend li:active {
        background-color: rgba(255, 255, 255, 0.1) !important;
        border-radius: 4px !important;
    }
}

@media screen and (max-width: 768px) {
    /* 1. Fix the root container padding issue */
    .container-fluid.pt-2.pb-2.pl-8.pr-8 {
        padding-left: 0 !important;
        padding-right: 0 !important;
        padding-top: 0.5rem !important;
        padding-bottom: 0.5rem !important;
    }

    /* 2. Fix navigation bar that uses w-screen and negative margin */
    .flex.items-center.justify-between.mb-6.border-b.border-gray-600.w-screen.-ml-8 {
        width: 100% !important;
        margin-left: 0 !important;
        max-width: 100vw !important;
        padding-left: 1rem !important;
        padding-right: 1rem !important;
        box-sizing: border-box !important;
    }

    /* 3. Constrain the main content wrapper */
    .flex.w-full {
        width: 100% !important;
        max-width: 100vw !important;
        padding: 0 8px !important; /* Add small padding for content */
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* 4. Fix dual chart container - REMOVE MIN-WIDTH */
    .dual-chart-container {
        width: calc(100% - 16px) !important; /* Account for parent padding */
        max-width: calc(100vw - 16px) !important;
        min-width: 0 !important; /* CRITICAL: Override the 800px min-width */
        margin: 0 auto !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        gap: 0 !important; /* Remove flex gap to control manually */
        background-color: #1a1a1a !important;
    }

    /* 5. Fix individual chart sections - REMOVE MIN-WIDTH */
    .chart-section,
    .gamma-chart,
    .options-chart {
        width: 100% !important;
        max-width: 100% !important;
        min-width: 0 !important; /* CRITICAL: Override the 350px min-width */
        margin: 0 !important;
        padding: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    /* 6. Critical canvas constraints */
    canvas#gammaChart,
    canvas#optionsChart {
        width: 100% !important;
        max-width: 100% !important;
        height: auto !important;
        display: block !important;
        box-sizing: border-box !important;
    }

    /* 7. Scroll container constraints */
    .scroll-container,
    .gamma-scroll,
    .options-scroll {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow-y: auto !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
        /* Prevent iOS bounce scrolling from causing overflow */
        -webkit-overflow-scrolling: touch !important;
        overscroll-behavior-x: contain !important;
    }

    /* 8. Chart wrapper constraints */
    .chart-wrapper {
        width: 100% !important;
        max-width: 100% !important;
        padding: 0 !important;
        margin: 0 !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        position: relative !important;
    }

    /* 9. Fix sticky x-axis */
    .sticky-x-axis {
        position: absolute !important;
        bottom: 0 !important;
        left: 0 !important;
        right: 0 !important;
        width: auto !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        padding-left: 4px !important;
        padding-right: 4px !important;
        display: block !important;
        z-index: 5 !important;
    }

    /* 10. Right panel (stats) constraints - reduced gap to 10px */
    .right-panel {
        width: calc(100% - 16px) !important;
        max-width: calc(100vw - 16px) !important;
        margin: 10px auto 0 auto !important; /* Reduced from 16px to 10px */
        padding: 0 8px !important;
        box-sizing: border-box !important;
        overflow: hidden !important;
    }

    /* 11. Nuclear option - prevent ANY horizontal scroll */
    html {
        overflow-x: hidden !important;
        width: 100% !important;
    }

    body {
        overflow-x: hidden !important;
        width: 100% !important;
        margin: 0 !important;
        padding: 0 !important;
        position: relative !important;
    }

    /* 12. Ensure nothing can extend beyond viewport */
    * {
        max-width: 100vw !important;
    }

    /* 13. Gap control between containers - reduced to 10px */
    .gamma-chart {
        margin-bottom: 10px !important;
    }

    .options-chart {
        margin-top: 0 !important;
        margin-bottom: 0 !important;
    }

    /* 14. Specific Chart.js canvas override */
    .chartjs-render-monitor {
        width: 100% !important;
        max-width: 100% !important;
        position: relative !important;
    }

    /* 15. Chart headers */
    .chart-header {
        width: 100% !important;
        max-width: 100% !important;
        overflow: hidden !important;
        box-sizing: border-box !important;
        padding: 8px 8px !important;
    }

    /* 16. Additional elements that might overflow */
    .gex-stats {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    #gex-heatmap-container,
    #iv-skew-heatmap-container {
        width: 100% !important;
        max-width: 100% !important;
        overflow-x: hidden !important;
        box-sizing: border-box !important;
    }

    /* Visual separator for options chart - reduced padding */
    .options-chart {
        border-bottom: 1px solid #404040 !important;
        padding-bottom: 6px !important;
    }
}

/* Fix 2: Hide orphaned sticky x-axis elements */
@media screen and (max-width: 1200px) {
    /* Remove any sticky axis outside of chart sections */
    .sticky-x-axis:not(.chart-section .sticky-x-axis) {
        display: none !important;
    }
}

/* Tablet-specific height adjustments */
@media screen and (min-width: 769px) and (max-width: 1200px) {
    /* Make charts taller on tablets - 70% of viewport instead of 50% */
    .dual-chart-container {
        flex-direction: column;
        gap: 0 !important;
    }

    .chart-section {
        height: calc(70vh - 80px) !important; /* Increased from 50vh */
        min-height: 400px !important; /* Ensure minimum height */
        max-height: 600px !important; /* Cap maximum for readability */
    }

    .gamma-chart {
        margin-bottom: 10px !important;
    }

    /* Adjust scroll containers for taller charts */
    .scroll-container,
    .gamma-scroll,
    .options-scroll {
        height: calc(100% - 40px) !important; /* Account for header */
    }

    /* Stats panel can remain auto height */
    .right-panel {
        height: auto !important;
        min-height: unset !important;
    }
}

/* Additional fix for very small devices */
@media screen and (max-width: 480px) {
    .dual-chart-container {
        width: calc(100% - 8px) !important;
        max-width: calc(100vw - 8px) !important;
        padding: 0 !important;
        margin: 0 auto !important;
        gap: 0 !important;
    }

    .right-panel {
        width: calc(100% - 8px) !important;
        max-width: calc(100vw - 8px) !important;
    }

    .chart-section {
        border-radius: 4px !important;
    }

    /* Keep consistent 10px gap on very small screens */
    .gamma-chart {
        margin-bottom: 10px !important;
    }

    .right-panel {
        margin-top: 10px !important;
    }
}

/* Print styles */
@media print {
    .container-fluid {
        padding: 0 !important;
    }

    .chart-container {
        width: 100% !important;
        height: auto !important;
        border-radius: 8px;
    }

    .right-panel,
    .tab,
    .pulse-container {
        display: none !important;
    }
}