/* SPS2 Account Console theme
   Re-skins the Keycloak v3 (PatternFly v6) account console to match the
   SPS login theme. Palette mirrors themes/sps/login/resources/css/sps-login.css.
   v5 token overrides retained for backwards-compatibility with any v2-era
   components that may still render. */

/* Force light colour-scheme so PF v6's auto dark-mode (driven by
   prefers-color-scheme) doesn't fight the SPS palette. */
:root,
html,
body {
    color-scheme: light only;
}

:root {
    --sps-green: #005eb8;          /* NHS blue — interactive chrome */
    --sps-green-dark: #003d78;
    --sps-green-light: #e8f1f8;
    --sps-white: #ffffff;
    --sps-grey-dark: #333333;
    --sps-grey-mid: #768692;
    --sps-grey-light: #f0f4f5;
    --sps-grey-border: #d8dde0;
    --sps-focus: #ffeb3b;
    --sps-error: #d32f2f;
    --sps-success: #2e7d32;
    --sps-font-family: "Frutiger W01", Frutiger, Arial, "Helvetica Neue", Helvetica, sans-serif;
    --sps-border-radius: 4px;

    /* PatternFly global tokens — re-bound to SPS palette.
       Most v2 console components consume these, so overriding here
       cascades across buttons, links, focus rings, alerts, etc. */
    --pf-v5-global--primary-color--100: var(--sps-green);
    --pf-v5-global--primary-color--200: var(--sps-green-dark);
    --pf-v5-global--link--Color: var(--sps-green);
    --pf-v5-global--link--Color--hover: var(--sps-green-dark);
    --pf-v5-global--active-color--100: var(--sps-green);
    --pf-v5-global--active-color--400: var(--sps-green-dark);
    --pf-v5-global--BackgroundColor--100: var(--sps-white);
    --pf-v5-global--BackgroundColor--200: var(--sps-grey-light);
    --pf-v5-global--BackgroundColor--light-100: var(--sps-white);
    --pf-v5-global--BorderRadius--sm: var(--sps-border-radius);
    --pf-v5-global--FontFamily--sans-serif: var(--sps-font-family);
    --pf-v5-global--FontFamily--text: var(--sps-font-family);
    --pf-v5-global--FontFamily--heading--sans-serif: var(--sps-font-family);
    --pf-v5-global--Color--100: var(--sps-grey-dark);
    --pf-v5-global--Color--200: var(--sps-grey-mid);
    --pf-v5-global--danger-color--100: var(--sps-error);
    --pf-v5-global--success-color--100: var(--sps-success);

    /* Older PatternFly v4 fallbacks, in case any bundled component
       still references the un-versioned vars. */
    --pf-global--primary-color--100: var(--sps-green);
    --pf-global--primary-color--200: var(--sps-green-dark);
    --pf-global--link--Color: var(--sps-green);
    --pf-global--link--Color--hover: var(--sps-green-dark);
    --pf-global--BackgroundColor--100: var(--sps-white);
    --pf-global--BackgroundColor--200: var(--sps-grey-light);
    --pf-global--FontFamily--sans-serif: var(--sps-font-family);

    /* PatternFly v6 (keycloak.v3 account console) — semantic tokens.
       v6 uses --pf-t--global--* names. Re-bind them so dark-mode and
       light-mode both resolve to the SPS palette. */
    --pf-t--global--background--color--primary--default: var(--sps-white);
    --pf-t--global--background--color--secondary--default: var(--sps-grey-light);
    --pf-t--global--background--color--tertiary--default: var(--sps-grey-light);
    --pf-t--global--background--color--floating--default: var(--sps-white);
    --pf-t--global--background--color--inverse--default: var(--sps-white);
    --pf-t--global--background--color--brand--default: var(--sps-green);
    --pf-t--global--background--color--brand--hover: var(--sps-green-dark);
    --pf-t--global--background--color--brand--clicked: var(--sps-green-dark);
    --pf-t--global--background--color--action--plain--default: transparent;

    --pf-t--global--text--color--regular: var(--sps-grey-dark);
    --pf-t--global--text--color--subtle: var(--sps-grey-mid);
    --pf-t--global--text--color--brand--default: var(--sps-green);
    --pf-t--global--text--color--brand--hover: var(--sps-green-dark);
    --pf-t--global--text--color--on-brand--default: var(--sps-white);
    --pf-t--global--text--color--inverse: var(--sps-grey-dark);
    --pf-t--global--text--color--placeholder: var(--sps-grey-mid);

    --pf-t--global--border--color--default: var(--sps-grey-border);
    --pf-t--global--border--color--brand: var(--sps-green);
    --pf-t--global--border--color--on-secondary: var(--sps-grey-border);

    --pf-t--global--color--brand--default: var(--sps-green);
    --pf-t--global--color--brand--hover: var(--sps-green-dark);
    --pf-t--global--color--brand--clicked: var(--sps-green-dark);

    --pf-t--global--icon--color--brand--default: var(--sps-green);
    --pf-t--global--icon--color--regular: var(--sps-grey-dark);

    --pf-t--global--font--family--body: var(--sps-font-family);
    --pf-t--global--font--family--heading: var(--sps-font-family);

    /* Generic v6 form/input fallback tokens used by some components. */
    --pf-v6-global--BackgroundColor--100: var(--sps-white);
    --pf-v6-global--BackgroundColor--200: var(--sps-grey-light);
    --pf-v6-global--Color--100: var(--sps-grey-dark);
    --pf-v6-global--Color--200: var(--sps-grey-mid);
    --pf-v6-global--primary-color--100: var(--sps-green);
    --pf-v6-global--link--Color: var(--sps-green);
    --pf-v6-global--FontFamily--sans-serif: var(--sps-font-family);
    --pf-v6-global--BorderColor--100: var(--sps-grey-border);
}

