:root {
  --kit-green: #00876c;
  --kit-green-dark: #007755;
  --gray: #808080;
  --light-gray: #e5e5e5;
  --text-dark: #292938;
  --color-text-brand: #007755;
  --color-border-brand: #007755;
}

/* ----------------------------------------------------------
 * Logo – alle Varianten verwenden logo.svg
 * ---------------------------------------------------------- */

:root {
  /* Pfad ggf. anpassen, z.B. "/assets/logo.svg" oder ähnliches */
  --logo-svg-path: url("/logo.svg");
}

/* gemeinsame Basis für alle Logo-Flächen */
.logo-container h1 a,
.column-link--logo,
.column-link--logo:hover,
.column-link--logo:active,
.column-link--logo:focus,
.ui__header__logo {
  background-image: var(--logo-svg-path);
  background-size: contain;
  background-repeat: no-repeat;
}

/* spezifische Varianten */

.logo-container h1 a {
  background-position: center;
  height: 4em;
  width: 100%;
}

.column-link--logo,
.column-link--logo:hover,
.column-link--logo:active,
.column-link--logo:focus {
  height: 3.5em;
  background-position-y: 0.3em;
}

.ui__header__logo {
  height: 18px;
  background-position: 8px 8px;
}

/* ursprüngliche “inline”-Logos ausblenden */
.logo-container h1 a .logo,
.navigation-panel .logo,
.ui__header__logo svg {
  display: none !important;
}

/* Dark Mode Anpassung fürs Logo */
@media (prefers-color-scheme: dark) {
  .logo-container h1 a {
    filter: invert(1) hue-rotate(-180deg);
  }
}

/* ----------------------------------------------------------
 * Buttons: Sign-in-Banner
 * ---------------------------------------------------------- */

/* Primary Button (Konto erstellen) */
.sign-in-banner .button:not(.button-secondary) {
  background-color: var(--kit-green);
  color: #fff;
  font-weight: bold;
  transition: transform 0.2s ease;
}

.sign-in-banner .button:not(.button-secondary):hover {
  transform: translateY(-2px);
  filter: brightness(1.1);
}

/* Secondary Button (Anmelden) */
.sign-in-banner .button-secondary {
  background-color: transparent;
  border: 1px solid var(--kit-green);
  color: var(--kit-green);
}

/* Tertiary Button im Banner */
.sign-in-banner {
  display: grid;
}

.sign-in-banner a.button-tertiary {
  grid-row: 3;
  color: #fff;
  background-color: var(--kit-green) !important;
}

/* ----------------------------------------------------------
 * Formular: /auth/sign_in
 * ---------------------------------------------------------- */

#new_user[action="/auth/sign_in"] {
  grid-row: 2;
  margin-top: 1.5em;
  border-top: 1px solid #000;
  padding-top: 2.5em;
  height: 3em;
  overflow: hidden;
}

#new_user[action="/auth/sign_in"]:before {
  content: "↓ Nur für Einrichtungen und Projekte des KIT: ↓";
  display: block;
  margin-bottom: 0.5em;
  font-weight: 500;
  text-align: left;
  font-size: 1.4em;
  height: 2em;
}

#new_user[action="/auth/sign_in"]:has(:focus),
#new_user[action="/auth/sign_in"]:hover {
  height: auto;
}

#new_user[action="/auth/sign_in"] #user_email {
  display: none;
}

#new_user[action="/auth/sign_in"]:has(:focus) #user_email,
#new_user[action="/auth/sign_in"]:hover #user_email {
  display: block !important;
}

#new_user[action="/auth/sign_in"] button {
  color: var(--gray);
  background: var(--light-gray) !important;
}

#new_user[action="/auth/sign_in"] h1 {
  display: none;
}

/* Responsives Typo-Tuning der :before-Headline */

@media (max-width: 500px) {
  #new_user[action="/auth/sign_in"]:before {
    font-size: 1.2em;
  }

  .alternative-login .actions:before {
    font-size: 24px;
  }
}

@media (max-width: 350px) {
  #new_user[action="/auth/sign_in"]:before {
    font-size: 1.1em;
  }
}

/* ----------------------------------------------------------
 * Formular: /auth (Registrierung)
 * ---------------------------------------------------------- */

#new_user[action="/auth"] .input.user_account_username:before {
  content: "Registriert werden können nur Konten für Institutionen oder Projekte des KIT. Bitte wählen Sie einen Profilnamen, aus dem die Institution/das Projekt deutlich hervorgeht. Unten können Sie genauere Angaben dazu machen (z.B. voller Name, Webseite usw.).";
  display: block;
  padding-bottom: 1em;
  font-size: 1.3em;
  line-height: 1.3em;
  color: var(--text-dark);
}

