/* Branding for Authelia to match Voice Agent portal */
:root {
  --bg: #050e1f;
  --panel: #0b1b2d;
  --text: #e2e8f0;
  --muted: #94a3b8;
  --accent: #0ea5e9;
  --accent-strong: #22d3ee;
  --danger: #ef4444;
  font-family: "Inter", "Geist", system-ui, -apple-system, "Segoe UI", sans-serif;
}

body {
  background: radial-gradient(circle at 20% -10%, rgba(34, 211, 238, 0.12), transparent 55%),
    radial-gradient(circle at 80% 0%, rgba(255, 200, 87, 0.12), transparent 45%),
    var(--bg) !important;
  color: var(--text) !important;
  padding-top: 54px;
}

#root,
.page,
.main-content,
.wrapper {
  background: transparent !important;
}

.card,
.login-container,
.reset-container,
.method-container,
.security-key-container {
  background: var(--panel) !important;
  border: 1px solid rgba(148, 163, 184, 0.2) !important;
  border-radius: 16px !important;
  box-shadow: 0 18px 50px rgba(0, 0, 0, 0.35) !important;
}

h1,
h2,
h3,
label {
  color: var(--text) !important;
}

.subtitle,
.helper,
.hint {
  color: var(--muted) !important;
}

input,
select {
  background: rgba(255, 255, 255, 0.03) !important;
  color: var(--text) !important;
  border: 1px solid rgba(148, 163, 184, 0.35) !important;
  border-radius: 10px !important;
}

input:focus,
select:focus {
  outline: 2px solid var(--accent) !important;
  box-shadow: 0 0 0 4px rgba(14, 165, 233, 0.2) !important;
}

button,
.button {
  background: linear-gradient(135deg, var(--accent), var(--accent-strong)) !important;
  color: #0b1b2d !important;
  border: none !important;
  border-radius: 14px !important;
  font-weight: 700 !important;
  letter-spacing: 0.02em;
  text-transform: none;
  padding: 0.85rem 1rem !important;
}

button:hover,
.button:hover {
  filter: brightness(1.05);
}

a#reset-password-button,
a#register-link,
.reset-password,
.reset-password a {
  display: inline-block;
  background: none !important;
  border: none !important;
  border-radius: 6px !important;
  padding: 0 !important;
  color: var(--accent-strong) !important;
  text-transform: none !important;
  font-weight: 700 !important;
  letter-spacing: 0.01em;
  line-height: 1.3;
}

a {
  color: var(--accent-strong);
}

.va-helper {
  position: fixed;
  top: 0;
  left: 0;
  right: 0;
  z-index: 2147483647;
  background: var(--accent);
  color: #0b1b2d;
  padding: 12px 16px;
  font-size: 14px;
  line-height: 1.5;
  text-align: center;
  box-shadow: 0 2px 10px rgba(0, 0, 0, 0.25);
  display: block;
}

.va-helper a {
  color: #0b1b2d;
  font-weight: 700;
  text-decoration: underline;
}

/* Zmiana etykiety loginu na "Email" */
label[for="username"] {
  position: relative;
  color: transparent !important;
}

label[for="username"]::after {
  content: 'Email';
  position: absolute;
  left: 0;
  top: 0;
  color: var(--text) !important;
}

/* Podmień placeholder w polu loginu */
input#username::placeholder {
  color: var(--muted) !important;
  opacity: 1 !important;
}