/* ============================================================
   DASHBOARD PAGE — content styles only
   Shell layout: gtm_shell.css
   ============================================================ */

.dash-alert {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  border: 1px solid color-mix(in srgb, var(--color-tertiary-container) 20%, transparent);
  background-color: var(--color-tertiary-fixed);
  color: var(--color-on-tertiary-fixed-variant);
}

.dash-alert__btn {
  margin-left: auto;
  border: none;
  background: transparent;
  color: inherit;
  font-weight: var(--font-weight-label-md);
  text-decoration: underline;
  cursor: pointer;
}

.dash-profile-completion {
  padding: var(--space-md);
  border-radius: var(--radius-lg);
  border: 1px solid var(--color-outline-variant);
  background: var(--color-surface-container-low);
}

.dash-profile-completion__header {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-sm);
  margin-bottom: var(--space-sm);
}

.dash-profile-completion__percent {
  margin: var(--space-base) 0 0;
  font-weight: 600;
  color: var(--color-on-surface);
}

.dash-profile-completion__track {
  height: 0.5rem;
  border-radius: var(--radius-full);
  background: var(--color-surface-container-highest);
  overflow: hidden;
}

.dash-profile-completion__fill {
  height: 100%;
  border-radius: var(--radius-full);
  background: linear-gradient(
    90deg,
    var(--color-primary),
    color-mix(in srgb, var(--color-primary) 70%, var(--color-secondary))
  );
  transition: width 0.35s ease;
}

.dash-profile-completion--complete .dash-profile-completion__fill {
  background: var(--color-tertiary);
}

.dash-profile-completion__hint {
  margin: var(--space-sm) 0 0;
}

.dash-profile-completion__link {
  color: var(--color-primary);
  font-weight: 600;
  text-decoration: none;
  white-space: nowrap;
  min-height: 2.75rem;
  display: inline-flex;
  align-items: center;
}

.dash-profile-completion__link:hover {
  text-decoration: underline;
}

.dash-page-header {
  display: flex;
  flex-direction: column;
  gap: var(--space-sm);
}

@media (min-width: 1024px) {
  .dash-page-header {
    flex-direction: row;
    align-items: flex-end;
    justify-content: space-between;
  }
}

.dash-page-header__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-xs);
}

.dash-btn-ghost {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: none;
  border-radius: var(--radius-default);
  background-color: var(--color-surface-container-high);
  color: var(--color-on-surface-variant);
  font-family: var(--font-family-base);
  font-size: var(--font-size-label-md);
  font-weight: var(--font-weight-label-md);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.dash-btn-ghost:hover {
  background-color: var(--color-outline-variant);
}

.dash-btn-primary {
  display: inline-flex;
  align-items: center;
  gap: var(--space-xs);
  padding: var(--space-xs) var(--space-sm);
  border: none;
  border-radius: var(--radius-default);
  background-color: var(--color-primary);
  color: var(--color-on-primary);
  font-family: var(--font-family-base);
  font-size: var(--font-size-label-md);
  font-weight: var(--font-weight-label-md);
  cursor: pointer;
  box-shadow: var(--shadow-card);
  transition: opacity 0.15s ease;
}

.dash-btn-primary:hover { opacity: 0.9; }

/* Cards & grid */
.dash-card {
  background-color: var(--color-card);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-md);
}

.dash-card__title {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  margin-bottom: var(--space-md);
}

.dash-card__title--inline {
  margin-bottom: 0;
}

