// W-22363442 — Lumina list row typography for legacy layoutType tokens.
// Replaces the inline styles `GroupedListRow.getStyleByItemType()` used to
// write under Lumina. Existing contracts rendering legacy tokens (itemIdentifier,
// itemSecondary, itemValue, itemLabel, ...) now get consistent Lumina typography
// via CSS, without per-contract changes.
//
// ===========================================================================
// MODE ARCHITECTURE — chrome vs metrics split
// ===========================================================================
//
// Two CSS scopes correspond to the uxMode rendering modes:
//
//   .List--lumina       — Lumina chrome. Applies in BOTH compatibility and
//                         lumina mode. Carries colors, borders, backgrounds,
//                         selection state — anything that changes "the look"
//                         without affecting content-area widths or font metrics.
//
//   .List--lumina-full  — Lumina metrics. Applies in lumina mode ONLY.
//                         Carries font-size, font-weight, font-family, paddings,
//                         widths, structural display rules — anything that can
//                         shift contract column widths or text advance.
//
// Compatibility mode (`.List--lumina` only) lets contracts keep their legacy em
// base and Fira-derived widths, while picking up the new Lumina look. Legacy
// inline styles from `getStyleByItemType()` continue to provide metrics in
// compatibility mode; CSS provides chrome.
//
// Lumina mode (both classes) applies the complete Lumina rendering — chrome AND
// metrics — for contracts authored at schemaVersion ≥ 2 that have signed up to
// the new sizing/typography.
//
// ===========================================================================
// PER-TOKEN RULE PATTERN
// ===========================================================================
//
// Per-token rules use bare `.<token>` selectors (e.g. `.itemLabel`) scoped under
// `.List--lumina` or `.List--lumina-full`. These match BOTH placements the
// framework emits:
//   - on the cell itself (`<td class="ListColumn itemLabel">`) for single-token
//     `<Col layoutType="X">` columns, and
//   - on an inner `.ListRow` div (`<div class="ListRow itemLabel">`) for
//     stacked-row columns where multiple `<Row layoutType="X">` share one cell
//     (e.g. Customer_ReviewCaptureLumina contact tab, CockpitList rows).
// The framework owns these class names and only applies them inside list cells,
// so the bare selector is safe and avoids the `td.ListColumn.X, td.ListColumn .X`
// duplication earlier iterations carried.
//
// ===========================================================================
// COCKPIT TOKENS — legacy sizes
// ===========================================================================
//
// `menuItemIdentifierCockpit`, `itemSecondaryCockpit`, `itemImportantValueCockpit`
// are pinned at LEGACY sizes (NOT promoted). An earlier iteration up-sized them
// (identifier 14→16/Semibold, secondary 12→14) per a UX proposal, but because cockpit
// columns are authored with em widths, the larger font re-coupled and widened ~39
// contract columns by ~17%. To stay compatible they now match legacy:
//   - menuItemIdentifierCockpit: 14px Light   (legacy _itemIdentFont _FontLight14)
//   - itemSecondaryCockpit:      12px Regular (legacy _secondaryFont _FontRegular12)
//   - itemImportantValueCockpit: 14px Medium  (legacy _itemImpFont _FontMedium14)
// Phone shrinks the cockpit tokens further (13/11/12px) via an `@media @phone` block,
// mirroring legacy's `list.Phone._cockpitRow` config. Color promotion to accent-2 (if
// any) lives in the `.List--lumina` chrome scope. If the UX promotion is revived later,
// it must be paired with a contract migration off em widths for the affected columns.
//
// ===========================================================================
// SLDS TOKEN ALIGNMENT
// ===========================================================================
//
// SLDS has exact tokens for 12px (scale-neg-1), 14px (scale-1), 16px (scale-2).
// Legacy uses 15px (Name/Title family) and 11px (itemLabel) for which SLDS has
// NO matching token — kept as literal pixel values to preserve legacy fidelity
// (no shrink), with a comment per rule explaining the gap.
//
// `*Small` suffix variants render at the SAME size as their parent token; legacy's
// inline path treated the Small branches as color-only overrides on top of the
// parent's font, so e.g. `itemValueSmall` rendered at 14px Light, not at 12px.
// NOTE: legacy `getStyleByItemType` matched layoutTypes by `indexOf` (substring), but
// CSS class selectors match EXACTLY. So every variant that should share a parent's size
// (itemValueVerySmall, itemNameSmall, the *Small forms) must be listed explicitly in the
// relevant selector group below — it will NOT inherit the parent's size just by sharing a
// prefix. (itemNameSecondary is the exception: its legacy branch is color-only, so it
// inherits the cell base rather than the itemName 15px size — it is intentionally left out
// of the itemName group; see the per-rule note there.)
//
// NOTE: `font-size` is intentionally NOT set on `td.ListColumn` itself in either
// scope. Setting it on the cell changes the cell's em base, which shrinks every
// contract `<Col width="X em">` and sub-column `width="X em"` proportionally
// (e.g. legacy ~17.3px → 16px = 8% narrower). Contracts with tight em-based
// widths (e.g. `Customer_ReviewCapture*` ContactPartnerList: `<Col width="2.1em">`
// for Phone/Mobile labels) lose enough headroom that "Phone"/"Mobile" mid-word
// breaks. Keeping font-size off the cell lets the upstream cascade decide the
// em base, matching legacy. Per-token font-size rules below apply to the inner
// content (or to the cell when the layoutType lives on the cell), neither of
// which retroactively changes a parent cell's em base.

