/* Dashboard components (MBS.Framework.UI/Components/Dashboard): KPI card, bar chart, ring, bullet, stacked bar, tile chart,
   widget card, skeleton and the hidden chart table, plus the tooltip, empty and legend rules every chart shares.
   One static file, linked once in the host head (MBS.ERP/Components/App.razor, right after mbs-user-look.css), so a page
   with twenty tiles sends this CSS once instead of once per tile.
   The workspace widget styles (Components/Workspace/WorkspaceWidgetStyles.razor) render inside the page, later than this
   file, and override it through ancestor selectors. Rules that must still beat them carry an extra class or :not(#id).
   Rules: theme tokens only, logical properties only, motion only under prefers-reduced-motion: no-preference. */

/* ===== Shared chart rules: tooltip, empty state, legend ===== */
.mbs-chart-tip { display: none; position: absolute; inset-block-end: 100%; inset-inline-start: 50%; translate: -50% -4px; z-index: 5;
    background: var(--mbs-text-1); color: var(--mbs-card-bg); padding: 6px 8px; border-radius: 6px; font-size: 11px; line-height: 1.35;
    white-space: nowrap; flex-direction: column; gap: 2px; pointer-events: none; font-variant-numeric: tabular-nums; text-align: start;
    box-shadow: 0 4px 14px color-mix(in srgb, var(--mbs-text-1) 22%, transparent); }
.mbs-chart-tip b { font-weight: 600; }
.mbs-chart-tip-delta { opacity: .85; }
[dir="rtl"] .mbs-chart-tip { translate: 50% -4px; }

.mbs-chart-empty { color: var(--mbs-text-3); font-size: .8rem; padding: 16px 0; text-align: center; }
.mbs-chart-legend { display: flex; flex-wrap: wrap; gap: 12px; font-size: 11px; color: var(--mbs-text-2); margin-block-start: 8px; }
.mbs-chart-legend > span { display: inline-flex; align-items: center; }
.mbs-chart-legend i { display: inline-block; inline-size: 8px; block-size: 8px; border-radius: 2px; margin-inline-end: 4px; }

/* ===== Loading skeleton (MBSWidgetSkeleton; pages also use the mbs-widget-skeleton class directly) ===== */
/* Three bars shaped like a loaded card (label, value, footer); the container keeps the 60px height. */
.mbs-widget-skeleton {
    inline-size: 100%; block-size: 60px;
    display: flex; flex-direction: column; justify-content: space-between; align-items: flex-start;
}
.mbs-widget-skeleton.mbs-widget-skeleton--lines { block-size: auto; gap: 10px; }
.mbs-sk-bar {
    display: block;
    background: linear-gradient(90deg,
        var(--mbs-surface-2) 25%, var(--mbs-border) 50%, var(--mbs-surface-2) 75%);
    background-size: 200% 100%;
    border-radius: 4px;
}
.mbs-sk-bar--label { inline-size: 55%; block-size: 10px; }
.mbs-sk-bar--value { inline-size: 75%; block-size: 20px; }
.mbs-sk-bar--foot  { inline-size: 40%; block-size: 8px; }
.mbs-sk-bar--wide  { inline-size: 100%; block-size: 8px; }
/* reduced-motion users get a static skeleton */
@media (prefers-reduced-motion: no-preference) {
    .mbs-sk-bar { animation: mbs-kpi-shimmer 1.4s infinite; }
}
@keyframes mbs-kpi-shimmer {
    0%   { background-position:  200% 0; }
    100% { background-position: -200% 0; }
}

/* ===== The numbers behind a chart (MBSChartDataTable), visually hidden ===== */
.mbs-visually-hidden { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }
.mbs-chart-table { inline-size: 100%; border-collapse: collapse; font-size: .8rem; font-variant-numeric: tabular-nums; }
.mbs-chart-table th, .mbs-chart-table td { padding: 4px 8px; border-block-end: 1px solid var(--mbs-border); text-align: start; }
.mbs-chart-table td { text-align: end; }

/* ===== Bar chart (MBSBarChart) ===== */
.mbs-bar { --lbl-h: 20px; position: relative; font-variant-numeric: tabular-nums; }
.mbs-bar--compact { --lbl-h: 0px; }

/* vertical: value axis | plot; the legend spans both columns */
.mbs-bar--v { display: grid; grid-template-columns: auto minmax(0, 1fr); column-gap: 8px; align-items: start; }
.mbs-bar--v.mbs-bar--compact { grid-template-columns: minmax(0, 1fr); }
.mbs-bar--v .mbs-chart-legend { grid-column: 1 / -1; }
.mbs-bar-axis { display: flex; flex-direction: column; justify-content: space-between; block-size: calc(var(--bar-h) - var(--lbl-h) + 1em);
    margin-block-start: -.5em; font-size: 10.5px; line-height: 1em; color: var(--mbs-text-3); text-align: end; white-space: nowrap; }

