/* =============================================================================
   Admin panel design language
   =============================================================================
   The admin panel is ~9,700 lines of MudBlazor markup across 24 components. Rather than
   rewrite every screen, this restyles MudBlazor's rendered output to the same design language
   REMchannel and REMprofile use - the tokens, the pill buttons, the table treatment, the
   status tags - so all nine routes move together and any screen added later inherits it.

   Everything is scoped under `.admin-ui`, applied once on AdminPanelLayout. That scope is
   load-bearing: these are global selectors over MudBlazor's own classes, and without it they
   would restyle MudBlazor everywhere in the app, including screens that have already been
   designed against the plain component defaults.

   Where a rule has to beat MudBlazor's own specificity it says so; !important is used only
   against MudBlazor's inline-ish utility classes, not as a habit.

   Tokens now come from the REMchannel Design System Figma file, via the --rem-* set defined in
   remchannel-brand.css. The --au-* names are kept as a thin local layer so the ~200 rules below
   did not all have to change, but every one of them is an alias now - no literals.

   Three values changed in the rewire, all of them because the design system disagreed with what
   was here:

     --au-faint   #8A9793 -> text-muted #66706E   #8A9793 is 3.03:1 on white and 2.70:1 on the
                                                  canvas. It fails AA as text on both, which
                                                  remchannel-brand.css already documented; the
                                                  design system has no "faint" tier at all.
     --au-green   #009677 -> feedback-success     #009677 is 3.73:1 as text. The brand palette
                  #00795F                         keeps it for fills and graphics; the design
                                                  system's success token is the ink variant.
     --au-radius  10px    -> radius-md 8px        The scale is 6 / 8 / 999. 10 was not on it.
   ============================================================================= */

.admin-ui {
    --au-ink: var(--rem-color-text-primary);
    --au-body: #35353B; /* no design-system equivalent: sits between primary and secondary */
    --au-muted: var(--rem-color-text-secondary);
    --au-faint: var(--rem-color-text-muted);
    --au-hairline: #F3F4F4; /* no design-system equivalent: lighter than border-default */
    --au-border: var(--rem-color-border-default);
    --au-line: var(--rem-color-border-strong);
    --au-surface: var(--rem-color-bg-canvas);
    --au-green: var(--rem-color-feedback-success);
    --au-navy: var(--rem-brand-remadmin-accent);
    --au-orange: var(--rem-color-feedback-warning);
    --au-radius: var(--rem-radius-md);

    /* REMadmin's accent, for anything that needs to read as "this app" rather than as a
       severity - the nav rail, the active segmented option, focus rings. */
    --au-accent: var(--rem-brand-remadmin-accent);
}

/* ---------------------------------------------------------------- page frame */

.admin-ui .mud-container,
.admin-ui .mud-container-maxwidth-lg,
.admin-ui .mud-container-maxwidth-xl {
    max-width: 100% !important;
    padding-left: 0 !important;
    padding-right: 0 !important;
}

/* Cards/panels: a hairline border rather than MudBlazor's drop shadow, matching the
   dashboard and submission cards. */
.admin-ui .mud-paper {
    box-shadow: none !important;
    border-radius: var(--au-radius);
}

.admin-ui .mud-paper.mud-elevation-1,
.admin-ui .mud-paper.mud-elevation-2,
.admin-ui .mud-paper.mud-elevation-3,
.admin-ui .mud-paper.mud-elevation-4 {
    border: 1px solid var(--au-border);
}

/* ---------------------------------------------------------------- typography */

.admin-ui h1, .admin-ui h2, .admin-ui h3,
.admin-ui .mud-typography-h4,
.admin-ui .mud-typography-h5 {
    color: var(--au-ink);
    font-weight: 400;
    letter-spacing: -0.01em;
}

.admin-ui .mud-typography-h4 { font-size: 1.75rem; line-height: 1.2; }
.admin-ui .mud-typography-h5 { font-size: 1.25rem; }

.admin-ui .mud-typography-h6 {
    font-size: 0.95rem;
    font-weight: 700;
    color: var(--au-ink);
}

.admin-ui .mud-typography-body2,
.admin-ui .mud-typography-caption {
    color: var(--au-muted);
}

/* ---------------------------------------------------------------- tables */

.admin-ui .mud-table {
    background: #fff;
    border: 1px solid var(--au-border);
    border-radius: var(--au-radius);
    box-shadow: none !important;
    overflow: hidden;
}

.admin-ui .mud-table-container {
    overflow-x: auto;
}

/* Column headings: small, uppercase, muted, on a single rule - the treatment every table in
   the design set uses. */
.admin-ui .mud-table-head .mud-table-cell,
.admin-ui .mud-table-head th {
    background: #fff;
    color: var(--au-muted);
    font-size: 0.7rem;
    font-weight: 700;
    letter-spacing: 0.06em;
    text-transform: uppercase;
    white-space: nowrap;
    border-bottom: 1px solid var(--au-border);
    padding: 0.85rem 1rem;
}

.admin-ui .mud-table-body .mud-table-cell {
    font-size: 0.85rem;
    color: var(--au-body);
    border-bottom: 1px solid var(--au-hairline);
    padding: 0.7rem 1rem;
}

.admin-ui .mud-table-body .mud-table-row:last-child .mud-table-cell {
    border-bottom: none;
}

.admin-ui .mud-table-body .mud-table-row:hover {
    background: #FAFBFB;
}

/* MudBlazor's striping fights the hairline separators; the design uses one or the other. */
.admin-ui .mud-table-striped .mud-table-body .mud-table-row:nth-child(odd) {
    background: transparent;
}

.admin-ui .mud-table-sort-label {
    color: inherit;
    font: inherit;
    letter-spacing: inherit;
}

.admin-ui .mud-table-toolbar {
    padding: 0.85rem 1rem;
    border-bottom: 1px solid var(--au-border);
    min-height: auto;
}

