/* ═══════════════════════════════════════════════════════════════════════════
   UcllReMaster — UCLL Research & Expertise · Digital Solutions — MASTER
   realm admin console (full restyle of keycloak.v2/admin, Keycloak 26.6.1)
   ───────────────────────────────────────────────────────────────────────────
   Rebuilt from the MAB-/MAR-/MAY-Admin* design (14 screens × 3 servers) on
   the UCLL design-system tokens (tokens.json, LIGHT values). This is the BASE
   theme; its defaults are the hub.re-frame (MAR, red) environment. The child
   themes UcllReMasterAuth / -Hub / -Test load this file and then css/env.css,
   which re-sets ONLY the "Environment" block of :root. The token sheet with
   sources, deviations and measured contrast is in docs/UcllRe-admin.md.

   Design traits: the environment banner (stripes, icon, title, line), a 5px
   environment frame round the window, a white masthead with the R&E lock-up,
   "Digital Solutions / Admin Console" and the environment badge, a tinted
   sidebar with a dashed "restricted" realm block and solid current item, nav
   icons, the page-hero card (eyebrow, navy title, red brush, red lines,
   planes, lightbulb), red-underlined tabs, pastel-red table heads with a red
   rule, red primary / navy-outlined secondary buttons, square corners,
   Montserrat for UI and Aleo for running text.

   Every ⚠️ was a visible defect measured on Keycloak 26.6.1 (the skill's
   references/admin.md).

   ── How this retints an app we do not own ──────────────────────────────────
   keycloak.v2/admin is a PatternFly v5 React app. PatternFly draws from
   `--pf-v5-global--*` custom properties declared on `:where(:root)` — zero
   specificity — so the plain `:root` below wins, and the retint is a token
   swap. The mapped list is the 97 colour/shadow/radius/font tokens the
   console's own main-*.css defines, read out of the 26.6.1 stylesheet. Re-read
   it after a Keycloak upgrade:
       grep -o -- '--pf-v5-global--[A-Za-z0-9_-]*:' main-*.css | sort -u
   The component section below the mapping is for what tokens cannot reach;
   the "R&E design layer" at the end is what the design adds on top.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Fonts ───────────────────────────────────────────────────────────────────
   Montserrat (UI, titles) and Aleo (running text), both SIL OFL 1.1 (licences
   beside the files). VARIABLE fonts, one face per family per subset, the
   subsets split by unicode-range exactly as Fontsource ships them, so a page
   in Dutch/English only fetches the two `latin` files. No local(), no CDN. */
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('../fonts/montserrat-latin-wght-normal.woff2') format('woff2-variations'), url('../fonts/montserrat-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Montserrat'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('../fonts/montserrat-latin-ext-wght-normal.woff2') format('woff2-variations'), url('../fonts/montserrat-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }
@font-face { font-family: 'Aleo'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('../fonts/aleo-latin-wght-normal.woff2') format('woff2-variations'), url('../fonts/aleo-latin-wght-normal.woff2') format('woff2');
    unicode-range: U+0000-00FF, U+0131, U+0152-0153, U+02BB-02BC, U+02C6, U+02DA, U+02DC, U+0304, U+0308, U+0329, U+2000-206F, U+20AC, U+2122, U+2191, U+2193, U+2212, U+2215, U+FEFF, U+FFFD; }
@font-face { font-family: 'Aleo'; font-style: normal; font-weight: 100 900; font-display: swap;
    src: url('../fonts/aleo-latin-ext-wght-normal.woff2') format('woff2-variations'), url('../fonts/aleo-latin-ext-wght-normal.woff2') format('woff2');
    unicode-range: U+0100-02BA, U+02BD-02C5, U+02C7-02CC, U+02CE-02D7, U+02DD-02FF, U+0304, U+0308, U+0329, U+1D00-1DBF, U+1E00-1E9F, U+1EF2-1EFF, U+2020, U+20A0-20AB, U+20AD-20C0, U+2113, U+2C60-2C7F, U+A720-A7FF; }

/* ── Palette ─────────────────────────────────────────────────────────────────
   The --p-* roles shared with login/account, then the admin-only roles.
   SOURCE = the UCLL token (tokens.json, Light). DERIVED = built from the
   design's own ramp. DEVIATION = changed for contrast; ratios measured with
   scripts/contrast.mjs against --p-canvas unless stated.

   ⚠️ ONE DIFFERENCE IN THE MAPPING, not in the palette: account maps
   BackgroundColor--100 to the page ground and repaints cards by hand. The
   admin console spends --100 on tables, toolbars, modals, menus, drawers,
   wizards and fields, so here --100 is the CARD (--p-canvas) and the page
   ground comes from light-300 / --200 (`--pf-v5-c-page--BackgroundColor`).
   In this design both are white paper; the cards are drawn by their borders. */
:root {
    --p-canvas:      #FFFFFF;   /* SOURCE: surface-raised (white) — cards, tables, modals; reference ground */
    --p-surface:     #FFFFFF;   /* SOURCE: surface (white) — the PAGE ground; the design's main area is paper */
    --p-raised:      #FFFFFF;   /* SOURCE: surface-raised — fields                                        */
    --p-quiet:       #C5C9DC;   /* SOURCE: surface-tint-blue (ucll-blue-20) — the design's READ-ONLY field fill */
    --p-sunken:      #C5C9DC;   /* SOURCE: surface-tint-blue — row and menu hover (design: tbody tr:hover) */
    --p-border:      #C5C9DC;   /* SOURCE: border (ucll-blue-20) — hairlines, card outlines, decorative   */
    --p-border-mid:  #7885AA;   /* SOURCE: border-strong (ucll-blue-50) — control borders, 3.66:1         */
    --p-line:        #C5C9DC;   /* SOURCE: border — row rules                                             */
    --p-text:        #000000;   /* SOURCE: ink (black) — 21:1; 12.76 on --p-quiet                         */
    --p-text-2:      #000000;   /* SOURCE: ink — the design sets table cells, labels and nav in ink       */
    --p-text-3:      #002757;   /* DEVIATION: ink-muted #3E5784 is 4.40:1 on --p-quiet (read-only fill);
                                   one step down the same ramp → ucll-blue: 14.71 card / 8.94 quiet      */
    --p-text-muted:  #3E5784;   /* SOURCE: ink-muted (ucll-blue-75) — captions on WHITE only, 7.24:1      */
    --p-text-faint:  #7885AA;   /* SOURCE: ucll-blue-50 — decorative only (3.66)                          */
    --p-accent:      #E30147;   /* SOURCE: accent-fill (ucll-red) — primary fills; --p-ink on it 4.81     */
    --p-accent-text: #E30147;   /* SOURCE: text-red (ucll-red) — links, current tab, 4.81:1 on white ONLY
                                   (3.68 on red-20, 2.93 on blue-20 — never put it there)                 */
    --p-accent-hi:   #002757;   /* SOURCE: text-blue (ucll-blue) — the design's a:hover; 14.71            */
    --p-accent-soft: #F6DBD8;   /* SOURCE: surface-tint-red (ucll-red-20) — table heads, selected rows    */
    --p-ink:         #FFFFFF;   /* SOURCE: on-accent (white) — 4.81 on red, 14.71 on navy                 */
    --p-focus:       #002757;   /* SOURCE: focus-ring (ucll-blue) — "2px solid, 2px offset"               */
    --p-focus-ring:  0 0 0 2px var(--p-canvas), 0 0 0 4px var(--p-focus);
    /* Status. The UCLL palette has no green and no dark yellow. */
    --p-online:      #3E5784;   /* DERIVED: ucll-blue-75 — success icons/rules (no green in the palette)   */
    --p-online-text: #002757;   /* DERIVED: ucll-blue — success INK, 14.71                                 */
    --p-warn:        #FCD962;   /* SOURCE: ucll-yellow — warning fills/icons, temporary-admin banner       */
    --p-warn-text:   #000000;   /* SOURCE: ink — "text on ucll-yellow in black"; 21 / 15.24 on yellow      */
    --p-alert:       #E30147;   /* SOURCE: ucll-red — error rules and borders                              */
    --p-alert-text:  #E30147;   /* SOURCE: text-red — error ink and destructive fill, 4.81 both ways       */
    --p-alert-hi:    #002757;   /* SOURCE: text-blue — destructive :hover, as every red control's hover    */

    /* The masthead: white paper, ink, the red lock-up (re-logo.svg). An
       environment may tint it (Auth: the sidebar's blue-20) in env.css; the
       three roles below then follow it. */
    --p-masthead:      #FFFFFF; /* SOURCE: surface-raised                                                  */
    --p-masthead-ink:  #000000; /* SOURCE: ink — 21:1                                                      */
    --p-masthead-muted: var(--p-text-muted); /* "Admin Console" line — ink-muted, 7.24 on white            */
    --p-masthead-rule:  var(--p-border);     /* the 1px divider after the logo                             */
    --p-masthead-hover: var(--p-sunken);     /* help / user-menu hover fill (blue-20 on white)             */

    /* ── Admin-only roles ───────────────────────────────────────────────────
       A LIGHT tinted sidebar (the design's surface-tint-blue rail) with a
       SOLID navy current item, not the starter's rule + pale fill. */
    --p-sidebar:        var(--p-env-soft);  /* the environment's soft tint (design: nav background)        */
    --p-sidebar-ink:    #000000;  /* SOURCE: ink — nav links 12.76:1                                       */
    --p-sidebar-ink-2:  #000000;  /* SOURCE: ink — section titles (700 12px caps) 12.76:1                  */
    --p-sidebar-accent: var(--p-env);       /* current item FILL and realm block                          */
    --p-sidebar-current-ink: var(--p-env-ink); /* text on the current item / realm block                 */
    --p-sidebar-icon:   #002757;  /* SOURCE: text-blue — nav icons, 8.94 on the rail                       */

    /* ── Environment ────────────────────────────────────────────────────────
       The master console exists in three server variants that share this
       layout and differ ONLY in these tokens (colour + copy). This base is
       the hub.re-frame (MAR-*, red) variant; UcllReMasterAuth / -Hub / -Test
       override the block in their css/env.css. Copy lives here because the
       admin console has no message bundle a theme controls: it is drawn
       with `content: var(--p-env-…)`. Icons in data URIs carry the colour
       as a literal (an image cannot read var()). */
    --p-env: #E30147;  /* SOURCE: ucll-red — frame, banner rule, badge, realm block, current item, hero border */
    --p-env-ink: #FFFFFF;  /* SOURCE: white — text/icons ON --p-env */
    --p-env-marker: transparent;  /* DEVIATION hook: a 4px ink rule on the current item where --p-env is < 3:1 on --p-env-soft (Test) */
    --p-env-soft: #F6DBD8;  /* SOURCE: surface-tint-red (ucll-red-20) — banner ground, sidebar, far hero plane */
    --p-env-plane: #E79F9C;  /* SOURCE: ucll-red-50 — near hero plane */
    --p-env-stripe: #FFFFFF;  /* SOURCE: white — the banner's second stripe colour */
    --p-env-banner-title: "Master realm — Beperkte toegang";  /* copy, MAR-* banner (uppercased by CSS) */
    --p-env-banner-text: "Alleen voor platformbeheerders. Wat je hier doet, raakt alle realms en alle beheerders.";  /* copy, MAR-* banner second line */
    --p-env-badge: "Master";  /* copy, the badge after "Admin Console" */
    --p-env-eyebrow: "Hub server";  /* copy, the hero eyebrow (MAR-* "HUB SERVER" since design 1791841972-65b5; uppercased by CSS) */
    --p-env-realm-note: "Restricted realm";  /* copy, under the realm name — shown only while MASTER is the managed realm */
    --p-env-server-badge: "Hub server";  /* copy, the badge when the SIGNED-IN realm is not master (admin.js: data-kte-login-realm) */
    --p-env-banner-glyph: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M12 3L2 21h20z'/%3E%3Cpath d='M12 10v5'/%3E%3Cpath d='M12 18v.5'/%3E%3C/svg%3E");  /* banner icon (warning triangle) in --p-env-ink */
    --p-env-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23FFFFFF' stroke-width='2.25' stroke-linecap='square' stroke-linejoin='miter'%3E%3Crect x='4' y='10' width='16' height='11'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");  /* badge lock in --p-env-ink */
    --p-hero-planes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 620 224' preserveAspectRatio='none'%3E%3Cpolygon points='112,0 302,0 264,224 70,224' fill='%23E79F9C'/%3E%3Cpolygon points='302,0 620,0 620,224 264,224' fill='%23F6DBD8'/%3E%3Cg stroke='%23E30147' stroke-width='2.5' fill='none'%3E%3Cline x1='66' y1='0' x2='24' y2='224' vector-effect='non-scaling-stroke'/%3E%3Cline x1='78' y1='0' x2='36' y2='224' vector-effect='non-scaling-stroke'/%3E%3Cline x1='90' y1='0' x2='48' y2='224' vector-effect='non-scaling-stroke'/%3E%3C/g%3E%3C/svg%3E");  /* hero planes: --p-env-plane, --p-env-soft, three ucll-red lines */

    --p-eyebrow-lock: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='%23000000' stroke-width='2.25' stroke-linecap='square' stroke-linejoin='miter'%3E%3Crect x='4' y='10' width='16' height='11'/%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'/%3E%3C/svg%3E");  /* SOURCE: design eyebrow lock, ink */

    /* R&E sub-brand colours the hero and badges use. */
    --p-title:       #002757;   /* SOURCE: --re-title = ucll-blue — hero title + eyebrow, 14.71          */
    --p-beige:       #EDC7A2;   /* SOURCE: ucll-beige — R&E accent 2 (stripe, section-number shadow)     */
    --p-plane-blue:  #C5C9DC;   /* SOURCE: surface-tint-blue — hero plane                                */
    --p-plane-red:   #F6DBD8;   /* SOURCE: surface-tint-red — hero plane                                 */

    /* Shapes: the design is angular ("hoekige vormen", radius-none). Every
       corner token is 0. Switches and checkboxes keep their size and hit area;
       only the rounding goes. */
    --p-radius-sm:   0;      /* SOURCE: radius-none */
    --p-radius:      0;      /* SOURCE: radius-none */
    --p-radius-lg:   0;      /* SOURCE: radius-none */
    --p-radius-xl:   0;      /* SOURCE: radius-none */
    --p-control-h:   44px;   /* SOURCE: design — toolbar controls and buttons are 44px tall */
    --p-field-h:     40px;   /* SOURCE: design — form fields are 40px tall                  */
    --p-control-bw:  1.5px;  /* SOURCE: design — 1.5px control borders                      */

    --p-font-head:   'Montserrat', 'Segoe UI', Arial, sans-serif;  /* SOURCE: font-sans — titles, labels, UI */
    --p-font-ui:     'Montserrat', 'Segoe UI', Arial, sans-serif;  /* SOURCE: font-sans                       */
    --p-font-body:   'Aleo', Georgia, serif;                        /* SOURCE: font-serif — running text       */
    --p-font-mono:   ui-monospace, SFMono-Regular, Menlo, monospace;

    /* Artwork from the design. Colours inside the data URIs are the same
       tokens as literals (an image cannot read var()). */
    /* The red brush underline under every hero title (design: 150 × 10). */
    --p-brush: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='21.3 21.3 113.9 7.7' preserveAspectRatio='none'%3E%3Cpath fill='%23E30147' d='M128.89,22.2c-13.89.49-27.79.11-41.69-.28-17.19-.48-34.39-.95-51.55.23-4.72.4-9.43.87-14.14,1.34.02.19.03.39.03.58,0,.29,0,.58,0,.87-.01.38-.03.75-.06,1.12,0,.12-.02.23-.03.35,32.12,2.29,65.950,1.53,98.3,2.51.74,0,1.48,0,2.22,0,4.33,0,8.66-.06,12.99-.2,1.11-.93-4.45-6.39-6.06-6.52Z'/%3E%3C/svg%3E");
    /* Nav icons (masks: only the shape is used, the colour comes from CSS),
       copied from the design's sidebar, 24×24, 1.75 stroke, square caps. */
    --p-icon-organizations: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='square' stroke-linejoin='miter'%3E%3Crect x='3' y='8' width='7' height='13'%3E%3C/rect%3E%3Crect x='10' y='3' width='11' height='18'%3E%3C/rect%3E%3Cpath d='M14 8h3'%3E%3C/path%3E%3Cpath d='M14 12h3'%3E%3C/path%3E%3Cpath d='M14 16h3'%3E%3C/path%3E%3C/svg%3E");
    --p-icon-clients: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='square' stroke-linejoin='miter'%3E%3Crect x='3' y='4' width='18' height='13'%3E%3C/rect%3E%3Cpath d='M8 21h8'%3E%3C/path%3E%3Cpath d='M12 17v4'%3E%3C/path%3E%3C/svg%3E");
    --p-icon-client-scopes: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M12 3l9 5-9 5-9-5z'%3E%3C/path%3E%3Cpath d='M3 13l9 5 9-5'%3E%3C/path%3E%3C/svg%3E");
    --p-icon-roles: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8-8 9-4.6-1-8-4.5-8-9V6z'%3E%3C/path%3E%3C/svg%3E");
    --p-icon-users: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='square' stroke-linejoin='miter'%3E%3Ccircle cx='12' cy='8' r='4'%3E%3C/circle%3E%3Cpath d='M4 21c0-4 3.6-7 8-7s8 3 8 7'%3E%3C/path%3E%3C/svg%3E");
    --p-icon-groups: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='square' stroke-linejoin='miter'%3E%3Ccircle cx='9' cy='8' r='3.5'%3E%3C/circle%3E%3Ccircle cx='17' cy='9' r='2.5'%3E%3C/circle%3E%3Cpath d='M2.5 20c0-3.6 2.9-6 6.5-6s6.5 2.4 6.5 6'%3E%3C/path%3E%3Cpath d='M16 14c3 0 5.5 2 5.5 5'%3E%3C/path%3E%3C/svg%3E");
    --p-icon-sessions: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='square' stroke-linejoin='miter'%3E%3Ccircle cx='12' cy='12' r='9'%3E%3C/circle%3E%3Cpath d='M12 7v5l3.5 2'%3E%3C/path%3E%3C/svg%3E");
    --p-icon-events: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M3 12h4l3-7 4 14 3-7h4'%3E%3C/path%3E%3C/svg%3E");
    --p-icon-realm-settings: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M4 6h10'%3E%3C/path%3E%3Cpath d='M18 6h2'%3E%3C/path%3E%3Ccircle cx='16' cy='6' r='2'%3E%3C/circle%3E%3Cpath d='M4 12h2'%3E%3C/path%3E%3Cpath d='M10 12h10'%3E%3C/path%3E%3Ccircle cx='8' cy='12' r='2'%3E%3C/circle%3E%3Cpath d='M4 18h12'%3E%3C/path%3E%3Ccircle cx='18' cy='18' r='2'%3E%3C/circle%3E%3C/svg%3E");
    --p-icon-authentication: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='square' stroke-linejoin='miter'%3E%3Crect x='4' y='10' width='16' height='11'%3E%3C/rect%3E%3Cpath d='M8 10V7a4 4 0 0 1 8 0v3'%3E%3C/path%3E%3C/svg%3E");
    --p-icon-identity-providers: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='square' stroke-linejoin='miter'%3E%3Ccircle cx='9' cy='12' r='5'%3E%3C/circle%3E%3Ccircle cx='15' cy='12' r='5'%3E%3C/circle%3E%3C/svg%3E");
    --p-icon-user-federation: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cellipse cx='12' cy='5.5' rx='8' ry='2.5'%3E%3C/ellipse%3E%3Cpath d='M4 5.5v13c0 1.4 3.6 2.5 8 2.5s8-1.1 8-2.5v-13'%3E%3C/path%3E%3Cpath d='M4 12c0 1.4 3.6 2.5 8 2.5s8-1.1 8-2.5'%3E%3C/path%3E%3C/svg%3E");
    /* Design 1791841972-65b5 added these two to the sidebar (shield with a
       check; a two-node flow), copied from MAB-AdminClients. */
    --p-icon-permissions: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='square' stroke-linejoin='miter'%3E%3Cpath d='M12 3l8 3v6c0 4.5-3.4 8-8 9-4.6-1-8-4.5-8-9V6z'%3E%3C/path%3E%3Cpath d='M8.5 12l2.5 2.5 4.5-5'%3E%3C/path%3E%3C/svg%3E");
    --p-icon-workflows: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='square' stroke-linejoin='miter'%3E%3Crect x='3' y='3' width='6' height='6'%3E%3C/rect%3E%3Crect x='15' y='15' width='6' height='6'%3E%3C/rect%3E%3Cpath d='M6 9v4a2 2 0 0 0 2 2h7'%3E%3C/path%3E%3Cpath d='M13 12.5l2.5 2.5-2.5 2.5'%3E%3C/path%3E%3C/svg%3E");
    /* DERIVED: the design draws no "Manage realms" item (Keycloak puts it
       above MANAGE) — three stacked squares in the same 1.75 / square-cap
       style: "several realms". */
    --p-icon-realms: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='square' stroke-linejoin='miter'%3E%3Crect x='8' y='3' width='13' height='13'%3E%3C/rect%3E%3Cpath d='M5.5 6.5V18.5H17.5'%3E%3C/path%3E%3Cpath d='M3 9v12h12'%3E%3C/path%3E%3C/svg%3E");
    /* DERIVED fallback for any nav item without its own icon (a later
       Keycloak's new entry, a declarative-UI page): a plain square with a
       dot, same style, so no label ever loses its icon slot. */
    --p-icon-default: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24' fill='none' stroke='black' stroke-width='1.75' stroke-linecap='square' stroke-linejoin='miter'%3E%3Crect x='4' y='4' width='16' height='16'%3E%3C/rect%3E%3Crect x='10.5' y='10.5' width='3' height='3' fill='black'%3E%3C/rect%3E%3C/svg%3E");


    /* ── PatternFly v5 globals → the palette ───────────────────────────────
       Stock values (26.6.1) in comments where the mapping is not obvious. */
    /* Grounds. See the ⚠️ above the palette for why --100 is the card here. */
    --pf-v5-global--BackgroundColor--100: var(--p-canvas);      /* #fff     */
    --pf-v5-global--BackgroundColor--150: var(--p-quiet);       /* #fafafa  */
    --pf-v5-global--BackgroundColor--200: var(--p-surface);     /* #f0f0f0  */
    --pf-v5-global--BackgroundColor--300: var(--p-sunken);
    --pf-v5-global--BackgroundColor--400: var(--p-quiet);
    --pf-v5-global--BackgroundColor--light-100: var(--p-canvas);   /* #fff    */
    --pf-v5-global--BackgroundColor--light-200: var(--p-quiet);    /* #fafafa */
    --pf-v5-global--BackgroundColor--light-300: var(--p-surface);  /* #f0f0f0 — the PAGE ground */
    /* ⚠️ The light-* / dark-* families name the GROUND a value is for, not a
       mode and not a shade (see references/account.md). Dark grounds carry
       light ink: tooltips, popover headers. They must stay genuinely dark. */
    --pf-v5-global--BackgroundColor--dark-100: var(--p-text);
    --pf-v5-global--BackgroundColor--dark-200: var(--p-text-2);
    --pf-v5-global--BackgroundColor--dark-300: var(--p-text-2);
    --pf-v5-global--BackgroundColor--dark-400: var(--p-text-3);
    --pf-v5-global--BackgroundColor--dark-transparent-100: color-mix(in srgb, var(--p-text) 62%, transparent);
    --pf-v5-global--BackgroundColor--dark-transparent-200: color-mix(in srgb, var(--p-text) 42%, transparent);

    --pf-v5-global--Color--100: var(--p-text);
    --pf-v5-global--Color--200: var(--p-text-2);
    --pf-v5-global--Color--300: var(--p-text-3);
    --pf-v5-global--Color--400: var(--p-text-3);
    --pf-v5-global--Color--light-100: var(--p-ink);   /* light INK, for dark grounds */
    --pf-v5-global--Color--light-200: var(--p-ink);
    --pf-v5-global--Color--light-300: var(--p-ink);
    --pf-v5-global--Color--dark-100: var(--p-text);   /* dark INK, for light grounds */
    --pf-v5-global--Color--dark-200: var(--p-text-2);

    /* ⚠️ In this PatternFly build --200 is the MID border (#8a8d90: the
       text-input-group underline, control edges) and --300 the LIGHTEST
       (#f0f0f0: dividers, nav rules). Mapped by what they are, not by number. */
    --pf-v5-global--BorderColor--100: var(--p-border);      /* #d2d2d2 */
    --pf-v5-global--BorderColor--200: var(--p-border-mid);  /* #8a8d90 */
    --pf-v5-global--BorderColor--300: var(--p-line);        /* #f0f0f0 */
    --pf-v5-global--BorderColor--400: var(--p-border-mid);
    --pf-v5-global--BorderColor--light-100: var(--p-border);
    --pf-v5-global--BorderColor--dark-100: var(--p-border);

    --pf-v5-global--primary-color--100: var(--p-accent-text);
    --pf-v5-global--primary-color--200: var(--p-accent-hi);
    --pf-v5-global--primary-color--300: var(--p-accent-text);
    --pf-v5-global--primary-color--400: var(--p-accent-hi);
    --pf-v5-global--primary-color--light-100: var(--p-accent-soft);  /* #73bcf7 — sits on DARK grounds */
    --pf-v5-global--primary-color--dark-100: var(--p-accent-text);
    --pf-v5-global--secondary-color--100: var(--p-text-2);
    --pf-v5-global--active-color--100: var(--p-accent);
    --pf-v5-global--active-color--200: var(--p-accent-soft);         /* #bee1f4 — a pale fill */
    --pf-v5-global--active-color--300: var(--p-accent);
    --pf-v5-global--active-color--400: var(--p-accent-soft);
    /* "custom" (teal) — the cyan label/alert variant. Folded into the accent
       ramp: 100 tone, 200 ink, 300 deep. */
    --pf-v5-global--custom-color--100: var(--p-accent-soft);
    --pf-v5-global--custom-color--200: var(--p-accent-text);
    --pf-v5-global--custom-color--300: var(--p-accent-hi);

    --pf-v5-global--link--Color: var(--p-accent-text);
    --pf-v5-global--link--Color--hover: var(--p-accent-hi);
    --pf-v5-global--link--Color--visited: var(--p-accent-text);
    /* --light links sit on DARK grounds (tooltips): they need a light tone. */
    --pf-v5-global--link--Color--light: var(--p-accent-soft);
    --pf-v5-global--link--Color--light--hover: var(--p-ink);
    --pf-v5-global--link--Color--dark: var(--p-accent-text);
    --pf-v5-global--link--Color--dark--hover: var(--p-accent-hi);

    /* ⚠️ Status: `--200` is the INK (label text, alert titles), `--100` the
       icon and border tone. A contrast fix mapped onto --100 fixes nothing. */
    /* --p-alert-hi is navy in this palette (every red control hovers to
       navy), so it must NOT become danger INK: error text stays red. */
    --pf-v5-global--danger-color--100: var(--p-alert);
    --pf-v5-global--danger-color--200: var(--p-alert-text);
    --pf-v5-global--danger-color--300: var(--p-alert-hi);
    --pf-v5-global--success-color--100: var(--p-online);
    --pf-v5-global--success-color--200: var(--p-online-text);
    --pf-v5-global--warning-color--100: var(--p-warn);
    --pf-v5-global--warning-color--200: var(--p-warn-text);
    --pf-v5-global--info-color--100: var(--p-accent);
    --pf-v5-global--info-color--200: var(--p-accent-hi);

    --pf-v5-global--disabled-color--100: var(--p-text-3);
    --pf-v5-global--disabled-color--200: var(--p-border);
    --pf-v5-global--disabled-color--300: var(--p-quiet);

    --pf-v5-global--icon--Color--light: var(--p-text-3);
    --pf-v5-global--icon--Color--dark: var(--p-text);
    --pf-v5-global--icon--Color--light--light: var(--p-border);
    --pf-v5-global--icon--Color--dark--light: var(--p-ink);
    --pf-v5-global--icon--Color--light--dark: var(--p-text-3);
    --pf-v5-global--icon--Color--dark--dark: var(--p-text);

    --pf-v5-global--FontFamily--text: var(--p-font-ui);
    --pf-v5-global--FontFamily--text--vf: var(--p-font-ui);
    --pf-v5-global--FontFamily--heading: var(--p-font-head);
    --pf-v5-global--FontFamily--heading--vf: var(--p-font-head);
    --pf-v5-global--FontFamily--monospace: var(--p-font-mono);
    --pf-v5-global--FontFamily--monospace--vf: var(--p-font-mono);

    /* Shadows tinted from the palette's ink instead of PatternFly's #030303.
       The admin console uses every step: sm (cards), md (menus), lg (modals,
       the drawer edge), xl (wizards), the directional ones on sticky table
       edges and drawers, and inset (the code editor). */
    --pf-v5-global--BoxShadow--sm: 0 1px 2px color-mix(in srgb, var(--p-text) 12%, transparent), 0 0 2px color-mix(in srgb, var(--p-text) 6%, transparent);
    --pf-v5-global--BoxShadow--md: 0 4px 12px color-mix(in srgb, var(--p-text) 14%, transparent), 0 0 4px color-mix(in srgb, var(--p-text) 6%, transparent);
    --pf-v5-global--BoxShadow--lg: 0 8px 24px color-mix(in srgb, var(--p-text) 18%, transparent), 0 0 6px color-mix(in srgb, var(--p-text) 8%, transparent);
    --pf-v5-global--BoxShadow--xl: 0 16px 40px color-mix(in srgb, var(--p-text) 20%, transparent), 0 0 8px color-mix(in srgb, var(--p-text) 10%, transparent);
    --pf-v5-global--BoxShadow--sm-top: 0 -2px 4px -2px color-mix(in srgb, var(--p-text) 12%, transparent);
    --pf-v5-global--BoxShadow--sm-right: 2px 0 4px -2px color-mix(in srgb, var(--p-text) 12%, transparent);
    --pf-v5-global--BoxShadow--sm-bottom: 0 2px 4px -2px color-mix(in srgb, var(--p-text) 12%, transparent);
    --pf-v5-global--BoxShadow--sm-left: -2px 0 4px -2px color-mix(in srgb, var(--p-text) 12%, transparent);
    --pf-v5-global--BoxShadow--md-top: 0 -8px 8px -6px color-mix(in srgb, var(--p-text) 14%, transparent);
    --pf-v5-global--BoxShadow--md-right: 8px 0 8px -6px color-mix(in srgb, var(--p-text) 14%, transparent);
    --pf-v5-global--BoxShadow--md-bottom: 0 8px 8px -6px color-mix(in srgb, var(--p-text) 14%, transparent);
    --pf-v5-global--BoxShadow--md-left: -8px 0 8px -6px color-mix(in srgb, var(--p-text) 14%, transparent);
    --pf-v5-global--BoxShadow--lg-top: 0 -12px 12px -8px color-mix(in srgb, var(--p-text) 18%, transparent);
    --pf-v5-global--BoxShadow--lg-right: 12px 0 12px -8px color-mix(in srgb, var(--p-text) 18%, transparent);
    --pf-v5-global--BoxShadow--lg-bottom: 0 12px 12px -8px color-mix(in srgb, var(--p-text) 18%, transparent);
    --pf-v5-global--BoxShadow--lg-left: -12px 0 12px -8px color-mix(in srgb, var(--p-text) 18%, transparent);
    --pf-v5-global--BoxShadow--xl-top: 0 -16px 16px -8px color-mix(in srgb, var(--p-text) 20%, transparent);
    --pf-v5-global--BoxShadow--xl-right: 16px 0 16px -8px color-mix(in srgb, var(--p-text) 20%, transparent);
    --pf-v5-global--BoxShadow--xl-bottom: 0 16px 16px -8px color-mix(in srgb, var(--p-text) 20%, transparent);
    --pf-v5-global--BoxShadow--xl-left: -16px 0 16px -8px color-mix(in srgb, var(--p-text) 20%, transparent);
    --pf-v5-global--BoxShadow--inset: inset 0 0 10px color-mix(in srgb, var(--p-text) 18%, transparent);

    --pf-v5-global--BorderRadius--sm: var(--p-radius-sm);
    --pf-v5-global--BorderRadius--lg: var(--p-radius-lg);

    color-scheme: light;
}

/* ── The loading splash ─────────────────────────────────────────────────────
   index.ftl's inline <style> paints it #fff, with a prefers-color-scheme DARK
   variant (#1b1d21). That media query is NOT gated by darkMode, so without
   these the console flashes near-black on every load for a dark-OS visitor. */
.keycloak__loading-container {
    background-color: var(--p-surface) !important;
    color: var(--p-text) !important;
}
#loading-text {
    font-family: var(--p-font-head);
    color: var(--p-text-2);
}

html,
body {
    background: var(--p-surface);
    color: var(--p-text);
    font-family: var(--p-font-ui);
}

/* ── Masthead ────────────────────────────────────────────────────────────────
   PatternFly's masthead is a DARK component: its ground is
   BackgroundColor--dark-100 and its toolbar paints
   `--pf-v5-c-masthead--c-toolbar--BackgroundColor`, which defaults to the RAW
   palette black (#000, not a global token, so the mapping never reaches it).
   Both are set here; the masthead's descendants are re-scoped to the bar's ink
   so a LIGHT --p-masthead also works. */
.pf-v5-c-masthead {
    --pf-v5-c-masthead--BackgroundColor: var(--p-masthead);
    --pf-v5-c-masthead--c-toolbar--BackgroundColor: transparent;
    --pf-v5-c-masthead--c-toolbar__content--BackgroundColor: transparent;
    background-color: var(--p-masthead);
    color: var(--p-masthead-ink);
    box-shadow: 0 1px 4px color-mix(in srgb, var(--p-text) 12%, transparent);
}
.pf-v5-c-masthead .pf-v5-c-toolbar,
.pf-v5-c-masthead .pf-v5-c-toolbar__content,
.pf-v5-c-masthead .pf-v5-c-toolbar__content-section {
    background-color: transparent;
}
/* The hamburger and the help (?) button are plain buttons whose icon colour
   comes from the dark-masthead scope. */
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
.pf-v5-c-masthead__toggle .pf-v5-c-button {
    color: var(--p-masthead-ink);
}
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain:hover {
    background-color: color-mix(in srgb, var(--p-masthead-ink) 15%, transparent);
    border-radius: var(--p-radius);
}
/* The user menu toggle ("admin ▾"): no box on the bar, same treatment as
   account.css. */
.pf-v5-c-masthead .pf-v5-c-menu-toggle {
    background-color: transparent;
    border: none;
    border-radius: var(--p-radius);
    color: var(--p-masthead-ink);
}
.pf-v5-c-masthead .pf-v5-c-menu-toggle:hover,
.pf-v5-c-masthead .pf-v5-c-menu-toggle.pf-m-expanded {
    background-color: color-mix(in srgb, var(--p-masthead-ink) 15%, transparent);
    color: var(--p-masthead-ink);
    box-shadow: none;
}
.pf-v5-c-masthead .pf-v5-c-menu-toggle__toggle-icon,
.pf-v5-c-masthead .pf-v5-c-menu-toggle__text { color: inherit; }
/* ⚠️ A dropdown opened from the masthead renders INSIDE it (PatternFly
   appends poppers inline), so it inherits the bar's ink. Reset to the page's. */
.pf-v5-c-masthead .pf-v5-c-menu {
    color: var(--p-text);
}

/* The brand. `<img class="keycloak__pageheader_brand">` (stock: height 35px)
   inside `<a class="pf-v5-c-masthead__brand">`, which links to the current
   realm's dashboard. Selected structurally, as in account.css. */
.pf-v5-c-masthead__brand {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
}
.pf-v5-c-masthead__brand > img {
    height: 38px;
    width: auto;
    max-height: none;
    display: block;
}
/* Optional typed wordmark — enable ONLY when img/logo.svg has no lettering.
.pf-v5-c-masthead__brand::after {
    content: "UCLL Research & Expertise";
    margin-inline-start: 10px;
    font: 700 18px/1 var(--p-font-head);
    color: var(--p-masthead-ink);
    white-space: nowrap;
}
*/
.pf-v5-c-masthead__brand:focus-visible {
    outline: 2px solid var(--p-masthead-ink);
    outline-offset: 3px;
    border-radius: var(--p-radius-sm);
}
/* The masthead avatar is a bare <svg> beside the user menu, not a control. */
.pf-v5-c-masthead .pf-v5-c-avatar { display: none; }

/* The "temporary admin user" banner above the masthead. pf-m-gold takes its
   ground from warning-color--100 (→ --p-warn); its text is pinned to the dark
   ink so it holds on any warn tone. */
.pf-v5-c-banner {
    font-family: var(--p-font-ui);
}
.pf-v5-c-banner.pf-m-gold {
    --pf-v5-c-banner--Color: var(--p-text);
    color: var(--p-text);
}

/* ── Sidebar and navigation ──────────────────────────────────────────────────
   ⚠️ DARK BY DEFAULT. `.pf-v5-c-page__sidebar` takes BackgroundColor--dark-300
   and `.pf-v5-c-nav` paints links in Color--light-100 with dark-400 / dark-200
   current and hover fills. The console renders the plain (dark) variants, so
   the light family mapping alone yields a near-black sidebar — or, once
   dark-* is mapped to the palette's ink, a slate rail with white links that
   matches nothing. Re-pointing the component variables (scoped to the page
   sidebar, so horizontal and tertiary navs keep their own) makes the sidebar
   whatever --p-sidebar says. */
.pf-v5-c-page__sidebar {
    --pf-v5-c-page__sidebar--BackgroundColor: var(--p-sidebar);
    background-color: var(--p-sidebar);
    color: var(--p-sidebar-ink);
    border-inline-end: 1px solid var(--p-border);
}
.pf-v5-c-page__sidebar .pf-v5-c-nav {
    --pf-v5-c-nav__link--Color: var(--p-sidebar-ink);
    --pf-v5-c-nav__link--hover--Color: var(--p-sidebar-ink);
    --pf-v5-c-nav__link--focus--Color: var(--p-sidebar-ink);
    --pf-v5-c-nav__link--active--Color: var(--p-sidebar-ink);
    --pf-v5-c-nav__link--m-current--Color: var(--p-sidebar-ink);
    --pf-v5-c-nav__link--hover--BackgroundColor: color-mix(in srgb, var(--p-sidebar-ink) 7%, var(--p-sidebar));
    --pf-v5-c-nav__link--focus--BackgroundColor: color-mix(in srgb, var(--p-sidebar-ink) 7%, var(--p-sidebar));
    --pf-v5-c-nav__link--active--BackgroundColor: color-mix(in srgb, var(--p-sidebar-ink) 7%, var(--p-sidebar));
    --pf-v5-c-nav__link--m-current--BackgroundColor: color-mix(in srgb, var(--p-sidebar-accent) 12%, var(--p-sidebar));
    --pf-v5-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: color-mix(in srgb, var(--p-sidebar-accent) 12%, var(--p-sidebar));
    --pf-v5-c-nav__link--before--BorderColor: transparent;
    --pf-v5-c-nav__link--after--BorderColor: var(--p-sidebar-accent);
    --pf-v5-c-nav__link--m-current--after--BorderColor: var(--p-sidebar-accent);
    --pf-v5-c-nav__item--before--BorderColor: color-mix(in srgb, var(--p-sidebar-ink) 14%, var(--p-sidebar));
    --pf-v5-c-nav__section-title--Color: var(--p-sidebar-ink-2);
    --pf-v5-c-nav__section-title--BorderBottomColor: color-mix(in srgb, var(--p-sidebar-ink) 14%, var(--p-sidebar));
    background-color: transparent;
}
.pf-v5-c-page__sidebar .pf-v5-c-nav__link {
    font: 500 14px/1.4 var(--p-font-ui);
    border-radius: 0 var(--p-radius) var(--p-radius) 0;
    margin-inline-end: 8px;
}
.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current {
    font-weight: 600;
}
/* ⚠️ The current-item rule is the link's ::after (a 4px inline-start
   border), and its colour variable is declared on the LINK, so setting it on
   the nav (above) does not reach it: it resolves to active-color--200, which
   stock is a pale blue meant for the dark nav (→ --p-accent-soft here) and
   vanishes on a light sidebar. Painted directly. */
.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current::after,
.pf-v5-c-page__sidebar .pf-v5-c-nav__link[aria-current="page"]::after {
    border-inline-start-color: var(--p-sidebar-accent);
}
/* Section titles ("Manage", "Configure"). The first one is the current-realm
   header: "<realm display name> [Current realm]". */
.pf-v5-c-page__sidebar .pf-v5-c-nav__section-title {
    font: 600 11px/1.2 var(--p-font-head);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}
.pf-v5-c-page__sidebar .pf-v5-c-nav > .pf-v5-c-nav__section-title:first-child {
    font: 700 15px/1.3 var(--p-font-head);
    letter-spacing: normal;
    text-transform: none;
    color: var(--p-sidebar-ink);
}

/* ── Page, sections, headings ────────────────────────────────────────────────
   PatternFly's own section variants are left alone: the page ground is
   light-300 (→ --p-surface) and `pf-m-light` sections (every view header and
   most content) are light-100 (→ --p-canvas). That is already the account
   console's "cards on a darker ground". */
.pf-v5-c-page {
    --pf-v5-c-page--BackgroundColor: var(--p-surface);
}
.pf-v5-c-title,
h1, h2, h3, h4 {
    font-family: var(--p-font-head);
    letter-spacing: normal;
}
.pf-v5-c-breadcrumb {
    font-family: var(--p-font-ui);
}
code, kbd, samp,
.pf-v5-c-clipboard-copy__text,
.pf-v5-c-code-block {
    font-family: var(--p-font-mono);
}

.pf-v5-c-card {
    --pf-v5-c-card--BackgroundColor: var(--p-canvas);
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius-xl);
    box-shadow: var(--pf-v5-global--BoxShadow--sm);
}
/* Cards used as layout (plain / flat / selectable tiles keep their shape but
   take the palette's corner). */
