/*
 * voltea_theme — voltea-login.css  (rework A→Z, 17/07/2026)
 *
 * Page de connexion brandée. Chargée via web_include_css (pages website), donc
 * TOUT est scopé à `body[data-path="login"]` pour ne jamais déborder ailleurs.
 *
 * Structure Frappe ciblée (frappe/www/login.html) :
 *   section.for-login
 *     ├─ .page-card-head   (logo + <h4> titre)  ← AU-DESSUS de la carte, sur le navy
 *     └─ .login-content.page-card   (carte blanche : formulaire)
 *
 * Règle charte : aucune couleur en dur hors fallback — tokens _brand-tokens.css
 * (chargé avant ce fichier dans web_include_css).
 */

/* ============================================================
 * Fond immersif : navy + halos vert/ambre discrets + grille de points
 * ============================================================ */
body[data-path="login"] {
  min-height: 100vh;
  background-color: var(--voltea-navy, #0B1630);
  background-image:
    radial-gradient(820px circle at 14% 12%, rgba(78, 143, 60, 0.20), transparent 55%),
    radial-gradient(720px circle at 88% 90%, rgba(236, 157, 50, 0.15), transparent 52%),
    linear-gradient(160deg, #0B1630 0%, #0E1D3E 45%, #0B1630 100%);
  background-attachment: fixed;
}
body[data-path="login"]::before {
  content: "";
  position: fixed;
  inset: 0;
  background-image: radial-gradient(rgba(255, 255, 255, 0.05) 1px, transparent 1px);
  background-size: 22px 22px;
  pointer-events: none;
  z-index: 0;
}
/* Login immersif : on masque la navbar/footer du site web (scopé au login). */
body[data-path="login"] .navbar,
body[data-path="login"] header.sticky-top,
body[data-path="login"] .web-footer,
body[data-path="login"] footer { display: none !important; }

/* ============================================================
 * Colonne de connexion centrée, au-dessus du fond
 * ============================================================ */
body[data-path="login"] .for-login {
  position: relative;
  z-index: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 32px 16px;
}

/* ---- Logo + titre, au-dessus de la carte (texte clair sur navy) ---- */
body[data-path="login"] .page-card-head {
  border: 0;
  padding: 0;
  margin-bottom: 22px;
  text-align: center;
}
/* Logo dans un médaillon clair → lisible sur le navy quel que soit le logo. */
body[data-path="login"] .page-card-head .app-logo {
  display: inline-block;
  width: auto;
  height: 84px;
  max-width: 200px;
  margin: 0 auto 16px;
  padding: 10px 20px;
  background: #fff;
  border-radius: 18px;
  box-shadow: 0 10px 24px rgba(0, 0, 0, 0.30);
  box-sizing: content-box;
}
body[data-path="login"] .page-card-head h4 {
  color: #fff;
  font-weight: 600;
  font-size: 20px;
  letter-spacing: 0.2px;
  margin: 0;
}

/* ============================================================
 * La carte
 * ============================================================ */
body[data-path="login"] .login-content.page-card,
body[data-path="login"] .for-login .page-card {
  width: 100%;
  max-width: 410px;
  margin: 0 auto;
  padding: 34px 34px 28px;
  background: var(--card-bg, #fff);
  border: 1px solid rgba(255, 255, 255, 0.06);
  border-radius: var(--voltea-radius-lg, 12px);
  box-shadow:
    0 24px 60px -14px rgba(0, 0, 0, 0.5),
    0 0 0 1px rgba(11, 22, 48, 0.04);
  position: relative;
  overflow: hidden;
  animation: voltea-login-in 420ms cubic-bezier(0.16, 0.84, 0.44, 1) both;
}
/* Filet d'accent charté en haut de carte */
body[data-path="login"] .login-content.page-card::before {
  content: "";
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 3px;
  background: linear-gradient(
    90deg,
    var(--voltea-navy, #0B1630),
    var(--voltea-green, #4E8F3C) 68%,
    var(--voltea-amber, #EC9D32)
  );
}
@keyframes voltea-login-in {
  from { opacity: 0; transform: translateY(14px); }
  to   { opacity: 1; transform: translateY(0); }
}

/* ============================================================
 * Champs
 * ============================================================ */
body[data-path="login"] .form-group { margin-bottom: 15px; }

/* Hauteur/padding des champs. !important : le CSS de base Frappe cible ces
   éléments avec des sélecteurs à 4 classes (plus spécifiques que les nôtres). */
body[data-path="login"] .form-control {
  height: 48px !important;
  padding-left: 44px !important;
  border: 1px solid var(--voltea-border, #E2E3E7);
  border-radius: var(--voltea-radius, 8px);
  font-size: 14px;
  color: var(--voltea-text, #0B1630);
  background: var(--voltea-bg, #FBFBFC);
  transition:
    border-color var(--voltea-transition, 180ms ease),
    box-shadow var(--voltea-transition, 180ms ease),
    background var(--voltea-transition, 180ms ease);
}
body[data-path="login"] .form-control::placeholder { color: var(--voltea-text-subtle, #8A8F98); }
body[data-path="login"] .form-control:hover { border-color: var(--voltea-border-strong, #CDD0D6); }
body[data-path="login"] .form-control:focus {
  border-color: var(--voltea-primary, #0B1630);
  background: #fff;
  box-shadow: var(--voltea-focus-ring, 0 0 0 3px rgba(11, 22, 48, 0.22));
  outline: none;
}
body[data-path="login"] .password-field .form-control { padding-right: 62px !important; }

/* Icônes des champs — centrées verticalement (override du top:5px de base). */
body[data-path="login"] .email-field,
body[data-path="login"] .password-field { position: relative; }
body[data-path="login"] .field-icon {
  left: 16px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  color: var(--voltea-text-subtle, #8A8F98);
  pointer-events: none;
  transition: color var(--voltea-transition, 180ms ease);
}
body[data-path="login"] .form-control:focus ~ .field-icon,
body[data-path="login"] .email-field:focus-within .field-icon,
body[data-path="login"] .password-field:focus-within .field-icon {
  color: var(--voltea-primary, #0B1630);
}

/* Bouton "Afficher / Masquer" — centré verticalement (override du top:5px). */
body[data-path="login"] .toggle-password {
  right: 15px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  cursor: pointer;
  font-size: 12px;
  font-weight: 500;
  color: var(--voltea-primary, #0B1630);
}

/* Lien mot de passe oublié */
body[data-path="login"] .forgot-password-message {
  text-align: right;
  margin: -2px 0 2px;
  font-size: 12.5px;
}
body[data-path="login"] a {
  color: var(--voltea-primary, #0B1630);
  font-weight: 500;
  text-decoration: none;
  transition: color var(--voltea-transition, 180ms ease);
}
body[data-path="login"] a:hover {
  color: var(--voltea-secondary, #4E8F3C);
  text-decoration: underline;
}

/* ============================================================
 * Bouton principal
 * ============================================================ */
body[data-path="login"] .btn-login.btn-primary {
  height: 46px;
  font-weight: 600;
  font-size: 14px;
  letter-spacing: 0.2px;
  background: var(--voltea-primary, #0B1630);
  border: 1px solid var(--voltea-primary, #0B1630);
  border-radius: var(--voltea-radius, 8px);
  cursor: pointer;
  box-shadow: 0 2px 6px rgba(11, 22, 48, 0.25);
  transition:
    background var(--voltea-transition, 180ms ease),
    box-shadow var(--voltea-transition, 180ms ease),
    transform var(--voltea-transition-fast, 120ms ease);
}
body[data-path="login"] .btn-login.btn-primary:hover {
  background: var(--voltea-primary-hover, #1C2B4F);
  border-color: var(--voltea-primary-hover, #1C2B4F);
  box-shadow: 0 8px 18px rgba(11, 22, 48, 0.32);
}
body[data-path="login"] .btn-login.btn-primary:active {
  transform: translateY(1px);
  box-shadow: 0 2px 6px rgba(11, 22, 48, 0.25);
}
body[data-path="login"] .btn-login.btn-primary:focus-visible {
  outline: none;
  box-shadow: var(--voltea-focus-ring, 0 0 0 3px rgba(11, 22, 48, 0.22));
}

/* ============================================================
 * Séparateur "ou" + connexions sociales / LDAP
 * ============================================================ */
body[data-path="login"] .login-divider {
  color: var(--voltea-text-subtle, #8A8F98);
  font-size: 12px;
  text-transform: lowercase;
}
body[data-path="login"] .btn-login-option,
body[data-path="login"] .btn-ldap-login {
  height: 44px;
  display: flex !important;
  align-items: center;
  justify-content: center;
  text-align: center;
  border-radius: var(--voltea-radius, 8px);
  border: 1px solid var(--voltea-border, #E2E3E7);
  cursor: pointer;
  transition:
    background var(--voltea-transition, 180ms ease),
    border-color var(--voltea-transition, 180ms ease);
}
body[data-path="login"] .btn-login-option:hover,
body[data-path="login"] .btn-ldap-login:hover {
  background: var(--voltea-surface, #F3F4F5);
  border-color: var(--voltea-border-strong, #CDD0D6);
}

/* ============================================================
 * Responsive
 * ============================================================ */
@media (max-width: 480px) {
  body[data-path="login"] .login-content.page-card,
  body[data-path="login"] .for-login .page-card {
    max-width: 100%;
    padding: 26px 22px;
  }
  body[data-path="login"] .page-card-head h4 { font-size: 18px; }
  body[data-path="login"]::before { background-size: 18px 18px; }
}

/* ============================================================
 * Accessibilité — mouvement réduit
 * ============================================================ */
@media (prefers-reduced-motion: reduce) {
  body[data-path="login"] .login-content.page-card { animation: none; }
  body[data-path="login"] .btn-login.btn-primary,
  body[data-path="login"] .form-control,
  body[data-path="login"] a { transition: none; }
}