/* =====================================================
   DOOKI ADMIN - PREMIUM LOGIN STYLING
   High-Fidelity Noir & Lime SaaS Design System
===================================================== */

@keyframes adminGlowPulse {
  0%, 100% { opacity: 0.4; transform: scale(1); }
  50% { opacity: 0.7; transform: scale(1.04); }
}

@keyframes adminDotBlink {
  0%, 100% { opacity: 1; transform: scale(1); }
  50% { opacity: 0.35; transform: scale(0.85); }
}

@keyframes adminCardFadeIn {
  from {
    opacity: 0;
    transform: translateY(14px) scale(0.985);
  }
  to {
    opacity: 1;
    transform: translateY(0) scale(1);
  }
}

body.admin-login-body {
  min-height: 100svh !important;
  margin: 0 !important;
  padding: 0 !important;
  overflow-x: hidden !important;
  color: #e6ece8 !important;
  background:
    radial-gradient(circle at 50% -12%, rgba(200, 241, 53, 0.16) 0%, transparent 48%),
    radial-gradient(circle at 85% 85%, rgba(16, 185, 129, 0.06) 0%, transparent 40%),
    radial-gradient(circle at 15% 90%, rgba(200, 241, 53, 0.04) 0%, transparent 40%),
    #050806 !important;
  font-family: Manrope, -apple-system, BlinkMacSystemFont, "Segoe UI", Roboto, sans-serif !important;
  -webkit-font-smoothing: antialiased !important;
  -moz-osx-font-smoothing: grayscale !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
}

