/* ═══════════════════════════════════════════════════════════════
   NERON TRADER — Elevated Overlay Surfaces

   Widget camı bilinçli olarak saydamdır; modal, sheet ve popover ise
   arkasındaki yoğun içeriği bastıracak ayrı ve okunaklı bir yüzey ister.
   Bu dosya component CSS'lerinden sonra yüklenir ve tüm temalarda aynı
   yüzey hiyerarşisini, tema karakterini kaybetmeden uygular.
   ═══════════════════════════════════════════════════════════════ */

:root {
    --overlay-surface: #151520;
    --overlay-popover-surface: #1a1a27;
    --overlay-surface-raised: #20202f;
    --overlay-border: rgba(184, 184, 212, 0.18);
    --overlay-edge-highlight: rgba(255, 255, 255, 0.055);
    --overlay-scrim: rgba(3, 3, 9, 0.7);
    --overlay-shadow: 0 24px 64px rgba(0, 0, 0, 0.52), 0 4px 16px rgba(0, 0, 0, 0.3);
    --overlay-sheet-shadow: 0 -20px 56px rgba(0, 0, 0, 0.48), 0 -1px 0 rgba(255, 255, 255, 0.035);
    --overlay-blur: 16px;
    --overlay-saturate: 125%;
}

[data-theme="light"] {
    --overlay-surface: #ffffff;
    --overlay-popover-surface: #fbfbfe;
    --overlay-surface-raised: #f1f1f7;
    --overlay-border: rgba(34, 34, 58, 0.14);
    --overlay-edge-highlight: rgba(255, 255, 255, 0.9);
    --overlay-scrim: rgba(24, 24, 42, 0.36);
    --overlay-shadow: 0 24px 64px rgba(35, 35, 58, 0.16), 0 4px 14px rgba(35, 35, 58, 0.08);
    --overlay-sheet-shadow: 0 -18px 48px rgba(35, 35, 58, 0.16), 0 -1px 0 rgba(35, 35, 58, 0.08);
    --overlay-blur: 12px;
    --overlay-saturate: 110%;
}

[data-theme="glass"] {
    --overlay-surface: rgba(14, 14, 27, 0.97);
    --overlay-popover-surface: rgba(21, 21, 38, 0.98);
    --overlay-surface-raised: rgba(31, 30, 51, 0.98);
    --overlay-border: rgba(200, 195, 255, 0.24);
    --overlay-edge-highlight: rgba(255, 255, 255, 0.13);
    --overlay-scrim: rgba(3, 3, 10, 0.72);
    --overlay-shadow: 0 28px 72px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(157, 146, 255, 0.06);
    --overlay-sheet-shadow: 0 -22px 58px rgba(0, 0, 0, 0.58), 0 -1px 0 rgba(255, 255, 255, 0.08);
    --overlay-blur: 24px;
    --overlay-saturate: 145%;
}

[data-theme="glass-green"] {
    --overlay-surface: rgba(6, 18, 12, 0.97);
    --overlay-popover-surface: rgba(9, 25, 17, 0.98);
    --overlay-surface-raised: rgba(14, 34, 24, 0.98);
    --overlay-border: rgba(52, 211, 153, 0.24);
    --overlay-edge-highlight: rgba(220, 255, 238, 0.1);
    --overlay-scrim: rgba(1, 8, 5, 0.74);
    --overlay-shadow: 0 28px 72px rgba(0, 0, 0, 0.64), 0 0 0 1px rgba(16, 185, 129, 0.07);
    --overlay-sheet-shadow: 0 -22px 58px rgba(0, 0, 0, 0.6), 0 -1px 0 rgba(52, 211, 153, 0.08);
    --overlay-blur: 24px;
    --overlay-saturate: 140%;
}

[data-theme="glass-purple"] {
    --overlay-surface: rgba(24, 11, 34, 0.97);
    --overlay-popover-surface: rgba(32, 15, 45, 0.98);
    --overlay-surface-raised: rgba(45, 22, 61, 0.98);
    --overlay-border: rgba(192, 132, 252, 0.25);
    --overlay-edge-highlight: rgba(246, 230, 255, 0.11);
    --overlay-scrim: rgba(8, 2, 12, 0.73);
    --overlay-shadow: 0 28px 72px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(168, 85, 247, 0.08);
    --overlay-sheet-shadow: 0 -22px 58px rgba(0, 0, 0, 0.59), 0 -1px 0 rgba(192, 132, 252, 0.08);
    --overlay-blur: 24px;
    --overlay-saturate: 145%;
}