.dash-grid-kpi {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

.dash-top-row {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 1024px) {
  .dash-top-row {
    grid-template-columns: 2fr 1fr;
  }
}

.dash-booking-split {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .dash-booking-split {
    grid-template-columns: 1fr auto;
    align-items: center;
  }
}

.dash-booking-split__revenue {
  text-align: left;
  padding-left: 0;
  border-left: none;
  border-top: 1px solid var(--color-outline-variant);
  padding-top: var(--space-md);
  margin-top: 0;
}

@media (min-width: 768px) {
  .dash-booking-split__revenue {
    text-align: right;
    padding-left: var(--space-md);
    border-left: 1px solid var(--color-outline-variant);
    border-top: none;
    padding-top: 0;
    min-width: 9rem;
  }
}

.dash-booking-split__revenue .dash-revenue {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

.dash-section-card {
  background-color: var(--color-card);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-md);
}

.dash-trip-name__title {
  font-weight: var(--font-weight-label-md);
  color: var(--color-on-surface);
}

.dash-trip-name__meta {
  color: var(--color-on-surface-variant);
  font-size: var(--font-size-label-sm);
  margin-top: var(--space-base);
}

.dash-group-badge {
  display: inline-flex;
  align-items: center;
  padding: var(--space-base) var(--space-xs);
  border-radius: var(--radius-full);
  font-size: var(--font-size-label-sm);
  font-weight: var(--font-weight-label-md);
  line-height: 1;
}

.dash-group-badge--confirmed {
  background-color: var(--color-secondary-container);
  color: var(--color-on-secondary-container);
}

.dash-group-badge--waitlist {
  background-color: var(--color-tertiary-fixed);
  color: var(--color-on-tertiary-fixed-variant);
}

.dash-table__action-btn {
  border: none;
  background: transparent;
  color: var(--color-on-surface-variant);
  cursor: pointer;
  padding: var(--space-base);
  border-radius: var(--radius-default);
}

.dash-table__action-btn:hover {
  background-color: var(--color-surface-container);
  color: var(--color-on-surface);
}

.dash-sales-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .dash-sales-grid {
    grid-template-columns: repeat(3, 1fr);
  }
}

.dash-sales-metric {
  background-color: var(--color-card);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-md);
  box-shadow: var(--shadow-card);
  padding: var(--space-md);
}

.dash-sales-metric__label {
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
  font-size: var(--font-size-label-sm);
  margin-bottom: var(--space-xs);
}

.dash-sales-metric__value {
  margin-bottom: var(--space-xs);
}

.dash-sales-metric__delta {
  color: var(--color-on-secondary-container);
  font-size: var(--font-size-label-sm);
  font-weight: var(--font-weight-label-md);
}

.dash-sales-metric__sub {
  color: var(--color-on-surface-variant);
  font-size: var(--font-size-label-sm);
}

@media (min-width: 768px) {
  .dash-grid-kpi { grid-template-columns: repeat(2, 1fr); }
}

@media (min-width: 1024px) {
  .dash-grid-kpi { grid-template-columns: repeat(4, 1fr); }
}

.dash-grid-kpi__stats { grid-column: span 1; }
@media (min-width: 768px) { .dash-grid-kpi__stats { grid-column: span 2; } }

.dash-stat-badge {
  color: var(--color-secondary);
  background-color: var(--color-secondary-container);
  padding: var(--space-base) var(--space-xs);
  border-radius: var(--radius-full);
  font-size: var(--font-size-label-md);
}

.dash-stat-row {
  display: grid;
  grid-template-columns: repeat(3, 1fr);
  gap: var(--space-sm);
}

.dash-stat-item__label {
  color: var(--color-on-surface-variant);
  text-transform: uppercase;
  margin-bottom: var(--space-base);
}

.dash-stat-item__value {
  margin-bottom: var(--space-xs);
}

.dash-progress {
  width: 100%;
  height: 6px;
  border-radius: var(--radius-full);
  background-color: var(--color-surface-container-high);
  overflow: hidden;
}

.dash-progress__fill {
  height: 100%;
  border-radius: inherit;
}

.dash-progress__fill--primary { background-color: var(--color-primary); width: 75%; }
.dash-progress__fill--secondary { background-color: var(--color-secondary); width: 24%; }
.dash-progress__fill--tertiary { background-color: var(--color-tertiary); width: 90%; }
.dash-progress__fill--fb { background-color: var(--color-primary-container); width: 82%; }
.dash-progress__fill--ig { background-color: var(--color-error); width: 94%; }
.dash-progress__fill--x { background-color: var(--color-on-surface); width: 45%; }

.dash-status-row {
  display: flex;
  justify-content: space-between;
  align-items: center;
}

.dash-status-dot {
  width: 8px;
  height: 8px;
  border-radius: var(--radius-full);
  display: inline-block;
  margin-right: var(--space-xs);
}

.dash-status-dot--success { background-color: var(--color-secondary); }
.dash-status-dot--primary { background-color: var(--color-primary-container); }
.dash-status-dot--error { background-color: var(--color-error); }

.dash-revenue {
  margin-top: var(--space-md);
  padding-top: var(--space-md);
  border-top: 1px solid var(--color-outline-variant);
}

