/* ============================================================
   hud-identity.css — Issue #151: tactical-HUD skin for the Identity auth
   pages. Loaded after Bootstrap so it wins; scoped to `body.hud-auth` (set in
   _Layout) so it only themes the auth UI. Tokens come from the shared
   hud-theme.css (copied from SuperStatus.Web for palette parity).
   ============================================================ */

body.hud-auth {
  background: var(--bg-0);
  color: var(--text-1);
  font-family: var(--font-mono);
  min-height: 100vh;
  display: flex;
  flex-direction: column;
  margin: 0;
}

/* ---------- topbar ---------- */
.hud-auth .hud-auth-topbar {
  display: flex; align-items: center; gap: var(--s-4);
  height: 56px; padding: 0 var(--s-5);
  background: var(--bg-1); border-bottom: 1px solid var(--line);
}
.hud-auth .hud-auth-topbar .brand {
  display: flex; align-items: center; gap: var(--s-3);
  font-weight: 600; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--text-1); text-decoration: none;
}
.hud-auth .hud-auth-topbar .brand .logo {
  width: 22px; height: 22px; border: 1.5px solid var(--accent);
  position: relative; display: inline-block;
}
.hud-auth .hud-auth-topbar .brand .logo::before,
.hud-auth .hud-auth-topbar .brand .logo::after {
  content: ""; position: absolute; background: var(--accent); width: 6px; height: 1.5px; top: 50%;
}
.hud-auth .hud-auth-topbar .brand .logo::before { left: -3px; transform: translateY(-50%); }
.hud-auth .hud-auth-topbar .brand .logo::after  { right: -3px; transform: translateY(-50%); }
.hud-auth .hud-auth-topbar .brand em { font-style: normal; color: var(--accent); }

/* ---------- centered auth card ---------- */
.hud-auth .hud-auth-main {
  flex: 1; display: flex; align-items: center; justify-content: center;
  padding: var(--s-7) var(--s-4);
}
.hud-auth .hud-auth-card {
  position: relative; width: 100%; max-width: 400px;
  background: var(--bg-1); border: 1px solid var(--line-strong);
  padding: var(--s-6); backdrop-filter: blur(8px);
}
.hud-auth .hud-auth-card::before,
.hud-auth .hud-auth-card::after {
  content: ""; position: absolute; width: 14px; height: 14px; pointer-events: none;
}
.hud-auth .hud-auth-card::before { top: -1px; left: -1px; border-top: 1.5px solid var(--accent); border-left: 1.5px solid var(--accent); }
.hud-auth .hud-auth-card::after  { bottom: -1px; right: -1px; border-bottom: 1.5px solid var(--accent); border-right: 1.5px solid var(--accent); }

.hud-auth .hud-auth-head { display: flex; align-items: center; gap: var(--s-3); margin-bottom: var(--s-5); }
.hud-auth .hud-auth-card h1,
.hud-auth .hud-auth-card h2 { font-size: 15px; letter-spacing: 0.04em; color: var(--text-1); font-weight: 600; margin: 0; }
.hud-auth .hud-auth-card hr { display: none; }

/* ---------- form fields (Bootstrap form-floating) ---------- */
.hud-auth .form-floating { margin-bottom: var(--s-3); }
.hud-auth .form-floating > label {
  color: var(--text-3); font-family: var(--font-mono);
  font-size: 12px; text-transform: uppercase; letter-spacing: 0.10em;
}
.hud-auth .form-control {
  background: var(--bg-2); border: 1px solid var(--line); color: var(--text-1);
  font-family: var(--font-mono); border-radius: 0;
}
.hud-auth .form-control:focus {
  background: var(--bg-2); border-color: var(--accent); color: var(--text-1); box-shadow: none;
}
/* NB: don't set a visible ::placeholder here — Bootstrap's form-floating keeps
   the placeholder transparent and shows the floating <label> instead; a visible
   placeholder would render *under* the floated label (overlap). */

