/* ============================================================================
   dashboard.css - the owner dashboard (/super-admin/dashboard)

   Everything here is namespaced `odb-` (owner dashboard) so it cannot collide
   with the older dashboard rules still living in theme.css sections 17/17b,
   which other screens use.

   Colour, type, spacing, radius, shadow and z-index all come from the tokens
   in theme.css - there are no invented greys and no hard-coded type sizes.
   The ONE exception is the categorical series palette below, which is data
   colour rather than chrome (the design-system notes call this out): those
   five hues are a validated colourblind-safe set, not brand colours.

   Loaded after theme.css in index.html. Bump the ?v= when you change it -
   wwwroot CSS is not fingerprinted.
   ========================================================================== */

/* ---- 1. Page ------------------------------------------------------------ */

.odb {
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: var(--s-4);
    background: var(--c-bg);
    min-height: 100%;
}

/* Data colours. Five slots, assigned in fixed order and never cycled; a sixth
   method folds into "Other".

   These were five unrelated hues - a blue, an orange, a green, an amber and a
   pink - and they were the last place in the signed-in application where a
   colour outside the brand appeared. Categorical data is the one honest
   argument for extra hues, but five of them on a card next to a rose header
   is what made the dashboard read as a different product from the rest.

   They are now a single ramp from the brand rose to the brand gold. That
   keeps them inside the two-colour rule AND makes them safer for
   colour-vision deficiency than the old set, because they are separated by
   lightness as well as by hue - the ramp still reads as five distinct steps
   in greyscale, which the blue/green pair did not.

   Assigned in fixed order, so a legend printed yesterday still matches.
   Do not re-order, and if you add a sixth, extend the ramp rather than
   reaching for a new colour. */
.odb-series-1 { background: var(--auth-primary, #a8394a); }
.odb-series-2 { background: color-mix(in srgb, var(--auth-primary) 62%, var(--auth-accent)); }
.odb-series-3 { background: color-mix(in srgb, var(--auth-accent) 70%, var(--auth-shade)); }
.odb-series-4 { background: var(--auth-accent, #d6a12c); }
.odb-series-5 { background: color-mix(in srgb, var(--auth-accent) 45%, var(--auth-surface)); }

/* ---- 2. Toolbar --------------------------------------------------------- */

.odb-bar {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto;
    align-items: center;
    gap: var(--s-2) var(--s-4);
    padding: var(--s-3) var(--s-4);
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
}

.odb-bar__greeting {
    margin: 0;
    font-size: var(--fs-xs);
    color: var(--c-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.06em;
}

.odb-bar__title {
    margin: 0;
    font-size: var(--fs-xl);
    font-weight: var(--fw-semibold);
    color: var(--c-ink);
    line-height: var(--lh-tight);
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex-wrap: wrap;
}

.odb-bar__badge {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--c-accent-ink);
    background: var(--c-accent-soft);
    border: 1px solid var(--c-accent-line);
    border-radius: var(--r-full);
    padding: 2px 10px;
}

.odb-bar__controls {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex-wrap: wrap;
    justify-content: flex-end;
}

.odb-bar__meta {
    grid-column: 1 / -1;
    margin: 0;
    font-size: var(--fs-sm);
    color: var(--c-ink-3);
}

.odb-bar__meta strong { color: var(--c-ink); font-weight: var(--fw-semibold); }

.odb-dot-sep { color: var(--c-ink-4); padding: 0 2px; }

/* Branch picker */
.odb-scope {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-sm);
    color: var(--c-ink-3);
}

.odb-scope__select {
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-ink);
    background: var(--c-surface);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--r-full);
    padding: 6px 12px;
    max-width: 260px;
    cursor: pointer;
}

.odb-scope__select:focus-visible { outline: 2px solid var(--c-ring); outline-offset: 1px; }
.odb-scope__select--sm { font-weight: var(--fw-normal); padding: 4px 10px; }

/* Segmented period control */
.odb-seg {
    display: inline-flex;
    background: var(--c-surface-2);
    border: 1px solid var(--c-line);
    border-radius: var(--r-full);
    padding: 2px;
    gap: 2px;
}

.odb-seg__btn {
    font: inherit;
    font-size: var(--fs-sm);
    padding: 5px 12px;
    border: none;
    background: transparent;
    color: var(--c-ink-2);
    border-radius: var(--r-full);
    cursor: pointer;
    white-space: nowrap;
    transition: background var(--transition), color var(--transition);
}

.odb-seg__btn:hover { background: var(--c-surface); color: var(--c-ink); }
.odb-seg__btn:focus-visible { outline: 2px solid var(--c-ring); outline-offset: 1px; }

.odb-seg__btn.is-active {
    background: var(--c-primary);
    color: var(--c-on-primary);
    font-weight: var(--fw-semibold);
}

.odb-seg--sm .odb-seg__btn { font-size: var(--fs-xs); padding: 4px 10px; }

.odb-custom {
    grid-column: 1 / -1;
    display: flex;
    align-items: flex-end;
    gap: var(--s-3);
    flex-wrap: wrap;
    padding-top: var(--s-2);
    border-top: 1px solid var(--c-line-soft);
}

.odb-custom label {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-sm);
    color: var(--c-ink-3);
}

.odb-custom .form-control { width: auto; }
.odb-custom__hint { font-size: var(--fs-xs); color: var(--c-ink-4); }

/* ---- 3. Buttons --------------------------------------------------------- */

.odb-btn {
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    padding: 7px 14px;
    border-radius: var(--r-md);
    border: 1px solid var(--c-line-strong);
    background: var(--c-surface);
    color: var(--c-ink);
    cursor: pointer;
    text-decoration: none;
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
}

.odb-btn--primary {
    background: var(--c-primary);
    border-color: var(--c-primary);
    color: var(--c-on-primary);
}