.dash-table-wrap { overflow-x: auto; }

.dash-table {
  width: 100%;
  border-collapse: collapse;
  text-align: left;
}

.dash-table thead {
  background-color: var(--color-surface-container-low);
  color: var(--color-on-surface-variant);
  font-size: var(--font-size-label-sm);
  text-transform: uppercase;
}

.dash-table th,
.dash-table td {
  padding: var(--space-xs) var(--space-md);
}

.dash-table tbody tr {
  border-top: 1px solid var(--color-outline-variant);
  transition: background-color 0.15s ease;
}

.dash-table tbody tr:hover {
  background-color: var(--color-surface-container);
}

.dash-platform-icon {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-default);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-primary);
}

.dash-platform-icon--fb { background-color: var(--color-primary-container); }
.dash-platform-icon--ig { background-color: var(--color-error); }

.dash-campaign-list { display: flex; flex-direction: column; gap: var(--space-md); }

.dash-campaign-item {
  display: flex;
  align-items: center;
  gap: var(--space-sm);
}

.dash-campaign-item__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-default);
  display: flex;
  align-items: center;
  justify-content: center;
  color: var(--color-on-primary);
  flex-shrink: 0;
}

.dash-campaign-item__icon--fb { background-color: var(--color-primary-container); }
.dash-campaign-item__icon--ig { background-color: var(--color-error); }
.dash-campaign-item__icon--x { background-color: var(--color-on-surface); }

.dash-campaign-item__meta {
  flex: 1;
  min-width: 0;
}

.dash-campaign-item__head {
  display: flex;
  justify-content: space-between;
  gap: var(--space-xs);
}

.dash-section-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: var(--space-sm);
}

.dash-scroll-row {
  display: flex;
  gap: var(--space-md);
  overflow-x: auto;
  padding-bottom: var(--space-sm);
  margin: 0 calc(var(--space-sm) * -1);
  padding-left: var(--space-sm);
  padding-right: var(--space-sm);
  scrollbar-width: none;
}

.dash-scroll-row::-webkit-scrollbar { display: none; }

.dash-vendor-card {
  flex: 0 0 18rem;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-outline-variant);
  background-color: var(--color-card);
  box-shadow: var(--shadow-card);
  cursor: pointer;
  transition: border-color 0.15s ease;
}

.dash-vendor-card:hover {
  border-color: color-mix(in srgb, var(--color-primary) 50%, transparent);
}

.dash-vendor-card__img {
  width: 100%;
  height: 8rem;
  object-fit: cover;
  border-radius: var(--radius-default);
  margin-bottom: var(--space-sm);
}

.dash-vendor-card__specialty {
  color: var(--color-on-surface-variant);
}

.dash-vendor-card__footer {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding-top: var(--space-xs);
}

.dash-avatar-stack {
  display: flex;
}

.dash-avatar-stack__item {
  width: 2rem;
  height: 2rem;
  border-radius: var(--radius-full);
  border: 2px solid var(--color-card);
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 10px;
  font-weight: var(--font-weight-label-md);
  margin-left: calc(var(--space-xs) * -1);
}

.dash-avatar-stack__item:first-child { margin-left: 0; }

.dash-tour-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
}

@media (min-width: 768px) {
  .dash-tour-grid { grid-template-columns: repeat(2, 1fr); }
}

.dash-tour-card {
  display: flex;
  flex-direction: column;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-outline-variant);
  background-color: var(--color-card);
  box-shadow: var(--shadow-card);
  overflow: hidden;
  min-height: 16rem;
}

@media (min-width: 768px) {
  .dash-tour-card { flex-direction: row; }
}

.dash-tour-card__media {
  position: relative;
  height: 12rem;
  flex-shrink: 0;
}

@media (min-width: 768px) {
  .dash-tour-card__media { width: 33.333%; height: auto; }
}

.dash-tour-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dash-tour-card__badge {
  position: absolute;
  top: var(--space-xs);
  left: var(--space-xs);
  padding: var(--space-base) var(--space-xs);
  border-radius: var(--radius-sm);
  font-size: 10px;
  font-weight: var(--font-weight-label-md);
  color: var(--color-on-primary);
}

.dash-tour-card__badge--hot { background-color: var(--color-primary); }
.dash-tour-card__badge--trend { background-color: var(--color-secondary); }

