/* ============================================================
   login.css — Refonte compacte de la PREMIÈRE CONNEXION.
   Chargé APRÈS theme-light.css : contrôle total du dialog #loginDialog
   en mode login « normal ». L'écran MFA (#mfaLoginBox) garde son propre
   style : toutes les règles de gabarit sont neutralisées dès qu'il est
   présent via :not(:has(#mfaLoginBox)).
   Objectifs : fenêtre plus petite, champs/boutons compacts, œil bien
   visible, et cohérence stricte sombre / clair (plus de « mélange »).
   ============================================================ */

/* ---- Fenêtre : compacte et centrée ---- */
#loginDialog:not(:has(#mfaLoginBox)) {
  width: min(360px, calc(100vw - 32px)) !important;
  max-width: min(360px, calc(100vw - 32px)) !important;
  min-width: 0 !important;
  padding: 26px 26px 22px !important;
  border-radius: 16px !important;
}

/* ---- Formulaire : espacement resserré ---- */
#loginDialog .login-box {
  gap: 9px !important;
}

/* ---- Titre + petit texte d'intro ---- */
#loginDialog .login-box h2 {
  margin: 0 0 1px !important;
  font-size: 20px !important;
  font-weight: 800 !important;
  letter-spacing: .2px;
  text-align: center;
}
#loginDialog .login-intro {
  margin: 0 0 8px !important;
  font-size: 13px !important;
  line-height: 1.45;
  text-align: center;
  color: #93b3cc;
}

/* ---- Champs : nettement moins hauts ---- */
#loginDialog .login-box input {
  height: 42px !important;
  padding: 9px 12px !important;
  font-size: 14.5px !important;
  border-radius: 9px !important;
}

/* ---- Boutons : compacts, hiérarchisés ---- */
#loginDialog .login-box button { min-height: 0 !important; }

#loginDialog .login-box .primary {
  height: 44px !important;
  font-size: 15px !important;
  font-weight: 800 !important;
  border-radius: 9px !important;
  margin-top: 3px;
}
#loginDialog .login-box button[value="cancel"] {
  height: 37px !important;
  font-size: 13.5px !important;
  border-radius: 9px !important;
  background: transparent !important;
  opacity: .85;
}
#loginDialog .login-box .link-btn {
  font-size: 12.5px !important;
  padding: 4px 0 !important;
  margin-top: 1px;
}

/* ---- Œil « afficher / masquer » : bien visible ---- */
#loginDialog .f6-eye-btn {
  color: #7fd0f5 !important;
  opacity: 1 !important;
}
#loginDialog .f6-eye-btn:hover { color: #00d8ff !important; background: rgba(0,180,255,.14) !important; }

/* ============================================================
   THÈME CLAIR — chaque élément est repeint explicitement pour
   éliminer tout mélange sombre / clair.
   ============================================================ */
html.light-theme #loginDialog:not(:has(#mfaLoginBox)) {
  background: linear-gradient(150deg, #ffffff, #eef5fc) !important;
  border: 1px solid #b8cfe6 !important;
  color: #17324a !important;
  box-shadow: 0 18px 60px rgba(10,40,80,.18) !important;
}
html.light-theme #loginDialog .login-box h2 { color: #0a5aa8 !important; }
html.light-theme #loginDialog .login-intro { color: #5a768f !important; }

html.light-theme #loginDialog .login-box input {
  background: #ffffff !important;
  border: 1px solid #9db9d2 !important;
  color: #12283d !important;
}
html.light-theme #loginDialog .login-box input::placeholder { color: #8098ac !important; }
html.light-theme #loginDialog .login-box input:focus {
  border-color: #0a6fe0 !important;
  box-shadow: 0 0 0 3px rgba(10,111,224,.18) !important;
}

html.light-theme #loginDialog .login-box .primary {
  background: linear-gradient(180deg, #0a6fe0, #0550b8) !important;
  color: #fff !important;
  border: 0 !important;
}
html.light-theme #loginDialog .login-box button[value="cancel"] {
  color: #274864 !important;
  border: 1px solid #b8cfe6 !important;
}
html.light-theme #loginDialog .f6-eye-btn { color: #3f6f92 !important; }
html.light-theme #loginDialog .f6-eye-btn:hover { color: #0a6fe0 !important; background: rgba(10,111,224,.1) !important; }