.odb-btn--primary:hover { background: var(--c-primary-hover); color: var(--c-on-primary); }
.odb-btn:focus-visible { outline: 2px solid var(--c-ring); outline-offset: 2px; }

.odb-icon-btn {
    font: inherit;
    width: 34px;
    height: 34px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border-radius: var(--r-full);
    border: 1px solid var(--c-line);
    background: var(--c-surface);
    color: var(--c-ink-2);
    cursor: pointer;
}

.odb-icon-btn:hover { background: var(--c-surface-2); color: var(--c-ink); }
.odb-icon-btn:focus-visible { outline: 2px solid var(--c-ring); outline-offset: 1px; }
.odb-icon-btn--bare { border-color: var(--c-line); }
.odb-icon-btn.is-busy i { animation: odb-spin 900ms linear infinite; }

@keyframes odb-spin { to { transform: rotate(360deg); } }

.odb-linkbtn {
    font: inherit;
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    background: none;
    border: none;
    color: var(--c-primary);
    cursor: pointer;
    padding: var(--s-2) 0 0;
}

.odb-linkbtn:hover { text-decoration: underline; }

/* ---- 4. Welcome (new restaurant) ---------------------------------------- */

.odb-welcome {
    display: flex;
    gap: var(--s-5);
    flex-wrap: wrap;
    justify-content: space-between;
    padding: var(--s-4);
    background: var(--c-accent-soft);
    border: 1px solid var(--c-accent-line);
    border-radius: var(--r-lg);
}

.odb-welcome__title {
    margin: 0 0 var(--s-1);
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--c-accent-ink);
}

.odb-welcome__text p { margin: 0 0 var(--s-3); font-size: var(--fs-sm); color: var(--c-ink-2); }

.odb-welcome__bill {
    background: var(--c-surface);
    border: 1px dashed var(--c-accent-line);
    border-radius: var(--r-md);
    padding: var(--s-3) var(--s-4);
    font-size: var(--fs-sm);
    min-width: 260px;
    flex: 0 1 340px;
}

.odb-welcome__billhead { font-weight: var(--fw-semibold); margin-bottom: var(--s-2); }
.odb-welcome__row { display: flex; justify-content: space-between; gap: var(--s-3); color: var(--c-ink-2); }
.odb-welcome__row--total { font-weight: var(--fw-semibold); color: var(--c-ink); margin-top: var(--s-1); }
.odb-welcome__rule { border-top: 1px solid var(--c-line); margin: var(--s-2) 0; }

/* ---- 5. Grid ------------------------------------------------------------ */

.odb-grid {
    display: grid;
    grid-template-columns: repeat(12, minmax(0, 1fr));
    gap: var(--s-4);
    align-items: start;
}

.odb-col-3 { grid-column: span 3; min-width: 0; }
.odb-col-4 { grid-column: span 4; min-width: 0; }
.odb-col-6 { grid-column: span 6; min-width: 0; }
.odb-col-8 { grid-column: span 8; min-width: 0; }
.odb-col-12 { grid-column: 1 / -1; min-width: 0; }

/* A heading over a whole BLOCK of cards - "Buying and suppliers", "Stock and
   movement". The page is long enough now that the eye needs somewhere to land
   between the sales half and the trading half, and a row of cards with no
   heading over it reads as a continuation of the row above it.

   Sits outside .odb-grid, not in it: it is a heading for the grid that follows,
   and putting it in the grid as a full-width cell made it take a grid gap above
   AND below, which pushed every block a row further apart than it needed. */
.odb-blocktitle {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: var(--s-1) var(--s-3);
    margin: var(--s-3) 0 calc(var(--s-2) * -1);
    padding-bottom: var(--s-2);
    border-bottom: 1px solid var(--c-line);
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--c-ink);
}

.odb-blocktitle > i {
    color: var(--c-primary);
    font-size: var(--fs-base);
}

/* The one-line explanation of what the block is for. Quiet and on the same
   line where there is room, so the heading costs one row and not two. */
.odb-blocktitle__sub {
    font-size: var(--fs-xs);
    font-weight: var(--fw-regular, 400);
    color: var(--c-ink-3);
}

/* Laptop: the three-across row becomes two, the 8/4 split stacks. */
@media (max-width: 1400px) {
    .odb-col-3 { grid-column: span 6; }
}

@media (max-width: 1100px) {
    .odb-col-4, .odb-col-6, .odb-col-8 { grid-column: 1 / -1; }
    .odb-bar { grid-template-columns: minmax(0, 1fr); }
    .odb-bar__controls { justify-content: flex-start; }
}

@media (max-width: 640px) {
    .odb { padding: var(--s-3); gap: var(--s-3); }
    .odb-grid { gap: var(--s-3); }
    .odb-col-3 { grid-column: 1 / -1; }

    /* The period control scrolls sideways instead of wrapping; the scrollbar
       itself is hidden because the pill's own edge shows there is more. */
    .odb-seg { width: 100%; overflow-x: auto; scrollbar-width: none; }
    .odb-seg::-webkit-scrollbar { display: none; }
}

/* ---- 6. Card ------------------------------------------------------------ */

.odb-card {
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    padding: var(--s-4);
    box-shadow: var(--sh-sm);
    display: flex;
    flex-direction: column;
    gap: var(--s-3);
    min-width: 0;
    height: 100%;
}

.odb-card__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-3);
}

.odb-card__heading { min-width: 0; }

.odb-card__title {
    margin: 0;
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--c-ink);
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.odb-card__icon {
    width: 26px;
    height: 26px;
    border-radius: var(--r-sm);
    background: var(--c-surface-2);
    color: var(--c-ink-3);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: var(--fs-xs);
    flex: 0 0 auto;
}

.odb-card__sub {
    margin: 2px 0 0;
    font-size: var(--fs-xs);
    color: var(--c-ink-3);
}