/* Alternative Login-Box */

.alternative-login {
  grid-row: 1;
}

.alternative-login h4 {
  display: none;
}

.alternative-login .actions {
  flex-direction: column;
}

.alternative-login .actions:before {
  content: "Bei social.kit.edu anmelden";
  width: 100%;
  font-size: 28px;
  font-weight: 700;
  line-height: 33px;
  margin-bottom: 15px;
}

/* ----------------------------------------------------------
 * Invite-Text Overlay
 * ---------------------------------------------------------- */

div:has(>#user_invite_request_attributes_text) {
  position: relative;
}

div:has(>#user_invite_request_attributes_text):before {
  content: "genaue Angaben zur Institution/zum Projekt";
  display: block;
  position: absolute;
  padding: 10px 16px;
  color: var(--gray);
  font-size: 14px;
  z-index: 0;
  background-color: #f9f9fb;
  width: calc(100% - 32px);
  height: 100%;
}

#user_invite_request_attributes_text {
  background: transparent;
  z-index: 1;
  position: relative;
  padding-top: 2em;
}

/* ----------------------------------------------------------
 * Progress Tracker
 * ---------------------------------------------------------- */

.progress-tracker .active .circle {
  border-color: var(--kit-green) !important;
}

.progress-tracker .active .circle:before {
  background: var(--kit-green);
}

.progress-tracker .completed .circle {
  border-color: var(--kit-green) !important;
  background: var(--kit-green);
}

.progress-tracker .completed .circle svg {
  fill: #fff;
}

.progress-tracker .separator.completed {
  background: var(--kit-green);
}

/* ----------------------------------------------------------
 * Allgemeine UI-Farben & Typo
 * ---------------------------------------------------------- */

body {
  hyphens: auto;
}

/* Checkbox-Farbe */

input[type="checkbox"] {
  accent-color: var(--kit-green);
}

/* Links und Buttons in Formularen und Navigation */

.simple_form .input.boolean label a,
.column-link,
.icon-button,
.dropdown-button,
article a,
.sidebar a.selected,
a.status-card:active .status-card__author,
a.status-card:active .status-card__description,
a.status-card:active .status-card__host,
a.status-card:active .status-card__title,
a.status-card:focus .status-card__author,
a.status-card:focus .status-card__description,
a.status-card:focus .status-card__host,
a.status-card:focus .status-card__title,
a.status-card:hover .status-card__author,
a.status-card:hover .status-card__description,
a.status-card:hover .status-card__host,
a.status-card:hover .status-card__title,
.link-button,
.column-header .column-header__back-button,
.edit-indicator__content a.unhandled-link,
.reply-indicator__content a.unhandled-link,
.status__content a.unhandled-link,
.column-back-button {
  color: var(--kit-green-dark) !important;
}

.dropdown-button {
  border-color: var(--kit-green-dark) !important;
}

/* Banners / Buttons / Admin UI */

.dismissable-banner {
  background-color: var(--light-gray);
  border-color: var(--kit-green-dark) !important;
}

.admin-wrapper .content__heading__tabs a.selected,
.btn {
  background: var(--kit-green) !important;
}

.admin-wrapper .sidebar .logo,
.logo--icon {
  filter: hue-rotate(276deg);
}

/* Account Badges / Domain-Pill */

.account-role {
  color: var(--kit-green-dark) !important;
  border-color: var(--kit-green-dark) !important;
}

.account__domain-pill {
  color: var(--kit-green-dark) !important;
  background: rgba(97, 97, 97, 0.2) !important;
}

/* Sektionen / Filterleisten */

.account__section-headline a.active:before,
.account__section-headline button.active:before,
.notification__filter-bar a.active:before,
.notification__filter-bar button.active:before {
  background-color: var(--kit-green) !important;
}

/* ----------------------------------------------------------
 * Layout
 * ---------------------------------------------------------- */

.form-container {
  display: grid;
}

#two_factor_authentication {
  display: none;
}

.logo-container > a {
    position: relative;
    display: block;
    width: 260px;
    height: 66px;
}

.logo-container .logo {
    visibility: hidden;
}

.logo-container > a::after {
    content: "";
    position: absolute;
    inset: 0;
    background: url("/logo.svg") center center no-repeat;
    background-size: contain;
}