/* ============================================================
   Equiva / cyberFolks — motyw panelu administracyjnego (Admin Console)
   ------------------------------------------------------------
   Keycloak 26.6.4 → Admin Console = PatternFly 5 (5.4.x).
   Branding spójny z account/login: paleta amber + logo cyberFolks.

   WAŻNE — kolejność ładowania: bazowy arkusz PatternFly definiuje te same
   zmienne na :root i ładuje się PO custom.css, więc bez `!important` na
   deklaracjach zmiennych nadpisałby je z powrotem. Dlatego custom properties
   deklarujemy z `!important`.

   UWAGA: dokładne nazwy klas PatternFly mogą się różnić między wydaniami.
   Po wdrożeniu sprawdź wizualnie (DevTools → inspect) i ewentualnie dostrój.
   ============================================================ */

:root {
  --cf-primary: #facc15;          /* żółty główny (amber-400) */
  --cf-primary-hover: #eab308;    /* hover (amber-500) */
  --cf-primary-active: #ca8a04;   /* active (amber-600) */
  --cf-accent-light: #fef3c7;     /* jasny żółty */
  --cf-dark: #1f1f1f;             /* ciemny tekst na żółtym */
  --cf-bg: #fffbeb;               /* pastelowe żółte tło (amber-50) */
  --cf-card-bg: #ffffff;
  --cf-text: #2b2b2b;
  --cf-border: #fde68a;           /* amber-200 */
  --cf-error: #d92d20;
}

/* ---------- Globalne i komponentowe zmienne PatternFly 5 (z !important) ---------- */
:root,
.pf-v5-theme-dark {
  --pf-v5-global--primary-color--100: var(--cf-primary-active) !important;
  --pf-v5-global--primary-color--200: var(--cf-primary-hover) !important;
  --pf-v5-global--link--Color: var(--cf-primary-active) !important;
  --pf-v5-global--link--Color--hover: var(--cf-dark) !important;
  --pf-v5-global--active-color--100: var(--cf-primary) !important;
  --pf-v5-global--active-color--200: var(--cf-primary-hover) !important;
  --pf-v5-global--BackgroundColor--100: var(--cf-card-bg) !important;
  --pf-v5-global--danger-color--100: var(--cf-error) !important;

  /* Przyciski */
  --pf-v5-c-button--m-primary--BackgroundColor: var(--cf-primary) !important;
  --pf-v5-c-button--m-primary--Color: var(--cf-dark) !important;
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--cf-primary-hover) !important;
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--cf-primary-hover) !important;
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--cf-primary-active) !important;
  --pf-v5-c-button--m-secondary--Color: var(--cf-primary-active) !important;
  --pf-v5-c-button--m-secondary--BorderColor: var(--cf-primary-active) !important;

  /* Nawigacja boczna (lewy sidebar) — aktywna pozycja, hover, wskaźnik */
  --pf-v5-c-nav__link--m-current--Color: var(--cf-dark) !important;
  --pf-v5-c-nav__link--m-current--BackgroundColor: var(--cf-accent-light) !important;
  --pf-v5-c-nav__link--hover--BackgroundColor: var(--cf-accent-light) !important;
  --pf-v5-c-nav__link--focus--BackgroundColor: var(--cf-accent-light) !important;
  /* Wskaźnik aktywnej pozycji w pionowym nav PF5 renderuje ::after */
  --pf-v5-c-nav__link--after--BorderColor: transparent !important;
  --pf-v5-c-nav__link--m-current--after--BorderColor: var(--cf-primary) !important;

  /* KC admin renderuje masthead i sidebar w wariancie DARK (pf-m-dark) —
     stąd czarne tło. Rozjaśniamy je do bieli (spójnie z login/account). */
  --pf-v5-c-masthead--BackgroundColor: var(--cf-card-bg) !important;
  --pf-v5-c-page__sidebar--BackgroundColor: var(--cf-card-bg) !important;
  --pf-v5-c-page__sidebar--m-dark--BackgroundColor: var(--cf-card-bg) !important;

  /* Po rozjaśnieniu tła nav (w dark ma jasny tekst) musi mieć ciemny tekst */
  --pf-v5-c-nav__link--Color: var(--cf-text) !important;
  --pf-v5-c-nav__link--hover--Color: var(--cf-dark) !important;
  --pf-v5-c-nav__link--focus--Color: var(--cf-dark) !important;
  --pf-v5-c-nav__section-title--Color: var(--cf-text) !important;
  --pf-v5-c-nav__toggle--Color: var(--cf-text) !important;

  /* Zakładki (taby) */
  --pf-v5-c-tabs__link--after--BorderColor: var(--cf-primary) !important;
  --pf-v5-c-tabs__item--m-current__link--after--BorderColor: var(--cf-primary) !important;
}

