/**
 * Indicator Legend Styles
 * 
 * Minimal, TradingView-inspired legend styling.
 * Designed to be unobtrusive while remaining functional.
 * These elements are dynamically created by indicator-legend.js.
 */


/* Legend Container - positioned in top-left of each chart pane */

.indicator-legend-container {
    position: absolute;
    left: 6px;
    z-index: 10;
    display: flex;
    flex-direction: row;
    flex-wrap: wrap;
    gap: 1px 12px;
    /* Small vertical gap, larger horizontal gap */
    pointer-events: none;
    max-width: calc(100% - 80px);
    /* top is set dynamically by JS based on pane position */
}


/* Main pane legend - positioned at chart top */

.indicator-legend-container.main-pane {
    top: 2px;
}


/* Oscillator pane legends - top is calculated and set by JS */

.indicator-legend-container.oscillator-pane {
    /* Position is set via inline style by indicator-legend.js */
}


/* Individual legend item - minimal inline styling */

.indicator-legend-item {
    display: inline-flex;
    align-items: center;
    gap: 4px;
    padding: 1px 4px;
    background: transparent;
    border: 1px solid rgba(255, 255, 255, 0.05);
    border-radius: 2px;
    /* The container is click-through so the candles stay draggable between the chips.
       Each chip takes its own clicks back -- without this the whole legend is inert. */
    pointer-events: auto;
    font-size: 10px;
    font-family: -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif;
    color: rgba(255, 255, 255, 0.65);
    white-space: nowrap;
    user-select: none;
    backdrop-filter: blur(4px);
    transition: background 0.15s ease, color 0.15s ease;
    /* Subtle text shadow for readability over chart */
    text-shadow: 0 0 3px rgba(0, 0, 0, 0.8), 0 0 6px rgba(0, 0, 0, 0.5);
}


/* Hover state - subtle highlight */

.indicator-legend-item:hover {
    background: rgba(255, 255, 255, 0.08);
    color: rgba(255, 255, 255, 0.9);
}


/* Hidden indicator styling - dimmed */

.indicator-legend-item.hidden-indicator {
    opacity: 0.4;
}

.indicator-legend-item.hidden-indicator .legend-name {
    text-decoration: line-through;
    text-decoration-color: rgba(255, 255, 255, 0.4);
}


/* Unified color indicator - rectangular for rigid terminal aesthetic */

.legend-color-indicator {
    width: 6px;
    height: 6px;
    border-radius: 1px;
    flex-shrink: 0;
    box-shadow: 0 0 2px rgba(0, 0, 0, 0.5);
}


/* Multi-color gradient bar - rectangular segments */

.legend-color-indicator.multi-color {
    width: 16px;
    height: 6px;
    border-radius: 1px;
}


/* Indicator name - clickable for visibility toggle */

.legend-name {
    cursor: pointer;
    color: rgba(255, 255, 255, 0.87);
    font-weight: 400;
    letter-spacing: 0.01em;
    transition: color 0.1s ease;
}

.legend-name:hover {
    color: rgba(255, 255, 255, 1);
}

.hidden-indicator .legend-name {
    color: rgba(255, 255, 255, 0.35);
}

/* Asset-restricted indicator (e.g. Realized Price on a non-BTC chart). The chip stays active;
   the muted, italicised label + the name tooltip warn that it only works on the supported asset. */
.restricted-indicator .legend-name {
    color: rgba(255, 255, 255, 0.4);
    font-style: italic;
}

.restricted-indicator .legend-name:hover {
    color: rgba(255, 255, 255, 0.55);
}


/* Live value display container */

.legend-value {
    font-family: 'SF Mono', 'Monaco', 'Consolas', monospace;
    font-size: 9px;
    margin-left: 2px;
    display: inline-flex;
    align-items: center;
    gap: 3px;
}


/* Individual value items (colored by JS) */

.legend-value-item {
    text-shadow: 0 0 2px rgba(0, 0, 0, 0.6);
}


