/* ==========================================================================
   Legidia branding — overlay LibreChat (pages /login /register /forgot-password)
   Identité visuelle « Legidia v5 » importée du site corporate.
   Toutes les règles sont scopées à .legidia-auth-page : aucun impact sur le chat.
   ========================================================================== */

@import url("https://fonts.googleapis.com/css2?family=Bricolage+Grotesque:wght@400;500;700;800&family=JetBrains+Mono:wght@400;500&display=swap");

:root {
  --legidia-paper:   #ECE8E0;
  --legidia-paper-2: #E4DFD4;
  --legidia-paper-3: #F2EFE8;

  --legidia-ink-900: #1F1E1B;
  --legidia-ink-800: #2A2925;
  --legidia-ink-700: #3A3935;
  --legidia-ink-500: #6B685F;
  --legidia-ink-300: #ACA89D;

  --legidia-accent-violet: #5F4BFF;
  --legidia-accent-blue:   #6A7CFF;
  --legidia-accent-lime:   #DDE76A;
  --legidia-accent-peach:  #F4B58A;

  --legidia-font-display: "Bricolage Grotesque", "Helvetica Neue", Helvetica, Arial, sans-serif;
  --legidia-font-mono:    "JetBrains Mono", ui-monospace, "SFMono-Regular", Menlo, monospace;
}

/* --------------------------------------------------------------------------
   Surface globale : papier chaud, typo Bricolage
   -------------------------------------------------------------------------- */
body.legidia-auth-page,
body.legidia-auth-page #root,
body.legidia-auth-page main {
  background: var(--legidia-paper) !important;
  color: var(--legidia-ink-900) !important;
  font-family: var(--legidia-font-display) !important;
  -webkit-font-smoothing: antialiased;
}

/* Header et footer LibreChat : ils gardent un fond blanc par défaut qui crée
   une bande visible. On les rend transparents pour qu'ils se fondent dans le
   fond papier, tout en gardant leurs enfants (toggle dark/light, sélecteur
   de langue, mentions). */
body.legidia-auth-page header,
body.legidia-auth-page footer,
body.legidia-auth-page nav {
  background: transparent !important;
  border: none !important;
  box-shadow: none !important;
}

body.legidia-auth-page * {
  font-family: var(--legidia-font-display) !important;
}

body.legidia-auth-page code,
body.legidia-auth-page pre,
body.legidia-auth-page kbd {
  font-family: var(--legidia-font-mono) !important;
}

/* --------------------------------------------------------------------------
   Logo
   ----
   LibreChat 0.8.5 affiche son logo en haut à gauche de la page d'auth (header).
   On masque ce logo natif et on insère le logo Legidia centré au-dessus du
   formulaire via un pseudo-élément ::before sur le <form>.

   Cette approche évite les problèmes de dimensions intrinsèques SVG : le
   pseudo-élément a des dimensions imposées en CSS qui contiennent toujours
   l'image quel que soit son viewBox.
   -------------------------------------------------------------------------- */
/* Cacher le wrapper complet du logo natif (pas juste l'img : sinon le div
   parent garde sa hauteur Tailwind h-10 + mt-6 → bande blanche fantôme).
   Markup ciblé : <div class="mt-6 h-10 w-full bg-cover"><img src="assets/logo.svg" ...></div> */
body.legidia-auth-page div:has(> img[src*="logo"]),
body.legidia-auth-page div:has(> img[alt*="logo" i]),
body.legidia-auth-page div:has(> img[alt*="librechat" i]) {
  display: none !important;
}

/* Footer vide LibreChat (rôle contentinfo) : élément placeholder qui occupe
   de l'espace même sans contenu → on le supprime du layout. */
body.legidia-auth-page [role="contentinfo"]:empty {
  display: none !important;
}

body.legidia-auth-page form::before {
  content: "";
  display: block;
  width: 80px;
  height: 80px;
  margin: 0 auto 24px;
  background-image: url("/branding/logo.png");
  background-size: contain;
  background-repeat: no-repeat;
  background-position: center;
}

/* Wordmark "LegidIA" bicolore dans le H1 — injecté par le script JS sous
   forme de <span class="legidia-mark"><span>Legid</span><span>IA</span></span>.
   Réplique le wordmark du site vitrine (frontend/QuiSommesNousApp.vue:103). */
body.legidia-auth-page h1 .legidia-mark > span:last-child {
  color: var(--legidia-accent-violet) !important;
}

/* --------------------------------------------------------------------------
   Carte du formulaire (login / register)
   LibreChat utilise un conteneur central blanc/sombre arrondi.
   On le repeint en papier clair + ombre douce.
   -------------------------------------------------------------------------- */
body.legidia-auth-page form,
body.legidia-auth-page form > div {
  background: transparent !important;
  border: none !important;
}

/* Titre principal de la page (Welcome back / Create account) */
body.legidia-auth-page h1,
body.legidia-auth-page h2 {
  color: var(--legidia-ink-900) !important;
  font-weight: 800 !important;
  letter-spacing: -0.03em !important;
}

/* --------------------------------------------------------------------------
   Inputs (email, password, name)
   -------------------------------------------------------------------------- */
body.legidia-auth-page input[type="text"],
body.legidia-auth-page input[type="email"],
body.legidia-auth-page input[type="password"],
body.legidia-auth-page input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
  background: var(--legidia-paper-3) !important;
  border: 1px solid rgba(31, 30, 27, 0.15) !important;
  border-radius: 12px !important;
  color: var(--legidia-ink-900) !important;
  padding: 14px 16px !important;
  font-size: 15px !important;
  transition: border-color 0.2s, background 0.2s;
}

