[v-cloak] {
  display: none;
}

/* Utility classes that are safe globally */
.text-ellipsis {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.scroll-y {
  overflow-y: auto;
}
.scroll-x {
  overflow-x: auto;
}

/* Overview Info KPI grid layout - shared across templates */
.grid-cols-kpi {
  grid-template-columns: minmax(300px, 1fr) repeat(4, minmax(max-content, 164px));
  grid-auto-rows: minmax(48px, auto);
}

dropdown-menu-button {
  display: inline-flex;
  align-items: center;
  border-radius: 100rem;
  border: 1px solid #3b82f6;
  color: #3b82f6;
  padding-left: 1rem;
  padding-right: 0.625rem;
  padding-block: 0.5rem;
  position: relative;
}

dropdown-menu-button::before {
  content: "";
  align-self: stretch;
  border-left: 1px solid #3b82f6;
  margin: auto;
  position: absolute;
  display: block;
  top: 0;
  bottom: 0;
  width: 1px;
  right: 2rem;
}

dropdown-menu-button::after {
  content: url("data:image/svg+xml,%3Csvg%20xmlns=%27http://www.w3.org/2000/svg%27%20viewBox=%270%200%2020%2020%27%20fill=%27%233b82f6%27%3E%3Cpath%20fill-rule=%27evenodd%27%20clip-rule=%27evenodd%27%20d=%27M5.23%207.21a.75.75%200%200%201%201.06.02L10%2011.168l3.71-3.938a.75.75%200%201%201%201.08%201.04l-4.24%204.5a.75.75%200%200%201-1.08%200l-4.24-4.5a.75.75%200%200%201%200.02-1.06Z%27/%3E%3C/svg%3E");
  display: inline-block;
  width: 1rem;
  height: 1rem;
  margin-left: 18px;
}

#onboardingSurveyApp {
  & .header-container br {
    display: none;
  }

  & .header-container:has(.goal-logo:last-child) {
    margin-bottom: 1rem;
  }

  & .header-container::before {
    content: '';
    order: 3;
    flex-basis: 100%;
  }

  & .business-line-explained {
    width: clamp(300px, 90vw, 1200px);
  }

  & .goal-logo {
    width: clamp(115px, 20vw, 210px);
    order: 99;
  }
}