/* ─────────────────────────────────────────────────────────────────────────
   Kundenportal – Stile für die Anmelde- und Passwort-zurücksetzen-Seiten
   ─────────────────────────────────────────────────────────────────────────
   Beide Seiten teilen sich dasselbe zweigeteilte Layout: links ein
   Markenbereich (Logo, Claim, Trust-Hinweise), rechts das Formular.
   Diese Styles betreffen ausschliesslich /login, /password-reset und
   verwandte Schritte (MFA, Erst-Passwort, Reset-Bestaetigung). Der
   eingeloggte Bereich wird davon nicht beruehrt; dort gilt
   /assets/css/panel.css.

   Wesentliche Bestandteile:
   - .login-shell .....  Vollflaechen-Container, zentriert die Karte
   - .login-card .....   Die zweispaltige Karte (Brand-Panel + Form-Panel)
   - .brand-panel .....  Linke Spalte mit optionalem Hintergrund-Foto
   - .form-panel .....   Rechte Spalte mit dem eigentlichen Formular
   - Floating Labels werden ueber Tablers .form-floating realisiert.
   - Ab < 992px klappt der Markenbereich zu einer kompakten Kopfzeile.
   ───────────────────────────────────────────────────────────────────── */


/* ── Marken-Farben fuer die Anmeldeseite ────────────────────────────────
   Diese Variablen sind explizit auf die Login-Seite begrenzt
   (Selektor .login-shell) und ueberschreiben keine Tabler-Globalfarben.
   Sie sind zudem unabhaengig vom Design-Setting `design_primary`, damit
   ein Kundenadmin mit beliebiger Themenfarbe trotzdem ein stimmiges
   Login bekommt. Wer das Login-Schema selbst aendern moechte, passt
   diese Werte hier an einer Stelle an. */
.login-shell {
  --login-brand-deep:  #0c447c;   /* Tabler Blue 800 – Markenpanel */
  --login-brand-mid:   #185fa5;   /* Tabler Blue 600 – Primaerbutton */
  --login-brand-soft:  #b5d4f4;   /* Tabler Blue 100 – Fliesstext */
  --login-brand-faint: #85b7eb;   /* Tabler Blue 200 – Untertitel */
  --login-status-ok:   #97c459;   /* Tabler Green 200 – Status-Punkt */
}


