/*
 * BeON administration console theme.
 *
 * The admin console is dense and data heavy, so the branding here is
 * deliberately lighter than on the login pages: BeON red for actions, links and
 * selection state, everything else stays PatternFly default.
 */

:root {
    --beon-red: #d93a2f;
    --beon-red-hover: #b82c23;
    --beon-red-active: #99231b;
    --beon-hairline: #e6e0df;

    --pf-v5-global--primary-color--100: var(--beon-red);
    --pf-v5-global--primary-color--200: var(--beon-red-hover);
    --pf-v5-global--primary-color--300: var(--beon-red);
    --pf-v5-global--link--Color: var(--beon-red-hover);
    --pf-v5-global--link--Color--hover: var(--beon-red-active);
    --pf-v5-global--link--Color--dark: var(--beon-red-hover);
    --pf-v5-global--link--Color--dark--hover: var(--beon-red-active);
    --pf-v5-global--active-color--100: var(--beon-red);
}

/* Masthead: a warm off-white bar so it reads as a distinct band against the
 * white content area. Tried a solid-red bar matching the login page's brand
 * panel; next to the dark sidebar it made two heavy, unrelated colour
 * blocks fighting each other, and it also exposed a real bug - the
 * MenuToggle's own default border, invisible on white, showed as a stray
 * box around "admin" once the background changed. Back to light, which
 * also means every control here keeps PatternFly's normal dark-on-light
 * colours - no white-text overrides to carry. */
.pf-v5-c-masthead {
    --pf-v5-c-masthead--BackgroundColor: transparent;
    --pf-v5-c-masthead--Color: #212121;
    background: linear-gradient(180deg, #ffffff 0%, #fdf1ef 100%);
    border-bottom: 2px solid var(--beon-red);
    box-shadow: 0 2px 10px rgba(122, 45, 40, 0.08);
    padding-block: 0.25rem;
}

/* The action icons (help, admin menu, avatar) sat edge to edge by default -
 * fine as flat buttons, but the new pill hover shapes touched each other
 * with no breathing room between them. */
.pf-v5-c-masthead .pf-v5-c-toolbar__group {
    gap: 0.25rem;
}

.pf-v5-c-masthead,
.pf-v5-c-masthead .pf-v5-c-menu-toggle,
.pf-v5-c-masthead .pf-v5-c-menu-toggle__text,
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain {
    color: #212121;
}

/* The Help icon (a .pf-m-plain toggle with no text, just an SVG) turned
 * out to read `color` from a THIRD token, found only by tracing the
 * cascade in the browser: `.pf-m-plain:not(.pf-m-text)` sets `color:
 * var(--pf-v5-c-menu-toggle--m-plain--Color)` directly, and that variable
 * defaults to --pf-v5-global--Color--200 - a pale grey for light-on-light
 * secondary text. Neither --menu-toggle--Color (a toggle's own text) nor
 * --menu-toggle__toggle-icon--Color (an icon *inside* a text toggle)
 * reach this - the help icon stayed nearly invisible through both. */
.pf-v5-c-masthead .pf-v5-c-menu-toggle {
    --pf-v5-c-menu-toggle--Color: #212121;
    --pf-v5-c-menu-toggle__toggle-icon--Color: #212121;
    --pf-v5-c-menu-toggle--m-plain__toggle-icon--Color: #212121;
    --pf-v5-c-menu-toggle--m-plain--Color: #212121;
}

.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain {
    --pf-v5-c-button--m-plain--Color: #4f4f4f;
    --pf-v5-c-button--m-plain--hover--Color: var(--beon-red-hover);
}

/* Round pill hover states on the header's own controls (nav toggle, help,
 * user menu) - matching the rounded-and-smooth language the login pages
 * use, instead of the flat instant-colour-change PatternFly default.
 * Explicit border:none because MenuToggle carries its own default border -
 * invisible against white content, but worth killing outright rather than
 * relying on it staying invisible if the background ever changes again. */
.pf-v5-c-masthead .pf-v5-c-menu-toggle,
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain {
    border: none;
    padding-top: 8px;
    border-radius: 20px;
    transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle:hover,
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain:hover {
    background-color: rgba(217, 58, 47, 0.08);
}

/* Every MenuToggle - "admin", "Action", "Require SSL", the help/avatar
 * icons - still had PatternFly's own ::before (top/left/right) and ::after
 * (bottom) drawing a second, separate border on top of whichever real
 * border this file gives it above: the exact double-border bug the login
 * pages had, just not caught here yet because it needed a menu-toggle in
 * the actual content area to see - "admin" in the masthead alone didn't
 * show it clearly enough to notice. One rule, unscoped, since every
 * menu-toggle in this theme now gets its own explicit border and none of
 * them need PatternFly's. */
.pf-v5-c-menu-toggle::before,
.pf-v5-c-menu-toggle::after {
    display: none;
}

/* The icon-only toggles (help, avatar) read fine as plain icons that only
 * pick up a pill once you hover them. "admin" is different - it is text,
 * not an icon, so at rest it just looked like loose text floating in the
 * header until you happened to hover it and a pill appeared from nowhere.
 * A quiet border at rest is what tells you it is a button before you touch
 * it at all - the same "rounded box" language as every other control now,
 * not a per-state pill. `:not(.pf-m-plain)` is what picks "admin" out from
 * the icon-only pf-m-plain toggles beside it. */
.pf-v5-c-masthead .pf-v5-c-menu-toggle:not(.pf-m-plain) {
    border: 1px solid var(--beon-hairline);
    background-color: rgba(255, 255, 255, 0.6);
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle:not(.pf-m-plain):hover {
    border-color: #f0cdca;
    background-color: rgba(217, 58, 47, 0.08);
}

/* The sidebar toggle used PatternFly's default hamburger (3 bars), then a
 * CSS-drawn double chevron - replaced again with a dedicated icon (a
 * sidebar outline with its list column marked by three dots), matching
 * what the console should use everywhere this control appears. A mask
 * rather than a background-image so it still picks up `currentColor` and
 * keeps working if the button's colour ever changes state. */
#nav-toggle svg {
    display: none;
}

#nav-toggle {
    position: relative;
}

#nav-toggle::after {
    content: "";
    display: inline-block;
    position: static;
    width: 20px;
    height: 20px;
    background-color: currentColor;
    -webkit-mask-image: url("../img/sidebar-toggle.svg");
    mask-image: url("../img/sidebar-toggle.svg");
    -webkit-mask-repeat: no-repeat;
    mask-repeat: no-repeat;
    -webkit-mask-position: center;
    mask-position: center;
    -webkit-mask-size: contain;
    mask-size: contain;
}

