/* Final shared alignment layer. Keep this stylesheet last on the app page. */
html,
body {
  max-width: 100%;
  overflow-x: clip;
}

.app,
.main,
.page,
.page > *,
.top > *,
.grid > *,
.results > *,
.row > *,
.usage-grid > *,
.approval-grid > *,
.summary-card > *,
.affiliate-hero > *,
.affiliate-stats > * {
  min-width: 0;
}

.main,
.page,
.v2-search,
.v2-search input,
.auth-form,
.auth-form input,
.auth-form select,
.auth-form textarea {
  width: 100%;
}

.grid,
.results,
.usage-grid,
.approval-grid,
.summary-card,
.affiliate-hero,
.affiliate-stats {
  align-items: stretch;
}

.grid > .card,
.grid > .item,
.results > .card,
.results > .item,
.affiliate-hero > .card,
.affiliate-hero > .hero {
  height: 100%;
}

.card,
.item,
.hero,
.action-card,
.workflow-focus,
.application-detail {
  overflow-wrap: anywhere;
}

/* Dashboard-only layout rules. These override the generic three-column grid
   without changing grids used by the rest of the application. */
.dashboard-priority-grid {
  grid-template-columns: minmax(0, 2fr) minmax(280px, 1fr) !important;
}

.dashboard-priority-grid .check-list {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

.dashboard-priority-grid .check-list > div {
  min-width: 0;
}

.upgrade-plan-card {
  width: 100%;
  margin-top: 18px;
}

.upgrade-plan-content {
  display: grid;
  grid-template-columns: minmax(0, 0.8fr) minmax(360px, 1.2fr);
  gap: 18px;
  width: 100%;
  margin-top: 18px;
}

.upgrade-plan-column,
.upgrade-plan-highest {
  min-width: 0;
  padding: 22px;
  border: 1px solid var(--v2-line, rgba(255, 255, 255, 0.08));
  border-radius: 18px;
  background: rgba(255, 255, 255, 0.025);
  overflow-wrap: normal;
  word-break: normal;
}

.upgrade-plan-column h3,
.upgrade-plan-highest h3,
.upgrade-price {
  overflow-wrap: normal;
  word-break: keep-all;
}

.upgrade-plan-column h3,
.upgrade-plan-highest h3 {
  margin: 12px 0 4px;
}

.upgrade-price {
  display: block;
  color: var(--v2-green, #98fb98);
  font-size: clamp(22px, 3vw, 32px);
  line-height: 1.2;
}

.upgrade-plan-next .btn {
  max-width: 100%;
  white-space: normal !important;
}

.upgrade-plan-highest {
  grid-column: 1 / -1;
}

.actions,
.v2-section-head,
.mvp-section-head,
.mvp-card-head,
.mvp-seat-line {
  align-items: center;
}

.actions > .btn,
.actions > a,
.actions > button {
  max-width: 100%;
}

.mvp-table-wrap,
.affiliate-link-box {
  min-width: 0;
  max-width: 100%;
}

.legal-ack {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  margin-top: 18px;
  color: var(--v2-muted, #8fa196);
  font-size: 12px;
  line-height: 1.5;
}

.legal-ack input {
  flex: 0 0 auto;
  width: 18px !important;
  min-height: 18px;
  margin-top: 2px;
}

@media (max-width: 980px) {
  .top {
    width: auto;
  }

  .v2-section-head,
  .mvp-section-head,
  .mvp-card-head,
  .mvp-seat-line {
    align-items: flex-start;
  }

  .dashboard-priority-grid,
  .upgrade-plan-content {
    grid-template-columns: 1fr !important;
  }
}

@media (max-width: 640px) {
  .dashboard-priority-grid .check-list {
    grid-template-columns: 1fr;
  }

  .upgrade-plan-column,
  .upgrade-plan-highest {
    padding: 18px;
  }

  .actions > .btn,
  .actions > a,
  .actions > button {
    flex: 1 1 100%;
    width: 100%;
    white-space: normal !important;
  }

  .toast {
    right: 14px !important;
    bottom: 14px !important;
    left: 14px;
  }
}