/* A DSP's onboarding: the DSP page's Onboarding and Hire & referrals cards,
   Edit Steps, the dashboard's task list, and the Onboarding column on All DSPs. */

:root {
  --onboarding-admin: #2e7d4f;
  --onboarding-training-admin: #1f6b88;
  --onboarding-billing-admin: #8a5a0f;
  --onboarding-muted: color-mix(in oklab, var(--color-base-content) 55%, transparent);
  --onboarding-rule: color-mix(in oklab, var(--color-base-content) 10%, transparent);
}

/* A progress bar: the view hands over how far along as --done. */
.onboarding-bar {
  display: block;
  height: 6px;
  border-radius: 999px;
  background: linear-gradient(to right, var(--onboarding-admin) var(--done, 0%), color-mix(in oklab, var(--color-base-content) 12%, transparent) var(--done, 0%));
}

/* ── DSP page: Onboarding card ─────────────────────────────────────────── */

.onboarding__panel {
  margin-top: 16px;
  padding: 20px;
  border-radius: 12px;
  background: var(--color-base-200);

  @media (width < 640px) {
    padding: 14px;
  }
}

.onboarding__top {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 12px;

  @media (width < 640px) {
    flex-direction: column;
    align-items: stretch;
  }
}

.onboarding__count {
  font-weight: 600;
  padding-top: 6px;
}

.onboarding__buttons {
  display: flex;
  gap: 6px;

  @media (width < 640px) {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }
}

.onboarding__button {
  height: 2rem;
  min-height: 2rem;
}

.onboarding__button:not(.btn-primary) {
  background: var(--color-base-100);
  border-color: var(--onboarding-rule);
}

.onboarding__button--wide {
  @media (width < 640px) {
    grid-column: 1 / -1;
  }
}

.onboarding__hint,
.onboarding__note {
  margin-top: 10px;
  font-size: 0.8125rem;
  color: var(--onboarding-muted);
}

.onboarding-section {
  --role: var(--onboarding-admin);
  margin-top: 34px;
}

.onboarding-section--training-admin { --role: var(--onboarding-training-admin); }
.onboarding-section--billing-admin { --role: var(--onboarding-billing-admin); }

.onboarding-section__heading {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-bottom: 8px;
  border-bottom: 2px solid var(--role);
  color: var(--role);
}

.onboarding-section__icon {
  width: 22px;
  height: 22px;
  flex-shrink: 0;
}

.onboarding-section__name {
  font-size: 18px;
  font-weight: 700;
}

.onboarding-section__count {
  margin-left: auto;
  font-size: 0.8125rem;
  font-weight: 400;
  color: var(--onboarding-muted);
}

/* A step: circle, name, when it was done, then Send, View and the pencil
   in fixed columns so they line up row to row. On a phone the date and the
   links drop under the name. */
.onboarding-step {
  display: grid;
  grid-template-columns: 22px auto 1fr 64px 44px 22px;
  grid-template-areas: "check name when send view edit";
  align-items: center;
  column-gap: 10px;
  padding: 7px 0;
  border-bottom: 1px solid var(--onboarding-rule);

  @media (width < 640px) {
    grid-template-columns: 22px 1fr auto auto 22px;
    grid-template-areas:
      "check name name name edit"
      ".     when send view .";
    row-gap: 2px;
    padding: 9px 0;
  }
}

.onboarding-step__check-form { grid-area: check; display: flex; }
.onboarding-step__name { grid-area: name; color: var(--color-base-content); }
.onboarding-step__when { grid-area: when; font-size: 0.75rem; color: var(--onboarding-muted); white-space: nowrap; }
.onboarding-step__send { grid-area: send; text-align: right; }
.onboarding-step__view { grid-area: view; text-align: right; }
.onboarding-step__edit { grid-area: edit; }

.onboarding-step--done .onboarding-step__name {
  font-weight: 500;
}

.onboarding-step__check,
.onboarding-step__edit {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
}

.onboarding-step__check svg {
  width: 20px;
  height: 20px;
  color: color-mix(in oklab, var(--color-base-content) 40%, transparent);
}

