/*
 * OrangeClimate – Keycloak admin console (extends keycloak.v2, PatternFly 5)
 *
 * Keycloak's own layout and structure stay as they are, so the console is still easy to find
 * your way in; only colour and type follow the SmartComp design system:
 *   - PatternFly's global tokens point at sc-* tokens, so every screen follows (light and dark);
 *   - Instrument Sans for the interface, IBM Plex Mono for code and figures;
 *   - the masthead reads as the BrandBar (logo · divider · "Auth"), the current nav item and the
 *     primary button are the inverse fill, orange marks focus, selection and the current tab.
 */
@import url('https://fonts.googleapis.com/css2?family=IBM+Plex+Mono:wght@400;500;600&family=Instrument+Sans:wght@400;500;600;700&display=swap');

/* ── Tokens (SmartComp) ─────────────────────────────────── */
:root {
    --sc-page: #f1f0ed;
    --sc-surface: #ffffff;
    --sc-surface-2: #faf9f7;
    --sc-sunken: #eceae5;
    --sc-hover: #f7f6f3;
    --sc-border: #e4e2dd;
    --sc-border-strong: #d8d6d0;
    --sc-border-subtle: #efede8;
    --sc-ink: #1d1d1b;
    --sc-ink-2: #3c3b38;
    --sc-muted: #56544f;
    --sc-faint: #97948c;
    --sc-fainter: #c0bdb6;
    --sc-orange: #ee7220;
    --sc-orange-strong: #e8590c;
    --sc-orange-ink: #b64c07;
    --sc-orange-surface: #fff7f0;
    --sc-orange-border: #ecc79f;
    --sc-blue: #2f7fbe;
    --sc-blue-surface: #eef3f8;
    --sc-blue-border: #bcd6ec;
    --sc-green: #2f9152;
    --sc-green-surface: #ecf5ef;
    --sc-green-border: #cfe0d4;
    --sc-amber: #8f5a06;
    --sc-amber-surface: #fdf4de;
    --sc-amber-border: #e3c073;
    --sc-danger: #c0392b;
    --sc-danger-surface: #fdecec;
    --sc-on-accent: #ffffff;
    --sc-inverse: #1d1d1b;
    --sc-inverse-hover: #000000;
    --sc-on-inverse: #ffffff;
    --sc-overlay-soft-hover: rgba(0, 0, 0, 0.1);
    --sc-selection: rgba(238, 114, 32, 0.22);
    --sc-backdrop: rgba(29, 29, 27, 0.34);
    --sc-scrollbar-thumb: #d3d1cb;
    --sc-shadow-menu: 0 24px 60px -18px rgba(29, 29, 27, 0.4);
    --sc-shadow-dialog: 0 30px 70px -20px rgba(40, 30, 10, 0.4);

    --font-sans: 'Instrument Sans', system-ui, sans-serif;
    --font-mono: 'IBM Plex Mono', ui-monospace, monospace;
}

html.pf-v5-theme-dark:root {
    --sc-page: #17181a;
    --sc-surface: #202327;
    --sc-surface-2: #26292e;
    --sc-sunken: #131416;
    --sc-hover: #2b2e34;
    --sc-border: #34373d;
    --sc-border-strong: #40434a;
    --sc-border-subtle: #2b2e33;
    --sc-ink: #ecebe6;
    --sc-ink-2: #d4d1cb;
    --sc-muted: #b1aea7;
    --sc-faint: #8f8c85;
    --sc-fainter: #6c6963;
    --sc-orange: #f3812f;
    --sc-orange-strong: #f26a1b;
    --sc-orange-ink: #f0aa79;
    --sc-orange-surface: rgba(243, 129, 47, 0.15);
    --sc-orange-border: rgba(243, 129, 47, 0.42);
    --sc-blue: #57a6df;
    --sc-blue-surface: rgba(87, 166, 223, 0.15);
    --sc-blue-border: rgba(87, 166, 223, 0.4);
    --sc-green: #4fb377;
    --sc-green-surface: rgba(79, 179, 119, 0.15);
    --sc-green-border: rgba(79, 179, 119, 0.4);
    --sc-amber: #e8b445;
    --sc-amber-surface: rgba(232, 180, 69, 0.15);
    --sc-amber-border: rgba(232, 180, 69, 0.42);
    --sc-danger: #e56a5c;
    --sc-danger-surface: rgba(229, 106, 92, 0.16);
    --sc-inverse: #ecebe6;
    --sc-inverse-hover: #ffffff;
    --sc-on-inverse: #17181a;
    --sc-overlay-soft-hover: rgba(255, 255, 255, 0.16);
    --sc-backdrop: rgba(0, 0, 0, 0.5);
    --sc-scrollbar-thumb: #3a3d44;
    --sc-shadow-menu: 0 24px 60px -18px rgba(0, 0, 0, 0.6);
    --sc-shadow-dialog: 0 30px 70px -20px rgba(0, 0, 0, 0.6);
}

