/*
 * SmartVersorgt-Login-Theme
 * Wird via hooks.py `web_include_css` auf allen Web-Pages geladen, aber per
 * `:has(.login-content)` saubere Scopen — wirkt nur auf der Login-Seite.
 * Stil: Bubble-Gum-Pastellverlauf, weiche weisse Wolken-Wisps, Glasmorph-Karte,
 * Brand-Blau-Cyan-Verlauf auf dem Login-Button. Logo kommt ueber den
 * Website-Settings `app_logo` rein.
 */

body:has(.login-content) {
  background:
    radial-gradient(60% 22% at 78% 18%, rgba(255,255,255,0.85), rgba(255,255,255,0) 70%),
    radial-gradient(50% 18% at 12% 38%, rgba(255,255,255,0.75), rgba(255,255,255,0) 70%),
    radial-gradient(70% 26% at 85% 78%, rgba(255,255,255,0.70), rgba(255,255,255,0) 70%),
    radial-gradient(45% 16% at 18% 86%, rgba(255,255,255,0.85), rgba(255,255,255,0) 70%),
    linear-gradient(180deg, #D9F5ED 0%, #C8D6F0 50%, #FBD6F3 100%);
  font-family: 'Inter', system-ui, -apple-system, "Segoe UI", sans-serif;
  color: #052A42;
}

/* Frappes Login zentriert die `.login-content` Karte ueber ein Grid in templates/web.html.
   Wir greifen direkt die Karte ab und stellen sie als Glasmorph-Element dar. */
.login-content.page-card {
  background: rgba(255,255,255,0.85) !important;
  backdrop-filter: blur(14px);
  -webkit-backdrop-filter: blur(14px);
  border: 1px solid rgba(255,255,255,0.7);
  border-radius: 18px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.85),
    0 1px 2px rgba(5,42,66,0.06),
    0 20px 50px -20px rgba(5,42,66,0.25),
    0 8px 18px -8px rgba(6,106,171,0.18) !important;
  padding: 32px 32px 26px !important;
  max-width: 420px;
}

.login-content .page-card-head {
  text-align: center;
  margin-bottom: 18px;
}
.login-content .page-card-head img {
  max-height: 38px;
  width: auto;
  filter: drop-shadow(0 1px 0 rgba(255,255,255,0.6));
}
.login-content .page-card-head h4 {
  font-family: 'DM Sans', 'Inter', sans-serif;
  font-weight: 700;
  font-size: 22px;
  color: #052A42;
  letter-spacing: -0.015em;
  margin: 12px 0 0;
}

.login-content .form-control {
  border-radius: 10px !important;
  border: 1px solid rgba(5,42,66,0.16) !important;
  background: rgba(255,255,255,0.85) !important;
  font-size: 14px;
  padding: 11px 13px !important;
  transition: border-color .12s, box-shadow .12s, background .12s;
}
.login-content .form-control:focus {
  border-color: #066AAB !important;
  background: #fff !important;
  box-shadow: 0 0 0 3px rgba(6,106,171,0.18) !important;
  outline: none !important;
}
.login-content .email-field .field-icon,
.login-content .password-field .field-icon { color: #066AAB; }

/* Primary-Login-Button: glossy Brand-Verlauf — gleiche Sprache wie die SPA. */
.login-content .btn-login,
.login-content .btn-primary {
  background: linear-gradient(135deg, #066AAB 0%, #19A7E0 100%) !important;
  border: 1px solid #055789 !important;
  color: #fff !important;
  font-weight: 600 !important;
  padding: 13px 16px !important;
  border-radius: 12px !important;
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.32),
    inset 0 -10px 18px rgba(0,0,0,0.08),
    0 2px 8px rgba(6,106,171,0.30),
    0 1px 2px rgba(0,0,0,0.06) !important;
  transition: filter .12s, box-shadow .15s, transform .06s;
}
.login-content .btn-login:hover,
.login-content .btn-primary:hover {
  filter: brightness(1.05) saturate(1.05);
  box-shadow:
    inset 0 1px 0 rgba(255,255,255,0.45),
    0 6px 16px rgba(6,106,171,0.42),
    0 1px 2px rgba(0,0,0,0.08) !important;
}
.login-content .btn-login:active,
.login-content .btn-primary:active { transform: translateY(1px); }

/* Links + Hinweise */
.login-content a { color: #066AAB; }
.login-content a:hover { color: #055789; text-decoration: underline; }
.login-content .forgot-password-message a { font-weight: 500; }
.login-content .text-muted { color: rgba(5,42,66,0.55) !important; }
.login-content .login-divider { color: rgba(5,42,66,0.45) !important; }

/* Footer (Login-zugehoerig) zurueckhaltend */
body:has(.login-content) .web-footer,
body:has(.login-content) footer { color: rgba(5,42,66,0.55); }