.odb-card__body { display: flex; flex-direction: column; gap: var(--s-2); min-width: 0; }

/* A clickable card says so, and lifts on hover. */
.odb-card__more {
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--c-primary);
    white-space: nowrap;
    opacity: 0;
    transform: translateX(-4px);
    transition: opacity var(--transition), transform var(--transition);
}

.odb-card.is-clickable { cursor: pointer; }

.odb-card.is-clickable:hover,
.odb-card.is-clickable:focus-visible {
    border-color: var(--c-line-strong);
    box-shadow: var(--sh-md);
}

.odb-card.is-clickable:hover .odb-card__more,
.odb-card.is-clickable:focus-visible .odb-card__more { opacity: 1; transform: none; }
.odb-card.is-clickable:focus-visible { outline: 2px solid var(--c-ring); outline-offset: 2px; }

.odb-card--attention { border-color: var(--c-line-strong); }

/* A reload keeps the old figures, dimmed, instead of a skeleton. */
.odb-section { display: contents; }

.odb-section.is-reloading {
    display: block;
    opacity: 0.5;
    transition: opacity var(--transition);
}

.odb-stale-note {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    font-size: var(--fs-xs);
    color: var(--c-warning);
    margin-bottom: var(--s-2);
}

/* ---- 7. KPI tiles ------------------------------------------------------- */

.odb-kpis {
    display: grid;
    grid-template-columns: 1.4fr repeat(4, minmax(0, 1fr));
    gap: var(--s-3);
}

@media (max-width: 1400px) { .odb-kpis { grid-template-columns: repeat(3, minmax(0, 1fr)); } }

/* Two across on a phone rather than one: five full-width tiles is a lot of
   scrolling before the first chart. The sales tile keeps the full width -
   it is the one figure that can run to eight digits. */
@media (max-width: 760px) {
    .odb-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .odb-kpi--hero { grid-column: 1 / -1; }
}

.odb-kpi {
    position: relative;
    font: inherit;
    text-align: left;
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-sm);
    padding: var(--s-4);
    display: flex;
    flex-direction: column;
    gap: 6px;
    cursor: pointer;
    overflow: hidden;
    min-width: 0;
}

.odb-kpi:hover { border-color: var(--c-line-strong); box-shadow: var(--sh-md); }
.odb-kpi:focus-visible { outline: 2px solid var(--c-ring); outline-offset: 2px; }

.odb-kpi--hero {
    background: linear-gradient(180deg, var(--c-surface) 0%, var(--c-surface-2) 100%);
    border-color: var(--c-line-strong);
}

.odb-kpi__label {
    font-size: var(--fs-xs);
    color: var(--c-ink-3);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    display: flex;
    align-items: center;
    gap: var(--s-2);
}

.odb-kpi__value {
    font-size: var(--fs-2xl);
    font-weight: var(--fw-semibold);
    color: var(--c-ink);
    line-height: var(--lh-tight);
}

.odb-kpi--hero .odb-kpi__value { font-size: 30px; }
.odb-kpi__of { font-size: var(--fs-sm); color: var(--c-ink-3); font-weight: var(--fw-normal); margin-left: 4px; }

.odb-kpi__foot {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    flex-wrap: wrap;
    font-size: var(--fs-xs);
}

.odb-kpi__prev { color: var(--c-ink-3); }

.odb-spark { width: 100%; height: 34px; margin-top: var(--s-1); display: block; }
.odb-spark__area { fill: var(--c-primary); opacity: 0.10; }
.odb-spark__line { fill: none; stroke: var(--c-primary); stroke-width: 2; stroke-linejoin: round; stroke-linecap: round; }

/* Direction, stated in words as well as colour (the arrow is the second channel). */
.odb-delta {
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    padding: 2px 8px;
    border-radius: var(--r-full);
    white-space: nowrap;
}

.odb-delta--up { background: var(--c-success-soft); color: var(--c-success); }
.odb-delta--down { background: var(--c-danger-soft); color: var(--c-danger); }
.odb-delta--flat { background: var(--c-surface-2); color: var(--c-ink-3); }

/* ---- 8. Charts ---------------------------------------------------------- */

/* The hand-rolled bar chart that used to live here is gone. It was a grid of
   divs with a percentage height each, a hover tooltip and a fake axis - about
   a hundred lines of CSS to draw one chart type, and one chart type is what it
   could draw. The page now needs seven different kinds (area, line, column,
   bar, donut, pie, stacked), which it answers with Radzen's chart components:
   already a dependency of this project, MIT licensed, served from the app
   itself so there is no CDN and no offline gap, and they render real SVG with
   their own tooltips, legends and axes.

   What is left here is the FRAME a chart sits in, plus the handful of overrides
   that make Radzen's defaults look like the rest of this product.

   .odb-spark stays hand-drawn on purpose - it is a 220x34 path inside a KPI
   tile with no axis, no legend and no tooltip, and a charting component for
   that is more machinery than the thing it draws. */

.odb-chart-wrap {
    /* A chart is a block of its own, not a paragraph: the margin below is what
       separates it from the legend or the figures that explain it. */
    margin: 0 0 var(--s-2);
    min-width: 0;
}

/* A ring chart carries its total in the hole - otherwise the middle of the
   card is a hole, and the number the ring is a breakdown OF is nowhere on the
   card. Absolutely positioned over the centre and pointer-events: none, so it
   never eats a hover meant for a slice. */
.odb-chart-wrap--ring {
    position: relative;
}

.odb-ringtotal {
    position: absolute;
    inset: 0;
    margin: 0;
    display: flex;
    flex-direction: column;
    align-items: center;
    justify-content: center;
    gap: 1px;
    pointer-events: none;
    text-align: center;
}

.odb-ringtotal__n {
    font-size: var(--fs-md);
    font-weight: var(--fw-semibold);
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
}