.pf-v5-c-card.pf-m-plain { border: none; box-shadow: none; }

/* ── Tabs ────────────────────────────────────────────────────────────────── */
.pf-v5-c-tabs {
    --pf-v5-c-tabs__link--Color: var(--p-text-2);
    --pf-v5-c-tabs__item--m-current__link--Color: var(--p-text);
    font-family: var(--p-font-ui);
}
.pf-v5-c-tabs__link {
    font-family: var(--p-font-head);
    font-weight: 600;
}
/* Box tabs ("User list", the user / client / realm-settings tab rows): the
   current tab is the card, the others a quiet fill. Rounded on top only — they
   sit on the content's top edge. */
.pf-v5-c-tabs.pf-m-box {
    --pf-v5-c-tabs--m-box__link--BackgroundColor: var(--p-quiet);
    --pf-v5-c-tabs--m-box__item--m-current__link--BackgroundColor: var(--p-canvas);
}
.pf-v5-c-tabs.pf-m-box .pf-v5-c-tabs__link,
.pf-v5-c-tabs.pf-m-box .pf-v5-c-tabs__link::before,
.pf-v5-c-tabs.pf-m-box .pf-v5-c-tabs__link::after {
    border-start-start-radius: var(--p-radius);
    border-start-end-radius: var(--p-radius);
}
.pf-v5-c-tabs.pf-m-box .pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link {
    background-color: var(--p-canvas);
}

