/* ═══════════════════════════════════════════════════════════════════
   Financials Studio — Clients prototype-only styles
   Layered on top of tokens.css + dashboard.css + tenant-onboarding.css.
   Only adds the bits that don't already exist:
     • client-row table layout (clients-list)
     • tabs + tab-panel pattern (client-detail)
     • directors-repeating-row (shared by wizard + detail)
     • status pill colour variants for client lifecycle
   ═══════════════════════════════════════════════════════════════════ */

/* ───── list page ─────────────────────────────────────────────────── */

.clients-toolbar {
  display: flex;
  justify-content: space-between;
  align-items: center;
  gap: 12px;
  padding: 0 0 16px;
  flex-wrap: wrap;
}

.clients-toolbar-left {
  display: flex;
  align-items: center;
  gap: 12px;
}

.client-search {
  width: 320px;
  max-width: 100%;
}

.clients-table {
  width: 100%;
  border-collapse: collapse;
  font-size: var(--fs-body-sm);
}

.clients-table thead th {
  text-align: left;
  font-weight: 600;
  font-size: var(--fs-eyebrow);
  letter-spacing: var(--ls-upper);
  text-transform: uppercase;
  color: var(--muted);
  padding: 10px 14px;
  border-bottom: 1px solid var(--hairline);
  background: rgba(238, 242, 248, 0.4);
}

.clients-table tbody tr {
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out);
}

.clients-table tbody tr:hover {
  background: rgba(238, 242, 248, 0.6);
}

.clients-table tbody tr + tr td {
  border-top: 1px solid var(--hairline);
}

.clients-table td {
  padding: 14px;
  vertical-align: middle;
  color: var(--ink);
}

.client-name {
  font-weight: 600;
  color: var(--navy);
}

.client-meta {
  font-size: 12px;
  color: var(--muted);
  margin-top: 2px;
}

.status-pill {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  padding: 3px 9px;
  border-radius: 999px;
  font-size: 11px;
  font-weight: 600;
  letter-spacing: var(--ls-upper);
  text-transform: uppercase;
  background: rgba(46, 132, 92, 0.12);
  color: #2e845c;
}

.status-pill.is-pending {
  background: rgba(214, 158, 46, 0.15);
  color: #b07515;
}

.status-pill.is-archived {
  background: rgba(120, 130, 140, 0.15);
  color: var(--muted);
}

.empty-state {
  text-align: center;
  padding: 64px 24px;
  color: var(--muted);
}

.empty-state h2 {
  font-family: var(--serif);
  font-size: 22px;
  color: var(--navy);
  margin: 8px 0 4px;
}

.empty-state p {
  margin: 0 0 24px;
  max-width: 420px;
  margin-left: auto;
  margin-right: auto;
}

/* ───── tabbed detail page ────────────────────────────────────────── */

.detail-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  padding: 0 0 12px;
  flex-wrap: wrap;
}

.detail-header h1 {
  font-family: var(--serif);
  font-size: 28px;
  letter-spacing: var(--ls-tight-2);
  color: var(--navy);
  margin: 0;
}

.detail-sub {
  color: var(--muted);
  font-size: var(--fs-body-sm);
}

.tabs {
  display: flex;
  gap: 2px;
  border-bottom: 1px solid var(--hairline);
  margin-bottom: 24px;
  flex-wrap: wrap;
}

.tab {
  border: 0;
  background: transparent;
  padding: 12px 18px;
  font-family: var(--sans);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--muted);
  cursor: pointer;
  border-bottom: 2px solid transparent;
  transition: color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}

.tab:hover { color: var(--ink); }

.tab.is-active {
  color: var(--navy);
  border-bottom-color: var(--navy);
  font-weight: 600;
}

.tab.is-disabled {
  color: var(--muted);
  opacity: 0.5;
  cursor: not-allowed;
  position: relative;
}

.tab.is-disabled::after {
  content: 'Soon';
  font-size: 9px;
  background: var(--hairline);
  color: var(--muted);
  padding: 2px 6px;
  border-radius: 999px;
  margin-left: 6px;
  letter-spacing: var(--ls-upper);
  text-transform: uppercase;
}

.tab-panel {
  display: none;
}

.tab-panel.is-active {
  display: block;
}

.tab-pane-actions {
  display: flex;
  justify-content: flex-end;
  gap: 8px;
  padding-top: 16px;
  border-top: 1px solid var(--hairline);
  margin-top: 24px;
}

.tab-pane-status {
  margin-right: auto;
  align-self: center;
  font-size: 12px;
  color: var(--muted);
}

/* ───── directors repeating row (shared) ──────────────────────────── */

.directors-list {
  display: grid;
  gap: 8px;
}

.director-row {
  display: grid;
  grid-template-columns: 1.4fr 1fr 0.9fr 0.8fr auto;
  gap: 10px;
  align-items: center;
  padding: 10px;
  border: 1px solid var(--hairline);
  border-radius: var(--r-1);
  background: var(--paper);
}

@media (max-width: 900px) {
  .director-row { grid-template-columns: 1fr 1fr; }
}

.director-row .field { margin: 0; }

.director-row-remove {
  border: 0;
  background: transparent;
  color: var(--muted);
  cursor: pointer;
  padding: 6px;
}

