/* ============================================================================
   ZATCA Onboarding Wizard styles (Phase 7.1)
   ----------------------------------------------------------------------------
   - Extracted from D:\Projects\Claude\zatca-onboarding-mockup.html (approved by user).
   - Scoped via a `.zatca-onboarding-page` body class on the page wrapper to avoid
     leaking the .card / .btn / .dialog rules into other pages.
   - Production-mode styling is gated by the .prod modifier on the page wrapper.
   ============================================================================ */

.zatca-onboarding-page {
  /* ── V2 design tokens (light) ──────────────────────────────────────────── */
  --zo-color-primary: #2563eb;
  --zo-color-primary-rgb: 37 99 235;
  --zo-color-primary-hover: #1d4ed8;
  --zo-color-success: #16a34a;
  --zo-color-warning: #d97706;
  --zo-color-danger: #dc2626;
  --zo-color-danger-rgb: 220 38 38;
  --zo-color-surface: #ffffff;
  --zo-color-surface-raised: #f8fafc;
  --zo-color-surface-muted: #f1f5f9;
  --zo-color-border: #e2e8f0;
  --zo-color-text-primary: #0f172a;
  --zo-color-text-secondary: #64748b;
  --zo-color-text-muted: #94a3b8;
  --zo-radius: 10px;
  --zo-radius-sm: 6px;
  --zo-shadow-sm: 0 1px 2px rgba(15, 23, 42, .06);
  --zo-shadow-md: 0 4px 12px rgba(15, 23, 42, .08);

  /* Inherit the app's typography — Inter for LTR, Droid Arabic Kufi for RTL.
     The fallback chain mirrors tailwind-input.css :root tokens so this page
     uses the same font as every other screen. */
  font-family: var(--font-sans, 'Inter', system-ui, sans-serif);
  font-size: 14px;
  color: var(--zo-color-text-primary);
}

/* Match the global rule at tailwind-input.css line 109 so RTL switches to
   Droid Arabic Kufi inside the wizard too. */
[dir="rtl"] .zatca-onboarding-page,
[dir="rtl"] .zatca-onboarding-page .zo-card,
[dir="rtl"] .zatca-onboarding-page .zo-input,
[dir="rtl"] .zatca-onboarding-page .zo-btn,
[dir="rtl"] .zatca-onboarding-page .dialog {
  font-family: var(--font-arabic, 'Droid Arabic Kufi', system-ui, sans-serif);
}

/* Dark mode (the WASM shell flips a `.dark` class on body). */
body.dark .zatca-onboarding-page {
  --zo-color-surface: #0f172a;
  --zo-color-surface-raised: #1e293b;
  --zo-color-surface-muted: #1e293b;
  --zo-color-border: #334155;
  --zo-color-text-primary: #f1f5f9;
  --zo-color-text-secondary: #cbd5e1;
  --zo-color-text-muted: #64748b;
}

.zatca-onboarding-page h1,
.zatca-onboarding-page h2,
.zatca-onboarding-page h3,
.zatca-onboarding-page h4 { margin: 0; font-weight: 600; }

/* ── Page header ─────────────────────────────────────────────────────────── */
.zatca-onboarding-page .page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 16px;
}
.zatca-onboarding-page .page-title {
  font-size: 18px;
  font-weight: 600;
}
.zatca-onboarding-page .page-title .env-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  margin-inline-start: 12px;
  font-size: 12px;
  font-weight: 500;
  border-radius: 999px;
  background: rgb(var(--zo-color-primary-rgb) / .1);
  color: var(--zo-color-primary);
}
.zatca-onboarding-page.prod .page-title .env-pill {
  background: rgb(var(--zo-color-danger-rgb) / .12);
  color: var(--zo-color-danger);
}
.zatca-onboarding-page .step-counter {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 12px;
  border-radius: 999px;
  background: var(--zo-color-surface);
  border: 1px solid var(--zo-color-border);
  color: var(--zo-color-text-secondary);
}