/* ── Toolbars, tables, pagination ────────────────────────────────────────── */
.pf-v5-c-toolbar {
    --pf-v5-c-toolbar--BackgroundColor: var(--p-canvas);
    font-family: var(--p-font-ui);
}
.pf-v5-c-table {
    --pf-v5-c-table--BackgroundColor: var(--p-canvas);
    --pf-v5-c-table--BorderColor: var(--p-line);
    --pf-v5-c-table--cell--Color: var(--p-text-2);
    color: var(--p-text-2);
}
.pf-v5-c-table thead th,
.pf-v5-c-table__thead .pf-v5-c-table__th {
    font: 600 11px/1.2 var(--p-font-head);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--p-text-3);
}
.pf-v5-c-table tbody tr:hover > td,
.pf-v5-c-table tbody tr:hover > th {
    background-color: color-mix(in srgb, var(--p-accent-soft) 45%, var(--p-canvas));
}
.pf-v5-c-table__sort-indicator,
.pf-v5-c-table .pf-v5-c-table__sort.pf-m-selected .pf-v5-c-table__button {
    color: var(--p-accent-text);
}
.pf-v5-c-data-list {
    --pf-v5-c-data-list--BackgroundColor: var(--p-canvas);
    --pf-v5-c-data-list__item--BorderBottomColor: var(--p-line);
}
.pf-v5-c-pagination {
    font-family: var(--p-font-ui);
}

