/*
  Onboarding after sign-up (HW-3879): the step card with its progress, the rooms per floor, the people added, the areas
  of an invited person, and the "Erste Schritte" card on "Heute". The card fills the standalone column at 390px and sits
  centred in it on desktop; colours come from the theme tokens, so light and dark need nothing of their own.
*/

.hw-onboarding-progress {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hw-onboarding-progress .hw-progress {
  margin: 4px 0 0;
}

.hw-onboarding-progress .hw-progress > i {
  background: var(--bsft-color-primary);
}

.hw-onboarding-actions {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin-top: 4px;
}

.hw-onboarding-actions > .bsft-button {
  width: 100%;
}

.hw-onboarding a:not([class]) {
  color: var(--bsft-color-primary);
}

.hw-onboarding-back {
  align-self: center;
}

.hw-onboarding-floor {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  border: 0;
  min-width: 0;
}

.hw-onboarding-floor > legend {
  padding: 0;
  margin-bottom: 8px;
}

.hw-onboarding-people,
.hw-onboarding-areas,
.hw-onboarding-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
  margin: 0;
  padding: 0;
  list-style: none;
}

.hw-onboarding-people > li {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 12px;
  padding: 10px 12px;
  border-radius: 12px;
  background: var(--hw-surface-2);
}

.hw-onboarding-areas > li {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hw-onboarding-areas small {
  color: var(--bsft-color-muted);
}

.hw-onboarding-list {
  padding-left: 20px;
  list-style: disc;
}

.hw-onboarding-invite {
  display: flex;
  flex-direction: column;
  gap: 10px;
}

.hw-onboarding .hw-link-row-text {
  display: flex;
  flex-direction: column;
  gap: 2px;
}

.hw-onboarding .hw-link-row-text small {
  color: var(--bsft-color-muted);
}

/* --- "Erste Schritte" on "Heute" --- */

.hw-getting-started-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
}

.hw-getting-started-head .hw-card-title {
  margin-bottom: 0;
}

.hw-getting-started-list {
  display: flex;
  flex-direction: column;
  margin: 8px 0 0;
  padding: 0;
  list-style: none;
}

.hw-getting-started-list > li {
  display: flex;
  align-items: center;
  gap: 10px;
  min-height: 48px;
}

.hw-getting-started-list > li + li {
  border-top: 1px solid var(--bsft-color-border);
}

.hw-getting-started-mark {
  display: inline-flex;
  flex: none;
  align-items: center;
  justify-content: center;
  width: 22px;
  height: 22px;
  border: 2px solid var(--bsft-color-border);
  border-radius: 999px;
  color: var(--bsft-color-primary);
}

.hw-getting-started-list > li.is-done .hw-getting-started-mark {
  border-color: var(--bsft-color-primary);
  background: var(--hw-accent-soft);
}

.hw-getting-started-mark .hw-icon {
  width: 14px;
  height: 14px;
}

.hw-getting-started-link {
  flex: 1;
  min-width: 0;
  color: var(--bsft-color-text);
  text-decoration: none;
}

.hw-getting-started-link:hover {
  color: var(--bsft-color-primary);
}

.hw-getting-started-list > li.is-done .hw-getting-started-link {
  color: var(--bsft-color-muted);
  text-decoration: line-through;
}