/* ── PatternFly globals → tokens (both themes; the tokens do the switching) ── */
:root,
html.pf-v5-theme-dark:root {
    --pf-v5-global--FontFamily--text: var(--font-sans);
    --pf-v5-global--FontFamily--heading: var(--font-sans);
    --pf-v5-global--FontFamily--monospace: var(--font-mono);
    --pf-v5-global--FontFamily--sans-serif: var(--font-sans);
    --pf-v5-global--FontFamily--heading--sans-serif: var(--font-sans);
    --pf-v5-global--FontFamily--redhat-updated--sans-serif: var(--font-sans);
    --pf-v5-global--FontFamily--redhat-updated--heading--sans-serif: var(--font-sans);
    --pf-v5-global--FontFamily--redhat--monospace: var(--font-mono);
    --pf-v5-global--FontFamily--redhatVF--sans-serif: var(--font-sans);
    --pf-v5-global--FontFamily--redhatVF--heading--sans-serif: var(--font-sans);
    --pf-v5-global--FontFamily--redhatVF--monospace: var(--font-mono);

    --pf-v5-global--BackgroundColor--100: var(--sc-surface);
    --pf-v5-global--BackgroundColor--150: var(--sc-surface-2);
    --pf-v5-global--BackgroundColor--200: var(--sc-page);
    --pf-v5-global--BackgroundColor--300: var(--sc-sunken);
    --pf-v5-global--BackgroundColor--400: var(--sc-surface-2);
    --pf-v5-global--BackgroundColor--light-100: var(--sc-surface);
    --pf-v5-global--BackgroundColor--light-200: var(--sc-page);
    --pf-v5-global--BackgroundColor--light-300: var(--sc-sunken);
    --pf-v5-global--BackgroundColor--dark-100: var(--sc-surface);
    --pf-v5-global--BackgroundColor--dark-200: var(--sc-page);
    --pf-v5-global--BackgroundColor--dark-300: var(--sc-sunken);
    --pf-v5-global--BackgroundColor--dark-400: var(--sc-hover);
    --pf-v5-global--BorderColor--100: var(--sc-border);
    --pf-v5-global--BorderColor--200: var(--sc-border-strong);
    --pf-v5-global--BorderColor--300: var(--sc-border-subtle);
    --pf-v5-global--BorderColor--400: var(--sc-border-strong);
    --pf-v5-global--BorderColor--dark-100: var(--sc-border);
    --pf-v5-global--BorderColor--light-100: var(--sc-border);
    --pf-v5-global--Color--100: var(--sc-ink);
    --pf-v5-global--Color--200: var(--sc-muted);
    --pf-v5-global--Color--300: var(--sc-ink-2);
    --pf-v5-global--Color--400: var(--sc-faint);
    --pf-v5-global--Color--dark-100: var(--sc-ink);
    --pf-v5-global--Color--dark-200: var(--sc-muted);
    --pf-v5-global--Color--light-100: var(--sc-ink);
    --pf-v5-global--Color--light-200: var(--sc-muted);
    --pf-v5-global--Color--light-300: var(--sc-border-strong);

    --pf-v5-global--primary-color--100: var(--sc-orange-strong);
    --pf-v5-global--primary-color--200: var(--sc-orange-ink);
    --pf-v5-global--primary-color--300: var(--sc-orange-strong);
    --pf-v5-global--primary-color--light-100: var(--sc-orange);
    --pf-v5-global--primary-color--dark-100: var(--sc-orange-ink);
    --pf-v5-global--active-color--100: var(--sc-orange);
    --pf-v5-global--active-color--200: var(--sc-orange-surface);
    --pf-v5-global--active-color--300: var(--sc-orange);
    --pf-v5-global--active-color--400: var(--sc-orange);
    --pf-v5-global--link--Color: var(--sc-orange-strong);
    --pf-v5-global--link--Color--hover: var(--sc-orange-strong);
    --pf-v5-global--link--Color--visited: var(--sc-orange-strong);
    --pf-v5-global--link--Color--light: var(--sc-orange-strong);
    --pf-v5-global--link--Color--light--hover: var(--sc-orange-strong);
    --pf-v5-global--link--Color--dark: var(--sc-orange-strong);
    --pf-v5-global--link--Color--dark--hover: var(--sc-orange-strong);

    --pf-v5-global--success-color--100: var(--sc-green);
    --pf-v5-global--success-color--200: var(--sc-green);
    --pf-v5-global--warning-color--100: var(--sc-amber);
    --pf-v5-global--warning-color--200: var(--sc-amber);
    --pf-v5-global--danger-color--100: var(--sc-danger);
    --pf-v5-global--danger-color--200: var(--sc-danger);
    --pf-v5-global--info-color--100: var(--sc-blue);
    --pf-v5-global--info-color--200: var(--sc-blue);
    --pf-v5-global--disabled-color--100: var(--sc-faint);
    --pf-v5-global--disabled-color--200: var(--sc-surface-2);
    --pf-v5-global--disabled-color--300: var(--sc-sunken);
    --pf-v5-global--icon--Color--light: var(--sc-muted);
    --pf-v5-global--icon--Color--dark: var(--sc-ink);
    --pf-v5-global--icon--Color--light--light: var(--sc-muted);
    --pf-v5-global--icon--Color--dark--light: var(--sc-ink);
    --pf-v5-global--icon--Color--light--dark: var(--sc-muted);
    --pf-v5-global--icon--Color--dark--dark: var(--sc-ink);
    --pf-v5-global--BorderRadius--sm: 8px;
    --pf-v5-global--BorderRadius--lg: 12px;
    --pf-v5-global--BoxShadow--md: var(--sc-shadow-menu);
    --pf-v5-global--BoxShadow--lg: var(--sc-shadow-menu);
    --pf-v5-global--BackdropColor: var(--sc-backdrop);
}

body {
    background: var(--sc-page);
    color: var(--sc-ink);
    font-family: var(--font-sans);
    -webkit-font-smoothing: antialiased;
}

/* the page before React mounts */
.keycloak__loading-container,
html .keycloak__loading-container {
    background-color: var(--sc-page) !important;
    color: var(--sc-muted) !important;
    font-family: var(--font-sans);
}

.keycloak__loading-container .pf-v5-c-spinner {
    --pf-v5-c-spinner--Color: var(--sc-orange);
    color: var(--sc-orange);
}

::selection {
    background: var(--sc-selection);
}

/* One focus ring for everything reachable by keyboard */
:where(a, button, input, select, textarea, [role="button"], [tabindex]):focus-visible {
    outline: 2px solid var(--sc-orange);
    outline-offset: 2px;
}

a {
    color: var(--sc-orange-strong);
}

a:hover {
    color: var(--sc-orange-strong);
}

code,
pre,
kbd,
.pf-v5-c-code-block,
.pf-v5-c-code-editor__main {
    font-family: var(--font-mono);
}

/* ── Page: page ground and light sections ───────────────── */
.pf-v5-c-page {
    --pf-v5-c-page--BackgroundColor: var(--sc-page);
    --pf-v5-c-page__main-section--BackgroundColor: var(--sc-page);
    --pf-v5-c-page__main-section--m-light--BackgroundColor: var(--sc-surface);
    --pf-v5-c-page__main-breadcrumb--BackgroundColor: var(--sc-surface);
    --pf-v5-c-page__main-section--m-dark-200--BackgroundColor: var(--sc-page);
    --pf-v5-c-page__main-tabs--BackgroundColor: var(--sc-surface);
    --pf-v5-c-page__main-nav--BackgroundColor: var(--sc-surface);
    background-color: var(--sc-page);
}

.pf-v5-c-title {
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--sc-ink);
}

.pf-v5-c-page__main-section .pf-v5-c-content h1,
.pf-v5-c-page__main-section > .pf-v5-l-level h1 {
    font-weight: 600;
    letter-spacing: -0.015em;
    color: var(--sc-ink);
}

.pf-v5-c-content {
    --pf-v5-c-content--Color: var(--sc-ink);
    --pf-v5-c-content--a--Color: var(--sc-orange-strong);
    --pf-v5-c-content--a--hover--Color: var(--sc-orange-strong);
}

