/**
 * 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: auto;
    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-radius: 2px;
    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;
    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;
    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);
}


/* 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-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-settings-btn,
.indicator-legend-item:hover .legend-close-btn {
    opacity: 1;
}


/* 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-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-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-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-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-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-settings-btn,
    .legend-close-btn {
        opacity: 0.5;
    }

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

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