.admin-ui .mud-table-pagination {
    border-top: 1px solid var(--au-border);
    font-size: 0.8rem;
    color: var(--au-muted);
}

/* ---------------------------------------------------------------- buttons */

/* Primary is the design's black pill, not MudBlazor's filled theme colour. */
.admin-ui .mud-button-root {
    border-radius: 999px;
    text-transform: none;
    font-weight: 600;
    font-size: 0.8rem;
    letter-spacing: 0;
    padding: 0.45rem 1.15rem;
    box-shadow: none !important;
    min-width: 0;
}

.admin-ui .mud-button-filled {
    background-color: var(--au-ink);
    color: #fff;
}

.admin-ui .mud-button-filled:hover {
    background-color: var(--au-navy);
}

.admin-ui .mud-button-filled.mud-button-disabled,
.admin-ui .mud-button-root:disabled {
    background-color: var(--au-line);
    color: var(--rem-ink-muted, #66706e);
}

/* Destructive actions keep their meaning - a delete button must not read as a primary.
   #C0392B was not a REMchannel colour; the design system's rejected status is. */
.admin-ui .mud-button-filled.mud-button-filled-error {
    background-color: var(--rem-color-status-rejected, #b91c1c);
}

.admin-ui .mud-button-filled.mud-button-filled-error:hover {
    background-color: #971616;
}

.admin-ui .mud-button-outlined {
    background: #fff;
    border-color: var(--au-line);
    color: var(--au-ink);
}

.admin-ui .mud-button-outlined:hover {
    background: var(--au-surface);
    border-color: var(--au-line);
}

.admin-ui .mud-button-text {
    color: var(--au-green);
}

.admin-ui .mud-icon-button {
    border-radius: 999px;
    color: var(--au-body);
}

.admin-ui .mud-icon-button:hover {
    background: var(--au-surface);
}

/* ---------------------------------------------------------------- inputs */

.admin-ui .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-color: var(--au-line) !important;
    border-radius: 8px;
}

.admin-ui .mud-input.mud-input-outlined:hover .mud-input-outlined-border {
    border-color: var(--rem-ink-muted, #66706e) !important;
}

.admin-ui .mud-input.mud-input-outlined.mud-focused .mud-input-outlined-border {
    border-color: var(--au-accent) !important;
    border-width: 1px !important;
}

.admin-ui .mud-input-root {
    font-size: 0.85rem;
    color: var(--au-ink);
}

.admin-ui .mud-input-label {
    font-size: 0.85rem;
    color: var(--au-muted);
}

/* ---------------------------------------------------------------- chips as status tags */

.admin-ui .mud-chip {
    border-radius: 999px;
    font-size: 0.68rem;
    font-weight: 600;
    height: auto;
    padding: 0.22rem 0.65rem;
}

/* Solid fills carrying white text, not tinted washes. Every filled status pill on the
   REMadmin artboards is solid - the wash treatment that was here read as a different
   component from the same status shown elsewhere in the product, which is the drift the
   design system exists to stop.

   The fills are the status tokens, which are already the contrast-safe variants: the raw
   brand orange under white text is 2.94:1 and would fail AA, so warning maps to the
   pending token (#C2410C, 5.18:1) rather than to --rem-orange. */
.admin-ui .mud-chip.mud-chip-filled.mud-chip-color-success { background: var(--rem-color-status-published);   color: var(--rem-color-text-on-accent); }
.admin-ui .mud-chip.mud-chip-filled.mud-chip-color-error   { background: var(--rem-color-status-rejected);    color: var(--rem-color-text-on-accent); }
.admin-ui .mud-chip.mud-chip-filled.mud-chip-color-warning { background: var(--rem-color-status-pending);     color: var(--rem-color-text-on-accent); }
.admin-ui .mud-chip.mud-chip-filled.mud-chip-color-info    { background: var(--rem-color-status-in-progress); color: var(--rem-color-text-on-accent); }
.admin-ui .mud-chip.mud-chip-filled.mud-chip-color-default { background: var(--rem-color-status-not-started); color: var(--rem-color-text-on-accent); }

/* The same five, for hand-rolled markup that is not a MudChip. Named for the workflow state
   rather than for a severity, because that is what they actually mark. */
.admin-ui .au-tag {
    display: inline-flex;
    align-items: center;
    border-radius: var(--rem-radius-full, 999px);
    font-size: var(--rem-font-size-xs, 11px);
    font-weight: var(--rem-font-weight-semibold, 600);
    line-height: 1;
    padding: 0.35rem 0.7rem;
    color: var(--rem-color-text-on-accent);
    white-space: nowrap;
}

.admin-ui .au-tag.not-started { background: var(--rem-color-status-not-started); }
.admin-ui .au-tag.in-progress { background: var(--rem-color-status-in-progress); }
.admin-ui .au-tag.pending     { background: var(--rem-color-status-pending); }
.admin-ui .au-tag.published   { background: var(--rem-color-status-published); }
.admin-ui .au-tag.rejected    { background: var(--rem-color-status-rejected); }

/* ================================================================ REMadmin primitives

   The list screens on the REMadmin page of the design system are the same screen with
   different columns: page header, search + segmented control, then a striped table whose first
   cell is a chevron and a two-line title. Submission schedule, Organisations, Users and
   Subscriptions all draw it.

   These live here rather than in each screen's .razor.css for the reason this file exists at
   all: Blazor scoped CSS cannot be shared, so a per-screen copy is how the admin panel ended up
   with four private palettes and one screen using colours (#C0392B, #009677) that are not in
   the REMchannel palette. One definition, four consumers.

   Column widths ARE per screen, so .au-row reads them from --au-cols, which the screen sets.
   ================================================================================= */

/* ---- toolbar: search + segmented filter ---- */

.admin-ui .au-toolbar {
    display: flex;
    align-items: center;
    gap: var(--rem-spacing-md, 12px);
    flex-wrap: wrap;
}

.admin-ui .au-search {
    flex: 1 1 260px;
    min-width: 0;
    display: flex;
    align-items: center;
    gap: var(--rem-spacing-sm, 8px);
    height: 40px;
    padding: var(--rem-spacing-sm, 8px) var(--rem-spacing-md, 12px);
    background: var(--rem-color-bg-surface, #ffffff);
    border: var(--rem-border-hairline, 1px) solid var(--rem-color-border-strong, #dcddde);
    border-radius: var(--rem-radius-md, 8px);
    color: var(--rem-color-text-muted, #66706e);
}

/* "Focus takes the accent border" - the field, not just the input inside it. */
.admin-ui .au-search:focus-within { border-color: var(--au-accent); }

.admin-ui .au-search input {
    flex: 1;
    min-width: 0;
    border: 0;
    outline: 0;
    background: transparent;
    font-family: inherit;
    font-size: var(--rem-font-size-base, 13px);
    line-height: 20px;
    color: var(--rem-color-text-primary, #18181f);
}

.admin-ui .au-search input::placeholder { color: var(--rem-color-text-muted, #66706e); }

/* "One track, one selection. The selected segment fills in the product accent.
    Use for choosing a view; use Button for actions." */
.admin-ui .au-segmented {
    display: flex;
    align-items: center;
    gap: 2px;
    padding: 2px;
    flex-wrap: wrap;
    background: var(--rem-color-bg-surface, #ffffff);
    border: var(--rem-border-hairline, 1px) solid var(--rem-color-border-strong, #dcddde);
    border-radius: var(--rem-radius-md, 8px);
}

.admin-ui .au-segment {
    display: inline-flex;
    align-items: center;
    gap: var(--rem-spacing-xs, 6px);
    border: 0;
    background: transparent;
    border-radius: var(--rem-radius-sm, 6px);
    padding: var(--rem-spacing-xs, 6px) var(--rem-spacing-md, 12px);
    font-family: inherit;
    font-size: var(--rem-font-size-sm, 12px);
    font-weight: var(--rem-font-weight-semibold, 600);
    line-height: 16px;
    color: var(--rem-color-text-secondary, #5a5a5a);
    cursor: pointer;
    white-space: nowrap;
}

.admin-ui .au-segment:hover:not(.on) { background: var(--rem-color-bg-canvas, #f1f2f2); }
.admin-ui .au-segment.on { background: var(--au-accent); color: var(--rem-color-text-on-accent, #ffffff); }
.admin-ui .au-segment:focus-visible { outline: 2px solid var(--au-accent); outline-offset: 1px; }

.admin-ui .au-segment-count {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    padding: 0 var(--rem-spacing-xs, 6px);
    border-radius: var(--rem-radius-full, 999px);
    background: var(--rem-color-bg-canvas, #f1f2f2);
    font-size: var(--rem-font-size-xs, 11px);
    font-weight: var(--rem-font-weight-bold, 700);
    line-height: 15px;
    color: var(--rem-color-text-secondary, #5a5a5a);
    font-variant-numeric: tabular-nums;
}

/* The count has to stay legible once the segment fills with the accent. */
.admin-ui .au-segment.on .au-segment-count {
    background: rgba(255, 255, 255, 0.22);
    color: var(--rem-color-text-on-accent, #ffffff);
}

/* ---- stat strip ---- */

/* "Place several inside one card separated by 1px gaps; do not give each its own border."
   The card's background IS the hairline - the grid gap lets it show between white cells. */
.admin-ui .au-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rem-border-hairline, 1px);
    background: var(--rem-color-border-default, #ececec);
    border-radius: var(--rem-radius-md, 8px);
    overflow: hidden;
}

.admin-ui .au-stat {
    flex: 1 1 130px;
    min-width: 0;
    display: flex;
    flex-direction: column;
    gap: var(--rem-spacing-3xs, 2px);
    background: var(--rem-color-bg-surface, #ffffff);
    padding: var(--rem-spacing-lg, 16px);
    min-height: 80px;
}

.admin-ui .au-stat-count {
    font-size: var(--rem-font-size-2xl, 28px);
    font-weight: var(--rem-font-weight-bold, 700);
    line-height: 32px;
    color: var(--rem-color-text-primary, #18181f);
    font-variant-numeric: tabular-nums;
}

/* Only figures meaning "wrong" or "finished" take colour; the rest stay ink. */
.admin-ui .au-stat-count.warn { color: var(--rem-color-feedback-warning, #f37021); }
.admin-ui .au-stat-count.good { color: var(--rem-color-feedback-success, #00795f); }

.admin-ui .au-stat-label {
    font-size: var(--rem-font-size-sm, 12px);
    line-height: 17px;
    color: var(--rem-color-text-secondary, #5a5a5a);
}

/* ---- insight row ---- */

/* "One statement per row with a tinted circular badge. Stack several to explain a set of
    conditions; do not merge them into a bulleted panel." */
.admin-ui .au-insight {
    display: flex;
    align-items: center;
    gap: var(--rem-spacing-sm, 8px);
    background: var(--rem-color-bg-surface, #ffffff);
    border-radius: var(--rem-radius-md, 8px);
    padding: var(--rem-spacing-md, 12px);
    min-height: 56px;
}

.admin-ui .au-insight-badge {
    flex: 0 0 auto;
    width: 22px;
    height: 22px;
    border-radius: 11px;
    background: var(--rem-color-feedback-warning-wash, #fdeee4);
    color: var(--rem-color-feedback-warning-ink, #ad4f14);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-size: 12px;
}

.admin-ui .au-insight-text {
    flex: 1;
    margin: 0;
    font-size: var(--rem-font-size-base, 13px);
    line-height: 20px;
    color: var(--rem-color-text-primary, #18181f);
}

/* ---- table ---- */

/* "No divider rules. Alternate is the stripe. Header is plain text on the ground, never a
    filled bar." Hence: no borders, transparent header, striped rows. */
.admin-ui .au-table {
    display: flex;
    flex-direction: column;
    border-radius: var(--rem-radius-md, 8px);
    overflow: hidden;
}

.admin-ui .au-row {
    display: grid;
    grid-template-columns: var(--au-cols, 1fr);
    align-items: center;
    gap: var(--rem-spacing-md, 12px);
    padding: var(--rem-spacing-md, 12px) var(--rem-spacing-lg, 16px);
    min-height: 56px;
    background: var(--rem-color-bg-surface, #ffffff);
}

.admin-ui .au-row-head {
    background: transparent;
    font-size: var(--rem-font-size-sm, 12px);
    font-weight: var(--rem-font-weight-bold, 700);
    line-height: 18px;
    color: var(--rem-color-text-muted, #66706e);
    min-height: 0;
}

/* The stripe. nth-of-type counts the header, which is why even is the tinted one. */
.admin-ui .au-row:not(.au-row-head):nth-of-type(even) {
    background: var(--rem-color-bg-canvas, #f1f2f2);
}

/* "Expanded tints in the product accent so the row and its detail block read as one unit." */
/* The open row and its detail block carry the same accent tint, which is what binds them: the
   Table row component's own description says Expanded "tints in the product accent so the row and
   its detail block read as one unit".

   14%, not the 7% this started at. 7% of #30505C on white lands on #F1F3F4 - one value away from
   the #F1F2F2 zebra stripe - so an open row was pixel-for-pixel an ordinary alternate row and the
   tint told the reader nothing. 14% gives #E2E6E8, which is unmistakably cool and unmistakably
   not the stripe. */
.admin-ui .au-row.open,
.admin-ui .au-row.open:nth-of-type(even),
.admin-ui .au-detail {
    background: color-mix(in srgb, var(--au-accent) 14%, #ffffff);
}

.admin-ui .au-expander {
    flex: 0 0 auto;
    width: 20px;
    height: 20px;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    border: 0;
    background: transparent;
    color: var(--rem-color-text-muted, #66706e);
    cursor: pointer;
    padding: 0;
    font-size: 11px;
    transition: transform .12s ease;
}

.admin-ui .au-expander.open { transform: rotate(90deg); }
.admin-ui .au-expander:focus-visible { outline: 2px solid var(--au-accent); outline-offset: 1px; }

@media (prefers-reduced-motion: reduce) {
    .admin-ui .au-expander { transition: none; }
}

/* First cell: chevron, then a name over its identifiers. */
.admin-ui .au-titlecell {
    display: flex;
    align-items: center;
    gap: var(--rem-spacing-sm, 8px);
    min-width: 0;
}

.admin-ui .au-titlecell-text {
    display: flex;
    flex-direction: column;
    gap: var(--rem-spacing-3xs, 2px);
    min-width: 0;
}

.admin-ui .au-titlecell-name {
    font-size: var(--rem-font-size-base, 13px);
    font-weight: var(--rem-font-weight-semibold, 600);
    line-height: 18px;
    color: var(--rem-color-text-primary, #18181f);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-ui .au-titlecell-meta {
    font-size: var(--rem-font-size-sm, 12px);
    line-height: 16px;
    color: var(--rem-color-text-muted, #66706e);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-ui .au-num {
    font-size: var(--rem-font-size-md, 14px);
    line-height: 18px;
    color: var(--rem-color-text-primary, #18181f);
    font-variant-numeric: tabular-nums;
}

.admin-ui .au-cell-end { display: flex; align-items: center; justify-content: flex-end; }

/* The design's Secondary button: outlined pill, used for the per-row action and the pager. */
.admin-ui .au-action {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rem-spacing-xs, 6px);
    padding: var(--rem-spacing-xs, 6px) var(--rem-spacing-md, 12px);
    background: var(--rem-color-bg-surface, #ffffff);
    border: var(--rem-border-hairline, 1px) solid var(--rem-color-border-strong, #dcddde);
    border-radius: var(--rem-radius-full, 999px);
    font-family: inherit;
    font-size: var(--rem-font-size-sm, 12px);
    font-weight: var(--rem-font-weight-semibold, 600);
    line-height: 16px;
    color: var(--rem-color-text-primary, #18181f);
    cursor: pointer;
    white-space: nowrap;
    text-decoration: none; /* it is an <a> on the rows that navigate to a page */
}

.admin-ui .au-action:hover:not(:disabled) { background: var(--rem-color-bg-canvas, #f1f2f2); }
.admin-ui .au-action:disabled { color: var(--rem-color-text-muted, #66706e); cursor: not-allowed; opacity: .6; }
.admin-ui .au-action:focus-visible { outline: 2px solid var(--au-accent); outline-offset: 1px; }

/* ---- expanded detail ---- */

.admin-ui .au-detail {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rem-spacing-lg, 16px) 40px;
    padding: var(--rem-spacing-md, 12px) var(--rem-spacing-lg, 16px) var(--rem-spacing-lg, 16px) 44px;
}

.admin-ui .au-detail-item {
    display: flex;
    flex-direction: column;
    gap: var(--rem-spacing-3xs, 2px);
    min-width: 160px;
}

/* Secondary, not muted. The detail block sits on the 14% accent tint, where #66706E is 4.10:1
   and fails AA; #5A5A5A is 5.53:1. The labels are 11px, so large-text does not apply. */
.admin-ui .au-detail-label {
    font-size: var(--rem-font-size-xs, 11px);
    font-weight: var(--rem-font-weight-bold, 700);
    letter-spacing: .04em;
    text-transform: uppercase;
    color: var(--rem-color-text-secondary, #5a5a5a);
}

.admin-ui .au-detail-value {
    display: flex;
    align-items: center;
    gap: var(--rem-spacing-sm, 8px);
    font-size: var(--rem-font-size-base, 13px);
    line-height: 18px;
    color: var(--rem-color-text-primary, #18181f);
}

/* ---- empty state and pager ---- */

.admin-ui .au-empty {
    background: var(--rem-color-bg-surface, #ffffff);
    border-radius: var(--rem-radius-md, 8px);
    padding: 48px var(--rem-spacing-lg, 16px);
    text-align: center;
    font-size: var(--rem-font-size-md, 14px);
    color: var(--rem-color-text-secondary, #5a5a5a);
}

.admin-ui .au-pager {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: var(--rem-spacing-md, 12px);
}

.admin-ui .au-pager-text {
    font-size: var(--rem-font-size-sm, 12px);
    color: var(--rem-color-text-secondary, #5a5a5a);
    font-variant-numeric: tabular-nums;
}

/* The stack a list screen sits in. */
.admin-ui .au-screen {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 40px;
}

/* ---------------------------------------------------------------- tabs */

.admin-ui .mud-tabs-toolbar {
    background: transparent;
    border-bottom: 1px solid var(--au-border);
    min-height: auto;
}

.admin-ui .mud-tab {
    text-transform: none;
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--au-muted);
    min-width: 0;
    padding: 0.65rem 1rem;
}

.admin-ui .mud-tab.mud-tab-active {
    color: var(--au-ink);
}

/* The accent marks position, green marks success. They had been the same colour, so an
   active tab read as a passed state. */
.admin-ui .mud-tab-slider {
    background: var(--au-accent);
    height: 2px;
}

/* ---------------------------------------------------------------- dialogs */

/* MudBlazor renders dialogs into a portal at BODY level, outside the .admin-ui container on
   the page - so none of the rules above reach them, and every admin modal stayed on MudBlazor
   defaults while the screen behind it did not. Each admin <MudDialog> therefore carries
   Class="admin-ui" itself, which is what these selectors hang off. */

.admin-ui.mud-dialog {
    border-radius: 12px;
    box-shadow: 0 16px 48px rgba(24, 24, 31, 0.18) !important;
}

.admin-ui.mud-dialog .mud-dialog-title {
    padding: 1.25rem 1.5rem 0.75rem;
    border-bottom: 1px solid var(--au-border);
}

    /* Dialog titles are set as h6 throughout; size them as a dialog heading rather than as
       body copy. */
    .admin-ui.mud-dialog .mud-dialog-title .mud-typography-h6,
    .admin-ui.mud-dialog .mud-dialog-title h6 {
        font-size: 1.05rem;
        font-weight: 700;
        color: var(--au-ink);
    }

.admin-ui.mud-dialog .mud-dialog-content {
    padding: 1.35rem 1.5rem;
    color: var(--au-body);
}

.admin-ui.mud-dialog .mud-dialog-actions {
    padding: 0.9rem 1.5rem 1.15rem;
    border-top: 1px solid var(--au-border);
    gap: 0.5rem;
    /* Grouped right, as every other footer in the design is. Several of these dialogs used
       space-between, which pushed Save and Cancel to opposite ends of a wide modal. */
    justify-content: flex-end;
}

/* Form rhythm: MudBlazor's grid gutters leave fields touching in a dense dialog. */
.admin-ui.mud-dialog .mud-input-control {
    margin-bottom: 0.35rem;
}

.admin-ui.mud-dialog .mud-typography-subtitle1,
.admin-ui.mud-dialog .mud-typography-subtitle2 {
    font-size: 0.78rem;
    font-weight: 700;
    letter-spacing: 0.05em;
    text-transform: uppercase;
    color: var(--au-muted);
    margin-top: 0.5rem;
}

/* ---------------------------------------------------------------- alerts */

.admin-ui .mud-alert {
    border-radius: 8px;
    font-size: 0.85rem;
    box-shadow: none !important;
}

.admin-ui .mud-alert.mud-alert-filled-info,
.admin-ui .mud-alert.mud-alert-text-info {
    background: #EDF1F3;
    color: var(--au-navy);
}

/* ---------------------------------------------------------------- progress */

.admin-ui .mud-progress-circular {
    color: var(--au-green);
}

.admin-ui .mud-progress-linear-bar {
    background-color: var(--au-green);
}

/* ---------------------------------------------------------------- tier pills

   Tiers are a ladder, not three unrelated categories, so they are shaded as one ramp of the
   REMchannel green rather than given a colour each: Essential lightest, Intelligence deepest.
   Reading "higher = darker" is the point - a palette of three unrelated hues would say these are
   alternatives, when in fact each one contains the ones below it. */
.admin-ui .tier-pill {
    display: inline-block;
    margin-left: 8px;
    padding: 1px 8px;
    border-radius: 999px;
    font-size: 11px;
    font-weight: 600;
    letter-spacing: 0.02em;
    line-height: 18px;
    vertical-align: middle;
    white-space: nowrap;
}

.admin-ui .tier-pill-essential    { background: #E4F3EF; color: #00795F; }
.admin-ui .tier-pill-insight      { background: #C6E7DF; color: #00604C; }
.admin-ui .tier-pill-intelligence { background: #009677; color: #FFFFFF; }

/* "Current" marks which row of an assignment history is in effect. Deliberately not on the green
   ramp - it is a different fact from which tier was sold, and colouring it green would read as a
   fourth, highest tier. */
.admin-ui .tier-pill-current {
    background: var(--au-surface);
    color: var(--au-muted);
    border: 1px solid var(--au-line);
}

/* The stable key a service is gated on, shown under its display name. Monospaced and quiet: it is
   an identifier an administrator matches against code, not prose to read. */
.admin-ui .service-key-hint {
    font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
    font-size: 11px;
    color: var(--rem-ink-muted, #66706e);
    letter-spacing: 0.02em;
    margin-top: 2px;
}

/* The admin panel's ground.

   Every REMadmin artboard is white cards on the #F1F2F2 canvas, and .au-card, .au-table and the
   stat strip are all white by design - they are meant to sit ON something. The page was white, so a
   white card on a white page had nothing to separate it and the whole panel read as one flat
   sheet. This is the one rule that was missing.

   Scoped to .admin-ui, which AdminPanelLayout puts on .content-body, so the client apps keep
   their own grounds. */
.admin-ui {
    background: var(--rem-color-bg-canvas, #f1f2f2);
}

/* ==================================================================================== forms

   The edit surfaces, built against "15 · Edit organisation" (node 133:1224) and
   "16 · Edit user" (node 134:3591) on the REMadmin page of the design system.

   These are pages, not dialogs, and that is the design system's own rule rather than a
   preference: the Dialog component has exactly two variants - Confirm and Picker, both 560x300 -
   and its description says "Drill down by swapping the body in place, never by stacking a second
   dialog." There is no large-form variant because a form was never meant to be one. Edit user
   carries 35 fields; it was a MaxWidth.Large modal.

   Geometry from the artboards: card 20px pad / 8px radius / 16px gap, section title 15px
   SemiBold, two field columns with 16px row and 24px column gaps, label 12px muted, control 40px
   tall with an 8px radius. */

.admin-ui .au-form {
    display: flex;
    flex-direction: column;
    gap: 18px;
    padding-bottom: 2rem;
}

/* ---------------------------------------------------------------- page head */

.admin-ui .au-pagehead {
    display: flex;
    flex-direction: column;
    gap: 6px;
}

.admin-ui .au-pagehead-row {
    display: flex;
    align-items: center;
    gap: var(--rem-spacing-lg, 16px);
    flex-wrap: wrap;
}

.admin-ui .au-pagetitle {
    flex: 1 0 0;
    min-width: 0;
    margin: 0;
    font-size: var(--rem-font-size-2xl, 28px);
    font-weight: var(--rem-font-weight-bold, 700);
    color: var(--rem-color-text-primary, #18181f);
    line-height: 1.15;
    overflow-wrap: anywhere;
}

/* The identifying facts, on one line under the title: code, legacy id, sector, country. They are
   what tells two similarly named organisations apart, so they are not buried in the first card. */
.admin-ui .au-pagemeta {
    margin: 0;
    font-size: var(--rem-font-size-md, 14px);
    color: var(--rem-color-text-secondary, #5a5a5a);
}

/* ---------------------------------------------------------------- card */

.admin-ui .au-card {
    display: flex;
    flex-direction: column;
    gap: var(--rem-spacing-lg, 16px);
    padding: 20px;
    background: var(--rem-color-bg-surface, #fff);
    border-radius: var(--rem-radius-md, 8px);
}

.admin-ui .au-card-title {
    margin: 0;
    font-size: 15px;
    font-weight: var(--rem-font-weight-semibold, 600);
    color: var(--rem-color-text-primary, #18181f);
}

.admin-ui .au-card-note {
    margin: -8px 0 0;
    font-size: var(--rem-font-size-sm, 12px);
    color: var(--rem-color-text-muted, #66706e);
    max-width: 70ch;
}

/* ---------------------------------------------------------------- fields */

/* Two columns, as drawn. Grid rather than the artboard's fixed 454px so the pair still divides
   the width evenly when the sidebar is collapsed. */
.admin-ui .au-fields {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: 16px 24px;
    align-items: start;
}

@media (max-width: 900px) {
    .au-fields { grid-template-columns: minmax(0, 1fr); }
}

.admin-ui .au-field {
    display: flex;
    flex-direction: column;
    gap: 6px;
    min-width: 0;
}

/* A field that needs the full width - a long note, a chip set, a table. */
.admin-ui .au-field-wide { grid-column: 1 / -1; }

.admin-ui .au-field-label {
    font-size: var(--rem-font-size-sm, 12px);
    font-weight: var(--rem-font-weight-regular, 400);
    color: var(--rem-color-text-muted, #66706e);
}

.admin-ui .au-req {
    color: var(--rem-color-feedback-critical, #a14732);
    margin-left: 2px;
}

/* ---------------------------------------------------------------- controls */

.admin-ui .au-input,
.admin-ui .au-select {
    display: flex;
    align-items: center;
    gap: var(--rem-spacing-sm, 8px);
    width: 100%;
    height: 40px;
    padding: var(--rem-spacing-sm, 8px) var(--rem-spacing-md, 12px);
    background: var(--rem-color-bg-surface, #fff);
    border: var(--rem-border-hairline, 1px) solid var(--rem-color-border-strong, #dcddde);
    border-radius: var(--rem-radius-md, 8px);
    font-family: inherit;
    font-size: var(--rem-font-size-base, 13px);
    line-height: 20px;
    color: var(--rem-color-text-primary, #18181f);
}

.admin-ui .au-select { appearance: auto; }

.admin-ui .au-input:focus,
.admin-ui .au-select:focus {
    outline: none;
    border-color: var(--rem-brand-remadmin-accent, #30505c);
    box-shadow: 0 0 0 3px rgba(48, 80, 92, 0.14);
}

/* Reference-only fields. They still read as fields because they are part of the record, but the
   sunken ground says up front that typing in them will do nothing - which the old dialog said
   only by refusing the keystroke. */
.admin-ui .au-input[readonly],
.admin-ui .au-input:disabled,
.admin-ui .au-select:disabled {
    background: var(--rem-black-5, #f1f2f2);
    color: var(--rem-color-text-secondary, #5a5a5a);
    cursor: default;
}

.admin-ui .au-input.bad,
.admin-ui .au-select.bad { border-color: var(--rem-color-feedback-critical, #a14732); }

.admin-ui .au-field-error {
    font-size: var(--rem-font-size-sm, 12px);
    color: var(--rem-color-feedback-critical, #a14732);
}

.admin-ui .au-field-help {
    font-size: var(--rem-font-size-sm, 12px);
    color: var(--rem-color-text-muted, #66706e);
}

.admin-ui .au-check {
    display: inline-flex;
    align-items: center;
    gap: var(--rem-spacing-sm, 8px);
    height: 40px;
    font-size: var(--rem-font-size-base, 13px);
    color: var(--rem-color-text-primary, #18181f);
}

/* ---------------------------------------------------------------- buttons */

.admin-ui .au-btn {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: var(--rem-spacing-xs, 6px);
    padding: var(--rem-spacing-sm, 8px) var(--rem-spacing-lg, 16px);
    border-radius: var(--rem-radius-full, 999px);
    border: var(--rem-border-hairline, 1px) solid var(--rem-color-bg-action, #18181f);
    background: var(--rem-color-bg-action, #18181f);
    color: var(--rem-color-text-on-action, #fff);
    font-family: inherit;
    font-size: var(--rem-font-size-base, 13px);
    font-weight: var(--rem-font-weight-semibold, 600);
    line-height: 18px;
    cursor: pointer;
    white-space: nowrap;
}

.admin-ui .au-btn-secondary {
    background: var(--rem-color-bg-surface, #fff);
    border-color: var(--rem-color-border-strong, #dcddde);
    color: var(--rem-color-text-primary, #18181f);
}

.admin-ui .au-btn:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.admin-ui .au-btn:focus-visible {
    outline: 2px solid var(--rem-brand-remadmin-accent, #30505c);
    outline-offset: 2px;
}

/* ---------------------------------------------------------------- chips */

.admin-ui .au-chips {
    display: flex;
    flex-wrap: wrap;
    gap: var(--rem-spacing-sm, 8px);
}

.admin-ui .au-chip {
    display: inline-flex;
    align-items: center;
    gap: var(--rem-spacing-xs, 6px);
    padding: 6px var(--rem-spacing-md, 12px);
    border-radius: var(--rem-radius-full, 999px);
    border: var(--rem-border-hairline, 1px) solid var(--rem-color-border-strong, #dcddde);
    background: var(--rem-color-bg-surface, #fff);
    font-family: inherit;
    font-size: var(--rem-font-size-sm, 12px);
    color: var(--rem-color-text-secondary, #5a5a5a);
    cursor: pointer;
}

.admin-ui .au-chip.on {
    background: var(--rem-brand-remadmin-accent, #30505c);
    border-color: var(--rem-brand-remadmin-accent, #30505c);
    color: var(--rem-color-text-on-accent, #fff);
    font-weight: var(--rem-font-weight-semibold, 600);
}

/* ---------------------------------------------------------------- state */

.admin-ui .au-formnote {
    padding: var(--rem-spacing-md, 12px) var(--rem-spacing-lg, 16px);
    border-radius: var(--rem-radius-md, 8px);
    font-size: var(--rem-font-size-base, 13px);
    border: var(--rem-border-hairline, 1px) solid transparent;
}

.admin-ui .au-formnote.bad {
    background: #fdf0ec;
    border-color: var(--rem-color-feedback-critical, #a14732);
    color: var(--rem-color-feedback-critical, #a14732);
}

.admin-ui .au-formnote.info {
    background: var(--rem-black-5, #f1f2f2);
    border-color: var(--rem-color-border-default, #ececec);
    color: var(--rem-color-text-secondary, #5a5a5a);
}

/* ==================================================================================== dashboard

   From "00 · Dashboard" (design system node 125:1178). The stat strip, insight row and card are
   the existing primitives; what is new here is the band heading, the insight-as-link, and the
   role bars. */

/* The small uppercase heading that separates the bands. Deliberately not an .au-card-title: it
   labels a group of cards rather than sitting inside one, so it takes the muted colour and the
   canvas as its ground. */
.admin-ui .au-band {
    margin: var(--rem-spacing-sm, 8px) 0 0;
    font-size: var(--rem-font-size-sm, 12px);
    font-weight: var(--rem-font-weight-bold, 700);
    letter-spacing: .4px;
    text-transform: uppercase;
    color: var(--rem-color-text-muted, #66706e);
}

/* An insight you cannot act on from where you read it is a fact, not an insight - so each row is
   a link to the screen that can do something about it. */
.admin-ui .au-insight-link {
    text-decoration: none;
    cursor: pointer;
}

.admin-ui .au-insight-link:hover,
.admin-ui .au-insight-link:focus-visible {
    background: color-mix(in srgb, var(--au-accent) 5%, #ffffff);
}

.admin-ui .au-insight-link:focus-visible {
    outline: 2px solid var(--au-accent);
    outline-offset: 2px;
}

.admin-ui .au-insight-go {
    flex: 0 0 auto;
    font-size: 11px;
    color: var(--rem-color-text-muted, #66706e);
}

/* Badge tones. Warning is the default in the base rule; these are the other two. */
.admin-ui .au-insight-badge.bad {
    background: #f6ebe8;
    color: var(--rem-color-feedback-critical, #a14732);
}

.admin-ui .au-insight-badge.info {
    background: #e7edf8;
    color: #2f4d80;
}

/* ---------------------------------------------------------------- role bars */

.admin-ui .au-bars {
    display: flex;
    flex-direction: column;
    gap: var(--rem-spacing-md, 12px);
}

.admin-ui .au-bar-row {
    display: flex;
    align-items: center;
    gap: var(--rem-spacing-md, 12px);
}

.admin-ui .au-bar-label {
    flex: 0 0 200px;
    min-width: 0;
    font-size: var(--rem-font-size-base, 13px);
    color: var(--rem-color-text-primary, #18181f);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.admin-ui .au-bar-track {
    flex: 1 1 auto;
    min-width: 0;
    height: 6px;
    border-radius: var(--rem-radius-full, 999px);
    background: var(--rem-color-border-default, #ececec);
    overflow: hidden;
}

.admin-ui .au-bar-fill {
    display: block;
    height: 100%;
    border-radius: var(--rem-radius-full, 999px);
    background: var(--au-accent);
}

/* Tabular figures so the column reads as a column rather than as ragged text. */
.admin-ui .au-bar-value {
    flex: 0 0 56px;
    text-align: right;
    font-size: var(--rem-font-size-base, 13px);
    font-weight: var(--rem-font-weight-bold, 700);
    color: var(--rem-color-text-secondary, #5a5a5a);
    font-variant-numeric: tabular-nums;
}

/* Narrow: the label goes above its own bar rather than squeezing the track to nothing. */
@media (max-width: 700px) {
    .admin-ui .au-bar-row {
        display: grid;
        grid-template-columns: 1fr auto;
        gap: 4px var(--rem-spacing-sm, 8px);
    }
    .admin-ui .au-bar-label { flex: none; }
    .admin-ui .au-bar-track { grid-column: 1 / -1; }
}

/* ---------------------------------------------------------------- policy matrix

   From "08 · Roles" (node 72:573). Roles across the top, policies down the side, a tick or a
   cross in each cell. */

/* Wider than a narrow window, so it scrolls inside its own box rather than pushing the page
   sideways. */
.admin-ui .au-matrix-scroll {
    overflow-x: auto;
    margin: 0 calc(var(--rem-spacing-lg, 16px) * -1);
    padding: 0 var(--rem-spacing-lg, 16px);
}

.admin-ui .au-matrix {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--rem-font-size-base, 13px);
}

.admin-ui .au-matrix th,
.admin-ui .au-matrix td {
    padding: var(--rem-spacing-sm, 8px) var(--rem-spacing-md, 12px);
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
}

.admin-ui .au-matrix thead th {
    font-size: var(--rem-font-size-sm, 12px);
    font-weight: var(--rem-font-weight-semibold, 600);
    color: var(--rem-color-text-secondary, #5a5a5a);
    border-bottom: var(--rem-border-hairline, 1px) solid var(--rem-color-border-default, #ececec);
}

/* The policy column is the one thing you read as prose, so it is the only left-aligned column and
   the only one allowed to wrap. */
.admin-ui .au-matrix .au-matrix-rowhead {
    text-align: left;
    white-space: normal;
    font-weight: var(--rem-font-weight-semibold, 600);
    color: var(--rem-color-text-primary, #18181f);
    min-width: 220px;
}

/* The policy's real name, for matching this screen against the code. */
.admin-ui .au-matrix-key {
    display: block;
    font-size: var(--rem-font-size-xs, 11px);
    font-weight: var(--rem-font-weight-regular, 400);
    color: var(--rem-color-text-muted, #66706e);
}

/* Hairline between rows only. Vertical rules would turn the grid into a spreadsheet, and the
   design system is explicit that tables carry no divider rules of their own. */
.admin-ui .au-matrix tbody tr + tr th,
.admin-ui .au-matrix tbody tr + tr td {
    border-top: var(--rem-border-hairline, 1px) solid var(--rem-color-border-default, #ececec);
}

.admin-ui .au-matrix td.yes { color: var(--rem-color-feedback-success, #00795f); }

/* A denial is information, not an alarm - it is muted rather than red, so that a column of
   crosses does not read as a page full of errors. */
.admin-ui .au-matrix td.no { color: var(--rem-black-40, #a7a9ac); }

.admin-ui .au-matrix-pending { color: var(--rem-black-40, #a7a9ac); }

/* ---------------------------------------------------------------- reports registry

   From nodes 172:1424 / 1460 / 1496 / 1532. Report · id · status · entitled to · action. */

.admin-ui .reports-table {
    --au-cols: minmax(240px, 1fr) 150px 110px minmax(130px, 180px) 110px;
}

@media (max-width: 1100px) {
    .admin-ui .reports-table { --au-cols: minmax(200px, 1fr) 130px 100px 130px 100px; }
}

/* Narrow: the identifier and the entitlement drop out. The name, the status and the way in stay,
   which are what you need to act on a row. */
@media (max-width: 900px) {
    .admin-ui .reports-table { --au-cols: 1fr auto; }
    .admin-ui .reports-id,
    .admin-ui .reports-entitled { display: none; }
    .admin-ui .reports-table .au-row-head { display: none; }
}

/* Monospaced figures so two ids of the same length line up and can be compared down the column. */
.admin-ui .reports-id {
    font-family: ui-monospace, "SF Mono", Menlo, Consolas, monospace;
    font-size: var(--rem-font-size-sm, 12px);
    color: var(--rem-color-text-secondary, #5a5a5a);
}

.admin-ui .reports-entitled {
    font-size: var(--rem-font-size-base, 13px);
    color: var(--rem-color-text-primary, #18181f);
}

/* An absence, not a value - and one worth noticing, since it means anyone entitled to reports at
   all can open this one. */
.admin-ui .reports-unrestricted { color: var(--rem-color-text-muted, #66706e); }

.admin-ui .reports-connection { padding: 0; }

.admin-ui .reports-missing { color: var(--rem-color-feedback-critical, #a14732); }

.admin-ui .reports-cautions { background: var(--rem-color-feedback-warning-wash, #fdeee4); }

.admin-ui .reports-caution-list {
    margin: 0;
    padding-left: var(--rem-spacing-lg, 16px);
    display: flex;
    flex-direction: column;
    gap: var(--rem-spacing-sm, 8px);
    font-size: var(--rem-font-size-base, 13px);
    line-height: 20px;
    color: var(--rem-color-text-primary, #18181f);
}