/* MediaChronicler Keycloak login theme */
@import url("https://fonts.googleapis.com/css2?family=Rubik:wght@300;400;600;700&display=swap");

:root {
  --mc-bg:      #05080b;
  --mc-surface: #0b1218;
  --mc-border:  #1a2a36;
  --mc-text:    #f5efe4;
  --mc-muted:   #8a9ab0;
  --mc-gold:    #e5a83a;
  --mc-violet:  #8b5cf6;
}

/* ── Page shell ─────────────────────────────────────────────────────────────── */

body,
body.login-pf {
  margin: 0;
  padding: 0;
  min-height: 100vh;
  background: var(--mc-bg);
  font-family: "Rubik", sans-serif;
  color: var(--mc-text);
  display: flex;
  align-items: center;
  justify-content: center;
}

.login-pf-page {
  width: 100%;
  max-width: 440px;
  padding: 24px 16px;
  box-sizing: border-box;
}

/* Hide the default realm name header — the card header handles branding */
#kc-header,
.login-pf-page-header {
  display: none;
}

/* ── Login card ─────────────────────────────────────────────────────────────── */

.card-pf {
  background: var(--mc-surface);
  border: 1px solid var(--mc-border);
  border-radius: 14px;
  box-shadow: 0 20px 56px rgba(0, 0, 0, 0.65);
  padding: 36px 32px 28px;
  box-sizing: border-box;
}

/* ── Card header / branding ──────────────────────────────────────────────────── */

.login-pf-header {
  text-align: center;
  padding-bottom: 20px;
}

.login-pf-header::before {
  content: "MediaChronicler";
  display: block;
  font-size: 1.5rem;
  font-weight: 700;
  letter-spacing: 0.04em;
  color: var(--mc-gold);
  margin-bottom: 4px;
}

.login-pf-header h1,
#kc-page-title {
  color: var(--mc-muted);
  font-weight: 400;
  font-size: 0.95rem;
  margin: 0;
}

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

.login-pf-page .form-group label,
.login-pf-page label {
  color: var(--mc-muted);
  font-size: 0.85rem;
}

.login-pf-page .form-control,
.login-pf-page input[type="text"],
.login-pf-page input[type="password"],
.login-pf-page input[type="email"] {
  background: var(--mc-bg);
  border: 1px solid var(--mc-border);
  color: var(--mc-text);
  border-radius: 8px;
  box-shadow: none;
  padding: 8px 12px;
  width: 100%;
  box-sizing: border-box;
}

.login-pf-page .form-control:focus,
.login-pf-page input:focus {
  outline: none;
  border-color: var(--mc-violet);
  box-shadow: 0 0 0 1px var(--mc-violet);
}

/* ── Submit button ───────────────────────────────────────────────────────────── */

.login-pf-page .btn-primary,
.login-pf-page input[type="submit"] {
  background: var(--mc-gold);
  border: none;
  color: #1c1405;
  font-weight: 600;
  border-radius: 8px;
  padding: 9px 20px;
  cursor: pointer;
  font-family: inherit;
  font-size: 0.95rem;
}

.login-pf-page .btn-primary:hover,
.login-pf-page input[type="submit"]:hover {
  background: #f0bb55;
}

/* ── Links ───────────────────────────────────────────────────────────────────── */

.login-pf-page a {
  color: var(--mc-violet);
}

.login-pf-page a:hover {
  color: #a78bfa;
}

/* ── Secondary text ──────────────────────────────────────────────────────────── */

#kc-info,
.login-pf-page .login-pf-signup,
.login-pf-page .instruction,
.login-pf-page .checkbox label {
  color: var(--mc-muted);
  font-size: 0.85rem;
}

/* ── Alerts ──────────────────────────────────────────────────────────────────── */

.alert-error {
  background: rgba(220, 60, 60, 0.12);
  border-color: rgba(220, 60, 60, 0.5);
  color: #f0b0b0;
  border-radius: 8px;
  padding: 10px 14px;
}

.alert-warning {
  background: rgba(229, 168, 58, 0.10);
  border-color: rgba(229, 168, 58, 0.45);
  color: var(--mc-gold);
  border-radius: 8px;
  padding: 10px 14px;
}

.alert-success {
  background: rgba(80, 200, 120, 0.10);
  border-color: rgba(80, 200, 120, 0.45);
  color: #9fdcb4;
  border-radius: 8px;
  padding: 10px 14px;
}

/* ── TOTP / QR enrollment ────────────────────────────────────────────────────── */

#kc-totp-secret-qr-code,
.login-pf-page img[alt="Figure: Barcode"] {
  background: #ffffff;
  padding: 8px;
  border-radius: 8px;
}