/*
 * Platform Grid — styling owned by the <data-list> grid component family
 * (DataListTagHelper / GridToolbarRenderer / DataGridColumnsTagHelper, etc.).
 * Shipped WITH the component as an RCL asset
 * (_content/Platform.Web/css/platform-grid.css) so every consumer inherits the
 * component's own styling rather than each product redefining it. Closure-backlog #141.
 */

/* Count badge — "Showing X of N records" (GridToolbarRenderer.BuildCountBadge,
   GridToolbarRenderer.cs:53, class "badge badge-soft").
   Relocated verbatim from Proprietatum site.css:237 → single source of truth. */
.badge-soft {
    background-color: #e9f4fb; /* soft blue background */
    color: #0f4c75; /* strong readable navy */
    border: 1px solid #cfe8f5;
    font-weight: 500;
}

/* Grid column-header contrast (#135) — navy header background, white text.
   Targets the <thead class="table-light"> emitted by DataGridColumnsTagHelper.cs:18.
   Relocated here from platform-typography.css (was the only grid rule living in the
   typography sheet); consolidating all grid-component styling into one stylesheet. */
thead.table-light {
    --bs-table-bg: rgb(0, 40, 104);
    --bs-table-color: #fff;
}

/*
 * Structural / hook classes emitted by the grid component family — documented
 * here (the component's stylesheet home, §2.5.4) but intentionally NOT given
 * rules: their layout comes entirely from co-emitted Bootstrap utilities, so
 * they need no styling today. Listed so the full emitted-class surface is
 * discoverable in one place; add rules here if the component ever needs them.
 *
 *   .data-list          (DataListTagHelper.cs:75)        — grid root wrapper
 *   .data-grid          (DataGridTagHelper.cs:22)         — grid wrapper
 *   .data-grid-toolbar  (GridToolbarRenderer.cs:37)       — count + filter row
 *   .data-actions       (DataActionsTagHelper.cs:13)      — row action cluster
 *   .data-empty         (DataEmptyTagHelper.cs:31)        — empty-state block
 *   .data-pagination    (DataPaginationTagHelper.cs:73)   — pagination wrapper
 *   .page-size-selector (DataPaginationTagHelper.cs:99)   — "Show N" selector wrapper
 *   .page-size-select   (DataPaginationTagHelper.cs:106)  — the <select> element
 */

/*
 * List-scope selector — Segmented variant (#180 / TAD v4.13;
 * ListScopeSelectorRenderer.RenderSegmented). Platform-OWNED scoped classes so
 * the control carries its own treatment and compact height WITHOUT touching the
 * generic .btn / .btnDefault / .btn-primary tokens (left pixel-unchanged
 * platform-wide).
 *
 * Visual idiom (Fidelis ruling 2026-06-08): MIRRORS the platform .btnDefault
 * button (the same family the PAYE page's "New draft" / "Approval queue"
 * buttons use) — filled = selected. Inactive option = .btnDefault REST
 * (white, navy text/border); inactive :hover = .btnDefault HOVER (navy fill,
 * white) which doubles as a preview of the selected state; active/current =
 * .btnDefault HOVER held stable. The declarations are duplicated LITERALLY
 * (navy = rgb(0,40,104), as elsewhere in this sheet) because Platform must not
 * depend on the consumer-side .btnDefault / --navy token (#128/#129
 * Platform-First inversion).
 */

/* Container: separate small buttons with a gap (the pre-migration PAYE
   "Show:" scale, d-flex gap-2), not a connected Bootstrap btn-group. */
.list-scope-selector {
    display: inline-flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

/* Inactive option, REST = .btnDefault rest (white, navy text + border).
   Height/padding match .btn-sm metrics (compact, the pre-migration scale). */
.list-scope-selector .listscope-option {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0.25rem 0.5rem;       /* btn-sm vertical metrics */
    font-size: 0.875rem;           /* btn-sm */
    line-height: 1.5;              /* btn-sm */
    border-radius: 0.25rem;        /* btn-sm */
    font-weight: 500;
    text-decoration: none;
    transition: all 0.15s ease-in-out;
    background-color: #fff;
    color: rgb(0, 40, 104);
    border: 1px solid rgb(0, 40, 104);
}

/* Inactive :hover/:focus = .btnDefault hover (navy fill, white) — also the
   preview of the selected state. */
.list-scope-selector .listscope-option:hover,
.list-scope-selector .listscope-option:focus {
    background-color: rgb(0, 40, 104);
    color: #fff;
    border-color: rgb(0, 40, 104);
    outline: none;
}

/* Active / current option = .btnDefault HOVER held stable across hover/focus
   (filled = selected). No underline accent; weight matches the sibling
   buttons (no bold). Non-interactive cursor — it is current, not actionable. */
.list-scope-selector .listscope-option-active,
.list-scope-selector .listscope-option-active:hover,
.list-scope-selector .listscope-option-active:focus {
    background-color: rgb(0, 40, 104);
    color: #fff;
    border: 1px solid rgb(0, 40, 104);
    cursor: default;
}