/* ==========================================================================
   Sellision — konsola konta (account) i konsola administracyjna (admin)
   Keycloak 24–26 (keycloak.v3 / keycloak.v2), PatternFly 5.
   Ten sam plik jest używany w obu motywach.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Geologica:wght@300;400;500;600;700;800&display=swap");

/* ---------- tokeny marki + nadpisanie zmiennych globalnych PatternFly ---------- */
:root,
html.pf-v5-m-vf-font {
  --sl-black: #000000;
  --sl-ink: #131314;
  --sl-white: #ffffff;
  --sl-yellow: #ffdd00;
  --sl-yellow-hover: #f2cf00;
  --sl-yellow-active: #e6c400;
  --sl-indigo: #2e2ea6;
  --sl-indigo-deep: #24248a;
  --sl-violet: #8039b9;
  --sl-gray-900: #222222;
  --sl-gray-600: #555555;
  --sl-gray-400: #b5b5b5;
  --sl-gray-150: #f2f2f2;
  --sl-gray-100: #f6f6f6;
  --sl-font: "Geologica", system-ui, -apple-system, "Segoe UI", Roboto, sans-serif;

  --pf-v5-global--FontFamily--text: var(--sl-font);
  --pf-v5-global--FontFamily--heading: var(--sl-font);

  /* „primary” w PatternFly steruje linkami, fokusem i zaznaczeniami — czerń,
     żółty zostaje wyłącznie dla przycisków głównych (żółty tekst na bieli jest nieczytelny) */
  --pf-v5-global--primary-color--100: var(--sl-black);
  --pf-v5-global--primary-color--200: #333333;
  --pf-v5-global--primary-color--dark-100: var(--sl-black);
  --pf-v5-global--active-color--100: var(--sl-black);
  --pf-v5-global--link--Color: var(--sl-black);
  --pf-v5-global--link--Color--hover: var(--sl-black);
  --pf-v5-global--link--Color--dark: var(--sl-black);
  --pf-v5-global--link--Color--dark--hover: var(--sl-black);

  --pf-v5-global--BackgroundColor--200: var(--sl-gray-100);
  --pf-v5-global--BackgroundColor--light-300: var(--sl-gray-100);
  --pf-v5-global--BackgroundColor--dark-100: var(--sl-ink);

  --pf-v5-global--BorderRadius--sm: 3px;
}

