/* ═══════════════ Chart Widget — Candlestick Chart & Drawing Tools ═══════════════
   Styles for: chart container, drawing toolbar (.dt-btn), drawing canvas,
   timeframe/indicator dropdowns, Quick Trade modal, mobile overrides,
   touch crosshair, position/alarm drag tooltips
   ═══════════════════════════════════════════════════════════════════════════════ */
.chart-widget .widget-body {
    position: relative;
    overflow: hidden;
}
.chart-container {
    width: 100%;
    height: 100%;
}

/* ══════════════════════════════════════════════════════════════════════════════
   Chart Multi-Tab System
   ══════════════════════════════════════════════════════════════════════════════ */

/* Tab bar container */
.chart-tabs-bar {
    display: flex;
    align-items: center;
    height: 32px;
    flex-shrink: 0;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    padding: 0 6px;
    gap: 4px;
    position: relative;
}

/* Tab list (scrollable) */
.chart-tabs-list {
    display: flex;
    flex: 1;
    align-items: center;
    gap: 2px;
    overflow-x: auto;
    overflow-y: hidden;
    -webkit-overflow-scrolling: touch;
}
.chart-tabs-list::-webkit-scrollbar {
    display: none;
}
.chart-tabs-list {
    scrollbar-width: none;
}

/* Individual tab */
.chart-tab {
    display: flex;
    align-items: center;
    gap: 5px;
    padding: 4px 8px;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: 11px;
    font-weight: 500;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background var(--transition), color var(--transition), border-color var(--transition);
    border-bottom: 2px solid transparent;
    position: relative;
}
.chart-tab:hover {
    background: var(--bg-hover);
    color: var(--text-secondary);
}
.chart-tab.active {
    background: var(--bg-hover);
    color: var(--text-primary);
    border-bottom-color: var(--accent);
}

/* Tab logo */
.chart-tab-logo {
    width: 14px;
    height: 14px;
    border-radius: 50%;
    object-fit: cover;
    flex-shrink: 0;
}

/* Tab symbol */
.chart-tab-symbol {
    font-weight: 600;
    font-size: 11px;
}

/* Tab timeframe badge */
.chart-tab-tf {
    font-size: 9px;
    color: var(--text-muted);
    opacity: 0.7;
    padding: 1px 4px;
    border-radius: 3px;
    background: var(--bg-tertiary);
}
.chart-tab.active .chart-tab-tf {
    color: var(--accent);
    background: var(--accent-muted);
    opacity: 1;
}

/* Tab dragging state */
.chart-tab-dragging {
    opacity: 0.5;
    border: 1px dashed var(--accent);
    background: var(--accent-muted);
}
.chart-tab[draggable="true"] {
    cursor: grab;
}
.chart-tab[draggable="true"]:active {
    cursor: grabbing;
}

/* Tab close button */
.chart-tab-close {
    width: 14px;
    height: 14px;
    border: none;
    background: transparent;
    color: var(--text-muted);
    font-size: 14px;
    line-height: 1;
    cursor: pointer;
    padding: 0;
    margin-left: 2px;
    border-radius: 2px;
    transition: color var(--transition), background var(--transition);
    flex-shrink: 0;
}
.chart-tab-close:hover {
    background: rgba(255, 61, 113, 0.2);
    color: var(--color-danger);
}

/* Tab add button — son sekmenin hemen yanında, inline flow */
.chart-tab-add {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    width: 22px;
    height: 22px;
    margin-left: 2px;
    border: 1px dashed var(--border);
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    font-size: 16px;
    font-weight: 300;
    line-height: 1;
    cursor: pointer;
    transition: all var(--transition);
    vertical-align: middle;
}
.chart-tab-add:hover {
    border-color: var(--accent);
    color: var(--accent);
    background: var(--accent-muted);
}

/* Tab search dropdown — body'ye append edilir (overflow:hidden parent zincirinden kaçmak için) */
.chart-tab-search {
    position: fixed;
    width: 300px;
    max-height: 280px;
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4);
    z-index: 99999; /* Her şeyin üstünde */
    display: flex;
    flex-direction: column;
    overflow: hidden;
    pointer-events: auto;
}
.chart-tab-search.hidden {
    display: none;
}

