/* screens/sellers.css — sellers (source profiles) screen styles
 * (Stage 9 retrofit owner: this file).
 *
 * Screen bits: page-head variants + the edit form grid. This file also
 * hosts the SHARED dialog styles used by other views (order detail
 * status-confirm, customers cascade, message sheet labels): the
 * .cascade-* dialog family and the .profile-risk-modal family. Those
 * class names are a contract — do not rename them. */

/* ============ list page head (title + New profile action) ============ */

.profiles-page-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--brand-size-sm);
  flex-wrap: wrap;
}

/* Row-hover hint on cascade-trigger statuses (scam/fraud/blocked). */
.cascade-hint {
  font-size: var(--brand-font-size-sm);
  color: var(--brand-color-primary);
  font-weight: var(--brand-font-weight-strong);
}

/* ============ edit view: page head + card form grid ============ */

.profile-edit-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--brand-size-sm);
  flex-wrap: wrap;
}

.profile-edit-head__actions {
  display: flex;
  align-items: center;
  gap: var(--brand-size-xs);
  flex-wrap: wrap;
}

.source-form {
  display: flex;
  flex-direction: column;
  gap: var(--brand-size-lg);
}

.source-form .form-grid {
  display: grid;
  grid-template-columns: repeat(2, minmax(0, 1fr));
  gap: var(--brand-size-md);
}

.source-form .form-grid--stack {
  grid-template-columns: minmax(0, 1fr);
}

@media (max-width: 700px) {
  .source-form .form-grid {
    grid-template-columns: minmax(0, 1fr);
  }
}

/* The shared .cascade-* dialog family moved to components.css (its
 * consumers span screens: order-detail status-confirm, customers
 * cascade, cascade-modal component). */

/* ============ profile risk modal (PR7.3 §3.5) ============ */

.profile-risk-modal__backdrop {
  position: fixed;
  inset: 0;
  background: rgba(59, 38, 31, 0.55); /* scrim — no token (documented gap) */
  z-index: 60;
  display: flex;
  align-items: flex-end;
  justify-content: center;
}

@media (min-width: 700px) {
  .profile-risk-modal__backdrop {
    align-items: center;
  }
}

.profile-risk-modal {
  position: relative;
  background: var(--brand-color-bg-container);
  border: var(--brand-line-width) solid var(--brand-color-border-secondary);
  border-radius: var(--brand-border-radius-lg) var(--brand-border-radius-lg) 0 0;
  box-shadow: 0 4px 12px var(--brand-color-fill);
  padding: var(--brand-size);
  width: 100%;
  max-width: 560px;
  max-height: 92vh;
  overflow-y: auto;
  display: flex;
  flex-direction: column;
  gap: var(--brand-size-sm);
}

@media (min-width: 700px) {
  .profile-risk-modal {
    border-radius: var(--brand-border-radius-lg);
  }
}

.profile-risk-modal__header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: var(--brand-size-sm);
}

.profile-risk-modal__header h2 {
  margin: 0;
  font-size: var(--brand-font-size-lg);
}

.profile-risk-modal__close {
  background: transparent;
  border: none;
  font-size: var(--brand-font-size-heading-3);
  line-height: 1;
  cursor: pointer;
  color: var(--brand-color-text-secondary);
  padding: 0 var(--brand-size-xs);
}

.profile-risk-modal__close:hover {
  color: var(--brand-color-text);
}

.profile-risk-modal__hint {
  margin: 0;
  font-size: var(--brand-font-size-sm);
}

.profile-risk-modal__form {
  display: flex;
  flex-direction: column;
  gap: var(--brand-size-sm);
}

/* Red warning banner (spec §3.5; "X active products will be disabled"
   / "New products cannot be created" / "The profile remains
   searchable in admin"). The X is filled on submit with the PATCH
   response's `disabled_count`; the heading is set in JS. */
.profile-risk-modal__warning {
  border: var(--brand-line-width) solid var(--brand-color-error-border);
  background: var(--brand-color-error-bg);
  color: var(--brand-color-error-active);
  border-radius: var(--brand-border-radius);
  padding: var(--brand-size-sm);
  display: flex;
  flex-direction: column;
  gap: var(--brand-size-xxs);
  font-size: var(--brand-font-size);
}

.profile-risk-modal__warning-headline {
  margin: 0;
  font-weight: var(--brand-font-weight-strong);
  color: var(--brand-color-error-active);
}

.profile-risk-modal__warning-list {
  margin: 0;
  padding-left: var(--brand-size);
  display: flex;
  flex-direction: column;
  gap: var(--brand-size-xxs);
}

.profile-risk-modal__section {
  display: flex;
  flex-direction: column;
  gap: var(--brand-size-xs);
  padding-top: var(--brand-size-sm);
  border-top: var(--brand-line-width) solid var(--brand-color-border-secondary);
}

.profile-risk-modal__section-title {
  margin: 0;
  font-size: var(--brand-font-size);
  font-weight: var(--brand-font-weight-strong);
  color: var(--brand-color-text-secondary);
  text-transform: uppercase;
  letter-spacing: 0.04em; /* tracking — documented raw value */
}

.profile-risk-modal__result {
  background: var(--brand-color-fill-secondary);
  border-radius: var(--brand-border-radius-sm);
  padding: var(--brand-size-sm);
  display: flex;
  flex-direction: column;
  gap: var(--brand-size-xxs);
  font-size: var(--brand-font-size);
}

.profile-risk-modal__result p {
  margin: 0;
}

.profile-risk-modal__actions {
  display: flex;
  flex-wrap: wrap;
  gap: var(--brand-size-xs);
  padding-top: var(--brand-size-xs);
  border-top: var(--brand-line-width) solid var(--brand-color-border-secondary);
}

.profile-risk-modal__actions .button,
.profile-risk-modal__actions .btn {
  flex: 1 1 100px;
  min-height: 44px; /* tap target — documented raw value */
}

@media (max-width: 480px) {
  .profile-risk-modal__actions {
    flex-direction: column;
  }
  .profile-risk-modal__actions .button,
  .profile-risk-modal__actions .btn {
    width: 100%;
  }
}