/*
 * BeON account console theme.
 *
 * The account console is a PatternFly 5 React app, so the whole palette can be
 * shifted by overriding the design tokens rather than individual components.
 */

:root {
    --beon-red: #d93a2f;
    --beon-red-hover: #b82c23;
    --beon-red-active: #99231b;
    --beon-red-tint: #fdf1f0;
    --beon-hairline: #ece4e3;

    --pf-v5-global--primary-color--100: var(--beon-red);
    --pf-v5-global--primary-color--200: var(--beon-red-hover);
    --pf-v5-global--primary-color--300: var(--beon-red);
    --pf-v5-global--link--Color: var(--beon-red-hover);
    --pf-v5-global--link--Color--hover: var(--beon-red-active);
    --pf-v5-global--link--Color--dark: var(--beon-red-hover);
    --pf-v5-global--link--Color--dark--hover: var(--beon-red-active);
    --pf-v5-global--active-color--100: var(--beon-red);
    --pf-v5-global--FontFamily--redhat-updated--sans-serif: "Segoe UI", "Helvetica Neue",
        Helvetica, Arial, "Noto Sans", sans-serif;
    --pf-v5-global--FontFamily--redhat-updated--heading--sans-serif: "Segoe UI",
        "Helvetica Neue", Helvetica, Arial, "Noto Sans", sans-serif;
}

/* Masthead: a warm off-white bar so it reads as a distinct band against the
 * white content area, with a solid BeON red rule under it. A plain white
 * masthead on white content had no edge at all. */