#view-header-subkey,
#view-header-subkey p {
    color: var(--sc-muted);
}

/* ── Masthead: BrandBar colours (logo · divider · "Auth") ─ */
.pf-v5-c-page .pf-v5-c-masthead {
    --pf-v5-c-masthead--BackgroundColor: var(--sc-surface);
    --pf-v5-c-masthead--m-display-inline--BackgroundColor: var(--sc-surface);
    --pf-v5-c-masthead--Color: var(--sc-ink);
    --pf-v5-global--Color--100: var(--sc-ink);
    --pf-v5-global--Color--200: var(--sc-muted);
    --pf-v5-global--BackgroundColor--100: var(--sc-surface);
    background-color: var(--sc-surface);
    color: var(--sc-ink);
    box-shadow: inset 0 -1px 0 var(--sc-border);
}

.pf-v5-c-masthead .pf-v5-c-toolbar {
    --pf-v5-c-toolbar--BackgroundColor: transparent;
    background-color: transparent !important;
}

.pf-v5-c-masthead__brand {
    display: inline-flex;
    align-items: center;
    gap: 14px;
    text-decoration: none;
}

.pf-v5-c-masthead__brand:hover {
    text-decoration: none;
}

.pf-v5-c-masthead__brand img,
.pf-v5-c-masthead__brand .keycloak__pageheader_brand {
    order: 1;
    display: block;
    width: auto;
    height: 28px;
    max-height: none;
}

.pf-v5-c-masthead__brand::before {
    content: "";
    order: 2;
    width: 1px;
    height: 26px;
    background: var(--sc-border);
}

.pf-v5-c-masthead__brand::after {
    content: "Auth";
    order: 3;
    font-family: var(--font-sans);
    font-size: 14px;
    font-weight: 600;
    letter-spacing: -0.01em;
    line-height: 1;
    color: var(--sc-ink);
    white-space: nowrap;
}

.pf-v5-c-masthead__toggle .pf-v5-c-button.pf-m-plain,
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
.pf-v5-c-masthead .pf-v5-c-menu-toggle.pf-m-plain {
    --pf-v5-c-menu-toggle--BackgroundColor: transparent;
    color: var(--sc-muted);
    background: transparent;
}

@media (hover: hover) {
    .pf-v5-c-masthead__toggle .pf-v5-c-button.pf-m-plain:hover,
    .pf-v5-c-masthead .pf-v5-c-button.pf-m-plain:hover,
    .pf-v5-c-masthead .pf-v5-c-menu-toggle.pf-m-plain:hover {
        color: var(--sc-ink);
    }
}