/* the plot: baseline, a calm middle line and a top line, matching the three axis labels */
.mbs-bar--v .mbs-bar-plot { grid-column: -2 / -1; display: grid; grid-auto-flow: column; grid-auto-columns: minmax(0, 1fr); block-size: var(--bar-h); gap: 4px;
    background:
        linear-gradient(to top, var(--mbs-border) 0 1px, transparent 1px),
        linear-gradient(to top, transparent calc(50% - .5px), color-mix(in srgb, var(--mbs-border) 60%, transparent) calc(50% - .5px) calc(50% + .5px), transparent calc(50% + .5px)),
        linear-gradient(to bottom, color-mix(in srgb, var(--mbs-border) 60%, transparent) 0 1px, transparent 1px);
    background-size: 100% calc(100% - var(--lbl-h)); background-repeat: no-repeat; }
.mbs-bar--v.mbs-bar--compact .mbs-bar-plot { block-size: var(--bar-h, 72px); }
.mbs-bar--v .mbs-bar-slot { display: grid; grid-template-rows: 1fr auto; position: relative; min-inline-size: 0; border-radius: 4px; }
.mbs-bar--v .mbs-bar-label { order: 2; block-size: var(--lbl-h); line-height: var(--lbl-h); }
.mbs-bar--v .mbs-bar-track { display: flex; align-items: flex-end; justify-content: center; gap: 2px; position: relative; min-block-size: 0; border-radius: 4px 4px 0 0; }
.mbs-bar--v .mbs-bar-fill { display: block; block-size: var(--v); flex: 1 1 0; min-inline-size: 3px; max-inline-size: 28px; background: var(--c);
    border-start-start-radius: 3px; border-start-end-radius: 3px; }
.mbs-bar--v .mbs-bar-slot--on .mbs-bar-track { background: color-mix(in srgb, var(--mbs-primary) 8%, transparent); }

/* stacked: segments on top of each other, only the top one rounded, a hairline between segments */
.mbs-bar--v.mbs-bar--stacked .mbs-bar-track { flex-direction: column-reverse; align-items: center; justify-content: flex-start; gap: 0; }
.mbs-bar--v.mbs-bar--stacked .mbs-bar-fill { flex: 0 0 var(--v); inline-size: 60%; border-radius: 0; box-shadow: inset 0 -1px 0 var(--mbs-card-bg); }
.mbs-bar--v.mbs-bar--stacked .mbs-bar-fill:last-child { border-start-start-radius: 3px; border-start-end-radius: 3px; }

/* comparison: a light wide bar behind a narrower main bar */
.mbs-bar-fill--cmp { position: absolute; inset-block-end: 0; inset-inline: 15%; margin-inline: auto; block-size: var(--v); }
.mbs-bar .mbs-bar-fill.mbs-bar-fill--cmp { background: color-mix(in srgb, var(--mbs-text-1) 18%, var(--mbs-card-bg)); }
.mbs-bar--v .mbs-bar-fill.mbs-bar-fill--cmp { max-inline-size: 34px; }
.mbs-bar--v.mbs-bar--cmp .mbs-bar-fill:not(.mbs-bar-fill--cmp) { position: relative; flex: 0 0 auto; inline-size: 60%; max-inline-size: 20px; }

/* Horizontal and stacked charts scale by size from 0 and show a negative value in the danger colour. */
.mbs-bar .mbs-bar-fill.mbs-bar-fill--neg { background: var(--mbs-danger); }

/* Vertical, non-stacked chart with a value below 0 (mbs-bar--neg): the scale runs from the minimum to the maximum and the
   zero line sits --zero from the top of the plot (--zero-k is the same as a fraction). Each main fill is a full-height column
   whose ::before is the bar: positive bars stand on the zero line, negative bars (mbs-bar-fill--below) hang from it. */
.mbs-bar--v.mbs-bar--neg .mbs-bar-plot { position: relative;
    background:
        linear-gradient(to top, color-mix(in srgb, var(--mbs-border) 60%, transparent) 0 1px, transparent 1px),
        linear-gradient(to bottom, color-mix(in srgb, var(--mbs-border) 60%, transparent) 0 1px, transparent 1px);
    background-size: 100% calc(100% - var(--lbl-h)); background-repeat: no-repeat; }
.mbs-bar-zero { position: absolute; inset-inline: 0; inset-block-start: calc((100% - var(--lbl-h)) * var(--zero-k)); block-size: 1px;
    background: var(--mbs-text-3); pointer-events: none; z-index: 1; }