.onboarding-step--done .onboarding-step__check svg {
  color: var(--onboarding-admin);
}

.onboarding-step__edit svg {
  width: 16px;
  height: 16px;
  color: var(--onboarding-muted);
}

.onboarding-step__check:hover svg,
.onboarding-step__edit:hover svg,
.onboarding-steps__edit:hover svg {
  color: var(--color-base-content);
}

.onboarding-step__link {
  padding: 0;
  border: 0;
  background: none;
  font-size: 0.875rem;
  color: var(--onboarding-admin);
  cursor: pointer;
}

.onboarding-step__link:hover {
  text-decoration: underline;
}

/* ── Dialogs opened from a step, Hire & referrals and Edit Steps ───────── */

.onboarding-dialog__box {
  max-width: 28rem;
  text-align: left;
}

.onboarding-dialog__box--wide {
  max-width: 36rem;
}

.onboarding-dialog__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
  margin-bottom: 16px;
}

.onboarding-dialog__title {
  font-size: 1.25rem;
  font-weight: 700;
}

.onboarding-dialog__subtitle,
.onboarding-dialog__facts {
  font-size: 0.8125rem;
  color: var(--onboarding-muted);
}

.onboarding-dialog__facts {
  margin-bottom: 12px;
}

.onboarding-dialog__close {
  display: inline-flex;
  padding: 2px;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--onboarding-muted);

  svg { width: 18px; height: 18px; }
}

.onboarding-dialog__fields {
  display: grid;
  gap: 12px;
}

.onboarding-dialog__field {
  display: grid;
  gap: 4px;
}

.onboarding-dialog__label {
  font-size: 0.8125rem;
  font-weight: 600;
}

.onboarding-dialog__message {
  min-height: 8rem;
  max-height: 16rem;
  overflow-y: auto;
  padding: 10px 12px;
  border: 1px solid var(--onboarding-rule);
  border-radius: var(--radius-field, 0.5rem);
  background: var(--color-base-100);
}

.onboarding-dialog__message:focus {
  outline: 2px solid var(--color-primary);
  outline-offset: 1px;
}

.onboarding-dialog__note {
  margin-top: 6px;
  font-size: 0.75rem;
  color: var(--onboarding-muted);
}

.onboarding-dialog__template-link {
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 0.8125rem;
  color: var(--onboarding-admin);

  svg { width: 12px; height: 12px; }
}

.onboarding-dialog__sent-another-way {
  margin-top: 16px;
  padding-top: 16px;
  border-top: 1px solid var(--onboarding-rule);
}

.onboarding-dialog__when {
  display: grid;
  grid-template-columns: 1fr 8rem auto;
  align-items: end;
  gap: 8px;
  margin-top: 8px;

  @media (width < 640px) {
    grid-template-columns: 1fr 1fr;
  }
}

.onboarding-dialog__when--two {
  grid-template-columns: 1fr 1fr;
}

.onboarding-dialog__mark-sent {
  @media (width < 640px) {
    grid-column: 1 / -1;
  }
}

.onboarding-dialog__actions {
  flex-wrap: wrap;
}

/* ── DSP page: Hire & referrals card ───────────────────────────────────── */

.hire-referrals__title-row {
  display: flex;
  width: 100%;
  flex-wrap: wrap;
  align-items: baseline;
  justify-content: space-between;
  gap: 4px 16px;
}

.hire-referrals__rule {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--onboarding-muted);
}

.hire-referrals__columns {
  display: grid;
  grid-template-columns: 220px 1fr;
  gap: 32px;
  margin-top: 16px;

  @media (width < 768px) {
    grid-template-columns: 1fr;
    gap: 16px;
  }
}

.hire-referrals__facts {
  align-self: start;
  display: grid;
  gap: 8px;
  padding: 12px;
  border-radius: 10px;
  background: var(--color-base-200);
}

.hire-referrals__fact {
  display: flex;
  align-items: center;
  gap: 8px;
  white-space: nowrap;

  dt { font-size: 0.8125rem; color: var(--onboarding-muted); }
  dd { font-weight: 600; }
}

