/* Feature 037 — v28 admin-screen reskin for Roles overview (/roles), Role Mappings
   (/role-mappings) and Manage roles (/canonical). Presentation only.

   Every rule is scoped under a per-screen page wrapper (.roles-page, .role-mappings-page,
   .canonical-page) so nothing leaks to other screens. We intentionally do NOT edit the shared
   components.css "card" treatment (.table-toolbar:has(+ .tbl-scroll) etc.) — that would un-card
   the Assignments/Documents tables. Instead each wrapper neutralises that treatment locally.

   The v28 prototype lays the filter row + table FLAT on the page background (no white card behind
   them). The app's "card" is not a .card/.panel element — it is the combination of three shared
   rules in components.css: the white .tbl-scroll, the white-topped .table-toolbar that precedes it,
   and the white-bottomed .table-pagination that follows it. We override exactly those, page-scoped. */

/* ── Flatten the table card (Roles overview + Role Mappings) ──────────────── */
/* v37 re-cards the Manage roles screen (feature 045), so .canonical-page left this group. */
.roles-page .table-toolbar,
.role-mappings-page .table-toolbar {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: var(--space-4) 0;
}

.roles-page .tbl-scroll,
.role-mappings-page .tbl-scroll {
    background: transparent;
    border: none;
    border-radius: 0;
}

.roles-page .table-pagination,
.role-mappings-page .table-pagination {
    background: transparent;
    border: none;
    border-radius: 0;
    padding: var(--space-4) 0 0;
}

/* Reader roles overview: the summary is prose, not a row of clickable-looking chips. */
.roles-page .roles-summary { display: flex; align-items: center; flex-wrap: wrap; gap: 0; margin: var(--space-3) 0 var(--space-2); padding: 0; color: var(--color-service-grey); font-size: var(--text-caption1); }
.roles-page .roles-summary-link { padding: 0; border: 0; background: none; color: var(--color-text-link); font: inherit; cursor: pointer; text-decoration: underline; text-underline-offset: 2px; }
.roles-page .roles-summary-link:hover { color: var(--color-text-link-hover); }
.roles-page .rl-unmatched { color: var(--color-service-grey); background: var(--color-surface); border: 1px solid var(--color-border-light); text-transform: none; letter-spacing: 0; font-weight: 500; }
.roles-page .rl-applies { display: flex; flex-direction: column; gap: 1px; line-height: 1.25; white-space: nowrap; }
.roles-page .rl-applies-docs { color: var(--color-service-grey); font-size: 11px; }

/* ── Export CSV button (presentational, disabled) ─────────────────────────── */
/* v28 toolbar secondary button: white face, soft border, navy text, download glyph. */
.export-csv-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 7px;
    height: 36px;
    padding: 0 14px;
    border: 1.5px solid var(--color-border);
    border-radius: var(--radius-md);
    background: var(--color-white);
    color: var(--color-navy);
    font-size: 13.5px;
    font-weight: var(--font-medium);
    font-family: var(--font-primary);
    white-space: nowrap;
    cursor: not-allowed;
    opacity: .85;
}

/* An unconstrained inline SVG balloons to fill its box — pin it explicitly. */
.export-csv-btn svg {
    width: 15px;
    height: 15px;
    flex: 0 0 auto;
}

/* Push the button to the right of the filter row. The toolbars are flex rows, so an
   auto left margin parks it on the trailing edge after the search + filter controls. */
.roles-page .table-toolbar .export-csv-btn {
    margin-left: auto;
}

/* ══ Manage roles (/canonical) — v37 CRUD screen (feature 045) ═════════════════
   The mr36-* rules are ported from the v37 prototype (specs/045-v37-ui-parity/reference/
   manage-roles.css), namespaced under .canonical-page. All rules live here (global) because part
   of the table markup comes from C# RenderFragment builders, which scoped .razor.css never
   reaches. The modals are DOM children of the page div, so page scoping still applies to them. */

/* v37 lays toolbar + table + footer as ONE white card. Explicit rules (not the shared
   ":has(+ .tbl-scroll)" adjacency) so an inline notice or empty state doesn't un-card the toolbar. */
.canonical-page .table-toolbar {
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-bottom: none;
    border-radius: var(--radius-md) var(--radius-md) 0 0;
}

.canonical-page .tbl-scroll {
    border-top: none;
    border-top-left-radius: 0;
    border-top-right-radius: 0;
}

