/*
 * Aize V4 account-console overlay.
 *
 * The Keycloak v3 account console is a React/PatternFly app. We don't
 * fork it — instead we override Patternfly's CSS variables so the
 * existing components recolor to match auth.aize.dev's login surface.
 * Scope: every selector targets either :root (variable inheritance),
 * the page body, or PatternFly utility classes already present in the
 * rendered DOM.
 */

:root,
:root.pf-v5-theme-dark,
:root[data-theme="dark"] {
  /* Brand */
  --aize-green-600: #16a34a;
  --aize-green-700: #15803d;

  /* Surface */
  --aize-bg-page:    #171717;
  --aize-bg-card:    #212121;
  --aize-bg-input:   #2f2f2f;
  --aize-border:     rgba(255, 255, 255, 0.10);
  --aize-border-strong: rgba(255, 255, 255, 0.18);
  --aize-text:       #ececec;
  --aize-text-muted: #afafaf;

  /* PatternFly v5 token overrides — these power most of the account UI. */
  --pf-v5-global--BackgroundColor--100: var(--aize-bg-page);
  --pf-v5-global--BackgroundColor--150: var(--aize-bg-page);
  --pf-v5-global--BackgroundColor--200: var(--aize-bg-card);
  --pf-v5-global--BackgroundColor--dark-100: var(--aize-bg-page);
  --pf-v5-global--BackgroundColor--dark-200: var(--aize-bg-card);
  --pf-v5-global--BackgroundColor--dark-300: var(--aize-bg-input);

  --pf-v5-global--Color--100: var(--aize-text);
  --pf-v5-global--Color--200: var(--aize-text-muted);
  --pf-v5-global--Color--light-100: var(--aize-text);
  --pf-v5-global--Color--light-200: var(--aize-text-muted);

  --pf-v5-global--BorderColor--100: var(--aize-border);
  --pf-v5-global--BorderColor--200: var(--aize-border-strong);
  --pf-v5-global--BorderColor--300: var(--aize-border);

  --pf-v5-global--primary-color--100: var(--aize-green-600);
  --pf-v5-global--primary-color--200: var(--aize-green-700);
  --pf-v5-global--link--Color: var(--aize-green-600);
  --pf-v5-global--link--Color--hover: var(--aize-green-700);
  --pf-v5-global--active-color--100: var(--aize-green-600);

  /* Same tokens with the older v4 prefix, in case any component is on
     the legacy variable scheme. */
  --pf-global--BackgroundColor--100: var(--aize-bg-page);
  --pf-global--BackgroundColor--200: var(--aize-bg-card);
  --pf-global--BackgroundColor--dark-100: var(--aize-bg-page);
  --pf-global--BackgroundColor--dark-200: var(--aize-bg-card);
  --pf-global--Color--100: var(--aize-text);
  --pf-global--Color--200: var(--aize-text-muted);
  --pf-global--BorderColor--100: var(--aize-border);
  --pf-global--primary-color--100: var(--aize-green-600);
  --pf-global--primary-color--200: var(--aize-green-700);
  --pf-global--link--Color: var(--aize-green-600);
  --pf-global--active-color--100: var(--aize-green-600);
}

/* ── Page chrome ──────────────────────────────────────────────────── */

html, body {
  background: var(--aize-bg-page) !important;
  color: var(--aize-text) !important;
}

/* The masthead / brand bar — KC v3 has a top bar that defaults to
   PatternFly black. Force it to our card surface so it doesn't read
   as a separate component. */
.pf-v5-c-masthead,
.pf-c-page__header,
header[role="banner"] {
  background: var(--aize-bg-card) !important;
  border-bottom: 1px solid var(--aize-border) !important;
  color: var(--aize-text) !important;
}
/*
 * Replace the bundled Keycloak wordmark with the Aize hexagon. The v3
 * account console renders a hardcoded <img alt="Logo"> at this slot,
 * and Patternfly does not expose a token for the brand. CSS `content:`
 * swap is the smallest-blast-radius override: zero JS, zero React fork.
 */
.pf-v5-c-masthead__brand img,
.pf-v5-c-masthead__brand a img,
.pf-c-page__header-brand img,
.pf-c-page__header-brand-link img,
header[role="banner"] img[alt*="ogo" i],
[data-testid="logo"] img,
img[alt="Keycloak"],
img[alt="logo"],
img[alt="Logo"] {
  content: url('../img/aize-logo.png') !important;
  height: 36px !important;
  width: auto !important;
  max-height: 36px !important;
  max-width: 140px !important;
  object-fit: contain !important;
  filter: none !important;
}

/* Hide any sibling text node that says "KEYCLOAK" — Patternfly v5
   sometimes renders the wordmark as text adjacent to the icon. */
.pf-v5-c-masthead__brand,
.pf-c-page__header-brand {
  font-size: 0 !important;
}
.pf-v5-c-masthead__brand img,
.pf-c-page__header-brand img {
  font-size: initial;
}