/* PatternFly leaves the brand at width/height auto, which let the wordmark
 * shrink to ~64px wide and made "by SCG" illegible. */
.pf-v5-c-masthead__brand img,
.pf-v5-c-masthead img.pf-v5-c-brand {
    height: 44px;
    width: auto;
    max-height: none;
}

.pf-v5-c-button.pf-m-primary {
    --pf-v5-c-button--m-primary--BackgroundColor: var(--beon-red);
    --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--beon-red-hover);
    --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--beon-red-hover);
    --pf-v5-c-button--m-primary--active--BackgroundColor: var(--beon-red-active);
}

.pf-v5-c-button.pf-m-secondary {
    --pf-v5-c-button--m-secondary--Color: var(--beon-red-hover);
    --pf-v5-c-button--m-secondary--after--BorderColor: #f0cdca;
    --pf-v5-c-button--m-secondary--hover--Color: var(--beon-red-active);
}

/* ---- Rounded, everywhere -----------------------------------------------
 * The header and sidebar are all rounded corners and soft borders now; next
 * to that, every plain-PatternFly button, field and toggle in the content
 * area - still square, still the default underline-only field - read as an
 * unfinished second theme glued onto the first. Same radius scale as the
 * login pages (8px controls) applied to every widget class the console
 * actually uses, not just the ones a specific page happened to need. */