.canonical-page .table-pagination {
    background: var(--color-white);
    border: 1px solid var(--color-border-light);
    border-top: none;
    border-radius: 0 0 var(--radius-md) var(--radius-md);
}

/* Role cell: v37 sets the name medium-weight (rl-name is already navy). */
.canonical-page .rl-name { font-weight: 500; }

/* Toolbar right cluster: count + Import + Add role; Export CSV trails after it. */
.canonical-page .mr36-toolbar-right { margin-left: auto; display: flex; gap: 8px; align-items: center; }

/* 055 follow-ups (13"): at desktop the filter group is layout-transparent; under 1512px it drops
   to its own full-width row so the toolbar wraps as [search | actions] / [filters] instead of
   breaking mid-select. The selects share the row evenly. */
.canonical-page .mr36-filters { display: contents; }
@media (max-width: 1512px) {
    .canonical-page .mr36-filters { display: flex; flex-basis: 100%; order: 5; gap: 8px; min-width: 0; }
    .canonical-page .mr36-filters .filter-select { flex: 1; min-width: 0; }
    .canonical-page .table-toolbar .search-field { flex: 1; }
}
.canonical-page .mr36-count { font-size: 13px; color: var(--color-service-grey); white-space: nowrap; }
.canonical-page .mr36-count strong { color: var(--color-teal-text); font-weight: 600; }

/* 055 (13" fixes): line-height 1 keeps the label's box the same height as the glyphs so icon and
   text centre together; nowrap stops a squeezed toolbar wrapping the label beside the icon. */
