/*
 * ICFF Login / Signup / Password Reset — Brand Override
 *
 * Targets Frappe's built-in login and update-password page structure.
 * Both pages now use .page-card / .main-section / .page-card-head classes.
 * Loaded via web_include_css in hooks.py.
 */

/* ===== Page Background ===== */
[data-path="login"],
[data-path="update-password"] {
  background: #003D42 !important;
  min-height: 100vh;
}

/* Hide default navbar on auth pages */
[data-path="login"] .navbar,
[data-path="update-password"] .navbar {
  display: none !important;
}

/* ===== Container ===== */
[data-path="login"] .main-section,
[data-path="update-password"] .main-section {
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  min-height: 100vh !important;
  padding: 1.5rem !important;
}

[data-path="login"] .container,
[data-path="update-password"] .container {
  max-width: 420px !important;
}

/* ===== Logo Section ===== */
[data-path="login"] .page-card-head,
[data-path="update-password"] .page-card-head {
  text-align: center;
  padding: 0 0 1.5rem;
  background: transparent !important;
  border: none !important;
}

[data-path="login"] .app-logo,
[data-path="update-password"] .app-logo {
  height: 2.75rem;
  margin-bottom: 1.25rem;
}

[data-path="login"] .page-card-head h4,
[data-path="update-password"] .page-card-head h4 {
  color: rgba(255,255,255,0.7) !important;
  font-size: 0.9375rem !important;
  font-weight: 500 !important;
  margin: 0 !important;
}

/* ===== Card ===== */
[data-path="login"] .login-content.page-card,
[data-path="update-password"] .login-content.page-card {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.08) !important;
  border-radius: 16px !important;
  backdrop-filter: blur(8px) !important;
  box-shadow: 0 8px 32px rgba(0,0,0,0.15) !important;
  overflow: hidden;
}

/* Gold bottom accent on card */
[data-path="login"] .login-content.page-card::after,
[data-path="update-password"] .login-content.page-card::after {
  content: '';
  display: block;
  height: 2px;
  background: linear-gradient(90deg, transparent 10%, #F6AF0A 30%, #FBC412 50%, #F6AF0A 70%, transparent 90%);
  opacity: 0.4;
}

/* ===== Form Inputs ===== */
[data-path="login"] .form-control,
[data-path="update-password"] .form-control {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  border-radius: 10px !important;
  color: #fff !important;
  padding: 0.625rem 0.875rem 0.625rem 2.5rem !important;
  font-size: 0.875rem !important;
  transition: border-color 0.2s, box-shadow 0.2s !important;
}

[data-path="login"] .form-control::placeholder,
[data-path="update-password"] .form-control::placeholder {
  color: rgba(255,255,255,0.3) !important;
}

[data-path="login"] .form-control:focus,
[data-path="update-password"] .form-control:focus {
  border-color: #F6AF0A !important;
  box-shadow: 0 0 0 3px rgba(246,175,10,0.15) !important;
  background: rgba(255,255,255,0.08) !important;
}

/* Field icons */
[data-path="login"] .field-icon,
[data-path="update-password"] .field-icon {
  color: rgba(255,255,255,0.3) !important;
  fill: rgba(255,255,255,0.3) !important;
}

/* Toggle password */
[data-path="login"] .toggle-password,
[data-path="update-password"] .toggle-password {
  color: rgba(255,255,255,0.35) !important;
  font-size: 0.75rem !important;
}

[data-path="login"] .toggle-password:hover,
[data-path="update-password"] .toggle-password:hover {
  color: #F6AF0A !important;
}

/* ===== Buttons ===== */
[data-path="login"] .btn-primary,
[data-path="login"] .btn-primary-dark,
[data-path="update-password"] .btn-primary {
  background: #F6AF0A !important;
  border: none !important;
  color: #003D42 !important;
  font-weight: 600 !important;
  border-radius: 10px !important;
  padding: 0.625rem 1.25rem !important;
  font-size: 0.875rem !important;
  transition: all 0.2s !important;
}

[data-path="login"] .btn-primary:hover,
[data-path="login"] .btn-primary-dark:hover,
[data-path="update-password"] .btn-primary:hover {
  background: #FBC412 !important;
  box-shadow: 0 4px 16px rgba(246,175,10,0.3) !important;
  transform: translateY(-1px) !important;
}

/* Secondary / outline buttons */
[data-path="login"] .btn-default,
[data-path="login"] .btn-login-option {
  background: rgba(255,255,255,0.06) !important;
  border: 1px solid rgba(255,255,255,0.12) !important;
  color: rgba(255,255,255,0.7) !important;
  border-radius: 10px !important;
  font-size: 0.875rem !important;
  transition: all 0.2s !important;
}

[data-path="login"] .btn-default:hover,
[data-path="login"] .btn-login-option:hover {
  background: rgba(255,255,255,0.1) !important;
  border-color: rgba(255,255,255,0.2) !important;
  color: #fff !important;
}

/* ===== Links ===== */
[data-path="login"] .forgot-password-message a,
[data-path="login"] .sign-up-message a,
[data-path="update-password"] .sign-up-message a,
[data-path="update-password"] a {
  color: #F6AF0A !important;
  text-decoration: none !important;
  font-weight: 500 !important;
}

[data-path="login"] .forgot-password-message a:hover,
[data-path="login"] .sign-up-message a:hover,
[data-path="update-password"] .sign-up-message a:hover,
[data-path="update-password"] a:hover {
  color: #FBC412 !important;
  text-decoration: underline !important;
}

[data-path="login"] .forgot-password-message,
[data-path="update-password"] .forgot-password-message {
  text-align: right;
}

/* Sign-up message text */
[data-path="login"] .sign-up-message,
[data-path="update-password"] .sign-up-message {
  color: rgba(255,255,255,0.4) !important;
  font-size: 0.8125rem !important;
  margin-top: 1.25rem !important;
}

/* Divider "or" text */
[data-path="login"] .login-divider {
  color: rgba(255,255,255,0.25) !important;
  font-size: 0.8125rem !important;
}

/* ===== Invalid state ===== */
[data-path="login"] .login-content.page-card.invalid-login {
  border-color: rgba(239,68,68,0.4) !important;
  animation: shake 0.4s ease-in-out !important;
}

@keyframes shake {
  0%, 100% { transform: translateX(0); }
  25% { transform: translateX(-6px); }
  75% { transform: translateX(6px); }
}

/* ===== Error messages ===== */
[data-path="login"] .alert-danger,
[data-path="update-password"] .alert-danger {
  background: rgba(239,68,68,0.1) !important;
  border: 1px solid rgba(239,68,68,0.2) !important;
  border-radius: 10px !important;
  color: #fca5a5 !important;
}

/* ===== Footer ===== */
[data-path="login"] footer,
[data-path="update-password"] footer {
  display: none !important;
}

/* ===== Form labels ===== */
[data-path="login"] .form-label,
[data-path="update-password"] .form-label {
  color: rgba(255,255,255,0.5) !important;
}

/* ===== Password strength & mismatch messages ===== */
[data-path="update-password"] .password-strength-message,
[data-path="update-password"] .password-mismatch-message {
  color: rgba(255,255,255,0.5) !important;
}

[data-path="update-password"] .password-mismatch-message.text-danger {
  color: #fca5a5 !important;
}

/* ===== Page card body spacing ===== */
[data-path="login"] .page-card-body,
[data-path="update-password"] .page-card-body {
  padding: 1.5rem !important;
}

[data-path="login"] .page-card-actions,
[data-path="update-password"] .page-card-actions {
  padding: 0 1.5rem 1.5rem !important;
}