/* Re-apply the same overrides under the dark-theme selector so that if
   PatternFly v6 still flips to dark (via class or media), the SPS palette
   wins instead of the bundled dark tokens. */
:root.pf-v6-theme-dark,
:root[data-theme="dark"],
html.pf-v6-theme-dark,
html[data-theme="dark"] {
    --pf-t--global--background--color--primary--default: var(--sps-white);
    --pf-t--global--background--color--secondary--default: var(--sps-grey-light);
    --pf-t--global--background--color--tertiary--default: var(--sps-grey-light);
    --pf-t--global--background--color--floating--default: var(--sps-white);
    --pf-t--global--background--color--inverse--default: var(--sps-white);
    --pf-t--global--text--color--regular: var(--sps-grey-dark);
    --pf-t--global--text--color--subtle: var(--sps-grey-mid);
    --pf-t--global--text--color--inverse: var(--sps-grey-dark);
    --pf-t--global--border--color--default: var(--sps-grey-border);
    color-scheme: light only;
}

@media (prefers-color-scheme: dark) {
    :root,
    html,
    body {
        color-scheme: light only;
        --pf-t--global--background--color--primary--default: var(--sps-white);
        --pf-t--global--background--color--secondary--default: var(--sps-grey-light);
        --pf-t--global--background--color--tertiary--default: var(--sps-grey-light);
        --pf-t--global--background--color--floating--default: var(--sps-white);
        --pf-t--global--background--color--inverse--default: var(--sps-white);
        --pf-t--global--text--color--regular: var(--sps-grey-dark);
        --pf-t--global--text--color--subtle: var(--sps-grey-mid);
        --pf-t--global--text--color--inverse: var(--sps-grey-dark);
        --pf-t--global--border--color--default: var(--sps-grey-border);
    }
}

/* ==============================
   BRUTE-FORCE OVERRIDES
   These use broad attribute / element selectors so they hit any
   PatternFly version (v5, v6, v3 account-console SPA) without needing
   to know the exact class names.
   ============================== */

/* Masthead / page header — any element whose class name contains
   "masthead" or "page__header". PF uses both depending on layout. */
header,
[class*="masthead"],
[class*="page__header"],
[class*="-Masthead"],
[class*="-PageHeader"] {
    background: var(--sps-white) !important;
    background-color: var(--sps-white) !important;
    color: var(--sps-grey-dark) !important;
    border-bottom: 0 !important;
    box-shadow: none !important;
}

/* Apply the 4px green band ONLY to the outer-most header, never to
   nested masthead-* descendants (otherwise the band doubles up). */
body > header,
body > [class*="page__header"],
[class*="page"] > header:first-of-type {
    border-bottom: 4px solid var(--sps-green) !important;
}

/* Explicitly strip any borders/dividers from masthead inner divs so we
   don't get the thin secondary green line under the logo. */
[class*="masthead__main"],
[class*="masthead__content"],
[class*="masthead__toolbar"],
[class*="masthead__brand"],
header > div,
[class*="masthead"] > div {
    border: 0 !important;
    box-shadow: none !important;
}

