/* ----------------------------- */
/* LIGHT MODE (Default)          */
/* ----------------------------- */

:root {
	--pf-v5-global--active-color--400: #0089c1; /*#73bcf7;*/
	--pf-v5-c-jump-links__item--m-current__link--before--BorderColor: #212427 !important;
	--pf-v5-c-jump-links__link--before--BorderColor: #212427 !important;
	--pf-v5-global--primary-color--100: #212427;
	--pf-v5-global--primary-color--dark-100: #212427;
}

/* Navigation (aktiver Link) */
.pf-v5-c-nav__link.pf-m-current,
.pf-v5-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-v5-c-nav__link {
  color: #ffffff !important;
  background-color: #212427 !important;
}

/* Navigation  */
.pf-v5-c-nav__link {
  color: #ffffff !important;
  background-color: #212427 !important;
}

.pf-v5-c-page__sidebar {
  background-color: #212427 !important;
}

.pf-v5-c-nav__link:hover {
  background-color: #0089c1 !important;
}

.pf-v5-c-form-control > :is(input, select, textarea):focus {
  outline-offset: 0px;
}

.pf-v5-c-nav__link:focus{
  text-decoration: underline;
}

/* Sign Out Drop Down */
.pf-v5-c-menu-toggle:hover, .pf-v5-c-menu-toggle:focus {
  --pf-v5-c-menu-toggle--BackgroundColor: #0089c1;
}

.pf-v5-c-menu__list-item:hover, .pf-v5-c-menu__list-item:focus {
  --pf-v5-c-menu__list-item--BackgroundColor: #0089c1;
  --pf-v5-c-menu__list-item--Color: white;
}

/* Formular */
/* Buttons */
.pf-v5-c-button.pf-m-primary {
  background-color: #0089c1;
  color: #ffffff;
  border: none;
}

.pf-v5-c-button.pf-m-primary:hover, .pf-v5-c-button.pf-m-primary:focus {
  background-color: #0089c1;
}

pf-v5-c-button.pf-m-primary:focus {
	outline: 2px solid #0089c1;
}

.pf-v5-c-button.pf-m-link {
  color: #0C0C0C !important;
  background-color: white !important;
}

.pf-v5-c-button.pf-m-link:hover {
  text-decoration: var(--pf-v5-c-button--m-link--m-inline--hover--TextDecoration);
}

/* Felder */
.pf-v5-c-form-control:hover{
	--pf-v5-c-form-control--after--BorderBottomWidth: 2px;
	--pf-v5-c-form-control--after--BorderBottomColor: #0089c1;
}

input:focus, textarea:focus, select:focus {
    outline: 2px solid #0089c1;
	--pf-v5-global--BorderWidth--md: 0px;
    --pf-v5-global--primary-color--100: #0089c1;
}

.pf-v5-c-form-control:focus{
    --pf-v5-global--BorderWidth--md: 0px;
}

/* Masthead (Header-Bar oben) */
.pf-v5-c-masthead .pf-v5-c-toolbar {
  --pf-v5-c-masthead--BackgroundColor: #212427;
  --pf-v5-c-toolbar--BackgroundColor: #212427;
  --pf-v5-c-toolbar--Color: #ffffff;
}

.pf-v5-c-masthead {
  background-color: #212427 !important; 
}

/* Allgemeiner Hintergrund */
.pf-v5-c-page {
  background-color: #f9f9f9;
}

/* Karten (Boxen um die Inhalte) */
.pf-v5-c-card {
  background-color: #ffffff;
  border: 1px solid #d0d0d0;
  border-radius: 8px;
}

/* Links */
a {
  color: #212427;
}
a:hover {
  text-decoration: underline;
}

/* ----------------------------- */
/* DARK MODE                     */
/* ----------------------------- */
:where(.pf-v5-theme-dark) {
  --color-bg-dark: #1a1a1a;
  --color-bg-dark-card: #242424;
  --color-border-dark: #333333;
  --color-text-light: #ffffff;
  --color-nav-bg: #121212; 
  --color-accent: #0089c1;
  --color-accent-hover: #7da3da;
  --pf-v5-global--primary-color--100: #7da3da !important;

  /* Navigation (aktiver Link) */
  .pf-v5-c-nav__link.pf-m-current,
  .pf-v5-c-nav__link.pf-m-current:hover,
  .pf-v5-c-nav__item.pf-m-current:not(.pf-m-expanded) .pf-v5-c-nav__link {
    color: var(--color-text-light) !important;
    background-color: var(--color-accent) !important;
  }

  /* Navigation allgemein */
  .pf-v5-c-nav__link {
    color: var(--color-text-light) !important;
    background-color: var(--color-nav-bg) !important;
  }

  .pf-v5-c-nav__link:hover {
    background-color: var(--color-accent-hover) !important;
  }

  /* Sidebar */
  .pf-v5-c-page__sidebar {
    background-color: var(--color-nav-bg) !important;
  }

  /* Head/Masthead */
  .pf-v5-c-masthead,
  .pf-v5-c-masthead .pf-v5-c-toolbar {
    background-color: var(--color-nav-bg) !important;
    color: var(--color-text-light);
  }

  /* Seitenhintergrund */
  .pf-v5-c-page {
    background-color: var(--color-bg-dark);
  }

  /* Cards */
  .pf-v5-c-card {
    background-color: var(--color-bg-dark-card);
    border: 1px solid var(--color-border-dark);
    border-radius: 8px;
  }

  /* Buttons */
  .pf-v5-c-button.pf-m-primary {
    background-color: var(--color-accent);
    color: var(--color-text-light);
    border: none;
  }

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

  /* Links */
  a {
    color: var(--color-accent) !important;
  }

  a:hover {
    color: white !important;
    text-decoration: underline;
  }
  
  .pf-v5-c-menu__list-item:hover, 
  .pf-v5-c-menu__list-item:focus {
	background-color: var(--color-accent-hover) !important;
    color: white !important;
  }
  
  /* Formular Felder */
  .pf-v5-c-form-control:hover{
	--pf-v5-c-form-control--after--BorderBottomWidth: 2px;
	--pf-v5-c-form-control--after--BorderBottomColor: #7da3da;
  }

  input:focus, textarea:focus, select:focus {
    outline: 2px solid #7da3da;
	--pf-v5-global--BorderWidth--md: 0px;
    --pf-v5-global--primary-color--100: #7da3da;
  }

  .pf-v5-c-form-control:focus{
    --pf-v5-global--BorderWidth--md: 0px;
  }
  
  .pf-v5-c-button.pf-m-link {
	color: white !important;
	background-color: #1b1d21 !important;
  }

  .pf-v5-c-button.pf-m-link:hover {
	text-decoration: var(--pf-v5-c-button--m-link--m-inline--hover--TextDecoration);
  }
}