/* ---------- Masthead / pasek górny z logo (domyślnie DARK w KC) ---------- */
.pf-v5-c-masthead,
.pf-v5-c-masthead.pf-m-dark,
.pf-v5-c-masthead__main,
.pf-v5-c-page__header,
.pf-v5-c-page__header-tools {
  background-color: var(--cf-card-bg) !important;
  color: var(--cf-dark) !important;
  border-bottom: 3px solid var(--cf-primary) !important;
}

/* Ikony i tekst w masthead — ciemne dla kontrastu na jasnym tle */
.pf-v5-c-masthead a,
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
.pf-v5-c-masthead__toggle .pf-v5-c-button,
.pf-v5-c-masthead svg,
.pf-v5-c-page__header-tools svg,
.pf-v5-c-page__header-tools a {
  color: var(--cf-dark) !important;
  fill: var(--cf-dark) !important;
}

/* Logo cyberFolks: dostarczane przez logo/logoUrl w theme.properties
   (admin-ui renderuje <img> w brandzie). Tu tylko rozmiar; NIE ukrywamy <img>,
   żeby nie zgasić działającego logo. Na białym masthead logo jest widoczne. */
.pf-v5-c-masthead__brand img,
.pf-v5-c-page__header-brand img,
.pf-v5-c-brand {
  max-height: 44px !important;
  width: auto !important;
}

/* ---------- Tło głównego obszaru ---------- */
.pf-v5-c-page__main,
.pf-v5-c-page__main-section.pf-m-light {
  background-color: var(--cf-bg) !important;
}

/* ---------- Lewy sidebar (domyślnie DARK w KC) → biały ---------- */
.pf-v5-c-page__sidebar,
.pf-v5-c-page__sidebar.pf-m-dark,
.pf-v5-c-page__sidebar-body {
  background-color: var(--cf-card-bg) !important;
  border-right: 1px solid var(--cf-border);
}

/* Nav w wariancie dark ma jasny tekst — na białym tle musi być ciemny */
.pf-v5-c-nav,
.pf-v5-c-nav.pf-m-dark,
.pf-v5-c-nav__link,
.pf-v5-c-nav__section-title,
.pf-v5-c-nav__toggle {
  color: var(--cf-text) !important;
}

.pf-v5-c-nav__link:hover,
.pf-v5-c-nav__link:focus {
  background-color: var(--cf-accent-light) !important;
  color: var(--cf-dark) !important;
}

/* ---------- Nawigacja boczna — aktywna pozycja ---------- */
.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__item.pf-m-current > .pf-v5-c-nav__link {
  border-left: 3px solid var(--cf-primary) !important;
  background-color: var(--cf-accent-light) !important;
  color: var(--cf-dark) !important;
  font-weight: 600;
}

/* ---------- Zakładki (taby) — aktywne podkreślenie ---------- */
.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link::after,
.pf-v5-c-tabs__link::after {
  --pf-v5-c-tabs__link--after--BorderColor: var(--cf-primary);
}

/* ---------- Karty / panele ---------- */
.pf-v5-c-card,
.pf-v5-c-panel {
  border-top: 4px solid var(--cf-primary);
  border-radius: 10px;
}

/* ---------- Przycisk główny ---------- */
.pf-v5-c-button.pf-m-primary {
  background-color: var(--cf-primary) !important;
  color: var(--cf-dark) !important;
  font-weight: 700;
  border-radius: 6px;
}

.pf-v5-c-button.pf-m-primary:hover {
  background-color: var(--cf-primary-hover) !important;
  color: var(--cf-dark) !important;
}

.pf-v5-c-button.pf-m-primary:active,
.pf-v5-c-button.pf-m-primary:focus {
  background-color: var(--cf-primary-active) !important;
  color: #ffffff !important;
}

/* ---------- Przycisk drugorzędny ---------- */
.pf-v5-c-button.pf-m-secondary {
  border-color: var(--cf-primary-active) !important;
  color: var(--cf-primary-active) !important;
  background: transparent !important;
  border-radius: 6px;
}

.pf-v5-c-button.pf-m-secondary:hover {
  background: var(--cf-accent-light) !important;
  color: var(--cf-dark) !important;
}

/* ---------- Linki ---------- */
a,
.pf-v5-c-button.pf-m-link {
  color: var(--cf-primary-active);
}

a:hover {
  color: var(--cf-dark);
}

/* ---------- Przełączniki (switch) ---------- */
.pf-v5-c-switch__input:checked ~ .pf-v5-c-switch__toggle {
  background-color: var(--cf-primary-active) !important;
}

/* ---------- Pola formularza (focus) ---------- */
.pf-v5-c-form-control:focus,
.pf-v5-c-form-control:focus-within,
input:focus {
  border-color: var(--cf-primary) !important;
  box-shadow: 0 0 0 3px rgba(250, 204, 21, 0.25) !important;
}

/* ============================================================
   Logo bundlowane w resources/img/cyberfolks.jpg (jak w login/account).
   Aby zmienić logo: podmień plik i odśwież pod, by wyzerować cache.
   ============================================================ */