/* chart-timeframe.css — chart toolbar layout + Daily/Weekly toggle.
   The toolbar is a single flex row: existing controls (download/share/draw) on
   the left, the D/W timeframe toggle pushed to the far right. Everything sits on
   the same line, so nothing overlaps the chart legend/company name.
   Load AFTER ew-charts.css. */

.chart-toolbar {
    position: relative;
    z-index: 4;
    display: flex;
    align-items: center;
    gap: 0.5rem;
    margin-bottom: 0.5rem;
}

    /* the share fly-out sits under its button; don't let it stretch the row */
    .chart-toolbar .share-bar {
        margin-top: 0;
    }

/* push the timeframe group to the far right, across from the left controls */
.chart-timeframe {
    margin-left: auto;
    display: inline-flex;
    gap: 0.5rem;
}

/* D/W hold a letter instead of an <svg>; the .chart-btn box sizes them to 34x34.
   Just make the glyph read like a control label. */
.chart-btn.chart-tf {
    font-weight: 700;
    font-size: 0.9rem;
}

    /* Selected timeframe — gold fill, matching the app's active-state convention. */
    .chart-btn.chart-tf.is-active,
    .chart-btn.chart-tf.is-active:hover {
        background: var(--ew-gold, #DDB785);
        border-color: var(--ew-gold, #DDB785);
        color: var(--ew-dark, #050505);
    }