/* User menu: the AccountMenu trigger (transparent, sc-hover while hovered or open) */
.pf-v5-c-masthead .pf-v5-c-menu-toggle:not(.pf-m-plain) {
    --pf-v5-c-menu-toggle--BackgroundColor: transparent;
    --pf-v5-c-menu-toggle--hover--BackgroundColor: var(--sc-hover);
    --pf-v5-c-menu-toggle--expanded--BackgroundColor: var(--sc-hover);
    --pf-v5-c-menu-toggle--Color: var(--sc-ink);
    border-radius: 10px;
    background: transparent;
    color: var(--sc-ink);
    font-size: 12.5px;
    font-weight: 600;
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle:not(.pf-m-plain)::before,
.pf-v5-c-masthead .pf-v5-c-menu-toggle:not(.pf-m-plain)::after {
    border: 0 !important;
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle:not(.pf-m-plain).pf-m-expanded {
    background: var(--sc-hover);
}

@media (hover: hover) {
    .pf-v5-c-masthead .pf-v5-c-menu-toggle:not(.pf-m-plain):hover {
        background: var(--sc-hover);
    }
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle__toggle-icon {
    color: var(--sc-faint);
}

/* Avatar: 32px, sc-sunken with a sc-border-strong ring and the initials
   (js/orangeclimate-admin.js sets data-oc-initials on its parent) */
.pf-v5-c-masthead .pf-v5-c-avatar {
    width: 32px;
    height: 32px;
    border: 1px solid var(--sc-border-strong);
    border-radius: 50%;
}

.pf-v5-c-masthead [data-oc-initials] .pf-v5-c-avatar {
    display: none;
}

.pf-v5-c-masthead [data-oc-initials]::after {
    content: attr(data-oc-initials);
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 32px;
    height: 32px;
    border-radius: 50%;
    background: var(--sc-sunken);
    border: 1px solid var(--sc-border-strong);
    box-sizing: border-box;
    color: var(--sc-ink-2);
    font-family: var(--font-sans);
    font-size: 11.5px;
    font-weight: 600;
}

/* ── Sidebar: rail colours, the current item is the inverse pill ── */
.pf-v5-c-page__sidebar {
    --pf-v5-c-page__sidebar--BackgroundColor: var(--sc-surface);
    --pf-v5-c-page__sidebar-body--BackgroundColor: var(--sc-surface);
    background-color: var(--sc-surface);
    box-shadow: inset -1px 0 0 var(--sc-border);
    color: var(--sc-muted);
}

.pf-v5-c-page__sidebar .pf-v5-c-nav {
    --pf-v5-c-nav--BackgroundColor: transparent;
    --pf-v5-c-nav__link--Color: var(--sc-muted);
    --pf-v5-c-nav__link--hover--Color: var(--sc-ink);
    --pf-v5-c-nav__link--focus--Color: var(--sc-ink);
    --pf-v5-c-nav__link--active--Color: var(--sc-ink);
    --pf-v5-c-nav__link--m-current--Color: var(--sc-on-inverse);
    --pf-v5-c-nav__link--BackgroundColor: transparent;
    --pf-v5-c-nav__link--hover--BackgroundColor: var(--sc-overlay-soft-hover);
    --pf-v5-c-nav__link--focus--BackgroundColor: var(--sc-overlay-soft-hover);
    --pf-v5-c-nav__link--active--BackgroundColor: var(--sc-overlay-soft-hover);
    --pf-v5-c-nav__link--m-current--BackgroundColor: var(--sc-inverse);
    --pf-v5-c-nav__link--before--BorderColor: transparent;
    --pf-v5-c-nav__link--after--BorderColor: transparent;
    --pf-v5-c-nav__link--hover--after--BorderColor: transparent;
    --pf-v5-c-nav__link--m-current--after--BorderColor: transparent;
    --pf-v5-c-nav__item--before--BorderColor: var(--sc-border-subtle);
    --pf-v5-c-nav__section-title--Color: var(--sc-faint);
    --pf-v5-c-nav__section-title--BorderBottomColor: var(--sc-border-subtle);
    --pf-v5-c-nav__toggle--Color: var(--sc-faint);
    background: transparent;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__link {
    border-radius: 8px;
    font-family: var(--font-sans);
    font-weight: 500;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current:hover {
    background: var(--sc-inverse);
    color: var(--sc-on-inverse);
    font-weight: 600;
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__link::after {
    border-color: transparent !important;
}

/* Section titles ("Manage", "Configure") as SmartComp eyebrows */
.pf-v5-c-page__sidebar .pf-v5-c-nav__section-title {
    font-family: var(--font-sans);
    font-weight: 600;
    letter-spacing: 0.12em;
    text-transform: uppercase;
    color: var(--sc-faint);
}

.pf-v5-c-page__sidebar .pf-v5-c-nav__section-title .pf-v5-c-label {
    text-transform: none;
    letter-spacing: 0.04em;
}

/* ── Tabs ───────────────────────────────────────────────── */
.pf-v5-c-tabs {
    --pf-v5-c-tabs--before--BorderColor: var(--sc-border);
    --pf-v5-c-tabs__link--before--BorderColor: var(--sc-border);
    --pf-v5-c-tabs__link--Color: var(--sc-muted);
    --pf-v5-c-tabs__link--hover--Color: var(--sc-ink);
    --pf-v5-c-tabs__item--m-current__link--Color: var(--sc-ink);
    --pf-v5-c-tabs__link--after--BorderColor: var(--sc-orange);
    --pf-v5-c-tabs__item--m-current__link--after--BorderColor: var(--sc-orange);
    --pf-v5-c-tabs__link--hover--after--BorderColor: var(--sc-border-strong);
    --pf-v5-c-tabs--m-box__link--BackgroundColor: var(--sc-surface-2);
    --pf-v5-c-tabs--m-box__item--m-current__link--BackgroundColor: var(--sc-surface);
    --pf-v5-c-tabs__scroll-button--BackgroundColor: var(--sc-surface);
    --pf-v5-c-tabs__scroll-button--Color: var(--sc-muted);
    font-family: var(--font-sans);
}

.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__item-text {
    font-weight: 600;
}

/* ── Forms ──────────────────────────────────────────────── */
.pf-v5-c-form {
    --pf-v5-c-form__label--Color: var(--sc-ink-2);
    --pf-v5-c-form__label-required--Color: var(--sc-orange);
    --pf-v5-c-form__group-label-help--Color: var(--sc-faint);
    --pf-v5-c-form__group-label-help--hover--Color: var(--sc-ink);
}

.pf-v5-c-form__label,
.pf-v5-c-form__label-text {
    font-family: var(--font-sans);
    font-weight: 600;
}

.pf-v5-c-form__label-required {
    color: var(--sc-orange);
}

.pf-v5-c-helper-text {
    --pf-v5-c-helper-text__item-text--Color: var(--sc-muted);
    --pf-v5-c-helper-text__item--m-error__item-text--Color: var(--sc-danger);
    --pf-v5-c-helper-text__item--m-warning__item-text--Color: var(--sc-amber);
    --pf-v5-c-helper-text__item--m-success__item-text--Color: var(--sc-green);
}

/* Fields: 1px sc-border-strong all round, radius 8; focus turns the border sc-orange */
.pf-v5-c-form-control {
    --pf-v5-c-form-control--BackgroundColor: var(--sc-surface);
    --pf-v5-c-form-control--Color: var(--sc-ink);
    --pf-v5-c-form-control--m-readonly--BackgroundColor: var(--sc-surface-2);
    --pf-v5-c-form-control--m-disabled--BackgroundColor: var(--sc-surface-2);
    --pf-v5-c-form-control--m-disabled--Color: var(--sc-faint);
    --pf-v5-c-form-control--m-placeholder--Color: var(--sc-faint);
    border-radius: 8px;
    background-color: var(--sc-surface);
    box-shadow: inset 0 0 0 1px var(--sc-border-strong);
    color: var(--sc-ink);
    transition: box-shadow 0.13s ease;
}

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

.pf-v5-c-form-control:focus-within {
    box-shadow: inset 0 0 0 1px var(--sc-orange);
}

.pf-v5-c-form-control.pf-m-error,
.pf-v5-c-form-control.pf-m-error:focus-within {
    box-shadow: inset 0 0 0 1px var(--sc-danger);
}

.pf-v5-c-form-control.pf-m-readonly,
.pf-v5-c-form-control.pf-m-disabled {
    background-color: var(--sc-surface-2);
    box-shadow: inset 0 0 0 1px var(--sc-border);
    color: var(--sc-faint);
}

.pf-v5-c-form-control > :is(input, select, textarea) {
    font-family: var(--font-sans);
    color: inherit;
}

.pf-v5-c-form-control > :is(input, textarea)::placeholder {
    color: var(--sc-faint);
}

.pf-v5-c-form-control > :is(input, textarea):focus-visible {
    outline: none;
}

/* Menu toggles: selects in forms look like fields, the rest like bordered buttons */
.pf-v5-c-menu-toggle {
    --pf-v5-c-menu-toggle--Color: var(--sc-ink-2);
    --pf-v5-c-menu-toggle--BackgroundColor: var(--sc-surface);
    --pf-v5-c-menu-toggle--hover--BackgroundColor: var(--sc-hover);
    --pf-v5-c-menu-toggle--focus--BackgroundColor: var(--sc-surface);
    --pf-v5-c-menu-toggle--active--BackgroundColor: var(--sc-surface);
    --pf-v5-c-menu-toggle--expanded--BackgroundColor: var(--sc-surface);
    --pf-v5-c-menu-toggle__toggle-icon--Color: var(--sc-faint);
    --pf-v5-c-menu-toggle--disabled--BackgroundColor: var(--sc-surface-2);
    --pf-v5-c-menu-toggle--disabled--Color: var(--sc-faint);
    border-radius: 9px;
    box-shadow: inset 0 0 0 1px var(--sc-border-strong);
    font-family: var(--font-sans);
}

.pf-v5-c-menu-toggle::before,
.pf-v5-c-menu-toggle::after {
    display: none;
}

.pf-v5-c-menu-toggle.pf-m-expanded,
.pf-v5-c-menu-toggle:focus-visible {
    box-shadow: inset 0 0 0 1px var(--sc-orange);
}

.pf-v5-c-menu-toggle.pf-m-full-width,
.pf-v5-c-menu-toggle.pf-m-typeahead,
.pf-v5-c-form .pf-v5-c-menu-toggle:not(.pf-m-plain) {
    border-radius: 8px;
    color: var(--sc-ink);
}

.pf-v5-c-menu-toggle.pf-m-plain,
.pf-v5-c-masthead .pf-v5-c-menu-toggle {
    box-shadow: none;
}

.pf-v5-c-menu-toggle.pf-m-primary {
    --pf-v5-c-menu-toggle--BackgroundColor: var(--sc-inverse);
    --pf-v5-c-menu-toggle--hover--BackgroundColor: var(--sc-inverse-hover);
    --pf-v5-c-menu-toggle--expanded--BackgroundColor: var(--sc-inverse-hover);
    --pf-v5-c-menu-toggle--Color: var(--sc-on-inverse);
    --pf-v5-c-menu-toggle__toggle-icon--Color: var(--sc-on-inverse);
    box-shadow: none;
}

.pf-v5-c-text-input-group {
    --pf-v5-c-text-input-group--BackgroundColor: var(--sc-surface);
    --pf-v5-c-text-input-group__text--before--BorderColor: transparent;
    --pf-v5-c-text-input-group__text--after--BorderBottomColor: transparent;
    --pf-v5-c-text-input-group__icon--Color: var(--sc-faint);
    --pf-v5-c-text-input-group__text--hover__icon--Color: var(--sc-ink);
    border-radius: 9px;
    box-shadow: inset 0 0 0 1px var(--sc-border-strong);
}

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

.pf-v5-c-text-input-group:focus-within {
    box-shadow: inset 0 0 0 1px var(--sc-orange);
}

.pf-v5-c-text-input-group__text-input {
    font-family: var(--font-sans);
    color: var(--sc-ink);
}

/* Switches, checkboxes and radios: orange marks the choice */
.pf-v5-c-switch {
    --pf-v5-c-switch__toggle--BackgroundColor: var(--sc-border-strong);
    --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--sc-orange);
    --pf-v5-c-switch__input--checked__label--Color: var(--sc-ink);
    --pf-v5-c-switch__input--not-checked__label--Color: var(--sc-muted);
    --pf-v5-c-switch__input--focus__toggle--OutlineColor: var(--sc-orange);
    --pf-v5-c-switch__toggle--before--BackgroundColor: #ffffff;
    --pf-v5-c-switch__input--disabled__toggle--BackgroundColor: var(--sc-sunken);
    --pf-v5-c-switch__input--disabled__label--Color: var(--sc-faint);
    font-family: var(--font-sans);
}

.pf-v5-c-check__input,
.pf-v5-c-radio__input,
input[type="checkbox"],
input[type="radio"] {
    accent-color: var(--sc-orange);
}

.pf-v5-c-check__label,
.pf-v5-c-radio__label {
    color: var(--sc-ink-2);
}

/* ── Buttons ────────────────────────────────────────────── */
.pf-v5-c-button {
    --pf-v5-c-button--FontWeight: 600;
    --pf-v5-c-button--BorderRadius: 9px;
    --pf-v5-c-button--m-link--Color: var(--sc-orange-strong);
    --pf-v5-c-button--m-link--hover--Color: var(--sc-orange-strong);
    --pf-v5-c-button--m-link--focus--Color: var(--sc-orange-strong);
    --pf-v5-c-button--m-link--active--Color: var(--sc-orange-strong);
    --pf-v5-c-button--m-link--disabled--Color: var(--sc-faint);
    --pf-v5-c-button--m-link--m-inline--hover--Color: var(--sc-orange-strong);
    --pf-v5-c-button--m-plain--Color: var(--sc-muted);
    --pf-v5-c-button--m-plain--hover--Color: var(--sc-ink);
    --pf-v5-c-button--m-control--BackgroundColor: var(--sc-surface);
    --pf-v5-c-button--m-control--Color: var(--sc-muted);
    --pf-v5-c-button--m-control--after--BorderColor: var(--sc-border-strong);
    --pf-v5-c-button--m-control--hover--after--BorderColor: var(--sc-fainter);
    --pf-v5-c-button--disabled--BackgroundColor: var(--sc-surface-2);
    --pf-v5-c-button--disabled--Color: var(--sc-faint);
    font-family: var(--font-sans);
}

/* Primary: solid inverse (gradients are only for the Keycloak Sign in button) */
.pf-v5-c-button.pf-m-primary {
    --pf-v5-c-button--m-primary--BackgroundColor: var(--sc-inverse);
    --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--sc-inverse-hover);
    --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--sc-inverse);
    --pf-v5-c-button--m-primary--active--BackgroundColor: var(--sc-inverse-hover);
    --pf-v5-c-button--m-primary--Color: var(--sc-on-inverse);
    --pf-v5-c-button--m-primary--hover--Color: var(--sc-on-inverse);
    --pf-v5-c-button--m-primary--focus--Color: var(--sc-on-inverse);
    --pf-v5-c-button--m-primary--active--Color: var(--sc-on-inverse);
}

/* Secondary / tertiary: bordered on sc-surface */
.pf-v5-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-tertiary {
    --pf-v5-c-button--m-secondary--BackgroundColor: var(--sc-surface);
    --pf-v5-c-button--m-secondary--hover--BackgroundColor: var(--sc-hover);
    --pf-v5-c-button--m-secondary--focus--BackgroundColor: var(--sc-surface);
    --pf-v5-c-button--m-secondary--active--BackgroundColor: var(--sc-hover);
    --pf-v5-c-button--m-secondary--Color: var(--sc-ink-2);
    --pf-v5-c-button--m-secondary--hover--Color: var(--sc-ink-2);
    --pf-v5-c-button--m-secondary--focus--Color: var(--sc-ink-2);
    --pf-v5-c-button--m-secondary--active--Color: var(--sc-ink-2);
    --pf-v5-c-button--m-secondary--after--BorderColor: var(--sc-border-strong);
    --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--sc-fainter);
    --pf-v5-c-button--m-secondary--focus--after--BorderColor: var(--sc-border-strong);
    --pf-v5-c-button--m-secondary--active--after--BorderColor: var(--sc-fainter);
    --pf-v5-c-button--m-tertiary--BackgroundColor: var(--sc-surface);
    --pf-v5-c-button--m-tertiary--hover--BackgroundColor: var(--sc-hover);
    --pf-v5-c-button--m-tertiary--Color: var(--sc-ink-2);
    --pf-v5-c-button--m-tertiary--hover--Color: var(--sc-ink-2);
    --pf-v5-c-button--m-tertiary--after--BorderColor: var(--sc-border-strong);
    --pf-v5-c-button--m-tertiary--hover--after--BorderColor: var(--sc-fainter);
}

/* A secondary danger action keeps its own colour */
.pf-v5-c-button.pf-m-secondary.pf-m-danger {
    --pf-v5-c-button--m-secondary--Color: var(--sc-danger);
    --pf-v5-c-button--m-secondary--hover--Color: var(--sc-danger);
    --pf-v5-c-button--m-secondary--hover--BackgroundColor: var(--sc-danger-surface);
    --pf-v5-c-button--m-secondary--after--BorderColor: var(--sc-danger);
    --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--sc-danger);
}

.pf-v5-c-button.pf-m-danger:not(.pf-m-secondary) {
    --pf-v5-c-button--m-danger--BackgroundColor: var(--sc-danger);
    --pf-v5-c-button--m-danger--hover--BackgroundColor: var(--sc-danger);
    --pf-v5-c-button--m-danger--Color: #ffffff;
    --pf-v5-c-button--m-danger--hover--Color: #ffffff;
}

/* ── Surfaces: cards, menus, modals, popovers ───────────── */
.pf-v5-c-card {
    --pf-v5-c-card--BackgroundColor: var(--sc-surface);
    --pf-v5-c-card--BoxShadow: none;
    --pf-v5-c-card--m-selectable--hover--BoxShadow: none;
    --pf-v5-c-card--m-flat--BorderColor: var(--sc-border);
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--sc-border);
}

