/* 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.
   Every selector is scoped to #app: the estate NHS header injected by
   index.ftl lives OUTSIDE #app and must never be caught by these
   !important rules (SPS2-THEME-PARITY-SPEC.md §5.5). */
#app header,
#app [class*="masthead"],
#app [class*="page__header"],
#app [class*="-Masthead"],
#app [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;
}

/* The React masthead is reduced to a slim strip that only carries the
   sidebar hamburger toggle: the brand and the toolbar (theme switch /
   user menu, including the console's own referrer link) are replaced by
   the injected SPS header — lockup, "Back to {app}" and "Log out"
   (parity spec §5.3, mirroring the estate Nova recipe). The toggle sits
   in masthead__main/__toggle, so hiding __brand and __content keeps it. */
#app [class*="masthead__brand"],
#app [class*="masthead__content"],
#app [class*="-MastheadBrand"],
#app [class*="-MastheadContent"] {
    display: none !important;
}
#app [class*="masthead"]:not([class*="__"]) {
    border-bottom: 1px solid var(--sps-grey-border) !important;
    min-height: 0 !important;
    padding-top: 4px !important;
    padding-bottom: 4px !important;
}

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

#app header *,
#app [class*="masthead"] *,
#app [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 strip's white shows. */
#app header > *,
#app [class*="masthead"] > *,
#app [class*="masthead__main"],
#app [class*="masthead__toolbar"],
#app [class*="page__header"] > *,
#app [class*="-PageHeaderTools"],
#app [class*="-Toolbar"],
#app header [class*="toolbar"],
#app [class*="masthead"] [class*="toolbar"] {
    background: transparent !important;
    background-color: transparent !important;
}

/* The sidebar hamburger toggle — and ANY descendant of the masthead.
   PF v6 wraps the menu toggle in CSS-modules-hashed class names which
   the [class*="-Input"] / [class*="-Select"] rules below can
   accidentally catch, so we explicitly zero borders here. */
#app header button,
#app header button *,
#app [class*="masthead"] button,
#app [class*="masthead"] button *,
#app [class*="page__header"] button,
#app [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;
}

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

#app header svg,
#app [class*="masthead"] svg {
    fill: var(--sps-grey-dark);
    color: var(--sps-grey-dark);
}

/* Avatar circle and any "pill" / chip elements in the masthead — kept
   for safety although the toolbar that carries them is hidden. */
#app header [class*="avatar"],
#app header [class*="Avatar"],
#app [class*="masthead"] [class*="avatar"],
#app [class*="masthead"] [class*="Avatar"] {
    background: var(--sps-green-light) !important;
    color: var(--sps-green-dark) !important;
    border: 2px solid var(--sps-green) !important;
}

/* The PF page root sizes itself 100vh; with the injected chrome above and
   below it that means permanent scroll. Let content drive the height and
   keep a sensible minimum so the sidebar never collapses. */
#app [class*="c-page"]:not([class*="__"]) {
    height: auto !important;
    min-height: 70vh;
}

/* 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;
}

/* ==============================
   SPS2: Sidebar — NHS side-navigation pattern
   PatternFly v5 paints .pf-v5-c-page__sidebar with its dark theme by
   default; the earlier rules only whitened the inner nav, leaving a
   black band underneath. Repaint the whole rail white with a hairline
   divider, and style links per the NHS side-nav pattern: blue links,
   pale-blue hover, and a 4px NHS-blue keyline on the current page.
   ============================== */

.pf-v5-c-page__sidebar,
.pf-c-page__sidebar,
[class*="page__sidebar"]:not([class*="sidebar-body"]) {
    background: var(--sps-white) !important;
    background-color: var(--sps-white) !important;
    border-right: 1px solid var(--sps-grey-border) !important;
    box-shadow: 1px 0 8px rgba(33, 43, 50, 0.04) !important;
    --pf-v5-c-page__sidebar--BackgroundColor: var(--sps-white);
    --pf-v5-c-page__sidebar--BoxShadow: none;
}

/* The inner body must stay flat — only the rail itself carries the
   divider and shadow, or they double up along the same edge. */
.pf-v5-c-page__sidebar-body,
[class*="page__sidebar-body"] {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    padding-top: 12px !important;
}

