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

/* SportOS 360 account console — green #54B052, black #020302 */

:root,
html.pf-v5-theme-dark,
.pf-v5-theme-dark {
  --sportos-green: #54B052;
  --sportos-green-hover: #7EC77C;
  --sportos-black: #020302;
  --sportos-footer-bg: #020302;
  --sportos-paper: #f4f4f4;
  --sportos-line: #d8d8d8;
  --pf-v5-global--primary-color--100: #54B052;
  --pf-v5-global--primary-color--200: #7EC77C;
  --pf-v5-global--primary-color--dark-100: #54B052;
  --pf-v5-global--link--Color: #54B052;
  --pf-v5-global--link--Color--hover: #7EC77C;
  --pf-v5-global--active-color--100: #54B052;
  --pf-v5-global--active-color--200: #7EC77C;
  --pf-v5-global--active-color--300: #54B052;
  --pf-v5-global--active-color--400: #54B052;
  --pf-v5-c-nav__link--after--BorderColor: #54B052;
  --pf-v5-c-nav__link--m-current--after--BorderColor: #54B052;
  --pf-v5-c-nav__link--hover--after--BorderColor: #7EC77C;
  --pf-v5-c-button--m-primary--BackgroundColor: #54B052;
  --pf-v5-c-button--m-primary--Color: #020302;
  --pf-v5-c-button--m-primary--hover--BackgroundColor: #7EC77C;
  --pf-v5-c-button--m-primary--focus--BackgroundColor: #7EC77C;
  --pf-v5-c-button--m-primary--active--BackgroundColor: #7EC77C;
  --pf-v5-c-spinner--Color: #54B052;
  --pf-v5-c-nav__link--m-current--BackgroundColor: rgba(84, 176, 82, 0.16);
  --pf-v5-c-nav__link--m-current--Color: #ffffff;
  --pf-v5-c-nav__link--hover--BackgroundColor: rgba(255, 255, 255, 0.08);
  --pf-v5-c-tabs__item--m-current__link--after--BorderColor: #54B052;
  --pf-v5-c-tabs__link--after--BorderColor--hover: #54B052;
  --pf-v5-c-alert--m-info__icon--Color: #54B052;
  --pf-v5-c-label--m-blue--BackgroundColor: rgba(84, 176, 82, 0.12);
  --pf-v5-c-label--m-blue--Color: #54B052;
  --pf-t--global--color--brand--default: #54B052;
  --pf-t--global--color--brand--hover: #7EC77C;
  --pf-t--global--color--brand--clicked: #7EC77C;
  --pf-t--global--text--color--link--default: #54B052;
  --pf-t--global--text--color--link--hover: #7EC77C;
  --pf-v6-c-button--m-primary--BackgroundColor: #54B052;
  --pf-v6-c-button--m-primary--Color: #020302;
  --pf-v6-c-button--m-primary--hover--BackgroundColor: #7EC77C;
  --pf-v6-c-spinner--Color: #54B052;
}

html,
body,
#app {
  font-family: "Inter", sans-serif;
  height: auto !important;
  min-height: 100%;
}

body {
  margin: 0;
  background: var(--sportos-paper);
  display: flex;
  flex-direction: column;
  min-height: 100vh;
}

#app {
  flex: 1 1 auto;
  display: flex;
  flex-direction: column;
}

.pf-v5-c-page,
.pf-v6-c-page {
  flex: 1 1 auto;
  --pf-v5-c-page--BackgroundColor: var(--sportos-paper);
  --pf-v6-c-page--BackgroundColor: var(--sportos-paper);
  background-color: var(--sportos-paper);
}

.keycloak__loading-container {
  color: var(--sportos-black);
  background-color: #ffffff;
}

/* ----- Masthead ----- */
.pf-v5-c-masthead,
.pf-v6-c-masthead {
  --pf-v5-c-masthead--BackgroundColor: var(--sportos-black);
  --pf-v6-c-masthead--BackgroundColor: var(--sportos-black);
  background-color: var(--sportos-black);
  border-bottom: 3px solid var(--sportos-green);
  color: #ffffff;
}