.canonical-page .mr36-btn { display: inline-flex; align-items: center; gap: 7px; height: 34px; padding: 0 14px; border-radius: 8px; font-size: 13px; font-weight: 500; line-height: 1; white-space: nowrap; cursor: pointer; border: 1px solid var(--color-control-border); background: var(--color-white); color: var(--color-navy); font-family: inherit; transition: background .15s, border-color .15s; }
.canonical-page .mr36-btn:hover { background: var(--color-surface); }
.canonical-page .mr36-btn svg { width: 15px; height: 15px; flex: 0 0 auto; }
.canonical-page .mr36-btn.primary { background: var(--color-navy); border-color: var(--color-navy); color: var(--color-white); }
.canonical-page .mr36-btn.primary:hover { background: #00314a; }
.canonical-page .mr36-btn.danger { background: var(--color-error); border-color: var(--color-error); color: var(--color-white); }
.canonical-page .mr36-btn.danger:hover { filter: brightness(.94); }
.canonical-page .mr36-btn.danger:disabled { opacity: .45; cursor: not-allowed; }

/* Bulk bar: fixed bottom-centre dark bar (brief: "<N> selected · Delete selected · Clear"). */
.canonical-page .mr36-bulkbar { position: fixed; bottom: 24px; left: 50%; transform: translateX(-50%); z-index: 900; display: flex; align-items: center; gap: 12px; background: var(--color-navy); color: var(--color-white); border-radius: 10px; padding: 10px 16px; font-size: 13px; box-shadow: var(--shadow-lg); }
.canonical-page .mr36-bulkbar strong { font-weight: 600; white-space: nowrap; }
.canonical-page .mr36-bulkbar .sp { width: 4px; }
.canonical-page .mr36-bulkbar button { display: inline-flex; align-items: center; gap: 6px; height: 30px; padding: 0 12px; border-radius: 7px; border: 1px solid rgba(255,255,255,.35); background: transparent; color: var(--color-white); font-size: 12.5px; font-weight: 500; cursor: pointer; font-family: inherit; white-space: nowrap; }
.canonical-page .mr36-bulkbar button:hover { background: rgba(255,255,255,.12); }
.canonical-page .mr36-bulkbar button.bulk-danger { border-color: rgba(255,120,120,.6); color: #FFB4B4; }
.canonical-page .mr36-bulkbar button.bulk-danger:hover { background: rgba(255,80,80,.15); }
.canonical-page .mr36-bulkbar button svg { width: 13px; height: 13px; }

/* Row selection + hover-revealed actions. */
.canonical-page .mr36-cb { width: 15px; height: 15px; accent-color: var(--color-navy); cursor: pointer; }
.canonical-page td.mr36-cbcell, .canonical-page th.mr36-cbcell { width: 36px; text-align: center; }
.canonical-page .mr36-row-actions { display: flex; gap: 4px; justify-content: flex-end; opacity: 0; transition: opacity .12s; }
.canonical-page tr:hover .mr36-row-actions { opacity: 1; }
.canonical-page .mr36-iconbtn { width: 28px; height: 28px; border-radius: 6px; display: inline-flex; align-items: center; justify-content: center; color: var(--color-service-grey); cursor: pointer; border: none; background: none; }
.canonical-page .mr36-iconbtn:hover { background: var(--color-surface); color: var(--color-navy); }
.canonical-page .mr36-iconbtn.del:hover { background: var(--color-error-tint); color: var(--color-error); }
.canonical-page .mr36-iconbtn svg { width: 15px; height: 15px; }

/* "Documented roles" cell: name-count over assignment-count. */
.canonical-page .mr36-usage { display: flex; flex-direction: column; gap: 1px; }
.canonical-page .mr36-usage .u1 { font-size: 13px; color: var(--color-navy); font-weight: 500; }
.canonical-page .mr36-usage .u2 { font-size: 11.5px; color: var(--color-service-grey); }

/* Inline notice (post-import / post-delete summary). */
.canonical-page .mr36-notice { display: flex; align-items: center; justify-content: space-between; gap: 12px; background: var(--color-success-tint); border: 1px solid var(--color-success-tint-border); border-radius: var(--radius-md); color: var(--color-success); font-size: 13px; padding: 9px 14px; margin-bottom: var(--space-3); }
.canonical-page .mr36-notice button { border: none; background: none; color: inherit; font-size: 16px; line-height: 1; cursor: pointer; padding: 0 2px; }

/* ── Modal shell (ported from the Role Mappings scoped modal so it is reachable here) ── */
.canonical-page .edit-modal-overlay { position: fixed; inset: 0; background: color-mix(in srgb, var(--color-deep-navy) 45%, transparent); z-index: 9000; display: flex; align-items: center; justify-content: center; padding: var(--space-4); }
.canonical-page .edit-modal { background: var(--color-white); border-radius: var(--radius-lg); box-shadow: var(--shadow-lg); max-width: 96vw; max-height: 88vh; display: flex; flex-direction: column; overflow: hidden; }
.canonical-page .edit-modal.mr36-w560 { width: 560px; }
.canonical-page .edit-modal.mr36-w600 { width: 600px; }
.canonical-page .edit-modal.mr36-w640 { width: 640px; }
.canonical-page .edit-modal-head { display: flex; align-items: center; justify-content: space-between; padding: var(--space-4) var(--space-5); border-bottom: 1px solid var(--color-border-light); }
.canonical-page .edit-modal-title { font-size: var(--text-body); font-weight: var(--font-medium); color: var(--color-navy); }
.canonical-page .edit-modal-close { background: none; border: none; font-size: 20px; color: var(--color-service-grey); cursor: pointer; padding: 2px 6px; line-height: 1; }
.canonical-page .edit-modal-foot { display: flex; justify-content: flex-end; align-items: center; gap: var(--space-2); padding: var(--space-3) var(--space-5); border-top: 1px solid var(--color-border-light); }
.canonical-page .edit-cancel-btn { padding: 7px 16px; border: 1px solid var(--color-control-border); border-radius: var(--radius-sm); background: var(--color-white); color: var(--color-navy); font-size: var(--text-subhead); cursor: pointer; font-family: inherit; }
.canonical-page .edit-save-btn { padding: 7px 16px; border: none; border-radius: var(--radius-sm); background: var(--color-navy); color: var(--color-white); font-size: var(--text-subhead); font-weight: var(--font-medium); cursor: pointer; font-family: inherit; }
.canonical-page .edit-save-btn:hover { background: #00314a; }
.canonical-page .edit-save-btn:disabled { opacity: .55; cursor: default; }
.canonical-page .mr36-foot-sp { flex: 1; }

/* ── Add/Edit role form (mr36) ── */
.canonical-page .mr36-form { display: flex; flex-direction: column; gap: 12px; padding: 18px 24px; }
.canonical-page .mr36-form-grid { display: grid; grid-template-columns: 1fr 1fr; gap: 12px 14px; }
.canonical-page .mr36-fld { display: flex; flex-direction: column; gap: 5px; }
.canonical-page .mr36-fld.wide { grid-column: 1 / -1; }
.canonical-page .mr36-fld label { font-size: 12px; font-weight: 500; color: var(--color-navy); }
.canonical-page .mr36-fld label .req { color: var(--color-error); }
.canonical-page .mr36-fld input, .canonical-page .mr36-fld select { height: 36px; border: 1px solid var(--color-control-border); border-radius: 8px; padding: 0 10px; font-size: 13.5px; color: var(--color-navy); background: var(--color-white); font-family: inherit; }
.canonical-page .mr36-fld input:focus, .canonical-page .mr36-fld select:focus { outline: none; border-color: var(--color-control-border); box-shadow: var(--shadow-focus); }
.canonical-page .mr36-fld .hint { font-size: 11.5px; color: var(--color-service-grey); }
.canonical-page .mr36-form-error { font-size: 12.5px; color: var(--color-error); background: var(--color-error-tint); border: 1px solid var(--color-error-tint-border); border-radius: 8px; padding: 8px 12px; margin: 10px 0 0; }
.canonical-page .mr36-danger-body .mr36-form-error { margin: 0 0 12px; }

/* ── Delete confirm (danger) ── */
.canonical-page .mr36-danger-head { display: flex; gap: 12px; align-items: flex-start; padding: 20px 24px 0; }
.canonical-page .mr36-danger-ico { width: 38px; height: 38px; border-radius: 10px; background: var(--color-error-tint); color: var(--color-error); display: flex; align-items: center; justify-content: center; flex-shrink: 0; }
.canonical-page .mr36-danger-ico svg { width: 20px; height: 20px; }
.canonical-page .mr36-danger-title { font-size: 16px; font-weight: 600; color: var(--color-error); }
.canonical-page .mr36-danger-sub { font-size: 13px; color: var(--color-navy); margin-top: 3px; line-height: 1.5; }
.canonical-page .mr36-danger-body { padding: 14px 24px 4px; overflow-y: auto; }
.canonical-page .mr36-loss { border: 1px solid var(--color-error-tint-border); background: var(--color-error-tint); border-radius: 10px; padding: 4px 14px; margin-bottom: 12px; max-height: 230px; overflow-y: auto; }
.canonical-page .mr36-loss-row { display: flex; align-items: baseline; gap: 10px; padding: 8px 0; border-bottom: 1px solid var(--color-error-tint-border); font-size: 13px; }
.canonical-page .mr36-loss-row:last-child { border-bottom: none; }
.canonical-page .mr36-loss-name { font-weight: 500; color: var(--color-navy); flex: 1; min-width: 0; }
.canonical-page .mr36-loss-meta { font-size: 12px; color: var(--color-error); white-space: nowrap; }
.canonical-page .mr36-loss-raws { font-size: 11.5px; color: var(--color-service-grey); margin-top: 2px; font-weight: var(--font-regular); }
.canonical-page .mr36-danger-note { display: flex; gap: 10px; font-size: 12.5px; line-height: 1.55; color: var(--color-warning); background: var(--color-warning-tint); border: 1px solid var(--color-warning-tint-border); border-radius: 8px; padding: 10px 12px; margin-bottom: 14px; }
.canonical-page .mr36-danger-note svg { width: 15px; height: 15px; flex-shrink: 0; margin-top: 2px; }
.canonical-page .mr36-confirm-type { display: flex; flex-direction: column; gap: 6px; margin-bottom: 6px; }
.canonical-page .mr36-confirm-type label { font-size: 12.5px; color: var(--color-navy); }
.canonical-page .mr36-confirm-type input { height: 36px; border: 1.5px solid var(--color-control-border); border-radius: 8px; padding: 0 10px; font-size: 13.5px; font-family: var(--font-mono); letter-spacing: .1em; }
.canonical-page .mr36-confirm-type input:focus { outline: none; border-color: var(--color-error); box-shadow: var(--shadow-error-ring); }

/* ── Import from Excel (two-step) ── */
.canonical-page .mr36-imp-body { padding: 18px 24px; overflow-y: auto; display: flex; flex-direction: column; }
.canonical-page .mr36-drop { position: relative; display: flex; flex-direction: column; align-items: center; justify-content: center; gap: 6px; border: 1.5px dashed var(--color-control-border); border-radius: 10px; background: var(--color-surface); padding: 28px 16px; text-align: center; color: var(--color-service-grey); }
.canonical-page .mr36-drop:hover { border-color: var(--color-blue); }
.canonical-page .mr36-drop svg { width: 26px; height: 26px; }
.canonical-page .mr36-drop-input { position: absolute; inset: 0; width: 100%; height: 100%; opacity: 0; cursor: pointer; }
.canonical-page .mr36-drop-label { font-size: 13.5px; color: var(--color-navy); font-weight: 500; }
.canonical-page .mr36-drop-sub { font-size: 12px; color: var(--color-service-grey); }
.canonical-page .mr36-imp-cols { display: flex; flex-wrap: wrap; gap: 6px; margin-top: 10px; justify-content: center; }
.canonical-page .mr36-col-chip { font-family: var(--font-mono); font-size: 11.5px; color: var(--color-navy); background: var(--color-surface); border: 1px solid var(--color-border-light); border-radius: 6px; padding: 3px 8px; }
.canonical-page .mr36-imp-template { font-size: 12.5px; color: var(--color-service-grey); text-align: center; margin-top: 12px; }
.canonical-page .mr36-imp-template a { color: var(--color-text-link); font-weight: 500; text-decoration: underline; }
.canonical-page .mr36-imp-template a:hover { color: var(--color-text-link-hover); }
.canonical-page .mr36-imp-summary { display: flex; align-items: center; gap: 8px; flex-wrap: wrap; margin-bottom: 12px; }
.canonical-page .mr36-imp-file { font-size: 12px; color: var(--color-service-grey); margin-left: auto; }
.canonical-page .mr36-prev-scroll { max-height: 320px; overflow-y: auto; border: 1px solid var(--color-border-light); border-radius: 8px; }
.canonical-page .mr36-prev-pill { display: inline-block; font-size: 11px; font-weight: 600; border-radius: var(--radius-full); padding: 2px 9px; }
.canonical-page .mr36-prev-pill.new { background: var(--color-success-tint); color: var(--color-success); }
.canonical-page .mr36-prev-pill.upd { background: var(--color-info-tint); color: var(--color-info); }
.canonical-page .mr36-prev-pill.skip { background: var(--color-surface); color: var(--color-service-grey); }
.canonical-page .mr36-prev-pill.err { background: var(--color-error-tint); color: var(--color-error); }
.canonical-page .mr36-prev-table { width: 100%; border-collapse: collapse; font-size: 12.5px; }
.canonical-page .mr36-prev-table th { text-align: left; font-size: 11px; letter-spacing: .05em; text-transform: uppercase; color: var(--color-service-grey); font-weight: 500; padding: 6px 8px; border-bottom: 1px solid var(--color-border-light); white-space: nowrap; background: var(--color-white); position: sticky; top: 0; }
.canonical-page .mr36-prev-table td { padding: 7px 8px; border-bottom: 1px solid var(--color-border-light); color: var(--color-navy); vertical-align: top; }
.canonical-page .mr36-prev-table td .chg { color: var(--color-service-grey); }
.canonical-page .mr36-prev-table td .chg b { color: var(--color-navy); font-weight: 500; }
.canonical-page .mr36-prev-err { font-size: 11.5px; color: var(--color-error); margin-top: 2px; }

/* ── Role Mappings (/role-mappings) ───────────────────────────────────────── */
/* 1. Amber callout banner under the H1 (v28 .rm-banner — soft amber face, darker amber text,
      trailing link). */
.rm-banner {
    display: flex;
    gap: 12px;
    align-items: flex-start;
    background: var(--color-warning-tint);
    border: 1px solid var(--color-warning-tint-border);
    border-radius: 10px;
    padding: 13px 16px;
    margin-bottom: var(--space-6);
    font-size: 13.5px;
    color: var(--color-warning);
    line-height: 1.5;
}

.rm-banner svg {
    width: 18px;
    height: 18px;
    flex: 0 0 auto;
    margin-top: 1px;
}

.rm-banner .rm-banner-text {
    flex: 1;
}

.rm-banner .rm-banner-link {
    color: var(--color-text-link);
    font-weight: var(--font-medium);
    text-decoration: underline;
    white-space: nowrap;
    margin-left: 6px;
}

.rm-banner .rm-banner-link:hover { color: var(--color-text-link-hover); }

/* 2. Right-park the Export CSV button on the Show-chips toolbar row. The quick-chips group already
      carries margin-left:auto, so the chips sit on the right; placing the Export button after them
      inside the same toolbar keeps it on the trailing edge. */
.role-mappings-page .table-toolbar .export-csv-btn {
    margin-left: var(--space-3);
}

/* 3. Legacy confidence markup. ConfidenceBar now emits a muted dash for deterministic match types
      and a coloured percentage only for probabilistic matches. */
/* 4. (055) The mappings table headers are now the shared SortableTh component, so the scoped
      RoleMappingsPanel.razor.css can no longer reach them (child-component markup never carries the
      parent's scope attribute). The v55 tighter header gutter and the Mapped-To min-width live here. */
.role-mappings-page .tbl-scroll .data-table.mp-table thead th { padding-left: 12px; padding-right: 12px; }
.role-mappings-page .mp-table th:nth-child(5) { min-width: 230px; } /* Mapped To (after the v55 checkbox col) */
.role-mappings-page .mp-table.mp-readonly th:nth-child(4) { min-width: 230px; }
.role-mappings-page .mp-table.mp-readonly th:nth-child(5) { min-width: 90px; }
.role-mappings-page .mp-table th:nth-child(7),
.role-mappings-page .mp-table td:nth-child(7) { min-width: 110px; }
.role-mappings-page .mp-table th:nth-child(8),
.role-mappings-page .mp-table td:nth-child(8) { min-width: 84px; }
.role-mappings-page .mp-table.mp-readonly th:nth-child(6),
.role-mappings-page .mp-table.mp-readonly td:nth-child(6) { min-width: 110px; }
.role-mappings-page .mp-table.mp-readonly th:nth-child(7),
.role-mappings-page .mp-table.mp-readonly td:nth-child(7) { min-width: 84px; }

/* ── Feature 051 issue 1/1b — Manage roles: asset multi-select, sortable headers, asset tags. ──
   Rules are page-scoped (.canonical-page) and global (not scoped .razor.css) because the sort
   headers and asset cells are emitted by C# RenderFragment builders, which scoped CSS can't reach. */
/* 055 (13" fixes): breathing room above the chips — with no top margin the row sat flush against
   (and at some widths overlapped) the white filter card that precedes it. */
.canonical-page .mr36-assetbar { display: flex; align-items: center; flex-wrap: wrap; gap: 8px; margin: 12px 0 14px; }
.canonical-page .mr36-assetbar-label { font-size: 12px; font-weight: 600; text-transform: uppercase; letter-spacing: .04em; color: var(--color-service-grey); margin-right: 2px; }
.canonical-page .mr36-assetchip { height: 28px; padding: 0 12px; border-radius: 999px; border: 1px solid var(--color-control-border); background: var(--color-white); color: var(--color-navy); font-size: 12.5px; font-family: inherit; cursor: pointer; transition: background .15s, border-color .15s, color .15s; }
.canonical-page .mr36-assetchip:hover { background: var(--color-surface); }
.canonical-page .mr36-assetchip.on { background: var(--color-surface); border-color: var(--color-blue); color: var(--color-navy); }
.canonical-page .mr36-assetclear { height: 28px; padding: 0 10px; border: none; background: none; color: var(--color-text-link); font-size: 12.5px; cursor: pointer; }
.canonical-page .mr36-assetclear:hover { color: var(--color-text-link-hover); text-decoration: underline; }

.canonical-page .mr36-sortth { cursor: pointer; user-select: none; white-space: nowrap; }
.canonical-page .mr36-sortth.center { text-align: center; }
.canonical-page .mr36-sortth:hover { color: var(--color-navy); }
.canonical-page .mr36-sortth.sorted { color: var(--color-navy); }
.canonical-page .mr36-sortarrow { font-size: 9px; opacity: .6; }
.canonical-page .mr36-sortth:not(.sorted) .mr36-sortarrow { color: var(--color-text-secondary); opacity: 1; }
.canonical-page .mr36-sortth:not(.sorted):hover .mr36-sortarrow { color: var(--color-navy); }

.canonical-page .mr36-asset-tag { display: inline-block; padding: 1px 8px; margin: 1px 3px 1px 0; border-radius: 5px; font-size: 12px; background: var(--color-ice-blue, #e0f2fe); color: var(--color-navy); white-space: nowrap; }
.canonical-page .mr36-asset-tag.scope { background: var(--color-surface, #f1f5f9); color: var(--color-service-grey); }

/* Fill the container on wide screens (issue 3) — the fixed-width columns no longer leave a gutter. */
.canonical-page .mr36-table { width: 100%; }
/* Tighter horizontal padding than the 16px data-table default: 11 columns × 8px saved keeps the
   whole row (incl. Actions) on-screen at 13"/14" laptop widths instead of forcing a scrollbar. */
.canonical-page .mr36-table thead th,
.canonical-page .mr36-table tbody td { padding-left: 12px; padding-right: 12px; }
.document-only-roles-page { min-width: 0; }