/* Dashboard composition based on the shared SESAM application shell and the
   card language used by the Builder start page. */
.sesam-dashboard-page {
  width: 100%;
  max-width: 1400px;
  margin: 0 auto;
}

.sesam-dashboard-greeting {
  margin-bottom: 2.5rem;
}

.sesam-dashboard-greeting h2 {
  color: var(--sesam-heading-color);
  font-size: var(--sesam-text-title);
  font-weight: 500;
}

.sesam-dashboard-greeting p {
  color: var(--sesam-gray-600);
  font-size: var(--sesam-text-item);
}

.sesam-dashboard-upgrade-alert {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 0.75rem;
  align-items: center;
}

.sesam-dashboard-primary-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: 2rem;
  align-items: stretch;
}

.sesam-dashboard-workflows {
  overflow: hidden;
  border-color: var(--sesam-card-border);
  border-radius: 0.875rem;
  box-shadow: var(--sesam-shadow-soft);
}

.sesam-dashboard-workflow {
  /* The rows share the height of the card equally, so the card (stretched to the height of the news card next to it)
     has no empty space below the last row, and the hover highlight always fills a complete row. */
  flex: 1 0 auto;
  min-height: 5.25rem;
  display: flex;
  align-items: center;
  gap: 0.875rem;
  padding: 0.875rem 1.125rem;
  color: inherit;
  text-decoration: none;
  transition: background-color 0.15s ease-in-out;
}

.sesam-dashboard-workflow + .sesam-dashboard-workflow {
  border-top: 1px solid var(--sesam-card-border);
}

.sesam-dashboard-workflow:hover {
  color: inherit;
  background: var(--sesam-card-header-bg);
}

.sesam-dashboard-workflow:focus-visible {
  position: relative;
  z-index: 1;
  outline: 3px solid rgba(var(--sesam-focus-ring-rgb), 0.45);
  outline-offset: -3px;
}

.sesam-dashboard-icon-surface,
.sesam-dashboard-empty-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  border-radius: 0.625rem;
}

.sesam-dashboard-icon-surface {
  width: 3rem;
  height: 3rem;
  color: var(--bs-white);
  background: var(--sesam-blue);
  border: 1px solid var(--sesam-blue);
  font-size: 1.0625rem;
}

.sesam-dashboard-workflow-copy {
  min-width: 0;
  flex: 1;
}

.sesam-dashboard-workflow-copy strong,
.sesam-dashboard-workflow-copy small {
  display: block;
}

.sesam-dashboard-workflow-copy strong {
  color: var(--sesam-heading-color);
  font-size: var(--sesam-text-item);
  font-weight: 500;
}

.sesam-dashboard-workflow-copy small {
  margin-top: 0.2rem;
  color: var(--sesam-gray-600);
  font-size: var(--sesam-text-meta);
}

.sesam-dashboard-workflow-arrow {
  color: var(--sesam-gray-500);
  font-size: 0.875rem;
  transition: color 0.15s ease-in-out, transform 0.15s ease-in-out;
}

.sesam-dashboard-workflow:hover .sesam-dashboard-workflow-arrow {
  color: var(--sesam-blue);
  transform: translateX(0.2rem);
}

/* News card: light card with a blue accent strip, in the same style as the plan card below, so the dashboard has no
   large solid-color surface competing with the workflow actions. */
.sesam-dashboard-news-card {
  height: 100%;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  gap: 1rem;
  padding: 1.25rem;
  color: var(--bs-body-color);
  background: var(--sesam-card-bg);
  border: 1px solid var(--sesam-card-border);
  border-left: 4px solid var(--sesam-blue);
  border-radius: 0.875rem;
  overflow: hidden;
  box-shadow: var(--sesam-shadow-soft);
}

.sesam-dashboard-news-card h2,
.sesam-dashboard-news-card h3 {
  color: var(--sesam-heading-color);
}

.sesam-dashboard-news-card h2 i {
  margin-right: 0.25rem;
  color: var(--sesam-blue);
}

.sesam-dashboard-news-card p {
  color: var(--sesam-gray-600);
}

/* Release number as a small pill (white, so it stands out from the gray header band). */
.sesam-dashboard-news-meta span {
  padding: 0.125rem 0.625rem;
  border-radius: 999px;
  color: var(--sesam-blue);
  background: var(--sesam-card-bg);
  border: 1px solid var(--sesam-card-border);
  font-weight: 500;
}

.sesam-dashboard-news-meta {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  font-size: 0.8125rem;
  /* Header band in the same light gray as the plan card's left panel. The negative margins pull it to the edges of the
     card, which has the padding for its content (the card clips it to the rounded corners). */
  margin: -1.25rem -1.25rem 0;
  padding: 0.875rem 1.25rem;
  background: var(--sesam-card-header-bg);
  border-bottom: 1px solid var(--sesam-card-border);
}

.sesam-dashboard-news-title {
  margin-top: 0.9rem;
  margin-bottom: 0.45rem;
  font-size: var(--sesam-text-item);
  font-weight: 500;
  line-height: 1.4;
}