.pf-v5-c-masthead .pf-v5-c-masthead__toggle,
.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain,
.pf-v5-c-masthead .pf-v5-c-menu-toggle,
.pf-v5-c-masthead .pf-v5-c-menu-toggle__toggle-icon,
.pf-v6-c-masthead .pf-v6-c-masthead__toggle,
.pf-v6-c-masthead .pf-v6-c-button.pf-m-plain,
.pf-v6-c-masthead .pf-v6-c-menu-toggle,
.pf-v6-c-masthead .pf-v6-c-menu-toggle__toggle-icon {
  color: #ffffff !important;
}

.pf-v5-c-masthead .pf-v5-c-button.pf-m-plain:hover,
.pf-v5-c-masthead .pf-v5-c-menu-toggle:hover,
.pf-v6-c-masthead .pf-v6-c-button.pf-m-plain:hover,
.pf-v6-c-masthead .pf-v6-c-menu-toggle:hover {
  background: rgba(255, 255, 255, 0.08);
}

.pf-v5-c-masthead .pf-v5-c-button.pf-m-link,
.pf-v5-c-masthead a,
.pf-v6-c-masthead .pf-v6-c-button.pf-m-link,
.pf-v6-c-masthead a {
  color: #ffffff !important;
}

.pf-v5-c-masthead__brand,
.pf-v5-c-masthead a.pf-v5-c-masthead__brand,
.pf-v6-c-masthead__brand,
.pf-v6-c-masthead a.pf-v6-c-masthead__brand {
  display: inline-flex;
  align-items: center;
  gap: 0.75rem;
  text-decoration: none;
}

.pf-v5-c-masthead .pf-v5-c-brand,
.pf-v5-c-masthead img.pf-v5-c-brand,
.pf-v5-c-masthead .keycloak__pageheader_brand,
.pf-v6-c-masthead .pf-v6-c-brand,
.pf-v6-c-masthead img.pf-v6-c-brand,
.pf-v6-c-masthead .keycloak__pageheader_brand {
  height: 42px !important;
  width: auto !important;
  max-height: 42px;
  object-fit: contain;
}

/* ----- Sidebar ----- */
.pf-v5-c-page__sidebar,
.pf-v5-c-page__sidebar-body,
.pf-v6-c-page__sidebar,
.pf-v6-c-page__sidebar-body {
  --pf-v5-c-page__sidebar--BackgroundColor: var(--sportos-footer-bg);
  --pf-v6-c-page__sidebar--BackgroundColor: var(--sportos-footer-bg);
  background-color: var(--sportos-footer-bg);
}

.pf-v5-c-nav,
.pf-v6-c-nav {
  --pf-v5-global--active-color--100: var(--sportos-green);
  --pf-v5-global--active-color--400: var(--sportos-green);
  --pf-v5-c-nav__link--after--BorderColor: var(--sportos-green);
  --pf-v5-c-nav__link--hover--after--BorderColor: var(--sportos-green);
  --pf-v5-c-nav__link--focus--after--BorderColor: var(--sportos-green);
  --pf-v5-c-nav__link--active--after--BorderColor: var(--sportos-green);
  --pf-v5-c-nav__link--m-current--after--BorderColor: var(--sportos-green);
  --pf-v5-c-nav__section__link--m-current--after--BorderColor: var(--sportos-green);
  --pf-v5-c-nav__subnav__link--m-current--after--BorderColor: var(--sportos-green);
  --pf-v5-c-nav__item--item__link--after--Top: 0;
  --pf-v5-c-nav__link--after--Top: 0;
}

.pf-v5-c-nav__link,
.pf-v6-c-nav__link {
  position: relative;
  color: #f2f2f2 !important;
  font-weight: 600;
}

.pf-v5-c-nav__link:hover,
.pf-v6-c-nav__link:hover {
  color: #ffffff !important;
}

.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__link[aria-current="page"],
.pf-v5-c-nav__item.pf-m-current .pf-v5-c-nav__link,
.pf-v6-c-nav__link.pf-m-current,
.pf-v6-c-nav__link[aria-current="page"],
.pf-v6-c-nav__item.pf-m-current .pf-v6-c-nav__link {
  color: #ffffff !important;
  background: rgba(84, 176, 82, 0.22) !important;
}

