@reference "tailwindcss";

/* Authentication Modal Styles */
.auth-modal-overlay {
  @apply fixed inset-0 bg-black/60 flex items-center justify-center z-[1000] backdrop-blur-sm;
}

.auth-modal {
  @apply bg-gradient-to-b from-[#1e232a] to-[#20252d] rounded-xl w-full max-w-md mx-5 shadow-2xl shadow-black/30 border border-[#2c313a]/80 overflow-hidden;
}

.auth-modal-header {
  @apply flex justify-between items-center px-6 py-5 border-b border-[#2c313a]/80 bg-gradient-to-r from-[#1a1e24] to-[#1e232a];
}

.auth-modal-header h2 {
  @apply m-0 text-xl font-semibold text-white tracking-tight;
}

.auth-modal-close {
  @apply bg-transparent border-none cursor-pointer p-2 rounded-lg text-gray-400 hover:text-gray-200 hover:bg-[#2c313a]/60 transition-all duration-200;
}

.auth-form {
  @apply px-6 py-6 flex flex-col gap-4;
}

/* OAuth Buttons */
.oauth-buttons {
  @apply flex flex-col gap-3;
}

.oauth-button {
  @apply w-full bg-gradient-to-r from-[#1a1e24] to-[#1e232a] border border-[#3a404b]/40 rounded-lg px-4 py-3 text-gray-300 text-sm font-medium cursor-pointer transition-all duration-200 hover:border-[#3a404b]/60 hover:bg-gradient-to-r hover:from-[#1e232a] hover:to-[#20252d] disabled:opacity-50 disabled:cursor-not-allowed flex items-center justify-center gap-3;
}

.oauth-button.google {
  @apply hover:border-blue-500/30 hover:bg-gradient-to-r hover:from-blue-500/5 hover:to-blue-600/5;
}

.oauth-button.github {
  @apply hover:border-gray-400/30 hover:bg-gradient-to-r hover:from-gray-500/5 hover:to-gray-600/5;
}

.oauth-loading {
  @apply flex items-center gap-2;
}

.loading-spinner {
  @apply w-4 h-4 border-2 border-gray-400 border-t-transparent rounded-full animate-spin;
}

/* Auth Divider */
.auth-divider {
  @apply relative flex items-center justify-center text-gray-500 text-sm;
}

.auth-divider::before {
  @apply content-[''] absolute left-0 top-1/2 w-full h-px bg-gradient-to-r from-transparent via-[#3a404b]/40 to-transparent;
}

.auth-divider span {
  @apply bg-gradient-to-r from-[#1e232a] to-[#20252d] px-3;
}

/* Email Form Styles */
.auth-email-form {
  @apply flex flex-col gap-4;
}

.auth-field {
  @apply relative flex items-center;
}

.auth-field-icon {
  @apply absolute left-3 text-gray-400 pointer-events-none z-10;
}

.auth-input {
  @apply w-full bg-[#1a1e24] border border-[#3a404b]/40 rounded-lg pl-10 pr-4 py-3 text-gray-300 text-sm placeholder-gray-500 transition-all duration-200 focus:outline-none focus:border-blue-500/50 focus:ring-2 focus:ring-blue-500/20 focus:bg-[#1e232a];
}

.password-toggle {
  @apply absolute right-3 bg-transparent border-none cursor-pointer p-1 rounded-md text-gray-400 hover:text-gray-200 hover:bg-[#2c313a]/60 transition-all duration-200 z-10;
}

.auth-error {
  @apply text-red-400 text-sm text-center p-3 bg-red-500/10 border border-red-500/30 rounded-lg backdrop-blur-sm;
}

.auth-submit {
  @apply bg-gradient-to-br from-blue-600 to-blue-700 hover:from-blue-500 hover:to-blue-600 text-white border-none px-6 py-3 rounded-lg text-sm font-medium cursor-pointer transition-all duration-200 mt-2 disabled:opacity-50 disabled:cursor-not-allowed disabled:hover:from-blue-600 disabled:hover:to-blue-700 shadow-lg shadow-blue-600/20;
}

.auth-switch {
  @apply px-6 py-4 border-t border-[#2c313a]/80 text-center text-sm text-gray-400 bg-gradient-to-r from-[#1a1e24] to-[#1e232a];
}

.auth-switch-button {
  @apply bg-transparent border-none text-blue-400 hover:text-blue-300 cursor-pointer font-medium underline underline-offset-2 p-0 transition-colors duration-200;
}

/* User menu styles */
.user-menu {
  @apply relative inline-block;
}

.user-menu-button {
  @apply bg-transparent border-none cursor-pointer p-2 rounded-lg flex items-center gap-2 transition-all duration-200 text-gray-200 hover:bg-[#2c313a]/50;
}

.user-menu-dropdown {
  @apply absolute top-full right-0 bg-gradient-to-b from-[#2c313a] to-[#2e333d] border border-[#3a404b]/60 rounded-lg shadow-xl shadow-black/30 min-w-40 z-[100] overflow-hidden backdrop-blur-sm;
}

.user-menu-item {
  @apply block w-full px-4 py-3 bg-transparent border-none text-left cursor-pointer text-sm text-gray-200 transition-all duration-200 hover:bg-[#3a404b]/30 hover:text-white;
}

.user-menu-item:first-child {
  @apply rounded-t-lg;
}

.user-menu-item:last-child {
  @apply rounded-b-lg;
}

.user-menu-item.danger {
  @apply text-red-400 hover:text-red-300 hover:bg-red-500/10;
}
