/* ═══ TEAM ONBOARDING (26.09.2026) ══════════════════════════════════════════
   Three small surfaces, one file, so nothing here edits a shared sheet:
     · /setup/team — «Уведомления команде» (src/pages/onboarding/teamAlertsStep.js)
     · /settings/billing — «Помощь с запуском» (src/pages/billing/onboardingTiersSection.js)
     · /admin/maintenance — «Проверки у провайдеров» (src/pages/admin/ProviderReviewsPanel.js)
   Tokens only (--rp-*, --ch-*), so light and dark follow the shell. Every row
   wraps at 375px: no fixed widths, no nowrap on words that can be long. */

/* ── /setup/team ───────────────────────────────────────────────────────── */
.setup-team-panel { display: grid; gap: var(--rp-4, 16px); }
.setup-team-list { display: grid; gap: var(--rp-3, 12px); }
.setup-team-row {
  display: grid;
  grid-template-columns: minmax(140px, 0.8fr) minmax(0, 2.4fr) auto;
  align-items: start;
  gap: var(--rp-3, 12px);
  padding: var(--rp-3, 12px) var(--rp-4, 16px);
  border: 1px solid var(--rp-line, rgba(127, 127, 127, 0.2));
  border-radius: var(--rp-r, 12px);
  background: var(--rp-panel-2, transparent);
}
.setup-team-row.is-missing { border-color: rgb(var(--ch-amber, 245 158 11) / 0.45); }
.setup-team-who { display: grid; gap: 4px; min-width: 0; }
.setup-team-who strong { overflow-wrap: anywhere; }
.setup-team-verdict { font-size: 12.5px; color: var(--rp-ink-3, #7d8ba3); }
.setup-team-row.is-ready .setup-team-verdict { color: var(--rp-green, #22c55e); }
.setup-team-channels { display: flex; flex-wrap: wrap; gap: var(--rp-2, 8px); min-width: 0; }
.setup-team-chip {
  display: grid;
  gap: 2px;
  min-width: 132px;
  flex: 1 1 132px;
  padding: 8px 10px;
  border-radius: var(--rp-r-sm, 8px);
  border: 1px solid var(--rp-line, rgba(127, 127, 127, 0.2));
  font-size: 12.5px;
}
.setup-team-chip.is-on { border-color: rgb(var(--ch-green, 34 197 94) / 0.45); background: rgb(var(--ch-green, 34 197 94) / 0.08); }
.setup-team-chip.is-off { border-color: rgb(var(--ch-amber, 245 158 11) / 0.4); background: rgb(var(--ch-amber, 245 158 11) / 0.06); }
.setup-team-chip-state { font-weight: 620; }
.setup-team-chip.is-on .setup-team-chip-state { color: var(--rp-green, #22c55e); }
.setup-team-chip.is-off .setup-team-chip-state { color: var(--rp-amber, #f59e0b); }
.setup-team-chip small { color: var(--rp-ink-3, #7d8ba3); overflow-wrap: anywhere; }
.setup-team-action { display: flex; justify-content: flex-end; }
.setup-team-owner-note { color: var(--rp-ink-3, #7d8ba3); max-width: 220px; }
.setup-team-outcome { grid-column: 1 / -1; display: grid; gap: var(--rp-2, 8px); }
.setup-team-outcome p { margin: 0; }
.setup-team-link { display: grid; gap: var(--rp-2, 8px); }
.setup-team-link-url {
  padding: 6px 10px;
  border-radius: var(--rp-r-sm, 8px);
  border: 1px dashed var(--rp-line-2, rgba(127, 127, 127, 0.3));
  font-family: ui-monospace, SFMono-Regular, Menlo, Consolas, monospace;
  font-size: 12px;
  overflow-wrap: anywhere;
}
.setup-team-inactive,
.setup-team-empty { color: var(--rp-ink-3, #7d8ba3); }
.setup-team-actions { flex-wrap: wrap; }

@media (max-width: 760px) {
  .setup-team-row { grid-template-columns: minmax(0, 1fr); }
  .setup-team-action { justify-content: stretch; }
  .setup-team-action .primary-button { width: 100%; }
  .setup-team-chip { min-width: 0; flex-basis: 100%; }
}

/* ── /settings/billing: help with the launch ───────────────────────────── */
.billing-onboarding-tiers { display: grid; gap: var(--rp-3, 12px); }
.onboarding-tier-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(240px, 1fr));
  gap: var(--rp-3, 12px);
}
.onboarding-tier-card {
  display: flex;
  flex-direction: column;
  gap: var(--rp-2, 8px);
  padding: var(--rp-4, 16px);
  border: 1px solid var(--rp-line, rgba(127, 127, 127, 0.2));
  border-radius: var(--rp-r, 12px);
  background: var(--rp-panel, transparent);
  min-width: 0;
}
.onboarding-tier-card.is-implementation { border-color: rgb(var(--ch-blue, 59 130 246) / 0.4); }
.onboarding-tier-head { display: flex; flex-wrap: wrap; align-items: baseline; justify-content: space-between; gap: var(--rp-2, 8px); }
.onboarding-tier-head strong { font-size: 16px; }
.onboarding-tier-price { font-weight: 650; color: var(--rp-ink, inherit); }
.onboarding-tier-price[data-tier-price="on_request"] { color: var(--rp-ink-2, #a7b4c8); font-weight: 560; }
.onboarding-tier-card p { margin: 0; }
.onboarding-tier-points { margin: 0; padding-inline-start: 18px; display: grid; gap: 4px; color: var(--rp-ink-2, #a7b4c8); font-size: 13px; }
.onboarding-tier-card .pk-card-foot { margin-top: auto; }
.onboarding-tier-form { display: grid; gap: var(--rp-2, 8px); }
.onboarding-tier-form textarea { width: 100%; box-sizing: border-box; resize: vertical; min-height: 72px; }
.onboarding-tier-result { font-size: 13px; color: var(--rp-ink-2, #a7b4c8); }
.onboarding-tier-result[data-tier-result="filed"] { color: var(--rp-green, #22c55e); }

/* ── /admin/maintenance: provider reviews ──────────────────────────────── */
.provider-reviews { display: grid; gap: var(--rp-3, 12px); }
/* A grid item's min width is its content's by default, and .registration-table
   carries min-width: 980px — which pushed the whole card past a 375px screen. */
.provider-reviews > * { min-width: 0; }
.provider-reviews-table { min-width: 0; }
.provider-reviews-head { display: flex; flex-wrap: wrap; align-items: flex-start; justify-content: space-between; gap: var(--rp-3, 12px); }
.provider-reviews-head > div { min-width: 0; flex: 1 1 260px; }
.provider-reviews-head h3 { margin: 0 0 4px; }
.provider-reviews-table td { vertical-align: top; overflow-wrap: anywhere; }
/* The shared table rules keep cells on one line (white-space: nowrap); a next
   step is a sentence and has to wrap, on a phone and on a laptop alike. */
.provider-reviews .provider-reviews-table td,
.provider-reviews .provider-reviews-table th { white-space: normal; }
.provider-reviews-table .provider-review-status { display: inline-block; }
.provider-review-status {
  display: inline-block;
  padding: 2px 8px;
  border-radius: var(--rp-r-pill, 999px);
  font-size: 12px;
  font-weight: 620;
  border: 1px solid var(--rp-line-2, rgba(127, 127, 127, 0.3));
}
.provider-review-status.is-approved { color: var(--rp-green, #22c55e); border-color: rgb(var(--ch-green, 34 197 94) / 0.45); }
.provider-review-status.is-waiting { color: var(--rp-blue, #3b82f6); border-color: rgb(var(--ch-blue, 59 130 246) / 0.45); }
.provider-review-status.is-action_needed { color: var(--rp-amber, #f59e0b); border-color: rgb(var(--ch-amber, 245 158 11) / 0.5); }
.provider-review-status.is-rejected { color: var(--rp-red, #ef4444); border-color: rgb(var(--ch-red, 239 68 68) / 0.5); }
.provider-review-status.is-not_submitted { color: var(--rp-ink-3, #7d8ba3); }
.provider-review-days { display: block; margin-top: 4px; font-size: 11.5px; color: var(--rp-ink-3, #7d8ba3); }
/* Short columns keep their words whole; the next step takes the rest. */
@media (min-width: 761px) {
  .provider-reviews-table th:nth-child(1) { width: 96px; }
  .provider-reviews-table th:nth-child(2) { width: 22%; }
  .provider-reviews-table th:nth-child(3) { width: 128px; }
  .provider-reviews-table th:nth-child(4) { width: 132px; }
  .provider-reviews-table th:nth-child(6) { width: 96px; }
}

/* Below 760px the table becomes one card per provider: the label of each cell
   comes from its data-label, so nothing scrolls sideways. */
@media (max-width: 760px) {
  .provider-reviews-table,
  .provider-reviews-table tbody,
  .provider-reviews-table tr,
  .provider-reviews-table td { display: block; width: 100%; box-sizing: border-box; }
  .provider-reviews-table thead { display: none; }
  .provider-reviews-table tr {
    margin-bottom: var(--rp-3, 12px);
    padding: var(--rp-2, 8px) var(--rp-3, 12px);
    border: 1px solid var(--rp-line, rgba(127, 127, 127, 0.2));
    border-radius: var(--rp-r, 12px);
  }
  .provider-reviews-table td { padding: 6px 0; border: 0; }
  .provider-reviews-table td::before {
    content: attr(data-label);
    display: block;
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--rp-ink-3, #7d8ba3);
  }
}