/* =====================================================================
   Valiente Consulting — vc-app.css
   The signed-in surfaces: admin dashboard, editors, login and MFA.

   Loaded on top of vc.css, which owns the tokens, the reset and the
   buttons. Nothing here is served to the public marketing pages, so the
   public CSS stays small.
   ===================================================================== */

body.app { background: var(--paper-tint); }

/* ---------- App bar ---------- */
.app-bar {
  position: sticky; top: 0; z-index: 100;
  height: 62px;
  background: rgba(8, 19, 31, 0.92);
  backdrop-filter: saturate(150%) blur(14px);
  -webkit-backdrop-filter: saturate(150%) blur(14px);
  border-bottom: 1px solid var(--line-dark);
}
.app-bar > .container {
  height: 100%; max-width: 1120px;
  display: flex; align-items: center; gap: 20px;
}
.app-bar img { height: 26px; width: auto; }
.app-nav { margin-left: auto; display: flex; align-items: center; gap: 4px; }
.app-nav a {
  padding: 7px 12px; border-radius: var(--r-sm);
  font-size: 0.88rem; font-weight: 480; color: var(--on-dark-mute);
  white-space: nowrap; transition: color 0.16s var(--ease), background 0.16s var(--ease);
}
.app-nav a:hover { color: #fff; background: rgba(255, 255, 255, 0.06); }
.app-nav a.on { color: #fff; background: rgba(255, 255, 255, 0.08); }
.app-nav form { display: inline-flex; margin-left: 8px; }
.btn-quiet {
  background: none; border: 1px solid var(--line-dark-strong); color: var(--on-dark);
  padding: 7px 14px; border-radius: var(--r-sm); font-family: var(--font-body);
  font-size: 0.85rem; font-weight: 500; cursor: pointer;
  transition: border-color 0.16s var(--ease), color 0.16s var(--ease);
}
.btn-quiet:hover { border-color: var(--accent); color: var(--accent); }

.app-wrap { max-width: 1120px; margin: 0 auto; padding: 34px var(--gutter) 70px; }

/* ---------- Page heading ---------- */
.app-head {
  display: flex; flex-wrap: wrap; gap: 14px;
  align-items: center; justify-content: space-between; margin-bottom: 22px;
}
.app-head h1 { font-size: 1.6rem; margin: 0; }
.app-head p { margin: 4px 0 0; }

/* ---------- Panels ---------- */
.panel {
  background: var(--paper); border: 1px solid var(--paper-line);
  border-radius: var(--r); padding: 24px; margin-bottom: 20px;
}
.panel.flush { padding: 0; overflow: hidden; }
.panel h2 { font-size: 1.05rem; margin-bottom: 4px; }
.panel > h2:first-child + p { margin-top: 0; }
.panel-note { background: var(--paper-tint); }
.panel-ok { background: #eef7ef; border-color: #cfe8d3; }
.panel-warn { background: #fff8ec; border-color: #f0dcae; }

.auth-card { max-width: 440px; margin: 0 auto; }
.muted { color: var(--on-light-mute); }
.text-danger, .validation-summary-errors { color: #b3372a; font-size: 0.92rem; }
.validation-summary-errors ul { margin: 0; padding-left: 18px; }

/* ---------- Metric tiles ---------- */
.tiles { display: grid; grid-template-columns: repeat(3, 1fr); gap: 16px; margin-bottom: 20px; }
.tile { background: var(--paper); border: 1px solid var(--paper-line); border-radius: var(--r); padding: 22px 20px; }
.tile .num {
  font-family: var(--font-display); font-size: 2rem; font-weight: 650;
  letter-spacing: -0.03em; line-height: 1; color: var(--on-light); margin-bottom: 8px;
}
.tile .lbl {
  font-family: var(--font-mono); font-size: 0.68rem; letter-spacing: 0.1em;
  text-transform: uppercase; color: var(--on-light-mute);
}

/* ---------- Bar chart ---------- */
.bars { display: flex; align-items: flex-end; gap: 6px; height: 130px; margin-top: 16px; }
.bars .col { flex: 1; display: flex; flex-direction: column; justify-content: flex-end; align-items: center; }
.bars .bar {
  width: 100%; min-height: 2px; border-radius: 5px 5px 0 0;
  background: linear-gradient(180deg, var(--accent), var(--accent-deep));
}
.bars .day { font-family: var(--font-mono); font-size: 0.6rem; color: var(--on-light-mute); margin-top: 6px; }

/* ---------- Forms ---------- */
.field { margin-bottom: 16px; }
.field label {
  display: block; font-family: var(--font-mono); font-size: 0.68rem;
  letter-spacing: 0.1em; text-transform: uppercase;
  color: var(--on-light-mute); margin-bottom: 7px;
}
.field input[type="text"], .field input[type="email"], .field input[type="password"],
.field input[type="date"], .field input:not([type]), .field select, .field textarea {
  width: 100%; padding: 11px 14px;
  border: 1px solid var(--paper-line); border-radius: var(--r-sm);
  background: var(--paper); color: var(--on-light);
  font-family: var(--font-body); font-size: 1rem; line-height: 1.5;
}
.field textarea { font-family: var(--font-mono); font-size: 0.88rem; line-height: 1.6; resize: vertical; }
.field input:focus, .field select:focus, .field textarea:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(77, 163, 255, 0.18);
}
.field-row { display: grid; gap: 16px; }
.field-row.c2 { grid-template-columns: 1fr 1fr; }
.field-row.c3 { grid-template-columns: 1fr 1fr 1fr; }
.field .hint { font-family: var(--font-body); font-size: 0.8rem; letter-spacing: 0; text-transform: none; color: var(--on-light-mute); }
.check {
  display: flex; align-items: center; gap: 9px;
  font-size: 0.92rem; color: var(--on-light-mute); margin-bottom: 18px;
}
.check input { width: 16px; height: 16px; accent-color: var(--accent-deep); }
.form-actions { display: flex; flex-wrap: wrap; gap: 10px; margin-top: 4px; }
.btn-block { width: 100%; justify-content: center; }
.btn-danger { background: none; border: 0; padding: 0; color: #b3372a; font: inherit; font-size: 0.9rem; cursor: pointer; }
.btn-danger:hover { text-decoration: underline; }

/* ---------- Data tables ---------- */
table.data { width: 100%; border-collapse: collapse; font-size: 0.92rem; }
table.data th, table.data td { text-align: left; padding: 11px 16px; border-bottom: 1px solid var(--paper-line); }
table.data th {
  font-family: var(--font-mono); font-size: 0.68rem; font-weight: 500;
  letter-spacing: 0.1em; text-transform: uppercase; color: var(--on-light-mute);
  background: var(--paper-tint);
}
table.data tr:last-child td { border-bottom: 0; }
table.data td.num, table.data th.num { text-align: right; }
table.data td.ip { font-family: var(--font-mono); font-size: 0.82rem; }
table.data a { font-weight: 550; }
table.data a:hover { color: var(--accent-deep); }
.table-scroll { overflow-x: auto; }

.pill {
  display: inline-block; font-family: var(--font-mono); font-size: 0.64rem;
  letter-spacing: 0.09em; text-transform: uppercase;
  padding: 3px 9px; border-radius: 100px; border: 1px solid currentColor;
}
.pill-live { color: #2e7d32; }
.pill-draft { color: var(--on-light-mute); }

/* ---------- Recovery codes ---------- */
.codes {
  font-family: var(--font-mono); font-size: 0.9rem;
  columns: 2; column-gap: 24px; margin-top: 10px;
}
.codes div { padding: 2px 0; }
kbd {
  font-family: var(--font-mono); font-size: 0.86rem;
  background: var(--paper-tint); border: 1px solid var(--paper-line);
  border-radius: 5px; padding: 3px 8px;
}

/* ---------- Login realms ---------- */
.realms { display: grid; grid-template-columns: 1fr 1fr; gap: 36px; }
.realms > div + div { border-left: 1px solid var(--paper-line); padding-left: 36px; }
.realm-cdc {
  background: linear-gradient(135deg, var(--ink-800), var(--ink-700));
  border-radius: var(--r); padding: 28px; text-align: center; color: var(--on-dark-mute);
}
.realm-cdc svg { width: 34px; height: 34px; color: var(--accent); margin: 0 auto; }
.realm-cdc p { margin: 14px 0 20px; font-size: 0.92rem; }

/* ---------- Responsive ---------- */
@media (max-width: 860px) {
  .tiles { grid-template-columns: 1fr; }
  .field-row.c2, .field-row.c3 { grid-template-columns: 1fr; }
  .realms { grid-template-columns: 1fr; gap: 28px; }
  .realms > div + div { border-left: 0; border-top: 1px solid var(--paper-line); padding-left: 0; padding-top: 28px; }
  .app-bar > .container { gap: 10px; }
  .app-nav { gap: 0; }
  .app-nav a { padding: 7px 9px; font-size: 0.82rem; }
}

/* ---- a command meant to be taken away and run somewhere else ----
   Colours are written out rather than taken from the tokens: this block is dark inside an
   otherwise light page, so it is not following the theme, it is deliberately breaking it. */
.scan-state { margin: 0 0 14px; font-size: 0.98rem; }

.install { border-radius: 10px; overflow: hidden; border: 1px solid #16324a; }
.install-head {
  display: flex; align-items: center; justify-content: space-between; gap: 12px;
  background: #0f2334; color: #93a9bf; padding: 8px 12px;
  font-size: 0.78rem; letter-spacing: 0.02em;
}
.install-head strong { color: #e8f0f7; font-weight: 600; }
.install-copy {
  flex: none; background: rgba(255,255,255,.08); color: #e8f0f7;
  border: 1px solid rgba(255,255,255,.18); border-radius: 6px;
  padding: 4px 12px; font: inherit; font-size: 0.76rem; cursor: pointer;
}
.install-copy:hover { background: rgba(255,255,255,.16); }

.install-command {
  margin: 0; padding: 14px 12px; overflow-x: auto;
  background: #08131f; color: #e8f0f7;
  font-family: var(--font-mono, ui-monospace, Menlo, monospace);
  font-size: 0.82rem; line-height: 1.6; white-space: pre;
}

.install-why { margin: 14px 0 0; }
.install-why summary {
  cursor: pointer; color: var(--on-light-mute); font-size: 0.86rem;
}
.install-why p {
  margin: 10px 0 0; color: var(--on-light-mute); font-size: 0.86rem; line-height: 1.7;
  max-width: 70ch;
}

.install-files { margin-top: 10px; font-size: 0.86rem; }
.install-files td { vertical-align: top; padding: 10px 14px 10px 0; }
.install-files code { font-size: 0.82rem; }