/* Search input */
.chart-tab-search-input {
    width: 100%;
    padding: 8px 12px;
    border: none;
    border-bottom: 1px solid var(--border);
    background: var(--bg-secondary);
    color: var(--text-primary);
    font-size: 12px;
    font-family: inherit;
    outline: none;
}
.chart-tab-search-input::placeholder {
    color: var(--text-muted);
}

/* Search results container */
.chart-tab-search-results {
    max-height: 200px;
    overflow-y: auto;
}

/* Search result item */
.chart-tab-search-item {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    cursor: pointer;
    font-size: 12px;
    color: var(--text-secondary);
    transition: background var(--transition);
}
.chart-tab-search-item:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.chart-tab-search-item img {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    flex-shrink: 0;
}

/* Empty state */
.chart-tab-search-empty {
    padding: 20px;
    text-align: center;
    font-size: 11px;
    color: var(--text-muted);
}

/* Chart body wrapper (yeni yapı — tab bar altında) */
.chart-body {
    position: relative;
    flex: 1;
    overflow: hidden;
}

/* Mobile overrides */
@media (max-width: 768px) {
    .chart-tabs-bar {
        height: 24px;
        padding: 0 4px;
    }
    .chart-tab {
        padding: 2px 5px;
        font-size: 10px;
        gap: 3px;
    }
    .chart-tab-logo {
        width: 12px;
        height: 12px;
    }
    .chart-tab-symbol {
        font-size: 10px;
    }
    /* Mobilde TF badge gizle (yer kazanmak için) */
    .chart-tab-tf {
        display: none;
    }
    .chart-tab-close {
        width: 12px;
        height: 12px;
        font-size: 12px;
    }
    .chart-tab-add {
        width: 20px;
        height: 20px;
        font-size: 14px;
    }
    .chart-tab-search {
        width: calc(100vw - 16px);
        max-width: 300px;
        left: 8px !important; /* Mobile'da sol kenara sabitle */
    }
}

/* ── Tema Overrides — widget-header patternini birebir taklit eder ── */

/* Glass (mavi-mor nötr) — widget-header: rgba(255,255,255,0.02) */
[data-theme="glass"] .chart-tabs-bar {
    background: rgba(255, 255, 255, 0.02);
    border-bottom: var(--glass-border-subtle);
}
[data-theme="glass"] .chart-tab.active {
    background: var(--glass-bg-strong); /* rgba(255,255,255,0.06) */
}

/* Glass Green (Matrix / trading) — widget-header: rgba(255,255,255,0.02) */
[data-theme="glass-green"] .chart-tabs-bar {
    background: rgba(255, 255, 255, 0.02);
    border-bottom: var(--glass-border-subtle);
}
[data-theme="glass-green"] .chart-tab.active {
    background: rgba(16, 185, 129, 0.1);
}

/* Glass Purple (Cyberpunk) — widget-header: rgba(168,85,247,0.02) */
[data-theme="glass-purple"] .chart-tabs-bar {
    background: rgba(168, 85, 247, 0.02);
    border-bottom: var(--glass-border-subtle);
}
[data-theme="glass-purple"] .chart-tab.active {
    background: rgba(168, 85, 247, 0.1);
}

/* Glass Amber (Premium warm) — widget-header: varsayılan (--bg-secondary = rgba(255,255,255,0.02)) */
[data-theme="glass-amber"] .chart-tabs-bar {
    background: rgba(245, 158, 11, 0.02);
    border-bottom: var(--glass-border-subtle);
}
[data-theme="glass-amber"] .chart-tab.active {
    background: rgba(245, 158, 11, 0.1);
}

/* Glass Carbon (Minimal Anthracite) — widget-header: rgba(255,255,255,0.02) */
[data-theme="glass-carbon"] .chart-tabs-bar {
    background: rgba(255, 255, 255, 0.02);
    border-bottom: var(--glass-border-subtle);
}
[data-theme="glass-carbon"] .chart-tab.active {
    background: var(--glass-bg-strong);
}