.sesam-dashboard-news-card p {
  font-size: var(--sesam-text-body);
  line-height: 1.625;
  /* The dashboard only shows the beginning of the release note; the complete text is in the "Read more" panel. The
     clamp keeps the card (and with it the workflow card next to it) from growing with every longer release note. */
  display: -webkit-box;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 4;
  overflow: hidden;
}

.sesam-dashboard-news-card .btn {
  align-self: flex-start;
  font-size: 0.875rem;
}

.sesam-dashboard-recent-grid {
  display: grid;
  align-items: stretch;
  gap: 2rem;
  margin-top: 3rem;
}

.sesam-dashboard-recent-grid-user {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

.sesam-dashboard-recent-grid-guest {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.sesam-dashboard-recent-section {
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: 1rem;
}

.sesam-dashboard-recent-section > h2 {
  margin: 0;
  color: var(--sesam-heading-color);
  font-size: var(--sesam-text-section);
  font-weight: 500;
}

/* Each kind of object has its own accent color (strip on the card and heading icon), so the three lists are easy to
   tell apart at a glance: projects light gray (neutral containers), scenarios green, simulations purple. The colors
   are existing tokens; change them here to re-theme the lists. */
.sesam-dashboard-recent-projects {
  --sesam-recent-accent: var(--sesam-gray-500);
}

.sesam-dashboard-recent-scenarios {
  --sesam-recent-accent: var(--sesam-accent-green);
}

.sesam-dashboard-recent-simulations {
  --sesam-recent-accent: var(--sesam-accent-purple);
}

.sesam-dashboard-recent-section > h2 > i {
  margin-right: 0.25rem;
  color: var(--sesam-recent-accent);
}

.sesam-dashboard-recent-card {
  overflow: hidden;
  border-left: 4px solid var(--sesam-recent-accent);
  border-radius: 0.875rem;
  box-shadow: var(--sesam-shadow-soft);
}

.sesam-dashboard-recent-card-empty {
  flex: 1;
}

.sesam-dashboard-recent-row {
  min-height: 4.35rem;
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem 1.25rem;
  background: var(--sesam-card-bg);
}

.sesam-dashboard-recent-copy {
  min-width: 0;
  flex: 1;
}

.sesam-dashboard-recent-copy h3 {
  color: var(--sesam-heading-color);
  font-size: var(--sesam-text-body);
  font-weight: 500;
}

.sesam-dashboard-recent-name-with-icon {
  display: flex;
  align-items: center;
  gap: 0.4rem;
}

.sesam-dashboard-recent-name-with-icon i {
  flex: 0 0 auto;
  color: var(--sesam-gray-400);
  font-size: 0.75rem;
}

.sesam-dashboard-recent-name-with-icon span {
  min-width: 0;
}

.sesam-dashboard-recent-copy p,
.sesam-dashboard-empty-state p {
  color: var(--sesam-gray-600);
}

.sesam-dashboard-recent-copy p {
  font-size: var(--sesam-text-meta);
}

.sesam-dashboard-recent-actions,
.sesam-dashboard-plan-links {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.sesam-dashboard-recent-actions .btn,
.sesam-dashboard-recent-row > .btn {
  white-space: nowrap;
}

.sesam-dashboard-recent-actions .btn i,
.sesam-dashboard-recent-row > .btn i {
  margin-right: 0.35rem;
}

.sesam-dashboard-empty-state {
  min-height: 10.5rem;
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  justify-content: center;
  gap: 1rem;
  padding: 1.5rem;
}

.sesam-dashboard-empty-icon {
  width: 2.5rem;
  height: 2.5rem;
  color: var(--sesam-blue);
  background: var(--sesam-card-header-bg);
  border: 1px solid var(--sesam-card-border);
  border-radius: 0.6rem;
}

.sesam-dashboard-empty-state h3 {
  color: var(--sesam-heading-color);
  font-weight: 500;
}

.sesam-dashboard-usage-card {
  display: grid;
  grid-template-columns: minmax(17rem, 0.65fr) minmax(0, 2.35fr);
  margin-top: 3rem;
  overflow: hidden;
  border-radius: 0.875rem;
  box-shadow: var(--sesam-shadow-soft);
}

.sesam-dashboard-usage-card-guest {
  min-height: 13rem;
}

.sesam-dashboard-plan-summary {
  display: flex;
  flex-direction: column;
  justify-content: center;
  gap: 1.25rem;
  padding: 1.25rem;
  background: var(--sesam-card-header-bg);
  border-right: 1px solid var(--sesam-card-border);
  /* Accent bar in the color of the current plan; --sesam-plan-color is set on the card by the template and falls back
     to the brand blue for plans without a color (for example the locked fallback plan). */
  border-left: 4px solid var(--sesam-plan-color, var(--sesam-blue));
}

/* Plan logo: the plan's icon in a tile of the plan color (same icon and color as on the pricing page). */
.sesam-dashboard-plan-icon {
  flex: 0 0 auto;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 2.5rem;
  height: 2.5rem;
  border-radius: 0.6rem;
  color: var(--bs-white);
  background: var(--sesam-plan-color, var(--sesam-blue));
  font-size: 1.0625rem;
}

.sesam-dashboard-plan-heading {
  display: flex;
  align-items: center;
  gap: 0.75rem;
}

.sesam-dashboard-plan-heading h2 {
  color: var(--bs-body-color);
  font-size: 0.875rem;
  font-weight: 500;
}

.sesam-dashboard-plan-heading p {
  color: var(--sesam-heading-color);
  font-size: 1.125rem;
  font-weight: 600;
  line-height: 1.25;
}

.sesam-dashboard-plan-links a:not(.btn),
.sesam-dashboard-plan-links a:not(.btn):visited {
  color: var(--sesam-blue);
  font-size: 0.875rem;
}

.sesam-dashboard-plan-links a:not(.btn):hover,
.sesam-dashboard-plan-links a:not(.btn):focus-visible {
  color: var(--sesam-blue);
  text-decoration: none;
}

.sesam-dashboard-plan-links {
  gap: 0.4rem;
}

.sesam-dashboard-plan-link-separator {
  color: var(--sesam-gray-500);
}

.sesam-dashboard-guest-note {
  display: grid;
  grid-template-columns: auto minmax(0, 1fr);
  gap: 0.625rem;
  color: var(--sesam-gray-600);
}

.sesam-dashboard-guest-note i {
  margin-top: 0.15rem;
  color: var(--sesam-blue);
}

.sesam-dashboard-guest-note p {
  font-size: 0.8125rem;
  line-height: 1.625;
}

.sesam-dashboard-quota-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  align-items: center;
  gap: 2rem;
  padding: 1.5rem;
}

.sesam-dashboard-quota {
  display: flex;
  flex-direction: column;
  gap: 0.5rem;
}

.sesam-dashboard-quota-heading,
.sesam-dashboard-quota-values {
  display: flex;
  align-items: baseline;
  justify-content: space-between;
  gap: 1rem;
}

.sesam-dashboard-quota-heading h3 {
  color: var(--sesam-heading-color);
}

.sesam-dashboard-quota-heading h3 {
  font-size: var(--sesam-text-body);
  font-weight: 600;
}

.sesam-dashboard-quota-values {
  font-size: var(--sesam-text-meta);
  line-height: 1.25rem;
}

.sesam-dashboard-quota-heading span {
  font-size: var(--sesam-text-meta);
}

.sesam-dashboard-quota-heading span,
.sesam-dashboard-quota-values span,
.sesam-dashboard-plan-summary > p {
  color: var(--sesam-gray-600);
}

.sesam-dashboard-quota-progress {
  height: 0.5rem;
  background: var(--sesam-card-bg);
  border: 1px solid var(--sesam-card-border);
}

.sesam-dashboard-unlimited {
  display: flex;
  align-items: center;
  flex-wrap: wrap;
  gap: 0.5rem;
  font-size: 0.875rem;
}

.sesam-dashboard-unlimited i {
  color: var(--sesam-blue);
}

.sesam-dashboard-unlimited strong {
  color: var(--sesam-heading-color);
  font-weight: 600;
}

.sesam-dashboard-unlimited span {
  font-size: 0.8125rem;
}

@media (max-width: 1199.98px) {
  .sesam-dashboard-recent-grid-user {
    grid-template-columns: repeat(2, minmax(0, 1fr));
  }

  .sesam-dashboard-recent-grid-user .sesam-dashboard-recent-section:last-child {
    grid-column: 1 / -1;
  }
}

@media (max-width: 991.98px) {
  .sesam-dashboard-primary-grid,
  .sesam-dashboard-recent-grid,
  .sesam-dashboard-usage-card {
    grid-template-columns: 1fr;
  }

  .sesam-dashboard-recent-grid-user .sesam-dashboard-recent-section:last-child {
    grid-column: auto;
  }

  .sesam-dashboard-plan-summary {
    border-right: 0;
    border-bottom: 1px solid var(--sesam-card-border);
  }
}

@media (max-width: 575.98px) {
  .sesam-dashboard-greeting {
    margin-bottom: 1.75rem;
  }

  .sesam-dashboard-recent-grid,
  .sesam-dashboard-usage-card {
    margin-top: 2rem;
  }

  .sesam-dashboard-workflow {
    min-height: 5rem;
    padding: 0.9rem 1rem;
  }

  .sesam-dashboard-icon-surface {
    width: 3rem;
    height: 3rem;
  }

  .sesam-dashboard-recent-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .sesam-dashboard-recent-actions {
    width: 100%;
  }

  .sesam-dashboard-quota-grid {
    grid-template-columns: 1fr;
    padding: 1.25rem;
  }

  .sesam-dashboard-quota-heading,
  .sesam-dashboard-quota-values {
    align-items: flex-start;
    flex-direction: column;
    gap: 0.25rem;
  }
}