/* ========================================
   FlowTools — Login Page Styles
   ======================================== */

.login-page {
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  background: var(--color-gray-50);
  padding: var(--space-6);
}

.login-card {
  width: 100%;
  max-width: 420px;
  background: var(--color-white);
  border-radius: var(--radius-xl);
  padding: var(--space-10);
  box-shadow: var(--shadow-lg);
}

.login-card__logo {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: var(--space-2);
  font-size: var(--font-size-xl);
  font-weight: 700;
  color: var(--color-gray-900);
  text-decoration: none;
  margin-bottom: var(--space-8);
}

.login-card__title {
  text-align: center;
  font-size: var(--font-size-2xl);
  margin-bottom: var(--space-2);
}

.login-card__subtitle {
  text-align: center;
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin-bottom: var(--space-8);
}

/* Product Tabs */
.login-tabs {
  display: flex;
  gap: var(--space-2);
  margin-bottom: var(--space-6);
  background: var(--color-gray-100);
  border-radius: var(--radius-md);
  padding: 4px;
}

.login-tab {
  flex: 1;
  padding: var(--space-2) var(--space-3);
  font-size: var(--font-size-sm);
  font-weight: 500;
  color: var(--color-gray-500);
  background: transparent;
  border: none;
  border-radius: var(--radius-sm);
  cursor: pointer;
  transition: all var(--transition-fast);
  text-align: center;
}

.login-tab:hover {
  color: var(--color-gray-700);
}

.login-tab--active {
  background: var(--color-white);
  color: var(--color-primary);
  box-shadow: var(--shadow-sm);
  font-weight: 600;
}

.login-card__form {
  margin-bottom: var(--space-6);
}

.login-card__footer {
  text-align: center;
}

.login-card__footer p {
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin-bottom: var(--space-3);
}

.login-card__footer a {
  font-size: var(--font-size-sm);
}

.login-card__back {
  display: inline-flex;
  align-items: center;
  gap: var(--space-2);
  font-size: var(--font-size-sm);
  color: var(--color-gray-500);
  margin-top: var(--space-6);
  text-align: center;
}

.login-card__back:hover {
  color: var(--color-primary);
}

.login-error {
  display: none;
  margin-bottom: var(--space-4);
}

.login-error--visible {
  display: block;
}