/* Midnight (Derin Uzay) — widget-header: rgba(14,165,233,0.03) + border #1a2744 */
[data-theme="midnight"] .chart-tabs-bar {
    background: rgba(14, 165, 233, 0.03);
    border-bottom-color: #1a2744;
}

/* Sunset (Turuncu Sıcak) — widget-header: rgba(232,145,58,0.02) + border #2e251e */
[data-theme="sunset"] .chart-tabs-bar {
    background: rgba(232, 145, 58, 0.02);
    border-bottom-color: #2e251e;
}

/* ══════════════════════════════════════════════════════════════════════════════ */

/* Crosshair legend (fiyat bilgisi overlay) */
.chart-legend {
    position: absolute;
    top: 6px;
    left: 10px;
    z-index: 10;
    display: flex;
    gap: 12px;
    font-family: var(--font-mono);
    font-size: 10px;
    color: var(--text-secondary);
    pointer-events: none;
}
.chart-legend-item {
    display: flex;
    gap: 4px;
}
.chart-legend-label {
    color: var(--text-muted);
}

/* Indicator sub-charts */
.indicator-pane {
    width: 100%;
    border-top: 1px solid var(--border);
}
.indicator-label {
    position: absolute;
    top: 2px;
    left: 6px;
    font-size: 9px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.5px;
    z-index: 2;
    pointer-events: none;
}

/* Watermark */
.chart-watermark {
    position: absolute;
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    font-size: 48px;
    font-weight: 700;
    color: var(--text-muted);
    opacity: 0.04;
    pointer-events: none;
    user-select: none;
    letter-spacing: 4px;
}

/* ── Drawing Tools (header inline) ── */
.drawing-tools {
    display: flex;
    align-items: center;
    gap: 1px;
    margin-left: 10px;
    padding-left: 10px;
    border-left: 1px solid var(--border);
}
.drawing-tools .dt-btn {
    display: flex;
    align-items: center;
    justify-content: center;
    width: 22px;
    height: 22px;
    padding: 0;
    border: none;
    border-radius: var(--radius-sm);
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background var(--transition), color var(--transition);
    position: relative;
}
.drawing-tools .dt-btn:hover {
    background: var(--bg-hover);
    color: var(--text-primary);
}
.drawing-tools .dt-btn.active {
    background: var(--accent-muted);
    color: var(--accent);
}
.drawing-tools .dt-btn svg {
    width: 14px;
    height: 14px;
}
.drawing-tools .dt-sep {
    width: 1px;
    height: 14px;
    margin: 0 3px;
    background: var(--border);
}

/* Formation toggle button */
.drawing-tools .dt-formation-btn {
    position: relative;
}
.drawing-tools .dt-formation-btn.active {
    background: rgba(255, 107, 53, 0.2);
    color: #ff6b35;
}
.dt-formation-badge {
    position: absolute;
    top: -3px;
    right: -3px;
    min-width: 14px;
    height: 14px;
    padding: 0 3px;
    font-size: 9px;
    font-weight: 700;
    font-family: var(--font-mono);
    color: #fff;
    background: #ff6b35;
    border-radius: 7px;
    display: flex;
    align-items: center;
    justify-content: center;
    line-height: 1;
    pointer-events: none;
}

/* Color picker popup (body'ye taşınır, fixed konumlandırma) */
.dt-color-popup {
    display: none;
    position: fixed;
    z-index: 300;
    padding: 6px;
    background: var(--bg-secondary);
    border: 1px solid var(--border);
    border-radius: var(--radius);
    box-shadow: var(--shadow);
    flex-wrap: wrap;
    gap: 4px;
    width: 90px;
}
.dt-color-popup.show {
    display: flex;
}
.dt-color-swatch {
    width: 16px;
    height: 16px;
    border-radius: 3px;
    border: 2px solid transparent;
    cursor: pointer;
    transition: border-color var(--transition), transform var(--transition);
}
.dt-color-swatch:hover {
    transform: scale(1.15);
}
.dt-color-swatch.active {
    border-color: var(--text-primary);
}