.pf-v5-c-card.pf-m-selectable:hover,
.pf-v5-c-card.pf-m-clickable:hover {
    box-shadow: inset 0 0 0 1px var(--sc-orange-border);
}

.pf-v5-c-card.pf-m-selected,
.pf-v5-c-card.pf-m-current {
    box-shadow: inset 0 0 0 1px var(--sc-orange);
}

.pf-v5-c-menu {
    --pf-v5-c-menu--BackgroundColor: var(--sc-surface);
    --pf-v5-c-menu--BoxShadow: var(--sc-shadow-menu);
    --pf-v5-c-menu__item--Color: var(--sc-ink-2);
    --pf-v5-c-menu__list-item--hover--BackgroundColor: var(--sc-hover);
    --pf-v5-c-menu__list-item--m-selected--BackgroundColor: var(--sc-orange-surface);
    --pf-v5-c-menu__item-select-icon--Color: var(--sc-orange);
    --pf-v5-c-menu__item-description--Color: var(--sc-muted);
    --pf-v5-c-menu__group-title--Color: var(--sc-faint);
    --pf-v5-c-menu__search--BackgroundColor: transparent;
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--sc-border), var(--sc-shadow-menu);
    font-family: var(--font-sans);
}

.pf-v5-c-menu__list-item,
.pf-v5-c-menu__item {
    border-radius: 8px;
}

