/* ============================================================
   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); }
}

/* ============================================================
   #377 — public demo instance chrome. Only ever rendered when PUBLIC_DEMO=true.

   Amber (--status-degraded) is the "not production" signal. It is used here for
   demo chrome ONLY: the auth card, its LEDs, and validation keep their own tokens,
   so nothing about a service's health is recoloured by demo mode.
   ============================================================ */

/* The auth main holds one centred card on every page. On the demo login it holds
   two stacked blocks (credentials panel + card), so switch to a column axis. With a
   single child this is visually identical to the previous row layout. */
.hud-auth .hud-auth-main {
  flex-direction: column;
  gap: var(--s-4);
}

/* ---------- topbar countdown chip ---------- */
.hud-auth .hud-demo-chip {
  margin-left: auto;
  display: inline-flex; align-items: center; gap: var(--s-2);
  border: 1px solid var(--status-degraded); color: var(--status-degraded);
  background: rgba(245, 158, 11, 0.08);
  font-size: 10px; letter-spacing: 0.14em; text-transform: uppercase;
  padding: 4px 10px;
}
.hud-auth .hud-demo-chip .dot {
  width: 6px; height: 6px; border-radius: 50%; background: var(--status-degraded);
}

/* ---------- credentials panel ---------- */
.hud-auth .hud-demo-creds {
  position: relative; width: 100%; max-width: 400px;
  background: rgba(245, 158, 11, 0.05);
  border: 1px solid rgba(245, 158, 11, 0.35);
  padding: var(--s-4);
}
.hud-auth .hud-demo-creds::before,
.hud-auth .hud-demo-creds::after {
  content: ""; position: absolute; width: 12px; height: 12px; pointer-events: none;
}
.hud-auth .hud-demo-creds::before {
  top: -1px; left: -1px;
  border-top: 1.5px solid var(--status-degraded); border-left: 1.5px solid var(--status-degraded);
}
.hud-auth .hud-demo-creds::after {
  bottom: -1px; right: -1px;
  border-bottom: 1.5px solid var(--status-degraded); border-right: 1.5px solid var(--status-degraded);
}
.hud-auth .hud-demo-creds-head {
  display: flex; align-items: center; gap: var(--s-2); margin-bottom: var(--s-3);
  font-size: 10px; letter-spacing: 0.16em; text-transform: uppercase;
  color: var(--status-degraded); font-weight: 600;
}
.hud-auth .hud-demo-creds-head .led {
  width: 7px; height: 7px; border-radius: 50%; background: var(--status-degraded);
  box-shadow: 0 0 0 3px rgba(245, 158, 11, 0.18);
}
.hud-auth .hud-demo-creds dl {
  margin: 0; display: grid; grid-template-columns: auto 1fr;
  gap: var(--s-2) var(--s-4); align-items: baseline;
}
.hud-auth .hud-demo-creds dt {
  color: var(--text-3); font-size: 11px; text-transform: uppercase; letter-spacing: 0.1em;
}
.hud-auth .hud-demo-creds dd {
  margin: 0; color: var(--text-1); font-size: 13px;
  background: var(--bg-2); border: 1px solid var(--line);
  padding: 2px 8px; justify-self: start;
  /* Long unbroken values must not push the panel wider than the card. */
  overflow-wrap: anywhere;
}
.hud-auth .hud-demo-creds .note {
  margin: var(--s-3) 0 0; padding-top: var(--s-3);
  border-top: 1px solid rgba(245, 158, 11, 0.2);
  color: var(--text-2); font-size: 11px; line-height: 1.6;
}
.hud-auth .hud-demo-creds .note strong { color: var(--text-1); font-weight: 500; }

/* Tabular so the seconds don't jitter the sentence as they tick. */
.hud-auth .hud-demo-countdown {
  color: var(--status-degraded); font-weight: 600; font-variant-numeric: tabular-nums;
}

/* ---------- prefilled fields ---------- */
.hud-auth .hud-demo-prefilled .form-control { border-color: rgba(245, 158, 11, 0.45); }
.hud-auth .hud-demo-prefilled .form-control:focus { border-color: var(--accent); }
.hud-auth .hud-demo-flag {
  position: absolute; right: 10px; top: 50%; transform: translateY(-50%);
  font-size: 9px; letter-spacing: 0.12em; text-transform: uppercase;
  color: var(--status-degraded); border: 1px solid rgba(245, 158, 11, 0.35);
  padding: 2px 6px; background: rgba(245, 158, 11, 0.07);
  pointer-events: none;
}

@media (max-width: 600px) {
  .hud-auth .hud-demo-chip { font-size: 9px; letter-spacing: 0.08em; padding: 3px 7px; }
  .hud-auth .hud-demo-chip .label-long { display: none; }
  .hud-auth .hud-demo-creds dl { grid-template-columns: 1fr; }
  .hud-auth .hud-demo-creds dt { margin-top: var(--s-1); }

  /* The countdown chip needs room the "Secure // Access" tag is holding. Mirrors the
     design system's own mobile rule for the Web topbar ("drops the clock + status
     tag"), but scoped to .has-demo-chip so a normal login page keeps its tag. */
  .hud-auth .hud-auth-topbar.has-demo-chip .tag { display: none; }
}