/* embed.css — trims the standalone SMC app down to the "useful part" when
   rendered inside an <iframe> on the React Home / Dashboard / Analysis pages,
   and re-skins it to match the site's premium navy/glass theme instead of
   the standalone app's light theme.

   Two modes, toggled by a body class set in embed.js from the ?mode= param.
   Both are dark-themed — only the *amount* of detail shown differs:
     .embed-mini  → Home + Dashboard teaser: asset picker, chart, headline
                    signal call & the AI verdict card (setup score,
                    confidence, news risk, what it's waiting for, reasoning).
                    The more granular stuff (exact entry/SL/TP levels, the
                    9-step grid, trading-style picker, pricing table) lives
                    on the dedicated /analysis page, reached via the panel's
                    "View Full Analysis" link.
     .embed-full  → /analysis page: controls + chart + signal + AI analysis
                    + entry recommendation + SMC steps + premium pricing —
                    everything, still on the dark theme. */

/* ── Iframe-friendly shell ─────────────────────────────────────────────── */
/* Solid navy root (not transparent/default) so areas the browser hasn't
   painted yet during fast scroll fill dark instead of flashing white. */
html {
    background: #070c22;
    color-scheme: dark;
}

body.embed {
    background: transparent;
    overflow-x: hidden;
}

body.embed .app-container {
    max-width: 100%;
    padding: 0;
}

/* The standalone page had its own big logo/title + tagline — the React app
   already has its own nav/branding, so drop it inside the embed. */
body.embed .logo,
body.embed .footer {
    display: none !important;
}

/* Header becomes a slim controls bar */
body.embed .header {
    margin-bottom: 12px;
}

/* Verbose numeric blocks that aren't part of either mode's "useful" set —
   hidden everywhere. (JS still writes to these nodes; hiding via CSS keeps
   the scripts happy.) */
body.embed #statsGrid,
body.embed #timeframesInfo {
    display: none !important;
}

/* ── Mini (Home + Dashboard teaser) — chart, signal & the AI verdict ────
   Chart + signal card are the hook, and the AI market-analysis card (setup
   score, confidence, news risk, what it's waiting for, reasoning) is the
   actual substance traders want at a glance — so it stays. Everything more
   granular (exact entry/SL/TP levels, the 9-step grid, trading-style
   picker, pricing table) is hidden here and lives on the dedicated
   /analysis page instead. */
body.embed-mini #stepsGrid,
body.embed-mini .plan-badge-wrap,
body.embed-mini .control-group--model,
body.embed-mini .control-group--risk,
body.embed-mini #actionSuggestionCard,
body.embed-mini #entryCard,
body.embed-mini #premiumSection {
    display: none !important;
}

/* ── Chart-only (Live Chart page) — price chart + level legend, nothing else ── */
body.embed-chart .header,
body.embed-chart .chart-type-toggle,
body.embed-chart #signalCard,
body.embed-chart #aiDecisionCard,
body.embed-chart #actionSuggestionCard,
body.embed-chart #entryCard,
body.embed-chart #stepsGrid,
body.embed-chart #premiumSection {
    display: none !important;
}

/* ══════════════════════════════════════════════════════════════════════════
   PREMIUM DARK THEME — every embedded mode (mini teaser + full /analysis
   page). Matches the React app (frontend/src/styles/landing.css / dash.css):
   navy surface, glassmorphism cards, blue→green→violet accents.
   Scoped to body.embed so the *standalone* app (opened directly, outside
   the iframe) keeps its original light theme.
   ═════════════════════════════════════════════════════════════════════════ */

body.embed {
    background: transparent;
    color: #cdd8ec;
    font-family: 'Inter', 'Segoe UI', Tahoma, sans-serif;
}

/* Reusable glass card look, shared by every card-shaped block */
body.embed .header,
body.embed .chart-type-toggle,
body.embed .chart-color-legend,
body.embed .chart-container,
body.embed .signal-card,
body.embed .market-analysis-card,
body.embed .action-suggestion-card,
body.embed .entry-card,
body.embed .entry-groups-container,
body.embed .zone-proximity-bar,
body.embed .step-card,
body.embed .premium-section,
body.embed .loading-box {
    background: rgba(255, 255, 255, 0.045);
    border: 1px solid rgba(255, 255, 255, 0.09);
    -webkit-backdrop-filter: blur(14px);
    backdrop-filter: blur(14px);
    box-shadow: 0 18px 40px rgba(2, 6, 23, 0.45);
}