.director-row-remove:hover { color: #b03a3a; }

.add-director-cta {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  background: transparent;
  border: 1px dashed var(--hairline);
  border-radius: var(--r-1);
  padding: 10px 14px;
  font-family: var(--sans);
  color: var(--muted);
  cursor: pointer;
  width: max-content;
}

.add-director-cta:hover {
  color: var(--navy);
  border-color: var(--navy);
}

/* ───── review summary (wizard final step) ────────────────────────── */

.review-grid {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 18px;
}

@media (max-width: 700px) {
  .review-grid { grid-template-columns: 1fr; }
}

.review-card {
  border: 1px solid var(--hairline);
  border-radius: var(--r-1);
  padding: 16px;
  background: rgba(238, 242, 248, 0.4);
}

.review-card-title {
  font-size: var(--fs-eyebrow);
  font-weight: 600;
  letter-spacing: var(--ls-upper);
  text-transform: uppercase;
  color: var(--muted);
  margin: 0 0 8px;
}

.review-row {
  display: flex;
  justify-content: space-between;
  gap: 12px;
  padding: 4px 0;
  font-size: var(--fs-body-sm);
}

.review-row dt {
  color: var(--muted);
  margin: 0;
}

.review-row dd {
  color: var(--ink);
  margin: 0;
  text-align: right;
  font-weight: 500;
}

.field-error {
  font-size: 12px;
  color: #b03a3a;
  margin-top: 4px;
}

/* ───── button overrides ──────────────────────────────────────────────
   Onboarding's .cta-primary is full-width because it sits inside narrow
   sign-in / sign-up forms. On the clients pages it sits inline next to
   ghost buttons (toolbar, tabs, wizard footer) — collapse it back to
   intrinsic width and tighten the padding so it reads as a button, not
   a banner.
   ─────────────────────────────────────────────────────────────────── */

.clients-toolbar .cta-primary,
.tab-pane-actions .cta-primary,
.tab-pane-actions .btn-ghost,
.wizard-pane-foot .cta-primary,
.wizard-pane-foot .btn-ghost,
.wizard-pane-foot .btn-secondary,
.detail-header .btn-ghost {
  width: auto;
  padding: 10px 18px;
  font-size: var(--fs-body-sm);
}

/* Secondary action — sits between ghost and primary in visual weight.
   Used for "Save & Exit" so users can park a draft without competing
   with the primary "Next" / "Save client" CTA. */
.btn-secondary {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--sans);
  font-size: var(--fs-body-sm);
  font-weight: 600;
  color: var(--navy);
  background: rgba(238, 242, 248, 0.8);
  border: 1px solid var(--hairline);
  border-radius: var(--r-cta);
  cursor: pointer;
  transition: background-color var(--dur-fast) var(--ease-out),
              border-color var(--dur-fast) var(--ease-out);
}
.btn-secondary:hover {
  background: rgba(220, 228, 240, 1);
  border-color: var(--navy);
}
.btn-secondary[disabled] { opacity: 0.6; cursor: not-allowed; }

/* Ghost (Discard / Back / Archive). The wizard CSS doesn't define this
   variant, so set it here so it pairs visually with .cta-primary. */
.btn-ghost {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  gap: 8px;
  padding: 10px 18px;
  font-family: var(--sans);
  font-size: var(--fs-body-sm);
  font-weight: 500;
  color: var(--ink);
  background: transparent;
  border: 1px solid var(--hairline);
  border-radius: var(--r-cta);
  cursor: pointer;
  transition: border-color var(--dur-fast) var(--ease-out),
              color var(--dur-fast) var(--ease-out);
}
.btn-ghost:hover { border-color: var(--navy); color: var(--navy); }
.btn-ghost[disabled] { opacity: 0.5; cursor: not-allowed; }

/* ───── wizard progress bar ───────────────────────────────────────────
   Sits at the top of the right pane. Re-affirms the rail's step state in
   a single horizontal sweep so the user always sees how far they've come.
   ─────────────────────────────────────────────────────────────────── */

.wizard-progress {
  position: relative;
  width: 100%;
  height: 4px;
  border-radius: var(--r-pill);
  background: var(--hairline);
  overflow: hidden;
  margin-bottom: 6px;
}
.wizard-progress-fill {
  height: 100%;
  background: linear-gradient(90deg, var(--navy), var(--success, #2e8b57));
  border-radius: var(--r-pill);
  transition: width var(--dur-base, .4s) var(--ease-out);
}
.wizard-progress-meta {
  display: flex;
  justify-content: space-between;
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 18px;
  letter-spacing: var(--ls-upper);
  text-transform: uppercase;
  font-weight: 600;
}

/* Wizard footer — Back on the left (hidden on step 1), Save & Exit + Next
   grouped on the right so the two save-related actions sit together. */
.wizard-pane-foot {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  padding-top: 24px;
  margin-top: 24px;
  border-top: 1px solid var(--hairline);
}
.wizard-pane-foot-right {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-left: auto;
}

/* Defensive: the .cta-primary { display: inline-flex } rule from
   onboarding.css overrides the HTML5 [hidden] attribute, so toggling
   `hidden` on a CTA without this override leaves both buttons visible
   side-by-side at equal prominence. */
[hidden] { display: none !important; }