/* Drawing canvas */
.drawing-canvas {
    position: absolute;
    top: 0;
    left: 0;
    width: 100%;
    height: 100%;
    pointer-events: none;
    z-index: 5;
    touch-action: none; /* Çizim modunda tarayıcı gesturelarını engelle */
}

/* Active tool cursor feedback on chart container */
.chart-widget.drawing-active #chartContainer {
    cursor: crosshair !important;
}

/* ═══════════════ MOBILE ═══════════════ */
@media (max-width: 768px) {
    .chart-container {
        touch-action: none; /* Chart kendi touch'ını yönetir */
    }

    .chart-legend {
        font-size: 12px;
        gap: 8px;
        top: 4px;
        left: 6px;
    }

    .chart-watermark {
        font-size: 28px;
        letter-spacing: 2px;
    }

    .indicator-label {
        font-size: 10px;
    }

    /* Drawing tools — daha büyük touch hedefleri */
    .drawing-tools {
        gap: 2px;
        margin-left: 6px;
        padding-left: 6px;
        overflow-x: auto;
        overflow-y: hidden;
        -webkit-overflow-scrolling: touch;
        scrollbar-width: none;
        max-width: calc(100vw - 120px);
        flex-shrink: 1;
        min-width: 0;
    }
    .drawing-tools::-webkit-scrollbar {
        display: none;
    }
    .drawing-tools .dt-btn {
        width: 32px;
        height: 32px;
        min-width: 32px;
        min-height: 32px;
    }
    .drawing-tools .dt-btn svg {
        width: 16px;
        height: 16px;
    }
    .drawing-tools .dt-sep {
        height: 16px;
        margin: 0 1px;
    }

    /* Color picker — mobilde daha büyük swatch'lar */
    .dt-color-popup {
        width: 130px;
        padding: 8px;
        gap: 6px;
    }
    .dt-color-swatch {
        width: 36px;
        height: 36px;
        border-radius: 6px;
        border-width: 3px;
    }

    /* ═══════ Quick Trade Buttons (grafik sol kenar) ═══════ */
    .quick-trade-btns {
        position: absolute;
        left: 6px;
        top: 50px;
        z-index: 15;
        display: flex;
        flex-direction: column;
        gap: 6px;
    }
    .qt-btn {
        width: 44px;
        height: 44px;
        border-radius: 10px;
        border: none;
        font-size: 14px;
        font-weight: 800;
        cursor: pointer;
        opacity: 0.6;
        transition: opacity 0.15s, transform 0.15s;
        color: #fff;
        display: flex;
        align-items: center;
        justify-content: center;
        -webkit-tap-highlight-color: transparent;
    }
    .qt-btn:active {
        opacity: 1;
        transform: scale(1.1);
    }
    .qt-long {
        background: var(--color-success);
    }
    .qt-short {
        background: var(--color-danger);
    }
}

/* ═══════ Quick Trade Bottom Sheet Modal ═══════ */
.qt-backdrop {
    position: fixed;
    inset: 0;
    background: rgba(0,0,0,0.5);
    z-index: 500;
    opacity: 0;
    transition: opacity 0.2s;
}
.qt-backdrop.visible {
    opacity: 1;
}

.qt-modal {
    position: fixed;
    left: 0;
    right: 0;
    bottom: 0;
    z-index: 501;
    background: var(--surface);
    background-color: var(--surface);
    border-radius: 16px 16px 0 0;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.3);
    max-height: 85vh;
    overflow-y: auto;
    overscroll-behavior-y: contain;
    transform: translateY(100%);
    transition: transform 0.25s ease-out;
    padding-bottom: var(--sa-bottom);
    -webkit-backdrop-filter: blur(20px);
    backdrop-filter: blur(20px);
}
.qt-modal.visible {
    transform: translateY(0);
}

.qt-modal-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 14px 16px 10px;
    border-bottom: 1px solid var(--border);
}
.qt-modal-title {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 15px;
    font-weight: 700;
    color: var(--text-primary);
}
.qt-close-btn {
    background: none;
    border: none;
    color: var(--text-muted);
    font-size: 24px;
    cursor: pointer;
    padding: 4px 8px;
    line-height: 1;
}