/* ── Controls / header ─────────────────────────────────────────────────── */
body.embed .control-group label,
body.embed .toggle-label {
    color: #7dd3fc;
    letter-spacing: 0.06em;
}

body.embed .asset-select,
body.embed .model-select,
body.embed .risk-input,
body.embed .timeframe-select {
    background-color: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #eaf1ff;
    background-image: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' width='10' height='6'%3E%3Cpath d='M0 0l5 6 5-6z' fill='%237dd3fc'/%3E%3C/svg%3E");
}

body.embed .asset-select option,
body.embed .model-select option,
body.embed .timeframe-select option {
    background: #0b1430;
    color: #eaf1ff;
}

body.embed .asset-select:hover,
body.embed .model-select:hover,
body.embed .risk-input:hover,
body.embed .timeframe-select:hover {
    border-color: #38bdf8;
}

body.embed .risk-notice {
    background: rgba(251, 191, 36, 0.1);
    border: 1px solid rgba(251, 191, 36, 0.3);
    color: #fbbf24;
}

body.embed .refresh-btn {
    background: rgba(52, 211, 153, 0.10);
    border: 1px solid rgba(52, 211, 153, 0.45);
    color: #34d399;
}

body.embed .refresh-btn:hover {
    background: linear-gradient(90deg, #38bdf8, #34d399);
    border-color: transparent;
    color: #04121f;
}

body.embed .retry-btn {
    background: rgba(52, 211, 153, 0.10);
    border: 1px solid rgba(52, 211, 153, 0.45);
    color: #34d399;
}
body.embed .retry-btn:hover {
    background: linear-gradient(90deg, #38bdf8, #34d399);
    color: #04121f;
}

/* Plan badge + upgrade button (full mode only — hidden in mini) */
body.embed .plan-badge--free {
    background: rgba(255, 255, 255, 0.06);
    color: #9fb0cc;
    border: 1px solid rgba(255, 255, 255, 0.14);
}

/* ── Chart toolbar ─────────────────────────────────────────────────────── */
body.embed .toggle-buttons {
    background: rgba(255, 255, 255, 0.05);
}

body.embed .chart-type-btn {
    color: #9fb0cc;
}

body.embed .chart-type-btn.active {
    background: linear-gradient(90deg, #38bdf8, #34d399);
    color: #04121f;
}

body.embed .chart-type-btn:hover:not(.active) {
    background: rgba(56, 189, 248, 0.14);
    color: #7dd3fc;
}

/* ── Chart colour legend + OHLC legend ─────────────────────────────────── */
body.embed .chart-color-legend { color: #9fb0cc; }
body.embed .chart-ohlc-legend {
    background: transparent;
    color: #9fb0cc;
}
body.embed .leg-item { color: #9fb0cc; }

/* Chart canvas sits on the glass card (chart draws a transparent bg) */
body.embed .chart-container { padding-top: 2px; }

/* ── Signal card ───────────────────────────────────────────────────────── */
body.embed .signal-card { border-width: 1px; }
body.embed .signal-status { color: #7dd3fc; }
body.embed .signal-score  { color: #a7b4cc; }
body.embed .signal-warning { color: #fbbf24; }
body.embed .signal-action.VALID   { color: #34d399; }
body.embed .signal-action.INVALID { color: #f87171; }
body.embed .signal-action.WAITING { color: #fbbf24; }

/* ── Action suggestion card ───────────────────────────────────────────── */
body.embed .action-suggestion { color: #fbbf24; }

/* ── AI market-analysis card (Setup Score / Confidence / News Risk /
   what it's waiting for / reasoning) ────────────────────────────────────── */
body.embed .ma-header { border-bottom-color: rgba(255, 255, 255, 0.08); }
body.embed .ma-title { color: #7dd3fc; }
body.embed .ma-status { background: rgba(255, 255, 255, 0.05) !important; border-color: rgba(255, 255, 255, 0.14) !important; }

body.embed .ma-score-box {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
body.embed .ma-score-label { color: #9fb0cc; }
body.embed .ma-score-value { color: #eaf1ff; }
body.embed .ma-confidence  { color: #a7b4cc; }

body.embed .ma-missing {
    background: rgba(217, 119, 6, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.35);
    color: #fbbf24;
}

body.embed .ma-summary-header { color: #8a99b5; }
body.embed .ma-summary-body {
    background: none;
    border: 0;
    border-left: 2px solid #3d7bff;
    border-radius: 0;
    color: #cdd8ec;
}
body.embed .ma-reasoning {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cdd8ec;
}

body.embed .ma-red-flags   { background: rgba(248, 113, 113, 0.08); border: 1px solid rgba(248, 113, 113, 0.25); }
body.embed .ma-green-flags { background: rgba(52, 211, 153, 0.08); border: 1px solid rgba(52, 211, 153, 0.25); }
body.embed .ma-flags-title--red   { color: #f87171; }
body.embed .ma-flags-title--green { color: #34d399; }
body.embed .ma-flag-item--red     { color: #fca5a5; }
body.embed .ma-flag-item--green   { color: #6ee7b7; }

/* ── Entry recommendation card (full mode) ───────────────────────────────── */
body.embed .entry-header { border-bottom-color: rgba(255, 255, 255, 0.08); }
body.embed .entry-title { color: #34d399; }
body.embed .entry-group-name { color: #eaf1ff; }

body.embed .source-badge--mech { background: rgba(52, 211, 153, 0.12); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.35); }
body.embed .source-badge--ai   { background: rgba(167, 139, 250, 0.14); color: #a78bfa; border: 1px solid rgba(167, 139, 250, 0.35); }

body.embed .entry-level,
body.embed .entry-position {
    background: rgba(255, 255, 255, 0.05);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
body.embed .entry-level-label { color: #9fb0cc; }
body.embed .entry-level-value { color: #34d399; }
body.embed .position-label { color: #9fb0cc; }
body.embed .position-value { color: #fbbf24; }

body.embed .entry-poi {
    background: rgba(217, 119, 6, 0.12);
    border: 1px solid rgba(251, 191, 36, 0.35);
    color: #fbbf24;
}

body.embed .entry-reasoning {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
    color: #cdd8ec;
}

body.embed .manual-warning {
    color: #fbbf24;
    border-top-color: rgba(255, 255, 255, 0.08);
}

/* ── Zone proximity bar ───────────────────────────────────────────────── */
body.embed .zpb-label { color: #9fb0cc; }
body.embed .zpb-track { background: rgba(255, 255, 255, 0.08); }
body.embed .zpb-dist  { color: #9fb0cc; }

/* ── Grouped entry opportunities ─────────────────────────────────────────── */
body.embed .eg-header {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.08);
}
body.embed .eg-header-title { color: #7dd3fc; }
body.embed .eg-header-meta  { color: #9fb0cc; }

body.embed .entry-group { border-bottom-color: rgba(255, 255, 255, 0.06); }
body.embed .entry-group--active { background: rgba(255, 255, 255, 0.03); }
body.embed .entry-group--expired { border-left-color: rgba(255, 255, 255, 0.15); }

body.embed .eg-label { color: #eaf1ff; }
body.embed .eg-label--faded { color: #9fb0cc; }
body.embed .eg-class-choch { background: rgba(52, 211, 153, 0.12); color: #34d399; border: 1px solid rgba(52, 211, 153, 0.35); }
body.embed .eg-class-bos   { background: rgba(251, 191, 36, 0.12); color: #fbbf24; border: 1px solid rgba(251, 191, 36, 0.35); }
body.embed .eg-rr, body.embed .eg-sl { color: #9fb0cc; }

body.embed .eg-tp-row { color: #9fb0cc; }
body.embed .eg-validity-ref { color: #9fb0cc; }
body.embed .eg-validity-tag { color: #9fb0cc; }

body.embed .eg-poi-row { background: rgba(255, 255, 255, 0.03); }
body.embed .eg-poi-row:hover { background: rgba(255, 255, 255, 0.06); }
body.embed .eg-poi--active { background: rgba(251, 191, 36, 0.12) !important; }
body.embed .eg-poi-entry { color: #eaf1ff; }
body.embed .eg-poi-rr { color: #9fb0cc; }

body.embed .eg-timing-row {
    background: rgba(255, 255, 255, 0.03);
    border-bottom: 1px solid rgba(255, 255, 255, 0.06);
}
body.embed .eg-timing-found  { color: #9fb0cc; }
body.embed .eg-timing-sep    { color: rgba(255, 255, 255, 0.25); }
body.embed .eg-timing-status { color: #34d399; }
body.embed .eg-timing-cond   { color: #9fb0cc; }
body.embed .eg-timing-reason { color: #9fb0cc; }
body.embed .eg-timing--expired { background: rgba(248, 113, 113, 0.1); }

body.embed .eg-expired-badge  { background: rgba(248, 113, 113, 0.12); border: 1px solid rgba(248, 113, 113, 0.35); color: #f87171; }
body.embed .eg-expired-reason { color: #9fb0cc; }

body.embed .eg-history { border-top-color: rgba(255, 255, 255, 0.08); }
body.embed .eg-history-header { color: #9fb0cc; }
body.embed .eg-hist-detail { color: #9fb0cc; }
body.embed .eg-hist-reason { color: rgba(255, 255, 255, 0.35); }
body.embed .eg-hist-count  { color: rgba(255, 255, 255, 0.35); }

/* ── SMC steps grid (full mode) ──────────────────────────────────────────── */
body.embed .step-card.passed  { background: rgba(52, 211, 153, 0.08); border-color: rgba(52, 211, 153, 0.3); }
body.embed .step-card.warning { background: rgba(251, 191, 36, 0.08); border-color: rgba(251, 191, 36, 0.3); }
body.embed .step-card.failed  { background: rgba(248, 113, 113, 0.08); border-color: rgba(248, 113, 113, 0.3); }

body.embed .step-number { color: #9fb0cc; }
body.embed .step-status.passed  { color: #34d399; }
body.embed .step-status.failed  { color: #f87171; }
body.embed .step-status.waiting { color: #fbbf24; }
body.embed .step-name   { color: #eaf1ff; }
body.embed .step-detail { color: #9fb0cc; }

/* ── Premium pricing section (full mode) ─────────────────────────────────── */
body.embed .premium-section-sub { color: #9fb0cc; }

body.embed .premium-tier--free {
    background: rgba(255, 255, 255, 0.04);
    border: 1px solid rgba(255, 255, 255, 0.1);
}
body.embed .premium-tier--premium {
    background: linear-gradient(145deg, rgba(251, 191, 36, 0.10), rgba(217, 119, 6, 0.12));
    border: 2px solid rgba(251, 191, 36, 0.5);
}

body.embed .tier-label { color: #9fb0cc; }
body.embed .premium-tier--premium .tier-label { color: #fbbf24; }
body.embed .tier-price { color: #eaf1ff; }
body.embed .tier-price span { color: #9fb0cc; }
body.embed .feat { color: #cdd8ec; }
body.embed .feat--no { color: rgba(205, 216, 236, 0.4); }
body.embed .premium-cta-note { color: #fbbf24; }

/* ── Loading / error overlay ──────────────────────────────────────────────── */
body.embed .loading-overlay {
    background: rgba(4, 10, 25, 0.78);
}
body.embed .loading-spinner {
    border-color: rgba(255, 255, 255, 0.15);
    border-top-color: #38bdf8;
}
body.embed .loading-title { color: #7dd3fc; }
body.embed .loading-sub { color: #9fb0cc; }
body.embed .loading-attempt { color: rgba(255, 255, 255, 0.35); }

/* ── Upgrade / lock toast ─────────────────────────────────────────────────── */
body.embed .upgrade-toast {
    background: #0b1430;
    border: 1px solid rgba(255, 255, 255, 0.12);
    color: #eaf1ff;
}