[data-theme="glass-amber"] {
    /* Amber'ın eski tema bloğunda eksik kalan etkileşim/cam tokenları. */
    --bg-hover: rgba(245, 158, 11, 0.1);
    --bg-active: rgba(245, 158, 11, 0.16);
    --surface: rgba(245, 158, 11, 0.045);
    --surface-hover: rgba(245, 158, 11, 0.08);
    --surface-border: rgba(245, 158, 11, 0.14);
    --border-light: rgba(245, 158, 11, 0.16);
    --accent-muted: rgba(245, 158, 11, 0.18);
    --glass-bg-strong: rgba(245, 158, 11, 0.07);
    --glass-blur-heavy: 44px;
    --glass-border-subtle: 1px solid rgba(251, 191, 36, 0.1);

    --overlay-surface: rgba(26, 19, 9, 0.98);
    --overlay-popover-surface: rgba(34, 25, 12, 0.98);
    --overlay-surface-raised: rgba(47, 35, 17, 0.98);
    --overlay-border: rgba(251, 191, 36, 0.23);
    --overlay-edge-highlight: rgba(255, 239, 199, 0.1);
    --overlay-scrim: rgba(10, 7, 2, 0.74);
    --overlay-shadow: 0 28px 72px rgba(0, 0, 0, 0.62), 0 0 0 1px rgba(245, 158, 11, 0.07);
    --overlay-sheet-shadow: 0 -22px 58px rgba(0, 0, 0, 0.59), 0 -1px 0 rgba(251, 191, 36, 0.08);
    --overlay-blur: 22px;
    --overlay-saturate: 135%;
}

[data-theme="glass-carbon"] {
    --overlay-surface: rgba(18, 18, 23, 0.98);
    --overlay-popover-surface: rgba(24, 24, 31, 0.98);
    --overlay-surface-raised: rgba(32, 32, 41, 0.98);
    --overlay-border: rgba(218, 218, 232, 0.22);
    --overlay-edge-highlight: rgba(255, 255, 255, 0.11);
    --overlay-scrim: rgba(2, 2, 5, 0.74);
    --overlay-shadow: 0 28px 72px rgba(0, 0, 0, 0.66), 0 0 0 1px rgba(255, 255, 255, 0.055);
    --overlay-sheet-shadow: 0 -22px 58px rgba(0, 0, 0, 0.62), 0 -1px 0 rgba(255, 255, 255, 0.075);
    --overlay-blur: 22px;
    --overlay-saturate: 125%;
}

/* Eski ama CSS'te hâlâ desteklenen tema aileleri. */
[data-theme="midnight"] {
    --overlay-surface: #0e1528;
    --overlay-popover-surface: #111b31;
    --overlay-surface-raised: #17233d;
    --overlay-border: rgba(56, 189, 248, 0.2);
    --overlay-edge-highlight: rgba(200, 216, 240, 0.07);
    --overlay-scrim: rgba(2, 6, 16, 0.74);
    --overlay-shadow: 0 26px 68px rgba(0, 0, 0, 0.6), 0 0 0 1px rgba(14, 165, 233, 0.06);
    --overlay-sheet-shadow: 0 -20px 54px rgba(0, 0, 0, 0.58), 0 -1px 0 rgba(56, 189, 248, 0.07);
}

[data-theme="sunset"] {
    --overlay-surface: #19130f;
    --overlay-popover-surface: #211914;
    --overlay-surface-raised: #2b211a;
    --overlay-border: rgba(240, 160, 80, 0.2);
    --overlay-edge-highlight: rgba(255, 232, 211, 0.065);
    --overlay-scrim: rgba(10, 6, 3, 0.73);
    --overlay-shadow: 0 26px 68px rgba(0, 0, 0, 0.58), 0 0 0 1px rgba(232, 145, 58, 0.06);
    --overlay-sheet-shadow: 0 -20px 54px rgba(0, 0, 0, 0.56), 0 -1px 0 rgba(240, 160, 80, 0.07);
}

/* Modal ve sheet yüzeyleri: içerik arkadan okunmayacak kadar yoğun. */
[data-theme] :is(
    .activity-drawer,
    .account-modal,
    .tab-picker,
    .neron-modal,
    .notif-confirm-dialog,
    .qt-modal,
    .exchange-modal,
    .ag-modal,
    .tweet-modal,
    .ai-wizard-container
) {
    background: var(--overlay-surface);
    border-color: var(--overlay-border);
    color: var(--text-primary);
    -webkit-backdrop-filter: blur(var(--overlay-blur)) saturate(var(--overlay-saturate));
    backdrop-filter: blur(var(--overlay-blur)) saturate(var(--overlay-saturate));
    box-shadow: var(--overlay-shadow), inset 0 1px 0 var(--overlay-edge-highlight);
    background-clip: padding-box;
}

/* Tetikleyiciye bağlı küçük, yükseltilmiş yüzeyler. */
[data-theme] :is(
    .tf-mobile-dropdown,
    .ind-mobile-dropdown,
    .mobile-more-menu,
    .coin-search-dropdown,
    .indicator-dropdown,
    .widget-dropdown,
    .theme-dropdown,
    .layout-preset-dropdown,
    .ind-info-popup,
    .chart-tab-search,
    .dt-color-popup,
    .formation-info-popup,
    .chart-ctx-menu,
    .ai-persona-dropdown,
    .af-search-results,
    .toast
) {
    background: var(--overlay-popover-surface);
    border-color: var(--overlay-border);
    -webkit-backdrop-filter: blur(var(--overlay-blur)) saturate(var(--overlay-saturate));
    backdrop-filter: blur(var(--overlay-blur)) saturate(var(--overlay-saturate));
    box-shadow: var(--overlay-shadow), inset 0 1px 0 var(--overlay-edge-highlight);
    background-clip: padding-box;
}

