/* ============================================================================
   Logical Commerce — admin console skin.

   Loaded AFTER the parent's css/styles.css, so it only re-points design tokens.
   DELIBERATELY CONSERVATIVE: this sets colours only. No layout, no positioning,
   and above all no `display:none` — hiding a control would look like lost
   functionality even though a theme cannot actually remove any.

   PatternFly's variable prefix changed between major versions, so both the v5
   and v6 spellings are set. The one the console doesn't use is simply ignored —
   an unused custom property costs nothing and saves a round-trip if the base
   image is upgraded.
   ============================================================================ */

:root {
  --cl-indigo: #5b57e6;
  --cl-indigo-dark: #4a46d4;
  --cl-amber: #f5a623;
  --cl-ink: #0e1020;
  --cl-sidebar: #171a2e;
}

/* --- brand accent: replaces Keycloak blue on buttons, links, active states --- */
:root,
.pf-v5-theme-dark,
.pf-v6-theme-dark {
  --pf-v5-global--primary-color--100: var(--cl-indigo);
  --pf-v5-global--primary-color--200: var(--cl-indigo-dark);
  --pf-v5-global--active-color--100: var(--cl-indigo);
  --pf-v5-global--link--Color: var(--cl-indigo);
  --pf-v5-global--link--Color--hover: var(--cl-indigo-dark);

  --pf-v6-global--primary-color--100: var(--cl-indigo);
  --pf-v6-global--primary-color--200: var(--cl-indigo-dark);
  --pf-v6-global--active-color--100: var(--cl-indigo);
  --pf-v6-global--link--Color: var(--cl-indigo);
  --pf-v6-global--link--Color--hover: var(--cl-indigo-dark);
}

/* --- masthead: the dark bar holding the logo --- */
.pf-v5-c-masthead,
.pf-v6-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--cl-ink);
  --pf-v6-c-masthead--BackgroundColor: var(--cl-ink);
  background-color: var(--cl-ink);
  border-bottom: 1px solid rgba(255, 255, 255, .09);
}

/* Cap the logo's height so the masthead can't grow. The logo is a wide lockup
   (our mark + wordmark + ADMIN pill + Keycloak), so let width follow. */
.pf-v5-c-brand,
.pf-v6-c-brand {
  max-height: 34px;
  width: auto;
}

/* --- top-right: user menu ---------------------------------------------------
   Stock renders a bordered dropdown box and a grey stock avatar. Drop the box
   and let the name sit plainly on the masthead, per the agreed concept.
   Colour/border only — the toggle keeps its size, position and hit area. */
.pf-v5-c-masthead .pf-v5-c-menu-toggle,
.pf-v5-c-masthead .pf-v5-c-dropdown__toggle,
.pf-v6-c-masthead .pf-v6-c-menu-toggle,
.pf-v6-c-masthead .pf-v6-c-dropdown__toggle {
  background-color: transparent;
  border-color: transparent;
  box-shadow: none;
}

.pf-v5-c-masthead .pf-v5-c-menu-toggle:hover,
.pf-v5-c-masthead .pf-v5-c-dropdown__toggle:hover,
.pf-v6-c-masthead .pf-v6-c-menu-toggle:hover,
.pf-v6-c-masthead .pf-v6-c-dropdown__toggle:hover {
  background-color: rgba(255, 255, 255, .07);
  border-color: transparent;
}

/* Replace the stock grey person glyph with an indigo gradient disc. `content` on
   an <img> swaps the rendered image without touching the element's box. */
.pf-v5-c-masthead .pf-v5-c-avatar,
.pf-v6-c-masthead .pf-v6-c-avatar {
  border: 0;
  border-radius: 50%;
  content: url("data:image/svg+xml,%3Csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 40 40'%3E%3Cdefs%3E%3ClinearGradient id='g' x1='0' y1='0' x2='1' y2='1'%3E%3Cstop offset='0' stop-color='%235b57e6'/%3E%3Cstop offset='1' stop-color='%238b5cf6'/%3E%3C/linearGradient%3E%3C/defs%3E%3Ccircle cx='20' cy='20' r='20' fill='url(%23g)'/%3E%3C/svg%3E");
}

/* --- left navigation --- */
.pf-v5-c-page__sidebar,
.pf-v6-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: var(--cl-sidebar);
  --pf-v6-c-page__sidebar--BackgroundColor: var(--cl-sidebar);
  background-color: var(--cl-sidebar);
}

/* Active nav item: indigo wash + the amber rail from the login page's brand panel.
   Uses box-shadow rather than border-left so nothing shifts by a pixel. */
.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__item > .pf-v5-c-nav__link[aria-current="page"],
.pf-v6-c-nav__link.pf-m-current,
.pf-v6-c-nav__item > .pf-v6-c-nav__link[aria-current="page"] {
  background-color: rgba(91, 87, 230, .24);
  box-shadow: inset 2px 0 0 var(--cl-amber);
}

/* --- keyboard focus: keep it visible against the darker chrome --- */
.pf-v5-c-masthead :focus-visible,
.pf-v5-c-page__sidebar :focus-visible,
.pf-v6-c-masthead :focus-visible,
.pf-v6-c-page__sidebar :focus-visible {
  outline: 2px solid var(--cl-amber);
  outline-offset: 1px;
}