/* =========================================================
   WOI SCANNER / CHART - FOCUS MODE
   ========================================================= */

/* Focus button */
.woi-focus-btn {
    white-space: nowrap;
}

/* Active focus button */
body.woi-chart-focus .woi-focus-btn {
    position: relative;
    z-index: 100002;
}

/*
 * Main scanner workspace becomes a full viewport layer.
 * Overlay + Drawing tools remain available.
 */
body.woi-chart-focus #scanner-main-shell {
    position: fixed !important;
    inset: 0 !important;
    z-index: 100000 !important;
    width: 100vw !important;
    height: 100vh !important;
    margin: 0 !important;
    padding: 10px 14px !important;
    box-sizing: border-box !important;
    background: var(--woi-bg, #07111f) !important;
    overflow: hidden !important;
}

/* Remove right-side Market Opportunities column */
body.woi-chart-focus #scanner-main-shell .scanner-side-col {
    display: none !important;
}

/* Force chart area to use full width */
body.woi-chart-focus #scanner-main-shell .scanner-chart-col {
    display: grid !important;
    grid-template-columns: minmax(0, 1fr) !important;
    gap: 0 !important;
    width: 100% !important;
    height: 100% !important;
}

/* Main chart workspace */
body.woi-chart-focus #scanner-main-shell .chartwrap {
    width: 100% !important;
    min-width: 0 !important;
    height: 100vh !important;
    overflow: hidden !important;
}

/*
 * Hide content that normally continues below the chart.
 * Focus mode is intentionally a chart workspace.
 */
body.woi-chart-focus #analysis-wrap,
body.woi-chart-focus #narrative-wrap {
    display: none !important;
}

/* Chart container */
body.woi-chart-focus #chart-wrap {
    width: 100% !important;
    height: calc(100vh - 115px) !important;
    min-height: 0 !important;
}

/*
 * Override the inline 860px height from dcc.Graph.
 * Reserve top space for Overlays + Drawing toolbar.
 */
body.woi-chart-focus #chart {
    width: 100% !important;
    height: calc(100vh - 115px) !important;
    min-height: calc(100vh - 115px) !important;
    margin-bottom: 0 !important;
}

/* Plotly inner containers must follow the new size */
body.woi-chart-focus #chart .js-plotly-plot,
body.woi-chart-focus #chart .plot-container,
body.woi-chart-focus #chart .svg-container {
    width: 100% !important;
    height: 100% !important;
}

/* Prevent document scrolling behind Focus Mode */
body.woi-chart-focus {
    overflow: hidden !important;
}

/* Slightly tighter toolbar spacing in focus mode */
body.woi-chart-focus .overlaybox {
    margin-top: 0 !important;
}

body.woi-chart-focus .fibo-row {
    margin-bottom: 4px !important;
}

/* Mobile/tablet protection */
@media (max-width: 900px) {
    body.woi-chart-focus #scanner-main-shell {
        padding: 6px !important;
        overflow-y: auto !important;
    }

    body.woi-chart-focus #scanner-main-shell .chartwrap {
        overflow-y: auto !important;
    }

    body.woi-chart-focus #chart-wrap,
    body.woi-chart-focus #chart {
        height: calc(100vh - 155px) !important;
        min-height: calc(100vh - 155px) !important;
    }
}