/* ============================================================
   Karify — ITR Wizard Styles
   Step-based wizard UI for ITR filing flow.
   Class names mirror what the JS modules render:
     .wizard-step-bar       horizontal step indicator container
     .wizard-step-circle    numbered step button (.active / .completed)
     .wizard-step-line      connector between circles (.completed)
     .wizard-step-label     current step's title heading (above form)
     .wizard-step-content   form area for the active step
     .wizard-nav            sticky prev/next/download nav
   ============================================================ */

/* ---- Step indicator bar (horizontal, scrollable on mobile) ---- */
.wizard-step-bar {
  display: flex; align-items: center; flex-wrap: wrap;
  gap: var(--space-1, 4px);
  padding: var(--space-4, 16px) var(--space-6, 24px) var(--space-3, 12px);
  overflow-x: auto; scrollbar-width: none;
  -webkit-overflow-scrolling: touch;
}
.wizard-step-bar::-webkit-scrollbar { display: none; }

.wizard-step-circle {
  width: 32px; height: 32px; border-radius: 50%;
  display: inline-grid; place-items: center; flex-shrink: 0;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--text-sm, 13px); font-weight: 600;
  border: 2px solid var(--border, #2a3445);
  color: var(--text-muted, #8a98ad);
  background: var(--navy-mid, #0f1a2e);
  cursor: default; opacity: 0.45;
  transition: opacity 150ms ease,
              background 150ms ease,
              border-color 150ms ease,
              color 150ms ease;
}

.wizard-step-circle.completed {
  opacity: 0.9; cursor: pointer;
  border-color: var(--positive, #69f0ae);
  color: var(--positive, #69f0ae);
  background: rgba(105, 240, 174, 0.08);
}
.wizard-step-circle.completed:hover {
  background: rgba(105, 240, 174, 0.16);
}

.wizard-step-circle.active {
  opacity: 1;
  border-color: var(--accent-comply, #b388ff);
  background: var(--accent-comply, #b388ff);
  color: var(--navy, #0b1829);
  box-shadow: 0 0 0 4px rgba(179, 136, 255, 0.15);
}

.wizard-step-circle:disabled { cursor: not-allowed; }

.wizard-step-line {
  flex: 0 1 32px; min-width: 16px; height: 2px;
  background: var(--border, #2a3445);
  border-radius: 1px;
  transition: background 150ms ease;
}
.wizard-step-line.completed { background: var(--positive, #69f0ae); }

/* ---- Current-step breadcrumb (small label above the form heading) ---- */
.wizard-step-label {
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: var(--text-xs, 11px);
  letter-spacing: 0.08em;
  text-transform: uppercase;
  color: var(--text-dim, #6a7791);
  padding: var(--space-1, 4px) var(--space-6, 24px) 0;
}
.wizard-step-label::before {
  content: 'Step \00B7 ';
  color: var(--accent-comply, #b388ff);
  font-weight: 600;
}

/* ---- Section/subsection titles inside each step ---- */
.wizard-section-title {
  font-size: var(--text-xl, 1.25rem); font-weight: 600;
  color: var(--text, #e6ecf5);
  letter-spacing: -0.01em;
  margin: var(--space-2, 8px) 0 var(--space-4, 16px);
}
.wizard-subsection-title {
  font-size: var(--text-base, 14px); font-weight: 600;
  color: var(--text, #e6ecf5);
  margin: var(--space-5, 20px) 0 var(--space-2, 8px);
  padding-top: var(--space-3, 12px);
  border-top: 1px dashed var(--border, #2a3445);
}
.wizard-subsection-title:first-of-type { border-top: none; padding-top: 0; }
.wizard-card-title {
  font-size: var(--text-sm, 13px); font-weight: 600;
  color: var(--text-muted, #8a98ad);
  margin: 0 0 var(--space-2, 8px);
}

/* ---- Wizard form content ---- */
.wizard-step-content {
  padding: var(--space-4, 16px) var(--space-6, 24px) var(--space-6, 24px);
  min-height: 240px;
}

.wizard-step-errors {
  padding: 0 var(--space-6, 24px);
  font-size: var(--text-sm, 13px);
  color: var(--negative, #ff6b6b);
}
.wizard-step-errors:empty { display: none; }

/* ---- Sticky navigation ---- */
.wizard-nav {
  display: flex; justify-content: space-between; align-items: center;
  padding: var(--space-3, 12px) var(--space-6, 24px);
  border-top: 1px solid var(--border, #2a3445);
  position: sticky; bottom: 0;
  background: var(--navy, #0b1829);
  z-index: 10;
}

.wizard-nav .btn-prev {
  padding: var(--space-2, 8px) var(--space-5, 20px);
  border-radius: var(--radius-md, 8px);
  font-size: var(--text-sm, 13px); font-weight: 500;
  color: var(--text-muted, #8a98ad);
  border: 1px solid var(--border, #2a3445);
  background: transparent; cursor: pointer;
  transition: border-color 150ms ease, color 150ms ease;
}
.wizard-nav .btn-prev:hover {
  border-color: var(--border-bright, #4a5468);
  color: var(--text, #e6ecf5);
}
.wizard-nav .btn-prev:disabled {
  opacity: 0.3; cursor: not-allowed;
}

.wizard-nav .btn-next,
.wizard-nav .btn-download,
.btn.btn-download {
  padding: var(--space-2, 8px) var(--space-6, 24px);
  border-radius: var(--radius-md, 8px);
  font-size: var(--text-sm, 13px); font-weight: 600;
  color: var(--navy, #0b1829);
  border: none; cursor: pointer;
  transition: opacity 150ms ease, transform 100ms ease;
}
.wizard-nav .btn-next { background: var(--accent-comply, #b388ff); }
.wizard-nav .btn-download,
.btn.btn-download { background: var(--positive, #69f0ae); }
.wizard-nav .btn-next:hover,
.wizard-nav .btn-download:hover,
.btn.btn-download:hover { opacity: 0.88; }
.wizard-nav .btn-next:active,
.wizard-nav .btn-download:active,
.btn.btn-download:active { transform: scale(0.97); }
.wizard-nav .btn-next:disabled { opacity: 0.35; cursor: not-allowed; }

/* ---- Form fields inside wizard ---- */
.itr-field-group {
  display: flex; flex-direction: column;
  gap: var(--space-1, 4px);
  margin-bottom: var(--space-4, 16px);
}
.itr-field-group label {
  font-size: var(--text-sm, 13px);
  color: var(--text-muted, #8a98ad);
  font-weight: 500;
}
.itr-field-group input,
.itr-field-group select {
  padding: var(--space-2, 8px) var(--space-3, 12px);
  background: var(--navy-mid, #0f1a2e);
  border: 1px solid var(--border, #2a3445);
  border-radius: var(--radius-sm, 4px);
  font-size: var(--text-base, 14px);
  color: var(--text, #e6ecf5);
  transition: border-color 150ms ease;
}
.itr-field-group input:focus,
.itr-field-group select:focus {
  outline: none;
  border-color: var(--accent-comply, #b388ff);
  box-shadow: 0 0 0 2px rgba(179, 136, 255, 0.15);
}
.itr-field-row {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: var(--space-4, 16px);
}

/* Validation & auto-fill */
.field-error input,
.field-error select { border-color: var(--negative, #ff6b6b); }
.error-msg {
  font-size: var(--text-xs, 12px);
  color: var(--negative, #ff6b6b);
  margin-top: var(--space-1, 4px);
}
.auto-filled input { border-left: 3px solid rgba(179, 136, 255, 0.5); }
.auto-fill-badge {
  display: inline-block;
  font-family: var(--font-mono, ui-monospace, monospace);
  font-size: 9px; letter-spacing: 0.06em;
  color: var(--accent-comply, #b388ff);
  background: rgba(179, 136, 255, 0.1);
  padding: 1px var(--space-2, 8px);
  border-radius: var(--radius-sm, 4px);
  margin-left: var(--space-2, 8px);
  vertical-align: middle;
}

/* ---- Review step accordion sections ---- */
.itr-review-section {
  border: 1px solid var(--border, #2a3445);
  border-radius: var(--radius-md, 8px);
  margin-bottom: var(--space-3, 12px);
  overflow: hidden;
}
.itr-review-section summary {
  padding: var(--space-3, 12px) var(--space-4, 16px);
  font-size: var(--text-sm, 13px); font-weight: 600;
  color: var(--text, #e6ecf5);
  background: rgba(179, 136, 255, 0.04);
  cursor: pointer; list-style: none;
}
.itr-review-section summary::before {
  content: '\25B6';
  display: inline-block; margin-right: var(--space-2, 8px);
  font-size: 10px;
  transition: transform 150ms ease;
}
.itr-review-section[open] summary::before { transform: rotate(90deg); }
.itr-review-row {
  display: flex; justify-content: space-between;
  padding: var(--space-2, 8px) var(--space-4, 16px);
  font-size: var(--text-sm, 13px);
  border-top: 1px solid var(--border, #2a3445);
}
.itr-review-row:nth-child(even) { background: rgba(255, 255, 255, 0.015); }
.itr-review-row span:first-child { color: var(--text-muted, #8a98ad); }
.itr-review-row span:last-child {
  color: var(--text, #e6ecf5);
  font-family: var(--font-mono, ui-monospace, monospace);
}

/* ---- Responsive ---- */
@media (max-width: 767px) {
  .wizard-step-bar {
    padding: var(--space-3, 12px) var(--space-4, 16px);
    flex-wrap: nowrap;
  }
  .wizard-step-circle { width: 26px; height: 26px; font-size: var(--text-xs, 12px); }
  .wizard-step-line { min-width: 12px; flex: 0 1 16px; }
  .wizard-step-label,
  .wizard-step-content { padding-left: var(--space-4, 16px); padding-right: var(--space-4, 16px); }
  .itr-field-row { grid-template-columns: 1fr; gap: var(--space-3, 12px); }
  .wizard-nav { padding: var(--space-3, 12px) var(--space-4, 16px); }
}

/* ---- Reduced motion ---- */
@media (prefers-reduced-motion: reduce) {
  .wizard-step-circle,
  .wizard-step-line,
  .wizard-nav .btn-next,
  .wizard-nav .btn-download,
  .btn.btn-download,
  .wizard-nav .btn-prev,
  .itr-field-group input,
  .itr-field-group select,
  .itr-review-section summary::before { transition: none; }
}