/* ============================================================================
   GlideInventory — Charts
   ----------------------------------------------------------------------------
   Styling for the SVG chart components. Global rather than scoped so the three
   components share one vocabulary and one set of semantic colours.

   Semantic colour is the point: a donut segment is live / hold / alert, not
   "series 1 / 2 / 3", so a slice's colour carries the same meaning as a sync
   chip elsewhere in the app.

   Depends on: tokens.css
   ============================================================================ */

.chart {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-3);
    min-width: 0;
}

.chart-empty {
    margin: 0;
    padding: var(--g-space-6) var(--g-space-4);
    text-align: center;
    color: var(--g-text-subtle);
    font-size: var(--g-text-base);
}

/* ---------------------------------------------------------------------------
   Line
   --------------------------------------------------------------------------- */
.chart-svg {
    display: block;
    width: 100%;
    height: 160px;
    overflow: visible;
}

.chart-grid {
    stroke: var(--g-border);
    stroke-width: 1;
    vector-effect: non-scaling-stroke;
}

.chart-line {
    stroke: var(--g-accent);
    stroke-width: 2;
}

.chart-endpoint {
    fill: var(--g-accent);
    stroke: var(--g-surface);
    stroke-width: 2;
}

.chart-fill-top {
    stop-color: var(--g-accent);
    stop-opacity: 0.20;
}

.chart-fill-bottom {
    stop-color: var(--g-accent);
    stop-opacity: 0;
}

.chart-legend {
    display: flex;
    align-items: baseline;
    gap: var(--g-space-2);
    flex-wrap: wrap;
}

.chart-legend-label {
    font-family: var(--g-font-data);
    font-size: var(--g-text-xs);
    letter-spacing: 0.11em;
    text-transform: uppercase;
    color: var(--g-text-subtle);
}

.chart-legend-value {
    font-family: var(--g-font-data);
    font-variant-numeric: tabular-nums;
    font-size: var(--g-text-lg);
    font-weight: 620;
    letter-spacing: -0.02em;
    color: var(--g-text);
}

.chart-legend-range {
    margin-left: auto;
    font-family: var(--g-font-data);
    font-size: var(--g-text-xs);
    color: var(--g-text-subtle);
}

/* ---------------------------------------------------------------------------
   Bars — horizontal, so long category labels stay readable
   --------------------------------------------------------------------------- */
.bars {
    display: flex;
    flex-direction: column;
    gap: var(--g-space-2);
}

.bar-row {
    display: grid;
    grid-template-columns: minmax(84px, 22%) 1fr auto;
    align-items: center;
    gap: var(--g-space-3);
}

.bar-label {
    font-size: var(--g-text-sm);
    color: var(--g-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.bar-track {
    display: block;
    height: 8px;
    border-radius: var(--g-radius-pill);
    background: var(--g-surface-2);
    overflow: hidden;
}

.bar-fill {
    display: block;
    height: 100%;
    border-radius: var(--g-radius-pill);
    background: var(--g-accent);
    min-width: 2px;
}

.bar-fill.is-peak {
    background: var(--g-accent-hover);
}

.bar-value {
    font-family: var(--g-font-data);
    font-variant-numeric: tabular-nums;
    font-size: var(--g-text-sm);
    font-weight: 600;
    color: var(--g-text);
    text-align: right;
}

/* ---------------------------------------------------------------------------
   Donut
   --------------------------------------------------------------------------- */
.chart--donut {
    flex-direction: row;
    align-items: center;
    gap: var(--g-space-5);
    flex-wrap: wrap;
}

.donut {
    width: 132px;
    height: 132px;
    flex: none;
    transform: rotate(-90deg);
}

.donut-track {
    stroke: var(--g-surface-2);
    stroke-width: 4;
}

.donut-seg {
    stroke-width: 4;
    transition: stroke-width 0.15s ease;
}

.donut-seg.is-live    { stroke: var(--g-live); }
.donut-seg.is-hold    { stroke: var(--g-hold); }
.donut-seg.is-alert   { stroke: var(--g-alert); }
.donut-seg.is-accent  { stroke: var(--g-accent); }
.donut-seg.is-neutral { stroke: var(--g-border-strong); }

/* counter-rotate so the centred total reads horizontally */
.donut-total,
.donut-caption {
    transform: rotate(90deg);
    transform-origin: 21px 21px;
    text-anchor: middle;
    font-family: var(--g-font-data);
}

.donut-total {
    font-size: 6px;
    font-weight: 700;
    fill: var(--g-text);
}

.donut-caption {
    font-size: 2.6px;
    letter-spacing: 0.14em;
    text-transform: uppercase;
    fill: var(--g-text-subtle);
}

.donut-legend {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--g-space-2);
    min-width: 0;
    flex: 1;
}

.donut-legend li {
    display: grid;
    grid-template-columns: auto 1fr auto;
    align-items: center;
    gap: var(--g-space-2);
    font-size: var(--g-text-base);
}

.donut-key {
    width: 8px;
    height: 8px;
    border-radius: 2px;
    flex: none;
}

.donut-key.is-live    { background: var(--g-live); }
.donut-key.is-hold    { background: var(--g-hold); }
.donut-key.is-alert   { background: var(--g-alert); }
.donut-key.is-accent  { background: var(--g-accent); }
.donut-key.is-neutral { background: var(--g-border-strong); }

.donut-name {
    color: var(--g-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.donut-value {
    font-family: var(--g-font-data);
    font-variant-numeric: tabular-nums;
    font-weight: 600;
    color: var(--g-text);
}

@media (prefers-reduced-motion: reduce) {
    .donut-seg {
        transition: none;
    }
}