/*
 * Quoterly brand for Keycloak's admin and account consoles (PatternFly 5).
 *
 * Loaded after the console's own CSS (theme.properties `styles`). It only re-points PatternFly's
 * design variables (colour, type, radius) at the brand, so every console screen follows without
 * touching its markup. Colours mirror @qb/styles tokens/color.css (petrol scale, copper accent);
 * they are literal because the consoles don't load our stylesheets.
 */
@import url('https://fonts.googleapis.com/css2?family=Inter:opsz,wght@14..32,400..600&family=Poppins:wght@500;600;700&display=swap');

:root {
  --qb-petrol-50: #f3f5f6;
  --qb-petrol-100: #e7ecec;
  --qb-petrol-200: #c4cfd1;
  --qb-petrol-300: #a0b2b5;
  --qb-petrol-400: #59797d;
  --qb-petrol-500: #123f45;
  --qb-petrol-600: #0e3237;
  --qb-petrol-700: #0c292d;
  --qb-petrol-800: #092023;
  --qb-petrol-900: #061618;
  --qb-copper: #d97845;
  --qb-copper-strong: #b85f31;

  --pf-v5-global--FontFamily--text: 'Inter', 'RedHatText', helvetica, arial, sans-serif;
  --pf-v5-global--FontFamily--heading: 'Poppins', 'RedHatDisplay', helvetica, arial, sans-serif;

  /* Primary actions, links, focus and selection: petrol, as in the app. */
  --pf-v5-global--primary-color--100: var(--qb-petrol-500);
  --pf-v5-global--primary-color--200: var(--qb-petrol-700);
  --pf-v5-global--primary-color--light-100: var(--qb-petrol-200);
  --pf-v5-global--primary-color--dark-100: var(--qb-petrol-500);
  --pf-v5-global--link--Color: var(--qb-petrol-500);
  --pf-v5-global--link--Color--hover: var(--qb-copper-strong);
  --pf-v5-global--link--Color--light: var(--qb-petrol-200);
  --pf-v5-global--link--Color--light--hover: #ffffff;
  /* The "you are here" marks (current nav item, active tab underline): copper, the brand accent. */
  --pf-v5-global--active-color--100: var(--qb-copper);
  --pf-v5-global--active-color--400: var(--qb-copper);

  --pf-v5-global--BorderRadius--sm: 6px;
  --pf-v5-global--BorderRadius--lg: 12px;
}

/* Header bar in deep petrol instead of near-black. */
.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--qb-petrol-800);
}

.pf-v5-c-masthead .pf-v5-c-brand,
.pf-v5-c-masthead__brand img {
  max-height: 32px;
}

/* Dark side navigation, when the console uses it, in the same petrol family. */
.pf-v5-c-page__sidebar:not(.pf-m-light) {
  --pf-v5-c-page__sidebar--BackgroundColor: var(--qb-petrol-900);
}

/* Hover and "current" rows in petrol tints rather than PatternFly's neutral grey. */
.pf-v5-c-page__sidebar:not(.pf-m-light) .pf-v5-c-nav {
  --pf-v5-c-nav__link--hover--BackgroundColor: var(--qb-petrol-700);
  --pf-v5-c-nav__link--focus--BackgroundColor: var(--qb-petrol-700);
  --pf-v5-c-nav__link--active--BackgroundColor: var(--qb-petrol-700);
  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--qb-petrol-600);
}

/* Primary buttons: petrol with a darker hover; focus ring in copper like the sign-in screens. */
.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--qb-petrol-500);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--qb-petrol-700);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--qb-petrol-700);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--qb-petrol-800);
}

:where(.pf-v5-c-button, .pf-v5-c-form-control, .pf-v5-c-menu-toggle):focus-visible {
  outline-color: var(--qb-copper);
}

/* Switches and checkboxes "on" in petrol. */
.pf-v5-c-switch {
  --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--qb-petrol-500);
}

input[type='checkbox'],
input[type='radio'] {
  accent-color: var(--qb-petrol-500);
}

/* Dark mode: lighter petrol so actions stay legible on dark surfaces. */
.pf-v5-theme-dark {
  --pf-v5-global--primary-color--100: var(--qb-petrol-300);
  --pf-v5-global--primary-color--200: var(--qb-petrol-200);
  --pf-v5-global--link--Color: var(--qb-petrol-200);
  --pf-v5-global--link--Color--hover: var(--qb-copper);
}

.pf-v5-theme-dark .pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--qb-petrol-900);
}

.pf-v5-theme-dark .pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--qb-petrol-400);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--qb-petrol-300);
  --pf-v5-c-button--m-primary--Color: #ffffff;
}

.pf-v5-theme-dark .pf-v5-c-switch {
  --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--qb-petrol-400);
}

/* Welcome page (server root, before the first admin exists): petrol backdrop like the boot splash. */
.pf-v5-c-background-image {
  background: radial-gradient(90% 90% at 50% 40%, var(--qb-petrol-600), var(--qb-petrol-900) 80%);
}

.pf-v5-c-background-image::before {
  background-image: none !important;
}