body.legidia-auth-page input:focus {
  outline: none !important;
  border-color: var(--legidia-accent-violet) !important;
  background: #ffffff !important;
  box-shadow: 0 0 0 3px rgba(95, 75, 255, 0.15) !important;
}

body.legidia-auth-page label {
  color: var(--legidia-ink-700) !important;
  font-weight: 500 !important;
  font-size: 14px !important;
}

/* --------------------------------------------------------------------------
   Bouton primaire (Continue / Sign in / Register)
   -------------------------------------------------------------------------- */
body.legidia-auth-page button[type="submit"],
body.legidia-auth-page button[data-testid="login-button"],
body.legidia-auth-page button[aria-label*="continue" i],
body.legidia-auth-page button[aria-label*="sign in" i],
body.legidia-auth-page button[aria-label*="register" i] {
  background: var(--legidia-ink-900) !important;
  color: var(--legidia-paper) !important;
  border: none !important;
  border-radius: 999px !important;
  padding: 16px 26px !important;
  font-weight: 500 !important;
  font-size: 15px !important;
  transition: transform 0.25s cubic-bezier(0.22, 1, 0.36, 1), background 0.25s !important;
}

body.legidia-auth-page button[type="submit"]:hover,
body.legidia-auth-page button[data-testid="login-button"]:hover {
  background: var(--legidia-ink-800) !important;
  transform: translateY(-1px) !important;
}

/* --------------------------------------------------------------------------
   Liens secondaires (Forgot password, Sign up, Sign in, mention CGU)
   -------------------------------------------------------------------------- */
body.legidia-auth-page a {
  color: var(--legidia-accent-violet) !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

body.legidia-auth-page a:hover {
  text-decoration: underline !important;
}

/* --------------------------------------------------------------------------
   Séparateurs (« or », « OR » entre champs et SSO si activé)
   -------------------------------------------------------------------------- */
body.legidia-auth-page hr {
  border-color: rgba(31, 30, 27, 0.12) !important;
}

/* --------------------------------------------------------------------------
   Sélecteur de langue (footer de la page d'auth)
   -------------------------------------------------------------------------- */
body.legidia-auth-page select {
  background: transparent !important;
  border: 1px solid rgba(31, 30, 27, 0.12) !important;
  border-radius: 8px !important;
  color: var(--legidia-ink-700) !important;
  padding: 6px 10px !important;
}

/* ==========================================================================
   DARK MODE
   LibreChat utilise la convention Tailwind `html.dark`. Quand l'utilisateur
   toggle via le bouton lune/soleil, la classe est ajoutée à <html>.
   En mode sombre on inverse : fond ink, texte paper, logo blanchâtre.
   ========================================================================== */

html.dark body.legidia-auth-page,
html.dark body.legidia-auth-page #root,
html.dark body.legidia-auth-page main {
  background: var(--legidia-ink-900) !important;
  color: var(--legidia-paper) !important;
}

html.dark body.legidia-auth-page h1,
html.dark body.legidia-auth-page h2 {
  color: var(--legidia-paper) !important;
}

/* "Legid" passe en paper, "IA" reste violet (l'accent ressort très bien
   sur le fond sombre). */
html.dark body.legidia-auth-page h1 .legidia-mark > span:first-child {
  color: var(--legidia-paper) !important;
}

/* Logo : version claire sur fond sombre (logo-dark.png = pétales lime
   visibles sur ink-900). */
html.dark body.legidia-auth-page form::before {
  background-image: url("/branding/logo-dark.png") !important;
}

/* Inputs : fond translucide sur ink, bordure paper diffuse, focus lime
   (cohérent avec le style des inputs sombre du site vitrine). */
html.dark body.legidia-auth-page input[type="text"],
html.dark body.legidia-auth-page input[type="email"],
html.dark body.legidia-auth-page input[type="password"],
html.dark body.legidia-auth-page input:not([type="checkbox"]):not([type="radio"]):not([type="submit"]) {
  background: rgba(255, 255, 255, 0.06) !important;
  border: 1px solid rgba(255, 255, 255, 0.14) !important;
  color: var(--legidia-paper) !important;
}

html.dark body.legidia-auth-page input:focus {
  border-color: var(--legidia-accent-lime) !important;
  background: rgba(255, 255, 255, 0.09) !important;
  box-shadow: 0 0 0 3px rgba(221, 231, 106, 0.18) !important;
}

html.dark body.legidia-auth-page label {
  color: rgba(236, 232, 224, 0.7) !important;
}

/* Bouton primaire : inversion — fond paper, texte ink. */
html.dark body.legidia-auth-page button[type="submit"],
html.dark body.legidia-auth-page button[data-testid="login-button"] {
  background: var(--legidia-paper) !important;
  color: var(--legidia-ink-900) !important;
}

html.dark body.legidia-auth-page button[type="submit"]:hover,
html.dark body.legidia-auth-page button[data-testid="login-button"]:hover {
  background: var(--legidia-paper-3) !important;
}

/* Liens secondaires : violet plus clair pour rester lisible sur ink-900. */
html.dark body.legidia-auth-page a {
  color: var(--legidia-accent-blue) !important;
}

html.dark body.legidia-auth-page hr {
  border-color: rgba(236, 232, 224, 0.12) !important;
}

html.dark body.legidia-auth-page select {
  border: 1px solid rgba(236, 232, 224, 0.14) !important;
  color: rgba(236, 232, 224, 0.7) !important;
}