// ===========================================================================
// CHROME — applies in both compatibility and lumina mode
// ===========================================================================
table.List.List--lumina {

    // Row background (unselected). Replaces inline write from `listv2._row._backgroundColor`
    // / `listv2._cockpitRow._backgroundColor` (both = white). Covers GroupedList +
    // EmbeddedList + CockpitList Lumina rows uniformly. Selected row background is set
    // separately by `embeddedlist.less:13-18` and `fw-components.less:2851-2853` (blue-95).
    tr:not(.GroupRow):not(.Selected) {
        background-color: var(--slds-g-color-surface-container-1); // #FFFFFF
    }

    // Row separator. Replaces inline write from `listv2._row._itemSeparatorColor` /
    // `listv2._cockpitRow._itemSeparatorColor` (both = palette-neutral-80). Hoisted out
    // of `.GroupedList--lumina` scope (where fw-components.less declares it for GroupedList
    // only) so EmbeddedList + CockpitList get the same separator color.
    tr:not(.GroupRow) {
        border-bottom: 1px solid var(--slds-g-color-border-1); // palette-neutral-80 (#C9C9C9)
    }

    // Default text color for cells. Mirrors the body of `getStyleByItemType()`'s
    // start-with-default pattern. Per-token rules below override where the token
    // has a different color.
    td.ListColumn {
        color: var(--slds-g-color-on-surface-2);
    }

    // Column-header (thead) chrome — background + text color. Replaces the inline
    // headStyle writes (`listv2._table.{background,fontColor}`) that table.js used to
    // emit on `<thead>`. Placed in this form-agnostic scope (not the GroupedList-only
    // block in fw-components.less) so EmbeddedList + CockpitList headers get it too.
    // Applies in BOTH compatibility and lumina mode, matching the body chrome split.
    // background = surface-container-1; color = on-surface-2 (= textDefaultColor).
    thead tr td {
        background-color: var(--slds-g-color-surface-container-1);
        color: var(--slds-g-color-on-surface-2);
    }

    // Dim tier — labels, secondaries, sub-headings (on-surface-1 / Neutral 40).
    // SLDS roles: "body, placeholder, field labels, sub-headings". Production
    // Salesforce theme already renders these as mid gray (Color12 = #77828C);
    // on-surface-1 is the SLDS-canonical equivalent.
    .itemLabel,
    .itemSecondary,
    .itemSecondarySmall,
    .itemSecondaryCockpit,
    .itemSecondaryCenter,
    .itemNameSecondary,
    .itemSubTitle {
        color: var(--slds-g-color-on-surface-1);
    }

    // Title tier — strongest contrast (on-surface-3 / Blue 15 #03234D).
    // SLDS role: "titles, text/icons where strong contrast is needed".
    .itemTitle {
        color: var(--slds-g-color-on-surface-3);
    }

    // Note: legacy emphasis tokens (menuItemIdentifier*, itemImportantValue*) are
    // intentionally NOT promoted to accent-2 here. The production Salesforce theme
    // overrides their FW default Color4 teal to plain dark navy (#FontColor#), so
    // mapping to accent-2 would introduce link-colored emphasis that production
    // never had. They inherit the cell default (on-surface-2). New Lumina-native
    // accent tokens (itemMeta*, *Action) live in itemType.less and are unaffected.

    // Selected row — background-only highlight, no text inversion.
    // Per-token defeat block enumerating each tier so legacy descendant rules
    // (`.Selected .ListRow { color: white }` in fw-components.less, the
    // `.Selected { .PrimeColorScheme(); }` mixin in abstract-components.less)
    // can't bleed through. Background-only matches production behavior — the
    // Salesforce theme already drops most pre-Lumina selection inversions.
    tr.Selected:not(.GroupRow) {
        background-color: var(--slds-g-color-palette-blue-95);

        // dim tier
        .itemLabel,
        .itemSecondary, .itemSecondarySmall, .itemSecondaryCockpit, .itemSecondaryCenter,
        .itemNameSecondary, .itemSubTitle {
            color: var(--slds-g-color-on-surface-1);
        }

        // title tier
        .itemTitle {
            color: var(--slds-g-color-on-surface-3);
        }

        // body / catch-all (also defeats legacy `.Selected .ListRow { color: white }`)
        .ListRow,
        .menuItemIdentifier, .menuItemIdentifierSmall, .menuItemIdentifierCockpit,
        .itemImportantValue, .itemImportantValueSmall, .itemImportantValueCockpit,
        .itemValue, .itemValueSmall, .itemValueVerySmall,
        .itemName, .itemNameSmall, .itemPrimary {
            color: var(--slds-g-color-on-surface-2);
        }
    }
}

