/* ============================================================
 * STM Design System — Utility classes for complex Telerik components
 * ============================================================
 * For components too complex to wrap (deep sub-component trees),
 * apply these classes via the Telerik `Class` parameter:
 *
 *   <TelerikGrid Data="@data" Class="stm-c-grid" ...>
 *
 * These are NOT scoped — they must be loaded globally (after
 * kendo-bridge.css) to override Kendo/Telerik defaults.
 * ============================================================ */


/* ── Grid / Table ── */

.stm-c-grid .k-grid-header,
.stm-c-grid .k-grid-header-wrap {
    background-color: var(--stm-table-headerContainer);
}

.stm-c-grid .k-header,
.stm-c-grid th.k-header {
    background-color: var(--stm-table-headerContainer);
    color: var(--stm-table-headerText);
    padding: var(--stm-table-cellPaddingY) var(--stm-table-cellPaddingX);
    border-color: var(--stm-table-border);
    border-width: var(--stm-table-borderWidth);
    font-family: var(--stm-table-headerTypography-font-family);
    font-size: var(--stm-table-headerTypography-font-size);
    font-weight: var(--stm-table-headerTypography-font-weight);
    line-height: var(--stm-table-headerTypography-line-height);
}

.stm-c-grid td,
.stm-c-grid .k-table-td {
    padding: var(--stm-table-cellPaddingY) var(--stm-table-cellPaddingX);
    border-color: var(--stm-table-border);
    border-width: var(--stm-table-borderWidth);
    font-family: var(--stm-table-cellTypography-font-family);
    font-size: var(--stm-table-cellTypography-font-size);
    font-weight: var(--stm-table-cellTypography-font-weight);
    line-height: var(--stm-table-cellTypography-line-height);
}

.stm-c-grid .k-alt,
.stm-c-grid .k-table-alt-row {
    background-color: var(--stm-table-rowAlt);
}

.stm-c-grid .k-grid-content tr:hover,
.stm-c-grid .k-table-row:hover {
    background-color: var(--stm-table-rowHover);
}

.stm-c-grid .k-selected,
.stm-c-grid .k-table-row.k-selected {
    background-color: var(--stm-table-rowSelected);
}

.stm-c-grid {
    border-color: var(--stm-table-border);
    border-width: var(--stm-table-borderWidth);
}


/* ── Tabular numerals (BF-18) ──
 * Fixed-width, baseline-aligned figures for columns of numbers, amount /
 * currency fields, and any data that must line up vertically. Apply the helper
 * to a cell/element, or scope it to a grid's numeric columns:
 *
 *   <span class="stm-u-tabular-nums">1.234,56 kr.</span>
 *   <TelerikGrid Class="stm-c-grid stm-c-grid--tabular" ...>  (all body cells)
 *
 * TOK-46c CORRECTION: this used to say "React (CSS modules) references the same
 * token directly". It did not — StmPaginator and StmTextField hand-wrote
 * `font-variant-numeric: tabular-nums` and reached the token from nowhere. They
 * bind it now. The lesson is the comment, not the CSS: a note asserting what the
 * OTHER leg does is unverifiable from the file it sits in, and this one was wrong
 * for as long as anyone cared to read it.
 */
.stm-u-tabular-nums,
.stm-c-grid--tabular td,
.stm-c-grid--tabular .k-table-td {
    font-feature-settings: var(--stm-typography-numeric-tabular);
    /* progressive enhancement — the standardized property where supported */
    font-variant-numeric: tabular-nums lining-nums;
}

/* ── Uppercase micro-header (issue #49) — for raw-markup contexts that can't
 * compose StmTypography (consumer scoped .razor.css, story CSS). Same pair
 * the component prop owns: uppercase + TOK-10 wide tracking. ── */

.stm-u-microheader {
    text-transform: uppercase;
    letter-spacing: var(--stm-typography-letterSpacing-wide);
}

/* ── Focus ring (issue #53) — for raw-markup contexts that can't ride a
 * component's built-in ring (consumer scoped .razor.css links, inline
 * actions). The FLAT-control recipe on the full ring quartet; filled
 * controls on tinted surfaces should draw the box-shadow ring instead
 * (see the focusRingWidth token doc). ── */

.stm-u-focus-ring:focus-visible {
    outline: var(--stm-border-focusRingWidth) solid var(--stm-color-focusRing);
    outline-offset: var(--stm-border-focusRingOffset);
    border-radius: var(--stm-border-focusRingRadius);
}

/* ── Underline metrics (issue #53) — tokenized text-underline styling for
 * raw links/labels outside StmLink. ── */

.stm-u-underline {
    text-decoration: underline;
    text-underline-offset: var(--stm-typography-underlineOffset);
    text-decoration-thickness: var(--stm-typography-underlineThickness);
}

/* == StmInline collapseAt (issue #76) -- stack the row to a column below the
 * viewport token, children stretched full-width. GLOBAL css (not scoped):
 * StmInline renders via the builder (dynamic As) and can never receive a
 * CSS-isolation scope attribute. !important is required and deliberate: the
 * Blazor leg writes flex-direction/align-items as INLINE style, which no
 * stylesheet rule can beat otherwise. @media needs literals: TOK-21 ladder
 * (640/768/1024/1280) -- keep in sync with primitives.size.viewport. == */

@media (max-width: 639.98px) {
    .stm-l-inline--collapse-sm { flex-direction: column !important; align-items: stretch !important; }
}
@media (max-width: 767.98px) {
    .stm-l-inline--collapse-md { flex-direction: column !important; align-items: stretch !important; }
}
@media (max-width: 1023.98px) {
    .stm-l-inline--collapse-lg { flex-direction: column !important; align-items: stretch !important; }
}
@media (max-width: 1279.98px) {
    .stm-l-inline--collapse-xl { flex-direction: column !important; align-items: stretch !important; }
}

/* ── Hover-affordance cursor (issue #630) ──
 * An element whose ONLY affordance is that hovering reveals an explanation gets
 * `cursor: help`, the web's existing convention for exactly that. A tooltip that
 * nothing advertises is, for most users, not there.
 *
 * WHY `:where()`, WHICH IS THE WHOLE DESIGN. #630 asks for the overlap rule to be
 * stated rather than left to specificity order: an element that is both clickable
 * and explains itself must read as clickable. `:where()` contributes ZERO
 * specificity, so ANY rule that sets a cursor on the element — a button's
 * `pointer`, a disabled control's `not-allowed` — wins automatically, in every
 * load order, with no `!important` and nothing to remember. Pointer beating help
 * is a property of the selector here, not a convention someone has to uphold.
 *
 * DS components stamp this attribute themselves wherever they set an explanatory
 * native `title` (disabled select/list options, StmTruncate, collapsed sidebar
 * items), and StmTooltip stamps its target. It is also a public hook on purpose
 * (#630's own note): a consumer using a native `title` — because they cannot use
 * StmTooltip, or do not want to — gets the affordance by adding one attribute,
 * instead of hand-writing the rule locally.
 *
 * See spec/cursor-affordances.md for the rule this belongs to (#629/#630). */

:where([data-stm-hover-explain]) {
    cursor: help;
}