.qt-modal-body {
    padding: 12px 16px 16px;
    display: flex;
    flex-direction: column;
    gap: 10px;
}

.qt-row {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 4px 0;
}
.qt-label {
    font-size: 12px;
    color: var(--text-muted);
    font-weight: 500;
}
.qt-value {
    font-size: 13px;
    color: var(--text-primary);
    font-weight: 600;
}

.qt-field {
    display: flex;
    flex-direction: column;
    gap: 4px;
}
.qt-field label {
    font-size: 11px;
    font-weight: 600;
    color: var(--text-muted);
    text-transform: uppercase;
    letter-spacing: 0.3px;
}

.qt-leverage-row {
    display: flex;
    align-items: center;
    gap: 10px;
}
.qt-leverage-slider {
    flex: 1;
    -webkit-appearance: none;
    height: 4px;
    border-radius: 2px;
    background: var(--border);
    outline: none;
}
.qt-leverage-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--accent);
    cursor: pointer;
}
.qt-leverage-val {
    font-family: var(--font-mono);
    font-size: 14px;
    font-weight: 700;
    color: var(--accent);
    min-width: 36px;
    text-align: right;
}

.qt-input {
    width: 100%;
    padding: 10px 12px;
    font-size: 16px;
    font-family: var(--font-mono);
    background: var(--bg-primary);
    border: 1px solid var(--border);
    border-radius: 8px;
    color: var(--text-primary);
    outline: none;
    min-height: 42px;
}
.qt-input:focus {
    border-color: var(--accent);
}
.qt-input-sm {
    padding: 8px 10px;
    font-size: 14px;
    min-height: 36px;
}

.qt-quick-pct {
    display: grid;
    grid-template-columns: repeat(4, 1fr);
    gap: 6px;
}
.qt-quick-pct button {
    padding: 8px;
    font-size: 12px;
    font-weight: 600;
    background: var(--surface-2);
    border: 1px solid var(--border);
    border-radius: 6px;
    color: var(--text-muted);
    cursor: pointer;
    min-height: 36px;
}
.qt-quick-pct button:active {
    background: var(--bg-hover);
    color: var(--text-primary);
}

.qt-tpsl-row {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}
.qt-field-half {
    min-width: 0;
}

.qt-submit {
    width: 100%;
    padding: 14px;
    font-size: 15px;
    font-weight: 700;
    border: none;
    border-radius: 10px;
    color: #fff;
    cursor: pointer;
    min-height: 48px;
    margin-top: 4px;
}
.qt-submit:disabled {
    opacity: 0.5;
}
.qt-submit.btn-long {
    background: var(--color-success);
}
.qt-submit.btn-short {
    background: var(--color-danger);
}

/* Order type toggle (Market / Limit) */
.qt-type-toggle {
    display: flex;
    background: var(--bg-primary);
    border-radius: 8px;
    padding: 3px;
    gap: 2px;
}
.qt-type-btn {
    flex: 1;
    padding: 8px 12px;
    font-size: 13px;
    font-weight: 600;
    border: none;
    border-radius: 6px;
    background: transparent;
    color: var(--text-muted);
    cursor: pointer;
    transition: background 0.15s, color 0.15s;
    min-height: 36px;
    touch-action: manipulation;
}
.qt-type-btn.active {
    background: var(--surface-2);
    color: var(--text-primary);
}
.qt-type-btn:active {
    opacity: 0.8;
}

/* Limit fiyat alanı */
.qt-price-field .qt-input {
    border-color: var(--accent);
}

/* Glass theme — Quick Trade modal fix (v2.24.0) */
[data-theme="glass"] .qt-modal {
    background: rgba(10, 10, 20, 0.95);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    backdrop-filter: blur(40px) saturate(200%);
}

/* Tüm temalar — qt-modal opak arka plan garantisi */
[data-theme="dark"] .qt-modal {
    background: #14141f;
}
[data-theme="light"] .qt-modal {
    background: #ffffff;
    box-shadow: 0 -4px 24px rgba(0,0,0,0.15);
}
[data-theme="midnight"] .qt-modal {
    background: #0e1528;
}
[data-theme="sunset"] .qt-modal {
    background: #171310;
}