.pf-v5-c-button {
    --pf-v5-c-button--BorderRadius: 8px;
    border-radius: 8px;
    transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* A secondary/control button's visible border isn't a real `border` - it's
 * a `::after` pseudo-element (position: absolute, inset: 0) with its OWN
 * independent radius variable, `--pf-v5-c-button--after--BorderRadius`,
 * which the rule above never touches by changing
 * `--pf-v5-c-button--BorderRadius`. For a button with a transparent fill
 * (every secondary button - "Show inherited roles", "Cancel", "Revert",
 * ...) that outline IS the entire visible shape, so the button still read
 * as its old ~3px-radius self no matter what was set on the button's own
 * `border-radius` - even `!important` on the wrong property changes
 * nothing, because the box actually being painted is a different element. */
.pf-v5-c-button::after {
    border-radius: 8px;
}

/* Text inputs (Realm name, Display name, ...). PatternFly's own ::before/
 * ::after draw a separate underline UNDER this border - same double-line
 * bug as the login pages had, same fix: turn them off. */
.pf-v5-c-form-control {
    --pf-v5-c-form-control--BorderRadius: 8px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--beon-hairline);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.pf-v5-c-form-control::before,
.pf-v5-c-form-control::after {
    display: none;
}

.pf-v5-c-form-control:hover {
    border-color: #f0cdca;
}

.pf-v5-c-form-control:focus-within {
    border-color: var(--beon-red);
    box-shadow: 0 0 0 3px rgba(217, 58, 47, 0.12);
}

.pf-v5-c-form-control > input:focus,
.pf-v5-c-form-control > select:focus,
.pf-v5-c-form-control > textarea:focus {
    outline: none;
}

/* Search boxes are a different component, `.pf-v5-c-text-input-group`, not
 * `.pf-v5-c-form-control` - the rules above never reach them. */
.pf-v5-c-text-input-group {
    border: 1px solid var(--beon-hairline);
    border-radius: 8px;
    overflow: hidden;
    background-color: #ffffff;
    transition: box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.pf-v5-c-text-input-group__text::before,
.pf-v5-c-text-input-group__text::after {
    display: none;
}

.pf-v5-c-text-input-group:hover {
    border-color: #f0cdca;
}

.pf-v5-c-text-input-group:focus-within {
    border-color: var(--beon-red);
    box-shadow: 0 0 0 3px rgba(217, 58, 47, 0.12);
}

/* The "clear" (X) button that appears once a search box has text is a
 * plain <button> the browser gives its own native focus ring - the same
 * orange auto-outline the login page's inputs had before that fix. The
 * glow above is already the field's own focus indicator; this ring was
 * a second, off-brand one stacked on top of it, only visible once
 * something is typed. */
.pf-v5-c-text-input-group button:focus,
.pf-v5-c-text-input-group input:focus {
    outline: none;
}

/* Selects (Require SSL, "Action", ...) are a third component, a MenuToggle
 * button, not a form control. Scoped to the main content area so it never
 * touches the masthead's own icon toggles and "admin" pill above, which
 * already have their own treatment.
 *
 * `:not(.pf-m-plain)` excludes the kebab (⋮) menu on every table row (each
 * one is a `.pf-v5-c-menu-toggle.pf-m-plain`, same component, no text) -
 * this rule boxed every single one with a border and a white fill, running
 * the same square down an entire column and turning a normally-invisible-
 * until-hover icon button into a persistent, repeated box. A real select
 * needs to look like a field at rest; a kebab is supposed to disappear
 * into the row until you're pointed at it, same as it always did.
 *
 * `:not(.pf-m-primary)` excludes "Assign role" (Groups → Role mapping) and
 * anything else using the coloured primary variant. PatternFly's own
 * `.pf-m-primary` sets this toggle's *text* to white, meant to sit on a
 * coloured fill - forcing a white background here on top of that, same as
 * every neutral select, left white text on a white box: the button read as
 * completely blank until you knew to click the empty space. Coloured
 * variants get their own rule below instead of this neutral one. */
.pf-v5-c-page__main .pf-v5-c-menu-toggle:not(.pf-m-plain):not(.pf-m-primary) {
    border: 1px solid var(--beon-hairline);
    border-radius: 8px;
    background-color: #ffffff;
    transition: box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.pf-v5-c-page__main .pf-v5-c-menu-toggle:not(.pf-m-plain):not(.pf-m-primary):hover {
    border-color: #f0cdca;
}

.pf-v5-c-page__main .pf-v5-c-menu-toggle:not(.pf-m-plain):not(.pf-m-primary):focus-within {
    border-color: var(--beon-red);
    box-shadow: 0 0 0 3px rgba(217, 58, 47, 0.12);
}

/* The coloured variant ("Assign role") matches the theme's other primary
 * actions (`.pf-v5-c-button.pf-m-primary`) instead of PatternFly's default
 * blue - and its own default radius, `--pf-v5-global--BorderRadius--sm`
 * (3px), instead of the 8px scale every other button and field in this
 * theme uses. Fixing only the colour left it sitting right next to
 * "Show inherited roles" (a `.pf-v5-c-button`, already 8px) with visibly
 * squarer corners - the one button on the page still on PatternFly's
 * default radius. */
.pf-v5-c-menu-toggle.pf-m-primary {
    --pf-v5-c-menu-toggle--m-primary--BackgroundColor: var(--beon-red);
    --pf-v5-c-menu-toggle--m-primary--hover--BackgroundColor: var(--beon-red-hover);
    --pf-v5-c-menu-toggle--m-primary--focus--BackgroundColor: var(--beon-red-hover);
    --pf-v5-c-menu-toggle--m-primary--active--BackgroundColor: var(--beon-red-active);
    --pf-v5-c-menu-toggle--m-primary--BorderRadius: 8px;
}

/* Toggle switches (Enabled, User-managed access, Organizations, ...) -
 * PatternFly draws these as a true oval already, but the square-ended
 * track under some browsers/zoom levels reads jagged next to everything
 * else's soft corners. Forcing a full radius keeps it a clean pill. */
.pf-v5-c-switch__toggle {
    border-radius: 999px;
}

/* ---- Floating surfaces (dropdown menus, dialogs, popovers, toasts) -----
 * The pass that rounded every field, button and toggle only ever touched
 * elements with a visible border - these four have none at rest (only a
 * drop shadow), so they were easy to miss and stayed PatternFly's sharp
 * square by default: "Assign role"'s own dropdown list, "Create group"'s
 * dialog, every (?) help popover, and the save-confirmation toast. Same
 * two-tier scale as the rest of the theme - 8px for compact controls, 12px
 * for a page-level surface like a modal, matching the account console's
 * card radius. */
.pf-v5-c-menu,
.pf-v5-c-dropdown__menu,
.pf-v5-c-popover__content,
.pf-v5-c-alert {
    border-radius: 8px;
}

.pf-v5-c-modal-box {
    border-radius: 12px;
}

/* ---- Combined input+button groups (table search, filter dropdowns) ----
 * Two different shapes share the `.pf-v5-c-input-group` class here, and
 * they need opposite treatment:
 *
 * - A "leaf" group - search box + its own submit arrow, a value field +
 *   its own "add" tick, nothing else nested inside - is one control in
 *   two DOM pieces (same as the login page's password field + eye
 *   button). Those two pieces should fuse into one border, because the
 *   second piece only ever acts on the box right next to it.
 * - A "wrapper" group - a filter dropdown next to a second, independent
 *   control - is two SEPARATE controls that only happen to share a flex
 *   row. Fusing those into one border (an earlier version of this rule
 *   did exactly that) reads as one bug replacing another: a seam in the
 *   wrong place instead of a missing one. They read as separate normal-
 *   bordered controls with their own gap between them, same as
 *   everywhere else in this theme.
 *
 * Telling them apart by "does this group nest another whole
 * `.pf-v5-c-input-group`" (an earlier version of this rule) works for
 * "Default search" next to its search box, but breaks for "Attribute
 * search" next to "Select attributes" - Users' attribute-search mode,
 * where the second control is Keycloak's own `.kc-dropdown-panel`
 * button, not a `.pf-v5-c-input-group`. That pair has no nested
 * input-group anywhere, so the old test called it a leaf and fused two
 * unrelated dropdowns into one pill with no seam between them at all.
 *
 * What actually marks a *leaf* is that one of its own two pieces is a
 * real text input (`.pf-v5-c-form-control` or `.pf-v5-c-text-input-group`)
 * - the thing the other piece (arrow, tick, eye) acts on. A group is a
 * leaf when it has one of those AND doesn't also nest a whole second
 * input-group (which would mean the input belongs to an inner control,
 * not to this row directly - "Default search"'s search box, three levels
 * down inside a `.pf-v5-c-toolbar__item`, is exactly that case). Anything
 * else - two toggles, two dropdowns, no input in sight - is a wrapper. */
.pf-v5-c-input-group:has(.pf-v5-c-input-group),
.pf-v5-c-input-group:not(:has(.pf-v5-c-form-control)):not(:has(.pf-v5-c-text-input-group)) {
    border: none;
    background: transparent;
    gap: 0.25rem;
}

.pf-v5-c-input-group:not(:has(.pf-v5-c-input-group)):has(.pf-v5-c-form-control, .pf-v5-c-text-input-group) {
    border: 1px solid var(--beon-hairline);
    border-radius: 8px;
    overflow: hidden;
    background-color: #ffffff;
    transition: box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.pf-v5-c-input-group:not(:has(.pf-v5-c-input-group)):has(.pf-v5-c-form-control, .pf-v5-c-text-input-group):hover {
    border-color: #f0cdca;
}

.pf-v5-c-input-group:not(:has(.pf-v5-c-input-group)):has(.pf-v5-c-form-control, .pf-v5-c-text-input-group):focus-within {
    border-color: var(--beon-red);
    box-shadow: 0 0 0 3px rgba(217, 58, 47, 0.12);
}

/* Only a leaf group's own descendants give up their individual border - a
 * wrapper's direct children ("Name"/"Default search"/"Attribute search",
 * the nested search group, "Select attributes") keep whatever border
 * they'd normally get, which is where the standalone MenuToggle rule
 * further up (and the dedicated `.kc-dropdown-panel` rule below) pick
 * them back up.
 *
 * Descendant selector, not `>`: the actual search box sits one level
 * deeper than expected - `.pf-v5-c-input-group >
 * .pf-v5-c-input-group__item.pf-m-fill > .pf-v5-c-text-input-group`, not a
 * direct child - so a `>` version of this rule never matched it at all,
 * and its own border kept showing right where the arrow button meets it,
 * on every page that renders a search box this way, not just this one. */
.pf-v5-c-input-group:not(:has(.pf-v5-c-input-group)):has(.pf-v5-c-form-control, .pf-v5-c-text-input-group) .pf-v5-c-text-input-group,
.pf-v5-c-input-group:not(:has(.pf-v5-c-input-group)):has(.pf-v5-c-form-control, .pf-v5-c-text-input-group) .pf-v5-c-menu-toggle,
.pf-v5-c-input-group:not(:has(.pf-v5-c-input-group)):has(.pf-v5-c-form-control, .pf-v5-c-text-input-group) .pf-v5-c-button,
.pf-v5-c-input-group:not(:has(.pf-v5-c-input-group)):has(.pf-v5-c-form-control, .pf-v5-c-text-input-group) .pf-v5-c-form-control {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* The attribute-search "Value" field's input sits in a plain
 * `.pf-v5-c-input-group__item`, not the `.pf-m-fill` variant the search
 * boxes use - PatternFly's own CSS only grows the `.pf-m-fill` item, so
 * without it the input stayed its own natural width while Keycloak's
 * popover still gave the *group* a fixed column width sized to match
 * "Key" next to it. The border traces that full column, but the input and
 * its tick button only fill the first third of it, leaving the rest as
 * dead white space between the tick and the box's own right edge. Growing
 * whichever item actually holds the form control fills the same space the
 * `.pf-m-fill` class would have, pushing the tick flush against the
 * border like every other input+button pair in this theme. */
.pf-v5-c-input-group:not(:has(.pf-v5-c-input-group)):has(.pf-v5-c-form-control, .pf-v5-c-text-input-group) > .pf-v5-c-input-group__item:has(.pf-v5-c-form-control, .pf-v5-c-text-input-group) {
    flex: 1 1 auto;
}

/* Keycloak's own attribute-search picker button - not a PatternFly
 * component at all, so none of the rules above ever reached it. Same
 * border/radius/hover/focus language as the standalone MenuToggle rule
 * above ("Require SSL", "Attribute search"), so the two dropdowns in this
 * row read as the same kind of control sitting next to each other. */
.pf-v5-c-page__main .kc-dropdown-panel {
    border: 1px solid var(--beon-hairline);
    border-radius: 8px;
    background-color: #ffffff;
    transition: box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.pf-v5-c-page__main .kc-dropdown-panel:hover {
    border-color: #f0cdca;
}

.pf-v5-c-page__main .kc-dropdown-panel:focus-within {
    border-color: var(--beon-red);
    box-shadow: 0 0 0 3px rgba(217, 58, 47, 0.12);
}

/* Never a PatternFly component, so it never picked up the outline:none
 * fix applied to every other focusable control in this theme - focusing
 * it (Tab, or the click that opens its own panel) left the browser's
 * native amber auto-outline stacked on top of the red glow above. */
.pf-v5-c-page__main .kc-dropdown-panel:focus {
    outline: none;
}

/* Plain text fields inside a group (Acceptable AAGUIDs, Extra Origins, ...)
 * use `.pf-v5-c-form-control`, not `.pf-v5-c-text-input-group` - missing
 * from the list above, so it kept its own bordered, rounded, white-filled
 * box inside the already-bordered group, ending before the remove button
 * and leaving what looked like a gap where there wasn't meant to be one. */

/* A typeahead select (Signature algorithms, ...) is a MenuToggle wrapping a
 * `.pf-v5-c-text-input-group` for its chips + search text. The MenuToggle
 * rule below already borders the *outer* box; the inner text-input-group
 * then drew a second border+white fill of its own, narrower than the
 * outer one, which read as a large empty white slab in the gap between
 * them - the same double-border bug, one level deeper. */
.pf-v5-c-menu-toggle .pf-v5-c-text-input-group {
    border: none;
    border-radius: 0;
    background: transparent;
}

/* ---- Clipboard-copy fields (Realm name, client secrets, ...) ----------
 * A different component again - `.pf-v5-c-clipboard-copy__group` wrapping
 * a `.pf-v5-c-form-control` and a plain copy button - never styled here at
 * all. The field rule above still gives the input all four rounded
 * corners, so the right edge curves inward right where the copy button
 * starts, reading as a gap even though the two sit flush. Squaring that
 * corner and folding both into one bordered pill, the same shape as every
 * other input+button pair in this theme, removes it. */
.pf-v5-c-clipboard-copy__group {
    border: 1px solid var(--beon-hairline);
    border-radius: 8px;
    overflow: hidden;
    background-color: #ffffff;
    transition: box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.pf-v5-c-clipboard-copy__group:hover {
    border-color: #f0cdca;
}

.pf-v5-c-clipboard-copy__group:focus-within {
    border-color: var(--beon-red);
    box-shadow: 0 0 0 3px rgba(217, 58, 47, 0.12);
}

.pf-v5-c-clipboard-copy__group .pf-v5-c-form-control,
.pf-v5-c-clipboard-copy__group .pf-v5-c-button {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* `.pf-v5-c-button` (the search box's own submit arrow) draws its own
 * ::after underline the same way .pf-v5-c-form-control and
 * .pf-v5-c-menu-toggle did - border:none above only clears the button's
 * own border, never the separate ::after element sitting on top of it,
 * so the arrow kept a 1px grey line under it inside an otherwise
 * borderless, unified group. */
.pf-v5-c-input-group .pf-v5-c-button::before,
.pf-v5-c-input-group .pf-v5-c-button::after {
    display: none;
}

/* ---- Table checkboxes --------------------------------------------------
 * A <td> defaults to `vertical-align: baseline`, which lines up with the
 * text's baseline, not its centre - the row's checkbox sat a few pixels
 * above where the row's own text visually centres, most visible next to
 * the taller text now that fields and buttons elsewhere in this theme
 * have grown. PatternFly's own rule for this is
 * `.pf-v5-c-table tbody > tr > *` - the `:where()` wrapping its actual
 * class conditions strips their specificity, but the bare `tr` combinator
 * still counts, landing it at (0,0,1,1). A single class here, (0,0,1,0),
 * lost to that outright; two classes clears it. */
.pf-v5-c-table__tr .pf-v5-c-table__check {
    vertical-align: middle;
}

/* ---- Sidebar --------------------------------------------------------
 * The side nav is dark. Stock PatternFly marks the current item with a 3px
 * accent bar and nothing else, and hover does nothing at all - on a dense,
 * data-heavy console it's easy to lose track of which section you're in.
 * A rounded tint fill for both states reads faster and matches the same
 * rounded-pill treatment used on the masthead controls above.
 *
 * The inset from the sidebar's edges is padding on the *list*, not a
 * width/margin on each link: `.pf-v5-c-page__sidebar` renders as a
 * width:0 flyout in some states (a permanent rail in others), and
 * `width: calc(100% - 1rem)` on the link against that 0 once computed to
 * ~48px, wrapping every longer label onto two lines and making row
 * heights jump between 40px and 64px down the list. Padding the list
 * instead narrows the box every link already fills to 100% of, so it
 * stays correct however wide the sidebar itself ends up being. */
.pf-v5-c-nav__list {
    padding-inline: 0.5rem;
    box-sizing: border-box;
}

/* PatternFly gives the sidebar its own `overflow-x: auto`. If the nav's
 * content is ever a few pixels wider than the rail - the "CURRENT REALM"
 * pill's uppercase, letter-spaced text is the likely culprit - that turns
 * into a horizontal scrollbar, and the active item's own focus-into-view
 * behaviour can leave it scrolled instead of reset to the start, clipping
 * the *left* edge of every label at once ("BeON" down to "N", "Manage
 * realms" down to "nage realms", ...). Nothing in this sidebar is meant to
 * scroll sideways, so removing the capability outright removes the bug
 * class instead of chasing whichever element happens to be the widest. */
.pf-v5-c-page__sidebar,
.pf-v5-c-nav {
    overflow-x: hidden;
}

.pf-v5-c-nav__link {
    border-radius: 8px;
    transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

.pf-v5-c-nav__link:hover {
    --pf-v5-c-nav__link--hover--BackgroundColor: rgba(255, 255, 255, 0.08);
    background-color: rgba(255, 255, 255, 0.08);
}

/* A translucent red over the sidebar's near-black background (previously
 * 0.28 alpha) blends toward a muddy brown rather than reading as red - full
 * saturation is what actually shows up as "red" against something this
 * dark.
 *
 * `.pf-v5-c-nav__link.pf-m-current` only - not
 * `.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link` too. PatternFly
 * puts `.pf-m-current` on an *expandable section's* `<li>` whenever one of
 * its children is the active page, as well as on that child's own `<a>` -
 * matching both gave the section's toggle button the exact same solid fill
 * as the actual current page directly below it, two full-strength red
 * boxes nested with nothing to tell them apart. Only a real page link ever
 * carries `.pf-m-current` on itself; the section header's own bold text
 * and open chevron already say "you're inside this section". */
.pf-v5-c-nav__link.pf-m-current {
    --pf-v5-c-nav__link--m-current--after--BorderColor: transparent;
    --pf-v5-c-nav__link--m-current--Color: #ffffff;
    background-color: var(--beon-red);
    font-weight: 600;
}

.pf-v5-c-nav__link.pf-m-current:hover {
    background-color: var(--beon-red-hover);
}

/* "BeON" + the "Current realm" pill used to share one line, same 14px/400
 * weight, one space apart - trying to fit both on the ~260px content width
 * left the pill's own inline-flex content box squeezed to ~19px wide
 * (measured on screen), so the text inside it - not the pill - got
 * overflow:hidden clipped to nothing. A pill with a visible outline and no
 * visible text was the result. Stacking them - "BeON" on its own line,
 * the tag below - gives each the full row width, no shrinking involved. */
.pf-v5-c-nav__section-title {
    /* display: flex; */
    flex-direction: column;
    align-items: flex-start;
    gap: 0.375rem;
}

.pf-v5-c-nav__section-title span[data-testid="currentRealm"] {
    font-size: 1rem;
    font-weight: 700;
    color: #ffffff;
}

/* The label's actual text colour turned out to be a fourth token, again
 * found only by tracing the cascade: `.pf-m-blue` points
 * `--pf-v5-c-label__content--Color` at its own blue default, which is what
 * `.pf-v5-c-label__text` reads - not `--pf-v5-c-label--Color`, which this
 * rule was setting. That's why the tag rendered with PatternFly's default
 * navy blue text instead of white, on top of the sizing bug above. */
.pf-v5-c-page__sidebar .pf-v5-c-label {
    --pf-v5-c-label--BackgroundColor: transparent;
    --pf-v5-c-label--Color: rgba(255, 255, 255, 0.75);
    --pf-v5-c-label__content--Color: rgba(255, 255, 255, 0.75);
    border-radius: 999px;
}

.pf-v5-c-page__sidebar .pf-v5-c-label .pf-v5-c-label__content {
    border-color: rgba(255, 255, 255, 0.35);
    padding-block: 0.15rem;
    padding-inline: 0.6rem;
    font-size: 0.7rem;
    font-weight: 500;
    text-transform: uppercase;
    letter-spacing: 0.04em;
}

.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link::after {
    --pf-v5-c-tabs__link--after--BorderColor: var(--beon-red);
}