/* chart.drawing.css - Drawing tool button styles for chart overlay.
   Uses design tokens only. No hex colors. No Arabic characters.
   Concern: drawing toolbar button states only.
   Chart drawing canvas element is inline-styled from chart.drawing.js. */

.btn-chart-draw {
    padding: 3px 8px;
    border-radius: var(--radius-sm, 4px);
    border: 1px solid var(--color-border, var(--border-2));
    background: var(--color-bg-2, var(--bg-2));
    color: var(--color-text-2, var(--text-2));
    cursor: pointer;
    font-size: 0.78rem;
    transition: background 0.12s, color 0.12s;
    white-space: nowrap;
}

.btn-chart-draw:hover {
    background: var(--color-bg-3, var(--bg-3));
    color: var(--color-text-1, var(--text-1));
}

.btn-chart-draw.active {
    background: var(--color-primary-alpha, rgba(0, 201, 167, 0.15));
    color: var(--color-primary, var(--accent));
    border-color: var(--color-primary, var(--accent));
}

/* Separator inside kebab menu above drawing tools */
.chart-kebab-draw-sep {
    height: 1px;
    background: var(--color-border, var(--border-2));
    margin: 4px 0;
}

/* Drawing canvas - pointer events managed by JS */
#chartDrawingCanvas {
    position: absolute;
    top: 0;
    left: 0;
    z-index: 50;
    pointer-events: none;
}