/* ── Production warning banner (only when .prod) ─────────────────────────── */
.zatca-onboarding-page .prod-banner {
  display: none;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: rgb(var(--zo-color-danger-rgb) / .08);
  border: 1px solid rgb(var(--zo-color-danger-rgb) / .3);
  border-radius: var(--zo-radius-sm);
  color: var(--zo-color-danger);
}
.zatca-onboarding-page.prod .prod-banner { display: flex; }
.zatca-onboarding-page .prod-banner i { font-size: 18px; }
.zatca-onboarding-page .prod-banner strong { display: block; font-size: 14px; }
.zatca-onboarding-page .prod-banner span { font-size: 12px; opacity: .85; }

/* ── Stepper ─────────────────────────────────────────────────────────────── */
.zatca-onboarding-page .stepper {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  padding: 24px 20px 12px;
  background: var(--zo-color-surface);
  border: 1px solid var(--zo-color-border);
  border-radius: var(--zo-radius);
  margin-bottom: 16px;
}
.zatca-onboarding-page .stepper .step {
  flex: 1 1 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  text-align: center;
  position: relative;
  cursor: pointer;
}
.zatca-onboarding-page .stepper .step + .step::before {
  content: "";
  position: absolute;
  top: 18px;
  inset-inline-end: 50%;
  width: 100%;
  height: 2px;
  background: var(--zo-color-border);
  z-index: 0;
}
.zatca-onboarding-page .stepper .step.done + .step::before { background: var(--zo-color-success); }
.zatca-onboarding-page .stepper .step.current + .step::before {
  background: linear-gradient(to left, var(--zo-color-border), var(--zo-color-primary));
}
.zatca-onboarding-page .stepper .node {
  position: relative;
  z-index: 1;
  width: 36px;
  height: 36px;
  border-radius: 999px;
  background: var(--zo-color-surface);
  border: 2px solid var(--zo-color-border);
  color: var(--zo-color-text-secondary);
  display: flex;
  align-items: center;
  justify-content: center;
  font-weight: 600;
  font-size: 14px;
  transition: all .2s;
}
.zatca-onboarding-page .stepper .step.done .node {
  background: var(--zo-color-success);
  border-color: var(--zo-color-success);
  color: #fff;
}
.zatca-onboarding-page .stepper .step.current .node {
  background: var(--zo-color-primary);
  border-color: var(--zo-color-primary);
  color: #fff;
  box-shadow: 0 0 0 4px rgb(var(--zo-color-primary-rgb) / .2);
  animation: zo-pulse 2s infinite;
}
.zatca-onboarding-page .stepper .step.locked .node {
  background: var(--zo-color-surface-raised);
  color: var(--zo-color-text-muted);
}
.zatca-onboarding-page .stepper .step.locked { cursor: not-allowed; }
.zatca-onboarding-page .stepper .label {
  margin-top: 8px;
  font-size: 12px;
  font-weight: 500;
  color: var(--zo-color-text-secondary);
  white-space: nowrap;
}
.zatca-onboarding-page .stepper .step.current .label { color: var(--zo-color-primary); font-weight: 600; }
.zatca-onboarding-page .stepper .step.done .label { color: var(--zo-color-success); }
@keyframes zo-pulse {
  0%,100% { box-shadow: 0 0 0 4px rgb(var(--zo-color-primary-rgb) / .2); }
  50%     { box-shadow: 0 0 0 8px rgb(var(--zo-color-primary-rgb) / 0); }
}

/* ── Activated banner ────────────────────────────────────────────────────── */
.zatca-onboarding-page .activated-banner {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 12px 16px;
  margin-bottom: 16px;
  background: rgba(22, 163, 74, .08);
  border: 1px solid rgba(22, 163, 74, .25);
  border-inline-start: 4px solid var(--zo-color-success);
  border-radius: var(--zo-radius-sm);
  color: var(--zo-color-success);
}
.zatca-onboarding-page .activated-banner i { font-size: 18px; }
.zatca-onboarding-page .activated-banner strong { font-weight: 600; }

/* ── Card layout ─────────────────────────────────────────────────────────── */
.zatca-onboarding-page .zo-card {
  background: var(--zo-color-surface);
  border: 1px solid var(--zo-color-border);
  border-radius: var(--zo-radius);
  box-shadow: var(--zo-shadow-sm);
  margin-bottom: 16px;
  overflow: hidden;
}
.zatca-onboarding-page .zo-card-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 16px 20px;
  background: var(--zo-color-surface-raised);
  border-bottom: 1px solid var(--zo-color-border);
}
.zatca-onboarding-page .zo-card-header h3 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 16px;
}
.zatca-onboarding-page .zo-card-header h3 i { color: var(--zo-color-primary); }