// ===========================================================================
// METRICS — applies in lumina mode only
// ===========================================================================
table.List.List--lumina-full {

    // Column-header (thead) font (metrics) — replaces the inline `listv2._table.font`
    // write that table.js used to emit on `<thead>` (suppressed under the isLuminaFull
    // gate). Mirrors that value: semibold 14px. Header chrome (bg + color) is in the
    // `.List--lumina` scope above. Form-agnostic so EmbeddedList/CockpitList match too.
    thead tr td {
        font: var(--slds-g-font-weight-6) var(--slds-g-font-scale-1) var(--slds-g-font-family);
    }

    // Row + column structural defaults. Replace inline writes from
    // `groupedlistrow.js` `renderRow()`/`renderColumn()` (suppressed under lumina
    // mode by the `isLuminaFull` gate).
    .ListRow {
        display: flex;
        word-break: break-word;
        padding-left: 0.2em;                       // legacy row inset (was inline)
    }

    .ListColumn {
        min-width: 0;
        overflow-wrap: anywhere;
    }

    // Cell-level baseline metrics: family + weight. (Color is in `.List--lumina`
    // chrome scope; font-size deliberately omitted — see top-of-file note.)
    td.ListColumn {
        font-family: var(--slds-g-font-family);
        font-weight: var(--slds-g-font-weight-4);  // 400 regular
    }

    // Identifier / title — legacy 16px Regular (menuItemIdentifier). SLDS scale-2 = 16px.
    // Previously a GAP (no rule here) → the title floated at the compounded ~17.3px
    // inherited base. Legacy pinned 16px and contracts authored their em widths against
    // that, so restoring 16px is the stable, legacy-faithful baseline. Weight inherits
    // the td.ListColumn default (400 regular), matching legacy _FontRegular16.
    .menuItemIdentifier,
    .menuItemIdentifierSmall {
        font-size: var(--slds-g-font-scale-2);    // 16px (legacy _FontRegular16)
    }

    // Important value family (non-cockpit) — 14px Medium.
    .itemImportantValue,
    .itemImportantValueSmall {
        font-size: var(--slds-g-font-scale-1);    // 14px
        font-weight: var(--slds-g-font-weight-5); // 500 medium
    }

    // Name / Title family — legacy 15px Regular. SLDS has NO 15px scale token
    // (scale-1 is 14px, scale-2 is 16px); kept as literal 15px to preserve
    // legacy size exactly. itemNameSmall is enumerated explicitly (CSS class matching
    // is EXACT, not substring).
    // NOTE: itemNameSecondary is deliberately NOT in this group — in legacy
    // `getStyleByItemType` (groupedlistrow.js) its branch is matched BEFORE `itemName`
    // and sets COLOR ONLY (no font), so legacy itemNameSecondary inherits the cell base
    // (~17.3px), NOT 15px. Adding it here would shrink it ~13% vs legacy. To stay
    // legacy-faithful (compat is king) it is left uninstrumented and inherits the cell
    // base, exactly like the other branchless tokens (itemSubTitle / itemPrimary).
    .itemName,
    .itemNameSmall,
    .itemTitle {
        font-size: 15px;                           // legacy _FontRegular15; no SLDS 15px token
    }

    // Value family — 14px Light (300). SLDS weight-3 = 300.
    // itemValueSmall is color-only in legacy → inherits parent's 14px Light.
    // itemValueVerySmall hits itemValue via substring match → 14px Light.
    .itemValue,
    .itemValueSmall,
    .itemValueVerySmall {
        font-size: var(--slds-g-font-scale-1);    // 14px
        font-weight: var(--slds-g-font-weight-3); // 300 light (matches legacy _itemValueFont)
    }

    // Secondary family — 12px Regular. itemSecondarySmall is color-only → 12px.
    .itemSecondary,
    .itemSecondaryCenter,
    .itemSecondarySmall {
        font-size: var(--slds-g-font-scale-neg-1); // 12px (exact SLDS match)
    }
    .itemSecondaryCenter {
        display: flex;
        align-items: center;
    }

    // Label — legacy 11px Regular. SLDS has NO 11px token (scale-neg-2 is 10px,
    // scale-neg-1 is 12px); kept as literal 11px to preserve legacy size.
    .itemLabel {
        font-size: 11px;                           // legacy _FontRegular11; no SLDS 11px token
    }

    // (itemNameSecondary / itemSubTitle / itemPrimary have no font-setting legacy branch
    // — itemNameSecondary's branch is color-only, the others have none — so all three
    // intentionally inherit the cell base (~17.3px), matching legacy getStyleByItemType.)

    // Cockpit variants — kept at LEGACY sizes to stay compatible. The earlier UX
    // size promotions (identifier 14→16/Semibold, secondary 12→14) re-coupled em-based
    // cockpit column widths to a larger font and widened ~39 contract columns by ~17%
    // (e.g. `itemSecondaryCockpit width="2em"`: 24px→28px). Reverting to legacy sizes
    // keeps those columns at their authored widths.
    //   - menuItemIdentifierCockpit: legacy _itemIdentFont _FontLight14 = 14px Light
    //   - itemSecondaryCockpit:      legacy _secondaryFont _FontRegular12 = 12px Regular
    //   - itemImportantValueCockpit: legacy _itemImpFont _FontMedium14 = 14px Medium
    .menuItemIdentifierCockpit {
        font-size: var(--slds-g-font-scale-1);    // 14px (legacy _FontLight14)
        font-weight: var(--slds-g-font-weight-3); // 300 light (legacy _FontLight14)
    }

    .itemSecondaryCockpit {
        font-size: var(--slds-g-font-scale-neg-1); // 12px (legacy _FontRegular12; weight inherits 400)
    }

    .itemImportantValueCockpit {
        font-size: var(--slds-g-font-scale-1);    // 14px (legacy _FontMedium14)
        font-weight: var(--slds-g-font-weight-5); // 500 medium
    }

    // Phone — legacy shrinks cockpit-row fonts on phones (config `list.Phone._cockpitRow`,
    // merged at theme-load by themeManager). Standard `_row` has NO phone variant, so only
    // cockpit tokens shrink here. No SLDS tokens for 13px/11px — kept literal to match legacy.
    //   - menuItemIdentifierCockpit: _FontLight13   = 13px Light
    //   - itemSecondaryCockpit:      _FontRegular11 = 11px Regular
    //   - itemImportantValueCockpit: _FontMedium12  = 12px Medium
    @media @phone {
        .menuItemIdentifierCockpit {
            font-size: 13px;                       // legacy phone _FontLight13; no SLDS 13px token
        }
        .itemSecondaryCockpit {
            font-size: 11px;                       // legacy phone _FontRegular11; no SLDS 11px token
        }
        .itemImportantValueCockpit {
            font-size: var(--slds-g-font-scale-neg-1); // 12px (legacy phone _FontMedium12)
        }
    }

    // Layout helpers — replace inline equivalents previously applied per layoutType.
    .itemRight   { text-align: right; }
    .itemLeft    { text-align: left; }
    .itemCenter  { text-align: center; }

    .itemPaddingTop      { padding-top: var(--slds-g-spacing-2); }
    .itemPaddingTopSmall { padding-top: var(--slds-g-spacing-1); }

    .itemEllipsis        { overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
    .itemMarginRight     { margin-right: var(--slds-g-spacing-2); }
}