header *,
[class*="masthead"] *,
[class*="page__header"] * {
    color: var(--sps-grey-dark) !important;
}

/* Masthead inner containers — PatternFly v6 puts a separate toolbar /
   content / main element inside the header that carries its own dark
   background. Force them all transparent so the header's white shows. */
header > *,
[class*="masthead"] > *,
[class*="masthead__main"],
[class*="masthead__content"],
[class*="masthead__toolbar"],
[class*="masthead__brand"],
[class*="page__header"] > *,
[class*="-PageHeaderTools"],
[class*="-Toolbar"],
header [class*="toolbar"],
[class*="masthead"] [class*="toolbar"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* The user-menu / avatar dropdown trigger button — and ANY descendant
   of the masthead. PF v6 wraps the menu toggle in CSS-modules-hashed
   class names which my [class*="-Input"] / [class*="-Select"] rules
   above can accidentally catch, so we explicitly zero borders here. */
header button,
header button *,
[class*="masthead"] button,
[class*="masthead"] button *,
[class*="page__header"] button,
[class*="page__header"] button * {
    background: transparent !important;
    background-color: transparent !important;
    color: var(--sps-grey-dark) !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
    outline: none !important;
}

header button:hover,
[class*="masthead"] button:hover,
[class*="page__header"] button:hover {
    background: var(--sps-green-light) !important;
    background-color: var(--sps-green-light) !important;
    color: var(--sps-green-dark) !important;
}

/* Header still needs to be white even when --pf-t--global tokens cascade. */
header svg,
[class*="masthead"] svg {
    fill: var(--sps-grey-dark);
    color: var(--sps-grey-dark);
}

/* Avatar circle and any "pill" / chip elements in the masthead — make
   them visible against the white background. */
header [class*="avatar"],
header [class*="Avatar"],
[class*="masthead"] [class*="avatar"],
[class*="masthead"] [class*="Avatar"] {
    background: var(--sps-green-light) !important;
    color: var(--sps-green-dark) !important;
    border: 2px solid var(--sps-green) !important;
}

/* All native inputs — white background, dark text, grey border. */
input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]):not([type="button"]),
select,
textarea,
[class*="form-control"],
[class*="FormControl"],
[class*="-Input"],
[class*="-Select"] {
    background: var(--sps-white) !important;
    background-color: var(--sps-white) !important;
    color: var(--sps-grey-dark) !important;
    border: 1px solid var(--sps-grey-border) !important;
    -webkit-text-fill-color: var(--sps-grey-dark) !important;
}

input:focus:not([type="checkbox"]):not([type="radio"]),
select:focus,
textarea:focus,
[class*="form-control"]:focus-within,
[class*="FormControl"]:focus-within {
    border-color: var(--sps-green) !important;
    outline: 3px solid var(--sps-focus) !important;
    outline-offset: 0 !important;
}

/* Disabled / readonly inputs — keep them white-ish, not dark. */
input:disabled,
input:read-only,
input[readonly],
select:disabled,
textarea:disabled {
    background: var(--sps-grey-light) !important;
    color: var(--sps-grey-mid) !important;
    -webkit-text-fill-color: var(--sps-grey-mid) !important;
}

/* Page background — body / main / page root surfaces. */
body,
main,
[class*="page__main"],
[class*="-PageMain"] {
    background: var(--sps-grey-light) !important;
    color: var(--sps-grey-dark);
}

/* ==============================
   Tables (Applications, Sessions etc.)
   PF v6 uses --pf-t--global--text--color--subtle for table content
   which renders as a near-illegible light grey. Force readable text.
   ============================== */

table,
[class*="-Table"],
[class*="table"] {
    color: var(--sps-grey-dark) !important;
}

table th,
table td,
[class*="-Table"] th,
[class*="-Table"] td,
[class*="table"] th,
[class*="table"] td {
    color: var(--sps-grey-dark) !important;
    background: var(--sps-white) !important;
}

/* Slightly stronger headers — switch from subtle grey to mid grey,
   bumped up in weight for hierarchy. */
table thead th,
[class*="-Table"] thead th,
[class*="table"] thead th {
    color: var(--sps-grey-dark) !important;
    font-weight: 600 !important;
    background: var(--sps-white) !important;
}

/* Row dividers — neutral grey instead of low-contrast token. */
table tr,
[class*="-Table"] tr,
[class*="table"] tr {
    border-color: var(--sps-grey-border) !important;
}