.hire-referrals__referrer {
  color: var(--onboarding-admin);
}

.hire-referrals__edit {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;
  color: var(--onboarding-muted);

  svg { width: 14px; height: 14px; }
}

.hire-referrals__list {
  padding-left: 32px;
  border-left: 1px solid var(--onboarding-rule);

  @media (width < 768px) {
    padding-left: 0;
    border-left: 0;
  }
}

.hire-referrals__heading {
  margin-bottom: 8px;
  font-size: 0.8125rem;
  font-weight: 600;
}

.hire-referrals__empty {
  font-size: 0.875rem;
  color: var(--onboarding-muted);
}

/* A referral: who, how far along, the bonus. On a phone the bar runs the
   whole width under the name. */
.referral {
  display: grid;
  grid-template-columns: minmax(10rem, auto) 9rem 1fr 18px 6.5rem;
  grid-template-areas: "who numbers bar dollar status";
  align-items: center;
  column-gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--onboarding-rule);

  @media (width < 768px) {
    grid-template-columns: 1fr auto;
    grid-template-areas:
      "who status"
      "bar dollar"
      "numbers numbers";
    row-gap: 6px;
  }
}

.referral__who { grid-area: who; display: flex; align-items: baseline; gap: 8px; }
.referral__name { font-weight: 600; }
.referral__hired,
.referral__numbers { font-size: 0.75rem; color: var(--onboarding-muted); white-space: nowrap; }
.referral__numbers { grid-area: numbers; }
.referral__bar { grid-area: bar; --onboarding-admin: var(--onboarding-training-admin); }
.referral--earned .referral__bar { --onboarding-admin: #2e7d4f; }
.referral__dollar { grid-area: dollar; width: 18px; height: 18px; color: color-mix(in oklab, var(--color-base-content) 35%, transparent); }
.referral--earned .referral__dollar { color: var(--onboarding-admin); }
.referral__status { grid-area: status; text-align: right; font-size: 0.875rem; white-space: nowrap; }
.referral__paid,
.referral__to-go { color: var(--onboarding-muted); }

.referral__mark-paid {
  padding: 0;
  border: 0;
  background: none;
  font-weight: 600;
  color: var(--onboarding-admin);
  text-decoration: underline;
  cursor: pointer;
}

.referral-picker__search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 6px 10px;
  border: 1px solid var(--onboarding-rule);
  border-radius: var(--radius-field, 0.5rem);

  svg { width: 16px; height: 16px; color: var(--onboarding-muted); }
  input { flex: 1; border: 0; outline: none; background: none; }
}

.referral-picker {
  display: grid;
  gap: 2px;
  max-height: 18rem;
  overflow-y: auto;
  margin-top: 10px;
}

.referral-picker__option {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 8px 10px;
  border-radius: 8px;
  cursor: pointer;
}

.referral-picker__option:has(input:checked) {
  background: color-mix(in oklab, var(--onboarding-admin) 10%, transparent);
  font-weight: 600;
}

.referral-picker__status {
  font-size: 0.75rem;
  font-weight: 400;
  color: var(--onboarding-muted);
}

/* ── Edit Steps ────────────────────────────────────────────────────────── */

.onboarding-steps__back {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin-bottom: 16px;
  color: var(--onboarding-muted);

  svg { width: 16px; height: 16px; }
}

.onboarding-steps__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: 12px;
}

.onboarding-steps__step {
  display: grid;
  grid-template-columns: 20px 1fr 5.5rem 8.5rem 20px;
  align-items: center;
  column-gap: 12px;
  padding: 10px 0;
  border-bottom: 1px solid var(--onboarding-rule);
  background: var(--color-base-100);

  @media (width < 640px) {
    grid-template-columns: 20px 1fr 22px 22px 20px;
  }
}

.onboarding-steps__edit {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  cursor: pointer;

  svg { width: 16px; height: 16px; color: var(--onboarding-muted); }
}

.onboarding-steps__step--dragging {
  opacity: 0.6;
  box-shadow: 0 6px 16px color-mix(in oklab, black 15%, transparent);
}