/* ── Form controls ───────────────────────────────────────────────────────────
   Everything below carries over from account.css, where each was a measured
   defect, and extends it to the admin console's extra control shapes.

   ⚠️ The border is not on the control. PatternFly draws it on two
   absolutely-positioned SQUARE pseudo-elements (`::before` 1px three sides,
   `::after` the focus underline). On a rounded control their corners poke out
   — a doubled edge and a corner tick. The admin console has FOUR such shapes:
   .pf-v5-c-form-control, .pf-v5-c-menu-toggle, .pf-v5-c-text-input-group__text
   (search boxes, typeaheads) and .pf-v5-c-button.pf-m-control (the joined
   "→" search button). All lose both pseudo-elements; the element's own border
   is the only one. */
.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after,
.pf-v5-c-menu-toggle::before,
.pf-v5-c-menu-toggle::after,
.pf-v5-c-text-input-group__text::before,
.pf-v5-c-text-input-group__text::after,
.pf-v5-c-button.pf-m-control::before,
.pf-v5-c-button.pf-m-control::after {
    display: none;
}

/* ⚠️ The WRAPPER owns the ground; the inner control is transparent and
   inherits the radius (an opaque square <input> paints over the curve). */
.pf-v5-c-form-control,
.pf-v5-c-text-input-group,
.pf-v5-c-menu-toggle,
.pf-v5-c-button.pf-m-control {
    background-color: var(--p-raised);
    color: var(--p-text);
    font-family: var(--p-font-ui);
    border: 1px solid var(--p-border-mid);
    border-radius: var(--p-radius);
}
.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select,
.pf-v5-c-form-control > textarea,
.pf-v5-c-text-input-group__text,
.pf-v5-c-text-input-group__text-input {
    background-color: transparent;
    border-radius: inherit;
    color: inherit;
    font-family: var(--p-font-ui);
}
/* A text-input-group INSIDE a typeahead menu toggle is part of that toggle:
   one border, not two. */
.pf-v5-c-menu-toggle .pf-v5-c-text-input-group {
    border: none;
    background-color: transparent;
}
/* Icon-only toggles (table kebabs, pagination) and plain buttons carry no box. */
.pf-v5-c-menu-toggle.pf-m-plain {
    border: none;
    background-color: transparent;
}
.pf-v5-c-menu-toggle.pf-m-primary {
    background-color: var(--p-accent-text);
    border-color: var(--p-accent-text);
    color: var(--p-ink);
}

/* ⚠️ JOINED controls. The admin toolbars are input groups: "Default search ▾"
   + search box + "→", or a select + text field. Rounding each piece makes a
   row of pills pressed together, with the doubled border between them. Only
   the OUTER ends are round, and each later piece overlaps the previous
   border by 1px. ⚠️ Two containers do this: .pf-v5-c-input-group (toolbars)
   and .pf-v5-c-clipboard-copy__group (realm name, client id, user ID) — the
   second has no __item wrappers, so it needs its own selectors; missing it
   left the realm name and its copy button as two separate pills. */
.pf-v5-c-input-group > .pf-v5-c-input-group__item:not(:first-child) > *,
.pf-v5-c-input-group > .pf-v5-c-input-group__item:not(:first-child) > * > .pf-v5-c-menu-toggle,
.pf-v5-c-clipboard-copy__group > :not(:first-child),
.pf-v5-c-clipboard-copy__group > :not(:first-child) > .pf-v5-c-button {
    border-start-start-radius: 0;
    border-end-start-radius: 0;
}
.pf-v5-c-input-group > .pf-v5-c-input-group__item:not(:last-child) > *,
.pf-v5-c-input-group > .pf-v5-c-input-group__item:not(:last-child) > * > .pf-v5-c-menu-toggle,
.pf-v5-c-clipboard-copy__group > :not(:last-child),
.pf-v5-c-clipboard-copy__group > :not(:last-child) > .pf-v5-c-button {
    border-start-end-radius: 0;
    border-end-end-radius: 0;
}
.pf-v5-c-input-group > .pf-v5-c-input-group__item + .pf-v5-c-input-group__item,
.pf-v5-c-clipboard-copy__group > * + * {
    margin-inline-start: -1px;
}
/* A joined plain/control button still needs a visible edge to belong. */
.pf-v5-c-input-group .pf-v5-c-button.pf-m-control {
    color: var(--p-text-2);
}

/* Focus: the project's ring, on the element, so it follows the corners. */
.pf-v5-c-form-control:focus-within,
.pf-v5-c-text-input-group:focus-within,
.pf-v5-c-menu-toggle:focus-visible,
.pf-v5-c-menu-toggle.pf-m-expanded:not(.pf-m-plain),
.pf-v5-c-button.pf-m-control:focus-visible {
    border-color: var(--p-focus);
    box-shadow: var(--p-focus-ring);
    outline: none;
    position: relative;
    z-index: 1;
}
.pf-v5-c-form-control > input:focus,
.pf-v5-c-form-control > textarea:focus,
.pf-v5-c-form-control > select:focus,
.pf-v5-c-text-input-group__text-input:focus { outline: none; }

/* ⚠️ Validation states lived on the removed ::after; re-declared on the
   element. (A required-but-empty field is pf-m-warning.) */
.pf-v5-c-form-control.pf-m-warning { border-color: var(--p-warn); }
.pf-v5-c-form-control.pf-m-success { border-color: var(--p-online); }
.pf-v5-c-form-control.pf-m-error   { border-color: var(--p-alert); }
.pf-v5-c-form-control.pf-m-warning:focus-within,
.pf-v5-c-form-control.pf-m-success:focus-within,
.pf-v5-c-form-control.pf-m-error:focus-within { border-color: var(--p-focus); }