/* Expandable-row chevron / toggle button — dark grey, not faded. */
table button[aria-label*="expand" i],
table button[aria-label*="row" i],
[class*="-Table"] button[aria-label*="expand" i] {
    color: var(--sps-grey-dark) !important;
}

/* ==============================
   PatternFly DataList (Signing-in credential rows, sessions, etc.)
   Used on Account Security pages where each item is a card-style row
   instead of a table. PF v6 default: only top/bottom dividers, very
   light grey text. SPS look: full border, dark legible text.
   ============================== */

/* Root data-list container — no border itself. Items carry the border. */
ul[class*="data-list"]:not([class*="__"]),
ol[class*="data-list"]:not([class*="__"]),
div[class*="data-list"]:not([class*="__"]):not([class*="-Item"]):not([class*="-Cell"]),
[class*="-DataList"]:not([class*="-Item"]):not([class*="-Cell"]):not([class*="-Row"]):not([class*="-Content"]) {
    background: transparent !important;
    color: var(--sps-grey-dark) !important;
    border: 0 !important;
    border-radius: 0 !important;
    padding: 0 !important;
    list-style: none;
}

/* Each row (item) — full bordered card with breathing room. */
[class*="data-list__item"]:not([class*="__cell"]):not([class*="__item-row"]):not([class*="__item-content"]):not([class*="__item-control"]):not([class*="__item-action"]),
[class*="-DataListItem"]:not([class*="-Cell"]):not([class*="-Row"]):not([class*="-Content"]):not([class*="-Action"]) {
    background: var(--sps-white) !important;
    color: var(--sps-grey-dark) !important;
    border: 1px solid var(--sps-grey-border) !important;
    border-radius: var(--sps-border-radius) !important;
    margin-bottom: 8px !important;
    padding: 16px !important;
    box-shadow: none !important;
}

/* ==============================
   Dropdowns / popper menus (user menu, language picker, etc.)
   PF v6 renders these into a portal at the document root, so they
   sit OUTSIDE header/masthead and don't inherit our header overrides.
   Target them globally by class pattern.
   ============================== */

/* The dropdown TRIGGER (e.g. "admin v" in the masthead). Transparent,
   borderless — should look like a styled link, not a bordered button.
   Higher-specificity selectors needed because the brute-force input
   rule above catches some PF v6 toggle classes via [class*="-Input"]. */
button[class*="c-menu-toggle"],
button[class*="-MenuToggle"],
button[class*="dropdown__toggle"],
button[class*="-DropdownToggle"],
[class*="c-menu-toggle"],
[class*="-MenuToggle"],
[class*="dropdown__toggle"],
[class*="-DropdownToggle"] {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
    color: var(--sps-grey-dark) !important;
    padding: 6px 10px !important;
    border-radius: var(--sps-border-radius) !important;
    width: auto !important;
}

button[class*="c-menu-toggle"]:hover,
button[class*="-MenuToggle"]:hover,
button[class*="dropdown__toggle"]:hover,
[class*="c-menu-toggle"]:hover,
[class*="-MenuToggle"]:hover,
[class*="dropdown__toggle"]:hover {
    background: var(--sps-green-light) !important;
    color: var(--sps-green-dark) !important;
}

/* Inner toggle parts (text, icon, controls) — no border/background. */
[class*="c-menu-toggle__"],
[class*="-MenuToggle__"],
[class*="-MenuToggleText"],
[class*="-MenuToggleControls"] {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
}

/* ==============================
   EXACT PF v5 OVERRIDES
   Keycloak v3 account console renders with PatternFly v5 classes.
   Targeted rules with the literal pf-v5- prefix beat any leftover
   default-theme rules and don't rely on attribute-selector matching.
   ============================== */

