/**
 * 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);
}


/* Tape-coverage note (Trade Bubbles, Footprint). Both overlays draw an identical blank pane
   whether the feed is down, the coin was never subscribed, the tape does not reach back far
   enough, or the size filter hid every print. The note is where that difference is readable,
   so it sits between the name and the live value and carries the full text as a tooltip. */
.legend-note {
    font-family: 'Source Code Pro', monospace;
    font-size: 9px;
    color: var(--degen-color-warning);
    opacity: 0.85;
    margin-left: 4px;
    max-width: 260px;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: help;
}

.noted-indicator .legend-name {
    color: var(--degen-text-secondary);
}

/* 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;
    }
}