/* ================================================================
   Nebula — sign-in pages (/, reset and set password, magic link,
   SSO landing, break-glass, success) and the two-step verification
   prompts (js/mfa-ui.js). The console has its own styles
   (console/css); the end-user portal styles itself.
   ================================================================ */
@import url('https://fonts.googleapis.com/css2?family=DM+Sans:ital,wght@0,400;0,500;0,600;0,700;1,400&family=JetBrains+Mono:wght@400;500&display=swap');

/* ── Material Icons ─────────────────────────────────────── */
.material-icons {
  vertical-align: middle;
  font-size: inherit;
  line-height: 1;
  user-select: none;
}

/* ── Variables ─────────────────────────────────────────── */

:root {
  --shell: #1c2120;
  --card: #ffffff;
  --accent: #2ab85c;
  --accent-hover: #239e4e;
  --heading: #1a3a4b;
  --text: #333;
  --text-light: #666;
  --text-muted: #999;
  --border: #e0e0e0;
  --border-light: #f0f0f0;
  --bg-light: #f7f8fa;
  --danger: #e74c3c;
  --danger-hover: #c0392b;
  --warning: #f39c12;
  --info: #3498db;
  --font-body: 'DM Sans', -apple-system, BlinkMacSystemFont, sans-serif;
  --font-mono: 'JetBrains Mono', monospace;
  --radius: 6px;
  --radius-lg: 8px;
  --focus-ring: 0 0 0 3px rgba(37,99,235,0.28);
  --shadow: 0 1px 3px rgba(0,0,0,0.08), 0 1px 2px rgba(0,0,0,0.06);
  --shadow-lg: 0 4px 16px rgba(0,0,0,0.12);
}

/* ── Reset ─────────────────────────────────────────────── */

*,
*::before,
*::after { box-sizing: border-box; margin: 0; padding: 0; }
html { font-size: 16px; -webkit-font-smoothing: antialiased; }

body {
  font-family: var(--font-body);
  color: var(--text);
  background: var(--shell);
  min-height: 100vh;
  line-height: 1.6;
}

a { color: var(--accent); text-decoration: none; }
a:hover { text-decoration: underline; }
img { max-width: 100%; display: block; }

/* ── Utility ───────────────────────────────────────────── */

.hidden { display: none !important; }
.text-sm { font-size: 13px; }
.text-muted { color: var(--text-muted); }
td.text-center { text-align: center; }

/* ── Cards ─────────────────────────────────────────────── */

.card {
  background: var(--card);
  border-radius: var(--radius-lg);
  box-shadow: var(--shadow);
  padding: 24px;
  margin-bottom: 24px;
}

/* ── Auth / Login page ─────────────────────────────────── */

.auth-wrapper {
  min-height: 100vh; display: flex; align-items: center; justify-content: center;
  padding: 24px; background: var(--shell);
}
.auth-card {
  background: var(--card); border-radius: var(--radius-lg);
  box-shadow: var(--shadow-lg); padding: 40px; width: 100%; max-width: 420px;
}
.auth-card .logo { display: flex; justify-content: center; margin-bottom: 32px; }
.auth-card .logo img { height: 64px; max-width: 100%; }
.auth-card h1 {
  color: var(--heading); font-size: 22px; font-weight: 700;
  text-align: center; margin-bottom: 8px;
}
.auth-card .subtitle { color: var(--text-light); text-align: center; font-size: 14px; margin-bottom: 28px; }

/* ── Forms ─────────────────────────────────────────────── */

.form-group { margin-bottom: 18px; }
.form-group label {
  display: block; font-size: 13px; font-weight: 600;
  color: var(--heading); margin-bottom: 6px; font-family: var(--font-mono);
}

