/* ── ETF Accelerator Charts — Frontend Styles ──────────────────────────────── */

@import url('https://fonts.googleapis.com/css2?family=DM+Sans:wght@300;400;500;600&family=DM+Mono:wght@400;500&display=swap');

.etfac-financial-chart {
    --etfac-bg:         #0f172a;
    --etfac-surface:    #1e293b;
    --etfac-border:     #334155;
    --etfac-text:       #f1f5f9;
    --etfac-muted:      #94a3b8;
    --etfac-strategy:   #00c896;
    --etfac-bah:        #a78bfa;
    --etfac-danger:     #f87171;
    --etfac-radius:     12px;
    --etfac-font:       'DM Sans', system-ui, sans-serif;
    --etfac-mono:       'DM Mono', monospace;

    background:    var(--etfac-bg);
    border:        1px solid var(--etfac-border);
    border-radius: var(--etfac-radius);
    padding:       2rem;
    font-family:   var(--etfac-font);
    color:         var(--etfac-text);
    margin:        2rem 0;
    box-sizing:    border-box;
    width:         100%;
    max-width:     100%;
    overflow:      hidden;
}

.etfac-financial-chart *,
.etfac-financial-chart *::before,
.etfac-financial-chart *::after {
    box-sizing: border-box;
}

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

.etfac-chart-header {
    margin-bottom: 1.5rem;
}

.etfac-chart-title {
    font-size:     1.25rem;
    font-weight:   600;
    color:         var(--etfac-text);
    margin:        0 0 1rem;
    letter-spacing: -0.01em;
}

/* ── Stats bar ──────────────────────────────────────────────────────────────── */

.etfac-stats-bar {
    display:               grid;
    grid-template-columns: repeat(4, 1fr);
    gap:                   0.75rem;
}

@media ( max-width: 600px ) {
    .etfac-stats-bar {
        grid-template-columns: repeat(2, 1fr);
    }
}

.etfac-stat {
    display:        flex;
    flex-direction: column;
    background:     var(--etfac-surface);
    border:         1px solid var(--etfac-border);
    border-radius:  8px;
    padding:        0.6rem 1rem;
    min-width:      0;
}

.etfac-stat-label {
    font-size:   0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:       var(--etfac-muted);
    margin-bottom: 0.2rem;
}

.etfac-stat-value {
    font-family: var(--etfac-mono);
    font-size:   1.1rem;
    font-weight: 500;
    color:       var(--etfac-text);
}

.etfac-stat--strategy .etfac-stat-value { color: var(--etfac-strategy); }
.etfac-stat--bah      .etfac-stat-value { color: var(--etfac-bah);      }
.etfac-stat--drawdown .etfac-stat-value { color: var(--etfac-danger);   }

.etfac-stat-value--positive { color: var(--etfac-strategy) !important; }
.etfac-stat-value--negative { color: var(--etfac-danger)   !important; }

/* ── Slider ─────────────────────────────────────────────────────────────────── */

.etfac-slider-wrap {
    margin:     1.5rem 0;
    background: var(--etfac-surface);
    border:     1px solid var(--etfac-border);
    border-radius: var(--etfac-radius);
    padding:    1.25rem 1.5rem;
}

.etfac-slider-label {
    font-size:   0.875rem;
    color:       var(--etfac-muted);
    margin:      0 0 0.75rem;
}

.etfac-slider-label strong {
    color:       var(--etfac-strategy);
    font-family: var(--etfac-mono);
    font-size:   1rem;
}

.etfac-slider {
    width:              100%;
    -webkit-appearance: none;
    appearance:         none;
    height:             4px;
    background:         var(--etfac-border);
    border-radius:      2px;
    outline:            none;
    cursor:             pointer;
}

.etfac-slider::-webkit-slider-thumb {
    -webkit-appearance: none;
    appearance:         none;
    width:              18px;
    height:             18px;
    border-radius:      50%;
    background:         var(--etfac-strategy);
    border:             2px solid #fff;
    box-shadow:         0 0 0 3px rgba(0,200,150,0.25);
    transition:         box-shadow 0.15s;
    cursor:             grab;
}

.etfac-slider::-webkit-slider-thumb:active { cursor: grabbing; }