.pf-v5-c-nav,
.pf-c-nav {
    background: transparent !important;
    border-right: 0 !important;
    --pf-v5-c-nav--BackgroundColor: transparent;
    --pf-v5-c-nav__link--Color: var(--sps-green);
    --pf-v5-c-nav__link--hover--Color: var(--sps-green-dark);
    --pf-v5-c-nav__link--hover--BackgroundColor: var(--sps-green-light);
    --pf-v5-c-nav__link--m-current--Color: var(--sps-green-dark);
    --pf-v5-c-nav__link--m-current--BackgroundColor: var(--sps-green-light);
}

.pf-v5-c-nav .pf-v5-c-nav__list {
    background: transparent !important;
    margin: 0 !important;
    padding: 0 8px !important;
    list-style: none;
    display: flex;
    flex-direction: column;
    row-gap: 2px;
}

.pf-v5-c-nav .pf-v5-c-nav__item {
    background: transparent !important;
    border: 0 !important;
    box-shadow: none !important;
    margin: 0 !important;
}

.pf-v5-c-nav .pf-v5-c-nav__link {
    background: transparent !important;
    color: var(--sps-green) !important;
    border: 0 !important;
    border-left: 4px solid transparent !important;
    border-radius: 0 !important;
    box-shadow: none !important;
    font-family: var(--sps-font-family) !important;
    font-size: 16px !important;
    font-weight: 400 !important;
    padding: 12px 16px !important;
    transition: background-color 0.15s ease, color 0.15s ease,
                border-color 0.15s ease;
}

.pf-v5-c-nav .pf-v5-c-nav__link:hover {
    background: var(--sps-green-light) !important;
    color: var(--sps-green-dark) !important;
    text-decoration: none !important;
}

/* Current page — NHS keyline + pale-blue wash, bold ink. */
.pf-v5-c-nav .pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav .pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link,
.pf-v5-c-nav .pf-v5-c-nav__link[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;
}

/* PatternFly draws item dividers, the current-item keyline and the
   subnav rule as :before / :after pseudo-elements, coloured from its
   dark-sidebar tokens — which is where the stray near-black hairlines
   come from. Remove them; the real border-left above is the keyline,
   and the NHS side-nav pattern has no dividers between items. */
.pf-v5-c-nav .pf-v5-c-nav__item::before,
.pf-v5-c-nav .pf-v5-c-nav__item::after,
.pf-v5-c-nav .pf-v5-c-nav__link::before,
.pf-v5-c-nav .pf-v5-c-nav__link::after,
.pf-v5-c-nav .pf-v5-c-nav__list::before {
    content: none !important;
    display: none !important;
    border: 0 !important;
}

/* Expandable section chevron (Account security). */
.pf-v5-c-nav .pf-v5-c-nav__toggle,
.pf-v5-c-nav .pf-v5-c-nav__toggle-icon {
    color: inherit !important;
    background: transparent !important;
}

/* Sub-navigation — indented, hung off a hairline rule like the NHS
   side-nav's nested items. */
.pf-v5-c-nav .pf-v5-c-nav__subnav {
    background: transparent !important;
    border: 0 !important;
    margin: 2px 0 4px 20px !important;
    padding: 0 !important;
    border-left: 1px solid var(--sps-grey-border) !important;
}

.pf-v5-c-nav .pf-v5-c-nav__subnav .pf-v5-c-nav__link {
    font-size: 15px !important;
    padding: 9px 12px !important;
}

/* ==============================
   SPS2: Radio groups → segmented toggle
   User-profile yes/no attributes (e.g. "Newsletter emails") render as
   PF v5 radios. Restyle each radio group as a modern segmented pill:
   the native inputs stay in the DOM (stretched invisibly over their
   pill for click + keyboard + screen-reader behaviour) and the checked
   option fills NHS blue.
   ============================== */

/* The pill track. The console renders the radios inside a wrapper
   component, so match on a descendant rather than a direct child. */
.pf-v5-c-form__group-control:has(.pf-v5-c-radio) {
    display: inline-flex !important;
    flex-direction: row !important;
    align-items: center;
    flex-wrap: wrap;
    gap: 4px;
    width: max-content !important;
    padding: 4px !important;
    background: var(--sps-grey-light) !important;
    border: 1px solid var(--sps-grey-border) !important;
    border-radius: 999px !important;
}

/* Collapse any wrapper element sitting between the control div and the
   radios so the pills themselves become the flex items, whatever the
   console's component tree looks like. */