.zatca-onboarding-page .status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 4px 10px;
  font-size: 11px;
  font-weight: 600;
  border-radius: 999px;
  letter-spacing: .02em;
  text-transform: uppercase;
}
.zatca-onboarding-page .status-pill.done    { background: rgba(22,163,74,.12); color: var(--zo-color-success); }
.zatca-onboarding-page .status-pill.current { background: rgb(var(--zo-color-primary-rgb) / .12); color: var(--zo-color-primary); }
.zatca-onboarding-page .status-pill.locked  { background: var(--zo-color-surface-muted); color: var(--zo-color-text-muted); }

.zatca-onboarding-page .zo-card-body { padding: 20px; }
.zatca-onboarding-page .zo-card-body .hint {
  margin: 0 0 16px;
  color: var(--zo-color-text-secondary);
  font-size: 13px;
  line-height: 1.6;
}

/* ── Form fields (local — don't override the global .atq-field) ──────────── */
.zatca-onboarding-page .zo-field {
  display: flex;
  flex-direction: column;
  gap: 6px;
  margin-bottom: 14px;
}
.zatca-onboarding-page .zo-label {
  display: flex;
  align-items: center;
  gap: 6px;
  font-size: 12px;
  font-weight: 600;
  color: var(--zo-color-text-secondary);
}
.zatca-onboarding-page .zo-label .req { color: var(--zo-color-danger); }
.zatca-onboarding-page .zo-label i { width: 14px; color: var(--zo-color-text-muted); }
.zatca-onboarding-page .zo-input {
  width: 100%;
  padding: 10px 12px;
  font-size: 14px;
  border: 1px solid var(--zo-color-border);
  border-radius: var(--zo-radius-sm);
  background: var(--zo-color-surface);
  color: var(--zo-color-text-primary);
  transition: border-color .15s, box-shadow .15s;
}
.zatca-onboarding-page .zo-input:focus {
  outline: none;
  border-color: var(--zo-color-primary);
  box-shadow: 0 0 0 3px rgb(var(--zo-color-primary-rgb) / .18);
}
.zatca-onboarding-page .zo-input:disabled {
  background: var(--zo-color-surface-raised);
  color: var(--zo-color-text-muted);
}
.zatca-onboarding-page .zo-field .hint-sm { font-size: 11px; color: var(--zo-color-text-muted); }

.zatca-onboarding-page .form-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 0 24px;
}
@media (max-width: 720px) {
  .zatca-onboarding-page .form-grid { grid-template-columns: 1fr; }
}