/* qt-backdrop tüm temalarda yeterli opaklıkta */
[data-theme="light"] .qt-backdrop {
    background: rgba(0,0,0,0.4);
}

/* Desktop: quick trade gizli */
@media (min-width: 769px) {
    .quick-trade-btns { display: none !important; }
}

/* ═══════════════ Formation Info Popup ═══════════════ */
.formation-info-popup {
    position: fixed;
    z-index: 9999;
    width: 280px;
    max-width: calc(100vw - 24px);
    padding: 0;
    border-radius: var(--radius, 8px);
    border: 1px solid rgba(255, 255, 255, 0.12);
    background: rgba(15, 15, 25, 0.88);
    -webkit-backdrop-filter: blur(24px) saturate(180%);
    backdrop-filter: blur(24px) saturate(180%);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.4), 0 0 0 1px rgba(255, 255, 255, 0.05) inset;
    opacity: 0;
    visibility: hidden;
    transform: translateY(4px);
    transition: opacity 0.2s ease, visibility 0.2s ease, transform 0.2s ease;
    pointer-events: none;
    overflow: hidden;
}
.formation-info-popup.visible {
    opacity: 1;
    visibility: visible;
    transform: translateY(0);
    pointer-events: auto;
}

/* Header */
.fip-header {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 10px 14px 6px;
}
.fip-dot {
    width: 8px;
    height: 8px;
    border-radius: 50%;
    flex-shrink: 0;
}
.fip-title {
    font-size: 13px;
    font-weight: 600;
    color: var(--text-primary, #e4e6eb);
    letter-spacing: 0.01em;
}

/* Body */
.fip-body {
    padding: 0 14px 12px;
    font-size: 12px;
    line-height: 1.55;
    color: var(--text-secondary, #a0a4b0);
}

/* ── Light theme ── */
[data-theme="light"] .formation-info-popup {
    background: rgba(255, 255, 255, 0.92);
    border-color: rgba(0, 0, 0, 0.1);
    box-shadow: 0 8px 32px rgba(0, 0, 0, 0.12), 0 0 0 1px rgba(0, 0, 0, 0.04) inset;
}
[data-theme="light"] .fip-title { color: #1a1a2e; }
[data-theme="light"] .fip-body { color: #555; }

/* ── Glass theme ── */
[data-theme="glass"] .formation-info-popup {
    background: rgba(15, 15, 25, 0.75);
    -webkit-backdrop-filter: blur(40px) saturate(200%);
    backdrop-filter: blur(40px) saturate(200%);
    border-color: rgba(255, 255, 255, 0.18);
}

/* ── Sunset theme ── */
[data-theme="sunset"] .formation-info-popup {
    background: rgba(30, 15, 20, 0.9);
    border-color: rgba(255, 140, 80, 0.15);
}

/* ── Glass Green theme ── */
[data-theme="glass-green"] .formation-info-popup {
    background: rgba(5, 25, 15, 0.88);
    -webkit-backdrop-filter: blur(40px) saturate(160%);
    backdrop-filter: blur(40px) saturate(160%);
    border-color: rgba(0, 200, 100, 0.18);
}
[data-theme="glass-green"] .fip-title { color: rgba(200, 255, 220, 0.95); }
[data-theme="glass-green"] .fip-body { color: rgba(150, 220, 180, 0.70); }

/* ── Glass Purple theme ── */
[data-theme="glass-purple"] .formation-info-popup {
    background: rgba(20, 10, 30, 0.88);
    -webkit-backdrop-filter: blur(40px) saturate(170%);
    backdrop-filter: blur(40px) saturate(170%);
    border-color: rgba(200, 120, 255, 0.18);
}
[data-theme="glass-purple"] .fip-title { color: rgba(240, 220, 255, 0.95); }
[data-theme="glass-purple"] .fip-body { color: rgba(200, 170, 230, 0.70); }

/* ── Glass Amber theme ── */
[data-theme="glass-amber"] .formation-info-popup {
    background: rgba(25, 18, 10, 0.88);
    -webkit-backdrop-filter: blur(40px) saturate(160%);
    backdrop-filter: blur(40px) saturate(160%);
    border-color: rgba(220, 170, 100, 0.18);
}
[data-theme="glass-amber"] .fip-title { color: rgba(255, 245, 230, 0.95); }
[data-theme="glass-amber"] .fip-body { color: rgba(230, 200, 160, 0.70); }

/* ── Glass Carbon theme ── */
[data-theme="glass-carbon"] .formation-info-popup {
    background: rgba(15, 15, 15, 0.90);
    -webkit-backdrop-filter: blur(40px) saturate(140%);
    backdrop-filter: blur(40px) saturate(140%);
    border-color: rgba(150, 150, 150, 0.15);
}
[data-theme="glass-carbon"] .fip-title { color: rgba(240, 240, 240, 0.95); }
[data-theme="glass-carbon"] .fip-body { color: rgba(180, 180, 180, 0.70); }

/* ── Mobile adjustments ── */
@media (max-width: 768px) {
    .formation-info-popup {
        width: 260px;
        font-size: 11px;
    }
    .fip-title { font-size: 12px; }
    .fip-body { font-size: 11px; }
}

/* ═══════════════ Chart Context Menu (Desktop only) ═══════════════ */
.chart-ctx-menu {
    position: fixed;
    z-index: 9999;
    min-width: 200px;
    background: var(--bg-primary, #1a1a2e);
    border: 1px solid var(--border, rgba(255,255,255,0.12));
    border-radius: 8px;
    padding: 4px 0;
    box-shadow: 0 8px 32px rgba(0,0,0,0.45);
    backdrop-filter: blur(20px);
    animation: ctxFadeIn 0.12s ease-out;
    font-family: var(--font-body, 'Inter', sans-serif);
}

@keyframes ctxFadeIn {
    from { opacity: 0; transform: scale(0.95); }
    to { opacity: 1; transform: scale(1); }
}

.chart-ctx-menu-item {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 8px 14px;
    font-size: 12px;
    color: var(--text-secondary, #a0a0b8);
    cursor: pointer;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
    border: none;
    background: none;
    width: 100%;
    text-align: left;
}

.chart-ctx-menu-item:hover {
    background: var(--bg-hover, rgba(255,255,255,0.06));
    color: var(--text-primary, #ffffff);
}

.chart-ctx-menu-item .ctx-icon {
    width: 16px;
    height: 16px;
    display: flex;
    align-items: center;
    justify-content: center;
    flex-shrink: 0;
    font-size: 13px;
}

.chart-ctx-menu-item .ctx-label {
    flex: 1;
}

.chart-ctx-menu-item .ctx-price {
    font-family: var(--font-mono, monospace);
    font-size: 10px;
    color: var(--text-muted, #555);
    margin-left: 8px;
}

.chart-ctx-menu-item.ctx-tp { color: var(--green, #00d68f); }
.chart-ctx-menu-item.ctx-tp:hover { background: rgba(0,214,143,0.1); }
.chart-ctx-menu-item.ctx-sl { color: var(--red, #ff3d71); }
.chart-ctx-menu-item.ctx-sl:hover { background: rgba(255,61,113,0.1); }

.chart-ctx-menu-divider {
    height: 1px;
    background: var(--border, rgba(255,255,255,0.08));
    margin: 4px 8px;
}

/* Text input overlay for "Metin Ekle" */
.chart-text-input-overlay {
    position: fixed;
    z-index: 10000;
    display: flex;
    align-items: center;
    gap: 4px;
}

.chart-text-input-overlay input {
    background: var(--bg-primary, #1a1a2e);
    border: 1px solid var(--accent, #6366f1);
    border-radius: 4px;
    color: var(--text-primary, #fff);
    font-size: 12px;
    padding: 4px 8px;
    min-width: 140px;
    outline: none;
    font-family: var(--font-body, 'Inter', sans-serif);
}

/* v5 pane sistemi — panel indikatörler LWC tarafından yönetilir, ek CSS gerekmez */