.pf-v5-c-form__group-control:has(.pf-v5-c-radio) *:has(.pf-v5-c-radio) {
    display: contents !important;
}

/* If the group also carries helper text, break it onto its own line
   instead of letting it flow inline with the pills. */
.pf-v5-c-form__group-control:has(.pf-v5-c-radio) .pf-v5-c-form__helper-text {
    flex-basis: 100% !important;
    padding: 2px 12px 4px !important;
}

.pf-v5-c-radio {
    position: relative !important;
    display: inline-block !important;
    margin: 0 !important;
    --pf-v5-c-radio--GridGap: 0;
}

/* Stretch the real input over its pill — invisible but fully
   clickable and focusable. */
.pf-v5-c-radio .pf-v5-c-radio__input {
    position: absolute !important;
    inset: 0 !important;
    width: 100% !important;
    height: 100% !important;
    margin: 0 !important;
    opacity: 0 !important;
    cursor: pointer;
    z-index: 1;
}

.pf-v5-c-radio .pf-v5-c-radio__label {
    display: inline-block !important;
    padding: 8px 22px !important;
    border-radius: 999px !important;
    font-family: var(--sps-font-family) !important;
    font-size: 15px !important;
    font-weight: 600 !important;
    line-height: 1 !important;
    color: var(--sps-grey-mid) !important;
    text-transform: capitalize;
    cursor: pointer;
    transition: background-color 0.18s ease, color 0.18s ease,
                box-shadow 0.18s ease;
}

.pf-v5-c-radio:hover .pf-v5-c-radio__label {
    color: var(--sps-green-dark) !important;
}

/* Selected option — NHS blue fill. Declared after the hover rule so
   the checked state wins while hovered. */
.pf-v5-c-radio .pf-v5-c-radio__input:checked + .pf-v5-c-radio__label {
    background: var(--sps-green) !important;
    color: var(--sps-white) !important;
    box-shadow: 0 1px 4px rgba(0, 61, 120, 0.35) !important;
}

/* Keyboard focus — NHS yellow ring around the focused pill. */
.pf-v5-c-radio .pf-v5-c-radio__input:focus-visible + .pf-v5-c-radio__label {
    outline: 3px solid var(--sps-focus);
    outline-offset: 2px;
}

/* =============================================================================
   ESTATE SPS CHROME — header, footer, skip link (SPS2-THEME-PARITY-SPEC.md §5)
   -----------------------------------------------------------------------------
   Styles the static header/footer injected around #app by this theme's
   index.ftl override. Ported from the ndo-laravel reference sps.css (the
   self-contained variant); every rule is scoped to the chrome's own classes
   so nothing leaks into the console's PatternFly UI. Keep this section in
   sync with the login theme's copy in sps2-login.css.
   ============================================================================= */

@font-face {
    font-display: swap;
    font-family: "Frutiger W01";
    font-style: normal;
    font-weight: 400;
    src: url("https://assets.nhs.uk/fonts/FrutigerLTW01-55Roman.woff2") format("woff2"),
        url("https://assets.nhs.uk/fonts/FrutigerLTW01-55Roman.woff") format("woff");
}
@font-face {
    font-display: swap;
    font-family: "Frutiger W01";
    font-style: normal;
    font-weight: 600;
    src: url("https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.woff2") format("woff2"),
        url("https://assets.nhs.uk/fonts/FrutigerLTW01-65Bold.woff") format("woff");
}

.nhsuk-header,
.nhsuk-skip-link,
.nhs-theme-footer {
    font-family: "Frutiger W01", Frutiger, Arial, "Helvetica Neue", Helvetica, sans-serif;
    font-size: 16px;
    line-height: 1.5;
}

/* Skip link: off-screen until keyboard focus lands on it. */
.nhsuk-skip-link {
    left: -9999px;
    padding: 8px;
    position: absolute;
    color: #212b32;
}
.nhsuk-skip-link:active,
.nhsuk-skip-link:focus {
    left: 16px;
    top: 16px;
    z-index: 100;
    background-color: #ffeb3b;
    box-shadow: 0 -2px #ffeb3b, 0 4px #212b32;
    color: #212b32;
    outline: 4px solid transparent;
}

/* ------------------------------ Header ------------------------------ */

/* Static, not sticky — the NHS service manual warns sticky headers can
   obscure focused content. */