.pf-v5-c-menu-toggle,
button.pf-v5-c-menu-toggle,
button.pf-v5-c-menu-toggle.pf-m-expanded {
    background: transparent !important;
    background-color: transparent !important;
    border: 0 !important;
    border-radius: var(--sps-border-radius) !important;
    box-shadow: none !important;
    color: var(--sps-grey-dark) !important;
    padding: 6px 10px !important;
    width: auto !important;
    min-width: 0 !important;
    --pf-v5-c-menu-toggle--BackgroundColor: transparent;
    --pf-v5-c-menu-toggle--BorderColor: transparent;
    --pf-v5-c-menu-toggle--Color: var(--sps-grey-dark);
    --pf-v5-c-menu-toggle--hover--BackgroundColor: var(--sps-green-light);
    --pf-v5-c-menu-toggle--expanded--BackgroundColor: var(--sps-green-light);
    --pf-v5-c-menu-toggle--expanded--BorderColor: transparent;
    --pf-v5-c-menu-toggle--before--BorderColor: transparent;
    --pf-v5-c-menu-toggle--before--BorderTopWidth: 0;
    --pf-v5-c-menu-toggle--before--BorderRightWidth: 0;
    --pf-v5-c-menu-toggle--before--BorderBottomWidth: 0;
    --pf-v5-c-menu-toggle--before--BorderLeftWidth: 0;
}

/* PF v5 puts the visible border on a ::before pseudo-element. Kill it. */
.pf-v5-c-menu-toggle::before,
button.pf-v5-c-menu-toggle::before {
    border: 0 !important;
    content: none !important;
    display: none !important;
}

.pf-v5-c-menu-toggle__text,
.pf-v5-c-menu-toggle__controls,
.pf-v5-c-menu-toggle__toggle-icon {
    color: var(--sps-grey-dark) !important;
    background: transparent !important;
}

/* Menu panel — override the inline min-width: 148px that PF's React
   sets via the popper. Custom property overrides also help where PF
   reads its size from CSS vars. */
.pf-v5-c-menu {
    background: var(--sps-white) !important;
    background-color: var(--sps-white) !important;
    color: var(--sps-grey-dark) !important;
    border: 1px solid var(--sps-grey-border) !important;
    border-radius: var(--sps-border-radius) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    min-width: 0 !important;
    width: max-content !important;
    --pf-v5-c-menu--MinWidth: 0;
    --pf-v5-c-menu--BackgroundColor: var(--sps-white);
    --pf-v5-c-menu--BoxShadow: 0 4px 12px rgba(0, 0, 0, 0.12);
}

.pf-v5-c-menu__content,
.pf-v5-c-menu__list {
    background: transparent !important;
    border: 0 !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none !important;
    width: 100% !important;
    display: block !important;
}

.pf-v5-c-menu__list-item {
    background: var(--sps-white) !important;
    border: 0 !important;
    margin: 0 !important;
    padding: 0 !important;
    width: 100% !important;
    display: block !important;
}

.pf-v5-c-menu__item {
    background: var(--sps-white) !important;
    color: var(--sps-grey-dark) !important;
    border: 0 !important;
    box-shadow: none !important;
    width: 100% !important;
    text-align: left !important;
    padding: 8px 14px !important;
    --pf-v5-c-menu__item--BackgroundColor: var(--sps-white);
    --pf-v5-c-menu__item--Color: var(--sps-grey-dark);
}

.pf-v5-c-menu__item:hover,
.pf-v5-c-menu__item:focus {
    background: var(--sps-green-light) !important;
    color: var(--sps-green-dark) !important;
    --pf-v5-c-menu__item--hover--BackgroundColor: var(--sps-green-light);
    --pf-v5-c-menu__item--focus--BackgroundColor: var(--sps-green-light);
}

.pf-v5-c-menu__item-main,
.pf-v5-c-menu__item-text {
    background: transparent !important;
    color: inherit !important;
}

/* Labels (PF v5 .pf-v5-c-label, e.g. "Current session" pill).
   Default theme renders dark + dark text. Force SPS green background
   with white text on the .pf-m-green variant. */
.pf-v5-c-label,
.pf-v5-c-label__content,
.pf-v5-c-label__text {
    color: var(--sps-white) !important;
}

.pf-v5-c-label.pf-m-green,
.pf-v5-c-label.pf-m-green .pf-v5-c-label__content,
.pf-v5-c-label.pf-m-green .pf-v5-c-label__text {
    background: var(--sps-green) !important;
    background-color: var(--sps-green) !important;
    color: var(--sps-white) !important;
    border-color: var(--sps-green) !important;
    --pf-v5-c-label--BackgroundColor: var(--sps-green);
    --pf-v5-c-label--Color: var(--sps-white);
    --pf-v5-c-label--BorderColor: var(--sps-green);
    --pf-v5-c-label--m-green--BackgroundColor: var(--sps-green);
    --pf-v5-c-label--m-green--Color: var(--sps-white);
    --pf-v5-c-label--m-green--BorderColor: var(--sps-green);
}

