/* =========================================================
   Shared chart-panel styling (non-scoped).

   Charts pass CssClass="dchart-panel" to DPanel, so these rules land on the
   DPanel <section> and its body — outside the chart component's scoped-CSS
   reach. Kept global (like library-panel.css / faceted-grid.css) so a single
   definition applies to every chart instead of being duplicated, mis-scoped,
   per chart. Theme via raw semantic tokens (oklch) — never hsl(var(...)).
   ========================================================= */

.dchart-panel {
    height: 100%;
    min-height: 360px;
}

/* Inset the chart content so bars, labels, and grids don't draw flush against
   the panel header (top) or the panel border (right/bottom/left). */
.dchart-panel .dpanel-body {
    padding: 12px 14px;
    overflow: auto;
}

/* Selector/options row that a chart renders as the first child of the scrolling
   panel body (field/code pickers, count-mode toggles). Pin it to the top of the
   scroll region so it stays visible while the bars/rows below scroll. The
   negative margins + matching padding let the pinned strip span the body's full
   width (cancelling the .dpanel-body inset) and its opaque card background hides
   content scrolling underneath. */
.dchart-panel .dpanel-body > .dchart-header {
    position: sticky;
    top: -12px; /* cancel the body's 12px top padding so it pins flush */
    z-index: 2;
    margin: -12px -14px 12px;
    padding: 12px 14px;
    background: var(--card);
    border-bottom: 1px solid var(--border);
}

.dchart-empty {
    display: flex;
    align-items: center;
    justify-content: center;
    height: 100%;
    color: var(--muted-foreground);
    font-size: 0.875rem;
    text-align: center;
}