/*
 * SYSINFRA V2 fuer Zammad (support.sysinfra.ch).
 *
 * Eingebunden per nginx sub_filter vor </head> (branding/nginx-brand.conf),
 * nach tokens.css und fonts.css. Zammad 7 hat keinen eigenen CSS-Hook fuer
 * Admins; Custom-SCSS im Image wuerde einen eigenen Build verlangen.
 *
 * Umfang (Entscheid Steven 2026-10-15: Kunden arbeiten im Kundenportal, nicht
 * in Zammad):
 *   1. Akzentfarbe fuer alle Ansichten (Agenten: nur das, nichts an Layout,
 *      Schrift oder Abstaenden, damit die Bedienung gleich bleibt).
 *   2. Anmeldeseiten (Login, Passwort-Reset) in V2: hell, Inter, Karte 18 px,
 *      Eingaben 12 px, Pill-Buttons, Hinweis aufs Kundenportal.
 *
 * Nur var(--ds-v2-*) aus tokens.css, keine eigenen Hex-Werte ausser dem
 * gedrueckten Akzent (Zammad braucht einen Active-Ton, tokens.css hat keinen).
 */

/* 1. Akzent (alle Ansichten, hell und dunkel) */
:root,
[data-theme='dark'] {
  --button-primary-background: var(--ds-v2-accent);
  --button-primary-background-active: #0336a0;
  --border-highlight: var(--ds-v2-accent);
  --highlight: var(--ds-v2-accent);
}
:root {
  --text-link: var(--ds-v2-accent);
  --text-nav: var(--ds-v2-accent);
}
[data-theme='dark'] {
  --text-link: var(--ds-v2-accent-on-dark);
  --text-nav: var(--ds-v2-accent-on-dark);
}

/* 2. Anmeldeseiten, unabhaengig vom Dunkelmodus immer hell */
.login,
.reset_password,
.signup {
  --fullscreen-background: var(--ds-v2-surface-light-2);
  --fullscreen-text: var(--ds-v2-ink-2);
  --fullscreen-text-link: var(--ds-v2-accent);
  --fullscreen-text-muted: var(--ds-v2-ink-2);
  --background-secondary: var(--ds-v2-surface-light);
  --background-primary: var(--ds-v2-surface-light);
  --text-normal: var(--ds-v2-ink);
  --text-muted: var(--ds-v2-ink-2);
  --header-primary: var(--ds-v2-ink);
  --border: var(--ds-v2-border);
  background: var(--ds-v2-surface-light-2) !important;
  color: var(--ds-v2-ink-2);
  font-family: var(--ds-v2-font-sans);
  -webkit-font-smoothing: antialiased;
}
.login *,
.reset_password *,
.signup * {
  font-family: inherit;
}
.login .fullscreen-body > p:first-child,
.reset_password .fullscreen-body > p:first-child {
  font-size: var(--ds-v2-type-small-size);
  line-height: var(--ds-v2-type-small-lh);
  color: var(--ds-v2-ink-2);
}
.login .hero-unit,
.reset_password .hero-unit,
.signup .hero-unit {
  background: var(--ds-v2-surface-light);
  color: var(--ds-v2-ink);
  border: 1px solid var(--ds-v2-border);
  border-radius: var(--ds-v2-radius-card);
  box-shadow: none;
  padding: var(--ds-v2-space-32);
}
.login .company-logo {
  max-height: 88px;
  margin: 0 auto var(--ds-v2-space-24);
}
.login .formGroup-label label,
.reset_password .formGroup-label label {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--ds-v2-type-small-size);
  font-weight: 500;
  color: var(--ds-v2-ink);
}
.login .form-control,
.reset_password .form-control,
.signup .form-control {
  height: var(--ds-v2-touch);
  border-radius: var(--ds-v2-radius-control);
  border: 1px solid var(--ds-v2-border-control);
  background: var(--ds-v2-surface-light);
  color: var(--ds-v2-ink);
  font-size: var(--ds-v2-type-body-size);
  box-shadow: none;
}
.login .form-control:focus,
.reset_password .form-control:focus,
.signup .form-control:focus {
  border-color: var(--ds-v2-accent);
  outline: 2px solid var(--ds-v2-accent);
  outline-offset: 1px;
}
.login .label-text {
  color: var(--ds-v2-ink);
}
.login .btn--primary,
.reset_password .btn--primary,
.signup .btn--primary {
  height: var(--ds-v2-touch);
  border-radius: var(--ds-v2-radius-pill);
  background: var(--ds-v2-accent);
  color: var(--ds-v2-on-accent);
  font-size: var(--ds-v2-type-body-size);
  font-weight: 600;
  box-shadow: none;
}
.login .btn--primary:hover,
.reset_password .btn--primary:hover {
  background: #0336a0;
}
.login .btn--text,
.reset_password .btn--text {
  color: var(--ds-v2-accent);
  text-decoration: none;
}
.login .separator-text {
  text-transform: none;
  letter-spacing: 0;
  font-size: var(--ds-v2-type-fine-size);
  color: var(--ds-v2-ink-2);
  background: var(--ds-v2-surface-light);
}
.login .auth-provider {
  height: var(--ds-v2-touch);
  border-radius: var(--ds-v2-radius-pill);
  background: var(--ds-v2-surface-light);
  color: var(--ds-v2-ink);
  border: 1px solid var(--ds-v2-border-control);
  box-shadow: none;
}
.login .auth-provider .icon {
  fill: var(--ds-v2-ink);
}
.login .auth-provider .provider-name {
  color: var(--ds-v2-ink);
  font-weight: 500;
}
/* Mobil: Zammad zentriert die Anmeldung vertikal; ist sie hoeher als der
   Bildschirm, schneidet das oben ab. Oben ausrichten statt zentrieren. */
@media (max-width: 734px) {
  .login .fullscreen-center {
    margin: 0 auto auto;
  }
  .login .hero-unit {
    padding: var(--ds-v2-space-24);
  }
}

/* Hinweis aufs Kundenportal (Zammad-Setting maintenance_login_message) */
.login .js-maintenanceLogin {
  background: var(--ds-v2-surface-light);
  color: var(--ds-v2-ink);
  border: 1px solid var(--ds-v2-border);
  border-left: 4px solid var(--ds-v2-accent);
  border-radius: var(--ds-v2-radius-card);
  padding: var(--ds-v2-space-16) var(--ds-v2-space-24);
  font-size: var(--ds-v2-type-body-size);
  line-height: var(--ds-v2-type-body-lh);
  text-align: left;
  box-shadow: none;
}
.login .js-maintenanceLogin a {
  color: var(--ds-v2-accent);
  font-weight: 600;
  text-decoration: underline;
}

/* Zammads Kundentext ("bereits registriert ... Passwort anfordern") passt
   nicht mehr: Kunden melden sich im Portal an. */
.login .js-footer {
  display: none;
}
.login .poweredBy,
.login .poweredBy a {
  color: var(--ds-v2-ink-2);
}
.login .poweredBy .icon {
  fill: var(--ds-v2-ink-2);
  opacity: 0.6;
}

/* 3. Agentenansicht: SYSINFRA-Zeichen statt Zammad-Vogel oben links.
   Das Element bleibt der Schalter fuer Benachrichtigungen (Zaehler bleibt). */
.navigation .logo .icon-logo {
  visibility: hidden;
}
.navigation .logo {
  background: url('/sysinfra-brand/sysinfra-zeichen-3d-128.png') center / 36px 36px no-repeat;
}