/* ============================================================
   MivaaPay — Thème des pages d'auth (.auth-v1)
   Chargé UNIQUEMENT par layouts.auth, APRÈS predyko-admin.css.
   Scopé sous .auth-v1 : n'affecte ni le back-office ni le login
   sur-mesure (.plog).

   Nom de fichier historique (« -dark ») conservé pour ne pas casser les
   références de déploiement : le fichier porte désormais LES DEUX thèmes.
   Les valeurs par défaut sont celles du mode clair ; le mode sombre les
   surcharge sous `html.dark-layout` (classe posée par partials/theme-init).
   Rouge #E83E52, charbon, Inter, rayons 12/20.
   ============================================================ */

/* ---------- Jetons du thème clair (défaut) ----------
   L'accent-texte est assombri (#B21D30, 6.8:1 sur blanc) : le rouge de
   marque #E83E52 ne fait que 4.0:1 sur blanc, insuffisant en corps de texte.
   L'accent plein passe à #D62B41 (blanc dessus = 4.9:1). */
:root {
  --auth-bg: #F4F4F4;
  --auth-glow: rgba(232, 62, 82, .07);
  --auth-card: #FFFFFF;
  --auth-card-line: #E4E4E4;
  --auth-ink-1: #1D1D1B;
  --auth-ink-2: #4F4F4D;
  --auth-ink-3: #6E6E6C;
  --auth-field-bg: #FAFAFA;
  --auth-field-line: #D6D6D6;
  --auth-accent: #D62B41;
  --auth-accent-deep: #B21D30;
  --auth-accent-text: #B21D30;
  --auth-on-accent: #FFFFFF;
  --auth-secondary-bg: #EFEFEF;
  --auth-diag-opacity: .07;
}

html.dark-layout {
  --auth-bg: #0d0d0d;
  --auth-glow: rgba(232, 62, 82, .07);
  --auth-card: #171717;
  --auth-card-line: #2c2c2c;
  --auth-ink-1: #f4f4f4;
  --auth-ink-2: #a7a7a7;
  --auth-ink-3: #6f6f6f;
  --auth-field-bg: #1e1e1e;
  --auth-field-line: #3a3a3a;
  --auth-accent: #E83E52;
  --auth-accent-deep: #C9293D;
  --auth-accent-text: #E83E52;
  --auth-on-accent: #FFFFFF;
  --auth-secondary-bg: #262626;
  --auth-diag-opacity: .10;
}

/* Fond (seul le layout auth charge ce fichier) */
body { background: var(--auth-bg) !important; height: auto !important; }

.auth-wrapper.auth-v1 {
  min-height: 100vh;
  background:
    radial-gradient(1000px 460px at 100% -8%, var(--auth-glow), transparent 60%),
    var(--auth-bg) !important;
}
.auth-v1 .auth-inner { width: 100%; max-width: 430px; }

/* Carte */
.auth-v1 .card {
  position: relative;
  overflow: hidden;
  background: var(--auth-card) !important;
  border: 1px solid var(--auth-card-line) !important;
  border-radius: 20px !important;
  box-shadow: none !important;
}
.auth-v1 .card::before {
  content: "";
  position: absolute;
  top: -50px; right: -60px;
  width: 180px; height: 180px;
  background: #E83E52;
  opacity: var(--auth-diag-opacity);
  transform: rotate(28deg);
  border-radius: 26px;
  pointer-events: none;
}
.auth-v1 .card-body { position: relative; z-index: 1; padding: 32px 30px; }

/* Marque & titres */
.auth-v1 .brand-logo { margin-bottom: 6px; }
.auth-v1 .brand-text,
.auth-v1 .login-title {
  color: var(--auth-ink-1) !important;
  font-weight: 800 !important;
  font-size: 22px !important;
  letter-spacing: -.03em;
}
.auth-v1 .card-title { color: var(--auth-ink-1) !important; font-weight: 750 !important; }
.auth-v1 .card-text,
.auth-v1 p:not(.btn) { color: var(--auth-ink-2) !important; }
.auth-v1 label,
.auth-v1 .form-label { color: var(--auth-ink-2) !important; font-size: 12.5px; }

/* Logotype de marque, partagé par les pages d'authentification.
   Le SVG n'a pas de hauteur intrinsèque : sans cette règle, il s'étirerait à
   toute la largeur du conteneur. */