.odb-ringtotal__l {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-ink-3);
}

/* ── Radzen chart overrides ──

   Radzen draws its own axes, legend and tooltip and gets its colours from
   --rz-* custom properties, which default-base.css defines. Re-pointing those
   at this product's tokens is all it takes for a chart to stop looking like a
   component library and start looking like part of the page - so the rules
   below set variables rather than fighting Radzen's selectors.

   Scoped to .odb so no other screen using a Radzen chart is affected. */
.odb .rz-chart {
    --rz-chart-axis-color: var(--c-line);
    --rz-chart-axis-label-color: var(--c-ink-3);
    --rz-chart-axis-font-size: 10.5px;
    --rz-chart-legend-font-size: 11px;
    --rz-chart-tooltip-background: var(--c-ink);
    --rz-chart-tooltip-color: var(--c-surface);
    --rz-chart-tooltip-font-size: 11.5px;
    --rz-chart-tooltip-border-radius: var(--r-md, 8px);

    /* Radzen sizes its own SVG from the Height parameter; this keeps it from
       forcing the card wider than its grid column on a narrow window. */
    width: 100% !important;
    max-width: 100%;
    font-family: inherit;
}

/* Gridlines are reference, not data: they should be the faintest thing in the
   plot. Radzen's default is the axis colour, which reads as a series. */
.odb .rz-chart .rz-grid-line,
.odb .rz-chart line.rz-grid-line {
    stroke: var(--c-line-soft);
}

/* Tooltip on a dark chip, matching the rest of the product rather than
   Radzen's light card, which disappears over a pale chart. */
.odb .rz-chart-tooltip-content {
    box-shadow: var(--sh-md, 0 8px 24px -8px rgba(0, 0, 0, 0.25));
    font-family: inherit;
}

/* Data labels (the pipeline card) are numbers ON the chart, so they take the
   page's tabular figures - otherwise 11 and 14 sit at different widths. */
.odb .rz-chart text {
    font-variant-numeric: tabular-nums;
}

.odb-chart__note {
    margin: var(--s-2) 0 0;
    font-size: var(--fs-xs);
    color: var(--c-ink-3);
}

.odb-chart__note strong { color: var(--c-ink); }

/* ---- 9. Attention list -------------------------------------------------- */

.odb-alerts { list-style: none; margin: 0; padding: 0; display: flex; flex-direction: column; gap: var(--s-2); }

.odb-alert {
    width: 100%;
    font: inherit;
    text-align: left;
    display: flex;
    align-items: flex-start;
    gap: var(--s-3);
    padding: var(--s-3);
    border-radius: var(--r-md);
    border: 1px solid var(--c-line);
    background: var(--c-surface);
    cursor: pointer;
    transition: border-color var(--transition), background var(--transition);
}

.odb-alert:hover { background: var(--c-surface-2); border-color: var(--c-line-strong); }
.odb-alert:focus-visible { outline: 2px solid var(--c-ring); outline-offset: 1px; }

.odb-alert__icon {
    width: 28px;
    height: 28px;
    border-radius: var(--r-full);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
    font-size: var(--fs-sm);
}

.odb-alert__body { display: flex; flex-direction: column; gap: 1px; min-width: 0; flex: 1; }
.odb-alert__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink); }
.odb-alert__detail { font-size: var(--fs-xs); color: var(--c-ink-3); }

.odb-alert__tag {
    font-size: 11px;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    padding: 2px 8px;
    border-radius: var(--r-full);
    white-space: nowrap;
    flex: 0 0 auto;
}

.odb-alert--critical { border-left: 3px solid var(--c-danger); }
.odb-alert--critical .odb-alert__icon { background: var(--c-danger-soft); color: var(--c-danger); }
.odb-alert--critical .odb-alert__tag { background: var(--c-danger-soft); color: var(--c-danger); }

.odb-alert--warning { border-left: 3px solid var(--c-warning); }
.odb-alert--warning .odb-alert__icon { background: var(--c-warning-soft); color: var(--c-warning); }
.odb-alert--warning .odb-alert__tag { background: var(--c-warning-soft); color: var(--c-warning); }

.odb-alert--info { border-left: 3px solid var(--c-info); }
.odb-alert--info .odb-alert__icon { background: var(--c-info-soft); color: var(--c-info); }
.odb-alert--info .odb-alert__tag { background: var(--c-info-soft); color: var(--c-info); }

.odb-allclear {
    display: flex;
    align-items: center;
    gap: var(--s-3);
    padding: var(--s-4);
    border-radius: var(--r-md);
    background: var(--c-success-soft);
    border: 1px solid var(--c-success-line);
    color: var(--c-success);
}

.odb-allclear i { font-size: var(--fs-xl); }
.odb-allclear strong { color: var(--c-ink); font-size: var(--fs-sm); }
.odb-allclear p { margin: 0; font-size: var(--fs-xs); color: var(--c-ink-3); }

/* ---- 10. Live blocks ---------------------------------------------------- */

.odb-live {
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: 11px;
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-success);
    background: var(--c-success-soft);
    border-radius: var(--r-full);
    padding: 1px 8px;
}

.odb-live__dot {
    width: 6px;
    height: 6px;
    border-radius: var(--r-full);
    background: var(--c-success);
    animation: odb-pulse 2s ease-in-out infinite;
}

@keyframes odb-pulse { 0%, 100% { opacity: 1; } 50% { opacity: 0.35; } }
@media (prefers-reduced-motion: reduce) { .odb-live__dot { animation: none; } .odb-icon-btn.is-busy i { animation: none; } }

.odb-block {
    width: 100%;
    font: inherit;
    text-align: left;
    display: flex;
    flex-direction: column;
    gap: 6px;
    padding: var(--s-3);
    border: 1px solid var(--c-line);
    border-radius: var(--r-md);
    background: var(--c-surface);
    cursor: pointer;
}