.etfac-slider::-moz-range-thumb {
    width:        18px;
    height:       18px;
    border-radius: 50%;
    background:   var(--etfac-strategy);
    border:       2px solid #fff;
    cursor:       grab;
}

.etfac-slider-endpoints {
    display:         flex;
    justify-content: space-between;
    font-size:       0.7rem;
    color:           var(--etfac-muted);
    margin-top:      0.4rem;
    font-family:     var(--etfac-mono);
}

/* ── Chart grid ─────────────────────────────────────────────────────────────── */

.etfac-charts-grid {
    display:       flex;
    flex-direction: column;
    gap:           1.5rem;
    margin-bottom: 1.5rem;
    width:         100%;
}

.etfac-chart-wrap {
    background:    var(--etfac-surface);
    border:        1px solid var(--etfac-border);
    border-radius: var(--etfac-radius);
    padding:       1.25rem;
    min-height:    220px;
    min-width:     0;
    overflow:      hidden;
}

.etfac-sensitivity-wrap {
    min-height:    180px;
}

.etfac-chart-label {
    font-size:   0.72rem;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color:       var(--etfac-muted);
    margin:      0 0 0.75rem;
    font-weight: 500;
}

.etfac-sensitivity-wrap {
    background:    var(--etfac-surface);
    border:        1px solid var(--etfac-border);
    border-radius: var(--etfac-radius);
    padding:       1.25rem;
    margin-bottom: 1rem;
}

/* ── Footnote ───────────────────────────────────────────────────────────────── */

.etfac-footnote {
    font-size:  0.72rem;
    color:      var(--etfac-muted);
    border-top: 1px solid var(--etfac-border);
    padding-top: 0.75rem;
    margin-top: 0.5rem;
}

/* ── Error state ────────────────────────────────────────────────────────────── */

.etfac-error {
    color:     var(--etfac-danger);
    font-size: 0.875rem;
    margin:    0.5rem 0 0;
}

/* ── Editor placeholder ─────────────────────────────────────────────────────── */

.etfac-editor-placeholder {
    background:    #1e293b;
    border:        2px dashed #334155;
    border-radius: 12px;
    padding:       2.5rem;
    text-align:    center;
    color:         #94a3b8;
    font-family:   sans-serif;
}

.etfac-editor-placeholder .dashicons {
    font-size:   2.5rem;
    width:       2.5rem;
    height:      2.5rem;
    color:       #00c896;
    margin-bottom: 0.5rem;
}

.etfac-editor-placeholder strong {
    display:     block;
    font-size:   1rem;
    color:       #f1f5f9;
    margin:      0.25rem 0;
}

.etfac-editor-url {
    font-size:  0.75rem;
    word-break: break-all;
    color:      #a78bfa;
}

.etfac-editor-hint {
    font-size: 0.8rem;
    color:     #64748b;
}

.etfac-editor-badge {
    display:        inline-block;
    background:     rgba(0,200,150,0.15);
    border:         1px solid rgba(0,200,150,0.3);
    color:          #00c896;
    font-size:      0.7rem;
    padding:        0.2rem 0.6rem;
    border-radius:  20px;
    margin-top:     0.5rem;
}

/* ── Width overrides — break out of theme content column ───────────────────── */

/* Gutenberg alignwide / alignfull */
.wp-block-etf-accelerator-financial-chart.alignwide,
.wp-block-etf-accelerator-financial-chart.alignfull {
    max-width: 100%;
    width:     100%;
}

/* Kadence theme specific — override .entry-content max-width */
.kadence-blocks-inner-column-inner .etfac-financial-chart,
.entry-content .etfac-financial-chart {
    max-width: 100%;
    width:     100%;
}

/* Force the outer block wrapper to respect wide alignment */
.wp-block-etf-accelerator-financial-chart {
    max-width: 100%;
    width:     100%;
}

/* ── Outer wrapper — wide alignment ────────────────────────────────────────── */
.etfac-financial-chart-outer {
    width:     100%;
    max-width: 100%;
}

.etfac-financial-chart-outer.alignwide {
    margin-left:  calc(-1 * var(--wp--style--root--padding-left, 2rem));
    margin-right: calc(-1 * var(--wp--style--root--padding-right, 2rem));
    width:        calc(100% + var(--wp--style--root--padding-left, 2rem) + var(--wp--style--root--padding-right, 2rem));
    max-width:    none;
}