/* Belus Group login chrome — Sovereign Gold on Deep Obsidian.
 * Shared inject for app login shells (GitLab, Zammad, LibreChat, LiteLLM, OpenBao).
 * Reference: Keycloak theme belus (@ /opt/keycloak/themes/belus).
 * NOTE: Chromium ignores HTTP Link: rel=stylesheet — always inject a real <link> in HTML.
 */
:root {
  --belus-gold: #c5a880;
  --belus-gold-dk: #a08860;
  --belus-obsidian: #0d1117;
  --belus-panel: #161b22;
  --belus-platinum: #f5f6f8;
  --belus-muted: #8b949e;
  --belus-edge: rgba(197, 168, 128, 0.28);
}

/* ---------- GitLab sign-in ---------- */
body.page-initializers-sessions,
body[data-page="sessions:new"],
body.login-page,
.login-page,
body.gl-h-full:has(.js-oauth-login),
.container.narrow {
  background-color: var(--belus-obsidian) !important;
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 28%, rgba(197, 168, 128, 0.08), transparent 62%) !important;
  color: var(--belus-platinum) !important;
}

body.page-initializers-sessions .navbar,
body[data-page="sessions:new"] .navbar,
.login-page .navbar-gitlab {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.page-initializers-sessions .container,
body[data-page="sessions:new"] .container,
.login-page .container {
  background: transparent !important;
}

body.page-initializers-sessions h1,
body[data-page="sessions:new"] h1,
.login-page h1 {
  color: var(--belus-platinum) !important;
  font-size: 1.15rem !important;
}

body.page-initializers-sessions .card,
body[data-page="sessions:new"] .gl-card,
body[data-page="sessions:new"] form,
.login-page form {
  background: var(--belus-panel) !important;
  border: 1px solid var(--belus-edge) !important;
  border-radius: 6px !important;
  border-top: 4px solid var(--belus-gold) !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45) !important;
  color: var(--belus-platinum) !important;
  padding: 1.25rem !important;
}

body.page-initializers-sessions label,
body[data-page="sessions:new"] label,
.login-page label {
  color: var(--belus-platinum) !important;
}

body.page-initializers-sessions .btn-confirm,
body[data-page="sessions:new"] .btn-confirm,
body[data-page="sessions:new"] button[type="submit"].btn-confirm,
.login-page .btn-success,
.login-page .js-sign-in-button {
  background-color: var(--belus-gold) !important;
  border-color: var(--belus-gold) !important;
  color: var(--belus-obsidian) !important;
  font-weight: 650 !important;
}

body.page-initializers-sessions .btn-default,
body[data-page="sessions:new"] .btn-default,
.login-page .btn-default {
  background: transparent !important;
  border-color: var(--belus-edge) !important;
  color: var(--belus-platinum) !important;
}

body.page-initializers-sessions a,
body[data-page="sessions:new"] a,
.login-page a {
  color: var(--belus-gold) !important;
}

body.page-initializers-sessions .footer-links,
body[data-page="sessions:new"] .footer-links,
.login-page .footer-links {
  display: none !important;
}

/* ---------- Zammad login (SPA; body often has no .login class) ---------- */
html:has(.btn--primary),
body:has(.btn--primary),
body:has(.auth-provider--openid-connect) {
  background-color: var(--belus-obsidian) !important;
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 28%, rgba(197, 168, 128, 0.08), transparent 62%) !important;
}

body:has(.btn--primary) #app,
body:has(.auth-provider--openid-connect) #app {
  background: transparent !important;
}

/* Outer white card → dark panel */
body:has(.btn--primary) #app > div,
body:has(.btn--primary) .login,
body:has(.btn--primary) .splash + * {
  background: transparent !important;
}

body:has(input[name="username"]) form,
body:has(.btn--primary) form {
  background: var(--belus-panel) !important;
  border: 1px solid var(--belus-edge) !important;
  border-top: 4px solid var(--belus-gold) !important;
  border-radius: 6px !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45) !important;
  color: var(--belus-platinum) !important;
}

.btn--primary,
button.btn--primary,
form button[type="submit"].btn--primary {
  background: var(--belus-gold) !important;
  background-color: var(--belus-gold) !important;
  border-color: var(--belus-gold) !important;
  color: var(--belus-obsidian) !important;
  font-weight: 650 !important;
}

.auth-provider--openid-connect {
  border-top: 3px solid var(--belus-gold) !important;
}