.odb-block:hover { background: var(--c-surface-2); border-color: var(--c-line-strong); }
.odb-block:focus-visible { outline: 2px solid var(--c-ring); outline-offset: 1px; }

.odb-block__head { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }
.odb-block__title { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink); }
.odb-block__value { font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--c-ink); }
.odb-block__of { font-size: var(--fs-xs); font-weight: var(--fw-normal); color: var(--c-ink-3); margin-left: 4px; }
.odb-block__hint { font-size: var(--fs-xs); color: var(--c-ink-3); display: block; }

.odb-meter {
    display: flex;
    height: 8px;
    border-radius: var(--r-full);
    background: var(--c-surface-2);
    overflow: hidden;
    gap: 2px;
}

.odb-meter__seg { display: block; height: 100%; }
.odb-meter__seg--busy { background: var(--c-primary); }
.odb-meter__seg--held { background: var(--c-info); }

.odb-keys { display: flex; flex-wrap: wrap; gap: var(--s-3); font-size: var(--fs-xs); color: var(--c-ink-3); }
.odb-key { display: inline-flex; align-items: center; gap: 5px; }

.odb-key__dot { width: 8px; height: 8px; border-radius: var(--r-full); display: inline-block; }
.odb-key__dot--busy { background: var(--c-primary); }
.odb-key__dot--held { background: var(--c-info); }
.odb-key__dot--free { background: var(--c-line-strong); }

.odb-line {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    padding: 4px 0;
    border-top: 1px solid var(--c-line-soft);
    font-size: var(--fs-sm);
}

.odb-line__name { color: var(--c-ink); font-weight: var(--fw-medium); }
.odb-line__value { font-weight: var(--fw-semibold); color: var(--c-ink); font-variant-numeric: tabular-nums; }

.odb-trio { display: grid; grid-template-columns: repeat(3, minmax(0, 1fr)); gap: var(--s-2); }

.odb-trio__cell {
    background: var(--c-surface-2);
    border-radius: var(--r-sm);
    padding: var(--s-2) 4px;
    text-align: center;
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.odb-trio__n { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--c-ink); }
.odb-trio__l { font-size: var(--fs-xs); color: var(--c-ink-3); }
.odb-trio__cell.is-cooking .odb-trio__n { color: var(--c-warning); }
.odb-trio__cell.is-ready .odb-trio__n { color: var(--c-success); }
.odb-trio__cell.is-out .odb-trio__n { color: var(--c-danger); }
.odb-trio--tight { margin-top: var(--s-2); }

/* ---- 11. Ranked list ---------------------------------------------------- */

.odb-rank { display: flex; flex-direction: column; gap: 3px; padding: var(--s-2) 0; border-top: 1px solid var(--c-line-soft); }
.odb-rank:first-of-type { border-top: none; padding-top: 0; }
.odb-rank__top { display: flex; align-items: baseline; justify-content: space-between; gap: var(--s-2); }

.odb-rank__name {
    font-size: var(--fs-sm);
    font-weight: var(--fw-medium);
    color: var(--c-ink);
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    min-width: 0;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.odb-rank__no {
    width: 18px;
    height: 18px;
    border-radius: var(--r-sm);
    background: var(--c-surface-2);
    color: var(--c-ink-3);
    font-size: 11px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: 0 0 auto;
}

.odb-rank__value { font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink); white-space: nowrap; }
.odb-rank__sub { font-size: var(--fs-xs); color: var(--c-ink-3); }

.odb-rank__track { height: 6px; background: var(--c-surface-2); border-radius: var(--r-full); overflow: hidden; }
.odb-rank__track span { display: block; height: 100%; background: var(--c-primary); border-radius: var(--r-full); }

/* ---- 12. Legend --------------------------------------------------------- */


.odb-legend { list-style: none; margin: var(--s-2) 0 0; padding: 0; display: flex; flex-direction: column; gap: 6px; }

.odb-legend li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-2);
    font-size: var(--fs-sm);
}

.odb-legend__key { display: inline-flex; align-items: center; gap: var(--s-2); color: var(--c-ink-2); min-width: 0; }
.odb-legend__swatch { width: 10px; height: 10px; border-radius: 3px; flex: 0 0 auto; }
.odb-legend__value { font-weight: var(--fw-semibold); color: var(--c-ink); white-space: nowrap; font-variant-numeric: tabular-nums; }

/* ---- 13. Fact list, figures, chips -------------------------------------- */

.odb-facts { margin: 0; display: flex; flex-direction: column; }

.odb-facts > div {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-3);
    padding: 7px 0;
    border-top: 1px solid var(--c-line-soft);
}

.odb-facts > div:first-child { border-top: none; }
.odb-facts dt { font-size: var(--fs-sm); color: var(--c-ink-3); margin: 0; }
.odb-facts dd { margin: 0; font-size: var(--fs-sm); font-weight: var(--fw-semibold); color: var(--c-ink); text-align: right; }
.odb-facts > div.is-flagged dd { color: var(--c-warning); }

.odb-figure { font-size: var(--fs-xl); font-weight: var(--fw-semibold); color: var(--c-ink); line-height: var(--lh-tight); }
.odb-figure__sub { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--c-ink-3); }

.odb-flag {
    margin: var(--s-2) 0 0;
    font-size: var(--fs-xs);
    color: var(--c-ink-3);
    display: flex;
    align-items: center;
    gap: 6px;
}

.odb-flag--warn { color: var(--c-warning); }

.odb-headcount { display: flex; align-items: center; gap: var(--s-4); flex-wrap: wrap; }
.odb-headcount__n { display: flex; flex-direction: column; }

.odb-chips { display: flex; flex-wrap: wrap; gap: var(--s-2); }