html { color-scheme: light; }
body {
  font-family: var(--sl-font);
  color: var(--pf-v5-global--Color--100, #151515);
  -webkit-font-smoothing: antialiased;
}

/* ---------- nagłówki ---------- */
.pf-v5-c-title,
.pf-v5-c-content h1, .pf-v5-c-content h2, .pf-v5-c-content h3 {
  font-family: var(--sl-font);
  letter-spacing: .01em;
}
.pf-v5-c-title.pf-m-2xl, .pf-v5-c-title.pf-m-3xl, .pf-v5-c-title.pf-m-4xl,
.pf-v5-c-page__main-section h1.pf-v5-c-title {
  font-weight: 700;
}

/* ---------- linki ---------- */
.pf-v5-c-page__main a:not(.pf-v5-c-button):not(.pf-v5-c-nav__link):not(.pf-v5-c-tabs__link):not(.pf-v5-c-menu__item) {
  text-decoration-color: var(--sl-yellow);
  text-decoration-thickness: 2px;
  text-underline-offset: 3px;
}

/* ---------- przyciski ---------- */
.pf-v5-c-button {
  --pf-v5-c-button--BorderRadius: 3px;
  --pf-v5-c-button--after--BorderRadius: 3px;
  --pf-v5-c-button--FontWeight: 500;

  --pf-v5-c-button--m-primary--BackgroundColor: var(--sl-yellow);
  --pf-v5-c-button--m-primary--Color: var(--sl-black);
  --pf-v5-c-button--m-primary--hover--BackgroundColor: var(--sl-yellow-hover);
  --pf-v5-c-button--m-primary--hover--Color: var(--sl-black);
  --pf-v5-c-button--m-primary--focus--BackgroundColor: var(--sl-yellow-hover);
  --pf-v5-c-button--m-primary--focus--Color: var(--sl-black);
  --pf-v5-c-button--m-primary--active--BackgroundColor: var(--sl-yellow-active);
  --pf-v5-c-button--m-primary--active--Color: var(--sl-black);

  --pf-v5-c-button--m-secondary--BackgroundColor: transparent;
  --pf-v5-c-button--m-secondary--Color: var(--sl-black);
  --pf-v5-c-button--m-secondary--after--BorderColor: var(--sl-black);
  --pf-v5-c-button--m-secondary--hover--BackgroundColor: var(--sl-gray-100);
  --pf-v5-c-button--m-secondary--hover--Color: var(--sl-black);
  --pf-v5-c-button--m-secondary--hover--after--BorderColor: var(--sl-black);
  --pf-v5-c-button--m-secondary--focus--BackgroundColor: var(--sl-gray-100);
  --pf-v5-c-button--m-secondary--focus--Color: var(--sl-black);
  --pf-v5-c-button--m-secondary--focus--after--BorderColor: var(--sl-black);
  --pf-v5-c-button--m-secondary--active--BackgroundColor: var(--sl-gray-150);
  --pf-v5-c-button--m-secondary--active--Color: var(--sl-black);
  --pf-v5-c-button--m-secondary--active--after--BorderColor: var(--sl-black);

  --pf-v5-c-button--m-link--Color: var(--sl-black);
  --pf-v5-c-button--m-link--hover--Color: var(--sl-black);
  --pf-v5-c-button--m-link--focus--Color: var(--sl-black);
  --pf-v5-c-button--m-link--active--Color: var(--sl-black);
}
.pf-v5-c-button.pf-m-link:not(.pf-m-plain):hover {
  text-decoration-color: var(--sl-yellow);
  text-decoration-thickness: 2px;
}
.pf-v5-c-button.pf-m-primary:focus-visible,
.pf-v5-c-button.pf-m-secondary:focus-visible {
  outline: 2px solid var(--sl-black);
  outline-offset: 2px;
}

/* ---------- pasek górny (masthead) ---------- */
.pf-v5-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--sl-ink);
  --pf-v5-c-masthead--c-toolbar--BackgroundColor: transparent;
  background-image:
    radial-gradient(40% 180% at 100% 0%, rgba(46, 46, 166, .55) 0%, rgba(46, 46, 166, 0) 70%),
    radial-gradient(28% 160% at 82% 100%, rgba(128, 57, 185, .35) 0%, rgba(128, 57, 185, 0) 70%);
  box-shadow: inset 0 -1px 0 rgba(255, 255, 255, .08);
}
.pf-v5-c-masthead .pf-v5-c-brand,
.pf-v5-c-masthead__brand img,
.pf-v5-c-masthead img[src*="logo"] {
  height: 22px;
  width: auto;
  max-width: 140px;
}

/* ---------- menu boczne ---------- */
.pf-v5-c-page__sidebar {
  --pf-v5-c-page__sidebar--BackgroundColor: var(--sl-ink);
  --pf-v5-c-page__sidebar--m-light--BackgroundColor: var(--sl-ink);
  border-right: 1px solid rgba(255, 255, 255, .06);
}
/* zmienne ustawione dla obu wariantów nawigacji (ciemnego i pf-m-light),
   żeby menu było czytelne niezależnie od tego, który wariant renderuje konsola */