.dash-tour-card__body {
  padding: var(--space-md);
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  flex: 1;
  gap: var(--space-sm);
}

.dash-tour-card__head {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: var(--space-sm);
}

.dash-tour-card__price {
  color: var(--color-primary);
  white-space: nowrap;
}

.dash-tour-card__meta {
  display: flex;
  flex-wrap: wrap;
  gap: var(--space-sm);
  color: var(--color-on-surface-variant);
  font-size: var(--font-size-label-sm);
}

.dash-tour-card__meta span {
  display: inline-flex;
  align-items: center;
  gap: var(--space-base);
}

.dash-tour-card__actions {
  display: flex;
  gap: var(--space-xs);
}

.dash-tour-card__actions .dash-btn-primary { flex: 1; justify-content: center; }

.dash-icon-btn {
  padding: var(--space-xs);
  border: 1px solid var(--color-outline-variant);
  border-radius: var(--radius-default);
  background: transparent;
  color: var(--color-on-surface-variant);
  cursor: pointer;
  transition: background-color 0.15s ease;
}

.dash-icon-btn:hover { background-color: var(--color-surface-container-high); }

.dash-insights-grid {
  display: grid;
  grid-template-columns: 1fr;
  gap: var(--space-md);
  padding-top: var(--space-lg);
  border-top: 1px solid var(--color-outline-variant);
}

@media (min-width: 1024px) {
  .dash-insights-grid { grid-template-columns: 2fr 1fr; }
}

.dash-insights-scroll {
  display: flex;
  gap: var(--space-sm);
  overflow-x: auto;
  scrollbar-width: none;
}

.dash-insights-scroll::-webkit-scrollbar { display: none; }

.dash-tip-card {
  flex: 0 0 20rem;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
}

.dash-tip-card--primary {
  background-color: var(--color-primary-container);
  color: var(--color-on-primary-container);
}

.dash-tip-card--neutral {
  background-color: var(--color-surface-container-high);
  border: 1px solid var(--color-outline-variant);
}

.dash-message-card {
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  background-color: var(--color-tertiary);
  color: var(--color-on-primary);
  position: relative;
  overflow: hidden;
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  min-height: 8rem;
}

.dash-message-card__icon {
  position: absolute;
  right: calc(var(--space-sm) * -1);
  bottom: calc(var(--space-sm) * -1);
  font-size: 5rem;
  opacity: 0.1;
}



.dash-mobile-alert {
  position: relative;
  overflow: hidden;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-primary-container);
  background-color: color-mix(in srgb, var(--color-primary-container) 20%, transparent);
  display: flex;
  gap: var(--space-xs);
}

.dash-mobile-alert__glow {
  position: absolute;
  top: 0;
  right: 0;
  width: 6rem;
  height: 6rem;
  background-color: color-mix(in srgb, var(--color-primary) 10%, transparent);
  border-radius: var(--radius-full);
  filter: blur(24px);
  transform: translate(30%, -50%);
}

.dash-mobile-stats {
  display: grid;
  grid-template-columns: repeat(2, 1fr);
  gap: var(--space-sm);
}

.dash-mobile-stat {
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-outline-variant);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-card);
}

.dash-mobile-stat__icon {
  padding: var(--space-xs);
  border-radius: var(--radius-default);
  margin-bottom: var(--space-xs);
  display: inline-flex;
}

.dash-mobile-stat__icon--primary {
  color: var(--color-primary);
  background-color: color-mix(in srgb, var(--color-primary-container) 20%, transparent);
}

.dash-mobile-stat__icon--secondary {
  color: var(--color-secondary);
  background-color: color-mix(in srgb, var(--color-secondary-container) 20%, transparent);
}

.dash-mobile-stat__trend {
  margin-top: var(--space-xs);
  color: var(--color-on-secondary-container);
  font-size: 10px;
  font-weight: var(--font-weight-label-md);
  display: flex;
  align-items: center;
  gap: var(--space-base);
}

.dash-chart-bars {
  height: 8rem;
  display: flex;
  align-items: flex-end;
  justify-content: space-between;
  gap: var(--space-base);
  padding: 0 var(--space-xs);
}

.dash-chart-bar {
  flex: 1;
  border-radius: var(--radius-sm) var(--radius-sm) 0 0;
  background-color: var(--color-surface-container-highest);
  transition: background-color 0.15s ease;
  min-height: 20%;
}