/* Outer dropdown panel — only the OUTERMOST menu container gets the
   border + shadow. Inner __list / __item / __content do not. */
[class*="c-menu"]:not([class*="__"]):not([class*="-toggle"]):not([class*="-Toggle"]):not([class*="-Item"]):not([class*="-MenuItem"]),
[role="menu"]:not([role="menuitem"]),
[role="listbox"] {
    background: var(--sps-white) !important;
    background-color: var(--sps-white) !important;
    color: var(--sps-grey-dark) !important;
    border: 1px solid var(--sps-grey-border) !important;
    border-radius: var(--sps-border-radius) !important;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.12) !important;
    padding: 0 !important;
    min-width: 0 !important;
    width: max-content !important;
}

/* Make every internal wrapper between panel and item span the panel's
   full width so the hover highlight covers edge-to-edge. */
[class*="c-menu__content"],
[class*="c-menu__list"],
[class*="c-menu__list-item"],
[class*="-MenuContent"],
[class*="-MenuList"],
[class*="-MenuListItem"] {
    width: 100% !important;
    display: block !important;
}

/* Inner menu wrappers (list, content, group) — no border, no padding so
   the parent container's spacing is the only one. */
[class*="c-menu__content"],
[class*="c-menu__list"],
[class*="c-menu__group"],
[class*="c-menu__group-title"],
[class*="-MenuContent"],
[class*="-MenuList"],
[class*="-MenuGroup"] {
    background: transparent !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
    list-style: none;
}

/* Items inside the menu — no border on any side, no separator. */
[class*="c-menu__list-item"],
[class*="c-menu__item"],
[class*="c-menu__item-main"],
[class*="c-menu__item-text"],
[class*="c-menu__item-action"],
[class*="-MenuItem"],
[class*="-MenuItemMain"],
[class*="-MenuItemText"],
[class*="dropdown__menu-item"],
[role="menuitem"],
[role="option"] {
    background: var(--sps-white) !important;
    background-color: var(--sps-white) !important;
    color: var(--sps-grey-dark) !important;
    border: 0 !important;
    border-top: 0 !important;
    border-bottom: 0 !important;
    border-left: 0 !important;
    border-right: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    margin: 0 !important;
}

/* Item hover / focus — SPS green-light highlight. */
[class*="c-menu__list-item"]:hover,
[class*="c-menu__item"]:hover,
[class*="-MenuItem"]:hover,
[class*="dropdown__menu-item"]:hover,
[role="menuitem"]:hover,
[role="option"]:hover,
[class*="c-menu__list-item"]:focus,
[class*="c-menu__item"]:focus,
[class*="-MenuItem"]:focus,
[role="menuitem"]:focus {
    background: var(--sps-green-light) !important;
    background-color: var(--sps-green-light) !important;
    color: var(--sps-green-dark) !important;
}

/* Inner button/anchor inside menu items — transparent, inherit colour. */
[role="menuitem"] button,
[role="menuitem"] a,
[class*="-MenuItem"] button,
[class*="-MenuItem"] a,
[class*="c-menu__list-item"] button,
[class*="c-menu__item"] button,
[class*="dropdown__menu-item"] button {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    outline: none !important;
    color: inherit !important;
    width: 100% !important;
    text-align: left !important;
    padding: 8px 14px !important;
    line-height: 1.4 !important;
}

/* Cells, item-rows, item-contents inside a row — strip their borders so
   only the outer row border is visible. */
[class*="data-list__cell"],
[class*="data-list__item-row"],
[class*="data-list__item-content"],
[class*="data-list__item-control"],
[class*="data-list__item-action"],
[class*="-DataListCell"],
[class*="-DataListItemRow"],
[class*="-DataListItemContent"],
[class*="-DataListItemControl"],
[class*="-DataListItemAction"] {
    background: transparent !important;
    border: 0 !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    padding: 0 !important;
    margin: 0 !important;
}

/* Cell text — labels, values, timestamps. Force dark grey across all
   descendants so subtle/disabled tokens don't make text illegible. */
[class*="data-list"] [class*="data-list__cell"],
[class*="data-list"] [class*="DataListCell"],
[class*="DataList"] [class*="data-list__cell"],
[class*="DataList"] [class*="DataListCell"],
[class*="data-list"] dt,
[class*="data-list"] dd,
[class*="data-list"] span,
[class*="data-list"] p,
[class*="data-list"] strong,
[class*="DataList"] dt,
[class*="DataList"] dd,
[class*="DataList"] span,
[class*="DataList"] p,
[class*="DataList"] strong {
    color: var(--sps-grey-dark) !important;
}