.nhsuk-header {
    background-color: #005eb8 !important;
    color: #fff !important;
}

/* Centered chrome (sps2 parity): the blue header/footer bars run to the
   viewport edges, but their content stays inside a centered width
   container like www.sps.nhs.uk. */
.nhsuk-header .nhsuk-width-container,
.nhs-theme-footer .nhsuk-width-container {
    max-width: 960px;
    margin: 0 auto;
}
@media (min-width: 1080px) {
    .nhsuk-header .nhsuk-width-container,
    .nhs-theme-footer .nhsuk-width-container { max-width: 1120px; }
}

.nhsuk-header__container {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 8px 16px;
    padding: 16px;
}
@media (min-width: 48.0625em) {
    .nhsuk-header__container { padding: 16px 24px; }
}

.nhsuk-header__service {
    display: flex;
    min-width: 0;
    margin-right: auto;
}

.nhsuk-header__service-logo {
    display: inline-flex;
    align-items: center;
    text-decoration: none;
    gap: 0;
}
.nhsuk-header__service-logo:focus {
    outline: 4px solid #ffeb3b;
    outline-offset: 4px;
    background-color: transparent;
}

.nhsuk-header__service .nhsuk-header__logo {
    float: none;
    max-width: none;
    height: 40px;
    width: auto;
    flex-shrink: 0;
}
/* The NHS mark keeps its own fill even though the chrome sits outside the
   #app-scoped masthead recolour rules — restated here for safety. */