body.admin-login-body::before {
  content: "";
  position: fixed;
  inset: 0;
  pointer-events: none;
  opacity: 0.35;
  background-image: radial-gradient(rgba(255, 255, 255, 0.08) 1px, transparent 1px);
  background-size: 32px 32px;
  mask-image: radial-gradient(ellipse at 50% 50%, #000 60%, transparent 100%);
  -webkit-mask-image: radial-gradient(ellipse at 50% 50%, #000 60%, transparent 100%);
  z-index: 0;
}

body.admin-login-body .admin-login-shell,
body.admin-login-body .admin-login-shell *,
body.admin-login-body .admin-login-shell *::before,
body.admin-login-body .admin-login-shell *::after {
  box-sizing: border-box !important;
}

body.admin-login-body .admin-login-shell {
  position: relative !important;
  width: 100% !important;
  min-height: 100svh !important;
  padding: 32px 18px !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: center !important;
  justify-content: center !important;
  z-index: 1;
}

body.admin-login-body .admin-login-stage {
  width: min(100%, 420px) !important;
  max-width: 100% !important;
  min-width: 0 !important;
  margin: auto !important;
  padding: 0 !important;
  display: flex !important;
  flex-direction: column !important;
  align-items: stretch !important;
  gap: 0 !important;
  color: inherit !important;
  background: transparent !important;
  border: 0 !important;
  box-shadow: none !important;
}

/* =====================================================
   LOGIN CARD
===================================================== */
body.admin-login-body .admin-login-card {
  position: relative !important;
  width: 100% !important;
  max-width: 100% !important;
  min-width: 0 !important;
  padding: 36px 34px !important;
  border-radius: 24px !important;
  background: rgba(9, 14, 11, 0.96) !important;
  backdrop-filter: blur(24px) !important;
  -webkit-backdrop-filter: blur(24px) !important;
  border: 1px solid rgba(255, 255, 255, 0.08) !important;
  border-top-color: rgba(200, 241, 53, 0.28) !important;
  box-shadow:
    0 32px 80px -12px rgba(0, 0, 0, 0.78),
    0 0 0 1px rgba(255, 255, 255, 0.03),
    0 0 60px -20px rgba(200, 241, 53, 0.12) !important;
  animation: adminCardFadeIn 0.45s cubic-bezier(0.16, 1, 0.3, 1) forwards !important;
}

/* =====================================================
   HEADER & BRAND
===================================================== */
body.admin-login-body .admin-login-brand {
  margin: 0 0 38px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 14px !important;
}

body.admin-login-body .admin-login-brand-left {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
}

body.admin-login-body .admin-login-logo {
  display: block !important;
  width: 102px !important;
  height: auto !important;
  flex: 0 0 auto !important;
}

body.admin-login-body .admin-login-brand-divider {
  width: 1px !important;
  height: 22px !important;
  background: rgba(255, 255, 255, 0.13) !important;
}

body.admin-login-body .admin-login-brand-context {
  color: #8d9891 !important;
  font-size: 14px !important;
  font-weight: 650 !important;
  letter-spacing: -0.02em !important;
}

body.admin-login-body .admin-login-brand-badge {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 5px 10px !important;
  border-radius: 999px !important;
  background: rgba(200, 241, 53, 0.08) !important;
  border: 1px solid rgba(200, 241, 53, 0.22) !important;
  color: #c8f135 !important;
  font-size: 10.5px !important;
  font-weight: 800 !important;
  letter-spacing: 0.08em !important;
  text-transform: uppercase !important;
  line-height: 1 !important;
}

body.admin-login-body .admin-login-badge-dot {
  width: 6px !important;
  height: 6px !important;
  border-radius: 50% !important;
  background: #c8f135 !important;
  box-shadow: 0 0 8px #c8f135 !important;
  animation: adminDotBlink 2.2s infinite ease-in-out !important;
}

/* =====================================================
   COPY & TITLE
===================================================== */
body.admin-login-body .admin-login-copy {
  margin: 0 0 26px !important;
  text-align: left !important;
}

body.admin-login-body .admin-login-kicker-pill {
  display: inline-flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 0 !important;
  margin-bottom: 12px !important;
  border-radius: 0 !important;
  background: transparent !important;
  border: 0 !important;
  color: #c8f135 !important;
  font-size: 10px !important;
  font-weight: 750 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
}

body.admin-login-body .admin-login-kicker-pill svg {
  display: none !important;
}

body.admin-login-body .admin-login-copy h1 {
  margin: 0 !important;
  color: #ffffff !important;
  font-size: 28px !important;
  font-weight: 800 !important;
  line-height: 1.2 !important;
  letter-spacing: -0.04em !important;
}

body.admin-login-body .admin-login-copy p {
  margin: 8px 0 0 !important;
  color: #8a968f !important;
  font-size: 13px !important;
  line-height: 1.55 !important;
}

/* =====================================================
   FORM & INPUTS
===================================================== */
body.admin-login-body .admin-login-form {
  display: grid !important;
  gap: 18px !important;
}

body.admin-login-body .admin-login-field {
  display: grid !important;
  gap: 7px !important;
}

body.admin-login-body .admin-login-field > span {
  color: #c0ccc4 !important;
  font-size: 12.5px !important;
  font-weight: 700 !important;
  letter-spacing: -0.01em !important;
}

body.admin-login-body .admin-login-input-wrap {
  position: relative !important;
  display: flex !important;
  align-items: center !important;
  width: 100% !important;
}

body.admin-login-body .admin-login-input-icon {
  position: absolute !important;
  left: 14px !important;
  width: 17px !important;
  height: 17px !important;
  color: #5d6961 !important;
  pointer-events: none !important;
  transition: color 0.18s ease !important;
  z-index: 2 !important;
}

body.admin-login-body .admin-login-input {
  width: 100% !important;
  height: 48px !important;
  padding: 0 14px 0 42px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 12px !important;
  outline: 0 !important;
  color: #ffffff !important;
  background: #080d0a !important;
  font: 550 14px Manrope, sans-serif !important;
  letter-spacing: -0.01em !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.admin-login-body .admin-login-input::placeholder {
  color: #4c564f !important;
  font-weight: 450 !important;
}

body.admin-login-body .admin-login-input:focus {
  border-color: #c8f135 !important;
  background: #090e0b !important;
  box-shadow:
    0 0 0 3.5px rgba(200, 241, 53, 0.12),
    0 4px 16px rgba(0, 0, 0, 0.4) !important;
}

body.admin-login-body .admin-login-input-wrap:focus-within .admin-login-input-icon {
  color: #c8f135 !important;
}

/* Password Toggle */
body.admin-login-body .admin-login-password-toggle {
  position: absolute !important;
  right: 10px !important;
  top: 50% !important;
  transform: translateY(-50%) !important;
  width: 32px !important;
  height: 32px !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  color: #606d64 !important;
  cursor: pointer !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 8px !important;
  transition: all 0.15s ease !important;
  z-index: 2 !important;
}

body.admin-login-body .admin-login-password-toggle:hover {
  color: #c8f135 !important;
  background: rgba(255, 255, 255, 0.05) !important;
}

body.admin-login-body .admin-login-password-toggle svg {
  width: 17px !important;
  height: 17px !important;
}

/* =====================================================
   ROW & CHECKBOX
===================================================== */
body.admin-login-body .admin-login-row {
  margin: 0 !important;
  display: flex !important;
  align-items: center !important;
  justify-content: space-between !important;
  gap: 12px !important;
}

body.admin-login-body .admin-login-remember {
  display: inline-flex !important;
  align-items: center !important;
  gap: 8px !important;
  color: #8c9790 !important;
  font-size: 12px !important;
  font-weight: 550 !important;
  cursor: pointer !important;
  user-select: none !important;
}

body.admin-login-body .admin-login-remember input {
  width: 15px !important;
  height: 15px !important;
  margin: 0 !important;
  accent-color: #c8f135 !important;
  cursor: pointer !important;
}

body.admin-login-body .admin-login-link {
  display: inline-flex !important;
  align-items: center !important;
  gap: 5px !important;
  color: #6a766e !important;
  font-size: 11px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em !important;
}

/* =====================================================
   BUTTON
===================================================== */
body.admin-login-body .admin-login-submit {
  position: relative !important;
  width: 100% !important;
  min-height: 48px !important;
  margin: 4px 0 0 !important;
  padding: 0 20px !important;
  border: 0 !important;
  border-radius: 12px !important;
  color: #0b1103 !important;
  background: linear-gradient(135deg, #d6ff3d 0%, #c8f135 60%, #aee518 100%) !important;
  box-shadow:
    0 12px 28px -6px rgba(200, 241, 53, 0.28),
    0 0 0 1px rgba(255, 255, 255, 0.2) inset !important;
  font: 800 14px/1 Manrope, sans-serif !important;
  letter-spacing: -0.01em !important;
  cursor: pointer !important;
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  transition: all 0.2s cubic-bezier(0.16, 1, 0.3, 1) !important;
}

body.admin-login-body .admin-login-submit:hover {
  background: linear-gradient(135deg, #e0ff54 0%, #d2ff3b 60%, #b8f020 100%) !important;
  transform: translateY(-1.5px) !important;
  box-shadow:
    0 16px 34px -6px rgba(200, 241, 53, 0.38),
    0 0 0 1px rgba(255, 255, 255, 0.3) inset !important;
}

body.admin-login-body .admin-login-submit:active {
  transform: translateY(0.5px) !important;
}

body.admin-login-body .admin-login-submit:disabled {
  opacity: 0.65 !important;
  cursor: wait !important;
  transform: none !important;
  box-shadow: none !important;
}

/* =====================================================
   FEEDBACK & ERRORS
===================================================== */
body.admin-login-body .admin-login-error {
  margin: 0 !important;
  padding: 12px 14px !important;
  border: 1px solid rgba(239, 68, 68, 0.28) !important;
  border-radius: 11px !important;
  color: #fca5a5 !important;
  background: rgba(127, 29, 29, 0.25) !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1.4 !important;
}

/* =====================================================
   FOOTER NOTE & SECURITY BADGE
===================================================== */
body.admin-login-body .admin-login-note {
  margin: 26px 0 0 !important;
  padding: 18px 0 0 !important;
  display: flex !important;
  align-items: center !important;
  gap: 11px !important;
  border-top: 1px solid rgba(255, 255, 255, 0.07) !important;
  text-align: left !important;
}

body.admin-login-body .admin-login-note::before,
body.admin-login-body .admin-login-note::after {
  display: none !important;
  content: none !important;
}

body.admin-login-body .admin-login-shield-icon {
  width: 28px !important;
  height: 28px !important;
  flex: 0 0 28px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 8px !important;
  color: #c8f135 !important;
  background: rgba(200, 241, 53, 0.08) !important;
  border: 1px solid rgba(200, 241, 53, 0.16) !important;
}

body.admin-login-body .admin-login-shield-icon svg {
  width: 14px !important;
  height: 14px !important;
}

body.admin-login-body .admin-login-note p {
  margin: 0 !important;
  color: #7d8b82 !important;
  font-size: 11px !important;
  line-height: 1.45 !important;
}

body.admin-login-body .admin-login-note strong {
  color: #c3cec7 !important;
  font-weight: 700 !important;
}

body.admin-login-body .admin-login-footer {
  width: 100% !important;
  margin: 0 !important;
  padding: 0 !important;
  border: 0 !important;
  background: transparent !important;
  box-shadow: none !important;
  text-align: center !important;
}

body.admin-login-body .admin-login-footer small {
  color: #525d56 !important;
  font-size: 11px !important;
  font-weight: 600 !important;
  letter-spacing: 0.02em !important;
}

/* =====================================================
   MFA PANEL
===================================================== */
body.admin-login-body .admin-mfa-panel {
  margin: 0 !important;
}

body.admin-login-body .admin-mfa-head {
  display: flex !important;
  align-items: flex-start !important;
  gap: 14px !important;
  margin-bottom: 22px !important;
}

body.admin-login-body .admin-mfa-badge {
  width: 40px !important;
  height: 40px !important;
  flex: 0 0 40px !important;
  display: grid !important;
  place-items: center !important;
  border-radius: 12px !important;
  color: #c8f135 !important;
  background: rgba(200, 241, 53, 0.09) !important;
  border: 1px solid rgba(200, 241, 53, 0.22) !important;
}

body.admin-login-body .admin-mfa-badge svg {
  width: 20px !important;
  height: 20px !important;
  stroke: currentColor !important;
  stroke-width: 2 !important;
  fill: none !important;
}

body.admin-login-body .admin-mfa-kicker {
  display: block !important;
  color: #c8f135 !important;
  font-size: 9.5px !important;
  font-weight: 850 !important;
  letter-spacing: 0.12em !important;
  text-transform: uppercase !important;
  margin-bottom: 4px !important;
}

body.admin-login-body #mfaTitle {
  display: block !important;
  color: #ffffff !important;
  font-size: 16px !important;
  font-weight: 750 !important;
}

body.admin-login-body #mfaDescription {
  margin: 4px 0 0 !important;
  color: #8a968f !important;
  font-size: 12px !important;
  line-height: 1.45 !important;
}

body.admin-login-body .admin-mfa-enroll {
  margin-bottom: 20px !important;
  padding: 16px !important;
  border-radius: 14px !important;
  background: rgba(6, 10, 8, 0.8) !important;
  border: 1px solid rgba(255, 255, 255, 0.07) !important;
  text-align: center !important;
}

body.admin-login-body .admin-mfa-qr {
  display: flex !important;
  justify-content: center !important;
  margin-bottom: 12px !important;
}

body.admin-login-body .admin-mfa-qr img,
body.admin-login-body .admin-mfa-qr svg {
  max-width: 170px !important;
  height: auto !important;
  border-radius: 8px !important;
  background: #ffffff !important;
  padding: 8px !important;
}

body.admin-login-body .admin-mfa-secret {
  display: flex !important;
  flex-direction: column !important;
  gap: 4px !important;
  color: #8c9790 !important;
  font-size: 11px !important;
}

body.admin-login-body .admin-mfa-secret code {
  color: #c8f135 !important;
  background: rgba(200, 241, 53, 0.08) !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-family: monospace !important;
  font-size: 12px !important;
  letter-spacing: 0.08em !important;
  word-break: break-all !important;
}

body.admin-login-body .admin-mfa-secondary {
  width: 100% !important;
  min-height: 42px !important;
  border: 1px solid rgba(255, 255, 255, 0.09) !important;
  border-radius: 12px !important;
  background: transparent !important;
  color: #8c9790 !important;
  font: 700 13px Manrope, sans-serif !important;
  cursor: pointer !important;
  transition: all 0.15s ease !important;
}

body.admin-login-body .admin-mfa-secondary:hover {
  background: rgba(255, 255, 255, 0.04) !important;
  color: #ffffff !important;
}

@media (max-width: 520px) {
  body.admin-login-body .admin-login-shell {
    padding: 16px 12px !important;
  }

  body.admin-login-body .admin-login-stage {
    width: 100% !important;
  }

  body.admin-login-body .admin-login-card {
    padding: 28px 22px !important;
    border-radius: 20px !important;
  }

  body.admin-login-body .admin-login-brand {
    margin-bottom: 28px !important;
  }

  body.admin-login-body .admin-login-brand-badge {
    display: none !important;
  }

  body.admin-login-body .admin-login-copy h1 {
    font-size: 25px !important;
  }

  body.admin-login-body .admin-login-link {
    font-size: 10px !important;
  }
}

@media (max-width: 360px) {
  body.admin-login-body .admin-login-card {
    padding-inline: 18px !important;
  }

  body.admin-login-body .admin-login-link {
    display: none !important;
  }
}