.pf-v5-c-menu__item.pf-m-danger .pf-v5-c-menu__item-text {
    color: var(--sc-danger);
}

.pf-v5-c-divider {
    --pf-v5-c-divider--BackgroundColor: var(--sc-border-subtle);
}

.pf-v5-c-modal-box {
    --pf-v5-c-modal-box--BackgroundColor: var(--sc-surface);
    --pf-v5-c-modal-box--BoxShadow: var(--sc-shadow-dialog);
    --pf-v5-c-modal-box__title--FontFamily: var(--font-sans);
    border-radius: 14px;
    box-shadow: inset 0 0 0 1px var(--sc-border), var(--sc-shadow-dialog);
}

.pf-v5-c-backdrop {
    --pf-v5-c-backdrop--BackgroundColor: var(--sc-backdrop);
    -webkit-backdrop-filter: blur(2px);
    backdrop-filter: blur(2px);
}

.pf-v5-c-popover,
.pf-v5-c-popover__content {
    --pf-v5-c-popover__content--BackgroundColor: var(--sc-surface);
    --pf-v5-c-popover__arrow--BackgroundColor: var(--sc-surface);
    font-family: var(--font-sans);
}

.pf-v5-c-popover__content {
    border-radius: 12px;
    box-shadow: inset 0 0 0 1px var(--sc-border), var(--sc-shadow-menu);
}

.pf-v5-c-tooltip {
    --pf-v5-c-tooltip__content--BackgroundColor: var(--sc-inverse);
    --pf-v5-c-tooltip__content--Color: var(--sc-on-inverse);
    --pf-v5-c-tooltip__arrow--BackgroundColor: var(--sc-inverse);
}

.pf-v5-c-tooltip__content {
    border-radius: 8px;
    font-family: var(--font-sans);
}

/* ── Tables, data lists, toolbars ───────────────────────── */
.pf-v5-c-table {
    --pf-v5-c-table--BackgroundColor: var(--sc-surface);
    --pf-v5-c-table--BorderColor: var(--sc-border-subtle);
    --pf-v5-c-table--cell--Color: var(--sc-ink);
    --pf-v5-c-table__thead--cell--FontWeight: 600;
    --pf-v5-c-table__tr--m-clickable--hover--BackgroundColor: var(--sc-hover);
    --pf-v5-c-table__tr--m-selected--BackgroundColor: var(--sc-orange-surface);
    --pf-v5-c-table__expandable-row--after--BorderColor--base: var(--sc-orange);
    --pf-v5-c-table__sort-indicator--Color: var(--sc-faint);
    --pf-v5-c-table__sort--m-selected__button--Color: var(--sc-ink);
    --pf-v5-c-table__sort--m-selected__indicator--Color: var(--sc-orange);
    font-family: var(--font-sans);
}

.pf-v5-c-table thead th,
.pf-v5-c-table thead .pf-v5-c-table__button {
    color: var(--sc-muted);
}

@media (hover: hover) {
    .pf-v5-c-table tbody > tr:hover > td {
        background: var(--sc-hover);
    }
}

.pf-v5-c-data-list {
    --pf-v5-c-data-list__item--BackgroundColor: var(--sc-surface);
    --pf-v5-c-data-list__item--BorderBlockEndColor: var(--sc-border-subtle);
    --pf-v5-c-data-list--BorderTopColor: var(--sc-border);
    --pf-v5-c-data-list__item--m-selectable--hover--BackgroundColor: var(--sc-hover);
    --pf-v5-c-data-list__item--m-selected--before--BackgroundColor: var(--sc-orange);
}

.pf-v5-c-toolbar {
    --pf-v5-c-toolbar--BackgroundColor: transparent;
}

.pf-v5-c-pagination {
    --pf-v5-c-pagination__nav-page-select--c-form-control--width-chars: 2;
}