body:has(.btn--primary) a,
body:has(.auth-provider--openid-connect) a {
  color: var(--belus-gold) !important;
}

body:has(.btn--primary) .powered-by,
body:has(.btn--primary) footer {
  opacity: 0.35 !important;
}

/* ---------- LibreChat / LiteLLM / OpenBao (password present = login shell) ---------- */
html:has(input[type="password"]),
body:has(input[type="password"]) {
  background-color: var(--belus-obsidian) !important;
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 28%, rgba(197, 168, 128, 0.08), transparent 62%) !important;
  color: var(--belus-platinum) !important;
}

body:has(input[type="password"]) #root,
body:has(input[type="password"]) main,
body:has(input[type="password"]) [class*="min-h-screen"] {
  background-color: transparent !important;
  background: transparent !important;
}

/* Login card */
body:has(input[type="password"]) form,
body:has(input[type="password"]) form:has(input[type="password"]) {
  background: var(--belus-panel) !important;
  border: 1px solid var(--belus-edge) !important;
  border-top: 4px solid var(--belus-gold) !important;
  border-radius: 8px !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45) !important;
  color: var(--belus-platinum) !important;
}

body:has(input[type="password"]) h1,
body:has(input[type="password"]) h2,
body:has(input[type="password"]) label,
body:has(input[type="password"]) p {
  color: var(--belus-platinum) !important;
}

/* Primary CTAs → gold (beat Tailwind green / navy / blue) */
body:has(input[type="password"]) button[type="submit"],
body:has(input[type="password"]) input[type="submit"],
body:has(input[type="password"]) button.button.is-primary,
body.ember-application button.button.is-primary {
  background: var(--belus-gold) !important;
  background-color: var(--belus-gold) !important;
  background-image: none !important;
  border-color: var(--belus-gold) !important;
  color: var(--belus-obsidian) !important;
  font-weight: 650 !important;
}

body:has(input[type="password"]) a {
  color: var(--belus-gold) !important;
}

/* OpenBao Ember */
body.ember-application {
  background-color: var(--belus-obsidian) !important;
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 28%, rgba(197, 168, 128, 0.08), transparent 62%) !important;
}

body.ember-application .button.is-primary {
  background-color: var(--belus-gold) !important;
  border-color: var(--belus-gold) !important;
  color: var(--belus-obsidian) !important;
}

body.ember-application .login-form,
body.ember-application .auth-form,
body.ember-application .box {
  background: var(--belus-panel) !important;
  border: 1px solid var(--belus-edge) !important;
  border-top: 4px solid var(--belus-gold) !important;
  color: var(--belus-platinum) !important;
}

body.ember-application h1,
body.ember-application label,
body.ember-application .title,
body.ember-application .subtitle,
body.ember-application p {
  color: var(--belus-platinum) !important;
}

/* Outer white login shells (LibreChat / LiteLLM card wrappers) */
body:has(input[type="password"]) [class*="rounded-"]:has(form),
body:has(input[type="password"]) [class*="shadow"]:has(form),
body:has(input[name="username"]) [class*="rounded"]:has(form) {
  background: var(--belus-panel) !important;
  border: 1px solid var(--belus-edge) !important;
  border-top: 4px solid var(--belus-gold) !important;
  color: var(--belus-platinum) !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45) !important;
}

body:has(input[type="password"]) .bg-surface-submit,
body:has(input[type="password"]) [class*="bg-green"],
body:has(input[type="password"]) [class*="bg-emerald"] {
  background-color: var(--belus-gold) !important;
  color: var(--belus-obsidian) !important;
}

/* LibreChat logo sizing when Belus PNG/SVG is mounted */
body:has(input[type="password"]) img[alt*="BELUS"],
body:has(input[type="password"]) img[src*="logo"] {
  max-height: 56px !important;
  width: auto !important;
  object-fit: contain !important;
}

/* SSO secondary button: keep readable on light chips */
body:has(input[type="password"]) button:not([type="submit"]),
body:has(input[type="password"]) a[href*="openid"],
body:has(input[type="password"]) a[href*="oauth"] {
  color: var(--belus-obsidian) !important;
  border-color: var(--belus-edge) !important;
}

/* OpenBao: replace .openbao-logo with Belus lockup */
body.ember-application svg.openbao-logo {
  display: none !important;
}