/* Read-only / disabled: --p-quiet, never the card tone (it would look
   writable). ⚠️ The admin console marks many read-only inputs with the bare
   `readonly` attribute and NO pf-m-readonly on the wrapper (user ID, Created
   at): without :has() they render as editable white fields. */
.pf-v5-c-form-control.pf-m-disabled,
.pf-v5-c-form-control.pf-m-readonly,
.pf-v5-c-form-control:has(> input[readonly]),
.pf-v5-c-text-input-group.pf-m-disabled,
.pf-v5-c-menu-toggle:not(.pf-m-plain):disabled,
.pf-v5-c-menu-toggle.pf-m-disabled:not(.pf-m-plain) {
    background-color: var(--p-quiet);
    border-color: var(--p-border);
    color: var(--p-text-3);
}
.pf-v5-c-form-control.pf-m-disabled > input,
.pf-v5-c-form-control.pf-m-readonly > input {
    background-color: transparent;
    color: inherit;
}

/* Labels: sentence case. Unlike the account console's few short labels, the
   admin's forms are long horizontal grids with long labels ("Front channel
   logout session required"); spaced capitals at 10px become unreadable. */
.pf-v5-c-form__label-text {
    font-family: var(--p-font-head);
    font-weight: 600;
    color: var(--p-text);
}
.pf-v5-c-form__helper-text,
.pf-v5-c-helper-text__item {
    font-family: var(--p-font-ui);
}

/* Switches ("On / Off" everywhere in the admin). Checked = accent; the
   unchecked track is a mid tone that still clears 3:1 (non-text). */
.pf-v5-c-switch {
    --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--p-accent);
    --pf-v5-c-switch__toggle--BackgroundColor: var(--p-border-mid);
    --pf-v5-c-switch__input--focus__toggle--OutlineColor: var(--p-focus);
    --pf-v5-c-switch__label--Color: var(--p-text-2);
    font-family: var(--p-font-ui);
}
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--p-accent);
}

/* Number inputs (token lifespans, OTP digits): the +/- buttons are control
   buttons joined to the field — the input-group rules above shape them. */
.pf-v5-c-number-input .pf-v5-c-form-control { border-radius: 0; }
.pf-v5-c-number-input .pf-v5-c-input-group > :first-child .pf-v5-c-button {
    border-start-start-radius: var(--p-radius);
    border-end-start-radius: var(--p-radius);
}
.pf-v5-c-number-input .pf-v5-c-input-group > :last-child .pf-v5-c-button {
    border-start-end-radius: var(--p-radius);
    border-end-end-radius: var(--p-radius);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.pf-v5-c-button {
    border-radius: var(--p-radius);
    align-items: center;
    justify-content: center;
    font-family: var(--p-font-head);
    font-weight: 600;
}
.pf-v5-c-button::after { border-radius: inherit; }
.pf-v5-c-button.pf-m-primary {
    background-color: var(--p-accent-text);
    color: var(--p-ink);
}
.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus-visible {
    background-color: var(--p-accent-hi);
    color: var(--p-ink);
}
.pf-v5-c-button.pf-m-secondary {
    background-color: transparent;
    color: var(--p-accent-text);
    --pf-v5-c-button--after--BorderColor: var(--p-accent-text);
}
.pf-v5-c-button.pf-m-secondary:hover {
    background-color: var(--p-accent-soft);
    color: var(--p-accent-hi);
}
.pf-v5-c-button.pf-m-danger {
    /* ⚠️ --p-alert-TEXT: a bright red under white text fails AA. */
    background-color: var(--p-alert-text);
    color: var(--p-ink);
}
.pf-v5-c-button.pf-m-danger:hover {
    background-color: var(--p-alert-hi);
    color: var(--p-ink);
}
.pf-v5-c-button.pf-m-link,
.pf-v5-c-button.pf-m-link.pf-m-inline {
    color: var(--p-accent-text);
}
.pf-v5-c-button.pf-m-link:hover { color: var(--p-accent-hi); }
.pf-v5-c-button.pf-m-link.pf-m-danger {
    background-color: transparent;
    color: var(--p-alert-text);
}
/* ⚠️ Without this, a dialog's autofocused close (×) wears the browser's own
   black `auto` ring — a heavy black box in the corner of every modal. */
.pf-v5-c-button:focus-visible {
    outline: 2px solid var(--p-focus);
    outline-offset: 2px;
}
.pf-v5-c-button:disabled,
.pf-v5-c-button.pf-m-disabled,
.pf-v5-c-button.pf-m-aria-disabled {
    background-color: var(--p-quiet);
    color: var(--p-text-3);
}
.pf-v5-c-button.pf-m-plain:disabled,
.pf-v5-c-button.pf-m-link:disabled,
.pf-v5-c-button.pf-m-link.pf-m-aria-disabled,
.pf-v5-c-button.pf-m-plain.pf-m-aria-disabled {
    background-color: transparent;
}

/* ── Menus, dropdowns, selects ───────────────────────────────────────────── */
.pf-v5-c-menu {
    --pf-v5-c-menu--BackgroundColor: var(--p-canvas);
    --pf-v5-c-menu__item--hover--BackgroundColor: var(--p-sunken);
    --pf-v5-c-menu__list-item--hover--BackgroundColor: var(--p-sunken);
    --pf-v5-c-menu__item--m-selected__select-icon--Color: var(--p-accent-text);
    border: 1px solid var(--p-border);
    border-radius: var(--p-radius-lg);
    box-shadow: var(--pf-v5-global--BoxShadow--md);
    font-family: var(--p-font-ui);
    overflow: hidden;
}
.pf-v5-c-menu .pf-v5-c-menu__list-item:hover,
.pf-v5-c-menu .pf-v5-c-menu__item:hover {
    background-color: var(--p-sunken);
}

/* ── Labels and chips ────────────────────────────────────────────────────────
   ⚠️ PatternFly's coloured labels take their FILL from the raw palette
   (`--pf-v5-c-label--m-blue--BackgroundColor: palette--blue-50`), which the
   global mapping never touches: the sidebar's "Current realm" pill and the
   tables' "Default" / "Enabled" labels stay PatternFly-blue on an indigo
   theme. Re-pointed per colour to the palette's roles. */
.pf-v5-c-label {
    border-radius: var(--p-radius-sm);
    font-family: var(--p-font-ui);
    --pf-v5-c-label--BackgroundColor: var(--p-quiet);
    --pf-v5-c-label__content--Color: var(--p-text-2);
    --pf-v5-c-label__content--before--BorderColor: var(--p-border);
}
.pf-v5-c-label__content { border-radius: inherit; }
.pf-v5-c-label__content::before { border-radius: inherit; }
.pf-v5-c-label.pf-m-blue,
.pf-v5-c-label.pf-m-cyan,
.pf-v5-c-label.pf-m-purple {
    --pf-v5-c-label--BackgroundColor: var(--p-accent-soft);
    --pf-v5-c-label__content--Color: var(--p-accent-hi);
    --pf-v5-c-label__content--before--BorderColor: color-mix(in srgb, var(--p-accent) 35%, var(--p-accent-soft));
    --pf-v5-c-label__icon--Color: var(--p-accent-text);
    --pf-v5-c-label--m-blue--BackgroundColor: var(--p-accent-soft);
    --pf-v5-c-label--m-blue__content--Color: var(--p-accent-hi);
    --pf-v5-c-label--m-blue__content--before--BorderColor: color-mix(in srgb, var(--p-accent) 35%, var(--p-accent-soft));
    --pf-v5-c-label--m-blue__icon--Color: var(--p-accent-text);
}
.pf-v5-c-label.pf-m-green {
    --pf-v5-c-label--BackgroundColor: color-mix(in srgb, var(--p-online) 12%, var(--p-canvas));
    --pf-v5-c-label__content--Color: var(--p-online-text);
    --pf-v5-c-label__content--before--BorderColor: color-mix(in srgb, var(--p-online) 40%, var(--p-canvas));
    --pf-v5-c-label--m-green--BackgroundColor: color-mix(in srgb, var(--p-online) 12%, var(--p-canvas));
    --pf-v5-c-label--m-green__content--Color: var(--p-online-text);
}
.pf-v5-c-label.pf-m-gold,
.pf-v5-c-label.pf-m-orange {
    --pf-v5-c-label--BackgroundColor: color-mix(in srgb, var(--p-warn) 14%, var(--p-canvas));
    --pf-v5-c-label__content--Color: var(--p-warn-text);
    --pf-v5-c-label__content--before--BorderColor: color-mix(in srgb, var(--p-warn) 45%, var(--p-canvas));
    --pf-v5-c-label--m-gold--BackgroundColor: color-mix(in srgb, var(--p-warn) 14%, var(--p-canvas));
    --pf-v5-c-label--m-gold__content--Color: var(--p-warn-text);
    --pf-v5-c-label--m-orange--BackgroundColor: color-mix(in srgb, var(--p-warn) 14%, var(--p-canvas));
    --pf-v5-c-label--m-orange__content--Color: var(--p-warn-text);
}
.pf-v5-c-label.pf-m-red {
    --pf-v5-c-label--BackgroundColor: color-mix(in srgb, var(--p-alert) 10%, var(--p-canvas));
    --pf-v5-c-label__content--Color: var(--p-alert-text);
    --pf-v5-c-label__content--before--BorderColor: color-mix(in srgb, var(--p-alert) 40%, var(--p-canvas));
    --pf-v5-c-label--m-red--BackgroundColor: color-mix(in srgb, var(--p-alert) 10%, var(--p-canvas));
    --pf-v5-c-label--m-red__content--Color: var(--p-alert-text);
}
/* Chips (typeahead selections, the role-mapping filters) are coloured by the
   light-* / dark-* mapping. If one renders as a solid pill, fix the family
   mapping, not the chip. */
.pf-v5-c-chip {
    border-radius: var(--p-radius-sm);
    font-family: var(--p-font-ui);
}
.pf-v5-c-chip::before { border-radius: inherit; }

/* ── Modals, wizards, drawers, popovers ──────────────────────────────────── */
.pf-v5-c-modal-box {
    --pf-v5-c-modal-box--BackgroundColor: var(--p-canvas);
    border-radius: var(--p-radius-xl);
    box-shadow: var(--pf-v5-global--BoxShadow--xl);
}
.pf-v5-c-modal-box__title,
.pf-v5-c-wizard__title-text {
    font-family: var(--p-font-head);
}
.pf-v5-c-backdrop {
    --pf-v5-c-backdrop--BackgroundColor: color-mix(in srgb, var(--p-text) 55%, transparent);
}
.pf-v5-c-wizard {
    --pf-v5-c-wizard__nav--BackgroundColor: var(--p-canvas);
    --pf-v5-c-wizard__nav-link--m-current--Color: var(--p-accent-text);
    --pf-v5-c-wizard__nav-link--m-current--before--BackgroundColor: var(--p-accent-text);
    --pf-v5-c-wizard__nav-link--m-current--before--Color: var(--p-ink);
}
.pf-v5-c-drawer {
    --pf-v5-c-drawer__panel--BackgroundColor: var(--p-canvas);
}
.pf-v5-c-popover__content {
    border-radius: var(--p-radius-lg);
}
.pf-v5-c-tooltip__content {
    border-radius: var(--p-radius-sm);
    font-family: var(--p-font-ui);
}

/* ── Alerts and toasts ───────────────────────────────────────────────────── */
.pf-v5-c-alert {
    --pf-v5-c-alert--BackgroundColor: var(--p-canvas);
    border-radius: var(--p-radius-lg);
    font-family: var(--p-font-ui);
}
.pf-v5-c-alert.pf-m-inline {
    border: 1px solid var(--p-border);
}
.pf-v5-c-alert.pf-m-inline.pf-m-success { border-inline-start: 3px solid var(--p-online); }
.pf-v5-c-alert.pf-m-inline.pf-m-warning { border-inline-start: 3px solid var(--p-warn); }
.pf-v5-c-alert.pf-m-inline.pf-m-danger  { border-inline-start: 3px solid var(--p-alert); }
.pf-v5-c-alert.pf-m-inline.pf-m-info    { border-inline-start: 3px solid var(--p-accent); }
.pf-v5-c-alert__title {
    font-family: var(--p-font-head);
}
/* Toasts float over content: the deeper shadow, the top-edge status rule. */
.pf-v5-c-alert-group.pf-m-toast .pf-v5-c-alert {
    box-shadow: var(--pf-v5-global--BoxShadow--lg);
}

/* ── Empty states, expandables, description lists ───────────────────────── */
.pf-v5-c-empty-state__title-text,
.pf-v5-c-empty-state .pf-v5-c-title {
    font-family: var(--p-font-head);
}
.pf-v5-c-empty-state__icon {
    color: var(--p-text-faint);
}
.pf-v5-c-expandable-section__toggle {
    color: var(--p-accent-text);
}
.pf-v5-c-description-list__term {
    font-family: var(--p-font-head);
    font-weight: 600;
    color: var(--p-text-2);
}

/* ── Code editor ─────────────────────────────────────────────────────────────
   Monaco paints its own canvas and theme (its colours are not CSS variables
   and are re-applied by the editor), so only the FRAME is themed: border,
   corners, header. The editing surface stays Monaco's light theme. */
.pf-v5-c-code-editor {
    border-radius: var(--p-radius);
    overflow: hidden;
}
.pf-v5-c-code-editor__header,
.pf-v5-c-code-editor__main {
    border-color: var(--p-border);
}

/* ── Spinner, progress ───────────────────────────────────────────────────── */
.pf-v5-c-spinner {
    --pf-v5-c-spinner--Color: var(--p-accent);
}

/* ── Keyboard focus everywhere PatternFly does not draw one ─────────────── */
a:focus-visible,
[tabindex]:focus-visible {
    outline: 2px solid var(--p-focus);
    outline-offset: 2px;
}

/* ═══════════════════════════════════════════════════════════════════════════
   R&E design layer
   ───────────────────────────────────────────────────────────────────────────
   What the RE-Admin* design adds on top of the retint, done with CSS on the
   console's real DOM (no template, no index.ftl). Later in the file than the
   component rules above, so equal-specificity rules here win.
   ═══════════════════════════════════════════════════════════════════════════ */

/* ── Masthead and frame ──────────────────────────────────────────────────────
   NO environment warning banner here. The warning ("MASTER REALM — BEPERKTE
   TOEGANG", "TESTOMGEVING …") belongs on the SIGN-IN pages only — that is where
   someone decides whether they are in the right place. Once signed in, the
   environment stays visible through the badge next to "Admin Console", the
   tinted sidebar with its 4px environment rule, the realm block, the
   current-item fill and the hero border, without a 76px strip taking room on
   every screen. (Product decision; the --p-env-banner-* tokens remain in :root
   and the children's env.css, unused, so the banner can be restored by
   bringing back the masthead ::before/::after rules from the theme's history.)
   Design 1791841972-65b5 REMOVED the fixed 5px environment frame round the
   window from every MAB-/MAR-/MAY- artboard; the `body::after` frame rule is
   gone with it. */
.pf-v5-c-masthead {
    position: relative;
    min-height: 72px;
    border-block-end: 1px solid var(--p-border);
    box-shadow: none;
}
/* Lock-up | "Digital Solutions" over "Admin Console [MASTER]". The brand <a>
   holds only the logo <img>, so: the logo is taken out of flow (absolute, in
   the left padding), ::before writes both text lines (white-space: pre),
   ::first-line styles the first one, and ::after is the environment badge,
   inline after "Admin Console". The divider is a 1px background line.
   (A float does not work: ::before comes BEFORE the <img> in the box tree,
   so the first line is laid out above the floated logo.) */
.pf-v5-c-masthead__brand {
    position: relative;
    display: inline-block;
    padding-inline-start: calc(var(--p-logo-w) + 33px);
    white-space: nowrap;
    text-decoration: none;
    font: 500 13px/17px var(--p-font-ui);
    color: var(--p-masthead-muted);
    background: linear-gradient(var(--p-masthead-rule), var(--p-masthead-rule)) calc(var(--p-logo-w) + 16px) 50% / 1px 28px no-repeat;
    --p-logo-w: 160.66px;               /* 36px × the lock-up's 303.21:67.94 viewBox */
}
.pf-v5-c-masthead__brand > img {
    position: absolute;
    left: 0;
    top: calc(50% - 18px);
    height: 36px;
    width: var(--p-logo-w);
}
.pf-v5-c-masthead__brand::before {
    content: "Digital Solutions\A Admin Console";
    white-space: pre;
}
.pf-v5-c-masthead__brand::first-line {
    font: 800 15px/19px var(--p-font-head);
    color: var(--p-title);
}
.pf-v5-c-masthead__brand::after {
    content: var(--p-env-badge);
    display: inline-block;
    margin-inline-start: 8px;
    padding: 3px 7px 3px 21px;
    background: var(--p-env-lock) 6px 50% / 12px 12px no-repeat, var(--p-env);
    color: var(--p-env-ink);
    font: 800 11px/1 var(--p-font-head);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    vertical-align: 1px;
}
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
.pf-v5-c-masthead .pf-v5-c-menu-toggle.pf-m-plain {
    color: var(--p-masthead-ink);
}
/* The user menu: "[A] admin ▾", a red square with the initial. admin.js
   copies the first letter of the toggle text into data-initial (CSS cannot
   take a substring). */
.pf-v5-c-masthead [data-testid="options-toggle"] {
    gap: 10px;
    min-height: 44px;
    font: 600 14px/1 var(--p-font-ui);
}
.pf-v5-c-masthead [data-testid="options-toggle"][data-initial]::before {
    content: attr(data-initial);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    position: static;
    inset: auto;
    width: 32px;
    height: 32px;
    border: 0;
    background: var(--p-accent);
    color: var(--p-ink);
    font: 800 14px/1 var(--p-font-head);
    text-transform: uppercase;
}
.pf-v5-c-masthead .pf-v5-c-menu-toggle:hover,
.pf-v5-c-masthead .pf-v5-c-menu-toggle.pf-m-expanded,
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain:hover {
    background-color: var(--p-masthead-hover);
}

/* ── Sidebar ─────────────────────────────────────────────────────────────── */
.pf-v5-c-page {
    --pf-v5-c-page__sidebar--Width: 260px;
    --pf-v5-c-page__sidebar--xl--Width: 260px;
}
.pf-v5-c-page__sidebar {
    border-inline-end: 4px solid var(--p-env);
    box-shadow: none;
}
.pf-v5-c-page__sidebar-body {
    padding-block: 20px 32px;
}
.pf-v5-c-page__sidebar .pf-v5-c-nav {
    --pf-v5-c-nav__link--hover--BackgroundColor: var(--p-canvas);
    --pf-v5-c-nav__link--focus--BackgroundColor: var(--p-canvas);
    --pf-v5-c-nav__link--active--BackgroundColor: var(--p-canvas);
    --pf-v5-c-nav__link--m-current--BackgroundColor: var(--p-sidebar-accent);
    --pf-v5-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: var(--p-sidebar-accent);
    --pf-v5-c-nav__link--m-current--Color: var(--p-sidebar-current-ink);
    --pf-v5-c-nav__section-title--BorderBottomColor: transparent;
    --pf-v5-c-nav__item--before--BorderColor: transparent;
    padding: 0;
}
/* The current-realm header becomes the design's navy "REALM" block. Keycloak
   26.6 has no realm switcher in the sidebar (realms are picked on their own
   page), so the block carries no chevron: it is a label, not a control. */
.pf-v5-c-page__sidebar .pf-v5-c-nav > .pf-v5-c-nav__section-title:first-child {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: center;
    gap: 3px;
    min-height: 60px;
    margin: 24px 20px 0;
    padding: 8px 12px 8px 14px;
    border: 0;
    background: var(--p-sidebar-accent);
    color: var(--p-sidebar-current-ink);
    outline: 2px dashed var(--p-env);   /* the design's "restricted" dashed ring */
    outline-offset: 3px;
    font: 800 17px/1.2 var(--p-font-head);
    letter-spacing: normal;
    text-transform: none;
}
.pf-v5-c-page__sidebar .pf-v5-c-nav > .pf-v5-c-nav__section-title:first-child::before {
    content: "Realm";
    position: absolute;
    inset: -24px 0 auto 0;
    font: 700 12px/16px var(--p-font-head);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--p-sidebar-ink-2);
}
.pf-v5-c-page__sidebar .pf-v5-c-nav > .pf-v5-c-nav__section-title:first-child .pf-v5-c-label {
    --pf-v5-c-label--BackgroundColor: transparent;
    --pf-v5-c-label__content--Color: var(--p-sidebar-current-ink);
    --pf-v5-c-label__content--before--BorderColor: transparent;
    align-self: flex-start;
    background: transparent;
    padding: 0;
    font: 400 12px/1.2 var(--p-font-body);
}
.pf-v5-c-page__sidebar .pf-v5-c-nav > .pf-v5-c-nav__section-title:first-child .pf-v5-c-label__content {
    color: var(--p-sidebar-current-ink);
    padding: 0;
}
/* Keycloak's "Current realm" becomes the design's "Restricted realm"
   (--p-env-realm-note): the label text is collapsed and the copy drawn. */