[data-theme] .chart-text-input-overlay input,
[data-theme] .ec-has-tooltip::after {
    background: var(--overlay-popover-surface);
    border-color: var(--overlay-border);
    color: var(--text-primary);
    box-shadow: var(--overlay-shadow);
}

[data-theme] .ind-info-popup::before {
    background: var(--overlay-popover-surface);
    border-color: var(--overlay-border);
}

/* Native select menüleri destekleyen tarayıcılarda tema yüzeyini koru. */
[data-theme] :is(.settings-select, .em-exchange-select, .am-api-select, .qt-field select) option {
    background: var(--overlay-surface);
    color: var(--text-primary);
}

/* Modal arkası: yüzeyi ayırır, içerik kontrastını yükseltir. */
[data-theme] :is(
    .activity-backdrop,
    .account-modal-backdrop,
    .tab-picker-backdrop,
    .neron-modal-backdrop,
    .qt-backdrop,
    .exchange-modal-overlay,
    .ag-overlay,
    .tweet-modal-overlay,
    .ai-wizard-overlay
) {
    background: var(--overlay-scrim);
    -webkit-backdrop-filter: blur(7px);
    backdrop-filter: blur(7px);
}

/* İç katmanlar ana yüzeyden bir basamak ayrılır. */
[data-theme] :is(
    .account-modal-body .account-stat,
    .notif-confirm-dialog
) {
    background-color: var(--overlay-surface-raised);
    border-color: var(--overlay-border);
}

[data-theme] .notif-item.unread:hover,
[data-theme] .af-search-item:hover {
    background: var(--accent-muted);
}

/* Mobil ve kısa-yatay telefonlar aynı bottom-sheet geometrisini kullanır. */
@media (max-width: 768px),
       (max-width: 950px) and (max-height: 600px) and (hover: none) and (pointer: coarse) {
    [data-theme] :is(
        .activity-drawer,
        .account-modal,
        .tab-picker,
        .neron-modal,
        .qt-modal,
        .exchange-modal,
        .ag-modal,
        .tweet-modal
    ) {
        box-shadow: var(--overlay-sheet-shadow), inset 0 1px 0 var(--overlay-edge-highlight);
        border-top-color: var(--overlay-border);
    }

    [data-theme] :is(.account-modal, .tab-picker) {
        border: 1px solid var(--overlay-border);
        border-bottom: 0;
    }

    /* 769–950px kısa/coarse cihazlarda eski desktop modal kurallarını sıfırla. */
    .neron-modal,
    .neron-modal.modal-notifications {
        top: auto;
        right: 0;
        bottom: 0;
        left: 0;
        width: auto;
        max-height: min(85dvh, var(--visual-viewport-height, 85dvh));
        border-radius: 18px 18px 0 0;
        transform: translateY(100%);
        padding-bottom: var(--sa-bottom);
    }

    .neron-modal.visible,
    .neron-modal.modal-notifications.visible {
        transform: translateY(0);
    }

    .exchange-modal-overlay,
    .ag-overlay,
    .tweet-modal-overlay {
        align-items: flex-end;
        padding: 0;
    }

    .exchange-modal,
    .ag-modal,
    .tweet-modal {
        width: 100%;
        max-width: 100%;
        max-height: min(85dvh, var(--visual-viewport-height, 85dvh));
        border-radius: 18px 18px 0 0;
    }
}

/* Şeffaflığı azalt tercihi glass temalarda da gerçekten opak kalır. */
@media (prefers-reduced-transparency: reduce) {
    [data-theme] :is(
        .activity-drawer,
        .account-modal,
        .tab-picker,
        .neron-modal,
        .qt-modal,
        .exchange-modal,
        .ag-modal,
        .tweet-modal,
        .ai-wizard-container,
        .tf-mobile-dropdown,
        .ind-mobile-dropdown,
        .mobile-more-menu,
        .coin-search-dropdown,
        .indicator-dropdown,
        .widget-dropdown,
        .theme-dropdown,
        .ind-info-popup,
        .chart-tab-search,
        .dt-color-popup,
        .formation-info-popup,
        .ai-persona-dropdown,
        .af-search-results,
        .toast
    ) {
        background: var(--overlay-surface) !important;
        -webkit-backdrop-filter: none !important;
        backdrop-filter: none !important;
    }
}

@media (prefers-contrast: more) {
    [data-theme] :is(
        .activity-drawer,
        .account-modal,
        .tab-picker,
        .neron-modal,
        .qt-modal,
        .exchange-modal,
        .ag-modal,
        .tweet-modal,
        .tf-mobile-dropdown,
        .ind-mobile-dropdown,
        .mobile-more-menu
    ) {
        border-width: 2px;
    }
}