/* ============================================================
   Shared presentation utilities
   ============================================================

   The small set of presentation patterns that were repeated as inline styles in
   dozens of components in the application this came from. Each class reproduces one
   exact declaration group that appeared many times; together they are not a general
   utility framework, and new one-off styling belongs in the owning component's
   .razor.css instead.

   This file must be linked LAST, after the consuming application's own stylesheets
   and its scoped bundle. These classes replaced inline styles, which outranked every
   sheet; coming last is what preserves that. A component's own scoped rules still
   outrank them, which is intended.

   Why classes rather than component CSS: these patterns cross component
   boundaries (the same muted caption appears in the dashboard, admin and public
   pages), and most of them sit on MudBlazor components, whose markup a scoped
   rule cannot reach without ::deep. A global class works from either side.

   Load order: this file is linked last, so at equal specificity it wins against
   the other application stylesheets. Component-scoped rules still outrank it,
   which is intended - a component that styles its own element keeps control.

   The neutral ramps have since been unified, so the -alt variants these once needed
   are gone; each role has exactly one class.
   ============================================================ */

/* ── Text roles ─────────────────────────────────────────── */

.text-strong {
    color: var(--ds-text-primary);
}

.text-body {
    color: var(--ds-text-body);
}

.text-secondary {
    color: var(--ds-text-secondary);
}

.text-muted {
    color: var(--ds-text-muted);
}

/* ── Text roles with a weight, as they were written inline ── */

.text-strong-semibold {
    color: var(--ds-text-primary);
    font-weight: 600;
}

.text-body-medium {
    color: var(--ds-text-body);
    font-weight: 500;
}

.text-strong-bold {
    color: var(--ds-text-primary);
    font-weight: 700;
}

/* ── Field and metadata labels ──────────────────────────── */

/* The small uppercase caption above a value. Two sizes are in use; they are kept
   apart until the typography scale is normalised. */
.label-caps {
    color: var(--ds-text-muted);
    text-transform: uppercase;
    font-size: var(--ds-text-10);
}

.label-caps-sm {
    color: var(--ds-text-secondary);
    font-weight: 600;
    text-transform: uppercase;
    font-size: var(--ds-text-11);
}

/* ── Surfaces ───────────────────────────────────────────── */

/* An outlined panel with no background of its own. */
.surface-outline {
    border: 1px solid var(--ds-border);
    border-radius: 8px;
}

.surface-outline-lg {
    border: 1px solid var(--ds-border);
    border-radius: 12px;
}

/* ── Alignment ──────────────────────────────────────────── */

/* MudBlazor ships flex-1, cursor-pointer and the spacing scale, but not this one. */
.text-right {
    text-align: right;
}

/* ── Text roles with a size ─────────────────────────────── */

.text-strong-medium {
    color: var(--ds-text-primary);
    font-weight: var(--ds-weight-medium);
}

/* Secondary/muted text at body size - the metadata line under a title. */
.text-meta {
    color: var(--ds-text-secondary);
    font-size: var(--ds-text-13);
}

.text-meta-muted {
    color: var(--ds-text-muted);
    font-size: var(--ds-text-13);
}

/* ── Weight ─────────────────────────────────────────────────
   A weight on its own, with no colour attached, was the single most repeated
   inline declaration left in the application this came from: 25 attributes across
   eleven files, most
   of them on a MudText whose typography class sets a weight this then had to
   beat. These are global and this sheet is linked last, so they win on source
   order rather than on specificity - which is also why they stay this plain.
   A weight combined with a colour belongs to one of the text roles above.

   They carry a ds- prefix for a reason worth keeping. The unprefixed names are
   Bootstrap's, and seven places in the markup already say Class="fw-bold" -
   including a brand heading - written by someone who assumed Bootstrap
   was loaded. It is not, so those have always rendered at their inherited weight.
   Defining a bare .fw-bold here silently turned all seven bold, and the regression
   pass caught it. The prefix stops a utility this file adds from ever
   activating markup we did not write. */
.ds-fw-medium {
    font-weight: var(--ds-weight-medium);
}

.ds-fw-semibold {
    font-weight: var(--ds-weight-semibold);
}

.ds-fw-bold {
    font-weight: var(--ds-weight-bold);
}

/* The heading that opens a card section: three pages wrote this same declaration
   set inline. It lives here rather than in a component stylesheet because two of
   those pages are built entirely from MudBlazor components - there is no plain
   element of theirs in the tree, so nothing carries a CSS-isolation scope
   attribute and a scoped rule, ::deep or not, never matches. A global rule has no
   such requirement, and like the weights above it wins over MudBlazor's own
   typography class on source order. */
.ds-section-title {
    font-weight: var(--ds-weight-semibold);
    color: var(--ds-text-primary);
    margin-bottom: 16px;
}