/*
 * rNose account-console theme (PatternFly v5 overrides).
 * Matches the rNose login theme: ink-navy masthead, warm-cream page, near-white
 * cards, a single champagne-gold accent, periwinkle held in reserve.
 * Strategy: override PatternFly v5 GLOBAL design tokens (these cascade into almost
 * every component automatically), then a handful of component-level tweaks for the
 * pieces the globals don't fully reach (masthead, nav current-item, buttons, focus).
 */

:root {
  /* ---- rNose palette ---- */
  --rn-ink: #16243F;
  --rn-ink-700: #1E3157;
  --rn-cream: #F4EFE4;
  --rn-card: #FBF8F1;
  --rn-gold: #C2A15A;
  --rn-gold-600: #A9884A;
  --rn-periwinkle: #88AEE0;
  --rn-border: rgba(22, 36, 63, 0.12);

  /* ---- PatternFly v5 global tokens ---- */
  --pf-v5-global--primary-color--100: var(--rn-ink);
  --pf-v5-global--primary-color--200: var(--rn-ink-700);
  --pf-v5-global--secondary-color--100: var(--rn-ink);
  --pf-v5-global--active-color--100: var(--rn-gold);
  --pf-v5-global--active-color--200: var(--rn-gold);

  --pf-v5-global--link--Color: var(--rn-ink);
  --pf-v5-global--link--Color--hover: var(--rn-gold);
  --pf-v5-global--link--Color--visited: var(--rn-ink);

  --pf-v5-global--BackgroundColor--100: var(--rn-cream);
  --pf-v5-global--BackgroundColor--150: var(--rn-card);
  --pf-v5-global--BackgroundColor--200: var(--rn-card);
  --pf-v5-global--BackgroundColor--light-100: var(--rn-card);
  --pf-v5-global--BackgroundColor--light-200: var(--rn-cream);

  --pf-v5-global--Color--100: var(--rn-ink);
  --pf-v5-global--Color--200: rgba(22, 36, 63, 0.65);
  --pf-v5-global--BorderColor--100: var(--rn-border);
  --pf-v5-global--BorderColor--200: var(--rn-border);

  --pf-v5-global--FontFamily--text: -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, Helvetica, Arial, sans-serif;
  --pf-v5-global--FontFamily--heading: var(--pf-v5-global--FontFamily--text);
  --pf-v5-global--FontFamily--redhatfont: var(--pf-v5-global--FontFamily--text);
  --pf-v5-global--FontFamily--redhatVF: var(--pf-v5-global--FontFamily--text);

  /* focus ring → gold */
  --pf-v5-global--primary-color--light-100: var(--rn-gold);
}

/* Page surface: warm cream */
body,
.pf-v5-c-page,
.pf-v5-c-page__main {
  background-color: var(--rn-cream);
}
.pf-v5-c-page {
  --pf-v5-c-page--BackgroundColor: var(--rn-cream);
}
.pf-v5-c-page__main-section {
  --pf-v5-c-page__main-section--BackgroundColor: transparent;
  background-color: transparent;
}

/* ---- Masthead: ink navy with cream text + gold hairline (mirrors login header) ---- */
.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--rn-ink);
  background-color: var(--rn-ink);
  color: var(--rn-cream);
  border-bottom: 2px solid var(--rn-gold);
}
.pf-v5-c-masthead a,
.pf-v5-c-masthead .pf-v5-c-button,
.pf-v5-c-masthead .pf-v5-c-dropdown__toggle,
.pf-v5-c-masthead__main,
.pf-v5-c-masthead__content {
  color: var(--rn-cream);
}
.pf-v5-c-masthead a:hover,
.pf-v5-c-masthead .pf-v5-c-button:hover {
  color: var(--rn-gold);
}
/* brand logo sizing in masthead */
.pf-v5-c-brand,
.pf-v5-c-masthead__brand img,
img.pf-v5-c-brand {
  height: 2.25rem;
  width: auto;
}

/* ---- Cards: near-white cream, soft rounded, subtle ring ---- */
.pf-v5-c-card {
  --pf-v5-c-card--BackgroundColor: var(--rn-card);
  background-color: var(--rn-card);
  border: 1px solid var(--rn-border);
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(22, 36, 63, 0.04);
}

/* ---- Left nav: gold current-item indicator, ink text ---- */
.pf-v5-c-nav {
  --pf-v5-c-nav__link--m-current--Color: var(--rn-ink);
  --pf-v5-c-nav__link--hover--Color: var(--rn-gold);
  --pf-v5-c-nav__link--focus--Color: var(--rn-gold);
}
.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link {
  color: var(--rn-ink);
  font-weight: 600;
}
.pf-v5-c-nav__link.pf-m-current::before,
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link::before {
  border-inline-start-color: var(--rn-gold) !important;
}

/* ---- Buttons ---- */
.pf-v5-c-button.pf-m-primary {
  --pf-v5-c-button--m-primary--BackgroundColor: var(--rn-ink);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--rn-ink-700);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--rn-ink-700);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--rn-ink-700);
  color: var(--rn-cream);
}
.pf-v5-c-button.pf-m-primary:focus,
.pf-v5-c-button.pf-m-primary:focus-visible {
  box-shadow: 0 0 0 3px rgba(194, 161, 90, 0.40);
}
.pf-v5-c-button.pf-m-secondary {
  --pf-v5-c-button--m-secondary--Color: var(--rn-ink);
  --pf-v5-c-button--m-secondary--BorderColor: var(--rn-ink);
  --pf-v5-c-button--m-secondary--hover--Color: var(--rn-ink);
  --pf-v5-c-button--m-secondary--hover--BorderColor: var(--rn-gold);
  --pf-v5-c-button--m-secondary--active--BorderColor: var(--rn-gold);
}
.pf-v5-c-button.pf-m-link {
  --pf-v5-c-button--m-link--Color: var(--rn-ink);
  --pf-v5-c-button--m-link--hover--Color: var(--rn-gold);
}

/* ---- Form controls: gold focus ---- */
.pf-v5-c-form-control:focus,
.pf-v5-c-form-control:focus-within,
.pf-v5-c-form-control input:focus {
  --pf-v5-c-form-control--focus--BorderBottomColor: var(--rn-gold);
  outline-color: var(--rn-gold);
  box-shadow: 0 1px 0 0 var(--rn-gold);
}

/* ---- Tabs / accents ---- */
.pf-v5-c-tabs__link:hover { color: var(--rn-gold); }
.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link::after {
  --pf-v5-c-tabs__link--after--BorderColor: var(--rn-gold);
  border-color: var(--rn-gold);
}

/* switches / active indicators pick up gold */
.pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle {
  --pf-v5-c-switch--checked__toggle--BackgroundColor: var(--rn-gold);
  background-color: var(--rn-gold);
}

/* headings */
h1, h2, .pf-v5-c-title { color: var(--rn-ink); }

/* the SPA loading splash (index.ftl inline) → cream, on-brand */
.keycloak__loading-container { background-color: var(--rn-cream) !important; color: var(--rn-ink) !important; }
.pf-v5-c-spinner { --pf-v5-c-spinner--Color: var(--rn-gold); color: var(--rn-gold); }