/* ── Basislayout: zentriert den Login-Block vertikal & horizontal ─────── */
.login-shell {
  min-height: 100dvh;             /* dvh = dynamic viewport height (mobil) */
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 1.5rem;
  background: var(--tblr-bg-surface-secondary, #f5f5f8);
}


/* ── Die zentrale Karte mit den beiden Spalten ───────────────────────── */
.login-card {
  width: min(960px, 100%);
  background: var(--tblr-bg-surface);
  border-radius: 16px;
  overflow: hidden;                       /* clippt Rundungen am Bild */
  border: 1px solid var(--tblr-border-color);
  display: grid;
  grid-template-columns: 5fr 6fr;         /* linke Spalte etwas schmaler */
  min-height: 560px;
}


/* ── Linke Spalte: Markenbereich ─────────────────────────────────────────
   - Hintergrundfarbe ist tiefes Marineblau (Tabler Blue 800)
   - Falls ein Foto gesetzt ist, wird es ueber das Inline-Style-Attribut
     im Template als background-image gesetzt (data-attr `data-login-bg`)
   - Ueber Foto/Farbe liegt ein dunkles Overlay (besseres Text-Kontrast)
   - Darueber legt sich ein dezentes Punkt-Pattern (rein CSS, keine Datei) */
.brand-panel {
  position: relative;
  color: #fff;
  padding: 2.25rem 2rem;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  background-color: var(--login-brand-deep);
  background-size: cover;
  background-position: center;
  background-repeat: no-repeat;
  overflow: hidden;
}

/* Dunkles Overlay & dezenter Lichteffekt ueber dem Hintergrund.
   Trennt Bild/Farbe vom Text und sorgt fuer konstante Lesbarkeit
   unabhaengig vom verwendeten Foto. */
.brand-panel::before {
  content: "";
  position: absolute;
  inset: 0;
  background:
    linear-gradient(180deg,
      rgba(12, 68, 124, 0.55) 0%,
      rgba(12, 68, 124, 0.85) 100%),
    radial-gradient(circle at 90% 10%, rgba(255,255,255,0.08) 0, transparent 30%),
    radial-gradient(circle at 10% 90%, rgba(255,255,255,0.06) 0, transparent 32%);
  pointer-events: none;
  z-index: 1;
}

/* Dezentes Punkt-Pattern als Textur-Overlay.
   Pures CSS – kein zusaetzliches Asset. Werte:
   - 1px Punkte
   - 24px Raster
   - 8 % Deckkraft Weiss
   Wirkt aus der Distanz wie Strukturpapier und bricht grosse Farbflaechen. */
.brand-panel::after {
  content: "";
  position: absolute;
  inset: 0;
  background-image:
    radial-gradient(rgba(255,255,255,0.08) 1px, transparent 1px);
  background-size: 24px 24px;
  pointer-events: none;
  z-index: 2;
}

/* Saemtliche tatsaechlichen Inhalte sollen ueber den Overlays liegen. */
.brand-panel > * { position: relative; z-index: 3; }


/* ── Logo-Plakette oben links im Markenbereich ─────────────────────────── */
.brand-mark {
  display: flex;
  align-items: center;
  gap: 12px;
}
.brand-mark .mark-icon {
  width: 40px;
  height: 40px;
  border-radius: 10px;
  background: rgba(255, 255, 255, 0.12);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}
.brand-mark .mark-icon i.ti { font-size: 22px; color: #fff; }
.brand-mark .mark-icon img {
  max-width: 28px;
  max-height: 28px;
  object-fit: contain;
}
.brand-mark .mark-text { line-height: 1.2; min-width: 0; }
.brand-mark .mark-text strong {
  display: block;
  font-size: 1.05rem;
  font-weight: 500;
  letter-spacing: -0.01em;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.brand-mark .mark-text span {
  display: block;
  font-size: 0.78rem;
  color: var(--login-brand-faint);
  margin-top: 2px;
}


/* ── Claim und Beschreibung ───────────────────────────────────────────── */
.brand-claim h2 {
  font-size: 1.65rem;
  font-weight: 500;
  line-height: 1.3;
  color: #fff;
  margin: 0 0 0.75rem;
}
.brand-claim p {
  font-size: 0.95rem;
  line-height: 1.6;
  color: var(--login-brand-soft);
  margin: 0;
}


/* ── Trust-Hinweise im unteren Bereich des Markenpanels ────────────────── */
.brand-trust {
  display: flex;
  flex-direction: column;
  gap: 0.65rem;
  font-size: 0.85rem;
  color: var(--login-brand-soft);
}
.brand-trust .trust-line {
  display: flex;
  align-items: center;
  gap: 8px;
}
.brand-trust .dot {
  width: 9px;
  height: 9px;
  border-radius: 50%;
  background: var(--login-status-ok);
  box-shadow: 0 0 0 3px rgba(151, 196, 89, 0.18);
  flex-shrink: 0;
}


/* ── Rechte Spalte: Formularbereich ────────────────────────────────────── */
.form-panel {
  padding: 2.25rem 2.5rem;
  display: flex;
  flex-direction: column;
  background: var(--tblr-bg-surface);
}

/* Theme-Toggle (Mond/Sonne) oben rechts */
.form-panel .top-row {
  display: flex;
  justify-content: flex-end;
  margin-bottom: 1.25rem;
}
.theme-toggle {
  width: 34px;
  height: 34px;
  border-radius: 50%;
  border: 1px solid var(--tblr-border-color);
  background: transparent;
  color: var(--tblr-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  padding: 0;
  transition: background-color 0.15s ease, border-color 0.15s ease;
}
.theme-toggle:hover {
  background: var(--tblr-bg-surface-tertiary);
  border-color: var(--tblr-border-color-active, var(--tblr-border-color));
}
.theme-toggle i.ti { font-size: 16px; }

/* Formular zentriert in der rechten Spalte */
.form-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  justify-content: center;
  max-width: 380px;
  width: 100%;
  margin: 0 auto;
}

.form-wrap > h1 {
  font-size: 1.5rem;
  font-weight: 500;
  margin: 0 0 0.25rem;
}
.form-wrap > .lead {
  font-size: 0.9rem;
  color: var(--tblr-secondary);
  margin: 0 0 1.5rem;
}


/* ── Floating-Label: Eye-Button rechts im Passwortfeld ─────────────────
   Tabler/Bootstrap .form-floating hat selbst keinen sauberen Mechanismus
   fuer trailing-icons. Wir setzen den Button absolut positioniert *neben*
   das Floating-Label und sorgen mit padding-right (pe-5) dafuer, dass der
   Inputtext nicht unter dem Icon verschwindet. */
.form-floating .pw-toggle {
  position: absolute;
  top: 50%;
  right: 0.5rem;
  transform: translateY(-50%);
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border: none;
  background: transparent;
  color: var(--tblr-secondary);
  cursor: pointer;
  border-radius: 6px;
  padding: 0;
  z-index: 5;
}
.form-floating .pw-toggle:hover {
  background: var(--tblr-bg-surface-secondary);
  color: var(--tblr-body-color);
}
.form-floating .pw-toggle i.ti { font-size: 16px; }


/* ── Footer in der Formularspalte: Version + Impressum ─────────────────── */
.form-footer {
  display: flex;
  justify-content: space-between;
  align-items: center;
  font-size: 0.75rem;
  color: var(--tblr-secondary);
  margin-top: 1.5rem;
  padding-top: 1rem;
  border-top: 1px solid var(--tblr-border-color);
  gap: 0.5rem;
  flex-wrap: wrap;
}
.form-footer a { color: inherit; text-decoration: none; }
.form-footer a:hover { color: var(--tblr-body-color); }


/* ── Markenbereich auf Mobil als kompakte Kopfzeile ─────────────────────
   Ab unter 992px (Bootstrap-Breakpoint lg) klappt die linke Spalte ueber
   das Formular. Der Claim verschwindet, weil er auf Mobil unnoetig viel
   Platz kostet; Logo und ein Statushinweis bleiben sichtbar.
   ─────────────────────────────────────────────────────────────────────── */
@media (max-width: 991.98px) {
  .login-card {
    grid-template-columns: 1fr;
    min-height: 0;
  }
  .brand-panel {
    padding: 1.25rem 1.5rem;
    gap: 0.5rem;
    min-height: 0;
  }
  .brand-panel .brand-claim,
  .brand-panel .brand-trust .trust-line.trust-line-secondary {
    display: none;     /* Claim + Sekundaer-Trust-Zeilen verbergen */
  }
  .brand-panel .brand-trust { flex-direction: row; }
  .form-panel { padding: 1.5rem 1.25rem; }
}


/* ── Dark Mode: Karte und Trennlinien etwas weicher ────────────────────── */
[data-bs-theme="dark"] .login-shell {
  background: #1a1d24;
}
[data-bs-theme="dark"] .login-card {
  border-color: rgba(255, 255, 255, 0.08);
}