.pf-v5-c-page__sidebar .pf-v5-c-nav > .pf-v5-c-nav__section-title:first-child .pf-v5-c-label__text {
    font-size: 0;
}
.pf-v5-c-page__sidebar .pf-v5-c-nav > .pf-v5-c-nav__section-title:first-child .pf-v5-c-label__text::after {
    content: var(--p-env-realm-note);
    font: 400 12px/1.2 var(--p-font-body);
}
.pf-v5-c-page__sidebar .pf-v5-c-nav > .pf-v5-c-nav__section-title:first-child .pf-v5-c-label__content::before { border: 0; }

/* ── Realm-aware copy (admin.js section 4) ───────────────────────────────────
   "Master" and "Restricted realm" are only true on the master realm.
   - Signed in to another realm (`/admin/<realm>/console/`): the masthead badge
     names the server (--p-env-server-badge: "Auth server" / "Hub server";
     Test keeps "Test").
   - Managing another realm (`#/<realm>/…`, follows the realm picker): the note
     under the realm name is Keycloak's own, translated "Current realm" label
     again instead of "Restricted realm".
   Without the attributes (script not run yet) the master copy stands. */
html[data-kte-login-realm]:not([data-kte-login-realm="master"]) {
    --p-env-badge: var(--p-env-server-badge);
}
html[data-kte-realm]:not([data-kte-realm="master"]) .pf-v5-c-page__sidebar .pf-v5-c-nav > .pf-v5-c-nav__section-title:first-child .pf-v5-c-label__text {
    font: 400 12px/1.2 var(--p-font-body);
}
html[data-kte-realm]:not([data-kte-realm="master"]) .pf-v5-c-page__sidebar .pf-v5-c-nav > .pf-v5-c-nav__section-title:first-child .pf-v5-c-label__text::after {
    content: none;
}
/* "MANAGE" / "CONFIGURE" */
.pf-v5-c-page__sidebar .pf-v5-c-nav__section {
    margin-block-start: 28px;
}
.pf-v5-c-page__sidebar .pf-v5-c-nav__section .pf-v5-c-nav__section-title {
    margin: 0 0 8px;
    padding: 0 24px;
    border: 0;
    font: 700 12px/16px var(--p-font-head);
    letter-spacing: 0.1em;
    text-transform: uppercase;
    color: var(--p-sidebar-ink-2);
}
.pf-v5-c-page__sidebar .pf-v5-c-nav__list > li {
    padding: 0 12px;
}
.pf-v5-c-page__sidebar .pf-v5-c-nav__link {
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 44px;
    margin: 0;
    padding: 0 12px;
    border-radius: 0;
    font: 500 15px/1.3 var(--p-font-ui);
    color: var(--p-sidebar-ink);
}
.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-page__sidebar .pf-v5-c-nav__link[aria-current="page"] {
    box-shadow: inset 4px 0 0 var(--p-env-marker);
    background-color: var(--p-sidebar-accent);
    color: var(--p-sidebar-current-ink);
    font-weight: 700;
}
/* No inline-start rule in this design: the current item is a solid fill. */
.pf-v5-c-page__sidebar .pf-v5-c-nav__link::after,
.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current::after,
.pf-v5-c-page__sidebar .pf-v5-c-nav__link[aria-current="page"]::after {
    border: 0;
}
/* Nav icons: a masked square tinted by CSS, keyed by Keycloak's stable ids. */
.pf-v5-c-page__sidebar .pf-v5-c-nav__link::before {
    content: "";
    position: static;
    inset: auto;
    flex: none;
    width: 19px;
    height: 19px;
    border: 0;
    background-color: var(--p-sidebar-icon);
    /* Fallback: the generic --p-icon-default, so EVERY nav item has an icon,
       including entries a later Keycloak adds (mask: none would paint the
       whole 19px square). */
    -webkit-mask: var(--p-nav-icon, var(--p-icon-default)) center / 19px 19px no-repeat;
            mask: var(--p-nav-icon, var(--p-icon-default)) center / 19px 19px no-repeat;
}
.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current::before,
.pf-v5-c-page__sidebar .pf-v5-c-nav__link[aria-current="page"]::before {
    background-color: var(--p-sidebar-current-ink);
}
#nav-item-organizations      { --p-nav-icon: var(--p-icon-organizations); }
#nav-item-clients            { --p-nav-icon: var(--p-icon-clients); }
#nav-item-client-scopes      { --p-nav-icon: var(--p-icon-client-scopes); }
#nav-item-roles              { --p-nav-icon: var(--p-icon-roles); }
#nav-item-users              { --p-nav-icon: var(--p-icon-users); }
#nav-item-groups             { --p-nav-icon: var(--p-icon-groups); }
#nav-item-sessions           { --p-nav-icon: var(--p-icon-sessions); }
#nav-item-events             { --p-nav-icon: var(--p-icon-events); }
#nav-item-realm-settings     { --p-nav-icon: var(--p-icon-realm-settings); }
#nav-item-authentication     { --p-nav-icon: var(--p-icon-authentication); }
#nav-item-identity-providers { --p-nav-icon: var(--p-icon-identity-providers); }
#nav-item-user-federation    { --p-nav-icon: var(--p-icon-user-federation); }
#nav-item-permissions        { --p-nav-icon: var(--p-icon-permissions); }
#nav-item-workflows          { --p-nav-icon: var(--p-icon-workflows); }
#nav-item-realms             { --p-nav-icon: var(--p-icon-realms); }
/* The ids are Keycloak's own: "nav-item" + the route path (PageNav.tsx,
   identical on 26.6.1 and 26.8.0). The full list on both versions:
   realms ("Manage realms"), organizations*, clients, client-scopes, roles,
   users, groups, sessions, events | realm-settings, authentication,
   permissions*, identity-providers, user-federation, workflows*, plus one
   item per declarative-UI page (experimental feature, off by default).
   * = conditional: organizations needs the realm's Organizations switch,
   permissions the realm's "Admin permissions" switch (FGAP v2), workflows
   the WORKFLOWS feature (default ON) and manage-realm (26.6) / realm-admin
   (26.8). Anything not listed takes --p-icon-default. */