/* Sidebar nav */
.pf-v5-c-page__sidebar,
.pf-c-page__sidebar {
  background: var(--aize-bg-card) !important;
  border-right: 1px solid var(--aize-border) !important;
}
.pf-v5-c-nav__link,
.pf-c-nav__link {
  color: var(--aize-text-muted) !important;
}
.pf-v5-c-nav__link:hover,
.pf-c-nav__link:hover {
  color: var(--aize-text) !important;
  background: rgba(255, 255, 255, 0.03) !important;
}
.pf-m-current > .pf-v5-c-nav__link,
.pf-m-current > .pf-c-nav__link,
.pf-v5-c-nav__link.pf-m-current,
.pf-c-nav__link.pf-m-current {
  color: var(--aize-green-600) !important;
  background: rgba(22, 163, 74, 0.10) !important;
  border-left: 3px solid var(--aize-green-600) !important;
}

/* Main content area + cards */
.pf-v5-c-page__main,
.pf-c-page__main {
  background: var(--aize-bg-page) !important;
}
.pf-v5-c-card,
.pf-c-card,
.pf-v5-c-content,
.pf-c-content {
  background: var(--aize-bg-card) !important;
  color: var(--aize-text) !important;
  border: 1px solid var(--aize-border) !important;
}
.pf-v5-c-card__title,
.pf-c-card__title,
.pf-v5-c-card__header,
.pf-c-card__header {
  color: var(--aize-text) !important;
  border-bottom: 1px solid var(--aize-border) !important;
}

/* Headings */
h1, h2, h3, h4, h5, h6,
.pf-v5-c-title,
.pf-c-title {
  color: var(--aize-text) !important;
}

/* ── Form controls ────────────────────────────────────────────────── */

.pf-v5-c-form-control,
.pf-c-form-control,
input.pf-v5-c-form-control,
textarea.pf-v5-c-form-control,
select.pf-v5-c-form-control {
  background: var(--aize-bg-input) !important;
  color: var(--aize-text) !important;
  border: 1px solid var(--aize-border) !important;
  border-radius: 8px !important;
}
.pf-v5-c-form-control:focus,
.pf-c-form-control:focus,
.pf-v5-c-form-control:hover,
.pf-c-form-control:hover {
  border-color: var(--aize-green-600) !important;
  box-shadow: 0 0 0 3px rgba(22, 163, 74, 0.30) !important;
  outline: none !important;
}
.pf-v5-c-form-control::placeholder {
  color: var(--aize-text-muted) !important;
}
.pf-v5-c-form__label,
.pf-c-form__label {
  color: var(--aize-text) !important;
  font-weight: 500 !important;
}

/* ── Buttons ──────────────────────────────────────────────────────── */

.pf-v5-c-button.pf-m-primary,
.pf-c-button.pf-m-primary {
  background: var(--aize-green-600) !important;
  color: #fff !important;
  border: none !important;
  border-radius: 9999px !important;
}
.pf-v5-c-button.pf-m-primary:hover,
.pf-c-button.pf-m-primary:hover {
  background: var(--aize-green-700) !important;
}
.pf-v5-c-button.pf-m-secondary,
.pf-c-button.pf-m-secondary,
.pf-v5-c-button.pf-m-tertiary,
.pf-c-button.pf-m-tertiary,
.pf-v5-c-button.pf-m-link,
.pf-c-button.pf-m-link {
  color: var(--aize-text) !important;
  background: transparent !important;
}
.pf-v5-c-button.pf-m-secondary,
.pf-c-button.pf-m-secondary {
  border: 1px solid var(--aize-border) !important;
  border-radius: 9999px !important;
}
.pf-v5-c-button.pf-m-secondary:hover,
.pf-c-button.pf-m-secondary:hover {
  border-color: var(--aize-green-600) !important;
  color: var(--aize-green-600) !important;
}
.pf-v5-c-button.pf-m-link,
.pf-c-button.pf-m-link {
  color: var(--aize-green-600) !important;
}

/* ── Tables ───────────────────────────────────────────────────────── */

.pf-v5-c-table,
.pf-c-table,
.pf-v5-c-table tbody,
.pf-v5-c-table thead {
  background: transparent !important;
  color: var(--aize-text) !important;
}
.pf-v5-c-table tr,
.pf-c-table tr {
  border-color: var(--aize-border) !important;
}
.pf-v5-c-table th {
  color: var(--aize-text-muted) !important;
  font-weight: 600 !important;
}

/* ── Dropdown menus ───────────────────────────────────────────────── */

.pf-v5-c-menu,
.pf-c-menu,
.pf-v5-c-dropdown__menu,
.pf-c-dropdown__menu {
  background: var(--aize-bg-card) !important;
  border: 1px solid var(--aize-border) !important;
  border-radius: 12px !important;
}
.pf-v5-c-menu__item,
.pf-c-menu__item,
.pf-v5-c-dropdown__menu-item,
.pf-c-dropdown__menu-item {
  color: var(--aize-text) !important;
}
.pf-v5-c-menu__item:hover,
.pf-c-menu__item:hover {
  background: var(--aize-bg-input) !important;
}

/* ── Alerts ───────────────────────────────────────────────────────── */

.pf-v5-c-alert,
.pf-c-alert {
  border-radius: 10px !important;
  border: 1px solid var(--aize-border) !important;
}
.pf-v5-c-alert.pf-m-success { background: rgba(22, 163, 74, 0.10) !important; }
.pf-v5-c-alert.pf-m-danger  { background: rgba(239, 68, 68, 0.10) !important; }
.pf-v5-c-alert.pf-m-warning { background: rgba(245, 158, 11, 0.10) !important; }
.pf-v5-c-alert.pf-m-info    { background: rgba(96, 165, 250, 0.10) !important; }