.odb-chip {
    font-size: var(--fs-xs);
    color: var(--c-ink-2);
    background: var(--c-surface-2);
    border: 1px solid var(--c-line);
    border-radius: var(--r-full);
    padding: 3px 10px;
}

.odb-chip strong { color: var(--c-ink); margin-left: 4px; }

.odb-pending { display: grid; grid-template-columns: repeat(4, minmax(0, 1fr)); gap: var(--s-2); margin-top: var(--s-2); }

@media (max-width: 560px) { .odb-pending { grid-template-columns: repeat(2, minmax(0, 1fr)); } }

.odb-pending__cell {
    background: var(--c-surface-2);
    border-radius: var(--r-sm);
    padding: var(--s-2);
    display: flex;
    flex-direction: column;
    gap: 2px;
}

.odb-pending__cell.is-pending { background: repeating-linear-gradient(45deg, var(--c-surface-2), var(--c-surface-2) 6px, var(--c-surface) 6px, var(--c-surface) 12px); }
.odb-pending__n { font-size: var(--fs-md); font-weight: var(--fw-semibold); color: var(--c-ink); }
.odb-pending__cell.is-pending .odb-pending__n { color: var(--c-ink-4); }
.odb-pending__l { font-size: var(--fs-xs); color: var(--c-ink-3); }

.odb-note { margin: var(--s-2) 0 0; font-size: var(--fs-xs); color: var(--c-ink-3); display: flex; gap: 6px; align-items: flex-start; }

/* ---- 14. Tables --------------------------------------------------------- */

.odb-tablewrap { overflow: auto; max-height: 420px; border: 1px solid var(--c-line); border-radius: var(--r-md); }

.odb-table { width: 100%; border-collapse: collapse; font-size: var(--fs-sm); }

.odb-table thead th {
    position: sticky;
    top: 0;
    z-index: var(--z-sticky);
    background: var(--c-surface-2);
    color: var(--c-ink-3);
    font-size: var(--fs-xs);
    font-weight: var(--fw-semibold);
    text-transform: uppercase;
    letter-spacing: 0.04em;
    text-align: left;
    padding: var(--s-2) var(--s-3);
    white-space: nowrap;
    box-shadow: inset 0 -1px 0 var(--c-line);
}

.odb-table td { padding: var(--s-2) var(--s-3); border-top: 1px solid var(--c-line-soft); color: var(--c-ink-2); vertical-align: middle; }
.odb-table tbody tr:hover { background: var(--c-surface-2); }
.odb-table .is-num { text-align: right; font-variant-numeric: tabular-nums; white-space: nowrap; }
.odb-table .is-wide { white-space: normal; min-width: 220px; max-width: 420px; color: var(--c-ink-2); }
.odb-table.is-reloading { opacity: 0.5; }

.odb-th-sort {
    font: inherit;
    color: inherit;
    text-transform: inherit;
    letter-spacing: inherit;
    background: none;
    border: none;
    padding: 0;
    cursor: pointer;
    display: inline-flex;
    align-items: center;
    gap: 5px;
}

.odb-th-sort:hover { color: var(--c-ink); }
.odb-th-sort:focus-visible { outline: 2px solid var(--c-ring); outline-offset: 2px; }
.odb-th-sort__idle { opacity: 0.35; }

.odb-rowlink { cursor: pointer; }
.odb-rowlink:focus-visible { outline: 2px solid var(--c-ring); outline-offset: -2px; }
.odb-branchname { font-weight: var(--fw-semibold); color: var(--c-ink); margin-right: var(--s-2); }
.odb-cellvalue { display: block; font-weight: var(--fw-semibold); color: var(--c-ink); }

.odb-minibar { display: block; height: 4px; border-radius: var(--r-full); background: var(--c-surface-2); overflow: hidden; margin-top: 3px; min-width: 60px; }
.odb-minibar span { display: block; height: 100%; background: var(--c-primary); border-radius: var(--r-full); }
.odb-minibar--occ { margin: 0 0 3px; max-width: 120px; }
.odb-minibar--occ span { background: var(--c-info); }

.odb-floorcell { display: flex; flex-direction: column; min-width: 140px; }
.odb-floorcell__text { font-size: var(--fs-xs); color: var(--c-ink-3); white-space: nowrap; }

/* ---- 15. Badges & small type -------------------------------------------- */

.odb-badge {
    display: inline-block;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    padding: 2px 8px;
    border-radius: var(--r-full);
    white-space: nowrap;
}

.odb-badge--success { background: var(--c-success-soft); color: var(--c-success); }
.odb-badge--warning { background: var(--c-warning-soft); color: var(--c-warning); }
.odb-badge--danger { background: var(--c-danger-soft); color: var(--c-danger); }
.odb-badge--info { background: var(--c-info-soft); color: var(--c-info); }
.odb-badge--neutral { background: var(--c-surface-2); color: var(--c-ink-3); }

.odb-rating { font-weight: var(--fw-semibold); color: var(--c-accent-ink); white-space: nowrap; }
.odb-rating.is-low { color: var(--c-danger); }

.odb-muted { color: var(--c-ink-4); font-weight: var(--fw-normal); }
.odb-warn { color: var(--c-warning); font-weight: var(--fw-semibold); }

.odb-empty {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: var(--s-2);
    padding: var(--s-8) var(--s-4);
    color: var(--c-ink-3);
    font-size: var(--fs-sm);
    text-align: center;
}

.odb-empty i { font-size: var(--fs-xl); color: var(--c-ink-4); }
.odb-empty--inline { flex-direction: row; justify-content: center; padding: var(--s-5) var(--s-3); }
.odb-empty--inline i { font-size: var(--fs-md); }

.odb-sortby { display: flex; align-items: center; gap: var(--s-2); font-size: var(--fs-xs); color: var(--c-ink-3); }

