/**
 * chart-panel.css — ChartPanel Module Styling
 *
 * Self-contained CSS for the refactored chart-panel.js module.
 * Glass-box design (light borders, semi-transparent backgrounds, dark text on dark theme).
 * All class prefixes use 'cp-' (ChartPanel) to avoid collisions.
 *
 * Sections:
 *   1. Root container and layout
 *   2. Header (title, price display, controls)
 *   3. Selectors and controls styling
 *   4. Indicator checkboxes
 *   5. Chart container and TradingView integration
 *   6. HUD and tooltip overlays
 *   7. Feed status pill
 *   8. Price flash animation
 */

/* ═══════════════════════════════════════════════════════════════════════════
   1. ROOT CONTAINER & LAYOUT
   ═══════════════════════════════════════════════════════════════════════════ */

.cp-root {
    display: flex;
    flex-direction: column;
    gap: 0;
    background: rgba(10, 10, 10, 0.4);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 8px;
    overflow: hidden;
}

/* ═══════════════════════════════════════════════════════════════════════════
   2. HEADER (Title, Price, Controls)
   ═══════════════════════════════════════════════════════════════════════════ */

.cp-header {
    display: flex;
    flex-direction: column;
    gap: 12px;
    padding: 12px 16px;
    background: rgba(15, 15, 20, 0.6);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}

.cp-title-container {
    display: flex;
    align-items: center;
    gap: 12px;
}

.cp-title {
    margin: 0;
    font-size: 14px;
    font-weight: 600;
    color: #ffffff;
    letter-spacing: 1px;
}

.cp-price-display {
    font-family: 'JetBrains Mono', monospace;
    font-size: 18px;
    font-weight: 700;
    color: #ffffff;
    letter-spacing: 0.5px;
    min-width: 120px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   3. CONTROLS (Selectors)
   ═══════════════════════════════════════════════════════════════════════════ */

.cp-controls {
    display: flex;
    gap: 8px;
    flex-wrap: wrap;
    align-items: center;
}

.cp-selector {
    padding: 6px 10px;
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
    border-radius: 4px;
    color: #ffffff;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    cursor: pointer;
    transition: all 0.2s ease;
    min-width: 100px;
}

.cp-selector:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.15);
}

.cp-selector:focus {
    outline: none;
    border-color: rgba(0, 204, 255, 0.5);
    box-shadow: 0 0 8px rgba(0, 204, 255, 0.2);
}

.cp-selector option {
    background: #1a1a1f;
    color: #ffffff;
    padding: 4px 8px;
}

.cp-selector optgroup {
    background: #1a1a1f;
    color: #888888;
    font-weight: 600;
}

/* ═══════════════════════════════════════════════════════════════════════════
   4. INDICATOR CHECKBOXES
   ═══════════════════════════════════════════════════════════════════════════ */

.cp-indicator-checkboxes {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
    align-items: center;
    padding-top: 8px;
    border-top: 1px solid rgba(255, 255, 255, 0.04);
}

.cp-indicator-check {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 8px;
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.08);
    border-radius: 3px;
    cursor: pointer;
    user-select: none;
    transition: all 0.2s ease;
}

.cp-indicator-check:hover {
    background: rgba(255, 255, 255, 0.08);
    border-color: rgba(255, 255, 255, 0.12);
}

.cp-indicator-check input[type="checkbox"] {
    cursor: pointer;
    accent-color: #00ccff;
    width: 14px;
    height: 14px;
}

.cp-indicator-check span {
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #bbbbbb;
}

.cp-color-dot {
    display: inline-block;
    width: 6px;
    height: 6px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* ═══════════════════════════════════════════════════════════════════════════
   5. CHART CONTAINER & TRADINGVIEW INTEGRATION
   ═══════════════════════════════════════════════════════════════════════════ */

.cp-container {
    position: relative;
    flex: 1;
    display: flex;
    flex-direction: column;
    min-height: 400px;
    background: #0a0a0a;
    overflow: hidden;
}

.cp-tv-chart-container {
    flex: 1;
    position: relative;
    width: 100%;
    height: 100%;
    /* #45 companion: the candle pane is a flex:1 child of .cp-container,
       which ALSO holds the stacked oscillator panes (volume/rsi/macd/atr --
       up to ~360px combined). With no floor here, 4 active osc panes crush
       the candle pane to near-zero on any column that isn't very tall (see
       the "uhhhh" screenshot -- candle ~40px, only osc labels visible).
       This floor guarantees the price chart always stays the dominant pane;
       if the column is too short to fit floor + osc stack, .cp-container's
       overflow:hidden clips an oscillator rather than the candle. */
    min-height: 260px;
}

/* Lightweight Charts canvas styling */
.cp-tv-chart-container canvas {
    display: block;
    width: 100% !important;
    height: 100% !important;
}

/* ═══════════════════════════════════════════════════════════════════════════
   6. HUD & TOOLTIP OVERLAYS
   ═══════════════════════════════════════════════════════════════════════════ */

.cp-chart-hud {
    position: absolute;
    top: 12px;
    right: 12px;
    display: flex;
    flex-direction: column;
    gap: 4px;
    padding: 8px 12px;
    background: rgba(15, 15, 20, 0.8);
    border: 1px solid rgba(255, 215, 0, 0.2);
    border-radius: 4px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #cccccc;
    z-index: 100;
    visibility: hidden;
    pointer-events: none;
}

.cp-hud-price {
    font-size: 12px;
    font-weight: 600;
    color: #ffffff;
    text-shadow: 0 0 6px rgba(34, 197, 94, 0.5);
}

.cp-hud-ohlc {
    font-size: 10px;
    color: #aaaaaa;
    letter-spacing: 0.5px;
}

.cp-crosshair-tooltip {
    position: absolute;
    background: rgba(10, 10, 10, 0.96);
    border: 1px solid rgba(255, 215, 0, 0.35);
    border-radius: 6px;
    padding: 6px 10px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 10px;
    color: #cccccc;
    z-index: 99;
    pointer-events: none;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.6);
    white-space: nowrap;
}

