/* Auth/Login page styles.
   Extracted from renderAuthLoginPage() in panel/webPanel.js.
   Tenant theming is applied via a <body> class (e.g. body.tenant-sd)
   instead of server-side string interpolation. */

:root{
  --bg0:#070a12;
  --bg1:#0b0e14;
  --card:rgba(17,24,39,.78);
  --border:rgba(148,163,184,.22);
  --border2:rgba(148,163,184,.35);
  --text:#e5e7eb;
  --muted:rgba(229,231,235,.7);
  --accent1:#4f46e5;
  --accent2:#06b6d4;
  /* Eingabefeld-Fläche. War an beiden Stellen als rgba(11,18,32,.85) hartkodiert
     und blieb dadurch unter V3 marineblau, obwohl V3 keine Navy-Palette mehr hat.
     Default identisch zum bisherigen Literal → V1/V2 unverändert. */
  --field:rgba(11,18,32,.85);
}
*{box-sizing:border-box}
body{
  font-family:system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  color:var(--text);
  background:
    radial-gradient(1000px 500px at 20% 10%, rgba(79,70,229,.22), transparent 60%),
    radial-gradient(900px 500px at 80% 20%, rgba(6,182,212,.14), transparent 55%),
    radial-gradient(700px 450px at 40% 95%, rgba(251,191,36,.08), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
  display:flex;
  align-items:center;
  justify-content:center;
  min-height:100vh;
  margin:0;
  padding:24px;
}
.card{
  width:min(420px, 100%);
  background:var(--card);
  border:1px solid var(--border);
  border-radius:16px;
  padding:22px;
  box-shadow:0 18px 60px rgba(0,0,0,.45);
  backdrop-filter:blur(10px);
}
h1{font-size:18px;margin:0 0 6px}
.sub{font-size:12px;color:var(--muted);margin:0 0 14px}
label{display:block;font-size:12px;color:var(--muted);margin:12px 0 6px}
input{
  width:100%;
  padding:11px 12px;
  border-radius:12px;
  border:1px solid var(--border);
  background:var(--field);
  color:var(--text);
  outline:none;
}
input:focus{border-color:var(--border2);box-shadow:0 0 0 3px rgba(79,70,229,.18)}
.rememberRow{
  display:flex;
  align-items:center;
  gap:8px;
  margin-top:10px;
  color:var(--muted);
  font-size:12px;
  user-select:none;
  cursor:pointer;
}
.rememberRow input{
  width:auto;
  margin:0;
  padding:0;
  border-radius:6px;
  border:1px solid var(--border);
  background:var(--field);
  box-shadow:none;
  accent-color:var(--accent2);
}
.rememberRow input:focus{
  box-shadow:none;
  border-color:var(--border2);
}
button{
  width:100%;
  margin-top:14px;
  padding:11px 12px;
  border-radius:12px;
  border:0;
  background:linear-gradient(135deg, var(--accent1), var(--accent2));
  color:white;
  font-weight:700;
  cursor:pointer;
}
button:hover{filter:brightness(1.05)}
.discordLoginBtn{
  display:block;
  width:100%;
  margin-top:14px;
  padding:11px 12px;
  border-radius:12px;
  border:0;
  background:linear-gradient(135deg, var(--accent1), var(--accent2));
  color:white;
  font-weight:700;
  text-align:center;
  text-decoration:none;
  cursor:pointer;
}
.discordLoginBtn:hover{filter:brightness(1.05)}
.err{margin-top:10px;color:#fecaca;font-size:13px}

/* Tenant: SD (2. Behörde) — applied via body.tenant-sd */
body.tenant-sd{
  --bg0:#050c08;--bg1:#0b1610;
  --card:rgba(14,30,18,.80);
  --border:rgba(100,162,80,.20);--border2:rgba(100,162,80,.36);
  --text:#d8e8d2;--muted:rgba(216,232,210,.70);
  --accent1:#5ea832;--accent2:#c9a527;
  background:
    radial-gradient(1000px 500px at 20% 10%,rgba(40,83,26,.26),transparent 60%),
    radial-gradient(900px 500px at 80% 20%,rgba(201,165,39,.12),transparent 55%),
    radial-gradient(700px 450px at 40% 95%,rgba(22,55,28,.16),transparent 60%),
    linear-gradient(180deg,var(--bg0),var(--bg1));
}
body.tenant-sd input:focus{border-color:var(--border2);box-shadow:0 0 0 3px rgba(63,122,34,.18)}

/* Design V3 "Command Console" — applied via body.design-v3, same token-remap
   trick as body.tenant-sd above. Mirrors panel/assets/css/ucp.css Stage 0. */
body.design-v3{
  --bg0:#0a0d12;--bg1:#0a0d12;
  --card:rgba(18,22,29,.86);
  --border:rgba(255,255,255,.08);--border2:rgba(255,255,255,.16);
  --text:#e7ecf1;--muted:#8592a0;
  --accent1:#c9a35a;--accent2:#c9a35a;
  --field:rgba(12,16,22,.9);
  /* Akzent zusaetzlich als RGB-Tripel + Textfarbe auf der Akzentflaeche,
     damit V4 (unten) beides umfaerben kann, ohne die Regeln zu duplizieren. */
  --accentRGB:201,163,90;
  --onaccent:#221a0c;
  font-family:'Manrope',system-ui,-apple-system,Segoe UI,Roboto,Arial,sans-serif;
  background:
    radial-gradient(900px 460px at 50% 0%, rgba(var(--accentRGB),.08), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}
body.design-v3 .card{box-shadow:0 20px 60px rgba(0,0,0,.5);backdrop-filter:none}
body.design-v3 input:focus{border-color:var(--border2);box-shadow:0 0 0 3px rgba(var(--accentRGB),.16)}
body.design-v3 button,body.design-v3 .discordLoginBtn{color:var(--onaccent);font-weight:700}
body.design-v3 .rememberRow input{accent-color:var(--accent1)}

/* Tenant SD unter V3. Ohne diesen Block sah der BCSD-Login exakt aus wie der
   LSPD-Login: body.tenant-sd und body.design-v3 sind gleich spezifisch (0,1,1),
   V3 steht später im Blatt und überschrieb damit die komplette SD-Identität.
   Der kombinierte Selektor (0,2,0) gewinnt gegen beide. Übernommen wird die
   V3-Struktur (flache Flächen, Manrope, kein Blur), zurückgeholt wird das
   BCSD-Grün als Akzent — Gold ist die LSPD-Identitätsfarbe. */
body.design-v3.tenant-sd{
  --bg0:#070d09;--bg1:#070d09;
  --card:rgba(16,26,19,.86);
  --border:rgba(140,200,120,.12);--border2:rgba(140,200,120,.24);
  --text:#e2ece0;--muted:#8d9b8c;
  --accent1:#5ea832;--accent2:#5ea832;
  --field:rgba(10,18,12,.9);
  background:
    radial-gradient(900px 460px at 50% 0%, rgba(94,168,50,.09), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}
body.design-v3.tenant-sd input:focus{border-color:var(--border2);box-shadow:0 0 0 3px rgba(94,168,50,.18)}
body.design-v3.tenant-sd button,body.design-v3.tenant-sd .discordLoginBtn{color:#0c1a08}

/* Design V4 "Modern (Farbig)" — Struktur von V3, andere Farbfamilie. Der
   Server setzt bei V4 beide Klassen (design-v3 design-v4), die V3-Regeln
   oben greifen also weiter; hier stehen nur die Tokens.
   LSPD: Navy-Flaechen + blauer Akzent. */
body.design-v4{
  --bg0:#060b16;--bg1:#060b16;
  --card:rgba(13,22,38,.86);
  --border:rgba(99,145,209,.16);--border2:rgba(99,145,209,.30);
  --accent1:#3f87dd;--accent2:#3f87dd;
  --field:rgba(9,15,26,.9);
  --accentRGB:63,135,221;
  --onaccent:#04101d;
  background:
    radial-gradient(900px 460px at 50% 0%, rgba(var(--accentRGB),.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}
/* Wie beim V3-Pendant: der kombinierte Selektor (0,2,0) ist noetig, sonst
   gewaenne body.design-v3.tenant-sd von oben und der BCSD-Login bliebe
   unveraendert. BCSD bekommt statt Blau die Gruentoene der Behoerde. */
body.design-v4.tenant-sd{
  --bg0:#050c08;--bg1:#050c08;
  --card:rgba(13,26,17,.86);
  --border:rgba(100,162,80,.20);--border2:rgba(100,162,80,.34);
  --text:#e2ece0;--muted:#8d9b8c;
  --accent1:#5ea832;--accent2:#5ea832;
  --field:rgba(8,16,10,.9);
  --accentRGB:94,168,50;
  --onaccent:#06120a;
  background:
    radial-gradient(900px 460px at 50% 0%, rgba(var(--accentRGB),.10), transparent 60%),
    linear-gradient(180deg, var(--bg0), var(--bg1));
}