/* ============================================================
   Sucod Login Page Theme
   Orange #F7941D  |  Navy #1A365D  |  Light Blue #00AEEF
   ============================================================ */

/* ── Fond navy avec motif géométrique subtil ── */
body[data-path="login"] {
  background-color: #1A365D !important;
  background-image:
    radial-gradient(circle at 15% 25%, rgba(0,174,239,0.12) 0%, transparent 45%),
    radial-gradient(circle at 85% 75%, rgba(247,148,29,0.10) 0%, transparent 45%),
    radial-gradient(circle at 50% 50%, rgba(255,255,255,0.03) 0%, transparent 70%);
  min-height: 100vh;
}

/* ── Centrage vertical de la zone de contenu ── */
body[data-path="login"] .page-content-wrapper {
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  min-height: 100vh;
  padding: 20px;
}

/* ── En-tête : logo + titre sur fond navy ── */
body[data-path="login"] .page-card-head {
  padding: 0 0 24px 0;
  text-align: center;
}

body[data-path="login"] .page-card-head .app-logo {
  height: 56px;
  width: auto;
  filter: drop-shadow(0 4px 16px rgba(247,148,29,0.35));
}

body[data-path="login"] .page-card-head h4 {
  color: #ffffff !important;
  font-size: 1.35rem;
  font-weight: 700;
  letter-spacing: 0.02em;
  margin-top: 14px;
  text-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

/* ── Carte blanche — barre orange en haut + ombre profonde ── */
body[data-path="login"] .login-content.page-card {
  position: relative;
  overflow: hidden;
  background: #ffffff !important;
  border: none !important;
  border-radius: 16px !important;
  box-shadow:
    0 24px 64px rgba(0, 0, 0, 0.35),
    0 6px 16px rgba(0, 0, 0, 0.20) !important;
  padding: 44px 32px 36px !important;
  max-width: 420px;
  width: 100%;
}

body[data-path="login"] .login-content.page-card::before {
  content: '';
  position: absolute;
  top: 0;
  left: 0;
  right: 0;
  height: 4px;
  background: linear-gradient(90deg, #F7941D 0%, #00AEEF 100%);
  border-radius: 16px 16px 0 0;
}

/* ── Champs de saisie ── */
body[data-path="login"] .page-card-body input[type="text"],
body[data-path="login"] .page-card-body input[type="email"],
body[data-path="login"] .page-card-body input[type="password"] {
  background-color: #f7f8fa !important;
  border: 1.5px solid #e8eaed !important;
  border-radius: 8px !important;
  height: 44px !important;
  font-size: 14px;
  padding-left: 38px !important;
  transition: border-color 0.2s, box-shadow 0.2s;
  color: #1A365D !important;
}

body[data-path="login"] .page-card-body input:focus {
  background-color: #ffffff !important;
  border-color: rgba(247,148,29,0.65) !important;
  box-shadow: 0 0 0 3px rgba(247,148,29,0.15) !important;
  outline: none !important;
}

/* ── Icônes dans les champs ── */
body[data-path="login"] .field-icon {
  color: #a0aab4;
  stroke: #a0aab4;
}

/* ── Lien "Mot de passe oublié?" ── */
body[data-path="login"] .forgot-password-message a {
  color: #00AEEF !important;
  font-size: 13px;
  text-decoration: none;
}

body[data-path="login"] .forgot-password-message a:hover {
  color: #0089C7 !important;
  text-decoration: underline;
}

/* ── Bouton Connexion — orange plein ── */
body[data-path="login"] .btn-login,
body[data-path="login"] .btn-primary {
  background-color: #F7941D !important;
  border: none !important;
  border-radius: 8px !important;
  color: #ffffff !important;
  font-size: 15px !important;
  font-weight: 600 !important;
  height: 44px !important;
  letter-spacing: 0.03em;
  box-shadow: 0 4px 14px rgba(247,148,29,0.40) !important;
  transition: background-color 0.2s, box-shadow 0.2s, transform 0.1s;
}

body[data-path="login"] .btn-login:hover,
body[data-path="login"] .btn-primary:hover {
  background-color: #d97e10 !important;
  box-shadow: 0 6px 20px rgba(247,148,29,0.50) !important;
  transform: translateY(-1px);
}

body[data-path="login"] .btn-login:active,
body[data-path="login"] .btn-primary:active {
  background-color: #c06e0d !important;
  transform: translateY(0);
  box-shadow: 0 2px 8px rgba(247,148,29,0.30) !important;
}

/* ── "Login with Email Link" button — secondaire ── */
body[data-path="login"] .btn-default {
  border: 1.5px solid #e8eaed !important;
  color: #444 !important;
  border-radius: 8px !important;
  height: 44px !important;
  font-weight: 500 !important;
}

/* ── Séparateur "ou" ── */
body[data-path="login"] .login-divider {
  color: #b0bec5;
  font-size: 13px;
}

/* ── Message "Pas encore de compte?" ── */
body[data-path="login"] .sign-up-message {
  color: rgba(255,255,255,0.75) !important;
  font-size: 14px;
  text-align: center;
  margin-top: 18px;
}

body[data-path="login"] .sign-up-message a {
  color: #00AEEF !important;
  font-weight: 600;
  text-decoration: none;
}

body[data-path="login"] .sign-up-message a:hover {
  color: #ffffff !important;
  text-decoration: underline;
}

/* ── Sections forgot / signup — mêmes styles ── */
body[data-path="login"] .for-forgot .page-card-head h4,
body[data-path="login"] .for-signup .page-card-head h4 {
  color: #ffffff !important;
}

body[data-path="login"] .for-forgot .login-content.page-card,
body[data-path="login"] .for-signup .login-content.page-card {
  border-radius: 16px !important;
  border: none !important;
  box-shadow: 0 24px 64px rgba(0,0,0,0.35) !important;
}

body[data-path="login"] .for-forgot .login-content.page-card::before,
body[data-path="login"] .for-signup .login-content.page-card::before {
  content: '';
  position: absolute;
  top: 0; left: 0; right: 0;
  height: 4px;
  background: linear-gradient(90deg, #F7941D 0%, #00AEEF 100%);
  border-radius: 16px 16px 0 0;
}

body[data-path="login"] .for-forgot .login-content.page-card,
body[data-path="login"] .for-signup .login-content.page-card {
  position: relative;
  overflow: hidden;
}

/* ── Footer web caché ── */
body[data-path="login"] .web-footer {
  display: none !important;
}