:root {
  --treffivo-canvas: #f7f8fb;
  --treffivo-card-border: #e6e8ef;
  --treffivo-primary-soft: #eef2ff;
  --treffivo-text-muted: #667085;
}

body {
  background: var(--treffivo-canvas);
}

.public-class-page {
  max-width: 72rem;
  margin-inline: auto;
  padding-block: 1rem 3rem;
}

.public-class-hero {
  border: 0;
  background: linear-gradient(135deg, #fff 55%, #f1f5ff);
}

.public-class-banner {
  display: block;
  width: 100%;
  height: auto;
  object-fit: cover;
}

.public-class-hero-body {
  padding: clamp(1.5rem, 4vw, 3rem);
}

.public-session-list {
  display: grid;
  gap: 0.75rem;
}

.public-session-row {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  padding: 1rem;
  border: 1px solid var(--treffivo-card-border);
  border-radius: 0.5rem;
  background: #fff;
}

.public-class-details {
  display: grid;
  gap: 1rem;
}

.public-class-details > div {
  display: flex;
  justify-content: space-between;
  gap: 1rem;
  align-items: baseline;
}

.public-class-details dt {
  color: var(--treffivo-text-muted);
}

.public-class-details dt i {
  margin-right: 0.35rem;
}

.public-class-details dd {
  margin: 0;
  text-align: right;
  font-weight: 600;
}

.public-trainer-list {
  padding-top: 1rem;
  border-top: 1px solid var(--treffivo-card-border);
}

.public-trainer {
  padding: 0.5rem 0;
}

.public-trainer + .public-trainer {
  border-top: 1px solid var(--treffivo-card-border);
}

.public-trainer-name {
  display: flex;
  width: 100%;
  gap: 0.75rem;
  align-items: center;
  padding: 0.5rem 0;
  border: 0;
  color: inherit;
  text-align: left;
  background: transparent;
}

.public-trainer-name:hover,
.public-trainer-name:focus-visible {
  color: var(--tblr-primary);
}

.public-trainer-name .ti-chevron-right {
  margin-left: auto;
}

.public-trainer-preview {
  display: -webkit-box;
  margin: 0.25rem 0 0 2rem;
  overflow: hidden;
  -webkit-box-orient: vertical;
  -webkit-line-clamp: 3;
}

.public-session-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  margin-top: 1.25rem;
  padding-top: 1rem;
  border-top: 1px solid var(--treffivo-card-border);
}

.public-organization a {
  color: inherit;
}

.navbar,
.card {
  border-color: var(--treffivo-card-border);
}

.card {
  box-shadow: 0 0.125rem 0.5rem rgb(31 41 55 / 4%);
}

.table-responsive {
  max-width: 100%;
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
}

.dashboard-shell {
  max-width: 76rem;
  margin-inline: auto;
}

.dashboard-shell .page-header {
  padding-block: 0.5rem;
}

.dashboard-next-step {
  background: linear-gradient(135deg, var(--treffivo-primary-soft), #fff 72%);
  border-color: #dce3ff;
}

.dashboard-invitation-card {
  border-color: #c8eee5;
  background: #fbfffe;
}

.dashboard-session-card {
  background: linear-gradient(135deg, #fff 55%, #faf5ff);
  border-color: #e5d5f5;
}

.dashboard-next-session {
  padding-left: 1rem;
  border-left: 0.1875rem solid #ae3ec9;
}

.ui-page-header {
  margin-bottom: 1rem;
  padding-block: 0.5rem;
}

.ui-alert {
  display: flex;
  align-items: flex-start;
  gap: 0.5rem;
  margin-bottom: 1rem;
}

.ui-alert > .ti {
  flex: 0 0 auto;
  margin-top: 0.125rem;
  font-size: 1.125rem;
}

.ui-empty-state {
  background: linear-gradient(135deg, var(--treffivo-primary-soft), #fff 72%);
  border-color: #dce3ff;
}

.ui-empty-state p {
  max-width: 36rem;
}

.ui-summary-card {
  transition: border-color 160ms ease, box-shadow 160ms ease;
}

.ui-summary-card:focus-within,
.ui-summary-card:hover {
  border-color: #cbd5e1;
  box-shadow: 0 0.25rem 1rem rgb(31 41 55 / 8%);
}

.ui-form-section + .ui-form-section {
  padding-top: 1.5rem;
  margin-top: 1.5rem;
  border-top: 1px solid var(--treffivo-card-border);
}

.ui-filter-panel:not([open]) .ui-filter-summary {
  border-bottom: 0;
}

.ui-filter-summary {
  display: flex;
  gap: 0.75rem;
  align-items: center;
  cursor: pointer;
  user-select: none;
}

.ui-filter-summary::-webkit-details-marker {
  display: none;
}

.ui-filter-summary::marker {
  content: "";
}

.ui-filter-summary:focus-visible {
  outline: 0.125rem solid var(--tblr-primary);
  outline-offset: -0.125rem;
}

.ui-filter-chevron {
  margin-left: auto;
  transition: transform 160ms ease;
}

.ui-filter-panel[open] .ui-filter-chevron {
  transform: rotate(180deg);
}

.ui-filter-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(12rem, 1fr));
  gap: 1rem;
  align-items: end;
}

.ui-filter-actions {
  display: flex;
  grid-column: 1 / -1;
  flex-wrap: wrap;
  gap: 0.5rem;
}

.ui-table-actions {
  display: inline-flex;
  align-items: center;
  gap: 0.25rem;
}

.ui-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 1rem;
  padding: 0.75rem 1rem;
}

.dashboard-organization-panel {
  background: rgb(255 255 255 / 72%);
  box-shadow: none;
}

.dashboard-members-panel {
  position: relative;
}

.dashboard-members-panel::before {
  position: absolute;
  top: 1.5rem;
  bottom: 1.5rem;
  left: 0;
  width: 1px;
  content: "";
  background: var(--treffivo-card-border);
}

.dashboard-panel-action {
  white-space: nowrap;
}

.dashboard-empty-state {
  background: linear-gradient(135deg, var(--treffivo-primary-soft), #fff 65%);
  border-color: #dce3ff;
}

.dashboard-shell .text-secondary {
  color: var(--treffivo-text-muted) !important;
}

@media (max-width: 575.98px) {
  .public-class-page {
    padding-top: 0;
  }

  .public-session-row {
    align-items: flex-start;
    flex-direction: column;
  }

  .public-session-row .text-end {
    text-align: left !important;
  }

  .public-session-pagination {
    align-items: flex-start;
    flex-direction: column;
  }

  .public-session-pagination .btn {
    width: 100%;
  }

  .dashboard-shell .page-title {
    line-height: 1.2;
  }

  .dashboard-next-step .btn,
  .dashboard-empty-state .btn,
  .ui-empty-state .btn {
    width: 100%;
  }

  .ui-filter-actions {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .ui-filter-actions .btn {
    width: 100%;
  }

  .ui-pagination {
    align-items: stretch;
    flex-direction: column;
  }

  .ui-pagination .btn-list {
    display: grid;
    grid-template-columns: 1fr 1fr;
  }

  .dashboard-shell .card-header,
  .dashboard-shell .card-footer {
    padding-inline: 1rem;
  }
}

@media (max-width: 991.98px) {
  .dashboard-members-panel::before {
    top: 0;
    right: 1.5rem;
    bottom: auto;
    left: 1.5rem;
    width: auto;
    height: 1px;
  }
}