/* buildingsel Kunden-Login · Design „Nacht und Cyan“ (wie ui.css der buildingsel-App), 14.11.2026
   Wird per nginx sub_filter in die Authelia-Seiten gehängt (kunden.buildingsel.de/_buildingsel/theme.css).
   Authelia 4.39 nutzt Tailwind/shadcn mit CSS-Variablen, deshalb vor allem Variablen überschreiben. */
@font-face{font-family:Figtree;src:url(/_buildingsel/figtree-variable.ttf) format("truetype");font-weight:300 900;font-display:swap}

html:root,html:root[data-theme],html[data-theme] :root,[data-theme="light"],[data-theme="dark"],[data-theme="grey"]{
  --background:#0E1222 !important; --foreground:#F9F2DE !important;
  --card:#1A2238 !important; --card-foreground:#F9F2DE !important;
  --popover:#1A2238 !important; --popover-foreground:#F9F2DE !important;
  --primary:#00FFFF !important; --primary-foreground:#1A1D2E !important;
  --secondary:#00FFFF !important; --secondary-foreground:#1A1D2E !important;
  --muted:#202A46 !important; --muted-foreground:#8A93B8 !important;
  --accent:#202A46 !important; --accent-foreground:#F9F2DE !important;
  --destructive:#FF5C7A !important; --destructive-foreground:#0E1222 !important;
  --success:#34D399 !important; --warning:#F5B54A !important; --info:#7DD3FC !important;
  --border:#2A3558 !important; --input:#3D4A78 !important; --ring:#00FFFF !important;
  --radius:11px !important; --custom-icon:#00FFFF !important; --custom-loading-bar:#00FFFF !important;
  --divider:#2A3558 !important;
  color-scheme:dark;
}
html,body{background:#0E1222 !important;color:#F9F2DE !important}
body{font-family:Figtree,"Helvetica Neue",Arial,sans-serif !important;-webkit-font-smoothing:antialiased;
  background:radial-gradient(1100px 600px at 50% -10%,rgba(0,255,255,.10),transparent 60%),#0E1222 !important;min-height:100vh}
#root,#root *{font-family:inherit}
::selection{background:#00FFFF;color:#1A1D2E}

/* Karte um das Formular */
div[id$="-stage"] > div{background:#1A2238;border:1px solid #2A3558;border-radius:16px;
  box-shadow:0 0 0 1px rgba(0,255,255,.10),0 24px 60px -24px rgba(0,0,0,.8);padding:28px 32px 26px !important;margin-top:4vh}

/* Wortmarke statt Personen-Symbol */
svg#UserSvg{display:none !important}
div[id$="-stage"] .flex.flex-col.items-stretch > div:first-child:has(svg#UserSvg)::before{
  content:"buildingsel";display:block;font-weight:800;font-size:30px;letter-spacing:-.03em;color:#F9F2DE;line-height:1}
div[id$="-stage"] .flex.flex-col.items-stretch > div:first-child:has(svg#UserSvg)::after{
  content:"Kunden-Login";display:block;margin-top:8px;font-size:11px;font-weight:600;letter-spacing:.14em;text-transform:uppercase;color:#00FFFF}
h5{font-weight:700 !important;font-size:20px !important;letter-spacing:-.01em;margin-top:6px}

/* Felder */
input{background:#0E1222 !important;border-color:#3D4A78 !important;border-radius:11px !important;color:#F9F2DE !important}
input:focus-visible{border-color:#00FFFF !important;box-shadow:0 0 0 3px rgba(0,255,255,.18) !important}
label{color:#8A93B8 !important}

/* Knöpfe */
button.bg-primary{background:#00FFFF !important;color:#1A1D2E !important;font-weight:700 !important;border-radius:11px !important;
  text-transform:none !important;letter-spacing:0 !important;font-size:15px !important;height:46px !important;
  box-shadow:0 10px 28px -12px rgba(0,255,255,.55)}
button.bg-primary:hover{background:#7FFFFF !important}
#cancel-button,button[id*="cancel"]{background:transparent !important;color:#F9F2DE !important;border:1px solid #3D4A78 !important;box-shadow:none}
a,.text-primary{color:#00FFFF !important}
a:hover{color:#7FFFFF !important}

/* Kopfleiste der Einstellungen: Nacht statt Cyan-Fläche */
nav.bg-primary{background:#1A2238 !important;color:#F9F2DE !important;border-bottom:1px solid #2A3558;box-shadow:none !important}
nav.bg-primary .text-primary-foreground,nav.bg-primary button{color:#F9F2DE !important}

/* Fußzeile und Kleinkram */
[class*="text-muted-foreground"]{color:#8A93B8 !important}

/* Handy: Karte mit Rand */
@media (max-width:520px){
  div[id$="-stage"] > div{width:auto !important;margin:2vh 16px 0 !important;padding:24px 20px 22px !important}
}