/* ==========================================================================
   Clarifolio.Admin — page-specific styles only. The shell (rail, mobile bar,
   auth pages) is Clarifolio.UI shell.css and every component is
   components.css; Admin runs them at body.density-compact (denser layout,
   smaller shadows, minimal decoration). Tokens only.
   ========================================================================== */

.list-group-item { background-color: var(--surface); border-color: var(--divider-color); color: var(--fg); }

/* Campaigns: the email preview (Views/Campaigns/Details). Fixed height; the email scrolls inside. */
.campaign-preview {
    display: block;
    width: 100%;
    height: 640px;
    border: var(--border-subtle);
    border-radius: var(--radius-sm);
    background: var(--surface);
}

/* Email (Views/Email): daily/monthly bars stacked by category, with the plan's limit drawn
   across the chart. Sizes arrive as inline custom properties; colours are .series-* classes. */
.stack-chart { position: relative; }
.limit-line { position: absolute; left: 0; right: 0; bottom: calc(var(--at) * var(--plot-height) / 100 + var(--label-height)); border-top: 2px dashed var(--negative); pointer-events: none; }
.limit-line > span { position: absolute; right: 0; top: -1.3rem; font: 700 .68rem/1 var(--font-mono); color: var(--negative); background: var(--surface); padding: 0 var(--space-1); }
.meter { height: 10px; overflow: hidden; border: var(--border-subtle); border-radius: var(--radius-pill); background: var(--bg); }
.meter > span { display: block; height: 100%; width: var(--pct); background: var(--fg); }
.meter.is-high > span { background: var(--warning); }
.meter.is-full > span { background: var(--negative); }