/* Quadfence Sales dashboard: Client onboarding page (client-onboarding.js). Uses the dashboard's design tokens. */
#tab-content-onboarding { padding: 1.5rem 2.5rem 3rem; }
.co-detail { position: relative; max-width: 1400px; }
.co-top { display: flex; align-items: center; gap: 12px; margin-bottom: 1rem; }
.co-back { display: inline-flex; align-items: center; gap: 6px; min-height: 36px; padding: 6px 14px; border-radius: 8px; border: 1px solid var(--border-color); background: var(--bg-surface); color: var(--text-main); font-weight: 600; font-size: 0.82rem; cursor: pointer; }
.co-back:hover { background: var(--bg-card-hover); }
.co-crumb { font-size: 0.8rem; color: var(--text-muted); font-weight: 600; letter-spacing: .02em; }
.co-head { display: flex; justify-content: space-between; align-items: flex-start; gap: 1.5rem; flex-wrap: wrap; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg, 14px); padding: 1.25rem 1.5rem; margin-bottom: 1.25rem; }
.co-head-tools { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.co-head-main h2, .co-head-main h3, .co-head-main [id="drawer-title"] { font-family: var(--font-display); font-size: 1.6rem; font-weight: 800; color: var(--text-main); }
.co-head-actions { display: flex; flex-direction: column; align-items: flex-end; gap: 8px; }
.co-layout { display: grid; grid-template-columns: 220px minmax(0, 1fr); gap: 1.5rem; align-items: start; }
.co-nav { position: sticky; top: 0.5rem; }
.co-nav-list { list-style: none; display: flex; flex-direction: column; gap: 2px; background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-md, 10px); padding: 8px; }
.co-nav-link { display: flex; align-items: center; gap: 10px; padding: 8px 10px; border-radius: 8px; color: var(--text-muted); font-size: 0.85rem; font-weight: 600; text-decoration: none; min-height: 36px; }
.co-nav-link:hover { background: var(--bg-card-hover); color: var(--text-main); }
.co-nav-link.is-active { background: var(--primary-glow); color: var(--primary); }
.co-nav-link:focus-visible, .co-back:focus-visible, .co-pick:focus-visible { outline: 2px solid var(--primary); outline-offset: 2px; }
.co-num { display: inline-flex; align-items: center; justify-content: center; width: 22px; height: 22px; border-radius: 50%; background: var(--bg-card-hover); color: var(--text-muted); font-size: 0.72rem; font-weight: 700; flex: none; }
.co-nav-link.is-active .co-num, .co-section-head .co-num { background: var(--primary); color: #fff; }
.co-main { display: flex; flex-direction: column; gap: 1.25rem; min-width: 0; }
.co-section { background: var(--bg-card); border: 1px solid var(--border-color); border-radius: var(--radius-lg, 14px); padding: 1.25rem 1.5rem; scroll-margin-top: 1rem; }
.co-section-head { margin-bottom: 1rem; }
.co-section-head h3 { display: flex; align-items: center; gap: 10px; font-family: var(--font-display); font-size: 1.1rem; color: var(--text-main); }
.co-hint { color: var(--text-muted); font-size: 0.82rem; margin-top: 4px; }
.co-section-body { display: grid; gap: 1rem; grid-template-columns: minmax(0, 1fr); }
.co-section-body > * { margin: 0 !important; max-width: 100%; }
@media (min-width: 1200px) {
  .co-grid-profile, .co-grid-contract { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .co-grid-deal { grid-template-columns: minmax(0, 1fr) minmax(0, 1fr); }
  .co-grid-deal > :first-child, .co-grid-deal > #deal-rationale-card, .co-grid-contract > :first-child { grid-column: 1 / -1; }
  .co-grid-setup > * { max-width: 900px; }
}
.co-website { border: 1px solid var(--border-color); border-radius: var(--radius-md, 10px); padding: 1rem; background: var(--bg-surface); display: flex; flex-direction: column; gap: 8px; }
@media (max-width: 1000px) {
  #tab-content-onboarding { padding: 1rem; }
  .co-layout { grid-template-columns: minmax(0, 1fr); }
  .co-nav { position: static; }
  .co-nav-list { flex-direction: row; overflow-x: auto; }
  .co-nav-link { white-space: nowrap; }
  .co-head-actions { align-items: flex-start; }
}
.co-picker { max-width: 1100px; }
.co-pick-list { list-style: none; display: grid; gap: 8px; }
.co-pick { width: 100%; display: grid; grid-template-columns: minmax(0, 1.2fr) minmax(0, 2fr) auto; gap: 12px; align-items: center; text-align: left; padding: 12px 16px; min-height: 52px; border: 1px solid var(--border-color); border-radius: var(--radius-md, 10px); background: var(--bg-card); cursor: pointer; font: inherit; color: var(--text-main); }
.co-pick:hover { border-color: var(--primary); background: var(--bg-card-hover); }
.co-pick-name { font-weight: 700; }
.co-pick-meta { color: var(--text-muted); font-size: 0.82rem; overflow: hidden; text-overflow: ellipsis; white-space: nowrap; }
@media (max-width: 700px) { .co-pick { grid-template-columns: minmax(0, 1fr); } }