/*
 * TacticalHQ Login Page Styles
 * Extracted from production login.html
 * Using high specificity to override Tailwind/Nuxt
 */

.login-page {
  min-height: 100vh !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  background: linear-gradient(135deg, #667eea 0%, #764ba2 100%) !important;
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif !important;
}

.login-page .login-container {
  background: white !important;
  border-radius: 16px !important;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.3) !important;
  padding: 48px 40px !important;
  max-width: 420px !important;
  width: 90% !important;
  text-align: center !important;
}

.login-page .login-container .logo {
  font-size: 48px !important;
  margin-bottom: 16px !important;
  display: block !important;
}

.login-page .login-container h1 {
  color: #333 !important;
  font-size: 28px !important;
  margin-bottom: 12px !important;
  font-weight: 700 !important;
}

.login-page .login-container .subtitle {
  color: #666 !important;
  font-size: 15px !important;
  margin-bottom: 32px !important;
}

.login-page .login-container .badge {
  display: inline-block !important;
  background: #667eea !important;
  color: white !important;
  padding: 4px 12px !important;
  border-radius: 12px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  margin-bottom: 24px !important;
}

.login-page .login-container .error-message {
  background: #fee !important;
  border: 1px solid #fcc !important;
  border-radius: 8px !important;
  padding: 12px !important;
  margin-bottom: 24px !important;
  color: #c33 !important;
  font-size: 14px !important;
  display: none !important;
}

.login-page .login-container .error-message.show {
  display: block !important;
}

.login-page .login-container .google-btn {
  background: white !important;
  border: 2px solid #ddd !important;
  border-radius: 8px !important;
  padding: 14px 24px !important;
  font-size: 16px !important;
  font-weight: 500 !important;
  color: #333 !important;
  cursor: pointer !important;
  transition: all 0.3s ease !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 12px !important;
  width: 100% !important;
  text-decoration: none !important;
}

.login-page .login-container .google-btn:hover {
  background: #f8f9fa !important;
  border-color: #667eea !important;
  box-shadow: 0 4px 12px rgba(102, 126, 234, 0.2) !important;
  transform: translateY(-2px) !important;
}

.login-page .login-container .google-icon {
  width: 20px !important;
  height: 20px !important;
}

.login-page .login-container .footer {
  margin-top: 32px !important;
  color: #999 !important;
  font-size: 13px !important;
}

.login-page .login-container .footer p {
  margin: 0 !important;
}