.plog-brand { display: block; color: var(--auth-ink-1); margin-bottom: 20px; }
.plog-brand svg { height: 28px; width: auto; display: block; }

/* Champs */
.auth-v1 .form-control,
.auth-v1 .form-select {
  background: var(--auth-field-bg) !important;
  border: 1.5px solid var(--auth-field-line) !important;
  color: var(--auth-ink-1) !important;
  border-radius: 12px !important;
  min-height: 48px;
  box-shadow: none !important;
}
.auth-v1 .form-control::placeholder { color: var(--auth-ink-3) !important; }

/* Auto-remplissage du navigateur.
   Chrome ignore `background` sur un champ qu'il a rempli lui-même et impose son
   propre fond clair : sur un formulaire sombre, les champs remplis viraient au
   blanc tandis que les champs vides restaient sombres. On passe donc par une
   ombre interne, seule propriété que le navigateur laisse peindre, et par
   -webkit-text-fill-color pour la couleur du texte.
   La transition démesurée retarde indéfiniment la reprise du fond natif. */
.auth-v1 .form-control:-webkit-autofill,
.auth-v1 .form-control:-webkit-autofill:hover,
.auth-v1 .form-control:-webkit-autofill:focus,
.auth-v1 .form-select:-webkit-autofill,
.auth-v1 .form-select:-webkit-autofill:focus {
  -webkit-box-shadow: 0 0 0 1000px var(--auth-field-bg) inset !important;
  box-shadow: 0 0 0 1000px var(--auth-field-bg) inset !important;
  -webkit-text-fill-color: var(--auth-ink-1) !important;
  caret-color: var(--auth-ink-1) !important;
  transition: background-color 100000s ease-in-out 0s;
}
.auth-v1 .form-control:focus,
.auth-v1 .form-select:focus { border-color: var(--auth-accent) !important; }
.auth-v1 .input-group-text {
  background: var(--auth-field-bg) !important;
  border: 1.5px solid var(--auth-field-line) !important;
  color: var(--auth-ink-3) !important;
}
/* Champs OTP (otpVerification) */
.auth-v1 .otp-input,
.auth-v1 input[type="number"].text-center {
  background: var(--auth-field-bg) !important;
  color: var(--auth-ink-1) !important;
  border: 1.5px solid var(--auth-field-line) !important;
}

/* Bouton primaire */
.auth-v1 .btn-primary {
  background: var(--auth-accent) !important;
  border: 0 !important;
  color: var(--auth-on-accent) !important;
  font-weight: 700 !important;
  border-radius: 12px !important;
  min-height: 50px;
}
.auth-v1 .btn-primary:hover { background: var(--auth-accent-deep) !important; }
.auth-v1 .btn-secondary {
  background: var(--auth-secondary-bg) !important;
  border-color: var(--auth-field-line) !important;
  color: var(--auth-ink-1) !important;
  border-radius: 12px !important;
}

/* Liens */
.auth-v1 a { color: var(--auth-accent-text) !important; }
.auth-v1 a:hover { color: var(--auth-accent-deep) !important; }
.auth-v1 .brand-logo a, .auth-v1 a.brand-logo { color: inherit !important; }

/* Onglets (si présents) */
.auth-v1 .nav-tabs { border-bottom-color: var(--auth-card-line) !important; }
.auth-v1 .nav-tabs .nav-link { color: var(--auth-ink-2) !important; border: 0 !important; background: none !important; }
.auth-v1 .nav-tabs .nav-link.active { color: var(--auth-ink-1) !important; border-bottom: 2px solid var(--auth-accent) !important; }

/* Séparateur */
.auth-v1 .divider .divider-text { color: var(--auth-ink-3) !important; }
.auth-v1 .divider .divider-text::before,
.auth-v1 .divider .divider-text::after { border-color: var(--auth-card-line) !important; }

/* ---------- Bascule jour/nuit (flottante, coin haut-droit) ---------- */
.auth-theme-toggle {
  position: fixed;
  top: 20px;
  right: 20px;
  z-index: 100;
  color: var(--auth-ink-2);
  background: var(--auth-card);
  border-color: var(--auth-card-line);
}
.auth-theme-toggle:hover { color: var(--auth-ink-1); }