/* ---- 16. Drill-down dialog ---------------------------------------------- */

.odb-modal-backdrop {
    position: fixed;
    inset: 0;
    background: color-mix(in srgb, var(--auth-shade) 45%, transparent);
    z-index: var(--z-backdrop);
}

.odb-modal {
    position: fixed;
    z-index: var(--z-modal);
    top: 50%;
    left: 50%;
    transform: translate(-50%, -50%);
    width: min(1100px, calc(100vw - 2 * var(--s-5)));
    max-height: calc(100vh - 2 * var(--s-6));
    background: var(--c-surface);
    border: 1px solid var(--c-line);
    border-radius: var(--r-lg);
    box-shadow: var(--sh-lg);
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

.odb-modal:focus { outline: none; }

.odb-modal__head {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-4);
    border-bottom: 1px solid var(--c-line);
}

.odb-modal__title { margin: 0; font-size: var(--fs-lg); font-weight: var(--fw-semibold); color: var(--c-ink); }
.odb-modal__sub { margin: 2px 0 0; font-size: var(--fs-xs); color: var(--c-ink-3); }

.odb-modal__tools {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--s-3);
    padding: var(--s-3) var(--s-4);
    flex-wrap: wrap;
    border-bottom: 1px solid var(--c-line-soft);
}

.odb-modal__note {
    margin: 0;
    padding: var(--s-2) var(--s-4);
    font-size: var(--fs-xs);
    color: var(--c-ink-3);
    background: var(--c-surface-2);
    display: flex;
    align-items: center;
    gap: 6px;
}

.odb-modal__body { overflow: auto; flex: 1; padding: 0 var(--s-4) var(--s-3); }
.odb-modal__foot { padding: var(--s-2) var(--s-4) var(--s-3); border-top: 1px solid var(--c-line); }

.odb-search {
    display: inline-flex;
    align-items: center;
    gap: var(--s-2);
    border: 1px solid var(--c-line-strong);
    border-radius: var(--r-full);
    padding: 4px 12px;
    color: var(--c-ink-3);
    background: var(--c-surface);
    min-width: 220px;
}

.odb-search input { font: inherit; font-size: var(--fs-sm); border: none; outline: none; background: transparent; color: var(--c-ink); width: 100%; }
.odb-search:focus-within { border-color: var(--c-accent-line); box-shadow: 0 0 0 3px var(--c-ring); }

.odb-skel-row { height: 34px; margin-top: var(--s-2); }

@media (max-width: 640px) {
    .odb-modal { width: 100vw; height: 100vh; max-height: 100vh; border-radius: 0; top: 0; left: 0; transform: none; }
}


/* ---- 17. Trading blocks ------------------------------------------------- */
/*
   Everything below serves the buying, stock and money blocks added on
   2026-09-24. Same tokens, same namespace, same rule as the rest of the file:
   no invented greys, no hard-coded type sizes, and the five data colours are
   the only literal hues.
*/

/* ── A row of figures under a chart ──

   Two or three numbers that explain the chart above them. A row and not a
   stack, because they are read against each other; and a grid rather than
   flex, so the numbers line up in columns whatever their width. */
.odb-statrow {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(96px, 1fr));
    gap: var(--s-2) var(--s-3);
    margin-top: var(--s-2);
    padding-top: var(--s-2);
    border-top: 1px solid var(--c-line-soft);
}

.odb-stat {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.odb-stat__n {
    font-size: var(--fs-base);
    font-weight: var(--fw-semibold);
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
}

.odb-stat__l {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-xs);
    color: var(--c-ink-3);
}

/* ── One ratio, as a bar ──

   For a figure whose meaning is "out of something else" (goods bought against
   sales). Deliberately not a chart: one number against one whole is a bar, and
   a chart component for it would be a legend and an axis around a single
   value. */
.odb-ratio {
    margin-top: var(--s-3);
}

.odb-ratio__head {
    display: flex;
    align-items: baseline;
    justify-content: space-between;
    gap: var(--s-2);
    font-size: var(--fs-xs);
    color: var(--c-ink-3);
}

.odb-ratio__head strong {
    font-size: var(--fs-sm);
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
}

.odb-ratio__track {
    margin-top: 5px;
    height: 8px;
    border-radius: var(--r-full);
    background: var(--c-surface-2);
    overflow: hidden;
}

.odb-ratio__track > span {
    display: block;
    height: 100%;
    border-radius: var(--r-full);
    background: var(--c-primary);
}

/* ── Movements list (transfers, returns, write-offs) ──

   Each row is a button onto its own rows, so it gets a real hover and a real
   focus ring. The value is right-aligned and tabular: these are money figures
   being compared down a column. */
.odb-movelist {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.odb-move {
    display: flex;
    align-items: center;
    gap: var(--s-2);
    width: 100%;
    padding: 8px 10px;
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-md, 8px);
    background: var(--c-surface);
    text-align: left;
    cursor: pointer;
    transition: background var(--transition), border-color var(--transition);
}

.odb-move:hover {
    background: var(--c-surface-2);
    border-color: var(--c-line);
}

.odb-move:focus-visible {
    outline: 2px solid var(--c-primary);
    outline-offset: 2px;
}

.odb-move__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 26px;
    height: 26px;
    border-radius: var(--r-md, 8px);
    background: var(--c-primary-soft);
    color: var(--c-primary);
    font-size: 11px;
}

/* A loss is not the same kind of event as a transfer, so it is not the same
   colour. The row itself stays neutral - only the icon and the amount carry
   it, because a whole row tinted red reads as an error the user has caused. */
.odb-move.is-bad .odb-move__icon {
    background: var(--c-danger-soft);
    color: var(--c-danger);
}

.odb-move.is-bad .odb-move__value {
    color: var(--c-danger);
}

