/**
 * siren-auth.css — SIREN Auth UI Styles
 * Extends siren.css with auth-specific components.
 * Follows the SKYbrary white-and-navy institutional aesthetic.
 *
 * Changelog:
 *   2026-03-15 — Created as part of OAuth2 integration
 */

/* ── Auth page (standalone login/register pages) ────────────────────────────── */

.siren-auth-page {
  background: #eef1f5;
  min-height: 100vh;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 2rem 1rem;
}

.siren-auth-container {
  background: #fff;
  border: 1px solid #d0d7de;
  border-top: 4px solid #003366;
  border-radius: 4px;
  box-shadow: 0 2px 12px rgba(0,0,0,0.10);
  padding: 2rem 2.25rem 2.5rem;
  width: 100%;
  max-width: 420px;
}

/* ── Logo ───────────────────────────────────────────────────────────────────── */

.siren-auth-logo {
  display: flex;
  align-items: center;
  gap: 0.5rem;
  margin-bottom: 1.75rem;
}

.siren-auth-logo-icon {
  font-size: 1.3rem;
  color: #003366;
}

.siren-auth-logo-text {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 1rem;
  font-weight: 700;
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: #003366;
}

/* ── Title ──────────────────────────────────────────────────────────────────── */

.siren-auth-title {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 1.1rem;
  font-weight: 700;
  color: #1a1a2e;
  margin: 0 0 1.4rem;
}

/* ── Form ───────────────────────────────────────────────────────────────────── */

.siren-auth-form {
  display: flex;
  flex-direction: column;
  gap: 0;
  margin-bottom: 1rem;
}

.siren-auth-field {
  display: flex;
  flex-direction: column;
  margin-bottom: 1rem;
}

.siren-auth-field label {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 0.78rem;
  font-weight: 600;
  color: #374151;
  margin-bottom: 0.3rem;
  text-transform: uppercase;
  letter-spacing: 0.04em;
}

.siren-auth-field label small {
  font-weight: 400;
  text-transform: none;
  letter-spacing: 0;
  color: #9ca3af;
}

.siren-auth-field input {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 0.88rem;
  padding: 0.5rem 0.75rem;
  border: 1px solid #d0d7de;
  border-radius: 4px;
  color: #1a1a2e;
  background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
  outline: none;
}

.siren-auth-field input:focus {
  border-color: #003366;
  box-shadow: 0 0 0 3px rgba(0,51,102,0.10);
}

.siren-auth-field input[readonly] {
  background: #f4f6f8;
  color: #6b7280;
  cursor: default;
}

/* ── Buttons ────────────────────────────────────────────────────────────────── */

.siren-auth-btn {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.55rem 1.25rem;
  border: none;
  border-radius: 4px;
  cursor: pointer;
  transition: background 0.15s, opacity 0.15s;
}

.siren-auth-btn-primary {
  background: #003366;
  color: #fff;
  width: 100%;
  margin-top: 0.5rem;
}

.siren-auth-btn-primary:hover {
  background: #004488;
}

.siren-auth-btn-primary:disabled {
  opacity: 0.55;
  cursor: not-allowed;
}

/* ── Social buttons ─────────────────────────────────────────────────────────── */

.siren-auth-social-btn {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 0.5rem;
  width: 100%;
  padding: 0.5rem 1rem;
  margin-top: 0.6rem;
  border: 1px solid #d0d7de;
  border-radius: 4px;
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 0.82rem;
  font-weight: 600;
  color: #374151;
  background: #fff;
  text-decoration: none;
  cursor: pointer;
  transition: background 0.15s, border-color 0.15s;
}

.siren-auth-social-btn:hover {
  background: #f4f6f8;
  border-color: #b0b8c4;
}

.siren-auth-social-google    { border-left: 3px solid #4285f4; }
.siren-auth-social-microsoft { border-left: 3px solid #00a1f1; }
.siren-auth-social-facebook  { border-left: 3px solid #1877f2; }
.siren-auth-social-skybrary  { border-left: 3px solid #003366; }

/* ── Messages ───────────────────────────────────────────────────────────────── */

.siren-auth-error {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 0.8rem;
  color: #c0392b;
  background: rgba(192,57,43,0.07);
  border: 1px solid rgba(192,57,43,0.22);
  border-radius: 4px;
  padding: 0.5rem 0.75rem;
  margin-bottom: 0.75rem;
}

.siren-auth-success {
  font-family: 'Open Sans', Arial, sans-serif;
  font-size: 0.85rem;
  color: #166534;
  background: #f0fdf4;
  border: 1px solid #86efac;
  border-radius: 4px;
  padding: 0.75rem 1rem;
  margin-bottom: 0.75rem;
}

.siren-auth-success a {
  color: #003366;
  font-weight: 600;
}

/* ── User badge (в rag-header) ───────────────────────────────────────────────── */

.rag-user-badge {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 0.6rem;
  font-family: 'Open Sans', Arial, sans-serif;
}

.rag-user-badge__name {
  font-size: 0.72rem;
  font-weight: 600;
  color: rgba(255,255,255,0.85);
  max-width: 140px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.rag-user-badge__tier {
  font-size: 0.62rem;
  font-weight: 700;
  letter-spacing: 0.06em;
  text-transform: uppercase;
  padding: 0.1rem 0.45rem;
  border-radius: 3px;
}

.rag-user-badge__tier.is-pro {
  background: #f9ca24;
  color: #1a1a2e;
}

.rag-user-badge__tier.is-registered {
  background: rgba(255,255,255,0.15);
  color: rgba(255,255,255,0.75);
}

.rag-user-badge__btn {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.3);
  background: transparent;
  color: rgba(255,255,255,0.75);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  white-space: nowrap;
}

.rag-user-badge__btn:hover {
  background: rgba(255,255,255,0.12);
  color: #fff;
}

.rag-user-badge__btn.is-login {
  border-color: rgba(255,255,255,0.5);
  color: #fff;
}

/* ── History button (в header) ───────────────────────────────────────────────── */

.rag-history-btn {
  font-size: 0.68rem;
  font-weight: 600;
  letter-spacing: 0.05em;
  text-transform: uppercase;
  padding: 0.2rem 0.6rem;
  border-radius: 3px;
  border: 1px solid rgba(255,255,255,0.25);
  background: transparent;
  color: rgba(255,255,255,0.7);
  cursor: pointer;
  transition: background 0.15s, color 0.15s;
  display: none; /* показва се само за authenticated */
}

.rag-history-btn:hover {
  background: rgba(255,255,255,0.10);
  color: #fff;
}

.rag-history-btn.is-visible {
  display: inline-block;
}