.mbs-bar--v.mbs-bar--neg .mbs-bar-track { align-items: stretch; border-radius: 0; }
.mbs-bar--v.mbs-bar--neg .mbs-bar-fill:not(.mbs-bar-fill--cmp) { position: relative; block-size: auto; background: none; border-radius: 0; animation: none; }
.mbs-bar--v.mbs-bar--neg .mbs-bar-fill:not(.mbs-bar-fill--cmp)::before { content: ""; position: absolute; inset-inline: 0;
    inset-block-end: calc(100% - var(--zero)); block-size: var(--v); background: var(--c);
    border-start-start-radius: 3px; border-start-end-radius: 3px; }
.mbs-bar--v.mbs-bar--neg .mbs-bar-fill.mbs-bar-fill--below:not(.mbs-bar-fill--cmp)::before { inset-block-end: auto; inset-block-start: var(--zero);
    background: var(--mbs-danger); border-start-start-radius: 0; border-start-end-radius: 0; border-end-start-radius: 3px; border-end-end-radius: 3px; }
.mbs-bar--v.mbs-bar--neg .mbs-bar-fill.mbs-bar-fill--cmp { inset-block-end: calc(100% - var(--zero)); }
.mbs-bar--v.mbs-bar--neg .mbs-bar-fill.mbs-bar-fill--cmp.mbs-bar-fill--below { inset-block-end: auto; inset-block-start: var(--zero); }
/* the axis reads max / 0 / min; the 0 label sits level with the zero line */
.mbs-bar--neg .mbs-bar-axis { position: relative; }
.mbs-bar--neg .mbs-bar-axis-zero { position: absolute; inset-inline-end: 0; inset-block-start: calc((100% - 1em) * var(--zero-k)); }

/* horizontal: label | track | value per row */
.mbs-bar--h .mbs-bar-plot { display: flex; flex-direction: column; gap: 8px; }
.mbs-bar--h .mbs-bar-slot { display: grid; grid-template-columns: minmax(64px, 30%) 1fr auto; align-items: center; gap: 8px; position: relative; border-radius: 4px; }
.mbs-bar--h .mbs-bar-label { text-align: start; font-size: 11.5px; color: var(--mbs-text-2); }
.mbs-bar--h .mbs-bar-track { display: flex; flex-direction: column; justify-content: center; gap: 1px; position: relative; block-size: 10px; border-radius: 5px;
    background: var(--mbs-surface-2); overflow: hidden; }
.mbs-bar--h .mbs-bar-fill { display: block; inline-size: var(--v); flex: 1 1 0; min-block-size: 2px; background: var(--c);
    border-start-end-radius: 5px; border-end-end-radius: 5px; }
.mbs-bar--h.mbs-bar--stacked .mbs-bar-track { flex-direction: row; justify-content: flex-start; gap: 0; }
.mbs-bar--h.mbs-bar--stacked .mbs-bar-fill { flex: 0 0 var(--v); border-radius: 0; box-sizing: border-box; border-inline-end: 1px solid var(--mbs-card-bg); }
.mbs-bar--h.mbs-bar--stacked .mbs-bar-fill:last-child { border-inline-end: 0; }
.mbs-bar--h .mbs-bar-fill.mbs-bar-fill--cmp { inset-block: 0; inset-inline: 0 auto; margin: 0; inline-size: var(--v); block-size: auto; }
.mbs-bar--h.mbs-bar--cmp .mbs-bar-fill:not(.mbs-bar-fill--cmp) { position: relative; flex: 0 0 6px; }
.mbs-bar-value { font-size: 11.5px; font-weight: 600; color: var(--mbs-text-1); text-align: end; min-inline-size: 3ch; white-space: nowrap; }
.mbs-bar--h .mbs-bar-slot--on .mbs-bar-track { box-shadow: 0 0 0 1px var(--mbs-primary); }

