/*
 * REMchannel global brand override.
 *
 * Source: wwwroot/assets/branding/Remchannel-Brand-CI-Guide-2023.pdf
 * ("REMchannel Visual Identity Guidelines", Dec 2022).
 *
 * MudBlazor components are themed via the RemChannelTheme MudTheme object in
 * MainLayout.razor (both the server and client copies) - that is the source of truth
 * for buttons, inputs, tables, dialogs, alerts etc. This file covers what the C# theme
 * does not reach: the base font stack, legacy Bootstrap-era classes still used in some
 * hand-rolled markup (app.css), and generic browser chrome (scrollbar, selection, focus).
 *
 * Loaded last in App.razor's <head>, after app.css and MudBlazor's own stylesheet.
 */

:root {
    /* ---- Primary palette ---- */
    --rem-steel-blue: #30505c;
    --rem-steel-blue-80: #58737c;
    --rem-steel-blue-60: #83969d;
    --rem-steel-blue-40: #acb9bf;
    --rem-green: #009677;
    --rem-green-80: #33ab92;
    --rem-green-60: #66c0ad;
    --rem-green-40: #99d5c9;
    --rem-black: #000;
    --rem-black-80: #58595b;
    --rem-black-60: #808285;
    --rem-black-40: #a7a9ac;
    --rem-black-15: #dcddde;
    --rem-black-5: #f1f2f2;
    --rem-paper: #fff;

    /* Every filled primary CTA pill in the UI Elements Reference (toolbars.svg,
       form-input*.svg - "New job profile", "+ Label") renders near-black, not the
       brand green used elsewhere for selection/active-state tint (e.g. the A-Z
       letter filter's selected tab). Distinct from --rem-black so the source is
       traceable if the two ever need to diverge further. */
    --rem-button-primary: #18181f;

    /* The Figma Button component names the same two values --rem-color-bg-action and
       --rem-color-text-on-action. Aliased rather than renamed: --rem-button-primary is used in
       eight places across datasubmission.css and the MudBlazor overrides, and a rename for
       tidiness is a rename that has to be right in all of them. */
    --rem-color-bg-action: var(--rem-button-primary);
    --rem-color-text-on-action: #fff;

    /* ---- Secondary palette ---- */
    --rem-orange: #f37021;
    --rem-orange-80: #f58d4d;
    --rem-orange-60: #f8a97a;
    --rem-orange-40: #fac6a6;
    --rem-rust: #a14732;
    --rem-rust-80: #b46c5b;
    --rem-rust-60: #c79184;
    --rem-rust-40: #d9b5ad;
    --rem-blue: #25408f;
    --rem-blue-80: #5166a5;
    --rem-blue-60: #7c8cbc;
    --rem-blue-40: #a8b3d2;
    --rem-grey: #5a5a5a;
    --rem-grey-80: #7a7a7a;
    --rem-grey-60: #9c9c9c;
    --rem-grey-40: #bcbcbc;

    /* ---- Accessible variants ----
       The palette above is calibrated for fills and graphics, and several of those values do
       not survive being used as small text or as a pill behind white text. WCAG AA wants
       4.5:1 for text under 18.66px bold, and the status pills are 10.9px bold.

       Measured, not estimated. Each ratio below was computed from the sRGB relative
       luminance formula against the ground the colour actually sits on - which for anything
       in a table means BOTH #FFFFFF and the #F1F2F2 canvas, because rows alternate.

         --rem-green  #009677 as text .... 3.73:1  fails
         --rem-orange #F37021 as text .... 2.94:1  fails
         #8A9793      as text ............ 3.03:1 on white, 2.70 on canvas - fails both
         #A3A3A3      under white text ... 2.52:1  fails
         #16A34A      under white text ... 3.30:1  fails
         #EA580C      under white text ... 3.56:1  fails

       Keep using the palette colours for fills, borders, charts and icons. Use these when
       the colour carries text, or when white text sits on it. */

    /* Text on a light ground */
    --rem-ink-muted: var(
        --rem-color-text-muted
    ); /* 5.11:1 white / 4.56:1 canvas - replaces #8A9793 and #808285 as text */

    --rem-ink-green: var(--rem-color-feedback-success); /* 5.38:1 white / 4.80:1 canvas - green as small text */
    --rem-ink-red: var(--rem-color-feedback-critical); /* 6.06:1 white / 5.41:1 canvas - the rust, as small text */
    --rem-ink-orange: var(--rem-color-feedback-warning-ink); /* 5.38:1 white / 4.79:1 canvas - orange as small text */

    /* Solid fills that carry white text */
    --rem-fill-neutral: var(--rem-color-status-not-started); /* 4.61:1 - "Not started" */
    --rem-fill-orange: var(--rem-color-status-pending); /* 5.18:1 - "Pending" */
    --rem-fill-green: var(--rem-color-status-published); /* 5.02:1 - "Published" */
    --rem-fill-warning: #b35418; /* 5.00:1 - warning severity */

    /* ---- Design system tokens ----
       Pulled from the "REMchannel Design System" Figma file (zX6oGzsvzGXA4SlK5z1xvH) via
       get_variable_defs, verbatim. That file's own cover states it was generated from this
       codebase against the Brand CI Guide 2023, so these are the same values as the palette
       above - what the file adds is a settled set of NAMES and a scale for spacing, radius
       and type, which the CSS here had been re-deriving per screen.

       Where a token below duplicates one of the accessible variants, the alias further down
       now points here rather than repeating the hex, so there is one definition per value. */

    /* Text */
    --rem-color-text-primary: #18181f;
    --rem-color-text-secondary: #5a5a5a;
    --rem-color-text-muted: #66706e;
    --rem-color-text-on-accent: #fff;

    /* Surfaces and rules */
    --rem-color-bg-surface: #fff;
    --rem-color-bg-canvas: #f1f2f2;
    --rem-color-border-default: #ececec;
    --rem-color-border-strong: #dcddde;
    --rem-border-hairline: 1px;

    /* Per-application accent. REMadmin's is the brand steel blue; REMprofile's rail is the
       rust, REMeasure's accent is the orange. One token per app rather than a single
       "accent" that means something different on every screen. */
    --rem-brand-remadmin-accent: #30505c;

    /* Feedback */
    --rem-color-feedback-success: #00795f;
    --rem-color-feedback-warning: #f37021;
    --rem-color-feedback-warning-ink: #ad4f14;
    --rem-color-feedback-warning-wash: #fdeee4;
    --rem-color-feedback-critical: #a14732;

    /* Workflow status. Solid fills carrying white text - the design system draws these as
       filled pills everywhere, never as tinted washes. */
    --rem-color-status-not-started: #757575;
    --rem-color-status-in-progress: #2563eb;
    --rem-color-status-pending: #c2410c;
    --rem-color-status-published: #15803d;
    --rem-color-status-rejected: #b91c1c;

    /* Type scale */
    --rem-font-size-xs: 11px;
    --rem-font-size-sm: 12px;
    --rem-font-size-base: 13px;
    --rem-font-size-md: 14px;
    --rem-font-size-2xl: 28px;
    --rem-font-weight-regular: 400;
    --rem-font-weight-semibold: 600;
    --rem-font-weight-bold: 700;

    /* Spacing scale */
    --rem-spacing-3xs: 2px;
    --rem-spacing-2xs: 4px;
    --rem-spacing-xs: 6px;
    --rem-spacing-sm: 8px;
    --rem-spacing-md: 12px;
    --rem-spacing-lg: 16px;

    /* Radius */
    --rem-radius-sm: 6px;
    --rem-radius-md: 8px;
    --rem-radius-lg: 10px;
    --rem-radius-full: 999px;
    --rem-radius-xl: 12px;

    /* Dialog-component spec tokens (Figma Dialog 38:6) not previously mirrored. */
    --rem-spacing-xl: 24px;
    --rem-font-size-xl: 20px;
    --rem-color-text-body: #35353b;

    /* Card-component spec tokens (Figma Card 34:6): a white surface on the grey canvas,
       a single hairline border (border-default #ececec) does the separating, radius-lg,
       and NEVER a shadow - elevation is reserved for things that float (dialogs/popovers). */
    --rem-card-bg: var(--rem-color-bg-surface, #fff);
    --rem-card-border-color: var(--rem-color-border-default, #ececec);
    --rem-card-radius: var(--rem-radius-lg, 10px);
    --rem-card-padding: var(--rem-spacing-xl, 24px);

    /* ---- Semantic aliases, for anything hand-rolled outside MudBlazor ---- */
    --rem-font-primary: "Montserrat", -apple-system, "Segoe UI", helvetica, arial, sans-serif;
    --rem-color-link: var(--rem-green);
    --rem-color-link-hover: var(--rem-steel-blue);
    --rem-color-focus-ring: var(--rem-green);
    --rem-color-cta: var(--rem-orange);
    --rem-color-disclaimer: var(--rem-black-80);
}

/* ---- Typography ---- */

/* Montserrat is the brand's primary font for all design applications (guide, p.3).
   MudBlazor components already pick this up from RemChannelTheme; this covers
   everything else - plain HTML, Bootstrap remnants, third-party markup. */
html,
body {
    font-family: var(--rem-font-primary);
}

h1,
h2,
h3,
h4,
h5,
h6 {
    font-family: var(--rem-font-primary);
    font-weight: 700; /* Montserrat Bold is used for headings */
}

/* Links, buttons, form validation and focus rings are defined directly in app.css
   using the --rem-* tokens above (single source per rule, rather than overriding
   app.css's rules a second time here). */

/* ---- Hero text (photo band + dark scrim on the home page, UserSubscriptions.razor) ----
   Needs guaranteed white contrast regardless of the photo underneath, independent of the
   theme's Tertiary colour (steel blue - correct for other uses, but unreliable here).
   Deliberately global rather than a component-scoped .razor.css: MudBlazor components
   don't propagate Blazor's CSS-isolation scope attribute to their own rendered root
   element, so a scoped rule targeting a bare class on a MudText silently never matches. */
.hero-text {
    color: var(--rem-paper) !important;
}

/* ---- Disclaimers / fine print (guide: Montserrat Regular, 80% black) ---- */
.disclaimer,
small,
.text-disclaimer {
    color: var(--rem-color-disclaimer);
}

/* ---- Primary CTA buttons ----
   MudTheme.Primary (green) stays as-is: MudSelect focus rings, floating labels and
   selected-item highlighting all key off it and match the reference there. Only the
   filled-button fill itself needs the override - see --rem-button-primary above. */
.mud-button-filled.mud-button-filled-primary {
    background-color: var(--rem-button-primary);
}

/* ---- Header tenant/organisation selectors ----
   UI Elements Reference (navigation.svg) shows the top-bar scope selectors as plain
   borderless text-links ("Country v  Organisation v"), not boxed floating-label
   fields. This app still needs to show which tenant/org is active (not just a
   static label), so TenancyOrganization.razor keeps MudSelect/MudAutocomplete
   showing the selected value - only the outline/underline chrome is stripped here
   to match the reference's lighter weight. */
.header-plain-select .mud-input-underline::before,
.header-plain-select .mud-input-underline::after {
    border-bottom: none !important;
}

.header-plain-select .mud-input-root {
    background: transparent !important;
}

/* ---- Selection & scrollbar, so even browser chrome reads on-brand ---- */
::selection {
    background-color: var(--rem-green-40);
    color: var(--rem-black);
}

::-webkit-scrollbar {
    width: 10px;
    height: 10px;
}

::-webkit-scrollbar-track {
    background: var(--rem-black-5);
}

::-webkit-scrollbar-thumb {
    background: var(--rem-black-40);
    border-radius: 6px;
}

::-webkit-scrollbar-thumb:hover {
    background: var(--rem-grey);
}

/* ==================================================================================== switch

   MudBlazor's Material-2 switch, made to read as on or off.

   As shipped it read as neither. Measured on the live control:

     off  track rgba(0,0,0,.537) at opacity .48   thumb #35353B (near black), 20px
     on   track #009677          at opacity .50   thumb #009677 (the SAME green as its track)

   So the track never reached full strength in either state - it was a faint smudge with no
   readable ends - and in the on state the thumb was the same colour as the track it sits on, so
   its position was invisible. What was left was a dark blob floating in a grey haze, which reads
   as a control halfway between its two states. The thumb was also larger than the track was tall
   (20px on 14px), so it overhung and blurred the ends further.

   The fix is the ordinary one: a solid track that reads as a channel, and a WHITE thumb whose
   position in that channel is the whole message. Colour then confirms the state rather than
   carrying it alone - which also means it survives being looked at by someone who cannot easily
   tell the green from the grey.

   The selectors mirror MudBlazor's own, because its rules for the checked state are written as
   `.mud-switch-base.mud-checked + .mud-switch-track` and simply outrank anything shorter:

     - track size comes from `.mud-switch-span`'s 12px padding around a 58x38 box, not from any
       width on the track itself, so the track is widened by reducing that padding
     - `opacity:.5` on the checked track needs a selector at least as specific to undo

   Kept in the brand sheet because switches appear in both the admin panel and the client apps and
   must not diverge; there were no .mud-switch rules anywhere in the codebase before this. */

/* The track fills this box minus its padding. 8px gives a 42x22 channel, which is taller than the
   16px thumb rather than thinner than it. */
.mud-switch .mud-switch-span {
    padding: 8px;
}

.mud-switch .mud-switch-span .mud-switch-track,
.mud-switch .mud-switch-base + .mud-switch-track,
.mud-switch .mud-switch-base.mud-checked + .mud-switch-track {
    opacity: 1;
    border-radius: var(--rem-radius-full, 999px);
    background-color: var(--rem-black-15, #dcddde);
    transition: background-color 0.15s ease;
}

.mud-switch .mud-switch-base.mud-checked + .mud-switch-track {
    background-color: var(--rem-green, #009677);
}

/* The thumb class carries its size in the name (mud-switch-thumb-medium and friends), so this
   matches on the prefix rather than pinning one size. White in both states: its POSITION is what
   says on or off, and the track colour only confirms it. */
.mud-switch [class*="mud-switch-thumb"] {
    width: 16px;
    height: 16px;
    border-radius: 50%;
    background-color: var(--rem-color-bg-surface, #fff);
    box-shadow: 0 1px 3px rgb(0 0 0 / 35%);
}

/* Where the thumb rests.

   MudBlazor centres the thumb inside a 53px hit area that is itself centred in the 58px span, so
   with the wider track the thumb sat 10px inside the channel at rest and hung 4px past its far
   end when checked. Both ends are 7px out, so both are shifted by the same 7px; the 20px of
   travel between them is MudBlazor's and is already correct for a 42px track holding a 16px
   thumb (42 - 16 - 3 - 3 = 20). */
.mud-switch .mud-switch-base {
    transform: translateX(-7px);
}

.mud-switch .mud-switch-base.mud-checked {
    transform: translateX(13px);
}

/* Disabled reads as off and clearly inert, rather than as the half-lit look the ENABLED control
   used to have. MudBlazor drops the track to opacity .12 with !important, which is the one place
   here that has to be answered in kind. */
.mud-switch .mud-switch-base.mud-switch-disabled + .mud-switch-track {
    opacity: 1 !important;
    background-color: var(--rem-black-5, #f1f2f2);
}

.mud-switch .mud-switch-base.mud-switch-disabled [class*="mud-switch-thumb"] {
    background-color: var(--rem-black-15, #dcddde);
    box-shadow: none;
}

/* -------------------------------------------------------------------------
   Dialog - the SINGLE source of truth for every MudBlazor dialog, admin and
   respondent alike. Matches the Figma Dialog component (Confirm/Picker, node
   38:6): a white 12px-radius panel on ONE elevation, 24px padding, 16px section
   rhythm, NO divider rules, Montserrat throughout, and pill buttons with an INK
   (#18181f) primary and a white outlined secondary. Dialogs render in a portal
   at <body> (outside .admin-ui), and this file is global, so a bare .mud-dialog
   rule reaches them all - any NEW <MudDialog> inherits this with no opt-in, which
   is exactly what earlier we did NOT want (admin=steel) and now DO. The old
   Class="admin-ui" hook on admin dialogs is now a harmless no-op.
   See navigation-and-dialog-rules memory.
   ------------------------------------------------------------------------- */
.mud-dialog {
    background-color: var(--rem-color-bg-surface, #fff) !important;
    border-radius: var(--rem-radius-xl, 12px) !important;
    box-shadow: 0 8px 32px rgb(0 0 0 / 12%) !important;
    font-family: var(--rem-font-primary) !important;
    overflow: hidden;
}

.mud-dialog .mud-dialog-title {
    padding: var(--rem-spacing-xl, 24px) var(--rem-spacing-xl, 24px) 0 !important;
    border-bottom: none !important;
}

.mud-dialog .mud-dialog-title,
.mud-dialog .mud-dialog-title .mud-typography-h6,
.mud-dialog .mud-dialog-title h6 {
    font-family: var(--rem-font-primary) !important;
    font-size: var(--rem-font-size-xl, 20px) !important;
    font-weight: 700 !important;
    line-height: 26px !important;
    color: var(--rem-color-text-primary, #18181f) !important;
}

.mud-dialog .mud-dialog-content {
    padding: var(--rem-spacing-lg, 16px) var(--rem-spacing-xl, 24px) !important;
    font-family: var(--rem-font-primary) !important;
    font-size: var(--rem-font-size-md, 14px) !important;
    line-height: 21px !important;
    color: var(--rem-color-text-body, #35353b) !important;
}

.mud-dialog .mud-dialog-actions {
    padding: var(--rem-spacing-sm, 8px) var(--rem-spacing-xl, 24px) var(--rem-spacing-xl, 24px) !important;
    border-top: none !important;
    gap: var(--rem-spacing-sm, 8px) !important;
    justify-content: flex-end !important;
}

/* Buttons: pill, SemiBold 13px, no uppercase. Every dialog action button is the SECONDARY
   (white outlined) pill by default... */
.mud-dialog .mud-dialog-actions .mud-button-root {
    border-radius: var(--rem-radius-full, 999px) !important;
    padding: var(--rem-spacing-sm, 8px) var(--rem-spacing-lg, 16px) !important;
    font-family: var(--rem-font-primary) !important;
    font-weight: 600 !important;
    font-size: var(--rem-font-size-base, 13px) !important;
    line-height: 18px !important;
    text-transform: none !important;
    min-width: 0 !important;
    background-color: var(--rem-color-bg-surface, #fff) !important;
    border: var(--rem-border-hairline, 1px) solid var(--rem-color-border-strong, #dcddde) !important;
    color: var(--rem-color-text-primary, #18181f) !important;
}

/* ...and the ONE primary action becomes the ink pill. The primary is signalled by
   Color="Color.Primary" in ANY variant (Filled / Outlined / Text) - which is how this codebase
   marks it, NOT by Filled. Keying off just .mud-button-filled-primary (as the first pass did)
   silently missed every Outlined-primary and left both buttons looking secondary. Placed after
   the base rule so it wins on source order. */
.mud-dialog .mud-dialog-actions .mud-button-filled-primary,
.mud-dialog .mud-dialog-actions .mud-button-outlined-primary,
.mud-dialog .mud-dialog-actions .mud-button-text-primary {
    background-color: var(--rem-color-bg-action, #18181f) !important;
    border-color: var(--rem-color-bg-action, #18181f) !important;
    color: var(--rem-color-text-on-action, #fff) !important;
}

/* Inputs inside a dialog match the Figma Text field (node 26:27): 13px Montserrat text and label,
   8px radius, muted placeholder. MudBlazor's default outlined input is ~16px, which reads oversized
   in the compact 560px dialog. */
.mud-dialog .mud-input-slot,
.mud-dialog .mud-input-root,
.mud-dialog .mud-input input,
.mud-dialog .mud-input-label,
.mud-dialog .mud-select .mud-input-slot {
    font-family: var(--rem-font-primary) !important;
    font-size: var(--rem-font-size-base, 13px) !important;
}

.mud-dialog .mud-input.mud-input-outlined .mud-input-outlined-border {
    border-radius: var(--rem-radius-md, 8px) !important;
}

.mud-dialog .mud-input input::placeholder {
    color: var(--rem-color-text-muted, #66706e) !important;
    font-size: var(--rem-font-size-base, 13px) !important;
    opacity: 1;
}

/* A MudBlazor outlined floating LABEL rests at a translateY calibrated for its default ~56px
   input; in our compact dialog input it sits below centre. Re-centre ONLY the resting label
   (:not(.mud-input-label-shrink)) - when it shrinks on focus/value it keeps MudBlazor's own
   float-up transform, so this must never apply to the shrunk state. Single-field name/search
   dialogs use a Placeholder instead (Figma Text field); this is for the multi-field forms. */
.mud-dialog .mud-input.mud-input-outlined .mud-input-label-inputcontrol:not(.mud-input-label-shrink) {
    top: 50% !important;
    transform: translate(14px, -50%) !important;
}

/* The one card surface. New screens should use .rem-card (or the --rem-card-* tokens)
   rather than re-deriving a white box, so the border colour, radius and no-shadow rule
   stay consistent. Figma Card 34:6. */
.rem-card {
    background: var(--rem-card-bg);
    border: var(--rem-border-hairline, 1px) solid var(--rem-card-border-color);
    border-radius: var(--rem-card-radius);
    padding: var(--rem-card-padding);
}

/* ============================================================================
   .professional-table - the one MudTable look. Converges every MudTable onto the
   Figma Table (admin screen 52:93) / .au-table language: a grey header band with
   12px Bold muted labels, 13px body cells, zebra-striped body, no shadow and no
   per-row rules (the stripe does the separating). Was a dead class (7 MudTables
   carried it, nothing defined it); now it is the shared hook. Global, because
   MudTables also live in the data-submission dialogs, not only .admin-ui. */
.professional-table.mud-table {
    box-shadow: none !important;
    border: none !important;
    background: var(--rem-color-bg-surface, #fff);
}

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

/* Header: grey band, 12px Bold muted, no heavy underline. !important to beat
   MudBlazor's own surface fill on the sticky header row/cell. */
.professional-table .mud-table-head,
.professional-table .mud-table-head .mud-table-row,
.professional-table .mud-table-head .mud-table-cell {
    background: var(--rem-color-bg-canvas, #f1f2f2) !important;
}

.professional-table .mud-table-head .mud-table-cell,
.professional-table .mud-table-head .mud-table-cell .mud-button-label,
.professional-table .mud-table-head .mud-table-sort-label {
    font-family: var(--rem-font-primary);
    font-size: var(--rem-font-size-sm, 12px) !important;
    font-weight: var(--rem-font-weight-bold, 700) !important;
    line-height: 18px;
    color: var(--rem-color-text-muted, #66706e) !important;
    text-transform: none;
    border-bottom: none !important;
}

/* Body: 13px ink cells, roomy rows, no per-row rule. */
.professional-table .mud-table-body .mud-table-cell {
    font-family: var(--rem-font-primary);
    font-size: var(--rem-font-size-base, 13px) !important;
    line-height: 20px;
    color: var(--rem-color-text-primary, #18181f);
    padding: var(--rem-spacing-md, 12px) var(--rem-spacing-lg, 16px);
    height: 56px;
    border-bottom: none;
}

/* Dense tables shrink a touch but stay readable. */
.professional-table.mud-table-dense .mud-table-body .mud-table-cell {
    height: 48px;
}

/* Zebra stripe on even body rows - matches .au-table and the Figma table. */
.professional-table .mud-table-body .mud-table-row:nth-of-type(even):not(.mud-table-empty-row) {
    background: var(--rem-color-bg-canvas, #f1f2f2);
}

.professional-table .mud-table-body .mud-table-row:hover:not(.mud-table-empty-row) {
    background: color-mix(in srgb, var(--rem-color-bg-canvas, #f1f2f2) 60%, #fff);
}

/* Pagination footer: quiet, 13px, no top rule. */
.professional-table .mud-table-pagination {
    border-top: none;
    font-size: var(--rem-font-size-base, 13px);
    color: var(--rem-color-text-body, #35353b);
}

/* The Figma table's pill status tag, for product screens. .au-tag is the same pill but scoped to
   the admin shell (.admin-ui), so a REMchannel table had no pill to reach for and status ended up
   as plain text or a private palette. Same status tokens, same modifier names. */
.rc-tag {
    display: inline-flex;
    align-items: center;
    border-radius: var(--rem-radius-full, 999px);
    padding: 0 10px;
    height: 22px;
    font-size: var(--rem-font-size-xs, 11px);
    font-weight: var(--rem-font-weight-semibold, 600);
    line-height: 1;
    letter-spacing: 0.02em;
    color: #fff;
    background: var(--rem-color-status-not-started, #757575);
    white-space: nowrap;
}

.rc-tag.not-started {
    background: var(--rem-color-status-not-started);
}

.rc-tag.in-progress {
    background: var(--rem-color-status-in-progress);
}

.rc-tag.pending {
    background: var(--rem-color-status-pending);
}

.rc-tag.published {
    background: var(--rem-color-status-published);
}

.rc-tag.rejected {
    background: var(--rem-color-status-rejected);
}

/* A quiet tag for a classification rather than a state (where a row came from, a type). */
.rc-tag.muted {
    color: var(--rem-color-text-muted, #66706e);
    background: var(--rem-color-bg-canvas, #f1f2f2);
}

/* Muted inline text (an absent value), instead of a literal grey per screen. */
.rc-muted {
    color: var(--rem-color-text-muted, #66706e);
}

/* Plain-HTML variant of the Figma table (52:93). MudTables hook into .professional-table above;
   hand-rolled <table class="au-table"> screens (the org subscription app list, the history table)
   were unstyled because .au-table had no rule of its own - this is it. Grey header band, 12px bold
   muted labels, 13px cells, zebra body, no shadow, no per-row rule. */
.admin-ui .au-table {
    width: 100%;
    border-collapse: collapse;
    font-family: var(--rem-font-primary);
    font-size: var(--rem-font-size-base, 13px);
    color: var(--rem-color-text-primary, #18181f);
}

.admin-ui .au-table thead th {
    background: var(--rem-color-bg-canvas, #f1f2f2);
    color: var(--rem-color-text-muted, #66706e);
    font-size: 12px;
    font-weight: 700;
    text-align: left;
    padding: 10px 16px;
    border-bottom: none;
    white-space: nowrap;
}

.admin-ui .au-table tbody td {
    padding: 12px 16px;
    line-height: 20px;
    vertical-align: middle;
    border-bottom: none;
}

.admin-ui .au-table tbody tr:nth-of-type(even) {
    background: var(--rem-color-bg-canvas, #f1f2f2);
}

/* au-table sortable headers, horizontal-scroll wrapper, empty state, and the clean pager that
   replaced MudBlazor's circular first/prev/next/last buttons on the Services / Subscription
   Packages screen. Kept global (not scoped) alongside .au-table so every au-table screen shares it. */
.admin-ui .au-table thead th[role="button"] {
    cursor: pointer;
    user-select: none;
}

.admin-ui .au-table thead th[role="button"]:hover {
    color: var(--rem-color-text-primary, #18181f);
}

.admin-ui .au-table .svc-sort {
    display: inline-block;
    width: 10px;
    color: var(--rem-color-text-primary, #18181f);
    font-size: 11px;
}

.admin-ui .au-table td.svc-empty {
    padding: 28px 16px;
    text-align: center;
    color: var(--rem-color-text-muted, #66706e);
}

.admin-ui .au-table-wrap {
    overflow-x: auto;
    border: 1px solid var(--rem-color-border-default, #ececec);
    border-radius: var(--rem-radius-lg, 12px);
}

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

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

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

/* Per-app accent that eases between products. --rem-app-accent is an animatable custom property on
   the (persistent) <html>, set from the route by js/main.js on each navigation; because it lives
   above every layout, anything reading var(--rem-app-accent) - e.g. the account avatar, even as its
   per-app layout is rebuilt - inherits a value that eases from one product's colour to the next. */
@property --rem-app-accent {
    syntax: "<color>";
    inherits: true;
    initial-value: #009677;
}

:where(:root) {
    --rem-app-accent: #009677; /* REMchannel green until the route sets its own */

    transition: --rem-app-accent 0.5s ease;
}

@media (prefers-reduced-motion: reduce) {
    :where(:root) {
        transition: none;
    }
}

/* The shared list pager (Components/Shared/ListPager.razor): quiet 12px count on the left, outlined
   pill buttons on the right, the current page filled. Global, so every product's lists share it. */
.rc-pager {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--rem-spacing-md, 12px);
    flex-wrap: wrap;
    margin-top: var(--rem-spacing-md, 12px);
}

.rc-pager-info {
    font-size: var(--rem-font-size-sm, 12px);
    color: var(--rem-color-text-muted, #66706e);
}

.rc-pager-controls {
    display: flex;
    align-items: center;
    gap: var(--rem-spacing-xs, 4px);
}

.rc-pager-btn {
    min-width: 32px;
    height: 32px;
    padding: 0 12px;
    border: 1px solid var(--rem-color-border-default, #ececec);
    border-radius: 999px;
    background: var(--rem-color-bg-surface, #fff);
    color: var(--rem-color-text-primary, #18181f);
    font: inherit;
    font-size: var(--rem-font-size-base, 13px);
    cursor: pointer;
}

.rc-pager-btn:disabled {
    color: var(--rem-color-text-muted, #66706e);
    cursor: default;
    opacity: 0.6;
}

.rc-pager-btn:hover:not(:disabled) {
    border-color: var(--rem-color-text-muted, #66706e);
}

.rc-pager-num {
    padding: 0 8px;
}

.rc-pager-num.on {
    background: var(--rem-color-text-primary, #18181f);
    border-color: var(--rem-color-text-primary, #18181f);
    color: #fff;
}

.rc-pager-gap {
    padding: 0 4px;
    color: var(--rem-color-text-muted, #66706e);
}