/* ── Main column ─────────────────────────────────────────────────────────── */
.pf-v5-c-page__main {
    padding: 32px 40px 48px;
}
.pf-v5-c-page__main-breadcrumb:empty { display: none; }
.pf-v5-c-page__main-breadcrumb {
    display: flex;
    align-items: center;
    min-height: 44px;
    margin: 0 0 16px;
    padding: 0;
    background: transparent;
}
.pf-v5-c-breadcrumb {
    font: 500 13px/17.5px var(--p-font-ui);
    color: var(--p-text-muted);
}
.pf-v5-c-breadcrumb__item > a,
.pf-v5-c-breadcrumb__link {
    color: var(--p-title);
    text-decoration: underline;
}

/* ── The page hero ───────────────────────────────────────────────────────────
   Keycloak's view header (h1[data-testid=view-header] + #view-header-subkey)
   is restyled as the design's hero card: eyebrow, navy title, red brush,
   Aleo description; the art (planes, three red lines, the lightbulb) is one
   pseudo-element on the right.
   ⚠️ Matched as "the section whose OWN level holds the header": on Groups the
   header sits inside a drawer, and a looser :has() turned the whole drawer
   section into the hero. The hero is a size container, so the art steps back
   when the hero is narrow (Groups' drawer), not only when the window is. */
.pf-v5-c-page__main-section:has(> .pf-v5-l-level [data-testid="view-header"]) {
    position: relative;
    display: flex;
    flex-direction: column;
    justify-content: flex-end;
    min-height: 224px;
    margin: 0 0 28px;
    padding: 36px 36px 34px;
    border: 2px solid var(--p-env);
    background: var(--p-canvas);
    isolation: isolate;                 /* the art sits at z-index -1 inside it */
    container-type: inline-size;
}
.pf-v5-c-page__main-section:has(> .pf-v5-l-level [data-testid="view-header"])::after {
    content: "";
    position: absolute;
    z-index: -1;
    inset: 0 0 0 auto;
    width: 620px;
    max-width: 100%;
    background:
        url('../img/hero-bulb.svg') right -14px bottom -14px / 287px 286px no-repeat,
        var(--p-hero-planes) right top / 544px 100% no-repeat;
    pointer-events: none;
}
/* Content keeps clear of the art. NOT positioned: the header toolbar below is
   absolutely placed against the hero itself, not against this wrapper. */
.pf-v5-c-page__main-section:has(> .pf-v5-l-level [data-testid="view-header"]) > * {
    max-width: calc(100% - 500px);
}
@container (max-width: 1000px) {
    .pf-v5-c-page__main-section:has(> .pf-v5-l-level [data-testid="view-header"])::after { opacity: 0.25; }
    .pf-v5-c-page__main-section:has(> .pf-v5-l-level [data-testid="view-header"]) > * { max-width: none; }
}
h1[data-testid="view-header"] {
    display: block;
    margin: 0;
    font: 800 40px/1 var(--p-font-head);
    color: var(--p-title);
    overflow-wrap: anywhere;
}
/* Eyebrow: lock + the server name ("AUTH SERVER" / "HUB SERVER" /
   "TESTSERVER") in ink (--p-env-eyebrow). Since design 1791841972-65b5 it
   no longer says "master realm": that confused admins managing other realms. */
h1[data-testid="view-header"]::before {
    content: var(--p-env-eyebrow);
    display: block;
    margin: 0 0 12px;
    padding-inline-start: 22px;
    background: var(--p-eyebrow-lock) 0 50% / 14px 14px no-repeat;
    font: 700 12px/16px var(--p-font-head);
    letter-spacing: 0.14em;
    text-transform: uppercase;
    color: var(--p-text);
}
h1[data-testid="view-header"]::after {
    content: "";
    display: block;
    width: 150px;
    height: 10px;
    margin: 10px 0 0;
    background: var(--p-brush) 0 0 / 100% 100% no-repeat;
}
#view-header-subkey p {
    margin: 14px 0 0;
    max-width: 620px;
    font: 400 15px/20px var(--p-font-body);
    color: var(--p-text);
}
#view-header-subkey p:empty { display: none; }
#view-header-subkey a {
    margin-inline-start: 4px;
    font: 600 14px/19px var(--p-font-ui);
    color: var(--p-title);
    text-decoration: underline;
}
#view-header-subkey a:hover { color: var(--p-accent-text); }
/* The header's own toolbar (Enabled switch + Action ▾ on detail pages) sits
   ABOVE the hero, right-aligned, on the breadcrumb row, as in the design.
   Without a breadcrumb the hero leaves that row free itself. */
.pf-v5-c-page__main-section:has(> .pf-v5-l-level [data-testid="view-header"]) .pf-v5-l-level.pf-m-gutter > :last-child:has(.pf-v5-c-toolbar__item) {
    position: absolute;
    inset: -61px -1px auto auto;
    max-width: none;
}
.pf-v5-c-page__main-breadcrumb:empty + .pf-v5-c-page__main-section:has(> .pf-v5-l-level [data-testid="view-header"]):has(.pf-v5-c-toolbar__item) {
    margin-block-start: 60px;
}
.pf-v5-c-page__main-section:has(> .pf-v5-l-level [data-testid="view-header"]) .pf-v5-c-toolbar,
.pf-v5-c-page__main-section:has(> .pf-v5-l-level [data-testid="view-header"]) .pf-v5-c-toolbar__content {
    --pf-v5-c-toolbar__content--PaddingLeft: 0;
    --pf-v5-c-toolbar__content--PaddingRight: 0;
    --pf-v5-c-toolbar__content--xl--PaddingLeft: 0;
    --pf-v5-c-toolbar__content--xl--PaddingRight: 0;
    padding-inline: 0;
    background: transparent;
}
/* "Enabled [switch]": the label before the track, as in the design. */
.pf-v5-c-page__main-section:has(> .pf-v5-l-level [data-testid="view-header"]) .pf-v5-c-switch {
    flex-direction: row-reverse;
    align-items: center;
    gap: 10px;
}
.pf-v5-c-page__main-section:has(> .pf-v5-l-level [data-testid="view-header"]) .pf-v5-c-switch__label {
    margin: 0;
}
.pf-v5-c-page__main-section:has(> .pf-v5-l-level [data-testid="view-header"]) .pf-v5-c-switch__label {
    font: 600 14px/1 var(--p-font-ui);
    color: var(--p-text);
}

/* ── Sections under the hero: on the main column's 40px gutter ──────────── */
.pf-v5-c-page__main > .pf-v5-c-page__main-section:not(:has(> .pf-v5-l-level [data-testid="view-header"])) {
    padding-inline: 0;
}

/* ── Tabs: plain, red text + 3px red underline on the current one ───────── */
.pf-v5-c-tabs {
    --pf-v5-c-tabs--inset: 0;
    --pf-v5-c-tabs--m-box--inset: 0;
    --pf-v5-c-tabs--before--BorderColor: var(--p-border);
    --pf-v5-c-tabs__link--Color: var(--p-text);
    --pf-v5-c-tabs__item--m-current__link--Color: var(--p-accent-text);
    --pf-v5-c-tabs--m-box__link--BackgroundColor: transparent;
    --pf-v5-c-tabs--m-box__item--m-current__link--BackgroundColor: transparent;
    margin-block-end: 28px;
    padding-inline: 0;
}
.pf-v5-c-tabs.pf-m-inset-lg-on-xl,
.pf-v5-c-tabs.pf-m-inset-2xl-on-2xl { --pf-v5-c-tabs--inset: 0; }
/* ⚠️ The inset modifiers re-pad the tab bar (24px) under a breakpoint rule
   that outranks a plain .pf-v5-c-tabs; the first tab must sit on the gutter. */
.pf-v5-c-page__main .pf-v5-c-tabs.pf-m-box,
.pf-v5-c-page__main .pf-v5-c-tabs[class*="pf-m-inset"] {
    padding-inline: 0;
}
.pf-v5-c-tabs__link,
.pf-v5-c-tabs.pf-m-box .pf-v5-c-tabs__link,
.pf-v5-c-tabs.pf-m-box .pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link {
    display: inline-flex;
    align-items: center;
    min-height: 48px;
    padding: 0 16px;
    background: transparent;
    font: 500 14px/1 var(--p-font-ui);
    color: var(--p-text);
}
.pf-v5-c-tabs__link::before,
.pf-v5-c-tabs.pf-m-box .pf-v5-c-tabs__link::before {
    border: 0;
}
.pf-v5-c-tabs__link::after,
.pf-v5-c-tabs.pf-m-box .pf-v5-c-tabs__link::after {
    border: 0;
    inset: auto 0 0 0;
}
.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link,
.pf-v5-c-tabs.pf-m-box .pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link {
    color: var(--p-accent-text);
    font-weight: 700;
}
.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link::after,
.pf-v5-c-tabs.pf-m-box .pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link::after {
    border: 0;
    border-block-end: 3px solid var(--p-accent);
}
.pf-v5-c-tabs__link:hover { color: var(--p-accent-hi); }
.pf-v5-c-tabs::before {
    border-block-end: 1px solid var(--p-border);
    border-color: var(--p-border);
}

/* ── Toolbar controls: 44px, 1.5px blue-50 borders, square ─────────────── */
.pf-v5-c-toolbar {
    --pf-v5-c-toolbar--BackgroundColor: transparent;
}
/* List toolbars sit on the 40px gutter, 20px above the table. */
.pf-v5-c-page__main .pf-v5-c-tab-content > .pf-v5-c-toolbar,
.pf-v5-c-page__main .pf-v5-c-page__main-section > .pf-v5-c-toolbar,
.pf-v5-c-page__main [data-testid="table-toolbar"] {
    --pf-v5-c-toolbar--PaddingTop: 0;
    --pf-v5-c-toolbar--PaddingBottom: 0;
    --pf-v5-c-toolbar__content--PaddingLeft: 0;
    --pf-v5-c-toolbar__content--PaddingRight: 0;
    --pf-v5-c-toolbar__content--xl--PaddingLeft: 0;
    --pf-v5-c-toolbar__content--xl--PaddingRight: 0;
    padding: 0;
    margin-block-end: 20px;
}
.pf-v5-c-menu-toggle:not(.pf-m-plain),
.pf-v5-c-text-input-group,
.pf-v5-c-button.pf-m-control {
    min-height: var(--p-control-h);
    border-width: var(--p-control-bw);
    font: 500 14px/1 var(--p-font-ui);
}
.pf-v5-c-menu-toggle:not(.pf-m-plain) { padding-inline: 14px 12px; gap: 12px; }
.pf-v5-c-menu-toggle .pf-v5-c-text-input-group { min-height: 0; border: 0; }
.pf-v5-c-text-input-group__text-input { font: 400 15px/1 var(--p-font-ui); }
.pf-v5-c-text-input-group__text-input::placeholder,
.pf-v5-c-form-control > input::placeholder,
.pf-v5-c-form-control > textarea::placeholder {
    color: var(--p-text-muted);
    opacity: 1;
}
.pf-v5-c-text-input-group__icon { color: var(--p-text-muted); }
/* Pagination "1 - 10 ▾" is a bordered box in the design. */
.pf-v5-c-pagination .pf-v5-c-menu-toggle.pf-m-plain {
    min-height: var(--p-control-h);
    padding-inline: 14px 12px;
    border: var(--p-control-bw) solid var(--p-border-mid);
    background: var(--p-raised);
    color: var(--p-text);
}