.pf-v5-c-pagination__total-items,
.pf-v5-c-pagination .pf-v5-c-menu-toggle__text {
    font-variant-numeric: tabular-nums;
}

/* ── Labels (chips): a tint set per meaning ─────────────── */
.pf-v5-c-label {
    --pf-v5-c-label--BorderRadius: 6px;
    --pf-v5-c-label--BackgroundColor: var(--sc-surface);
    --pf-v5-c-label__content--Color: var(--sc-muted);
    --pf-v5-c-label__content--before--BorderColor: var(--sc-border);
    --pf-v5-c-label--m-blue--BackgroundColor: var(--sc-blue-surface);
    --pf-v5-c-label--m-blue__content--Color: var(--sc-blue);
    --pf-v5-c-label--m-blue__icon--Color: var(--sc-blue);
    --pf-v5-c-label--m-blue__content--before--BorderColor: var(--sc-blue-border);
    --pf-v5-c-label--m-purple--BackgroundColor: var(--sc-orange-surface);
    --pf-v5-c-label--m-purple__content--Color: var(--sc-orange-ink);
    --pf-v5-c-label--m-purple__icon--Color: var(--sc-orange-ink);
    --pf-v5-c-label--m-purple__content--before--BorderColor: var(--sc-orange-border);
    --pf-v5-c-label--m-green--BackgroundColor: var(--sc-green-surface);
    --pf-v5-c-label--m-green__content--Color: var(--sc-green);
    --pf-v5-c-label--m-green__icon--Color: var(--sc-green);
    --pf-v5-c-label--m-green__content--before--BorderColor: var(--sc-green-border);
    --pf-v5-c-label--m-red--BackgroundColor: var(--sc-danger-surface);
    --pf-v5-c-label--m-red__content--Color: var(--sc-danger);
    --pf-v5-c-label--m-red__icon--Color: var(--sc-danger);
    --pf-v5-c-label--m-red__content--before--BorderColor: var(--sc-danger);
    --pf-v5-c-label--m-gold--BackgroundColor: var(--sc-amber-surface);
    --pf-v5-c-label--m-gold__content--Color: var(--sc-amber);
    --pf-v5-c-label--m-gold__icon--Color: var(--sc-amber);
    --pf-v5-c-label--m-gold__content--before--BorderColor: var(--sc-amber-border);
    --pf-v5-c-label--m-orange--BackgroundColor: var(--sc-orange-surface);
    --pf-v5-c-label--m-orange__content--Color: var(--sc-orange-ink);
    --pf-v5-c-label--m-orange__icon--Color: var(--sc-orange-ink);
    --pf-v5-c-label--m-orange__content--before--BorderColor: var(--sc-orange-border);
    --pf-v5-c-label--m-cyan--BackgroundColor: var(--sc-blue-surface);
    --pf-v5-c-label--m-cyan__content--Color: var(--sc-blue);
    --pf-v5-c-label--m-cyan__icon--Color: var(--sc-blue);
    --pf-v5-c-label--m-cyan__content--before--BorderColor: var(--sc-blue-border);
    font-family: var(--font-sans);
    font-weight: 600;
}

/* ── Alerts, banners, empty states ──────────────────────── */
.pf-v5-c-alert {
    --pf-v5-c-alert--BackgroundColor: var(--sc-surface);
    --pf-v5-c-alert--BoxShadow: var(--sc-shadow-menu);
    --pf-v5-c-alert__title--Color: var(--sc-ink);
    --pf-v5-c-alert--m-success__icon--Color: var(--sc-green);
    --pf-v5-c-alert--m-success__title--Color: var(--sc-ink);
    --pf-v5-c-alert--m-danger__icon--Color: var(--sc-danger);
    --pf-v5-c-alert--m-danger__title--Color: var(--sc-ink);
    --pf-v5-c-alert--m-warning__icon--Color: var(--sc-amber);
    --pf-v5-c-alert--m-warning__title--Color: var(--sc-ink);
    --pf-v5-c-alert--m-info__icon--Color: var(--sc-blue);
    --pf-v5-c-alert--m-info__title--Color: var(--sc-ink);
    border-radius: 11px;
    font-family: var(--font-sans);
}

.pf-v5-c-alert.pf-m-success { --pf-v5-c-alert--BorderTopColor: var(--sc-green); }
.pf-v5-c-alert.pf-m-danger { --pf-v5-c-alert--BorderTopColor: var(--sc-danger); }
.pf-v5-c-alert.pf-m-warning { --pf-v5-c-alert--BorderTopColor: var(--sc-amber); }
.pf-v5-c-alert.pf-m-info { --pf-v5-c-alert--BorderTopColor: var(--sc-blue); }

.pf-v5-c-alert.pf-m-inline {
    box-shadow: none;
}

.pf-v5-c-alert.pf-m-inline.pf-m-success { --pf-v5-c-alert--m-inline--m-success--BackgroundColor: var(--sc-green-surface); }
.pf-v5-c-alert.pf-m-inline.pf-m-danger { --pf-v5-c-alert--m-inline--m-danger--BackgroundColor: var(--sc-danger-surface); }
.pf-v5-c-alert.pf-m-inline.pf-m-warning { --pf-v5-c-alert--m-inline--m-warning--BackgroundColor: var(--sc-amber-surface); }
.pf-v5-c-alert.pf-m-inline.pf-m-info { --pf-v5-c-alert--m-inline--m-info--BackgroundColor: var(--sc-blue-surface); }

/* "You are logged in as a temporary admin user" */
.pf-v5-c-banner {
    --pf-v5-c-banner--m-gold--BackgroundColor: var(--sc-amber-surface);
    --pf-v5-c-banner--m-gold--Color: var(--sc-amber);
    --pf-v5-c-banner--m-warning--BackgroundColor: var(--sc-amber-surface);
    --pf-v5-c-banner--m-warning--Color: var(--sc-amber);
    --pf-v5-c-banner--m-danger--BackgroundColor: var(--sc-danger-surface);
    --pf-v5-c-banner--m-danger--Color: var(--sc-danger);
    --pf-v5-c-banner--m-info--BackgroundColor: var(--sc-blue-surface);
    --pf-v5-c-banner--m-info--Color: var(--sc-blue);
    font-family: var(--font-sans);
    font-weight: 600;
}

.pf-v5-c-banner.pf-m-gold,
.pf-v5-c-banner.pf-m-warning {
    background: var(--sc-amber-surface);
    color: var(--sc-amber);
}

.pf-v5-c-empty-state {
    --pf-v5-c-empty-state__body--Color: var(--sc-muted);
    --pf-v5-c-empty-state__icon--Color: var(--sc-faint);
    font-family: var(--font-sans);
}

