/* OAuth login modal enhancements */

.oauth-buttons {
  display: flex;
  flex-direction: column;
  gap: 12px;
  margin-bottom: 16px;
}

.oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 14px;
  border: 1px solid var(--border-secondary, #ddd);
  border-radius: 6px;
  background: var(--bg-primary, #fff);
  color: var(--fg-primary, #222);
  font-weight: 500;
  cursor: pointer;
  transition: background-color 160ms ease, border-color 160ms ease;
}

.oauth-btn:hover {
  background: var(--bg-tertiary, #f6f6f6);
  border-color: var(--border-accent, #999);
}

.oauth-btn:focus {
  outline: 2px solid var(--border-accent, #999);
  outline-offset: 2px;
}

.oauth-btn-icon {
  width: 20px;
  height: 20px;
  display: inline-block;
}

/* Provider variants (GitHub, Discord, Google, Steam, Obsidian) */
.oauth-btn-github {
  background: #24292e;
  color: #ffffff;
  border-color: #24292e;
}
.oauth-btn-github:hover { background: #2f363d; }

.oauth-btn-discord {
  background: #5865f2;
  color: #ffffff;
  border-color: #5865f2;
}
.oauth-btn-discord:hover { background: #4752c4; }

.oauth-btn-google {
  background: #ffffff;
  color: #3c4043;
  border-color: #dadce0;
}
.oauth-btn-google:hover { background: #f8f9fa; }

.oauth-btn-steam { background: #171a21; color: #ffffff; border-color: #171a21; }
.oauth-btn-steam:hover { background: #2a475e; }

.oauth-btn-obsidian { background: #7c3aed; color: #ffffff; border-color: #7c3aed; }
.oauth-btn-obsidian:hover { background: #6d28d9; }

/* Divider between OAuth and legacy form */
.login-divider {
  display: flex;
  align-items: center;
  text-align: center;
  margin: 16px 0;
  color: var(--fg-secondary, #666);
  font-size: 0.9rem;
}
.login-divider::before,
.login-divider::after {
  content: '';
  flex: 1;
  border-bottom: 1px solid var(--border-secondary, #ddd);
}
.login-divider::before { margin-right: 10px; }
.login-divider::after { margin-left: 10px; }

/* Hide legacy inputs when OAuth enabled (optional; can be toggled by script) */
.login-modal.oauth-enabled .login-input-group { display: none; }
.login-modal.oauth-enabled .password-hint { display: none; }
/* Authentication component module */

.login-modal-overlay { position: fixed; inset: 0; background: var(--overlay-dark); z-index: 3000; display: none; transition: opacity var(--transition-base) var(--ease-in-out); }
.login-modal-overlay.visible { display: flex; align-items: center; justify-content: center; will-change: opacity; backdrop-filter: blur(4px); }
.login-modal { background: var(--bg-overlay); color: var(--fg-primary); border: 1px solid var(--border-secondary); border-radius: 10px; padding: var(--spacing-xl); min-width: 320px; max-width: 520px; box-shadow: var(--shadow-lg); contain: layout style paint; }
.login-modal-form { display: grid; gap: var(--spacing-md); }
.login-input-group label { display:block; margin-bottom: var(--spacing-sm); }
.login-input-group input { width: 100%; padding: var(--spacing-md) 10px; border-radius: 6px; border:1px solid var(--border-secondary); background: var(--bg-primary); color: var(--fg-primary); }
.login-input-group input:focus { outline: 2px solid var(--border-accent); outline-offset: 1px; }
.password-hint { color: var(--fg-secondary); font-size: 0.85rem; }
.login-error { color: var(--fg-danger); min-height: 1.2em; }
.login-modal-buttons { display:flex; gap: var(--spacing-md); justify-content:flex-end; }
.login-btn { background: var(--tag-dev); color: var(--btn-fg); border: none; border-radius: 6px; padding: 8px 12px; cursor: pointer; }
.login-cancel-btn { background: transparent; color: var(--fg-secondary); border:1px solid var(--border-secondary); border-radius: 6px; padding: 8px 12px; cursor: pointer; }
.dev-badge { display: none; }
.dev-badge.visible { display: inline-block; }