.cp-crosshair-tooltip div {
    margin: 2px 0;
}

.cp-crosshair-tooltip div:first-child {
    color: #888888;
    font-size: 9px;
}

.cp-trade-tooltip {
    position: absolute;
    background: rgba(0, 0, 0, 0.95);
    border: 1px solid #444444;
    border-radius: 6px;
    padding: 10px 12px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    color: #cccccc;
    z-index: 98;
    pointer-events: none;
    min-width: 180px;
    box-shadow: 0 2px 10px rgba(0, 0, 0, 0.5);
}

#tooltipContent {
    display: flex;
    flex-direction: column;
    gap: 4px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   7. FEED STATUS PILL
   ═══════════════════════════════════════════════════════════════════════════ */

.cp-feed-status-pill {
    position: absolute;
    top: 12px;
    left: 50%;
    transform: translateX(-50%);
    background: rgba(255, 51, 102, 0.15);
    border: 1px solid rgba(255, 51, 102, 0.5);
    color: #ff6b8a;
    padding: 6px 14px;
    border-radius: 20px;
    font-family: 'JetBrains Mono', monospace;
    font-size: 11px;
    z-index: 97;
    letter-spacing: 0.5px;
    pointer-events: none;
    animation: cp-pulse 2s ease-in-out infinite;
}

@keyframes cp-pulse {
    0%, 100% { opacity: 0.7; }
    50% { opacity: 1; }
}

/* ═══════════════════════════════════════════════════════════════════════════
   8. PRICE FLASH ANIMATION (from chart-panel.js)
   ═══════════════════════════════════════════════════════════════════════════ */

.ogz-chart-panel-price-flash {
    transition: color 0.08s ease, text-shadow 0.08s ease;
}

/* ═══════════════════════════════════════════════════════════════════════════
   RESPONSIVE: Smaller screens
   ═══════════════════════════════════════════════════════════════════════════ */

@media (max-width: 1200px) {
    .cp-header {
        padding: 10px 12px;
        gap: 10px;
    }

    .cp-selector {
        min-width: 80px;
        padding: 5px 8px;
        font-size: 10px;
    }

    .cp-indicator-checkboxes {
        gap: 4px;
    }

    .cp-indicator-check {
        padding: 3px 6px;
        font-size: 9px;
    }

    .cp-chart-hud {
        font-size: 10px;
        top: 8px;
        right: 8px;
    }

    .cp-price-display {
        font-size: 16px;
    }
}

@media (max-width: 768px) {
    .cp-root {
        border-radius: 4px;
    }

    .cp-header {
        padding: 8px 10px;
    }

    .cp-controls {
        gap: 6px;
    }

    .cp-selector {
        min-width: 70px;
        padding: 4px 6px;
        font-size: 9px;
    }

    .cp-indicator-checkboxes {
        gap: 3px;
    }

    .cp-price-display {
        font-size: 14px;
    }

    .cp-container {
        min-height: 300px;
    }
}

/* ═══════════════════════════════════════════════════════════════════════════
   DARK MODE TWEAKS (for consistency with dashboard theme)
   ═══════════════════════════════════════════════════════════════════════════ */

:root {
    --cp-bg-dark: #0a0a0a;
    --cp-bg-overlay: rgba(15, 15, 20, 0.8);
    --cp-border-light: rgba(255, 255, 255, 0.08);
    --cp-text-primary: #ffffff;
    --cp-text-secondary: #cccccc;
    --cp-accent: #00ccff;
    --cp-green: #22c55e;
    --cp-red: #ef4444;
}