/* Authentication-related styles (UI 2.0) */

/* Auth state visibility — applied immediately via render-blocking CSS
   to prevent Login/Dashboard button flash before JS determines auth state.
   Body starts with class="auth-pending" in the HTML. */
.auth-pending .login-button {
  display: none !important;
}

.auth-pending .dashboard-button {
  display: none !important;
}

body.user-logged-in .login-button {
  display: none !important;
}

body.user-logged-out .dashboard-button {
  display: none !important;
}

body.user-unverified .dashboard-button {
  display: none !important;
}

.login-button {
  padding: 0.45rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary) !important;
  font-family: inherit;
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.25s var(--ease-out);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.login-button:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

.dashboard-button {
  padding: 0.45rem 1rem;
  border-radius: var(--radius-sm);
  border: 1px solid rgba(255, 255, 255, 0.1);
  background: rgba(255, 255, 255, 0.04);
  color: var(--text-primary) !important;
  font-family: inherit;
  font-weight: 500;
  font-size: 0.875rem;
  transition: all 0.25s var(--ease-out);
  text-decoration: none;
  display: inline-flex;
  align-items: center;
  justify-content: center;
}

.dashboard-button:hover {
  background: rgba(255, 255, 255, 0.08);
  border-color: rgba(255, 255, 255, 0.18);
}

.dashboard-button svg {
  width: 15px;
  height: 15px;
  margin-right: 6px;
  opacity: 0.8;
}

@media (max-width: 768px) {
  .login-button,
  .dashboard-button {
    margin-top: 0.5rem;
    width: 100%;
    justify-content: center;
  }
}