/**
 * @file overlays.css
 * @description Posicionamento absoluto dos canvases e cursores customizados.
 *
 * Contém:
 *  - Regras `cursor` para todos os painéis (crosshair, grabbing, ns-resize, ew-resize)
 *  - Posicionamento absoluto dos elementos de chart (inset: 0)
 *  - z-indexes dos overlays de canvas (#overlay, #overlayVolume, #overlayOi, etc.)
 *  - #heatmap (z-index menor, pointer-events: none)
 *
 * Depende de: variables.css, panels.css
 */

/* ── Cursores: painel principal ─────────────────────────── */

.main-plot,
.main-plot #chartMain,
.main-plot #heatmap {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cline%20x1='10'%20y1='2'%20x2='10'%20y2='18'%20stroke='rgba(255,255,255,0.75)'%20stroke-width='1.5'/%3E%3Cline%20x1='2'%20y1='10'%20x2='18'%20y2='10'%20stroke='rgba(255,255,255,0.75)'%20stroke-width='1.5'/%3E%3Ccircle%20cx='10'%20cy='10'%20r='1.4'%20fill='rgba(255,255,255,0.75)'/%3E%3C/svg%3E") 10 10, crosshair;
}

.main-plot.cursor-panning,
.main-plot.cursor-panning #chartMain,
.main-plot.cursor-panning #heatmap {
    cursor: grabbing;
}

.main-plot.cursor-yscale,
.main-plot.cursor-yscale #chartMain,
.main-plot.cursor-yscale #heatmap {
    cursor: ns-resize;
}

.main-plot.hover-yscale,
.main-plot.hover-yscale #chartMain,
.main-plot.hover-yscale #heatmap {
    cursor: ns-resize;
}

.main-plot.hover-xscale,
.main-plot.hover-xscale #chartMain,
.main-plot.hover-xscale #heatmap {
    cursor: ew-resize;
}

/* ── Cursores: painel volume ────────────────────────────── */

.panel-volume,
.panel-volume #chartVolume {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cline%20x1='10'%20y1='2'%20x2='10'%20y2='18'%20stroke='rgba(255,255,255,0.75)'%20stroke-width='1.5'/%3E%3Cline%20x1='2'%20y1='10'%20x2='18'%20y2='10'%20stroke='rgba(255,255,255,0.75)'%20stroke-width='1.5'/%3E%3Ccircle%20cx='10'%20cy='10'%20r='1.4'%20fill='rgba(255,255,255,0.75)'/%3E%3C/svg%3E") 10 10, crosshair;
}

.panel-volume.hover-yscale,
.panel-volume.hover-yscale #chartVolume {
    cursor: ns-resize;
}

.panel-volume.hover-xscale,
.panel-volume.hover-xscale #chartVolume {
    cursor: ew-resize;
}

/* ── Cursores: painéis derivativos ──────────────────────── */

.panel-derivative,
.panel-derivative #chartOpenInterest,
.panel-derivative #chartNetLongs,
.panel-derivative #chartNetShorts,
.panel-derivative #chartFunding,
.panel-derivative #chartLongShort,
.panel-derivative #chartVolatility,
.panel-derivative #chartLiquidations,
.panel-derivative #chartEtf,
.panel-derivative #chartTrends,
.panel-derivative #chartMvrv,
.panel-derivative #chartFearGreed {
    cursor: url("data:image/svg+xml,%3Csvg%20xmlns='http://www.w3.org/2000/svg'%20width='20'%20height='20'%20viewBox='0%200%2020%2020'%3E%3Cline%20x1='10'%20y1='2'%20x2='10'%20y2='18'%20stroke='rgba(255,255,255,0.75)'%20stroke-width='1.5'/%3E%3Cline%20x1='2'%20y1='10'%20x2='18'%20y2='10'%20stroke='rgba(255,255,255,0.75)'%20stroke-width='1.5'/%3E%3Ccircle%20cx='10'%20cy='10'%20r='1.4'%20fill='rgba(255,255,255,0.75)'/%3E%3C/svg%3E") 10 10, crosshair;
}

.panel-derivative.hover-yscale,
.panel-derivative.hover-yscale #chartOpenInterest,
.panel-derivative.hover-yscale #chartNetLongs,
.panel-derivative.hover-yscale #chartNetShorts,
.panel-derivative.hover-yscale #chartFunding,
.panel-derivative.hover-yscale #chartLongShort,
.panel-derivative.hover-yscale #chartVolatility,
.panel-derivative.hover-yscale #chartLiquidations,
.panel-derivative.hover-yscale #chartEtf,
.panel-derivative.hover-yscale #chartTrends,
.panel-derivative.hover-yscale #chartMvrv,
.panel-derivative.hover-yscale #chartFearGreed {
    cursor: ns-resize;
}

.panel-derivative.hover-xscale,
.panel-derivative.hover-xscale #chartOpenInterest,
.panel-derivative.hover-xscale #chartNetLongs,
.panel-derivative.hover-xscale #chartNetShorts,
.panel-derivative.hover-xscale #chartFunding,
.panel-derivative.hover-xscale #chartLongShort,
.panel-derivative.hover-xscale #chartVolatility,
.panel-derivative.hover-xscale #chartLiquidations,
.panel-derivative.hover-xscale #chartEtf,
.panel-derivative.hover-xscale #chartTrends,
.panel-derivative.hover-xscale #chartMvrv,
.panel-derivative.hover-xscale #chartFearGreed {
    cursor: ew-resize;
}

/* ── Chart containers (absolute fill) ──────────────────── */

#chartMain,
#chartVolume {
    position: absolute;
    inset: 0;
    z-index: 6;
}

#chartOpenInterest,
#chartNetLongs,
#chartNetShorts,
#chartFunding,
#chartLongShort,
#chartVolatility,
#chartLiquidations,
#chartEtf,
#chartTrends,
#chartMvrv,
#chartFearGreed {
    position: absolute;
    inset: 0;
    z-index: 6;
}

/* ── Heatmap (behind chart, non-interactive) ────────────── */

#heatmap {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 4;
}

/* ── Overlay canvases ───────────────────────────────────── */

#overlay {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

#overlayVolume {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}

#overlayOi,
#overlayNetLongs,
#overlayNetShorts,
#overlayFunding,
#overlayLongShort,
#overlayVolatility,
#overlayLiquidations,
#overlayEtf,
#overlayTrends,
#overlayMvrv,
#overlayFearGreed {
    position: absolute;
    inset: 0;
    pointer-events: none;
    z-index: 10;
}