/* ============================================================
Dega.UI — global stylesheet entry point
------------------------------------------------------------
This is the ONE stylesheet a consuming app links to pull in
the Dega design system:
It loads the design tokens (the single source of truth for
colors, type scale, spacing, and semantic roles) plus the
element defaults. Per-component styles ship as scoped CSS and
are bundled automatically into the consumer's
{AssemblyName}.styles.css — link that too.
============================================================ */
@import './tokens.css';
@import './grid.css';
/* Global box-sizing reset — the design system sizes everything border-box
(ported from the mockup's base.css `* { box-sizing: border-box }`). Without
this, component padding adds to declared widths and layouts drift. */
*, *::before, *::after {
box-sizing: border-box;
}
/* Visually-hidden but screen-reader-accessible and focusable. Gives icon-only or custom
controls (e.g. an editable section heading) a programmatic name/heading without changing
the visual layout. */
.dega-sr-only {
position: absolute;
width: 1px;
height: 1px;
padding: 0;
margin: -1px;
overflow: hidden;
clip: rect(0, 0, 0, 0);
white-space: nowrap;
border: 0;
}
/* Zero the browser's default body margin (ported from base.css
`html, body { margin:0; padding:0 }`) — otherwise an 8px white frame
shows around the full-height app shell. */
html, body {
margin: 0;
padding: 0;
}
/* ============================================================
Chart primitives (DegaPieChart / DegaLineChart / DegaBarChart /
DegaCategoryBarChart). Ships with Dega.UI so the components are
self-contained. Ported from the FBOLinx analytics chart styles.
============================================================ */
.dega-pie-wrap { display: flex; align-items: center; gap: 14px; width: 100%; justify-content: space-between; }
.dega-pie { flex-shrink: 0; }
.dega-pie-center-label { font-size: 10px; fill: var(--fg-3); font-family: var(--font-sans); font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; }
.dega-pie-center-val { font-size: 20px; fill: var(--fg-1); font-family: var(--font-display); font-weight: 700; }
.dega-pie-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: 5px; font-size: 12px; flex: 1; min-width: 0; }
.dega-pie-legend li { display: grid; grid-template-columns: 12px 1fr auto; gap: 8px; align-items: center; }
.dega-chart-dot { width: 10px; height: 10px; border-radius: 3px; display: inline-block; flex-shrink: 0; }
.dega-pie-name { font-size: 12px; color: var(--fg-2); white-space: normal; overflow-wrap: anywhere; }
.dega-pie-val { font-size: 12px; color: var(--fg-1); font-weight: 600; text-align: right; }
.dega-bar-wrap { display: flex; flex-direction: column; gap: 8px; }
.dega-bar-legend { list-style: none; margin: 0; padding: 0; display: flex; flex-wrap: wrap; gap: 6px 18px; justify-content: center; }
.dega-bar-legend li { display: inline-flex; align-items: center; gap: 7px; font-size: 12px; color: var(--fg-2); }
.dega-bar-legend-dot { width: 11px; height: 11px; border-radius: 3px; flex-shrink: 0; }
.dega-line-wrap { display: flex; gap: 14px; align-items: center; width: 100%; }
.dega-line-plot { flex: 1; min-width: 0; position: relative; }
.dega-line-legend { background: var(--gray-50); border: 1px solid var(--border-1); border-radius: var(--radius-sm); padding: 8px 10px; display: flex; flex-direction: column; gap: 4px; flex-shrink: 0; min-width: 100px; }
.dega-line-legend-title { font-size: 10px; font-weight: 700; text-transform: uppercase; letter-spacing: 0.06em; color: var(--fg-3); margin-bottom: 2px; }
.dega-line-legend-item { display: inline-flex; align-items: center; gap: 6px; font-size: 11.5px; color: var(--fg-2); }
/* Interactive charts: the hover tooltip anchors to the plot, and every node inside the plotting surface is
pointer-transparent so the