.odb-move__body {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.odb-move__label {
    font-size: var(--fs-sm);
    color: var(--c-ink);
}

.odb-move__sub {
    font-size: var(--fs-xs);
    color: var(--c-ink-3);
}

.odb-move__value {
    flex: 0 0 auto;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
}

/* ── The two books, side by side ── */
.odb-books {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(120px, 1fr));
    gap: var(--s-3);
}

.odb-book {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--s-2) var(--s-3);
    border: 1px solid var(--c-line-soft);
    border-radius: var(--r-lg);
    background: var(--c-surface-2);
    min-width: 0;
}

.odb-book__n {
    font-size: var(--fs-lg);
    font-weight: var(--fw-semibold);
    color: var(--c-ink);
    line-height: 1.1;
    font-variant-numeric: tabular-nums;
}

.odb-book__l {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--c-ink-3);
}

.odb-book__facts {
    display: flex;
    flex-direction: column;
    gap: 1px;
    margin-top: 4px;
    font-size: var(--fs-xs);
    color: var(--c-ink-2);
}

/* ── An ageing ladder read as figures ──

   Under the chart, in the same order as the columns. The chart shows the
   shape; this shows the amounts, because "roughly two thirds of a column" is
   not a number anybody can act on. */
.odb-bandrow {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: var(--s-2);
    margin-top: var(--s-2);
    padding-top: var(--s-2);
    border-top: 1px solid var(--c-line-soft);
}

.odb-band {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.odb-band__n {
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-ink);
    font-variant-numeric: tabular-nums;
}

.odb-band__l {
    font-size: 10px;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--c-ink-3);
}

/* The oldest band with money in it is the one worth chasing, so it says so. */
.odb-band.is-bad .odb-band__n { color: var(--c-danger); }

@media (max-width: 560px) {
    .odb-bandrow { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

/* ── "Not in use yet" ──

   The strip at the foot of the page. This is the piece that replaces empty
   cards: everything the restaurant has not started using is one line here
   instead of a heading, a border and several hundred pixels of nothing.

   Styled as a quiet aside, NOT as a warning: none of it is a problem. Surface-2
   rather than a card, a dashed edge rather than a solid one, and no colour
   except the link. */
.odb-quiet {
    padding: var(--s-3) var(--s-4);
    border: 1px dashed var(--c-line);
    border-radius: var(--r-lg);
    background: var(--c-surface-2);
}

.odb-quiet__head {
    margin-bottom: var(--s-2);
}

.odb-quiet__title {
    display: flex;
    align-items: center;
    gap: 7px;
    margin: 0;
    font-size: var(--fs-sm);
    font-weight: var(--fw-semibold);
    color: var(--c-ink-2);
}

.odb-quiet__title > i { color: var(--c-ink-4); font-size: 11px; }

.odb-quiet__sub {
    margin: 3px 0 0;
    font-size: var(--fs-xs);
    color: var(--c-ink-3);
    max-width: 80ch;
}

/* Two columns where there is room: the list is short lines, and one column of
   them down a 1400px page is a lot of white space to the right of each. */
.odb-quiet__list {
    list-style: none;
    margin: 0;
    padding: 0;
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(320px, 1fr));
    gap: 2px var(--s-4);
}

.odb-quiet__item {
    display: flex;
    align-items: flex-start;
    gap: var(--s-2);
    padding: 7px 0;
    border-top: 1px solid var(--c-line-soft);
}

.odb-quiet__icon {
    flex: 0 0 auto;
    display: grid;
    place-items: center;
    width: 22px;
    height: 22px;
    margin-top: 1px;
    border-radius: var(--r-md, 8px);
    background: var(--c-surface);
    border: 1px solid var(--c-line-soft);
    color: var(--c-ink-4);
    font-size: 10px;
}

.odb-quiet__text {
    flex: 1 1 auto;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.odb-quiet__name {
    font-size: var(--fs-sm);
    color: var(--c-ink);
}

.odb-quiet__why {
    font-size: var(--fs-xs);
    color: var(--c-ink-3);
}

.odb-quiet__go {
    flex: 0 0 auto;
    align-self: center;
    display: inline-flex;
    align-items: center;
    gap: 5px;
    font-size: var(--fs-xs);
    font-weight: var(--fw-medium);
    color: var(--c-primary);
    text-decoration: none;
    white-space: nowrap;
}

.odb-quiet__go:hover { text-decoration: underline; }
.odb-quiet__go i { font-size: 9px; }

/* ---- 18. Small additions to shared pieces ------------------------------- */

/* A meter with three bands (stock health) needs more height than the two-band
   floor meter to be readable, and a track that shows through where a band is
   zero. */
.odb-meter--tall {
    height: 10px;
    margin-top: var(--s-3);
}

.odb-meter__seg--ok { background: var(--c-success, #916723); }
.odb-meter__seg--bad { background: var(--c-danger); }

/* A note that is context rather than a caveat: no icon, no tint, just a quiet
   line. The existing .odb-note carries an information icon and reads as "be
   aware of this", which is too much for "biggest spenders". */
.odb-note--quiet {
    margin: var(--s-2) 0 4px;
    padding: 0;
    border: 0;
    background: none;
    font-size: var(--fs-xs);
    color: var(--c-ink-3);
}

/* The counterpart to .odb-warn, which already existed on its own. */
.odb-ok { color: var(--c-success, #916723); }

/* An inline empty state may now carry a link to the screen that would fill it -
   it is the difference between "nothing here" and "here is how to start". */
.odb-empty--inline a {
    margin-left: 4px;
    color: var(--c-primary);
    font-weight: var(--fw-medium);
}

/* A legend row whose key has no swatch (the pipeline stages, the top-party
   lists) still needs its name to give way before the number does. */
.odb-legend__key {
    min-width: 0;
    overflow-wrap: anywhere;
}