/* kjello Passportal — Brand-Skin fuer Vaultwarden (nur Web-Vault-UI).
   Wird via nginx nach den Haupt-Styles geladen; ueberschreibt nur Farben, Logo, Hintergrund.
   Vaultwardens eigenes css/vaultwarden.css bleibt unangetastet. */

/* 1) Primaerfarbe -> kjello-Blau (Light + Dark) ------------------------------- */
:root, .theme_light {
  --color-primary-100: 219 234 254;
  --color-primary-300: 147 178 246;
  --color-primary-500: 59 130 246;   /* #3B82F6 */
  --color-primary-600: 37 99 235;    /* #2563EB  Haupt-CTA */
  --color-primary-700: 29 78 216;    /* #1D4ED8  Hover */
}
.theme_dark {
  --color-primary-100: 30 58 138;
  --color-primary-300: 96 165 250;
  --color-primary-500: 96 165 250;   /* #60A5FA */
  --color-primary-600: 96 165 250;
  --color-primary-700: 147 197 253;  /* #93C5FD */
}

/* 2) Login-Logo -> kjello-Wortmarke (themed) --------------------------------- */
img.new-logo-themed, img.logo {
  content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTcyIiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgMTcyIDQ4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0ia2plbGxvIj4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ia2plbGxvV21CZyIgeDE9IjIiIHkxPSI2IiB4Mj0iMzgiIHkyPSI0MiIgZ3JhZGllbnRVbml0cz0idXNlclNwYWNlT25Vc2UiPgogICAgICA8c3RvcCBzdG9wLWNvbG9yPSIjM0I4MkY2Ii8+CiAgICAgIDxzdG9wIG9mZnNldD0iMSIgc3RvcC1jb2xvcj0iIzI1NjNFQiIvPgogICAgPC9saW5lYXJHcmFkaWVudD4KICA8L2RlZnM+CiAgPCEtLSBNYXJrIC0tPgogIDxyZWN0IHg9IjQiIHk9IjYiIHdpZHRoPSIzNiIgaGVpZ2h0PSIzNiIgcng9IjEwIiBmaWxsPSJ1cmwoI2tqZWxsb1dtQmcpIi8+CiAgPHBhdGggZD0iTTIyIDkuNSBMMjUuMiAyMC41IEwzNiAyNCBMMjUuMiAyNy41IEwyMiAzOC41IEwxOC44IDI3LjUgTDggMjQgTDE4LjggMjAuNSBaIgogICAgICAgIGZpbGw9IiNGRkZGRkYiIGZpbGwtb3BhY2l0eT0iMC45NiIvPgogIDxwYXRoIGQ9Ik0yMiA5LjUgTDI1LjIgMjAuNSBMMjIgMjQgTDE4LjggMjAuNSBaIiBmaWxsPSIjRjk3MzE2Ii8+CiAgPGNpcmNsZSBjeD0iMjIiIGN5PSIyNCIgcj0iMi4xIiBmaWxsPSIjMUQ0RUQ4Ii8+CiAgPCEtLSBXb3J0bWFya2UgKFBsYXR6aGFsdGVyOiBHZWlzdC1TdGFjaywgdm9tIGtpZS5haS1CdWlsZCBlcnNldHpiYXIpIC0tPgogIDx0ZXh0IHg9IjU0IiB5PSIzMiIgZm9udC1mYW1pbHk9IkdlaXN0LCAnR2Vpc3QgU2FucycsIHVpLXNhbnMtc2VyaWYsIHN5c3RlbS11aSwgLWFwcGxlLXN5c3RlbSwgJ1NlZ29lIFVJJywgUm9ib3RvLCBBcmlhbCwgc2Fucy1zZXJpZiIKICAgICAgICBmb250LXNpemU9IjI2IiBmb250LXdlaWdodD0iNjAwIiBsZXR0ZXItc3BhY2luZz0iLTAuNSIgZmlsbD0iIzFFMjkzQiI+a2plbGxvPC90ZXh0PgogIDwhLS0gbmF2aS1XYXlwb2ludDogT3JhbmdlLVB1bmt0IGFscyBTaWduYXR1ciAoQmFzZWxpbmUtUHVua3QgbmFjaCBkZW0gV29ydCkgLS0+CiAgPGNpcmNsZSBjeD0iMTUxIiBjeT0iMzMiIHI9IjMiIGZpbGw9IiNGOTczMTYiLz4KPC9zdmc+Cg==") !important;
  max-height: 52px !important; width: auto !important;
}
.theme_dark img.new-logo-themed, .theme_dark img.logo {
  content: url("data:image/svg+xml;base64,PHN2ZyB3aWR0aD0iMTcyIiBoZWlnaHQ9IjQ4IiB2aWV3Qm94PSIwIDAgMTcyIDQ4IiBmaWxsPSJub25lIiB4bWxucz0iaHR0cDovL3d3dy53My5vcmcvMjAwMC9zdmciIHJvbGU9ImltZyIgYXJpYS1sYWJlbD0ia2plbGxvIj4KICA8ZGVmcz4KICAgIDxsaW5lYXJHcmFkaWVudCBpZD0ia2plbGxvV21EYXJrQmciIHgxPSIyIiB5MT0iNiIgeDI9IjM4IiB5Mj0iNDIiIGdyYWRpZW50VW5pdHM9InVzZXJTcGFjZU9uVXNlIj4KICAgICAgPHN0b3Agc3RvcC1jb2xvcj0iIzYwQTVGQSIvPgogICAgICA8c3RvcCBvZmZzZXQ9IjEiIHN0b3AtY29sb3I9IiMzQjgyRjYiLz4KICAgIDwvbGluZWFyR3JhZGllbnQ+CiAgPC9kZWZzPgogIDwhLS0gTWFyayAoYXVmIGR1bmtlbCBsZWljaHQgYXVmZ2VoZWxsdCkgLS0+CiAgPHJlY3QgeD0iNCIgeT0iNiIgd2lkdGg9IjM2IiBoZWlnaHQ9IjM2IiByeD0iMTAiIGZpbGw9InVybCgja2plbGxvV21EYXJrQmcpIi8+CiAgPHBhdGggZD0iTTIyIDkuNSBMMjUuMiAyMC41IEwzNiAyNCBMMjUuMiAyNy41IEwyMiAzOC41IEwxOC44IDI3LjUgTDggMjQgTDE4LjggMjAuNSBaIgogICAgICAgIGZpbGw9IiMwRjE3MkEiIGZpbGwtb3BhY2l0eT0iMC45MiIvPgogIDxwYXRoIGQ9Ik0yMiA5LjUgTDI1LjIgMjAuNSBMMjIgMjQgTDE4LjggMjAuNSBaIiBmaWxsPSIjRkI5MjNDIi8+CiAgPGNpcmNsZSBjeD0iMjIiIGN5PSIyNCIgcj0iMi4xIiBmaWxsPSIjMEYxNzJBIi8+CiAgPCEtLSBXb3J0bWFya2UgaGVsbCAoc2xhdGUtMTAwKSAtLT4KICA8dGV4dCB4PSI1NCIgeT0iMzIiIGZvbnQtZmFtaWx5PSJHZWlzdCwgJ0dlaXN0IFNhbnMnLCB1aS1zYW5zLXNlcmlmLCBzeXN0ZW0tdWksIC1hcHBsZS1zeXN0ZW0sICdTZWdvZSBVSScsIFJvYm90bywgQXJpYWwsIHNhbnMtc2VyaWYiCiAgICAgICAgZm9udC1zaXplPSIyNiIgZm9udC13ZWlnaHQ9IjYwMCIgbGV0dGVyLXNwYWNpbmc9Ii0wLjUiIGZpbGw9IiNGMUY1RjkiPmtqZWxsbzwvdGV4dD4KICA8Y2lyY2xlIGN4PSIxNTEiIGN5PSIzMyIgcj0iMyIgZmlsbD0iI0ZCOTIzQyIvPgo8L3N2Zz4K") !important;
}

