/**
 * @file panels.css
 * @description Layout dos painéis de gráfico do Superchart.
 *
 * Contém:
 *  - .chart-shell (container principal com variáveis de altura por painel)
 *  - .panels (scrollable column de painéis)
 *  - .panel, .panel-main, .main-plot (estrutura do painel de preço)
 *  - .panel-volume, .panel-derivative (painéis secundários)
 *  - Alturas dos indicadores via CSS custom properties
 *  - #splitter e .splitter-indicator (redimensionamento)
 *  - body.is-resizing-panels
 *
 * Depende de: variables.css
 */

/* ── Chart shell ────────────────────────────────────────── */

.chart-shell {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
    height: 100%;
    border: 1px solid var(--panel-border);
    border-radius: 12px;
    background: var(--shell-bg);
    box-shadow: var(--shadow);
    overflow: hidden;

    /* Default heights for each indicator panel */
    --volumeH: 140px;
    --oiH: 90px;
    --netLongsH: 80px;
    --netShortsH: 80px;
    --fundingH: 80px;
    --longShortH: 80px;
    --volatilityH: 80px;
    --liquidationsH: 90px;
    --etfH: 80px;
    --trendsH: 80px;
    --mvrvH: 80px;
    --fearGreedH: 80px;
}

/* ── Panels scroll container ────────────────────────────── */

.panels {
    position: absolute;
    inset: 0;
    display: flex;
    flex-direction: column;
    overflow-y: auto;
    overscroll-behavior: contain;
    scrollbar-width: none; /* Firefox */
}

.panels::-webkit-scrollbar {
    width: 0;
    height: 0;
}

/* ── Panel base ─────────────────────────────────────────── */

.panel {
    position: relative;
    width: 100%;
    min-height: 0;
}

.panel-main {
    flex: 1 1 auto;
    display: flex;
    flex-direction: row;
    min-height: 220px;
}

.main-plot {
    position: relative;
    flex: 1 1 auto;
    min-width: 0;
}

/* ── Volume panel ───────────────────────────────────────── */

.panel-volume {
    height: var(--volumeH);
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

/* ── Derivative panels ──────────────────────────────────── */

.panel-derivative {
    border-top: 1px solid rgba(255, 255, 255, 0.06);
}

.panel-oi          { height: var(--oiH);           }
.panel-netlongs    { height: var(--netLongsH);      }
.panel-netshorts   { height: var(--netShortsH);     }
.panel-funding     { height: var(--fundingH);       }
.panel-longshort   { height: var(--longShortH);     }
.panel-volatility  { height: var(--volatilityH);    }
.panel-liquidations { height: var(--liquidationsH); }
.panel-etf         { height: var(--etfH);           }
.panel-trends      { height: var(--trendsH);        }
.panel-mvrv        { height: var(--mvrvH);          }
.panel-feargreed   { height: var(--fearGreedH);     }

/* ── Splitters ──────────────────────────────────────────── */

#splitter,
.splitter-indicator {
    position: relative;
    height: 8px;
    min-height: 8px;
    flex: 0 0 8px;
    margin-top: -4px;
    margin-bottom: -4px;
    cursor: row-resize;
    touch-action: none;
    pointer-events: auto;
    z-index: 20;
    display: none;
    user-select: none;
    background: transparent;
}

#splitter::before,
.splitter-indicator::before {
    content: '';
    position: absolute;
    left: 0;
    right: 0;
    top: 50%;
    height: 1px;
    transform: translateY(-50%);
    border-radius: 999px;
    background: rgba(54, 59, 66, 0.63);
    box-shadow: 0 0 0 1px rgba(0, 0, 0, 0.18);
    transition: background 120ms ease, box-shadow 120ms ease, opacity 120ms ease;
}

#splitter:hover::before,
.splitter-indicator:hover::before,
#splitter.is-active::before,
.splitter-indicator.is-active::before {
    background: rgba(98, 169, 255, 0.88);
    box-shadow: 0 0 0 1px rgba(98, 169, 255, 0.45), 0 0 12px rgba(98, 169, 255, 0.22);
}

#splitter:hover,
.splitter-indicator:hover {
    background: rgba(98, 169, 255, 0.05);
}

/* Active resize state */
body.is-resizing-panels {
    user-select: none;
    cursor: row-resize;
}

body.is-resizing-panels #splitter,
body.is-resizing-panels .splitter-indicator {
    cursor: row-resize;
}