/**
 * Heligrafics brand overrides for the Keycloak Admin Console.
 *
 * Loaded through the `styles` property in theme.properties, after the
 * PatternFly v5 styles bundled with keycloak.v2, so these declarations win.
 *
 * Keep in sync with the Account Console overrides in
 * themes/login-account-email/src/account/heligrafics-brand.css: both consoles share the same
 * palette (brand red #D4152A, off-white / wine-red sidebar).
 */

/* ─── Primary colour — Light mode ────────────────────────────────────────── */
:root {
    --pf-v5-global--primary-color--100: #d4152a;
    --pf-v5-global--primary-color--200: #a8101f;
    --pf-v5-global--primary-color--light-100: #eb8a94;
    --pf-v5-global--primary-color--dark-100: #d4152a;
    --pf-v5-global--active-color--100: #d4152a;
    --pf-v5-global--link--Color: #d4152a;
    --pf-v5-global--link--Color--hover: #a8101f;
    --pf-v5-global--link--Color--dark: #d4152a;
    --pf-v5-global--link--Color--dark--hover: #a8101f;
}

/* ─── Primary colour — Dark mode ─────────────────────────────────────────── */
/* Use a lighter red on dark backgrounds so contrast remains acceptable.      */
.pf-v5-theme-dark {
    --pf-v5-global--primary-color--100: #e8526a;
    --pf-v5-global--primary-color--200: #d4152a;
    /* Dark-mode primary buttons use --300 as background (hover: --200). */
    --pf-v5-global--primary-color--300: #a8101f;
    --pf-v5-global--primary-color--light-100: #e8526a;
    --pf-v5-global--primary-color--dark-100: #e8526a;
    --pf-v5-global--active-color--100: #e8526a;
    --pf-v5-global--link--Color: #e8526a;
    --pf-v5-global--link--Color--hover: #d4152a;
    --pf-v5-global--link--Color--light: #e8526a;
    --pf-v5-global--link--Color--light--hover: #d4152a;
    --pf-v5-global--link--Color--dark: #e8526a;
    --pf-v5-global--link--Color--dark--hover: #d4152a;
}

/* ─── Logo sizing ────────────────────────────────────────────────────────── */
/* The Heligrafics logo is a wide horizontal PNG (4.17:1 ratio).
   keycloak.v2 sets this image to 35 px; give it a bit more room.            */
img.keycloak__pageheader_brand {
    height: 40px;
    width: auto;
}

/* ─── Masthead (top bar) ─────────────────────────────────────────────────── */
/* PatternFly declares --pf-v5-c-masthead--BackgroundColor on .pf-v5-c-masthead
   itself (not on :root), so it must be overridden on the same selector. The
   toolbar inside inherits it in light mode, but dark mode pins the toolbar to
   black with its own rule, so it is overridden explicitly too.
   Light: burgundy. Dark: wine red (same as the dark sidebar).
   The white logo and PatternFly's light-on-dark masthead text stay readable.
   Selectors are prefixed with :root for extra specificity: in the Keycloakify
   account bundle PatternFly's masthead.css is emitted *after* this file (it is
   imported lazily by the Masthead component), so equal specificity loses.  */
:root .pf-v5-c-masthead {
    --pf-v5-c-masthead--BackgroundColor: #7a1424;
}

:root .pf-v5-c-masthead .pf-v5-c-toolbar {
    --pf-v5-c-toolbar--BackgroundColor: var(--pf-v5-c-masthead--BackgroundColor);
}

:root.pf-v5-theme-dark .pf-v5-c-masthead {
    --pf-v5-c-masthead--BackgroundColor: #4d1218;
}

/* User menu toggle: translucent white instead of PatternFly's grey/dark
   borders and dark-mode grey fill, so it blends with the coloured bar.     */
:root .pf-v5-c-masthead .pf-v5-c-menu-toggle {
    --pf-v5-c-menu-toggle--BackgroundColor: transparent;
    --pf-v5-c-menu-toggle--hover--BackgroundColor: rgba(255, 255, 255, 0.10);
    --pf-v5-c-menu-toggle--focus--BackgroundColor: rgba(255, 255, 255, 0.10);
    --pf-v5-c-menu-toggle--active--BackgroundColor: rgba(255, 255, 255, 0.10);
    --pf-v5-c-menu-toggle--m-expanded--BackgroundColor: rgba(255, 255, 255, 0.10);
    --pf-v5-c-menu-toggle--before--BorderTopColor: rgba(255, 255, 255, 0.40);
    --pf-v5-c-menu-toggle--before--BorderRightColor: rgba(255, 255, 255, 0.40);
    --pf-v5-c-menu-toggle--before--BorderBottomColor: rgba(255, 255, 255, 0.40);
    --pf-v5-c-menu-toggle--before--BorderLeftColor: rgba(255, 255, 255, 0.40);
}

