/*
 * Landsteiner-Anpassung der Vaultwarden-Weboberflaeche.
 *
 * Wird per nginx vor </head> eingehaengt. Greift NICHT in einzelne Klassen der Bitwarden-App ein
 * (die aendern sich mit Updates), sondern ueberschreibt Marken-Variablen, die Schrift und die
 * Login-Ansicht. Markenbilder liegen unter /brand/ (von nginx ausgeliefert).
 *
 * Stil nach landsteiner.website: Inter-Schrift, dunkles Slate, Cyan-Akzent, eigenes Logo.
 */

@import url("https://fonts.bunny.net/css?family=inter:400,500,600,700,800");

:root, .theme_light, .theme_dark {
  /* Marken-Cyan (brand-700 = Knopffarbe, dunkel genug fuer weisse Schrift, WCAG AA) */
  --color-brand-050: #ecfeff; --color-brand-100: #cffafe; --color-brand-200: #a5f3fc;
  --color-brand-300: #67e8f9; --color-brand-400: #22d3ee; --color-brand-500: #06b6d4;
  --color-brand-600: #0891b2; --color-brand-700: #0e7490; --color-brand-800: #155e75;
  --color-brand-900: #164e63; --color-brand-950: #083344;
  --color-brand-600-rgb: 8,145,178; --color-brand-700-rgb: 14,116,144; --color-brand-950-rgb: 8,51,68;
}

/* Inter ueberall - wie auf der Website. */
html, body, .tw-font-sans, [class*="tw-font"] {
  font-family: "Inter", ui-sans-serif, system-ui, -apple-system, "Segoe UI", sans-serif !important;
}

/* ---- Logo im Kopf durch das Landsteiner-Wortmarke-Logo ersetzen ---- */
header a[href="#/"] bit-svg,
header a[href="#/"] svg { visibility: hidden; }
header a[href="#/"] {
  position: relative;
  background-repeat: no-repeat;
  background-position: left center;
  background-size: contain;
  min-width: 200px;
  min-height: 44px;
}
/* Login-Ansicht ist immer dunkel -> helles Logo. Innere App folgt dem gewaehlten Theme. */
body.layout_frontend header a[href="#/"],
body.theme_dark header a[href="#/"] { background-image: url("/brand/logo-on-dark.png"); }
body.theme_light:not(.layout_frontend) header a[href="#/"] { background-image: url("/brand/logo-on-light.png"); }
@media (max-width: 640px) { header a[href="#/"] { min-width: 150px; min-height: 36px; } }

/* ---- Anmelde-/Registrier-Ansicht im Website-Stil: dunkles Slate, grosszuegig ---- */
.theme_light body, body.layout_frontend,
.tw-bg-background, .tw-bg-background-alt {
  background-color: #020617 !important;   /* slate-950 wie die Website */
  color: #e2e8f0 !important;
}
/* Ueberschriften und Text aufhellen, damit sie auf dem dunklen Grund lesbar sind */
.layout_frontend .tw-text-main,
.layout_frontend h1, .layout_frontend h2, .layout_frontend label,
.layout_frontend .tw-text-headers { color: #f1f5f9 !important; }
.layout_frontend .tw-text-muted, .layout_frontend p { color: #94a3b8 !important; }

/* Die Login-Karte: etwas breiter, abgesetzt, weiche Ecken, Rahmen in Cyan-Naehe */
.layout_frontend main,
.layout_frontend [class*="tw-max-w-"] {
  max-width: 460px !important;
}
.layout_frontend form,
.layout_frontend .tw-rounded-xl.tw-bg-background {
  background: #0b1220 !important;
  border: 1px solid #1e293b !important;
  border-radius: 1rem !important;
  padding: 1.25rem !important;
  box-shadow: 0 10px 40px rgba(0,0,0,0.45) !important;
}

/* Eingabefelder im dunklen Stil. Breit gefasst (nur in der Login-/Registrier-Ansicht),
 * damit es unabhaengig von den genauen Bitwarden-Klassen greift. */
body.layout_frontend input,
body.layout_frontend select,
body.layout_frontend textarea,
body.layout_frontend bit-form-field,
body.layout_frontend bit-form-field div,
body.layout_frontend [class*="has(input"],          /* der Feld-Wrapper (arbitrary-variant div) */
body.layout_frontend [class*="tw-bg-background"]:not(body):not(footer) {
  background-color: #0f172a !important;
  color: #e2e8f0 !important;
  border-color: #334155 !important;
}
body.layout_frontend input::placeholder { color: #64748b !important; }

/* Alle Beschriftungen/Texte in der Login-Ansicht gut lesbar auf Dunkel. */
body.layout_frontend label,
body.layout_frontend span,
body.layout_frontend a:not([href="#/"]),
body.layout_frontend .tw-text-muted { color: #cbd5e1 !important; }

/* Groessere Tipp-Flaechen + kein iOS-Zoom auf dem Handy */
@media (max-width: 640px) {
  .vw-continue-login, button[type="submit"] { min-height: 3rem; font-size: 1rem; }
  input[type="email"], input[type="password"], input[type="text"] { font-size: 1rem; }
}

/* Rechtlicher Bitwarden-Hinweis: klein und zurueckhaltend. */
footer, p:has(> a[href*="bitwarden.com"]) { font-size: 0.72rem; opacity: 0.5; }

/* Weichere Ecken auf groesseren Schirmen. */
@media (min-width: 641px) { .tw-rounded-xl { border-radius: 0.9rem; } }