/* ── Buttons ─────────────────────────────────────────────────────────────── */
.pf-v5-c-button.pf-m-primary,
.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-tertiary,
.pf-v5-c-button.pf-m-danger,
.pf-v5-c-toolbar .pf-v5-c-button.pf-m-link:not(.pf-m-inline):not(.pf-m-plain) {
    display: inline-flex;               /* centres the label in 44px; some are <a> */
    align-items: center;
    justify-content: center;
    gap: 8px;
    min-height: var(--p-control-h);
    padding: 0 18px;
    font: 600 14px/1 var(--p-font-ui);
    --pf-v5-c-button--after--BorderWidth: var(--p-control-bw);
    --pf-v5-c-button--hover__after--BorderWidth: var(--p-control-bw);
    --pf-v5-c-button--focus__after--BorderWidth: var(--p-control-bw);
    --pf-v5-c-button--active__after--BorderWidth: var(--p-control-bw);
}
.pf-v5-c-button.pf-m-primary { background-color: var(--p-accent); }
.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus-visible { background-color: var(--p-accent-hi); }
/* Secondary: navy outline, navy label (the design's "Revert"). */
.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-tertiary {
    --pf-v5-c-button--after--BorderColor: var(--p-accent-hi);
    --pf-v5-c-button--hover__after--BorderColor: var(--p-accent-hi);
    --pf-v5-c-button--m-secondary--after--BorderColor: var(--p-accent-hi);
    --pf-v5-c-button--m-secondary--hover__after--BorderColor: var(--p-accent-hi);
    --pf-v5-c-button--m-tertiary--after--BorderColor: var(--p-accent-hi);
    background-color: transparent;
    color: var(--p-accent-hi);
}
.pf-v5-c-button.pf-m-secondary:hover,
.pf-v5-c-button.pf-m-tertiary:hover {
    background-color: var(--p-sunken);
    color: var(--p-accent-hi);
}
/* Toolbar link buttons ("Delete user", "Refresh") are the design's quiet
   outlined buttons: hairline border, navy label; ink-muted when disabled. */
.pf-v5-c-toolbar .pf-v5-c-button.pf-m-link:not(.pf-m-inline):not(.pf-m-plain) {
    border: var(--p-control-bw) solid var(--p-border);
    color: var(--p-accent-hi);
    background: transparent;
}
.pf-v5-c-toolbar .pf-v5-c-button.pf-m-link:not(.pf-m-inline):not(.pf-m-plain):hover { border-color: var(--p-accent-hi); }
.pf-v5-c-toolbar .pf-v5-c-button.pf-m-link:not(.pf-m-inline):disabled,
.pf-v5-c-toolbar .pf-v5-c-button.pf-m-link.pf-m-disabled:not(.pf-m-inline),
.pf-v5-c-toolbar .pf-v5-c-button.pf-m-link.pf-m-aria-disabled:not(.pf-m-inline) {
    color: var(--p-text-muted);
    border-color: var(--p-border);
    background: transparent;
}
.pf-v5-c-toolbar .pf-v5-c-divider.pf-m-vertical { display: none; }
/* Disabled filled buttons: the read-only fill with navy ink (8.94). */
.pf-v5-c-button.pf-m-primary:disabled,
.pf-v5-c-button.pf-m-primary.pf-m-disabled,
.pf-v5-c-button.pf-m-primary.pf-m-aria-disabled,
.pf-v5-c-button.pf-m-danger:disabled {
    background-color: var(--p-quiet);
    color: var(--p-text-3);
}

/* ── Tables: pastel-red head with a red rule, ink cells, red links ─────── */
.pf-v5-c-table {
    --pf-v5-c-table--BorderColor: var(--p-line);
    --pf-v5-c-table--cell--Color: var(--p-text);
    border: 1px solid var(--p-border);
    color: var(--p-text);
}
.pf-v5-c-table thead th,
.pf-v5-c-table thead td,
.pf-v5-c-table__thead .pf-v5-c-table__th,
.pf-v5-c-table__thead .pf-v5-c-table__td {
    background-color: var(--p-accent-soft);
    font: 700 13px/17.5px var(--p-font-head);
    letter-spacing: normal;
    text-transform: none;
    color: var(--p-text);
    padding-block: 14px;
}
.pf-v5-c-table thead th button,
.pf-v5-c-table thead .pf-v5-c-table__button {
    font: inherit;
    color: inherit;
}
/* An extra head cell that fills the kebab column the head does not have
   (a row background only paints under real cells). */
.pf-v5-c-table > thead > tr::after,
.pf-v5-c-table > .pf-v5-c-table__thead > .pf-v5-c-table__tr::after {
    content: "";
    display: table-cell;
    width: 0;
    background-color: var(--p-accent-soft);
}
/* The row too: list tables have one more body column (the kebab) than head
   cells, and the head must still run the full width. */
.pf-v5-c-table > thead > tr,
.pf-v5-c-table > .pf-v5-c-table__thead > .pf-v5-c-table__tr {
    background-color: var(--p-accent-soft);
    border-block-end: 2px solid var(--p-accent);
}
.pf-v5-c-table tbody td,
.pf-v5-c-table tbody th {
    font: 400 14px/19px var(--p-font-ui);
    color: var(--p-text);
    padding-block: 14px;
}
.pf-v5-c-table tbody tr:hover > td,
.pf-v5-c-table tbody tr:hover > th {
    background-color: var(--p-sunken);
}
.pf-v5-c-table tbody a {
    font-weight: 700;
    color: var(--p-accent-text);
    text-decoration: underline;
}
/* ⚠️ The design's red link on its blue-20 hover row is 2.93:1. On a hovered
   row the link takes the design's own a:hover colour (navy, 8.94:1). */
.pf-v5-c-table tbody tr:hover a { color: var(--p-accent-hi); }
.pf-v5-c-table input[type="checkbox"] { width: 18px; height: 18px; }

/* ── Labels: the design's "Disabled" tag is red-20 with ink ────────────── */
.pf-v5-c-label {
    font: 600 13px/1.3 var(--p-font-ui);
}
.pf-v5-c-label.pf-m-red {
    --pf-v5-c-label--BackgroundColor: var(--p-accent-soft);
    --pf-v5-c-label__content--Color: var(--p-text);
    --pf-v5-c-label__content--before--BorderColor: transparent;
    --pf-v5-c-label--m-red--BackgroundColor: var(--p-accent-soft);
    --pf-v5-c-label--m-red__content--Color: var(--p-text);
    --pf-v5-c-label--m-red__content--before--BorderColor: transparent;
}

/* ── Forms ───────────────────────────────────────────────────────────────── */
.pf-v5-c-form-control {
    min-height: var(--p-field-h);
    border-width: var(--p-control-bw);
    font: 400 15px/1.2 var(--p-font-ui);
}
.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select,
.pf-v5-c-form-control > textarea { font: inherit; }
.pf-v5-c-form-control > input,
.pf-v5-c-form-control > select {
    min-height: calc(var(--p-field-h) - 2 * var(--p-control-bw));
}
/* Form actions ("Save" / "Revert"): the link button becomes the design's
   outlined navy secondary. */
.pf-v5-c-form__actions .pf-v5-c-button.pf-m-link:not(.pf-m-inline) {
    min-height: var(--p-control-h);
    padding: 0 18px;
    border: var(--p-control-bw) solid var(--p-accent-hi);
    background: transparent;
    color: var(--p-accent-hi);
    font: 600 14px/1 var(--p-font-ui);
}
.pf-v5-c-form__actions .pf-v5-c-button.pf-m-link:not(.pf-m-inline):hover { background: var(--p-sunken); }
/* Horizontal forms: the design's wider label column (long labels such as
   "Required user actions" stay on one line). */
.pf-v5-c-form.pf-m-horizontal {
    --pf-v5-c-form--m-horizontal__group-label--md--GridColumnWidth: 220px;
}
.pf-v5-c-form__label-text {
    font: 600 14px/19px var(--p-font-ui);
    color: var(--p-text);
}
.pf-v5-c-form__label-required { color: var(--p-accent-text); }
.pf-v5-c-form__group-label-help,
.pf-v5-c-form__group-label .pf-v5-c-button.pf-m-plain { color: var(--p-text-muted); }
.pf-v5-c-form__helper-text,
.pf-v5-c-helper-text__item { font-family: var(--p-font-body); }
/* Read-only = the design's blue-20 fill with the strong border kept and ink
   text (12.76:1). Overrides the starter's quieter border and ink. */
.pf-v5-c-form-control.pf-m-readonly,
.pf-v5-c-form-control:has(> input[readonly]),
.pf-v5-c-form-control:has(> textarea[readonly]) {
    background-color: var(--p-quiet);
    border-color: var(--p-border-mid);
    color: var(--p-text);
}
/* Joined controls (realm/user ID + copy button) overlap by the 1.5px border. */
.pf-v5-c-input-group > .pf-v5-c-input-group__item + .pf-v5-c-input-group__item,
.pf-v5-c-clipboard-copy__group > * + * {
    margin-inline-start: calc(-1 * var(--p-control-bw));
}

/* Form section headings: the design's numbered navy square with a beige
   offset shadow, numbered per form by a CSS counter. */
.pf-v5-c-form,
.pf-v5-c-page__main-section { counter-reset: kc-section; }
.pf-v5-c-form__section-title,
.kc-form-panel__title,
.pf-v5-l-grid__item > section > h1.pf-v5-c-title,
.pf-v5-l-grid__item > section > h2.pf-v5-c-title {
    display: flex;
    align-items: center;
    gap: 14px;
    font: 700 22px/27px var(--p-font-head);
    color: var(--p-title);
    counter-increment: kc-section;
}
.pf-v5-c-form__section-title::before,
.kc-form-panel__title::before,
.pf-v5-l-grid__item > section > h1.pf-v5-c-title::before,
.pf-v5-l-grid__item > section > h2.pf-v5-c-title::before {
    content: counter(kc-section, decimal-leading-zero);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    flex: none;
    width: 40px;
    height: 40px;
    background: var(--p-sidebar-accent);
    color: var(--p-sidebar-current-ink);
    font: 800 15px/1 var(--p-font-head);
    box-shadow: 4px 4px 0 var(--p-beige);
}

/* Switches: the design's square 46 × 26 track, white square knob, red when
   on, blue-50 when off (3.66:1 non-text). */
.pf-v5-c-switch {
    --pf-v5-c-switch__toggle--Width: 46px;
    --pf-v5-c-switch__toggle--Height: 26px;
    --pf-v5-c-switch--Height: 26px;
    --pf-v5-c-switch__toggle--BorderRadius: 0;
    --pf-v5-c-switch__toggle--before--BorderRadius: 0;
    --pf-v5-c-switch__toggle--before--Width: 20px;
    --pf-v5-c-switch__toggle--before--Height: 20px;
    --pf-v5-c-switch__toggle--before--Top: 3px;
    --pf-v5-c-switch__toggle--before--Left: 3px;
    --pf-v5-c-switch__toggle--before--BoxShadow: none;
    --pf-v5-c-switch__toggle--BackgroundColor: var(--p-border-mid);
    --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--p-accent);
    --pf-v5-c-switch__input--checked__toggle--before--TranslateX: 20px;
    --pf-v5-c-switch__label--Color: var(--p-text);
}
.pf-v5-c-switch__toggle,
.pf-v5-c-switch__toggle::before { border-radius: 0; }
.pf-v5-c-switch__toggle-icon { display: none; }

/* ── Menus and dialogs: square, hairline frame ──────────────────────────── */
.pf-v5-c-menu { border-color: var(--p-border); }
.pf-v5-c-menu__item { font: 500 14px/1.3 var(--p-font-ui); }
.pf-v5-c-modal-box__title,
.pf-v5-c-modal-box__title-text { font: 800 22px/27px var(--p-font-head); color: var(--p-title); }
.pf-v5-c-modal-box__body { font-family: var(--p-font-body); }
.pf-v5-c-alert__title { font-weight: 700; }

/* ── Content cards (dashboard, empty states) ─────────────────────────────── */
.pf-v5-c-card {
    border: 1px solid var(--p-border);
    box-shadow: none;
}
.pf-v5-c-card__title,
.pf-v5-c-card__title-text {
    font: 700 18px/1.3 var(--p-font-head);
    color: var(--p-title);
}
.pf-v5-c-empty-state__title-text { color: var(--p-title); font-weight: 800; }
.pf-v5-c-content p,
.pf-v5-c-content li { font-family: var(--p-font-body); }