/* Subtle/secondary text inside data-list — keep slightly muted but
   still readable. */
[class*="data-list"] [class*="text-muted"],
[class*="data-list"] [class*="-Subtle"],
[class*="DataList"] [class*="text-muted"],
[class*="DataList"] [class*="-Subtle"] {
    color: var(--sps-grey-mid) !important;
}

/* Bold labels (e.g. "My password", "Created"). */
[class*="data-list"] [class*="data-list__cell"] strong,
[class*="data-list"] dt strong,
[class*="DataList"] dt strong,
[class*="DataList"] [class*="DataListCell"] strong {
    color: var(--sps-grey-dark) !important;
    font-weight: 600 !important;
}

/* ==============================
   Sidebar navigation
   PF v6's "current" nav item paints with a dark surface token.
   Replace with SPS green-light highlight + dark green left border.
   ============================== */

[class*="-Nav"] a,
[class*="nav__link"],
[class*="-NavItem"] a {
    color: var(--sps-grey-dark) !important;
    background: transparent !important;
    border-left: 4px solid transparent !important;
}

[class*="-Nav"] a:hover,
[class*="nav__link"]:hover,
[class*="-NavItem"] a:hover {
    background: var(--sps-green-light) !important;
    color: var(--sps-green-dark) !important;
}

/* Selected / current nav item. */
[class*="-Nav"] a[aria-current="page"],
[class*="-Nav"] a.pf-m-current,
[class*="nav__link"].pf-m-current,
[class*="nav__link"][aria-current="page"],
[class*="-NavItem"] a[aria-current="page"] {
    background: var(--sps-green-light) !important;
    color: var(--sps-green-dark) !important;
    border-left-color: var(--sps-green) !important;
    font-weight: 600 !important;
}

/* And specifically: hover on the selected item must NOT flip to dark. */
[class*="-Nav"] a[aria-current="page"]:hover,
[class*="-Nav"] a.pf-m-current:hover,
[class*="nav__link"].pf-m-current:hover,
[class*="nav__link"][aria-current="page"]:hover {
    background: var(--sps-green-light) !important;
    color: var(--sps-green-dark) !important;
}

/* ==============================
   Page chrome — body & masthead
   ============================== */

body {
    background: var(--sps-grey-light);
    color: var(--sps-grey-dark);
    font-family: var(--sps-font-family);
    -webkit-font-smoothing: antialiased;
}

/* Masthead — match the white-on-green-band header from the login theme. */
.pf-v5-c-masthead,
.pf-c-masthead {
    background: var(--sps-white);
    border-bottom: 4px solid var(--sps-green);
    color: var(--sps-grey-dark);
}

.pf-v5-c-masthead__brand,
.pf-c-masthead__brand {
    color: var(--sps-grey-dark);
}

.pf-v5-c-brand,
.pf-c-brand {
    max-height: 60px;
    width: auto;
}

/* Header text & icons should sit on the white masthead. */
.pf-v5-c-masthead a,
.pf-v5-c-masthead button,
.pf-c-masthead a,
.pf-c-masthead button {
    color: var(--sps-grey-dark);
}

.pf-v5-c-masthead a:hover,
.pf-c-masthead a:hover {
    color: var(--sps-green);
}

/* ==============================
   Side navigation
   ============================== */

.pf-v5-c-nav,
.pf-c-nav {
    background: var(--sps-white);
    border-right: 1px solid var(--sps-grey-border);
}

.pf-v5-c-nav__link,
.pf-c-nav__link {
    color: var(--sps-grey-dark);
}

.pf-v5-c-nav__link:hover,
.pf-c-nav__link:hover {
    background: var(--sps-green-light);
    color: var(--sps-green-dark);
}

.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link,
.pf-c-nav__link.pf-m-current,
.pf-c-nav__item.pf-m-current > .pf-c-nav__link {
    background: var(--sps-green-light);
    color: var(--sps-green-dark);
    border-left: 3px solid var(--sps-green);
}

/* ==============================
   Cards & content panels
   ============================== */

.pf-v5-c-card,
.pf-c-card {
    background: var(--sps-white);
    border-radius: var(--sps-border-radius);
    box-shadow: 0 2px 12px rgba(0, 0, 0, 0.08);
}

.pf-v5-c-page__main-section,
.pf-c-page__main-section {
    background: var(--sps-grey-light);
}