.form-control {
  width: 100%; padding: 10px 14px;
  border: 1px solid var(--border); border-radius: var(--radius);
  font-family: var(--font-body); font-size: 14px;
  color: var(--text); background: #fff;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.form-control:focus {
  outline: none; border-color: var(--accent);
  box-shadow: 0 0 0 3px rgba(42,184,92,0.15);
}
.form-control::placeholder { color: var(--text-muted); }
select.form-control { cursor: pointer; }
textarea.form-control { resize: vertical; min-height: 80px; }

/* ── Buttons ───────────────────────────────────────────── */

.btn {
  display: inline-flex; align-items: center; justify-content: center; gap: 6px;
  padding: 8px 16px; border: none; border-radius: var(--radius);
  font-family: var(--font-body); font-size: 14px; font-weight: 600;
  cursor: pointer; text-decoration: none; line-height: 1.4;
  transition: background-color 200ms, box-shadow 200ms, border-color 200ms, transform 100ms;
}
.btn:focus-visible { outline: none; box-shadow: var(--focus-ring); }
.btn:active:not(:disabled) { transform: scale(0.98); }
.btn:disabled { background: #e5e7eb; color: #9ca3af; border-color: #e5e7eb; cursor: not-allowed; }
.btn-primary { background: var(--accent); color: #fff; }
.btn-primary:hover:not(:disabled) { background: var(--accent-hover); }
.btn-primary:focus-visible { box-shadow: 0 0 0 3px rgba(42,184,92,0.35); }
.btn-secondary { background: var(--bg-light); color: var(--text); border: 1px solid var(--border); }
.btn-secondary:hover:not(:disabled) { background: var(--border-light); border-color: #cbd5e1; }
.btn-danger { background: var(--danger); color: #fff; }
.btn-danger:hover:not(:disabled) { background: var(--danger-hover); }
.btn-danger:focus-visible { box-shadow: 0 0 0 3px rgba(231,76,60,0.3); }
.btn-outline { background: transparent; border: 1px solid var(--accent); color: var(--accent); }
.btn-outline:hover:not(:disabled) { background: rgba(42,184,92,0.08); }
.btn-sm { padding: 5px 12px; font-size: 13px; }
.btn-block { width: 100%; }

/* ── Tables ────────────────────────────────────────────── */

.table-wrapper { overflow-x: auto; }
table { width: 100%; border-collapse: collapse; font-size: 14px; }
thead th {
  text-align: left; padding: 10px 14px;
  font-size: 11px; font-weight: 600; color: var(--text-light);
  text-transform: uppercase; letter-spacing: 0.5px;
  font-family: var(--font-mono); border-bottom: 2px solid var(--border-light);
  white-space: nowrap;
}
tbody td { padding: 12px 14px; border-bottom: 1px solid var(--border-light); }
tbody tr { transition: background 0.1s; }
tbody tr:hover { background: var(--bg-light); }

/* ── Inline form alerts ────────────────────────────────── */

.form-alert {
  padding: 10px 14px; border-radius: 8px; font-size: 13px;
  margin-bottom: 14px; line-height: 1.4;
}
.form-alert-error {
  background: #fef2f2; border: 1px solid #fecaca; color: #991b1b;
}
.form-alert-success {
  background: #f0fdf4; border: 1px solid #bbf7d0; color: #166534;
}

/* ── Toasts ────────────────────────────────────────────── */

.toast-container {
  position: fixed; bottom: 24px; right: 24px; z-index: 9999;
  display: flex; flex-direction: column-reverse; gap: 8px; pointer-events: none;
}
.toast {
  display: flex; align-items: center; gap: 10px;
  padding: 10px 16px; border-radius: 8px;
  font-size: 13px; font-weight: 500; line-height: 1.4;
  box-shadow: 0 3px 10px rgba(0,0,0,.2), 0 1px 4px rgba(0,0,0,.12);
  animation: toast-in 0.25s cubic-bezier(0.4, 0, 0.2, 1);
  max-width: 400px; min-width: 260px; pointer-events: auto;
}
.toast::before {
  font-family: 'Material Icons'; font-size: 20px; flex-shrink: 0;
}

@keyframes toast-in {
  from { opacity: 0; transform: translateY(12px); }
  to { opacity: 1; transform: translateY(0); }
}

@keyframes modal-fade-in {
  from { opacity: 0; }
  to   { opacity: 1; }
}
@keyframes modal-scale-in {
  from { opacity: 0; transform: scale(0.95) translateY(8px); }
  to   { opacity: 1; transform: scale(1) translateY(0); }
}
.modal {
  background: var(--card); border-radius: var(--radius-lg);
  box-shadow: 0 11px 15px -7px rgba(0,0,0,0.2), 0 24px 38px 3px rgba(0,0,0,0.14), 0 9px 46px 8px rgba(0,0,0,0.12);
  padding: 28px;
  width: 100%; max-width: 480px; max-height: calc(100vh - 64px); overflow-y: auto;
  animation: modal-scale-in 225ms cubic-bezier(0.4,0,0.2,1);
}
.modal h2 { color: var(--heading); font-size: 18px; margin-bottom: 20px; }

/* ── Responsive ────────────────────────────────────────── */

@media (max-width: 480px) {
  .card { padding: 16px; }
}

/* ── Two-step verification (js/mfa-ui.js) ─────────────────────────────── */
.mfa-step { text-align: left; }
.mfa-step-icon { display: flex; justify-content: center; margin-bottom: 10px; }
.mfa-step-icon .material-icons {
  font-size: 30px; color: var(--accent); background: rgba(42,184,92,0.1);
  border-radius: 50%; width: 56px; height: 56px; display: flex; align-items: center; justify-content: center;
}
.mfa-title { color: var(--heading); font-size: 20px; font-weight: 700; text-align: center; margin: 0 0 6px; }
.mfa-sub { color: var(--text-light, #666); font-size: 14px; text-align: center; margin: 0 0 20px; line-height: 1.45; }
.mfa-step .btn .material-icons,
.mfa-panel .btn .material-icons { font-size: 18px; vertical-align: -4px; margin-right: 4px; }
.mfa-or { display: flex; align-items: center; gap: 10px; color: var(--text-muted); font-size: 12px; margin: 16px 0; }
.mfa-or::before,
.mfa-or::after { content: ''; flex: 1; height: 1px; background: var(--border); }
.mfa-code-input { font-size: 20px; letter-spacing: 4px; text-align: center; font-family: var(--font-mono, monospace); }
.mfa-code-input::placeholder,
.mfa-totp-code::placeholder { letter-spacing: normal; font-size: 14px; font-family: var(--font, inherit); }
.mfa-links { display: flex; justify-content: space-between; gap: 12px; margin-top: 14px; font-size: 13px; flex-wrap: wrap; }
.mfa-links a:only-child { margin: 0 auto; }
.mfa-step .form-alert { margin-top: 12px; }
.mfa-choices { display: flex; flex-direction: column; gap: 10px; }
.mfa-choice {
  display: flex; align-items: center; gap: 12px; width: 100%; text-align: left; cursor: pointer;
  padding: 14px; border: 1px solid var(--border); border-radius: 10px; background: #fff; font: inherit;
}
.mfa-choice:hover:not(:disabled) { border-color: var(--accent); background: rgba(42,184,92,0.04); }
.mfa-choice:disabled { opacity: .55; cursor: not-allowed; }
.mfa-choice .material-icons { font-size: 26px; color: var(--accent); }
.mfa-choice strong { display: block; font-size: 14px; color: var(--heading); }
.mfa-choice small { display: block; font-size: 12px; color: var(--text-muted); margin-top: 2px; }
.mfa-steps { margin: 0 0 10px; padding: 0; list-style-position: inside; font-size: 13px; color: var(--text); }
.mfa-qr { display: flex; justify-content: center; margin: 4px 0 12px; }
.mfa-qr svg { width: 200px; height: 200px; border: 1px solid var(--border); border-radius: 8px; background: #fff; }
.mfa-manual { font-size: 12px; margin-bottom: 14px; color: var(--text-muted); }
.mfa-manual summary { cursor: pointer; color: var(--accent); }
.mfa-secret code { display: block; margin-top: 8px; font-size: 14px; letter-spacing: 1px; word-break: break-all; background: var(--bg-light); padding: 8px 10px; border-radius: 6px; color: var(--heading); }
.mfa-hint { margin-top: 6px; }
.mfa-row { display: grid; grid-template-columns: 1fr 1fr; gap: 12px; }
.mfa-optional { font-weight: 400; color: var(--text-muted); }
.mfa-actions { display: flex; justify-content: flex-end; gap: 8px; margin-top: 14px; }
.mfa-codes {
  display: grid; grid-template-columns: repeat(2, 1fr); gap: 6px 18px; list-style: decimal inside;
  background: var(--bg-light); border: 1px solid var(--border); border-radius: 8px; padding: 14px 16px; margin: 0 0 12px; font-size: 12px; color: var(--text-muted);
}
.mfa-codes code { font-size: 15px; color: var(--heading); letter-spacing: .5px; font-family: var(--font-mono, monospace); }
.mfa-code-actions { display: flex; gap: 8px; margin-bottom: 12px; }
.mfa-ack { display: flex; align-items: center; gap: 8px; font-size: 13px; margin-bottom: 12px; cursor: pointer; }
.mfa-modal-backdrop {
  position: fixed; inset: 0; background: rgba(15,23,42,0.5); z-index: 2000;
  display: flex; align-items: center; justify-content: center; padding: 16px;
}
.mfa-modal { background: var(--card, #fff); border-radius: 12px; box-shadow: 0 20px 60px rgba(0,0,0,0.25); width: 100%; max-width: 400px; padding: 28px; }
.mfa-panel .mfa-panel-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 16px; margin-bottom: 14px; }
.mfa-panel h2 { font-size: 15px; font-weight: 600; margin: 0 0 4px; color: var(--heading); }
.mfa-panel .mfa-panel-head p { font-size: 12px; color: var(--text-muted); margin: 0; max-width: 560px; }
.mfa-badge { display: inline-block; white-space: nowrap; font-size: 11px; font-weight: 600; padding: 3px 9px; border-radius: 999px; background: var(--bg-light); color: var(--text-muted); border: 1px solid var(--border); }
.mfa-badge-req { background: #fff7e6; color: #9a5b00; border-color: #f5d9a6; }
.mfa-badge-ok { background: rgba(42,184,92,0.1); color: #1f7a43; border-color: rgba(42,184,92,0.3); }
.mfa-inline-alert { margin-bottom: 12px; }
.mfa-factors { width: 100%; }
.mfa-factors td { vertical-align: middle; padding: 10px 8px; border-top: 1px solid var(--border); }
.mfa-factors tr:first-child td { border-top: none; }
.mfa-factors td:first-child { width: 36px; }
.mfa-ficon { color: var(--accent); font-size: 22px; }
.mfa-fmeta { font-size: 12px; color: var(--text-muted); font-weight: 400; }
.mfa-fdate { font-size: 13px; }
.mfa-factions { text-align: right; white-space: nowrap; }
.mfa-factions .btn + .btn { margin-left: 6px; }
.mfa-empty { font-size: 13px; color: var(--text-muted); margin: 4px 0 12px; }
.mfa-add { display: flex; gap: 8px; flex-wrap: wrap; margin: 12px 0 4px; }
.mfa-work:not(:empty) { border: 1px solid var(--border); border-radius: 10px; padding: 20px; margin-top: 14px; max-width: 460px; }
.mfa-recovery { display: flex; justify-content: space-between; align-items: center; gap: 16px; border-top: 1px solid var(--border); margin-top: 16px; padding-top: 14px; font-size: 13px; }
.mfa-toggles { display: flex; flex-direction: column; gap: 10px; }
.mfa-toggle { display: flex; gap: 10px; align-items: flex-start; font-size: 13px; cursor: pointer; }
.mfa-toggle input { margin-top: 3px; }
.mfa-toggle strong { display: block; color: var(--heading); }
.mfa-toggle small { display: block; color: var(--text-muted); font-size: 12px; }
.mfa-toggle.mfa-locked { cursor: default; opacity: .8; }
.mfa-subhead { font-size: 14px; font-weight: 600; color: var(--heading); margin: 20px 0 8px; display: flex; gap: 10px; align-items: baseline; }
.mfa-members { width: 100%; }
@media (max-width: 560px) {
  .mfa-row { grid-template-columns: 1fr; }
  .mfa-codes { grid-template-columns: 1fr; }
  .mfa-panel .mfa-panel-head,
.mfa-recovery { flex-direction: column; align-items: stretch; }
  .mfa-factions { white-space: normal; }
}

/* ================================================================
   Compact spacing (the removed classic pages had a density toggle;
   compact was the default and stays the look of these pages).

   Spacing scale (8px grid, with a 4px half step):
     --sp-1: 4px  --sp-2: 8px  --sp-3: 12px  --sp-4: 16px  --sp-5: 24px
   ================================================================ */

:root {
  --sp-1: 4px;
  --sp-2: 8px;
  --sp-3: 12px;
  --sp-4: 16px;
  --sp-5: 24px;
  --th-bg: #f4f6f8;
  --table-max-h: calc(100vh - 170px);
}

/* ── Sticky table headers (both densities) ─────────────────
   Header cells stick to the top of their scroll container. Table
   wrappers scroll vertically themselves (bounded height), so the
   header stays visible in every data table, not only where the page
   scrolls. */
.table-wrapper { overflow: auto; max-height: var(--table-max-h); }
thead th {
  position: sticky; top: 0; z-index: 2;
  background: var(--th-bg);
  background-clip: padding-box;
  box-shadow: inset 0 -1px 0 var(--border);
}
/* Dialog and inline-styled wrappers keep their own heights. */
.modal .table-wrapper { max-height: 60vh; }

/* ── Compact (default) ───────────────────────────────────── */
:root:not([data-density="comfortable"]) {
  --radius-lg: 6px;
}
:root:not([data-density="comfortable"]) body { line-height: 1.45; }

/* Cards, headers, sections */
:root:not([data-density="comfortable"]) .card { padding: var(--sp-3) var(--sp-4); margin-bottom: var(--sp-3); }

/* Tables: 13px, tight rows */
:root:not([data-density="comfortable"]) table { font-size: 13px; }
:root:not([data-density="comfortable"]) thead th { padding: 6px 10px; font-size: 10.5px; letter-spacing: .4px; }
:root:not([data-density="comfortable"]) tbody td { padding: 5px 10px; line-height: 1.35; }

/* Buttons: keep primary actions at >= 28px, compact buttons inside tables */
:root:not([data-density="comfortable"]) .btn { padding: 5px 12px; font-size: 13px; min-height: 30px; }
:root:not([data-density="comfortable"]) .btn-sm { padding: 3px 10px; font-size: 12.5px; min-height: 28px; }
:root:not([data-density="comfortable"]) td .btn,
:root:not([data-density="comfortable"]) td .btn-sm { padding: 2px 8px; font-size: 12px; min-height: 24px; }

/* Forms and filter bars */
:root:not([data-density="comfortable"]) .form-control { padding: 6px 10px; font-size: 13px; }
:root:not([data-density="comfortable"]) .form-group { margin-bottom: var(--sp-3); }
:root:not([data-density="comfortable"]) .form-group label { margin-bottom: var(--sp-1); font-size: 12px; }
:root:not([data-density="comfortable"]) textarea.form-control { min-height: 64px; }