.pf-v5-c-page__sidebar .pf-v5-c-nav {
  --pf-v5-c-nav__link--Color: rgba(255, 255, 255, .78);
  --pf-v5-c-nav__link--hover--Color: var(--sl-white);
  --pf-v5-c-nav__link--BackgroundColor: transparent;
  --pf-v5-c-nav__link--hover--BackgroundColor: rgba(255, 255, 255, .06);
  --pf-v5-c-nav__link--m-current--Color: var(--sl-white);
  --pf-v5-c-nav__link--m-current--BackgroundColor: rgba(255, 255, 255, .08);
  --pf-v5-c-nav__item--m-current--not--m-expanded__link--BackgroundColor: rgba(255, 255, 255, .08);
  --pf-v5-c-nav__link--m-current--after--BorderColor: var(--sl-yellow);
  --pf-v5-c-nav__subnav__link--m-current--after--BorderColor: var(--sl-yellow);
  --pf-v5-c-nav__section__link--m-current--after--BorderColor: var(--sl-yellow);

  --pf-v5-c-nav--m-light__link--Color: rgba(255, 255, 255, .78);
  --pf-v5-c-nav--m-light__link--hover--Color: var(--sl-white);
  --pf-v5-c-nav--m-light__link--focus--Color: var(--sl-white);
  --pf-v5-c-nav--m-light__link--active--Color: var(--sl-white);
  --pf-v5-c-nav--m-light__link--m-current--Color: var(--sl-white);
  --pf-v5-c-nav--m-light__link--hover--BackgroundColor: rgba(255, 255, 255, .06);
  --pf-v5-c-nav--m-light__link--focus--BackgroundColor: rgba(255, 255, 255, .06);
  --pf-v5-c-nav--m-light__link--active--BackgroundColor: rgba(255, 255, 255, .08);
  --pf-v5-c-nav--m-light__link--m-current--BackgroundColor: rgba(255, 255, 255, .08);
  --pf-v5-c-nav--m-light__item--m-current--not--m-expanded__link--BackgroundColor: rgba(255, 255, 255, .08);
  --pf-v5-c-nav--m-light__link--m-current--after--BorderColor: var(--sl-yellow);
  --pf-v5-c-nav--m-light__subnav__link--m-current--after--BorderColor: var(--sl-yellow);
  --pf-v5-c-nav--m-light__item--before--BorderColor: rgba(255, 255, 255, .08);
  --pf-v5-c-nav--m-light__link--before--BorderColor: rgba(255, 255, 255, .08);
}
.pf-v5-c-page__sidebar .pf-v5-c-nav__section-title {
  color: rgba(255, 255, 255, .5);
  font-size: 11px;
  font-weight: 600;
  letter-spacing: .08em;
  text-transform: uppercase;
  border-bottom-color: rgba(255, 255, 255, .08);
}
.pf-v5-c-page__sidebar .pf-v5-c-nav__link { font-weight: 400; }
.pf-v5-c-page__sidebar .pf-v5-c-nav__link.pf-m-current { font-weight: 500; }
.pf-v5-c-page__sidebar .pf-v5-c-nav__toggle-icon,
.pf-v5-c-page__sidebar .pf-v5-c-nav__link .pf-v5-c-nav__toggle { color: inherit; }

/* ---------- treść ---------- */
.pf-v5-c-page__main-section {
  --pf-v5-c-page__main-section--BackgroundColor: var(--sl-gray-100);
  --pf-v5-c-page__main-section--m-light--BackgroundColor: var(--sl-white);
}
.pf-v5-c-card { border-radius: 6px; }

/* zakładki — aktywna z czarnym wskaźnikiem (żółty na bieli byłby nieczytelny) */
.pf-v5-c-tabs {
  --pf-v5-c-tabs__item--m-current__link--after--BorderColor: var(--sl-black);
}

/* pola formularzy */
.pf-v5-c-form-control {
  --pf-v5-c-form-control--hover--after--BorderBottomColor: var(--sl-black);
  --pf-v5-c-form-control--focus--after--BorderBottomColor: var(--sl-black);
}

/* przełączniki, checkboxy, radio */
.pf-v5-c-switch {
  --pf-v5-c-switch__input--checked__toggle--BackgroundColor: var(--sl-black);
  --pf-v5-c-switch__input--focus__toggle--OutlineColor: var(--sl-black);
}
.pf-v5-c-check__input, .pf-v5-c-radio__input { accent-color: var(--sl-black); }

/* etykiety / znaczniki w kolorze marki */
.pf-v5-c-label.pf-m-blue {
  --pf-v5-c-label--m-blue--BackgroundColor: #fff8cc;
  --pf-v5-c-label--m-blue__content--Color: var(--sl-black);
  --pf-v5-c-label--m-blue__icon--Color: var(--sl-black);
}

/* ekran ładowania (przed startem aplikacji React) */
.keycloak__loading-container { font-family: var(--sl-font); color: var(--sl-black); }
.keycloak__loading-container .pf-v5-c-spinner { --pf-v5-c-spinner--Color: var(--sl-black); }