body.ember-application .brand-icon-large .hs-icon,
body.ember-application .brand-icon-large {
  display: block !important;
  width: 160px !important;
  height: 56px !important;
  background: url("/belus-logo.png") center / contain no-repeat !important;
  margin: 0 auto 0.75rem !important;
}

body.ember-application h1 {
  font-size: 0 !important;
  line-height: 0 !important;
}
body.ember-application h1::after {
  content: "Sign in";
  display: block;
  font-size: 1.35rem !important;
  line-height: 1.4 !important;
  color: var(--belus-platinum) !important;
  font-weight: 600 !important;
  margin-bottom: 0.5rem;
}

body.ember-application img[src*="bao"],
body.ember-application img[alt*="OpenBao"],
body.ember-application .brand img,
body.ember-application .logo img {
  content: url("/belus-logo.png") !important;
  width: 120px !important;
  height: auto !important;
  max-height: 72px !important;
  object-fit: contain !important;
}

body.ember-application footer,
body.ember-application .footer {
  opacity: 0.35 !important;
}

/* LiteLLM: replace 🚅 LiteLLM wordmark (h2) + mute alert chrome */
body:has(input[name="username"]) h2.text-3xl,
body:has(input[type="password"]) h2.text-3xl.font-semibold,
body:has(input[name="username"]) h2.font-semibold {
  font-size: 0 !important;
  line-height: 0 !important;
  color: transparent !important;
  width: 180px !important;
  min-height: 56px !important;
  padding: 0 !important;
  margin: 0 0 0.75rem 0 !important;
  background: url("/ui/belus-logo.png") left center / contain no-repeat !important;
}

body:has(input[name="username"]) p.text-sm.text-muted-foreground {
  font-size: 0 !important;
}
body:has(input[name="username"]) p.text-sm.text-muted-foreground::after {
  content: "Access your Belus admin UI.";
  font-size: 0.875rem !important;
  color: var(--belus-muted) !important;
  line-height: 1.4 !important;
}

body:has(input[name="username"]) [class*="group/card"],
body:has(input[type="password"]) [class*="group/card"] {
  background: var(--belus-panel) !important;
  border: 1px solid var(--belus-edge) !important;
  border-top: 4px solid var(--belus-gold) !important;
  color: var(--belus-platinum) !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45) !important;
  ring: none !important;
}

body:has(input[name="username"]) [class*="group/alert"],
body:has(input[name="username"]) [role="alert"],
body:has(input[name="username"]) .bg-blue-50,
body:has(input[name="username"]) [class*="blue"] {
  background: rgba(197, 168, 128, 0.08) !important;
  border-color: var(--belus-edge) !important;
  color: var(--belus-muted) !important;
}

/* NetBird login — .nb-logo is the wordmark host */
html.dark,
html.dark body,
body:has(.nb-logo),
body:has(.nb-container) {
  background-color: var(--belus-obsidian) !important;
  background-image:
    radial-gradient(ellipse 70% 55% at 50% 28%, rgba(197, 168, 128, 0.08), transparent 62%) !important;
  color: var(--belus-platinum) !important;
}

.nb-logo svg {
  display: none !important;
}

.nb-logo {
  width: 180px !important;
  height: 48px !important;
  background: url("/belus-logo.png") left center / contain no-repeat !important;
  margin-bottom: 1rem !important;
}

body:has(.nb-logo) .nb-container,
body:has(.nb-logo) [class*="card"],
body:has(.nb-logo) form {
  background: var(--belus-panel) !important;
  border: 1px solid var(--belus-edge) !important;
  border-top: 4px solid var(--belus-gold) !important;
  border-radius: 8px !important;
  box-shadow: 0 24px 48px rgba(0, 0, 0, 0.45) !important;
  color: var(--belus-platinum) !important;
}

body:has(.nb-logo) button,
body:has(.nb-logo) a[role="button"],
body:has(.nb-logo) [class*="btn"] {
  border-color: var(--belus-edge) !important;
}

body:has(.nb-logo) button:first-of-type,
body:has(.nb-logo) a:has(+ a),
body:has(.nb-logo) button.bg-primary,
body:has(.nb-logo) [class*="bg-orange"],
body:has(.nb-logo) [class*="bg-primary"] {
  background: var(--belus-gold) !important;
  background-color: var(--belus-gold) !important;
  color: var(--belus-obsidian) !important;
  border-color: var(--belus-gold) !important;
  font-weight: 650 !important;
}

body:has(.nb-logo) a {
  color: var(--belus-gold) !important;
}