/* GLKN-Stil für die VoidAuth-Seiten. Vorbild: Login-Screen aus dem Entwurf
   (Petrol-Hintergrund, weisse Karte mit Logo und Titel, breiter Petrol-Button). */
:root { --mat-sys-surface: #F6FBFC; --glkn-petrol: #0A7387; --glkn-ink: #00162E; --glkn-sub: #4D5A66; }
body { font-family: Calibri, Carlito, Arial, sans-serif !important; color: var(--glkn-ink); }
.mdc-button, .mat-mdc-button-base, .mat-mdc-unelevated-button { border-radius: 4px !important; }
.mat-mdc-card, mat-card { border-radius: 6px !important; }

/* Kein Hell/Dunkel-Umschalter: das Design ist fest hell (siehe patch_voidauth.py) */
app-theme-toggle { display: none !important; }

/* ---- Seiten mit schmaler Formular-Karte (Anmeldung, Passwort setzen, Einladung) ---- */
.container:has(mat-card.form-card.thin) { background: var(--glkn-petrol) !important; }
.container:has(mat-card.form-card.thin) app-header { display: none !important; }
.container:has(mat-card.form-card.thin) mat-drawer-container,
.container:has(mat-card.form-card.thin) mat-drawer-content { background: transparent !important; }
mat-card.form-card.thin {
  background: #fff !important; box-shadow: none !important; max-width: 400px !important; width: 100%;
  padding: 20px 16px !important; margin: 24px auto !important; max-width: min(400px, calc(100vw - 32px)) !important; box-sizing: border-box;
}
mat-card.form-card.thin h1 { text-align: left !important; font-size: 19px !important; font-weight: 700; margin: 0 0 18px !important; }
mat-card.form-card.thin .mat-mdc-text-field-wrapper { background: #fff !important; }
mat-card.form-card.thin mat-card-actions { flex-direction: column; align-items: stretch !important; gap: 10px; padding: 0 !important; }
mat-card.form-card.thin mat-card-actions button[type="submit"] {
  width: 100%; min-height: 48px; font-size: 16px; font-weight: 700;
  background: var(--glkn-petrol) !important; color: #fff !important;
}
mat-card.form-card.thin mat-card-actions button[type="submit"]:disabled { opacity: .55; }

/* ---- Anmeldung: Logo, Titel und Untertitel wie im Entwurf ---- */
app-login mat-card-content::before {
  content: ""; display: block; align-self: stretch; width: 100%; height: 44px; margin: 0 0 18px;
  background: url("/auth/logo.png") left center / contain no-repeat;
}
app-login mat-card.form-card.thin h1 { font-size: 0 !important; margin-bottom: 18px !important; align-self: stretch; width: 100%; }
app-login h1::before { content: "Kühlraumüberwachung"; display: block; font-size: 19px; font-weight: 700; color: var(--glkn-ink); }
app-login h1::after { content: "HBK Singen · Küche"; display: block; font-size: 13px; font-weight: 400; color: var(--glkn-sub); margin-top: 2px; }

/* Reihenfolge wie im Entwurf: Felder, "Angemeldet bleiben", Button, dann "Passwort vergessen" */
app-login form { display: flex; flex-direction: column; }
app-login form > a { order: 99; align-self: center; margin-top: 8px !important; }
app-login mat-card-content { text-align: left; }
app-login form { align-self: stretch; width: 100%; }
app-login form mat-checkbox { align-self: flex-start; margin: 4px 0 8px -8px; }