/* m24-offer-modal38 — layout da proposta de compra.
 *
 * Problema no mobile: o CSS base colapsa a grade de valores para 1 coluna
 * (`grid-template-columns:1fr`) e empilha os botões em largura total. Com
 * Oferta + Valor de mercado + Salário virando três cartões altos, o modal
 * passa da tela e o técnico precisa rolar para achar "Aceitar" — justamente
 * a decisão que ele abriu o modal para tomar.
 *
 * Aqui: a Oferta vira o número herói (é o dado da decisão), o resto vai para
 * duas colunas compactas, e os botões ganham hierarquia — aceitar em verde,
 * recusar discreto. Só CSS, escopo restrito a .manager38-offer-popup-*.
 */

/* ---------- corpo mais enxuto ---------- */
.manager38-offer-popup-body {
  gap: 8px !important;
  padding: 12px 14px !important;
}

/* ---------- prazo: faixa fina, não bloco ---------- */
.manager38-offer-popup-deadline {
  margin: 0 !important;
  padding: 7px 10px !important;
  border-radius: 9px !important;
  font-size: 0.76rem !important;
  line-height: 1.3 !important;
}

/* ---------- clube comprador: linha compacta ---------- */
.manager38-offer-popup-club {
  padding: 8px 10px !important;
  gap: 8px !important;
}

/* ---------- valores ---------- */
.manager38-offer-popup-grid {
  /* Duas colunas MESMO no celular: "9.6M" e "44k/mês" cabem folgados lado a
     lado. A media query base forçava 1fr e gastava três linhas. */
  grid-template-columns: repeat(2, minmax(0, 1fr)) !important;
  gap: 7px !important;
}

.manager38-offer-popup-grid > div {
  padding: 8px 10px !important;
  border-radius: 10px !important;
}

/* A oferta é o número que decide — ocupa a linha e ganha destaque. */
.manager38-offer-popup-grid > div:first-child {
  grid-column: 1 / -1;
  background: linear-gradient(135deg, rgba(20, 148, 71, 0.18), rgba(20, 148, 71, 0.06)) !important;
  border-color: rgba(20, 148, 71, 0.45) !important;
}

.manager38-offer-popup-grid > div:first-child dt {
  color: #4ade80 !important;
}

.manager38-offer-popup-grid > div:first-child dd {
  font-size: 1.65rem !important;
  line-height: 1.15 !important;
  letter-spacing: -0.02em;
}

.manager38-offer-popup-grid dt {
  font-size: 0.62rem !important;
  margin-bottom: 2px !important;
}

.manager38-offer-popup-grid dd {
  font-size: 0.88rem !important;
}

/* ---------- texto de apoio ---------- */
.manager38-offer-popup-hint {
  font-size: 0.72rem !important;
  line-height: 1.35 !important;
}

/* ---------- inegociável: mais baixo ----------
 * ATENÇÃO: `-switch` é o PRÓPRIO pill de 38x22px (tem :after como bolinha).
 * Aplicar padding nele deforma o toggle. O container é `-non-negotiable`.
 */
.manager38-offer-popup-non-negotiable {
  padding: 8px 10px !important;
}

.manager38-offer-popup-non-negotiable-copy small {
  font-size: 0.68rem !important;
  line-height: 1.3 !important;
}

/* ---------- ações com hierarquia ---------- */
.manager38-offer-popup-actions {
  gap: 6px !important;
  padding: 10px 14px 14px !important;
}

.manager38-offer-popup-actions button {
  min-height: 42px !important;
  border-radius: 11px !important;
  font-size: 0.84rem !important;
  font-weight: 800 !important;
}

/* Aceitar: verde da casa. Vermelho ali dizia "perigo" na ação que o técnico
   normalmente quer tomar — e o Recusar, que é o descarte, parecia neutro. */
.manager38-offer-popup-actions .manager38-transfer-propose-btn {
  background: linear-gradient(135deg, #149447, #0f7a3a) !important;
  border: 1px solid rgba(20, 148, 71, 0.65) !important;
  color: #fff !important;
  box-shadow: 0 2px 10px rgba(20, 148, 71, 0.28) !important;
}

/* Recusar: contorno discreto, não bloco vermelho. */
.manager38-offer-popup-actions .manager38-btn-ghost.is-danger {
  background: transparent !important;
  border: 1px solid rgba(239, 68, 68, 0.42) !important;
  color: #f87171 !important;
  box-shadow: none !important;
}

/* ---------- tema claro ---------- */
html.ui-light-test .manager38-offer-popup-grid > div:first-child,
body.light .manager38-offer-popup-grid > div:first-child {
  background: linear-gradient(135deg, rgba(20, 148, 71, 0.14), rgba(20, 148, 71, 0.04)) !important;
  border-color: rgba(20, 148, 71, 0.4) !important;
}

html.ui-light-test .manager38-offer-popup-grid > div:first-child dt,
body.light .manager38-offer-popup-grid > div:first-child dt {
  color: #0f7a3a !important;
}

html.ui-light-test .manager38-offer-popup-actions .manager38-btn-ghost.is-danger,
body.light .manager38-offer-popup-actions .manager38-btn-ghost.is-danger {
  color: #dc2626 !important;
  border-color: rgba(220, 38, 38, 0.38) !important;
}

/* ---------- telas bem estreitas ---------- */
@media (max-width: 360px) {
  .manager38-offer-popup-grid > div:first-child dd {
    font-size: 1.45rem !important;
  }
  .manager38-offer-popup-actions button {
    min-height: 40px !important;
  }
}