.hud-auth .form-check-input {
  background-color: var(--bg-2); border: 1px solid var(--line); border-radius: 0; box-shadow: none;
}
.hud-auth .form-check-input:checked { background-color: var(--accent); border-color: var(--accent); }
.hud-auth .form-check-label, .hud-auth label { color: var(--text-2); }

/* ---------- button ---------- */
.hud-auth .btn-primary {
  background: transparent; border: 1px solid var(--accent-soft); color: var(--accent);
  border-radius: 0; text-transform: uppercase; letter-spacing: 0.14em;
  font-family: var(--font-mono); font-size: 12px; padding: var(--s-3) var(--s-4);
}
.hud-auth .btn-primary:hover,
.hud-auth .btn-primary:focus { background: var(--accent-glow); border-color: var(--accent); color: var(--accent); box-shadow: none; }

/* Consent / logout actions (#151 Phase 2): the OIDC Authorize + Logout views use
   Bootstrap .btn-success (Accept/Confirm) and .btn-danger (Deny). Map them onto
   the HUD's semantic up/down tokens instead of stock green/red. */
.hud-auth .btn-success,
.hud-auth .btn-danger {
  background: transparent; border-radius: 0; text-transform: uppercase; letter-spacing: 0.14em;
  font-family: var(--font-mono); font-size: 12px; padding: var(--s-3) var(--s-4);
}
.hud-auth .btn-success { border: 1px solid var(--accent-soft); color: var(--accent); }
.hud-auth .btn-success:hover,
.hud-auth .btn-success:focus { background: var(--accent-glow); border-color: var(--accent); color: var(--accent); box-shadow: none; }
.hud-auth .btn-danger { border: 1px solid var(--status-down); color: var(--status-down); }
.hud-auth .btn-danger:hover,
.hud-auth .btn-danger:focus { background: transparent; border-color: var(--status-down); color: var(--status-down); opacity: 0.82; box-shadow: none; }

/* a horizontal pair of action buttons (consent / logout) */
.hud-auth .hud-auth-actions { display: flex; gap: var(--s-3); margin-top: var(--s-5); }
.hud-auth .hud-auth-actions .btn { flex: 1; }

/* ---------- intro / body copy inside cards ---------- */
.hud-auth .hud-auth-card .lead,
.hud-auth .hud-auth-card .text-muted,
.hud-auth .hud-auth-intro { color: var(--text-2); font-size: 13px; line-height: 1.55; }
.hud-auth .hud-auth-card p { color: var(--text-2); font-size: 13px; line-height: 1.55; }
.hud-auth .hud-auth-card strong { color: var(--text-1); }
.hud-auth .hud-auth-card code { color: var(--accent); background: var(--bg-2); padding: 0 4px; }
.hud-auth .hud-auth-card .display-4 { font-size: 18px; letter-spacing: 0.04em; }
/* Setup + consent carry more copy than the login form — let their card breathe. */
.hud-auth .hud-auth-card.wide { max-width: 480px; }

/* ---------- validation (semantic down token) ---------- */
.hud-auth .text-danger,
.hud-auth .validation-summary-errors { color: var(--status-down) !important; font-size: 12px; }
.hud-auth .form-control.input-validation-error { border-color: var(--status-down); }

/* ---------- links + footer ---------- */
.hud-auth a { color: var(--accent-soft); }
.hud-auth a:hover { color: var(--accent); }
.hud-auth .hud-auth-footer {
  padding: var(--s-3) var(--s-5); border-top: 1px solid var(--line);
  color: var(--text-3); font-size: 10px; text-transform: uppercase; letter-spacing: 0.14em;
}

@media (max-width: 480px) {
  .hud-auth .hud-auth-card { padding: var(--s-5); }
  .hud-auth .hud-auth-topbar { padding: 0 var(--s-4); }
}