/* ═══════════════════════════════════════════════════════════
   QUICK VIEW POPUP — Enhanced Layout
   ═══════════════════════════════════════════════════════════ */

/* ── Overlay ─────────────────────────────────────────────── */

.ap-qv-overlay {
    position: fixed;
    inset: 0;
    background: rgba(0, 0, 0, 0.85);
    z-index: 9999;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 16px;
    backdrop-filter: blur(4px);
}

/* ── Modal ───────────────────────────────────────────────── */

.ap-qv-modal {
    background: var(--bg-alt, #161616);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: 12px;
    width: 92vw;
    max-width: 1200px;
    max-height: 92vh;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    box-shadow: 0 24px 80px rgba(0, 0, 0, 0.6);
}

/* ── Header ──────────────────────────────────────────────── */

.ap-qv-header {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 12px 20px;
    border-bottom: 1px solid var(--border, #2a2a2a);
    background: var(--bg, #0d0d0d);
    flex-shrink: 0;
}

.ap-qv-header__left {
    display: flex;
    align-items: center;
    gap: 10px;
}

.ap-qv-header__right {
    display: flex;
    align-items: center;
    gap: 12px;
}

.ap-qv-asset {
    font-size: 0.9rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    color: var(--accent, #4da3ff);
}

.ap-qv-tf {
    font-size: 0.7rem;
    font-weight: 600;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted, #a8a8a8);
    background: var(--bg-alt, #161616);
    padding: 2px 8px;
    border-radius: 4px;
    border: 1px solid var(--border, #2a2a2a);
}

.ap-qv-badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    padding: 2px 8px;
    border-radius: 20px;
}

.ap-qv-badge--cat {
    background: rgba(77, 163, 255, 0.12);
    color: var(--accent, #4da3ff);
}

.ap-qv-badge--type-market-hub { background: rgba(77, 163, 255, 0.12); color: #4da3ff; }
.ap-qv-badge--type-intraday { background: rgba(245, 166, 35, 0.12); color: #f5a623; }
.ap-qv-badge--type-pattern-recognition { background: rgba(168, 85, 247, 0.12); color: #a855f7; }

.ap-qv-badge--scenario-primary { background: rgba(255, 255, 255, 0.06); color: var(--text-muted, #a8a8a8); }
.ap-qv-badge--scenario-alternate { background: rgba(245, 166, 35, 0.12); color: #f5a623; }

.ap-qv-date {
    font-size: 0.75rem;
    color: var(--text-muted, #a8a8a8);
}

.ap-qv-close {
    background: none;
    border: none;
    color: var(--text-muted, #a8a8a8);
    font-size: 1.4rem;
    cursor: pointer;
    line-height: 1;
    padding: 0 4px;
    transition: color 0.15s;
}

.ap-qv-close:hover {
    color: var(--text, #e6e6e6);
}

/* ── Price strip ─────────────────────────────────────────── */

.ap-qv-price-strip {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 10px 20px;
    background: var(--bg, #0d0d0d);
    border-bottom: 1px solid var(--border, #2a2a2a);
    flex-shrink: 0;
    gap: 20px;
    flex-wrap: wrap;
}

.ap-qv-price-strip__left {
    display: flex;
    align-items: center;
    gap: 10px;
    flex-shrink: 0;
}

.ap-qv-live-price {
    font-size: 1.3rem;
    font-weight: 700;
    color: var(--text, #e6e6e6);
    letter-spacing: -0.01em;
}

.ap-qv-live-change {
    font-size: 0.85rem;
    font-weight: 600;
}

.ap-qv-live-badge {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: #4caf72;
    background: rgba(76, 175, 114, 0.12);
    padding: 2px 8px;
    border-radius: 20px;
}

.ap-qv-price-strip__levels {
    display: flex;
    align-items: center;
    gap: 16px;
    flex-wrap: wrap;
}

.ap-qv-level-item {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 1px;
}

.ap-qv-level-label {
    font-size: 0.6rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, #a8a8a8);
}

.ap-qv-level-val {
    font-size: 0.8rem;
    font-weight: 600;
    color: var(--text, #e6e6e6);
}

.ap-qv-level-item--entry .ap-qv-level-val { color: var(--accent, #4da3ff); }
.ap-qv-level-item--sl .ap-qv-level-val    { color: #ff5a5a; }
.ap-qv-level-item--tp .ap-qv-level-val    { color: #4caf72; }

/* ── Title bar ───────────────────────────────────────────── */

.ap-qv-title-bar {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    padding: 12px 20px 8px;
    flex-shrink: 0;
    gap: 16px;
}

.ap-qv-title {
    font-size: 1rem;
    font-weight: 700;
    color: var(--text, #e6e6e6);
    line-height: 1.3;
    margin: 0;
    flex: 1;
}

.ap-qv-bias-stamp {
    height: 48px;
    width: auto;
    opacity: 0.9;
    flex-shrink: 0;
}

/* ── Body: 2 columns ─────────────────────────────────────── */

.ap-qv-body {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 0;
    flex: 1;
    overflow: hidden;
}

/* LEFT: chart column */
.ap-qv-chart-col {
    border-right: 1px solid var(--border, #2a2a2a);
    overflow-y: auto;
    display: flex;
    flex-direction: column;
}

.ap-qv-chart {
    position: relative;
    background: var(--bg, #0d0d0d);
    flex-shrink: 0;
}

.ap-qv-chart img {
    width: 100%;
    height: auto;
    display: block;
}

.ap-qv-chart__link {
    display: block;
}

.ap-qv-chart__gallery-badge {
    position: absolute;
    bottom: 10px;
    left: 10px;
    background: rgba(0,0,0,.65);
    color: #fff;
    font-size: 11px;
    font-weight: 700;
    padding: 3px 8px;
    border-radius: 6px;
    pointer-events: none;
}

.ap-qv-summary {
    padding: 14px 16px;
    font-size: 0.85rem;
    color: var(--text-muted, #a8a8a8);
    line-height: 1.6;
    border-top: 1px solid var(--border, #2a2a2a);
}

.ap-qv-summary__teaser {
    margin-top: 8px;
    font-style: italic;
    color: var(--accent, #4da3ff);
    opacity: 0.7;
}

/* RIGHT: data column */
.ap-qv-data-col {
    overflow-y: auto;
    padding: 16px;
    display: flex;
    flex-direction: column;
    gap: 14px;
}

/* Stat grid */
.ap-qv-stats {
    display: grid;
    grid-template-columns: repeat(3, 1fr);
    gap: 8px;
}

.ap-qv-stat {
    background: var(--bg, #0d0d0d);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: 8px;
    padding: 10px 12px;
}

.ap-qv-stat--bullish { border-color: rgba(76, 175, 114, 0.4); }
.ap-qv-stat--bearish { border-color: rgba(255, 90, 90, 0.4); }
.ap-qv-stat--turning_bullish { border-color: rgba(77, 163, 255, 0.4); }
.ap-qv-stat--turning_bearish { border-color: rgba(255, 165, 0, 0.4); }

.ap-qv-stat__label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, #a8a8a8);
    margin-bottom: 4px;
}

.ap-qv-stat__value {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text, #e6e6e6);
}

.ap-qv-stat--bullish .ap-qv-stat__value { color: #4caf72; }
.ap-qv-stat--bearish .ap-qv-stat__value { color: #ff5a5a; }

/* Intraday HTF context lookup */
.ap-qv-htf-context {
    border: 1px solid var(--border, #2a2a2a);
    border-radius: 8px;
    padding: 10px 12px;
}

.ap-qv-htf-context__label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, #a8a8a8);
    margin-bottom: 6px;
}

.ap-qv-htf-context__empty {
    font-size: 0.8rem;
    color: var(--text-muted, #a8a8a8);
}

.ap-qv-htf-context__row {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 4px 0;
    font-size: 0.8rem;
}

.ap-qv-htf-context__link {
    color: var(--text, #e6e6e6);
    text-decoration: none;
}

.ap-qv-htf-context__link:hover { color: #4da3ff; }

.ap-qv-htf-context__summary {
    margin: 2px 0 0;
    color: var(--text-muted, #a8a8a8);
    font-size: 0.75rem;
    line-height: 1.5;
}

/* Wave row */
.ap-qv-wave-row {
    display: flex;
    align-items: center;
    gap: 6px;
    flex-wrap: wrap;
    font-size: 0.8rem;
    background: var(--bg, #0d0d0d);
    padding: 8px 12px;
    border-radius: 8px;
    border: 1px solid var(--border, #2a2a2a);
}

.ap-qv-wave-row__label {
    font-size: 0.65rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted, #a8a8a8);
}

.ap-qv-wave-row__val {
    font-weight: 600;
    color: var(--accent, #4da3ff);
}

.ap-qv-wave-row__sep {
    color: var(--text-muted, #a8a8a8);
}

.ap-qv-wave-status {
    font-size: 0.7rem;
    font-style: normal;
    color: var(--text-muted, #a8a8a8);
    background: rgba(255, 255, 255, 0.06);
    padding: 1px 6px;
    border-radius: 4px;
}

/* Locked notice */
.ap-qv-locked {
    padding: 12px 14px;
    background: rgba(245, 166, 35, 0.08);
    border: 1px solid rgba(245, 166, 35, 0.25);
    border-radius: 8px;
}

.ap-qv-locked p {
    margin: 0;
    font-size: 0.82rem;
    color: var(--text-muted, #a8a8a8);
    line-height: 1.5;
}

/* Wave thesis */
.ap-qv-thesis__label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, #a8a8a8);
    margin-bottom: 6px;
}

.ap-qv-thesis__text {
    font-size: 0.82rem;
    color: var(--text, #e6e6e6);
    line-height: 1.6;
    margin: 0;
}

/* Key levels grid */
.ap-qv-levels-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: 8px;
}

.ap-qv-key-level {
    background: var(--bg, #0d0d0d);
    border: 1px solid var(--border, #2a2a2a);
    border-radius: 8px;
    padding: 10px 12px;
}

.ap-qv-key-level--support    { border-color: rgba(76, 175, 114, 0.3); }
.ap-qv-key-level--resistance { border-color: rgba(255, 90, 90, 0.3); }
.ap-qv-key-level--invalidation { border-color: rgba(255, 165, 0, 0.3); }
.ap-qv-key-level--target     { border-color: rgba(77, 163, 255, 0.3); }

.ap-qv-key-level__label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    color: var(--text-muted, #a8a8a8);
    margin-bottom: 3px;
}

.ap-qv-key-level__price {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--text, #e6e6e6);
}

.ap-qv-key-level--support .ap-qv-key-level__price    { color: #4caf72; }
.ap-qv-key-level--resistance .ap-qv-key-level__price { color: #ff5a5a; }
.ap-qv-key-level--invalidation .ap-qv-key-level__price { color: #ffaa00; }
.ap-qv-key-level--target .ap-qv-key-level__price     { color: var(--accent, #4da3ff); }

.ap-qv-key-level__reason {
    font-size: 0.72rem;
    color: var(--text-muted, #a8a8a8);
    margin-top: 3px;
    line-height: 1.3;
}

/* Confluences */
.ap-qv-confluences__label {
    font-size: 0.62rem;
    font-weight: 700;
    letter-spacing: 0.08em;
    text-transform: uppercase;
    color: var(--text-muted, #a8a8a8);
    margin-bottom: 6px;
}

.ap-qv-conf-list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 4px;
}

.ap-qv-conf-item {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 0.78rem;
    padding: 6px 10px;
    background: var(--bg, #0d0d0d);
    border-radius: 6px;
    border: 1px solid var(--border, #2a2a2a);
}

.ap-qv-conf-type {
    font-size: 0.65rem;
    font-weight: 700;
    color: var(--accent, #4da3ff);
    background: rgba(77, 163, 255, 0.1);
    padding: 1px 6px;
    border-radius: 4px;
    white-space: nowrap;
}

.ap-qv-conf-desc {
    flex: 1;
    color: var(--text, #e6e6e6);
}

.ap-qv-conf-level {
    font-size: 0.75rem;
    font-weight: 600;
    color: var(--text-muted, #a8a8a8);
    white-space: nowrap;
}

/* ── Footer ──────────────────────────────────────────────── */

.ap-qv-footer {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 12px 20px;
    border-top: 1px solid var(--border, #2a2a2a);
    background: var(--bg, #0d0d0d);
    flex-shrink: 0;
}

/* ── Responsive ──────────────────────────────────────────── */

@media (max-width: 768px) {
    .ap-qv-modal {
        width: 100vw;
        max-width: 100vw;
        height: 100dvh;
        max-height: 100dvh;
        border-radius: 0;
    }

    .ap-qv-body {
        grid-template-columns: 1fr;
    }

    .ap-qv-chart-col {
        border-right: none;
        border-bottom: 1px solid var(--border, #2a2a2a);
        max-height: 40vh;
    }

    .ap-qv-stats {
        grid-template-columns: repeat(3, 1fr);
    }

    .ap-qv-levels-grid {
        grid-template-columns: 1fr 1fr;
    }

    .ap-qv-price-strip {
        flex-direction: column;
        align-items: flex-start;
        gap: 8px;
    }
}