/* ── Sample cards (Step 4) ───────────────────────────────────────────────── */
.zatca-onboarding-page .progress-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 16px;
  font-size: 13px;
  color: var(--zo-color-text-secondary);
  gap: 12px;
}
.zatca-onboarding-page .progress-row .count strong { color: var(--zo-color-text-primary); }
.zatca-onboarding-page .progress-bar {
  flex: 1 1 auto;
  height: 6px;
  background: var(--zo-color-surface-muted);
  border-radius: 999px;
  margin: 0 16px;
  overflow: hidden;
}
.zatca-onboarding-page .progress-bar .fill {
  height: 100%;
  background: linear-gradient(90deg, var(--zo-color-success), #4ade80);
  border-radius: 999px;
  transition: width .6s;
}
.zatca-onboarding-page .sample-grid {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: 12px;
}
@media (max-width: 900px) {
  .zatca-onboarding-page .sample-grid { grid-template-columns: repeat(2, 1fr); }
}
@media (max-width: 540px) {
  .zatca-onboarding-page .sample-grid { grid-template-columns: 1fr; }
}
.zatca-onboarding-page .sample-card {
  padding: 14px;
  border: 1px solid var(--zo-color-border);
  border-radius: var(--zo-radius-sm);
  background: var(--zo-color-surface);
  display: flex;
  flex-direction: column;
  gap: 10px;
}
.zatca-onboarding-page .sample-card.pass { border-color: rgba(22,163,74,.4); background: rgba(22,163,74,.04); }
.zatca-onboarding-page .sample-card.fail { border-color: rgba(220,38,38,.4); background: rgba(220,38,38,.04); }
.zatca-onboarding-page .sample-card .head { display: flex; align-items: center; gap: 10px; }
.zatca-onboarding-page .sample-card .head i {
  font-size: 18px;
  width: 32px;
  height: 32px;
  display: flex;
  align-items: center;
  justify-content: center;
  border-radius: 8px;
  background: var(--zo-color-surface-muted);
  color: var(--zo-color-text-secondary);
}
.zatca-onboarding-page .sample-card.pass .head i { background: rgba(22,163,74,.15); color: var(--zo-color-success); }
.zatca-onboarding-page .sample-card.fail .head i { background: rgba(220,38,38,.15); color: var(--zo-color-danger); }
.zatca-onboarding-page .sample-card .title { font-size: 13px; font-weight: 600; }
.zatca-onboarding-page .sample-card .meta { font-size: 11px; color: var(--zo-color-text-muted); }
.zatca-onboarding-page .sample-card .badge-row { display: flex; gap: 6px; flex-wrap: wrap; }
.zatca-onboarding-page .sample-card .badge {
  font-size: 10px;
  font-weight: 600;
  padding: 3px 8px;
  border-radius: 999px;
  letter-spacing: .02em;
  background: var(--zo-color-surface-muted);
  color: var(--zo-color-text-secondary);
}
.zatca-onboarding-page .sample-card.pass .badge.status     { background: rgba(22,163,74,.12); color: var(--zo-color-success); }
.zatca-onboarding-page .sample-card.fail .badge.status     { background: rgba(220,38,38,.12); color: var(--zo-color-danger); }
.zatca-onboarding-page .sample-card.previous .badge.status { background: rgba(217,119,6,.12); color: var(--zo-color-warning); }

/* ── Sticky action bar / card footer ─────────────────────────────────────── */
.zatca-onboarding-page .zo-card-footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 14px 20px;
  background: var(--zo-color-surface-raised);
  border-top: 1px solid var(--zo-color-border);
  gap: 8px;
}
.zatca-onboarding-page .zo-card-footer .actions-mid { display: flex; gap: 8px; }
.zatca-onboarding-page .zo-btn {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  padding: 9px 18px;
  font-size: 13px;
  font-weight: 600;
  border-radius: var(--zo-radius-sm);
  border: 1px solid var(--zo-color-border);
  cursor: pointer;
  transition: all .15s;
  background: var(--zo-color-surface);
  color: var(--zo-color-text-primary);
}
.zatca-onboarding-page .zo-btn:hover { background: var(--zo-color-surface-raised); }
.zatca-onboarding-page .zo-btn-primary {
  background: var(--zo-color-primary);
  border-color: var(--zo-color-primary);
  color: #fff;
}
.zatca-onboarding-page .zo-btn-primary:hover {
  background: var(--zo-color-primary-hover);
  border-color: var(--zo-color-primary-hover);
}
.zatca-onboarding-page .zo-btn-success { background: var(--zo-color-success); border-color: var(--zo-color-success); color: #fff; }
.zatca-onboarding-page .zo-btn-warning { background: var(--zo-color-warning); border-color: var(--zo-color-warning); color: #fff; }
.zatca-onboarding-page .zo-btn-danger  { background: var(--zo-color-danger);  border-color: var(--zo-color-danger);  color: #fff; }
.zatca-onboarding-page .zo-btn:disabled { opacity: .5; cursor: not-allowed; }

/* Mirror arrow icons in RTL */
[dir="rtl"] .zatca-onboarding-page .zo-btn .fa-arrow-right { transform: scaleX(-1); }
[dir="rtl"] .zatca-onboarding-page .zo-btn .fa-arrow-left  { transform: scaleX(-1); }

/* ── Section title ───────────────────────────────────────────────────────── */
.zatca-onboarding-page .section-title {
  font-size: 12px;
  font-weight: 700;
  text-transform: uppercase;
  color: var(--zo-color-text-muted);
  letter-spacing: .08em;
  margin: 24px 0 16px;
}

/* ── Card header tools (reset / edit) ────────────────────────────────────── */
.zatca-onboarding-page .header-tools { display: flex; align-items: center; gap: 8px; }
.zatca-onboarding-page .btn-icon {
  background: transparent;
  border: 1px solid var(--zo-color-border);
  color: var(--zo-color-text-secondary);
  width: 30px;
  height: 30px;
  border-radius: 999px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  cursor: pointer;
  font-size: 12px;
}
.zatca-onboarding-page .btn-icon:hover { background: var(--zo-color-surface-muted); color: var(--zo-color-primary); }
.zatca-onboarding-page .btn-icon.danger:hover { color: var(--zo-color-danger); border-color: var(--zo-color-danger); }

/* ── Saved-summary panel (read-only review of completed step) ─────────────── */
.zatca-onboarding-page .saved-summary {
  background: var(--zo-color-surface-raised);
  border: 1px dashed var(--zo-color-border);
  border-radius: var(--zo-radius-sm);
  padding: 14px 16px;
  margin-bottom: 16px;
}
.zatca-onboarding-page .saved-summary .head {
  display: flex;
  align-items: center;
  gap: 8px;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
  color: var(--zo-color-text-muted);
  margin-bottom: 10px;
}
.zatca-onboarding-page .saved-summary .grid {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: 6px 24px;
}
@media (max-width: 720px) {
  .zatca-onboarding-page .saved-summary .grid { grid-template-columns: 1fr; }
}
.zatca-onboarding-page .saved-summary .kv {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  font-size: 12px;
  padding: 4px 0;
  border-bottom: 1px solid var(--zo-color-border);
}
.zatca-onboarding-page .saved-summary .kv:last-child { border-bottom: 0; }
.zatca-onboarding-page .saved-summary .k { color: var(--zo-color-text-muted); white-space: nowrap; }
.zatca-onboarding-page .saved-summary .v {
  color: var(--zo-color-text-primary);
  font-weight: 500;
  text-align: end;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  max-width: 60%;
}
.zatca-onboarding-page .saved-summary .v code {
  font-family: ui-monospace, "SF Mono", Menlo, monospace;
  font-size: 11px;
  background: var(--zo-color-surface-muted);
  padding: 1px 6px;
  border-radius: 4px;
}

/* ── Access-denied screen ────────────────────────────────────────────────── */
.zatca-onboarding-page .no-access {
  max-width: 520px;
  margin: 80px auto;
  text-align: center;
  padding: 40px 24px;
  background: var(--zo-color-surface);
  border: 1px solid var(--zo-color-border);
  border-radius: var(--zo-radius);
}
.zatca-onboarding-page .no-access i { font-size: 48px; color: var(--zo-color-warning); margin-bottom: 16px; }
.zatca-onboarding-page .no-access h2 { font-size: 18px; margin-bottom: 8px; }
.zatca-onboarding-page .no-access p  { color: var(--zo-color-text-secondary); }

/* ── Confirm dialog ──────────────────────────────────────────────────────── */
.zatca-onboarding-page .dialog-backdrop {
  display: none;
  position: fixed;
  inset: 0;
  background: rgba(15, 23, 42, .55);
  z-index: 1000;
  align-items: center;
  justify-content: center;
}
.zatca-onboarding-page .dialog-backdrop.open { display: flex; }
.zatca-onboarding-page .dialog {
  background: var(--zo-color-surface);
  border-radius: var(--zo-radius);
  max-width: 480px;
  width: 92%;
  box-shadow: var(--zo-shadow-md);
  overflow: hidden;
  border-top: 4px solid var(--zo-color-danger);
}
.zatca-onboarding-page .dialog .dialog-body { padding: 20px 24px; }
.zatca-onboarding-page .dialog h4 {
  display: flex;
  align-items: center;
  gap: 10px;
  font-size: 15px;
  color: var(--zo-color-danger);
  margin-bottom: 12px;
}
.zatca-onboarding-page .dialog p {
  font-size: 13px;
  color: var(--zo-color-text-secondary);
  line-height: 1.6;
  margin: 0 0 8px;
}
.zatca-onboarding-page .dialog ul {
  margin: 8px 0;
  padding-inline-start: 20px;
  font-size: 12px;
  color: var(--zo-color-text-primary);
}
.zatca-onboarding-page .dialog .dialog-footer {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding: 14px 24px;
  background: var(--zo-color-surface-raised);
  border-top: 1px solid var(--zo-color-border);
}