.pf-v5-c-nav .pf-v5-c-nav__link::after,
.pf-v5-c-nav .pf-v5-c-nav__link::before,
.pf-v6-c-nav .pf-v6-c-nav__link::after,
.pf-v6-c-nav .pf-v6-c-nav__link::before {
  inset: 0 auto 0 0 !important;
  top: 0 !important;
  right: auto !important;
  bottom: 0 !important;
  left: 0 !important;
  width: 0 !important;
  height: auto !important;
  transform: none !important;
  background: none !important;
  border: 0 solid var(--sportos-green) !important;
  border-inline-start-width: 0 !important;
  border-block-end-width: 0 !important;
}

.pf-v5-c-nav .pf-v5-c-nav__link.pf-m-current::after,
.pf-v5-c-nav .pf-v5-c-nav__link.pf-m-current:hover::after,
.pf-v5-c-nav .pf-v5-c-nav__link[aria-current="page"]::after,
.pf-v5-c-nav .pf-v5-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-v5-c-nav__link::after,
.pf-v6-c-nav .pf-v6-c-nav__link.pf-m-current::after,
.pf-v6-c-nav .pf-v6-c-nav__link[aria-current="page"]::after,
.pf-v6-c-nav .pf-v6-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-v6-c-nav__link::after {
  width: 4px !important;
  background-color: var(--sportos-green) !important;
  border-color: var(--sportos-green) !important;
  border-inline-start-width: 4px !important;
}

.pf-v5-c-nav__section-title,
.pf-v6-c-nav__section-title {
  color: #bdbdbd;
}

/* ----- Buttons, links, tabs ----- */
.pf-v5-c-button.pf-m-primary,
.pf-v6-c-button.pf-m-primary {
  background-color: var(--sportos-green);
  border-color: var(--sportos-green);
  color: var(--sportos-black);
}

.pf-v5-c-button.pf-m-primary:hover,
.pf-v5-c-button.pf-m-primary:focus,
.pf-v6-c-button.pf-m-primary:hover,
.pf-v6-c-button.pf-m-primary:focus {
  background-color: var(--sportos-green-hover);
  border-color: var(--sportos-green-hover);
}

.pf-v5-c-button.pf-m-secondary,
.pf-v6-c-button.pf-m-secondary {
  --pf-v5-c-button--m-secondary--Color: var(--sportos-green);
  --pf-v5-c-button--m-secondary--after--BorderColor: var(--sportos-green);
  color: var(--sportos-green);
}

.pf-v5-c-button.pf-m-link,
.pf-v5-c-page__main a:not(.pf-v5-c-button),
.pf-v6-c-button.pf-m-link,
.pf-v6-c-page__main a:not(.pf-v6-c-button) {
  color: var(--sportos-green);
}

.pf-v5-c-button.pf-m-link:hover,
.pf-v5-c-page__main a:not(.pf-v5-c-button):hover,
.pf-v6-c-button.pf-m-link:hover,
.pf-v6-c-page__main a:not(.pf-v6-c-button):hover {
  color: var(--sportos-green-hover);
}

.pf-v5-c-popover__body a,
.pf-v6-c-popover__body a,
.pf-v5-c-tooltip__content a,
.pf-v6-c-tooltip__content a {
  color: var(--sportos-green);
  text-decoration: underline;
}

.pf-v5-c-tabs__link::after,
.pf-v6-c-tabs__link::after,
.pf-v5-c-tabs__item.pf-m-current .pf-v5-c-tabs__link::after,
.pf-v6-c-tabs__item.pf-m-current .pf-v6-c-tabs__link::after {
  border-color: var(--sportos-green);
}

/* ----- Forms: label above field ----- */
.pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group,
.pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group {
  display: flex;
  flex-direction: column;
  align-items: stretch;
  gap: 0.4rem;
  grid-template-columns: 1fr;
}

.pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-label,
.pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-label {
  text-align: left;
  padding-block-end: 0;
  max-width: 100%;
}

.pf-v5-c-form.pf-m-horizontal .pf-v5-c-form__group-control,
.pf-v6-c-form.pf-m-horizontal .pf-v6-c-form__group-control {
  max-width: 100%;
}

.pf-v5-c-form.pf-m-horizontal .pf-v5-c-radio,
.pf-v6-c-form.pf-m-horizontal .pf-v6-c-radio {
  align-items: flex-start;
}