/* ─── Sidebar — Light mode ───────────────────────────────────────────────── */
.pf-v5-c-page__sidebar {
    --pf-v5-c-page__sidebar--BackgroundColor: #f5f5f5;
}

/* Nav links inside the light sidebar */
.pf-v5-c-page__sidebar .pf-v5-c-nav {
    --pf-v5-c-nav__link--Color: #262424;
    --pf-v5-c-nav__link--hover--Color: #262424;
    --pf-v5-c-nav__link--focus--Color: #262424;
    --pf-v5-c-nav__link--BackgroundColor: transparent;
    --pf-v5-c-nav__link--hover--BackgroundColor: #e8e8e8;
    --pf-v5-c-nav__link--focus--BackgroundColor: #e8e8e8;
    --pf-v5-c-nav__link--m-current--Color: #262424;
    --pf-v5-c-nav__link--m-current--BackgroundColor: rgba(212, 21, 42, 0.08);
    --pf-v5-c-nav__item--m-current--before--BackgroundColor: #d4152a;
    --pf-v5-c-nav__list-divider--BorderColor: #e8e8e8;
    --pf-v5-c-nav__section-title--Color: #6a6a6a;
}

/* ─── Sidebar — Dark mode ────────────────────────────────────────────────── */
.pf-v5-theme-dark .pf-v5-c-page__sidebar {
    --pf-v5-c-page__sidebar--BackgroundColor: #4d1218;
}

/* Nav links inside the dark sidebar */
.pf-v5-theme-dark .pf-v5-c-page__sidebar .pf-v5-c-nav {
    --pf-v5-c-nav__link--Color: #ffffff;
    --pf-v5-c-nav__link--hover--Color: #ffffff;
    --pf-v5-c-nav__link--focus--Color: #ffffff;
    --pf-v5-c-nav__link--BackgroundColor: transparent;
    --pf-v5-c-nav__link--hover--BackgroundColor: rgba(255, 255, 255, 0.10);
    --pf-v5-c-nav__link--focus--BackgroundColor: rgba(255, 255, 255, 0.10);
    --pf-v5-c-nav__link--m-current--Color: #ffffff;
    --pf-v5-c-nav__link--m-current--BackgroundColor: rgba(232, 82, 106, 0.25);
    --pf-v5-c-nav__item--m-current--before--BackgroundColor: #e8526a;
    --pf-v5-c-nav__list-divider--BorderColor: rgba(255, 255, 255, 0.10);
    --pf-v5-c-nav__section-title--Color: rgba(255, 255, 255, 0.60);
}

/* ─── Realm welcome page ─────────────────────────────────────────────────── */
/* Dashboard shown for every realm except master ("Welcome to <realm>").
   keycloak.v2 renders the theme logo there too, but our logo is white (for
   the black masthead) and disappears on the light page background: swap it
   for the colour logo in light mode and keep the white one in dark mode.    */
.pf-v5-c-empty-state__content:has(> img.keycloak__dashboard_icon) {
    max-width: 640px;
    padding-block: var(--pf-v5-global--spacer--2xl);
}

img.keycloak__dashboard_icon {
    content: url("../img/logo-color.png");
    width: 360px;
    max-width: 100%;
    height: auto;
    margin-bottom: var(--pf-v5-global--spacer--xl);
}

.pf-v5-theme-dark img.keycloak__dashboard_icon {
    content: url("../img/logo.png");
}

/* "Welcome to" — small brand-red eyebrow above the realm name */
.pf-v5-c-empty-state__content:has(> img.keycloak__dashboard_icon) h2.pf-v5-c-empty-state__title-text {
    color: var(--pf-v5-global--primary-color--100);
    font-size: var(--pf-v5-global--FontSize--sm);
    font-weight: var(--pf-v5-global--FontWeight--bold);
    letter-spacing: 0.12em;
    text-transform: uppercase;
}

/* Realm name */
.pf-v5-c-empty-state__content:has(> img.keycloak__dashboard_icon) h1.pf-v5-c-empty-state__title-text {
    font-size: var(--pf-v5-global--FontSize--3xl);
    font-weight: var(--pf-v5-global--FontWeight--bold);
}

/* Short brand-red rule between the title and the introduction */
.pf-v5-c-empty-state__content:has(> img.keycloak__dashboard_icon) .pf-v5-c-empty-state__body::before {
    content: "";
    display: block;
    width: 48px;
    height: 3px;
    margin: 0 auto var(--pf-v5-global--spacer--lg);
    border-radius: 2px;
    background-color: var(--pf-v5-global--primary-color--100);
}