.pf-v5-c-title,
.pf-c-title {
    color: var(--sps-grey-dark);
    font-family: var(--sps-font-family);
}

/* ==============================
   Buttons
   ============================== */

.pf-v5-c-button.pf-m-primary,
.pf-c-button.pf-m-primary {
    background: var(--sps-green);
    color: var(--sps-white);
    border: none;
    border-radius: var(--sps-border-radius);
    font-weight: 600;
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-c-button.pf-m-primary:hover {
    background: var(--sps-green-dark);
    color: var(--sps-white);
}

.pf-v5-c-button.pf-m-primary:focus,
.pf-c-button.pf-m-primary:focus {
    outline: 3px solid var(--sps-focus);
    outline-offset: 2px;
}

.pf-v5-c-button.pf-m-secondary,
.pf-c-button.pf-m-secondary {
    background: var(--sps-white);
    color: var(--sps-green);
    border: 2px solid var(--sps-green);
    border-radius: var(--sps-border-radius);
    font-weight: 600;
}

.pf-v5-c-button.pf-m-secondary:hover,
.pf-c-button.pf-m-secondary:hover {
    background: var(--sps-green-light);
    color: var(--sps-green-dark);
    border-color: var(--sps-green-dark);
}

.pf-v5-c-button.pf-m-link,
.pf-c-button.pf-m-link {
    color: var(--sps-green);
}

.pf-v5-c-button.pf-m-link:hover,
.pf-c-button.pf-m-link:hover {
    color: var(--sps-green-dark);
}

.pf-v5-c-button.pf-m-danger,
.pf-c-button.pf-m-danger {
    background: var(--sps-error);
    color: var(--sps-white);
    border-radius: var(--sps-border-radius);
    font-weight: 600;
}

/* ==============================
   Form controls
   ============================== */

.pf-v5-c-form-control,
.pf-c-form-control {
    border: 2px solid var(--sps-grey-mid);
    border-radius: var(--sps-border-radius);
    font-family: var(--sps-font-family);
    color: var(--sps-grey-dark);
}

.pf-v5-c-form-control:focus,
.pf-v5-c-form-control:focus-within,
.pf-c-form-control:focus,
.pf-c-form-control:focus-within {
    border-color: var(--sps-green);
    outline: 3px solid var(--sps-focus);
    outline-offset: 0;
    box-shadow: none;
}

.pf-v5-c-form__label,
.pf-c-form__label {
    color: var(--sps-grey-dark);
    font-weight: 600;
}

/* ==============================
   Alerts
   ============================== */

.pf-v5-c-alert.pf-m-success,
.pf-c-alert.pf-m-success {
    border-left: 4px solid var(--sps-success);
    background: #e8f5e9;
    color: var(--sps-success);
}

.pf-v5-c-alert.pf-m-danger,
.pf-c-alert.pf-m-danger {
    border-left: 4px solid var(--sps-error);
    background: #fdecea;
    color: var(--sps-error);
}

.pf-v5-c-alert.pf-m-warning,
.pf-c-alert.pf-m-warning {
    border-left: 4px solid #f9a825;
    background: #fff8e1;
    color: #795548;
}

.pf-v5-c-alert.pf-m-info,
.pf-c-alert.pf-m-info {
    border-left: 4px solid var(--sps-green);
    background: var(--sps-green-light);
    color: var(--sps-grey-dark);
}

/* ==============================
   Links
   ============================== */

a {
    color: var(--sps-green);
}

a:hover {
    color: var(--sps-green-dark);
}

/* ==============================
   Generic focus ring — match login theme
   ============================== */

*:focus-visible {
    outline-color: var(--sps-focus);
}

/* ==============================
   SPS2 OVERRIDES
   The palette above re-binds the interactive chrome (links, nav,
   highlights, focus) to NHS blue. Primary action buttons stay NHS
   green to match the sps2 login theme's design system.
   ============================== */

.pf-v5-c-button.pf-m-primary,
.pf-c-button.pf-m-primary,
button[class*="-Button"][class*="primary" i] {
    background: #007f3b !important;
    background-color: #007f3b !important;
    color: #ffffff !important;
    border: none !important;
    font-weight: 600 !important;
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-c-button.pf-m-primary:hover {
    background: #00662f !important;
    background-color: #00662f !important;
    color: #ffffff !important;
}

.pf-v5-c-button.pf-m-primary:active {
    background: #00401e !important;
}