/* 2b) Login-/Lock-Wortmarke = Inline-<svg> mit <path class=tw-fill-marketing-logo>.
       Klasse sitzt auf den paths, nicht auf dem svg -> via :has() das svg treffen,
       Inhalt ausblenden und kjello-Wortmarke als Hintergrund (themed). NUR die
       marketing-logo (Wortmarke), NICHT die illustration-logo (Deko-Grafiken). */
svg:has(path.tw-fill-marketing-logo) {
  background: url('/images/logo.svg') center/contain no-repeat !important;
}
.theme_dark svg:has(path.tw-fill-marketing-logo) {
  background-image: url('/images/logo-white.svg') !important;
}
svg:has(path.tw-fill-marketing-logo) * { visibility: hidden !important; }

/* 3) Ruhiger, hochwertiger Hintergrund (dezent, beide Themes) ---------------- */
body {
  background-image:
    radial-gradient(62% 48% at 50% -8%, rgba(37,99,235,0.12), transparent 70%),
    radial-gradient(34% 30% at 88% 112%, rgba(249,115,22,0.06), transparent 72%) !important;
  background-attachment: fixed !important;
}
body.theme_dark, .theme_dark body {
  background-image:
    radial-gradient(62% 48% at 50% -8%, rgba(37,99,235,0.20), transparent 70%),
    radial-gradient(34% 30% at 88% 112%, rgba(249,115,22,0.08), transparent 72%) !important;
}