.mbs-bar-label { font-size: 10.5px; color: var(--mbs-text-3); text-align: center; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
.mbs-bar--compact:not(.mbs-bar--h) .mbs-bar-label, .mbs-bar--compact .mbs-bar-axis { display: none; }

/* hover, selection and focus */
.mbs-bar-plot:hover .mbs-bar-slot:not(:hover) .mbs-bar-fill { opacity: .55; }
.mbs-bar-slot[role="button"] { cursor: pointer; }
.mbs-bar-slot--on .mbs-bar-label { font-weight: 700; color: var(--mbs-primary); }
.mbs-bar-slot:focus-visible { outline: 2px solid var(--mbs-primary); outline-offset: 2px; }
.mbs-bar-slot:focus:not(:focus-visible) { outline: none; }

/* the tooltip itself is in the shared chart rules at the top of this file */
.mbs-bar-slot:hover > .mbs-chart-tip, .mbs-bar-slot:focus-visible > .mbs-chart-tip { display: flex; }

@media (prefers-reduced-motion: no-preference) {
    .mbs-bar--v .mbs-bar-fill { transform-origin: 50% 100%; animation: mbs-bar-grow-v .45s cubic-bezier(.2, .7, .2, 1) both; }
    .mbs-bar--h .mbs-bar-fill { transform-origin: 0 50%; animation: mbs-bar-grow-h .45s cubic-bezier(.2, .7, .2, 1) both; }
    [dir="rtl"] .mbs-bar--h .mbs-bar-fill { transform-origin: 100% 50%; }
    .mbs-bar-fill { transition: opacity .15s ease; }
    /* bars on a chart with negatives grow out of the zero line */
    .mbs-bar--v.mbs-bar--neg .mbs-bar-fill:not(.mbs-bar-fill--cmp)::before { transform-origin: 50% 100%; animation: mbs-bar-grow-v .45s cubic-bezier(.2, .7, .2, 1) both; }
    .mbs-bar--v.mbs-bar--neg .mbs-bar-fill.mbs-bar-fill--below:not(.mbs-bar-fill--cmp)::before { transform-origin: 50% 0; }
    .mbs-bar--v.mbs-bar--neg .mbs-bar-fill.mbs-bar-fill--cmp.mbs-bar-fill--below { transform-origin: 50% 0; }
    @keyframes mbs-bar-grow-v { from { transform: scaleY(0); } }
    @keyframes mbs-bar-grow-h { from { transform: scaleX(0); } }
}

/* ===== Chart inside a KPI tile (MBSTileChart) ===== */
.mbs-tile-chart { margin-block-start: 8px; --bar-h: 56px; }
.mbs-tile-chart--lg { --bar-h: 220px; } /* compact tiles read --bar-h; the large bar chart gets Height="220" */
.mbs-tile-chart:not(.mbs-tile-chart--lg) .mbs-dn-pct,
.mbs-tile-chart:not(.mbs-tile-chart--lg) .mbs-area-axis { display: none; }

/* ===== Progress ring (MBSRing). The centre text is HTML over the SVG, so the right-to-left mirror does not flip it. ===== */
.mbs-ring { display: inline-flex; flex-direction: column; align-items: center; gap: 4px; max-inline-size: 100%; }
.mbs-ring-body { position: relative; inline-size: 100%; aspect-ratio: 1; }
.mbs-ring-body svg { display: block; inline-size: 100%; block-size: 100%; }
.mbs-ring-track { stroke: var(--mbs-surface-2); }
.mbs-ring-arc { stroke: var(--mbs-primary); }
.mbs-ring-arc--none { opacity: 0; }
.mbs-ring-centre { position: absolute; inset: 0; display: flex; align-items: center; justify-content: center; font-weight: 600;
    color: var(--mbs-text-1); font-variant-numeric: tabular-nums; }
.mbs-ring-label { font-size: 11.5px; color: var(--mbs-text-2); text-align: center; }
[dir="rtl"] .mbs-ring-body svg { transform: scaleX(-1); }

@media (prefers-reduced-motion: no-preference) {
    .mbs-ring-arc { animation: mbs-ring-draw .6s cubic-bezier(.2, .7, .2, 1) both; }
    @keyframes mbs-ring-draw { from { stroke-dasharray: 0 264; } }
}

/* ===== Bullet bar (MBSBullet) ===== */
.mbs-bullet { position: relative; display: flex; block-size: 18px; border-radius: 3px; min-inline-size: 0; background: var(--mbs-surface-2); }
.mbs-bullet-band { display: block; block-size: 100%; flex: 0 0 auto; }
.mbs-bullet-band--0 { background: color-mix(in srgb, var(--mbs-text-1) 22%, var(--mbs-card-bg)); }
.mbs-bullet-band--1 { background: color-mix(in srgb, var(--mbs-text-1) 14%, var(--mbs-card-bg)); }
.mbs-bullet-band--2 { background: color-mix(in srgb, var(--mbs-text-1) 8%, var(--mbs-card-bg)); }
.mbs-bullet-bar { position: absolute; inset-inline-start: 0; inset-block-start: 50%; translate: 0 -50%; block-size: 6px; border-radius: 3px; max-inline-size: 100%; }
.mbs-bullet-target { position: absolute; inset-block: 2px; inline-size: 2px; margin-inline-start: -1px; background: var(--mbs-text-1); }
.mbs-bullet:hover > .mbs-chart-tip, .mbs-bullet:focus-visible > .mbs-chart-tip { display: flex; }
.mbs-bullet:focus-visible { outline: 2px solid var(--mbs-primary); outline-offset: 2px; }
.mbs-bullet:focus:not(:focus-visible) { outline: none; }

/* ===== One stacked bar (MBSStackedBar) ===== */
.mbs-stack-track { display: flex; block-size: 8px; border-radius: 4px; overflow: hidden; background: var(--mbs-surface-2); }
.mbs-stack-seg { display: block; block-size: 100%; flex: 0 0 auto; }
.mbs-stack-seg:not(:last-child) { border-inline-end: 1px solid var(--mbs-card-bg); box-sizing: border-box; }

/* ===== Card around a chart or list (MBSWidgetCard) ===== */
.mbs-wcard { background: var(--mbs-card-bg); border: 1px solid var(--mbs-border); border-radius: var(--border-radius-lg, var(--mbs-radius-lg, 10px)); padding: 16px 18px; box-shadow: 0 1px 4px color-mix(in srgb, var(--mbs-text-1) 8%, transparent); display: flex; flex-direction: column; gap: 10px; min-inline-size: 0; }
.mbs-wcard-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mbs-wcard-actions { display: flex; align-items: center; gap: 6px; flex: 0 0 auto; }
.mbs-wcard .mbs-wcard-error { color: var(--mbs-danger); }
.mbs-wcard-title { font-size: .8rem; font-weight: 600; color: var(--mbs-text-2); }
.mbs-wcard-body { flex: 1 1 auto; min-block-size: 0; }

/* ===== KPI card (MBSKpiCard) ===== */
.mbs-kpi-card {
    background: var(--mbs-card-bg);
    border-radius: var(--mbs-radius-lg, 10px);
    padding: 16px 18px;
    display: flex;
    align-items: flex-start;
    gap: 12px;
    box-shadow: 0 1px 4px color-mix(in srgb, var(--mbs-text-1) 8%, transparent);
    border: 1px solid var(--mbs-border);
    border-top: 3px solid var(--mbs-border);
    transition: box-shadow 0.15s, transform 0.15s;
    position: relative;
    overflow: hidden;
    min-height: 90px;
}
.mbs-kpi-card--clickable { cursor: pointer; }
/* Two classes: the card used to win over the workspace styles' own card rule by coming later in the page; it is now
   earlier (this file is in the head), so it wins on specificity instead. Styles that cancel the hover use three classes. */
.mbs-kpi-card.mbs-kpi-card--clickable:hover {
    box-shadow: 0 4px 14px color-mix(in srgb, var(--mbs-text-1) 12%, transparent);
}
@media (prefers-reduced-motion: no-preference) {
    .mbs-kpi-card--clickable:hover { transform: translateY(-1px); }
}
.mbs-kpi-card--clickable:focus-visible { outline: 2px solid var(--mbs-primary); outline-offset: 2px; }
/* Colour variants — threshold driven */
.mbs-kpi-card--success { border-top-color: var(--mbs-success); }
.mbs-kpi-card--warning { border-top-color: var(--mbs-warning); }
.mbs-kpi-card--danger  { border-top-color: var(--mbs-danger); }
.mbs-kpi-card--info    { border-top-color: var(--mbs-primary); }
.mbs-kpi-card--default { border-top-color: var(--mbs-primary); }

.mbs-kpi-icon {
    width: 36px; height: 36px;
    border-radius: 8px;
    background: color-mix(in srgb, var(--mbs-primary) 8%, var(--mbs-card-bg));
    display: flex; align-items: center; justify-content: center;
    font-size: 16px; color: var(--mbs-primary);
    flex-shrink: 0;
}
.mbs-kpi-card--success .mbs-kpi-icon { background: color-mix(in srgb, var(--mbs-success) 8%, var(--mbs-card-bg));  color: var(--mbs-success); }
.mbs-kpi-card--warning .mbs-kpi-icon { background: color-mix(in srgb, var(--mbs-warning) 8%, var(--mbs-card-bg));  color: var(--mbs-warning); }
.mbs-kpi-card--danger  .mbs-kpi-icon { background: color-mix(in srgb, var(--mbs-danger) 8%, var(--mbs-card-bg));   color: var(--mbs-danger); }
.mbs-kpi-card--info    .mbs-kpi-icon { background: color-mix(in srgb, var(--mbs-primary) 8%, var(--mbs-card-bg)); color: var(--mbs-primary); }

/* A real multi-colour icon (IconContent, e.g. a Fluent Color icon) already carries its own
   colour — the tinted backdrop that gives a plain Bootstrap glyph visual weight would just
   clash with it, so this cancels the background (and the size box) for that case only. */
.mbs-kpi-icon.mbs-kpi-icon--plain { background: transparent; width: auto; height: auto; }

.mbs-kpi-body { display: flex; flex-direction: column; gap: 2px; flex: 1; min-width: 0; }

.mbs-kpi-value {
    font-size: 22px; font-weight: 700;
    color: var(--mbs-text-1, #201f1e);
    line-height: 1.1;
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    font-variant-numeric: tabular-nums;
}
.mbs-kpi-subvalue {
    font-size: 11px; color: var(--mbs-text-3, #888);
    white-space: nowrap; overflow: hidden; text-overflow: ellipsis;
    min-height: 1.3em; line-height: 1.3;
}
.mbs-kpi-subvalue--blank { visibility: hidden; }
.mbs-kpi-label {
    font-size: 11.5px; font-weight: 500; line-height: 1.3;
    color: var(--mbs-text-2, #605e5c);
    /* The title sits ABOVE the number (UI standard, see MASTER_PROMPT.md UI-DENSITY). The markup keeps
       the label after the value; `order` moves it first in the column. */
    order: -1;
    margin-bottom: 2px;
    min-height: 1.3em;
}
.mbs-kpi-trend {
    display: flex; align-items: center; gap: 3px;
    font-size: 10.5px; margin-top: 2px;
    font-variant-numeric: tabular-nums;
}
.mbs-kpi-trend--up   { color: var(--mbs-success); }
.mbs-kpi-trend--down { color: var(--mbs-danger); }
.mbs-kpi-trend--flat { color: var(--mbs-text-3, #888); }

/* Optional extras (Unit, Footer, Spark, HigherIsWorse). The sparkline is hidden here; only some widget styles show it. */
.mbs-kpi-unit { font-size: .6em; font-weight: 500; color: var(--mbs-text-3, #888); margin-inline-start: 4px; }
.mbs-kpi-footer { font-size: 11px; color: var(--mbs-text-3, #888); line-height: 1.3; }
.mbs-kpi-trend--good { color: var(--mbs-success); }
.mbs-kpi-trend--bad  { color: var(--mbs-danger); }
.mbs-kpi-spark { display: none; }
/* ShowSpark: the chart sits beside the value (end side of the card, level with the number), solid, in every widget style. */
.mbs-kpi-card--spark .mbs-kpi-spark {
    display: block; position: absolute; inset-inline-end: 12px; inset-block-start: 40px;
    inline-size: 54px; block-size: 28px; opacity: 1; color: var(--mbs-primary); pointer-events: none;
}
.mbs-kpi-card--spark .mbs-kpi-spark polyline { stroke-width: 2; }
.mbs-kpi-arrow { display: none; }
.mbs-kpi-card--spark .mbs-kpi-arrow { display: block; position: absolute; inset-inline-end: 14px; inset-block-start: 38px; inline-size: 38px; block-size: 30px; pointer-events: none; }
.mbs-kpi-arrow--good { color: var(--mbs-success); }
.mbs-kpi-arrow--bad  { color: var(--mbs-danger); }
[dir="rtl"] .mbs-kpi-card--spark .mbs-kpi-arrow { transform: scaleX(-1); }

/* Computed trend: the comparison text is quieter than the change. */
.mbs-kpi-trend-basis { color: var(--mbs-text-3); margin-inline-start: 2px; }

/* Empty and error states */
/* The :not(#mbs-kpi-state) raises specificity above the workspace widget styles without an important flag. */
.mbs-kpi-card .mbs-kpi-value.mbs-kpi-value--muted:not(#mbs-kpi-state) { color: var(--mbs-text-3); }
.mbs-kpi-card .mbs-kpi-subvalue.mbs-kpi-error:not(#mbs-kpi-state) { color: var(--mbs-danger); }
.mbs-kpi-card .mbs-kpi-retry { align-self: flex-start; justify-self: start; grid-column: 1 / -1; margin-block-start: 6px; }

/* Target bar. The grid-based widget styles flatten the body into the card grid, so the bar and the chart span every column. */
.mbs-kpi-target {
    block-size: 4px; border-radius: 2px; background: var(--mbs-surface-2);
    overflow: hidden; margin-block-start: 6px; grid-column: 1 / -1;
}
.mbs-kpi-target-fill { display: block; block-size: 100%; border-radius: inherit; }
/* Own class, not mbs-kpi-footer: the analytic style pins the footer to one grid cell and the two would overlap. */
.mbs-kpi-target-text { font-size: 11px; color: var(--mbs-text-3); line-height: 1.3; grid-column: 1 / -1; margin-block-start: 3px; }
@media (prefers-reduced-motion: no-preference) {
    .mbs-kpi-target-fill { transition: inline-size .4s ease; }
}

/* Embedded chart: the card becomes a column, the icon moves to the corner. */
.mbs-kpi-card--chart { flex-direction: column; align-items: stretch; }
.mbs-kpi-card--chart .mbs-kpi-icon { position: absolute; inset-inline-end: 14px; inset-block-start: 14px; }
.mbs-kpi-card--chart .mbs-kpi-body { flex: none; padding-inline-end: 44px; }
.mbs-kpi-card .mbs-tile-chart { grid-column: 1 / -1; inline-size: 100%; min-inline-size: 0; }
/* With an Expand control (26px at 6px from the corner) the corner icon moves inward by its width plus a 6px gap. */
.mbs-kpi-card--chart.mbs-kpi-card--expand .mbs-kpi-icon { inset-inline-end: 38px; }
.mbs-kpi-card--chart.mbs-kpi-card--expand .mbs-kpi-body { padding-inline-end: 80px; }

/* Click and Expand together: a stretched hit area over the whole card is the card's button (the body cannot be: some
   widget styles set it to display: contents, which leaves no box to focus). It sits under the Expand control. */
.mbs-kpi-hit { position: absolute; inset: 0; z-index: 1; border-radius: inherit; cursor: pointer; }
.mbs-kpi-hit:focus-visible { outline: 2px solid var(--mbs-primary); outline-offset: -2px; }
.mbs-kpi-hit:focus:not(:focus-visible) { outline: none; }

/* Expand: a small corner button, shown on hover or keyboard focus (always on touch screens). */
.mbs-kpi-expand { position: absolute; inset-block-start: 6px; inset-inline-end: 6px; z-index: 2; opacity: 0; }
.mbs-kpi-card:hover .mbs-kpi-expand, .mbs-kpi-expand:focus-within { opacity: 1; }
@media (hover: none) { .mbs-kpi-expand { opacity: 1; } }
@media (prefers-reduced-motion: no-preference) { .mbs-kpi-expand { transition: opacity .15s; } }
.mbs-kpi-expand .mbs-kpi-expand-btn {
    inline-size: 26px; block-size: 26px; padding: 0; justify-content: center;
    border-color: var(--mbs-border); background: var(--mbs-card-bg); color: var(--mbs-text-2);
}
.mbs-kpi-expand .mbs-kpi-expand-btn:focus-visible { outline: 2px solid var(--mbs-primary); outline-offset: 1px; }
.mbs-kpi-sr { position: absolute; inline-size: 1px; block-size: 1px; overflow: hidden; clip-path: inset(50%); white-space: nowrap; }

/* Hero: the headline figure on the brand gradient. The ink is the theme's text-on-primary colour (the colour primary
   buttons use), so it reads in every theme; the gradient ends on accent mixed into primary to keep that contrast.
   The :not(#id) only lifts the specificity above the workspace widget styles, which re-skin .mbs-kpi-card. */
.mbs-kpi-card.mbs-kpi-card--hero:not(#mbs-kpi-hero) {
    --hero-ink: var(--mbs-primary-text, var(--mbs-card-bg));
    background: linear-gradient(135deg, var(--mbs-primary), color-mix(in srgb, var(--mbs-accent) 55%, var(--mbs-primary)));
    border-color: transparent; border-block-start-width: 1px;
    color: var(--hero-ink);
    min-block-size: 160px; padding: 20px 22px;
}
[dir="rtl"] .mbs-kpi-card.mbs-kpi-card--hero:not(#mbs-kpi-hero) {
    background: linear-gradient(225deg, var(--mbs-primary), color-mix(in srgb, var(--mbs-accent) 55%, var(--mbs-primary)));
}
.mbs-kpi-card.mbs-kpi-card--hero:not(#mbs-kpi-hero):focus-visible { outline-color: var(--mbs-text-1); }
.mbs-kpi-card.mbs-kpi-card--hero:not(#mbs-kpi-hero) .mbs-kpi-value { font-size: 34px; color: var(--hero-ink); }
.mbs-kpi-card.mbs-kpi-card--hero:not(#mbs-kpi-hero) .mbs-kpi-label,
.mbs-kpi-card.mbs-kpi-card--hero:not(#mbs-kpi-hero) .mbs-kpi-subvalue,
.mbs-kpi-card.mbs-kpi-card--hero:not(#mbs-kpi-hero) .mbs-kpi-footer,
.mbs-kpi-card.mbs-kpi-card--hero:not(#mbs-kpi-hero) .mbs-kpi-target-text,
.mbs-kpi-card.mbs-kpi-card--hero:not(#mbs-kpi-hero) .mbs-kpi-unit,
.mbs-kpi-card.mbs-kpi-card--hero:not(#mbs-kpi-hero) .mbs-kpi-trend,
.mbs-kpi-card.mbs-kpi-card--hero:not(#mbs-kpi-hero) .mbs-kpi-trend-basis {
    color: color-mix(in srgb, var(--hero-ink) 85%, transparent); background: transparent;
}
.mbs-kpi-card.mbs-kpi-card--hero:not(#mbs-kpi-hero) .mbs-kpi-subvalue { border-color: transparent; }
.mbs-kpi-card.mbs-kpi-card--hero:not(#mbs-kpi-hero) .mbs-kpi-arrow--good,
.mbs-kpi-card.mbs-kpi-card--hero:not(#mbs-kpi-hero) .mbs-kpi-arrow--bad,
.mbs-kpi-card.mbs-kpi-card--hero:not(#mbs-kpi-hero) .mbs-kpi-spark { color: var(--hero-ink); }
.mbs-kpi-card.mbs-kpi-card--hero:not(#mbs-kpi-hero) .mbs-kpi-hit:focus-visible { outline-color: var(--hero-ink); }
.mbs-kpi-card.mbs-kpi-card--hero:not(#mbs-kpi-hero) .mbs-kpi-icon { background: color-mix(in srgb, var(--hero-ink) 16%, transparent); color: var(--hero-ink); }
.mbs-kpi-card.mbs-kpi-card--hero:not(#mbs-kpi-hero) .mbs-kpi-target { background: color-mix(in srgb, var(--hero-ink) 22%, transparent); }
.mbs-kpi-card.mbs-kpi-card--hero:not(#mbs-kpi-hero) .mbs-tile-chart {
    --mbs-primary: var(--hero-ink);
    --mbs-accent: var(--hero-ink);
    --mbs-success: var(--hero-ink);
    --mbs-warning: var(--hero-ink);
    --mbs-danger: var(--hero-ink);
    --mbs-text-3: color-mix(in srgb, var(--hero-ink) 70%, transparent);
    --mbs-surface-2: color-mix(in srgb, var(--hero-ink) 18%, transparent);
    --mbs-border: color-mix(in srgb, var(--hero-ink) 22%, transparent);
}
.mbs-wcard-stamp { margin-inline-start: auto; font-size: .7rem; color: var(--mbs-text-3); white-space: nowrap; }
.mbs-wcard-stamp--stale { color: var(--mbs-warning); }

/* KPI detail side panel (scrim-free; the dashboard stays visible) */
.mbs-kpi-panel { position: fixed; inset-block-start: var(--mbs-header-h, 46px); inset-block-end: var(--mbs-devbar-h, 24px); inset-inline-end: 0; inline-size: min(480px, 100%); z-index: 40; overflow-y: auto; padding: 16px; display: flex; flex-direction: column; gap: 12px; background: var(--mbs-card-bg); color: var(--mbs-text-1); border-inline-start: 1px solid var(--mbs-border); box-shadow: 0 0 16px color-mix(in srgb, var(--mbs-text-1) 20%, transparent); outline: none; }
.mbs-kpi-panel-head { display: flex; align-items: center; justify-content: space-between; gap: 8px; }
.mbs-kpi-panel-title { margin: 0; font-size: 1.1rem; font-weight: 600; }
.mbs-kpi-panel-value { font-size: 2rem; font-weight: 700; }
.mbs-kpi-panel-trend { font-size: .85rem; color: var(--mbs-text-2); }
.mbs-kpi-panel-table { inline-size: 100%; border-collapse: collapse; font-size: .85rem; }
.mbs-kpi-panel-caption { text-align: start; font-weight: 600; padding-block: 4px; color: var(--mbs-text-2); }
.mbs-kpi-panel-table th, .mbs-kpi-panel-table td { text-align: start; padding: 4px 6px; border-block-end: 1px solid var(--mbs-border); font-weight: normal; }
.mbs-kpi-panel-sub { display: block; font-size: .75rem; color: var(--mbs-text-3); }
.mbs-kpi-panel-note { font-size: .75rem; color: var(--mbs-text-3); }
.mbs-kpi-panel-actions { display: flex; justify-content: flex-end; }

.mbs-insight { padding: .5rem .75rem; }
.mbs-insight-list { list-style: none; margin: 0; padding: 0; display: grid; gap: .375rem; }
.mbs-insight-link { background: none; border: 0; padding: 0; font: inherit; color: var(--mbs-link, var(--mbs-text-1)); text-decoration: underline; cursor: pointer; text-align: start; }
.mbs-insight-empty { font-size: .875rem; color: var(--mbs-text-3); }

/* A card with a click or expand area keeps the chart above the stretched hit area, so chart hover and focus show tooltips. */
.mbs-kpi-card .mbs-kpi-chart { position: relative; z-index: 1; pointer-events: auto; }

/* Role tiles (RoleTilesView): the first tile is a full-width hero, the others fill a grid. */
.mbs-role-tiles { display: grid; grid-template-columns: repeat(auto-fill, minmax(220px, 1fr)); gap: 12px; }
.mbs-role-tiles > .mbs-role-tile { min-inline-size: 0; }
.mbs-role-tiles > .mbs-role-tile--hero { grid-column: 1 / -1; }
/* Numbers and signs keep their reading order inside right-to-left pages ("-413K" must not read "413K-"): an invisible
   left-to-right mark in front of the text makes the sign belong to the number, and the line keeps the page's alignment. */
.mbs-kpi-value::before, .mbs-kpi-subvalue::before, .mbs-kpi-trend::before, .mbs-kpi-panel-value::before, .mbs-kpi-panel-trend::before, .mbs-bar-value::before { content: "\200E"; }