.pf-v5-c-masthead {
    --pf-v5-c-masthead--BackgroundColor: transparent;
    --pf-v5-c-masthead--Color: #212121;
    background: linear-gradient(180deg, #ffffff 0%, #fdf1ef 100%);
    border-bottom: 4px solid var(--beon-red);
    box-shadow: 0 2px 10px rgba(122, 45, 40, 0.10);
}

/* The masthead is white in this theme, but PatternFly styles its controls for
 * the stock dark bar - the user menu came out white-on-white. */
.pf-v5-c-masthead,
.pf-v5-c-masthead .pf-v5-c-menu-toggle,
.pf-v5-c-masthead .pf-v5-c-menu-toggle__text,
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain {
    color: #212121;
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle {
    --pf-v5-c-menu-toggle--Color: #212121;
}

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

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

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

/* Same double-border bug the admin console and login pages had: every
 * MenuToggle draws its own ::before/::after underline on top of whichever
 * border this file gives it. */
.pf-v5-c-menu-toggle::before,
.pf-v5-c-menu-toggle::after {
    display: none;
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle:not(.pf-m-plain) {
    border: 1px solid var(--beon-hairline);
    background-color: rgba(255, 255, 255, 0.6);
}

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

/* The sidebar toggle used PatternFly's default hamburger, then a CSS-drawn
 * double chevron - replaced again with a dedicated icon (a sidebar outline
 * with its list column marked by three dots), matching the admin console.
 * A mask rather than a background-image so it still picks up
 * `currentColor`. */
#nav-toggle svg {
    display: none;
}

#nav-toggle {
    position: relative;
}

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

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

.pf-v5-c-page__main {
    background-color: #fbf7f6;
}

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

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

/* ---- Rounded, everywhere - same scale as the admin console and the login
 * pages (8px controls), applied to every widget class this console
 * actually uses. Left at PatternFly's square corners and 3px button
 * radius, this console read as an unfinished stock screen next to the
 * other two. */
.pf-v5-c-button {
    --pf-v5-c-button--BorderRadius: 8px;
    border-radius: 8px;
    transition: background-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

/* A secondary button's visible border isn't a real `border` - it's a
 * `::after` pseudo-element with its own independent radius variable,
 * untouched by changing `--pf-v5-c-button--BorderRadius` above. For a
 * transparent-fill button (every secondary button) that outline is the
 * entire visible shape, so it stayed at PatternFly's ~3px corner
 * regardless of what the button's own `border-radius` was set to. */
.pf-v5-c-button::after {
    border-radius: 8px;
}

/* Text inputs (Username, Email, First/Last name, ...). PatternFly's own
 * ::before/::after draw a separate underline under this border - the same
 * double-line bug as everywhere else in this theme. */
.pf-v5-c-form-control {
    --pf-v5-c-form-control--BorderRadius: 8px;
    border-width: 1px;
    border-style: solid;
    border-color: var(--beon-hairline);
    border-radius: 8px;
    overflow: hidden;
    transition: box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1),
        border-color 180ms cubic-bezier(0.4, 0, 0.2, 1);
}

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

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

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

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

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

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

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

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

.pf-v5-c-text-input-group button:focus,
.pf-v5-c-text-input-group input:focus {
    outline: none;
}

/* Password field's own eye-toggle, and any other input+button pair
 * sharing one `.pf-v5-c-input-group` - same fuse-into-one-border and
 * nested-double-border handling as the admin console.
 *
 * Telling a fused pair (input + the button that acts on it) apart from
 * two independent controls sharing a row (two dropdowns, a filter next
 * to a search box) can't rely on "does it nest another input-group" -
 * the admin console's "Attribute search" next to "Select attributes" has
 * no nested input-group at all (the second control is Keycloak's own,
 * non-PatternFly button), so that test alone called it fused and merged
 * two unrelated dropdowns into one pill with no seam between them. What
 * actually marks a fused leaf is that one of its two pieces is a real
 * text input (`.pf-v5-c-form-control` or `.pf-v5-c-text-input-group`);
 * anything without one, or that nests a whole second input-group (an
 * inner control's own input, not this row's), is a wrapper - kept the
 * same here for consistency even though this console doesn't currently
 * render either of the admin-only cases. */
.pf-v5-c-input-group:has(.pf-v5-c-input-group),
.pf-v5-c-input-group:not(:has(.pf-v5-c-form-control)):not(:has(.pf-v5-c-text-input-group)) {
    border: none;
    background: transparent;
    gap: 0.25rem;
}

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

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

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

.pf-v5-c-input-group:not(:has(.pf-v5-c-input-group)):has(.pf-v5-c-form-control, .pf-v5-c-text-input-group) .pf-v5-c-text-input-group,
.pf-v5-c-input-group:not(:has(.pf-v5-c-input-group)):has(.pf-v5-c-form-control, .pf-v5-c-text-input-group) .pf-v5-c-menu-toggle,
.pf-v5-c-input-group:not(:has(.pf-v5-c-input-group)):has(.pf-v5-c-form-control, .pf-v5-c-text-input-group) .pf-v5-c-button,
.pf-v5-c-input-group:not(:has(.pf-v5-c-input-group)):has(.pf-v5-c-form-control, .pf-v5-c-text-input-group) .pf-v5-c-form-control {
    border: none;
    border-radius: 0;
    background: transparent;
    box-shadow: none;
}

/* A fused group's input only fills the box when its wrapping item is the
 * `.pf-m-fill` PatternFly grows - some of Keycloak's own input+button
 * markup (the admin console's attribute-search value field, for one)
 * omits that class, leaving the actual input its own narrow width while
 * a fixed-width ancestor still stretches the border around it, showing as
 * dead space between the button and the box's own edge. Grown here too so
 * this file doesn't regress the same way. */
.pf-v5-c-input-group:not(:has(.pf-v5-c-input-group)):has(.pf-v5-c-form-control, .pf-v5-c-text-input-group) > .pf-v5-c-input-group__item:has(.pf-v5-c-form-control, .pf-v5-c-text-input-group) {
    flex: 1 1 auto;
}

.pf-v5-c-input-group .pf-v5-c-button::before,
.pf-v5-c-input-group .pf-v5-c-button::after {
    display: none;
}

.pf-v5-c-menu-toggle .pf-v5-c-text-input-group {
    border: none;
    border-radius: 0;
    background: transparent;
}

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

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

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

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

.pf-v5-c-switch__toggle {
    border-radius: 999px;
}

/* ---- Floating surfaces (dropdown menus, dialogs, popovers, toasts) -----
 * Same gap as the admin console: these have no border at rest, only a
 * drop shadow, so the "round every widget" pass missed them and they
 * stayed PatternFly's sharp square. Same two-tier scale as the rest of
 * this theme - 8px for compact controls, 12px for a page-level surface
 * like a modal, matching `.pf-v5-c-card` below. */
.pf-v5-c-menu,
.pf-v5-c-dropdown__menu,
.pf-v5-c-popover__content,
.pf-v5-c-alert {
    border-radius: 8px;
}

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

/* ---- Sidebar - same rounded-tint-fill treatment as the admin console,
 * so the two consoles read as one product instead of two different
 * PatternFly defaults that happen to share a palette. Padding on the
 * *list*, not width/margin on each link: `.pf-v5-c-page__sidebar` can
 * render as a width:0 flyout in some states, and width/margin math against
 * that wraps labels and makes row heights jump. */
.pf-v5-c-nav__list {
    padding-inline: 0.5rem;
    box-sizing: border-box;
}

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

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

/* The side nav is dark. A translucent red over near-black blends toward
 * muddy brown rather than reading as red - full saturation is what shows
 * up, same finding as the admin console's sidebar.
 *
 * `.pf-v5-c-nav__link.pf-m-current` only. This console's "Account
 * security" is an expandable section, and PatternFly puts `.pf-m-current`
 * on that section's own `<li>` whenever a child page ("Signing in",
 * "Device activity") is the active one, on top of the child's own `<a>`
 * carrying it too - matching both painted the section's toggle button
 * the exact same solid red as the real current page sitting right below
 * it, two full-strength boxes nested with no way to tell which one you're
 * actually on. The toggle's own bold text and open chevron already mark
 * it as "you're inside this section"; only the real link should get the
 * fill. */
.pf-v5-c-nav__link.pf-m-current {
    --pf-v5-c-nav__link--m-current--after--BorderColor: transparent;
    --pf-v5-c-nav__link--m-current--Color: #ffffff;
    background-color: var(--beon-red);
    font-weight: 600;
}

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

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

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

.pf-v5-c-card {
    border-radius: 12px;
    border: 1px solid var(--beon-hairline);
    transition: box-shadow 180ms cubic-bezier(0.4, 0, 0.2, 1);
}