.nhsuk-header .nhsuk-header__logo-background { fill: #005eb8; }
.nhsuk-header .nhsuk-header__logo-text { fill: #fff; }

.nhsuk-header__service .nhsuk-header__service-name {
    display: block;
    margin-left: 16px;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
    color: #fff;
    font-size: 1.1875rem;
    line-height: 1.2;
    font-weight: 400;
    max-width: 54ch;
    text-wrap: balance;
}

.sps-header__logo-wrap {
    display: inline-flex;
    align-items: center;
    margin-left: 12px;
    padding-left: 16px;
    border-left: 1px solid rgba(255, 255, 255, 0.4);
}
.sps-header__logo {
    height: 30px;
    width: auto;
    display: block;
}

/* Utility links (Back to {app} / Log out). Direct children only — never
   descendants. */
.nhs-header__utility {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 1rem;
    margin-left: auto;
}
.nhs-header__utility > a,
.nhs-header__utility-link {
    display: inline-flex;
    align-items: center;
    color: #fff !important;
    font-size: 0.875rem;
    line-height: 1.5;
    text-decoration: none;
    white-space: nowrap;
}
.nhs-header__utility > a:hover,
.nhs-header__utility-link:hover {
    text-decoration: underline;
}
.nhs-header__utility > a:focus,
.nhs-header__utility-link:focus {
    background-color: #ffeb3b;
    box-shadow: 0 0 0 4px #ffeb3b, 0 4px 0 4px #212b32;
    color: #212b32 !important;
    outline: 4px solid transparent;
}

@media (max-width: 640px) {
    .nhsuk-header__service .nhsuk-header__logo {
        height: 32px;
        min-width: 80px;
        width: 80px;
    }
    .sps-header__logo { height: 24px; }
    .sps-header__logo-wrap {
        margin-left: 8px;
        padding-left: 12px;
    }
    .nhsuk-header__service .nhsuk-header__service-name {
        margin-left: 12px;
        padding-left: 12px;
        font-size: 1rem;
    }
    .nhs-header__utility { gap: 0.75rem; }
}

/* ------------------------------ Footer ------------------------------ */

.nhs-theme-footer {
    flex-shrink: 0;
    border-top: 3px solid #008232;
    background: #f0f4f5;
    padding: 32px 0;
}
.nhs-theme-footer .nhsuk-width-container {
    padding: 0 16px;
}
@media (min-width: 48.0625em) {
    .nhs-theme-footer .nhsuk-width-container { padding: 0 24px; }
}

.nhs-theme-footer a {
    text-decoration: underline;
}
.nhs-theme-footer__social a {
    text-decoration: none;
}
.nhs-theme-footer a:focus {
    background-color: #ffeb3b;
    box-shadow: 0 -2px #ffeb3b, 0 4px #212b32;
    color: #212b32;
    outline: 4px solid transparent;
    text-decoration: none;
}

.nhs-theme-footer__row {
    display: flex;
    flex-wrap: wrap;
    justify-content: space-between;
    align-items: center;
    gap: 16px 24px;
}
.nhs-theme-footer__row + .nhs-theme-footer__row {
    margin-top: 32px;
    font-size: 14px;
    align-items: baseline;
}

.nhs-theme-footer__brand {
    display: flex;
    align-items: center;
    gap: 16px;
}
.nhs-theme-footer__brand img {
    max-width: 140px;
    height: auto;
    width: auto;
}
.nhs-theme-footer__brand svg {
    float: none;
    min-width: 0;
    max-width: none;
    height: 24px;
    width: auto;
}
.nhs-theme-footer__divider {
    align-self: stretch;
    width: 1px;
    background: #6a716f80;
}

.nhs-theme-footer__copyright {
    margin: 0;
    font-size: 14px;
    color: #212b32;
}

.nhs-theme-footer__social {
    display: flex;
    align-items: center;
    gap: 16px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nhs-theme-footer__social li {
    display: flex;
    align-items: center;
    margin: 0;
}
.nhs-theme-footer__social a {
    display: flex;
    align-items: center;
    line-height: 0;
}
.nhs-theme-footer__social svg {
    display: block;
    width: 50px;
    height: 50px;
}

.nhs-theme-footer__links {
    display: flex;
    flex-wrap: wrap;
    align-items: baseline;
    gap: 16px 24px;
    margin: 0;
    padding: 0;
    list-style: none;
}
.nhs-theme-footer__links li {
    margin: 0;
}
.nhs-theme-footer__links a {
    white-space: nowrap;
}
.nhs-theme-footer .nhsuk-footer__list {
    float: none;
    width: auto;
    padding-bottom: 0;
}
.nhs-theme-footer .nhsuk-footer__list-item-link {
    color: #003087;
}
.nhs-theme-footer .nhsuk-footer__list-item-link:visited {
    color: #003087;
}
.nhs-theme-footer .nhsuk-footer__list-item-link:hover {
    color: #212b32;
}
.nhs-theme-footer__row + .nhs-theme-footer__row .nhs-theme-footer__links a {
    font-size: 14px;
}

@media (max-width: 767px) {
    .nhs-theme-footer__row {
        justify-content: flex-start;
    }
    .nhs-theme-footer__row:first-child {
        justify-content: space-between;
    }
}
@media (max-width: 640px) {
    .nhs-theme-footer__brand {
        flex-wrap: wrap;
        gap: 12px;
    }
    .nhs-theme-footer__brand img {
        max-width: 120px;
    }
    .nhs-theme-footer__brand svg {
        height: 20px;
    }
}
@media (max-width: 500px) {
    .nhs-theme-footer__row:first-child {
        display: block;
    }
    .nhs-theme-footer__brand {
        margin-bottom: 32px;
    }
}

/* Cookies link, dressed as a small outlined button with a sliders icon
   (from sps2-cookies/assets/css/cookies.css). */
#sps2-cookie-footer-link {
    background-color: transparent;
    border: 1px solid #005eb8;
    border-radius: 24px;
    color: #005eb8;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    font-weight: 600;
    line-height: 1.5;
    padding: 6px 18px;
    text-decoration: none;
    transition: background-color 0.15s ease, color 0.15s ease;
}
#sps2-cookie-footer-link::before {
    background-color: currentColor;
    content: '';
    flex: 0 0 auto;
    height: 14px;
    width: 14px;
    -webkit-mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7h10M19 7h2M17 3.5v7M3 17h2M11 17h10M9 13.5v7' stroke='black' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
    mask: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 24 24'%3E%3Cpath d='M3 7h10M19 7h2M17 3.5v7M3 17h2M11 17h10M9 13.5v7' stroke='black' stroke-width='2.5' stroke-linecap='round' fill='none'/%3E%3C/svg%3E") no-repeat center / contain;
}
#sps2-cookie-footer-link:visited {
    color: #005eb8;
}
#sps2-cookie-footer-link:hover {
    background-color: #005eb8;
    color: #fff;
    text-decoration: none;
}
#sps2-cookie-footer-link:focus,
#sps2-cookie-footer-link:focus-visible {
    background-color: #ffeb3b;
    border-color: transparent;
    box-shadow: 0 4px 0 #212b32;
    color: #212b32;
    outline: 4px solid transparent;
    text-decoration: none;
}