.onboarding-steps__handle {
  display: inline-flex;
  padding: 0;
  border: 0;
  background: none;
  color: var(--onboarding-muted);
  cursor: grab;
  touch-action: none;

  svg { width: 18px; height: 18px; }
}

.onboarding-steps__marker {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  font-size: 0.875rem;
  color: var(--onboarding-muted);
  white-space: nowrap;

  svg { width: 16px; height: 16px; }

  @media (width < 640px) {
    .onboarding-steps__marker-label { display: none; }
  }
}

.onboarding-steps__retired {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin-top: 20px;
  font-size: 0.875rem;
  color: var(--onboarding-muted);

  summary {
    display: inline-flex;
    align-items: center;
    gap: 8px;
    color: var(--onboarding-muted);
    cursor: pointer;
    list-style: none;
  }
}

.onboarding-steps__retired summary svg {
  width: 16px;
  height: 16px;
}

.onboarding-steps__show {
  color: var(--onboarding-admin);
}

.onboarding-steps__retired-list {
  flex-basis: 100%;

  li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0;
    border-bottom: 1px solid var(--onboarding-rule);
  }
}

.onboarding-steps__toggle {
  display: flex;
  align-items: center;
  gap: 10px;
}

/* ── All DSPs: Onboarding column ──────────────────────────────────────── */

.onboarding-progress {
  display: inline-flex;
  align-items: center;
  gap: 10px;
  font-size: 0.875rem;

  .onboarding-bar {
    width: 6rem;
    --onboarding-admin: var(--onboarding-training-admin);
  }
}

.onboarding-progress--done {
  color: var(--onboarding-muted);
}

.dsp-filters {
  display: flex;
  flex-wrap: wrap;
  gap: 16px;
  margin-bottom: 16px;
  font-size: 0.9375rem;

  a { color: var(--onboarding-admin); }
  a[aria-current="page"] { color: var(--color-base-content); font-weight: 600; }
}

/* ── Dashboard: My onboarding tasks ───────────────────────────────────── */

.onboarding-tasks__title-row {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 4px 12px;

  svg { width: 20px; height: 20px; color: var(--onboarding-admin); }
}

.onboarding-tasks__summary {
  margin-left: auto;
  font-size: 0.8125rem;
  color: var(--onboarding-muted);
}

.onboarding-task {
  display: grid;
  grid-template-columns: auto 15rem 1fr auto;
  grid-template-areas: "avatar who open link";
  align-items: center;
  column-gap: 12px;
  padding: 12px 0;
  border-bottom: 1px solid var(--onboarding-rule);

  @media (width < 768px) {
    grid-template-columns: auto 1fr auto;
    grid-template-areas:
      "avatar who link"
      "open open link";
    row-gap: 6px;
  }
}

.onboarding-task__avatar { grid-area: avatar; }
.onboarding-task__who { grid-area: who; display: flex; align-items: baseline; gap: 8px; }
.onboarding-task__name { font-weight: 600; }
.onboarding-task__done { font-size: 0.75rem; color: var(--onboarding-muted); white-space: nowrap; }
.onboarding-task__open { grid-area: open; font-size: 0.875rem; color: color-mix(in oklab, var(--color-base-content) 75%, transparent); }
.onboarding-task__link { grid-area: link; color: var(--onboarding-admin); font-weight: 500; }

.onboarding-tasks__footer {
  margin-top: 10px;
  font-size: 0.75rem;
  color: var(--onboarding-muted);
}

/* ── Agency Settings: Referral bonus ──────────────────────────────────── */

.referral-bonus-rule {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 12px 24px;
  margin: 12px 0;

  @media (width < 640px) {
    grid-template-columns: 1fr;
  }
}

.referral-bonus-rule__input {
  display: inline-flex;
  align-items: center;
  gap: 8px;
  font-size: 0.875rem;
  color: var(--onboarding-muted);
}

.referral-bonus-rule__save {
  grid-column: 1 / -1;

  @media (width < 640px) {
    .btn { width: 100%; }
  }
}