/* ----- Forms ----- */
.pf-v5-c-form-control:focus,
.pf-v5-c-form-control:focus-within,
.pf-v5-c-text-input-group:focus-within,
.pf-v6-c-form-control:focus,
.pf-v6-c-form-control:focus-within,
.pf-v6-c-text-input-group:focus-within {
  --pf-v5-c-form-control--after--BorderBottomColor: var(--sportos-green);
  outline-color: var(--sportos-green);
}

.pf-v5-c-switch__input:checked + .pf-v5-c-switch__toggle,
.pf-v6-c-switch__input:checked + .pf-v6-c-switch__toggle {
  background-color: var(--sportos-green);
}

.pf-v5-c-check__input:checked,
.pf-v5-c-radio__input:checked,
.pf-v6-c-check__input:checked,
.pf-v6-c-radio__input:checked {
  accent-color: var(--sportos-green);
}

/* ----- Page titles, cards, lists ----- */
.pf-v5-c-title,
.pf-v5-c-page__main-section h1,
.pf-v6-c-title,
.pf-v6-c-page__main-section h1 {
  color: var(--sportos-black);
}

.pf-v5-c-card,
.pf-v6-c-card {
  border-top: 3px solid var(--sportos-green);
}

.pf-v5-c-alert.pf-m-info,
.pf-v6-c-alert.pf-m-info {
  --pf-v5-c-alert--m-info__icon--Color: var(--sportos-green);
}

.pf-v5-c-empty-state__icon,
.pf-v6-c-empty-state__icon {
  color: var(--sportos-green);
}

.pf-v5-c-menu__item.pf-m-selected,
.pf-v6-c-menu__item.pf-m-selected,
.pf-v5-c-menu__item:hover,
.pf-v6-c-menu__item:hover {
  --pf-v5-c-menu__item--BackgroundColor: rgba(84, 176, 82, 0.08);
}

.pf-v5-c-label.pf-m-blue,
.pf-v5-c-label.pf-m-outline.pf-m-blue,
.pf-v6-c-label.pf-m-blue,
.pf-v6-c-label.pf-m-outline.pf-m-blue {
  --pf-v5-c-label--Color: var(--sportos-green);
  color: var(--sportos-green);
}

:focus-visible {
  outline-color: var(--sportos-green);
}

/* ----- Footer (injected) ----- */
.sportos-footer {
  flex-shrink: 0;
  width: 100%;
  background-color: var(--sportos-footer-bg);
  border-top: 3px solid var(--sportos-green);
  color: #ccc;
  font-size: 0.8rem;
  padding: 1.1rem 2.5rem;
  box-sizing: border-box;
}

.sportos-footer__inner {
  max-width: 72rem;
  margin: 0 auto;
  display: flex;
  flex-direction: row;
  align-items: center;
  justify-content: space-between;
  gap: 2rem;
}

.sportos-footer__brand {
  display: flex;
  align-items: center;
  gap: 1rem;
  min-width: 0;
}

.sportos-footer__logo {
  display: block;
  width: 140px;
  height: 35px;
  background: url("../img/logo.svg") no-repeat center / contain;
  flex-shrink: 0;
}

.sportos-footer__info p {
  margin: 0.12rem 0;
  line-height: 1.4;
}

.sportos-footer__company {
  color: #fff;
  font-size: 0.88rem;
}

.sportos-footer__copyright {
  color: #c4c4c4;
}

.sportos-footer__info a,
.sportos-footer__info a:visited {
  color: #ffffff;
  text-decoration: none;
}

.sportos-footer__info a:hover {
  color: var(--sportos-green);
  text-decoration: underline;
}

.sportos-footer__links {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 0.4rem;
}

.sportos-footer__links a,
.sportos-footer__links a:visited {
  color: var(--sportos-green);
  text-decoration: none;
}

.sportos-footer__links a:hover {
  color: #ffffff;
  text-decoration: underline;
}

.sportos-footer__sep {
  color: #555;
}
@media (max-width: 768px) {
  .sportos-footer {
    padding: 1rem 1rem 1.35rem;
  }

  .sportos-footer__inner {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.9rem;
  }

  .sportos-footer__sep {
    display: none;
  }

  .sportos-footer__links {
    flex-direction: column;
    align-items: flex-start;
    gap: 0.35rem;
  }
}