/**
 * Authentication Component Styles
 * @countermeasure/web-components
 *
 * TODO(phase-1): Hex/rgba literals here are CSS custom-property fallbacks
 * inside var(--cmm-auth-*, #fallback). A future pass should replace them with
 * hsl(var(--token)) fallbacks once the cmm-auth-* property set is tokenized.
 */

/* Auth Container */
.cmm-auth-container {
  max-width: 28rem;
  margin: 0 auto;
  padding: 2rem;
}

.cmm-auth-card {
  background: var(--cmm-auth-card-bg, #0f172a);
  border: 1px solid var(--cmm-auth-border, #334155);
  border-radius: 0.75rem;
  padding: 2rem;
  box-shadow: 0 10px 15px -3px rgb(0 0 0 / 0.1);
}

.cmm-auth-header {
  text-align: center;
  margin-bottom: 2rem;
}

.cmm-auth-title {
  font-size: 1.5rem;
  font-weight: 600;
  color: var(--cmm-auth-title, #ffffff);
  margin-bottom: 0.5rem;
}

.cmm-auth-subtitle {
  font-size: 0.875rem;
  color: var(--cmm-auth-text-muted, #94a3b8);
}

/* Form Elements */
.cmm-auth-form {
  display: flex;
  flex-direction: column;
  gap: 1.5rem;
}

.cmm-auth-field {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.cmm-auth-label {
  font-size: 0.875rem;
  font-weight: 500;
  color: var(--cmm-auth-label, #e2e8f0);
}

.cmm-auth-input {
  width: 100%;
  padding: 0.75rem 1rem;
  font-size: 0.875rem;
  background: var(--cmm-auth-input-bg, #1e293b);
  border: 1px solid var(--cmm-auth-border, #334155);
  border-radius: 0.5rem;
  color: var(--cmm-auth-input-text, #ffffff);
  transition: border-color 0.2s, box-shadow 0.2s;
}

.cmm-auth-input:focus {
  outline: none;
  border-color: var(--cmm-auth-focus, #3b82f6);
  box-shadow: 0 0 0 3px var(--cmm-auth-focus-ring, rgba(59, 130, 246, 0.3));
}

.cmm-auth-input::placeholder {
  color: var(--cmm-auth-placeholder, #64748b);
}

.cmm-auth-input--error {
  border-color: var(--cmm-auth-error, #ef4444);
}

.cmm-auth-error {
  font-size: 0.75rem;
  color: var(--cmm-auth-error, #ef4444);
}

/* Buttons */
.cmm-auth-btn {
  width: 100%;
  padding: 0.75rem 1.5rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s, opacity 0.2s;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
}

.cmm-auth-btn:disabled {
  opacity: 0.5;
  cursor: not-allowed;
}

.cmm-auth-btn--primary {
  background: var(--cmm-auth-btn-primary-bg, #2563eb);
  color: var(--cmm-auth-btn-primary-text, #ffffff);
  border: none;
}

.cmm-auth-btn--primary:hover:not(:disabled) {
  background: var(--cmm-auth-btn-primary-hover, #3b82f6);
}

.cmm-auth-btn--secondary {
  background: var(--cmm-auth-btn-secondary-bg, transparent);
  color: var(--cmm-auth-btn-secondary-text, #cbd5e1);
  border: 1px solid var(--cmm-auth-border, #334155);
}

.cmm-auth-btn--secondary:hover:not(:disabled) {
  background: var(--cmm-auth-btn-secondary-hover, #1e293b);
}

.cmm-auth-btn--passkey {
  background: var(--cmm-auth-passkey-bg, #1e293b);
  color: var(--cmm-auth-passkey-text, #ffffff);
  border: 1px solid var(--cmm-auth-border, #334155);
}

.cmm-auth-btn--passkey:hover:not(:disabled) {
  background: var(--cmm-auth-passkey-hover, #334155);
}

/* Divider */
.cmm-auth-divider {
  display: flex;
  align-items: center;
  gap: 1rem;
  color: var(--cmm-auth-text-muted, #94a3b8);
  font-size: 0.75rem;
}

.cmm-auth-divider::before,
.cmm-auth-divider::after {
  content: '';
  flex: 1;
  height: 1px;
  background: var(--cmm-auth-border, #334155);
}

/* Links */
.cmm-auth-link {
  color: var(--cmm-auth-link, #60a5fa);
  text-decoration: none;
  font-size: 0.875rem;
}

.cmm-auth-link:hover {
  text-decoration: underline;
}

.cmm-auth-footer {
  text-align: center;
  margin-top: 1.5rem;
  font-size: 0.875rem;
  color: var(--cmm-auth-text-muted, #94a3b8);
}

/* Status Messages */
.cmm-auth-status {
  padding: 0.75rem 1rem;
  border-radius: 0.5rem;
  font-size: 0.875rem;
}

.cmm-auth-status--success {
  background: var(--cmm-auth-success-bg, rgba(34, 197, 94, 0.1));
  color: var(--cmm-auth-success, #22c55e);
  border: 1px solid var(--cmm-auth-success, #22c55e);
}

.cmm-auth-status--error {
  background: var(--cmm-auth-error-bg, rgba(239, 68, 68, 0.1));
  color: var(--cmm-auth-error, #ef4444);
  border: 1px solid var(--cmm-auth-error, #ef4444);
}

.cmm-auth-status--info {
  background: var(--cmm-auth-info-bg, rgba(59, 130, 246, 0.1));
  color: var(--cmm-auth-info, #3b82f6);
  border: 1px solid var(--cmm-auth-info, #3b82f6);
}

/* Passkey Section */
.cmm-passkey-section {
  margin-top: 1.5rem;
  padding-top: 1.5rem;
  border-top: 1px solid var(--cmm-auth-border, #334155);
}

.cmm-passkey-list {
  margin-top: 1rem;
}

.cmm-passkey-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 0.75rem;
  background: var(--cmm-auth-input-bg, #1e293b);
  border-radius: 0.5rem;
  margin-bottom: 0.5rem;
}

.cmm-passkey-item__info {
  display: flex;
  flex-direction: column;
}

.cmm-passkey-item__name {
  font-weight: 500;
  color: var(--cmm-auth-title, #ffffff);
}

.cmm-passkey-item__date {
  font-size: 0.75rem;
  color: var(--cmm-auth-text-muted, #94a3b8);
}

.cmm-passkey-item__delete {
  background: transparent;
  border: none;
  color: var(--cmm-auth-error, #ef4444);
  cursor: pointer;
  padding: 0.25rem;
}

.cmm-passkey-item__delete:hover {
  opacity: 0.8;
}

/* MFA Section */
.cmm-mfa-container {
  text-align: center;
}

.cmm-mfa-code-input {
  font-family: monospace;
  font-size: 1.5rem;
  letter-spacing: 0.5rem;
  text-align: center;
  padding: 1rem;
}

.cmm-mfa-timer {
  margin-top: 1rem;
  font-size: 0.875rem;
  color: var(--cmm-auth-text-muted, #94a3b8);
}

/* OAuth Buttons */
.cmm-oauth-buttons {
  display: flex;
  flex-direction: column;
  gap: 0.75rem;
}

.cmm-oauth-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.75rem;
  width: 100%;
  padding: 0.75rem;
  font-size: 0.875rem;
  font-weight: 500;
  border-radius: 0.5rem;
  cursor: pointer;
  transition: background-color 0.2s;
}

.cmm-oauth-btn--google {
  background: #ffffff;
  color: #1f2937;
  border: 1px solid #e5e7eb;
}

.cmm-oauth-btn--google:hover {
  background: #f9fafb;
}

.cmm-oauth-btn--github {
  background: #24292f;
  color: #ffffff;
  border: 1px solid #24292f;
}

.cmm-oauth-btn--github:hover {
  background: #32383f;
}

.cmm-oauth-btn--apple {
  background: #000000;
  color: #ffffff;
  border: 1px solid #000000;
}

.cmm-oauth-btn--apple:hover {
  background: #1a1a1a;
}

.cmm-oauth-btn__icon {
  width: 1.25rem;
  height: 1.25rem;
}