.dash-chart-bar--active { background-color: var(--color-primary); }
.dash-chart-bar--40 { height: 40%; }
.dash-chart-bar--45 { height: 45%; }
.dash-chart-bar--55 { height: 55%; }
.dash-chart-bar--65 { height: 65%; }
.dash-chart-bar--75 { height: 75%; }
.dash-chart-bar--80 { height: 80%; }
.dash-chart-bar--90 { height: 90%; }

.dash-chart-labels {
  display: flex;
  justify-content: space-between;
  margin-top: var(--space-xs);
  padding: 0 var(--space-base);
  color: var(--color-outline);
  font-size: 10px;
}

.dash-mobile-campaign {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-outline-variant);
  background-color: var(--color-surface);
}

.dash-mobile-trip {
  padding: var(--space-sm);
  border-radius: var(--radius-md);
  border: 1px solid var(--color-outline-variant);
  background-color: var(--color-surface);
}

.dash-mobile-trip__head {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--space-xs);
  margin-bottom: var(--space-xs);
}

.dash-mobile-trip__head .dash-trip-name {
  min-width: 0;
  flex: 1;
}

.dash-mobile-trip__meta {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: var(--space-sm);
}

.dash-mobile-trip__field {
  display: flex;
  flex-direction: column;
  gap: var(--space-base);
  min-width: 0;
}

.dash-mobile-campaign__left {
  display: flex;
  align-items: center;
  gap: var(--space-xs);
  min-width: 0;
}

.dash-mobile-campaign__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dash-mobile-market-card {
  flex: 0 0 10rem;
  border-radius: var(--radius-md);
  border: 1px solid var(--color-outline-variant);
  background-color: var(--color-surface);
  box-shadow: var(--shadow-card);
  overflow: hidden;
}

.dash-mobile-market-card__img-wrap {
  position: relative;
  height: 6rem;
  background-color: var(--color-surface-container-highest);
}

.dash-mobile-market-card__img {
  width: 100%;
  height: 100%;
  object-fit: cover;
}

.dash-mobile-market-card__rating {
  position: absolute;
  top: var(--space-xs);
  right: var(--space-xs);
  background-color: color-mix(in srgb, var(--color-card) 90%, transparent);
  padding: var(--space-base) var(--space-xs);
  border-radius: var(--radius-full);
  font-size: 10px;
  font-weight: var(--font-weight-label-md);
}

.dash-mobile-market-card__body {
  padding: var(--space-xs);
}

.dash-mobile-insight {
  display: flex;
  gap: var(--space-xs);
}

.dash-mobile-insight__icon {
  width: 2.5rem;
  height: 2.5rem;
  border-radius: var(--radius-full);
  display: flex;
  align-items: center;
  justify-content: center;
  flex-shrink: 0;
}

.dash-mobile-insight__icon--primary {
  background-color: var(--color-primary-fixed);
  color: var(--color-primary);
}

.dash-mobile-insight__icon--secondary {
  background-color: var(--color-secondary-fixed);
  color: var(--color-secondary);
}

.dash-mobile-insight__time {
  font-size: 11px;
  color: var(--color-outline);
  margin-top: var(--space-base);
}


.dash-text-clamp-2 {
  display: -webkit-box;
  -webkit-line-clamp: 2;
  -webkit-box-orient: vertical;
  overflow: hidden;
}

.dash-reveal {
  opacity: 0;
  transform: translateY(1rem);
  transition: opacity 0.5s ease, transform 0.5s ease;
}

.dash-reveal--visible {
  opacity: 1;
  transform: translateY(0);
}

.dash-nav-link--button {
  width: 100%;
  border: none;
  background: none;
  cursor: pointer;
  text-align: left;
  font-family: inherit;
}

.dash-grid-kpi__table {
  grid-column: 1 / -1;
}

.dash-progress--sm {
  width: 6rem;
}

.dash-avatar-stack__item--variant { background-color: var(--color-surface-variant); }
.dash-avatar-stack__item--primary-fixed { background-color: var(--color-primary-fixed); }
.dash-avatar-stack__item--tertiary-fixed { background-color: var(--color-tertiary-fixed); }
.dash-avatar-stack__item--secondary-fixed { background-color: var(--color-secondary-fixed); }

.dash-card--surface-container {
  background-color: var(--color-surface-container);
}