/* Onboarding — the setup timeline banner, and the CRM's empty state.
   Rendered by components/onboarding.js and components/crm-table.js.

   Every value here is a token, so this works in all six appearances with no
   per-theme override. If one ever seems necessary, the fix is a missing token,
   not a :root[data-theme] block in this file. */

/* ══ Timeline banner ══════════════════════════════════════════════════════ */

/* Mounted as the first child of #main, above #content, so it sits over every
   page. See the header of components/onboarding.js for why it is not inside a
   page container. */
#onboarding-banner[hidden] { display: none; }

.ob-banner {
  margin: 12px 16px 0;
  padding: 12px 16px 16px;
  background: var(--surface);
  border: 1px solid var(--border);
  border-radius: var(--radius-card);
}

.ob-banner-head {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-bottom: 14px;
}

.ob-banner-title { font-size: 14px; font-weight: 600; color: var(--text); }
.ob-banner-count { font-size: 13px; color: var(--text-muted); }

.ob-banner-hide {
  margin-left: auto;
  padding: 2px 6px;
  background: none;
  border: 0;
  border-radius: var(--radius-control);
  font-size: 13px;
  line-height: 1;
  color: var(--text-dim);
  cursor: pointer;
  transition: color var(--speed);
}

.ob-banner-hide:hover { color: var(--text); }

/* ── The track ──
   One rail behind the bubbles so the row reads as a single timeline rather
   than four separate chips. The rail is inset by half a bubble at each end so
   it starts and stops at the first and last bubble centres, not at the edge of
   the container. */
.ob-track { position: relative; }

.ob-track-line,
.ob-track-fill {
  position: absolute;
  top: 13px;                 /* half the 26px bubble */
  left: var(--ob-inset, 12.5%);
  height: 2px;
  border-radius: var(--radius-pill);
}

.ob-track-line {
  right: var(--ob-inset, 12.5%);
  background: var(--border);
}

/* Width is set inline; the JS already scales it to the span between the first
   and last bubble centres, so no clamping is needed here. */
.ob-track-fill {
  background: var(--green);
  transition: width var(--speed);
}

.ob-steps {
  position: relative;
  display: flex;
  margin: 0;
  padding: 0;
  list-style: none;
}

.ob-step {
  flex: 1 1 0;
  min-width: 0;
  text-align: center;
}

.ob-step-btn {
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: 8px;
  width: 100%;
  padding: 0 4px;
  background: none;
  border: 0;
  color: var(--text-muted);
  cursor: pointer;
  transition: color var(--speed);
}

/* Completed steps stay clickable — the banner doubles as a shortcut bar once
   ticked, and re-opening a finished step is never destructive. */
.ob-step-btn:hover { color: var(--text); }

.ob-step-btn:focus-visible,
.ob-banner-hide:focus-visible {
  outline: 2px solid var(--gold);
  outline-offset: 2px;
  border-radius: var(--radius-control);
}

.ob-step-bubble {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 26px;
  height: 26px;
  /* Sits on top of the rail, and needs an opaque fill so the rail does not show
     through the middle of the circle. */
  background: var(--surface);
  border: 2px solid var(--border);
  border-radius: var(--radius-pill);
  font-size: 12px;
  font-weight: 600;
  color: var(--text-muted);
  transition: background var(--speed), border-color var(--speed), color var(--speed);
}

.ob-step-btn:hover .ob-step-bubble { border-color: var(--gold); color: var(--text); }

.ob-step.is-done .ob-step-bubble {
  background: var(--green);
  border-color: var(--green);
  color: #fff;
}

.ob-step.is-done .ob-step-btn:hover .ob-step-bubble {
  /* Keep the green — a completed step that turns indigo on hover reads as
     having been un-done. */
  border-color: var(--green);
  color: #fff;
}

.ob-step-label {
  font-size: 12px;
  line-height: 1.3;
  color: inherit;
}

.ob-step.is-done .ob-step-label { color: var(--text-muted); }

/* Labels are the first thing to go — the bubbles alone still carry the
   progress, and four labels do not fit a phone. */
@media (max-width: 640px) {
  .ob-banner      { margin: 8px 10px 0; padding: 10px 12px 14px; }
  .ob-step-label  { display: none; }
  .ob-banner-head { margin-bottom: 10px; }
}

/* ══ CRM empty state ══════════════════════════════════════════════════════ */

/* Zero records used to render as `''` — 19 column headers over blank space,
   with nothing to click. */
.crm-empty-row td { padding: 0 !important; background: var(--surface); }

/* An account with NO records at all: drop the header row and let the single
   full-width cell size the table, so the message centres in the pane instead of
   sitting at the left edge of a table that scrolls sideways over nothing.
   `table-layout: auto` releases the fixed column widths that forced that
   scroll. Filtered-to-empty deliberately keeps both — those columns still
   describe real data one filter change away. */
.crm-table.is-blank            { table-layout: auto; }
.crm-table.is-blank thead      { display: none; }
.crm-table.is-blank .crm-empty { padding: 64px 24px; }

.crm-empty {
  padding: 44px 24px;
  text-align: center;
}

.crm-empty-title {
  margin: 0 0 6px;
  font-size: 14px;
  font-weight: 600;
  color: var(--text);
}

.crm-empty-hint {
  margin: 0 0 18px;
  font-size: 13px;
  color: var(--text-muted);
}

.crm-empty-actions {
  display: flex;
  gap: 10px;
  justify-content: center;
  flex-wrap: wrap;
}