/* Button base styles - very minimal */

.legend-eye-btn,
.legend-settings-btn,
.legend-close-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 12px;
    height: 12px;
    padding: 0;
    margin: 0;
    border: none;
    background: transparent;
    color: rgba(255, 255, 255, 0.25);
    cursor: pointer;
    border-radius: 2px;
    transition: all 0.1s ease;
    opacity: 0;
    font-size: 10px;
}


/* Show buttons on hover */

.indicator-legend-item:hover .legend-eye-btn,
.indicator-legend-item:hover .legend-settings-btn,
.indicator-legend-item:hover .legend-close-btn {
    opacity: 1;
}


/* Eye / visibility button. Keep it persistently visible while hidden so a dimmed,
   struck-through chip still exposes the one control that brings the series back. */

.legend-eye-btn:hover {
    color: rgba(255, 255, 255, 0.8);
}

.indicator-legend-item.hidden-indicator .legend-eye-btn {
    opacity: 1;
}

/* Icon swap: open eye when visible, slashed eye when the chip is hidden. Driven purely
   by the .hidden-indicator class so it stays correct regardless of how the toggle fired. */
.legend-eye-btn .eye-icon {
    display: block;
}

.legend-eye-btn .eye-off {
    display: none;
}

.indicator-legend-item.hidden-indicator .legend-eye-btn .eye-open {
    display: none;
}

.indicator-legend-item.hidden-indicator .legend-eye-btn .eye-off {
    display: block;
}


/* Settings gear button */

.legend-settings-btn:hover {
    color: rgba(255, 255, 255, 0.8);
}


/* Close/remove button */

.legend-close-btn {
    font-weight: normal;
}

.legend-close-btn:hover {
    color: #ef5350;
}


/* Focus styles for accessibility */

.legend-eye-btn:focus-visible,
.legend-settings-btn:focus-visible,
.legend-close-btn:focus-visible {
    outline: 1px solid rgba(33, 150, 243, 0.5);
    opacity: 1;
}


/* ========================================
   MOBILE RESPONSIVE STYLES
   ======================================== */

/* Tablet breakpoint (< 1024px) */
@media (max-width: 1024px) {
    .indicator-legend-item {
        font-size: 11px;
        padding: 2px 6px;
        gap: 5px;
    }

    .legend-value {
        font-size: 10px;
    }

    .legend-eye-btn,
    .legend-settings-btn,
    .legend-close-btn {
        width: 16px;
        height: 16px;
        font-size: 12px;
    }
}

/* Mobile breakpoint (< 768px) */
@media (max-width: 768px) {
    .indicator-legend-container {
        left: 4px;
        gap: 2px 8px;
        max-width: calc(100% - 60px);
    }

    .indicator-legend-item {
        font-size: 11px;
        padding: 4px 8px;
        gap: 6px;
        /* Larger touch target */
        min-height: 28px;
    }

    .legend-color-indicator {
        width: 8px;
        height: 8px;
    }

    .legend-color-indicator.multi-color {
        width: 18px;
        height: 8px;
    }

    .legend-value {
        font-size: 10px;
        gap: 4px;
    }

    /* Always show buttons on mobile (no hover) */
    .legend-eye-btn,
    .legend-settings-btn,
    .legend-close-btn {
        opacity: 0.6;
        width: 24px;
        height: 24px;
        font-size: 14px;
        /* Better touch target */
        min-width: 24px;
        min-height: 24px;
    }

    .legend-eye-btn:active,
    .legend-settings-btn:active,
    .legend-close-btn:active {
        opacity: 1;
        background: rgba(255, 255, 255, 0.15);
    }
}

