/* ramteid-bot Dex theme — mirrors gateway/src/theme.rs (theme::page) so the
 * identity-broker pages blend into the harness. Dex serves ONE theme for the
 * whole instance (it does not know the requesting face), so this is the shared
 * neutral "ramteid-bot" look; per-face colour lives in the gateway /login page.
 * Accent = ramteid red #C52126 (the harness' own brand). */

:root {
  --brand: #C52126;
  --bg: #0f1115;
  --card: #171a21;
  --card-border: #262b36;
  --fg: #e7e9ee;
  --muted: #a7adba;
  --secondary-bg: #232936;
  --secondary-border: #333a48;
}

.theme-body {
  background: var(--bg);
  color: var(--fg);
  font-family: ui-sans-serif, system-ui, -apple-system, BlinkMacSystemFont,
    "Segoe UI", Helvetica, sans-serif;
}

/* Remove the Dex logo bar entirely (requirement: kein Dex-Logo oben links). */
.theme-navbar,
.theme-navbar__logo-wrap,
.theme-navbar__logo {
  display: none !important;
}

/* Card container matching theme::page .card */
.dex-container {
  color: var(--fg);
  max-width: 460px;
  min-width: 320px;
  margin: 64px auto;
  text-align: center;
}

.theme-panel {
  background: var(--card);
  border: 1px solid var(--card-border);
  border-top: 4px solid var(--brand);
  border-radius: 16px;
  box-shadow: 0 20px 60px rgba(0, 0, 0, 0.45);
  padding: 40px 36px;
}

.theme-heading {
  font-size: 22px;
  font-weight: 700;
  letter-spacing: -0.01em;
  margin: 0 0 18px;
  color: var(--fg);
}

/* Wordmark-style lead: injected by templates as the issuer title area.
   Dex has no wordmark element, so we lean on the heading. */

.dex-subtle-text,
.dex-separator {
  color: var(--muted);
  font-size: 13px;
}

/* Buttons — radius 10px, weight 600, matching a.btn/button.btn */
.dex-btn,
.theme-btn-provider,
.theme-btn--primary,
.theme-btn--success {
  border-radius: 10px;
  font-weight: 600;
  font-size: 15px;
  cursor: pointer;
  transition: filter 0.12s ease, background 0.12s ease;
  box-shadow: none;
}

/* Provider (connector) chooser buttons = secondary style */
.theme-btn-provider {
  background: var(--secondary-bg);
  color: var(--fg);
  border: 1px solid var(--secondary-border);
  min-width: 250px;
}
.theme-btn-provider:hover {
  background: #2a3140;
  color: #fff;
}

/* The actual login/submit + grant actions = accent primary (the clear CTA).
   password.html uses theme-btn--primary for submit; approval/oob use --success. */
.theme-btn--primary,
.theme-btn--success {
  background: var(--brand);
  border: 0;
  color: #fff;
  min-width: 250px;
  width: 250px;
  padding: 12px 16px;
}
.theme-btn--primary:hover,
.theme-btn--success:hover {
  filter: brightness(1.08);
}

/* Keep provider icon chips legible (they carry their own brand colours) */
.dex-btn-icon {
  border-radius: 10px 0 0 10px;
}
.dex-btn-text {
  font-weight: 600;
  line-height: 36px;
  padding: 6px 12px;
}

/* Form fields */
.theme-form-label {
  width: 250px;
  margin: 8px auto 4px;
  text-align: left;
  font-size: 13px;
  font-weight: 600;
  color: var(--muted);
}
.theme-form-input {
  display: block;
  width: 250px;
  height: 40px;
  margin: auto;
  padding: 8px 12px;
  font-size: 14px;
  color: var(--fg);
  background: var(--bg);
  border: 1px solid var(--secondary-border);
  border-radius: 10px;
  box-shadow: none;
}
.theme-form-input:focus,
.theme-form-input:active {
  outline: none;
  border-color: var(--brand);
}

.theme-link-back {
  margin-top: 12px;
}
.theme-link-back a,
.dex-container a {
  color: var(--muted);
}
.dex-container a:hover {
  color: var(--fg);
}

.dex-error-box {
  background: var(--brand);
  color: #fff;
  border-radius: 10px;
  max-width: 320px;
  margin: 20px auto;
  padding: 8px 12px;
}