.pf-v5-c-code-block {
    --pf-v5-c-code-block--BackgroundColor: var(--sc-surface-2);
}

.pf-v5-c-expandable-section__toggle {
    --pf-v5-c-expandable-section__toggle--Color: var(--sc-orange-strong);
    --pf-v5-c-expandable-section__toggle--hover--Color: var(--sc-orange-strong);
    --pf-v5-c-expandable-section__toggle--active--Color: var(--sc-orange-strong);
    --pf-v5-c-expandable-section__toggle--focus--Color: var(--sc-orange-strong);
}

/* Scrollbars */
* {
    scrollbar-color: var(--sc-scrollbar-thumb) transparent;
}

@media (prefers-reduced-motion: reduce) {
    * {
        transition-duration: 0.01ms !important;
    }
}

/* The realm header at the top of the sidebar ("Keycloak · Current realm") is not an eyebrow */
.pf-v5-c-page__sidebar .pf-v5-c-nav > .pf-v5-c-nav__section-title {
    font-size: 13px;
    font-weight: 600;
    letter-spacing: 0;
    text-transform: none;
    color: var(--sc-ink);
}

/* "Current realm" marks the current choice: the orange tint set */
.pf-v5-c-page__sidebar .pf-v5-c-nav > .pf-v5-c-nav__section-title .pf-v5-c-label {
    --pf-v5-c-label--BackgroundColor: var(--sc-orange-surface);
    --pf-v5-c-label__content--Color: var(--sc-orange-ink);
    --pf-v5-c-label__icon--Color: var(--sc-orange-ink);
    --pf-v5-c-label__content--before--BorderColor: var(--sc-orange-border);
    --pf-v5-c-label--m-blue--BackgroundColor: var(--sc-orange-surface);
    --pf-v5-c-label--m-blue__content--Color: var(--sc-orange-ink);
    --pf-v5-c-label--m-blue__content--before--BorderColor: var(--sc-orange-border);
    letter-spacing: 0;
}

/* Give the pill a little air from the rail's edges (PatternFly's links run edge to edge) */
.pf-v5-c-page__sidebar .pf-v5-c-nav__list > li > .pf-v5-c-nav__link {
    margin-inline: 8px;
}

/* Dark: the content area sits on sc-page (#17181a); bars, rail, fields and cards keep sc-surface */
html.pf-v5-theme-dark .pf-v5-c-page {
    --pf-v5-c-page__main-section--m-light--BackgroundColor: var(--sc-page);
    --pf-v5-c-page__main-breadcrumb--BackgroundColor: var(--sc-page);
    --pf-v5-c-page__main-tabs--BackgroundColor: var(--sc-page);
    --pf-v5-c-page__main-nav--BackgroundColor: var(--sc-page);
}

html.pf-v5-theme-dark .pf-v5-c-page__main-section.pf-m-light,
html.pf-v5-theme-dark .pf-v5-c-page__main-breadcrumb,
html.pf-v5-theme-dark .pf-v5-c-page__main-tabs {
    background-color: var(--sc-page);
}

html.pf-v5-theme-dark .pf-v5-c-page__main .pf-v5-c-table,
html.pf-v5-theme-dark .pf-v5-c-page__main .pf-v5-c-pagination,
html.pf-v5-theme-dark .pf-v5-c-page__main .pf-v5-c-toolbar {
    --pf-v5-c-table--BackgroundColor: var(--sc-page);
    --pf-v5-c-pagination--BackgroundColor: var(--sc-page);
    background-color: var(--sc-page);
}

html.pf-v5-theme-dark .pf-v5-c-tabs {
    --pf-v5-c-tabs--m-box__item--m-current__link--BackgroundColor: var(--sc-page);
    --pf-v5-c-tabs__scroll-button--BackgroundColor: var(--sc-page);
}

/* Dark: drawers (Groups tree + content, detail panels) and tree views sit on sc-page too */
html.pf-v5-theme-dark .pf-v5-c-page__main :is(.pf-v5-c-drawer, .pf-v5-c-drawer__main, .pf-v5-c-drawer__content, .pf-v5-c-drawer__panel, .pf-v5-c-drawer__body, .pf-v5-c-drawer__section, .pf-v5-c-tree-view, .pf-v5-c-data-list) {
    --pf-v5-c-drawer__content--BackgroundColor: var(--sc-page);
    --pf-v5-c-drawer__panel--BackgroundColor: var(--sc-page);
    --pf-v5-c-drawer__section--BackgroundColor: var(--sc-page);
    --pf-v5-c-drawer--m-inline__panel--after--BackgroundColor: var(--sc-border);
    --pf-v5-c-drawer__splitter--after--BorderColor: var(--sc-border);
    --pf-v5-c-tree-view__content--BackgroundColor: transparent;
    --pf-v5-c-tree-view__node--hover--BackgroundColor: var(--sc-hover);
    --pf-v5-c-tree-view__node--m-current--BackgroundColor: var(--sc-hover);
    --pf-v5-c-data-list__item--BackgroundColor: var(--sc-page);
    background-color: var(--sc-page);
}

/* ── Keycloak form panels (Realm settings → Login, Email, …) ── */
/* Same approach as the DodoTech theme: the card gets its own padding, header and body
   lose their side padding, and the heading gets room and weight. */
html .pf-v5-c-card:has(> .kc-form-panel__header) {
    padding: 22px 26px;
    margin-bottom: 22px;
}

html .pf-v5-c-card > .kc-form-panel__header,
html .pf-v5-c-card > .kc-form-panel__body {
    padding-left: 0;
    padding-right: 0;
}

html .pf-v5-c-card > .kc-form-panel__header {
    padding-top: 0;
    padding-bottom: 18px;
}

html .pf-v5-c-card > .kc-form-panel__body {
    padding-bottom: 0;
}

/* the form inside reserves room for a sticky save bar these panels do not have */
html .kc-form-panel__body > .keycloak__form {
    padding-bottom: 0;
}

.pf-v5-c-card .kc-form-panel__header .pf-v5-c-title {
    font-weight: 600;
    letter-spacing: -0.01em;
    color: var(--sc-ink);
}

/* Keycloak's own .pf-m-flat.kc-login-screen (and siblings) set an 8px bottom padding and the
   body adds 48px; keep 22px all round so the card is even */
html .pf-v5-c-card:has(> .kc-form-panel__header) {
    padding-bottom: 22px !important;
}

html .pf-v5-c-card > .kc-form-panel__body {
    padding-bottom: 0 !important;
}