/* Small mobile breakpoint (< 480px) */
@media (max-width: 480px) {
    .indicator-legend-container {
        left: 2px;
        gap: 4px 6px;
        /* Stack vertically on very small screens */
        flex-direction: column;
        align-items: flex-start;
    }

    .indicator-legend-item {
        font-size: 10px;
        padding: 3px 6px;
        min-height: 24px;
    }

    /* Hide values on very small screens to save space */
    .legend-value {
        display: none;
    }

    .legend-eye-btn,
    .legend-settings-btn,
    .legend-close-btn {
        width: 20px;
        height: 20px;
        font-size: 12px;
    }
}

/* Touch device detection via pointer query */
@media (pointer: coarse) {
    /* Always show action buttons on touch devices */
    .legend-eye-btn,
    .legend-settings-btn,
    .legend-close-btn {
        opacity: 0.5;
    }

    .indicator-legend-item {
        /* Minimum touch target size */
        min-height: 32px;
        padding: 4px 8px;
    }

    .legend-eye-btn,
    .legend-settings-btn,
    .legend-close-btn {
        width: 28px;
        height: 28px;
        font-size: 14px;
    }
}

/* ========================================
   PHONE: COLLAPSE THE LEGEND TO ONE PILL
   ========================================

   Four registered indicators used to render as four stacked frosted bars covering the top
   third of the candles -- on a 390px-wide phone that is most of the chart. The pill states
   how many there are and opens the same list on tap, so the default state costs one row. */

/* The pill is a phone-only control: nothing renders it on a wider screen. */
.legend-summary-pill {
    display: none;
}

@media (max-width: 599px) {
    .indicator-legend-container {
        flex-direction: column;
        align-items: flex-start;
        gap: 3px;
    }

    /* Only a legend that actually collapsed shows the pill. A single indicator keeps
       rendering as its own chip, because a pill saying "1 indicator" hides the name for
       no gain. */
    .indicator-legend-container.legend-collapsible .legend-summary-pill {
        display: inline-flex;
        align-items: center;
        gap: 6px;
        /* Matches the folded drawing-rail button beside it (36px square, same top edge), so the
           two sit level instead of the pill hanging a few pixels low. */
        min-height: 36px;
        padding: 4px 10px;
        background: var(--degen-bg-surface);
        border: 1px solid var(--degen-border-muted);
        border-radius: var(--degen-radius-md);
        box-shadow: var(--degen-shadow-lg);
        pointer-events: auto;
        cursor: pointer;
        font-family: var(--degen-font-sans);
        font-size: 11px;
        color: var(--degen-text-secondary);
        white-space: nowrap;
        user-select: none;
    }

    .indicator-legend-container.legend-collapsible .legend-summary-pill:active {
        border-color: var(--degen-border-accent-strong);
        color: var(--degen-text-primary);
    }

    .legend-summary-count {
        font-family: var(--degen-font-mono);
        font-weight: 600;
        color: var(--degen-text-primary);
    }

    /* The caret points down while the list is folded away, up once it is open. */
    .legend-summary-caret {
        display: inline-block;
        transition: transform 0.15s ease;
    }

    .indicator-legend-container.legend-expanded .legend-summary-caret {
        transform: rotate(180deg);
    }

    /* Folded: the chips are gone, not merely transparent, so they cost no chart height. */
    .indicator-legend-container.legend-collapsible:not(.legend-expanded) .indicator-legend-item {
        display: none;
    }

    /* Opened: a readable panel rather than text floating over candles. */
    .indicator-legend-container.legend-expanded .indicator-legend-item {
        display: flex;
        width: 100%;
        background: var(--degen-bg-surface);
        border-color: var(--degen-border-muted);
        border-radius: var(--degen-radius-md);
        box-shadow: var(--degen-shadow-lg);
        backdrop-filter: none;
        text-shadow: none;
    }
}


/* ========================================
   REDUCED MOTION
   ======================================== */

@media (prefers-reduced-motion: reduce) {
    .indicator-legend-item,
    .legend-name,
    .legend-eye-btn,
    .legend-settings-btn,
    .legend-close-btn,
    .legend-summary-caret {
        transition: none !important;
    }
}