/**
 * Modais, bottom sheets e toasts — Modo Cliente (FRONT-002)
 * Comportamento (abrir/fechar/Esc/foco) fica em cliente-overlays.js;
 * este arquivo é só a aparência de cada estado ([hidden] / aberto).
 */

/* ================= Overlay compartilhado ================= */
.cliente-overlay {
  position: fixed;
  inset: 0;
  background: var(--cliente-overlay);
  z-index: var(--cliente-z-overlay);
  display: flex;
}

.cliente-overlay[hidden] {
  display: none;
}

/* ================= Modal (centralizado — uso preferencial em desktop) ================= */
.cliente-overlay--modal {
  align-items: center;
  justify-content: center;
  padding: var(--cliente-space-4);
}

.cliente-modal {
  background: var(--cliente-superficie-clara);
  color: var(--cliente-texto-escuro-principal);
  border-radius: var(--cliente-raio-modal);
  box-shadow: var(--cliente-sombra-modal);
  width: 100%;
  max-width: min(420px, calc(100vw - 32px));
  padding: var(--cliente-space-6);
  z-index: var(--cliente-z-modal);
}

.cliente-modal--escuro {
  background: var(--cliente-fundo-escuro-secundario);
  color: #fff;
}

/* RC-002-R1 — achado real: `$escuro` em modal.php/bottom-sheet.php é uma
 * escolha ESTÁTICA no momento da renderização no servidor, mas
 * `aplicarPreferenciaTema()` (cliente-nucleo.js) pode trocar a classe de
 * tema do body DEPOIS, seguindo prefers-color-scheme do sistema — sem
 * isto, um formulário aberto dentro de um modal/bottom-sheet renderizado
 * sem `escuro` (o caso padrão, usado por todos os formulários de Peladas)
 * ficava com fundo claro fixo enquanto os campos dentro dele (`.cliente-
 * campo__input`, sempre reativos à classe do body) viravam brancos sobre
 * branco em qualquer dispositivo com modo escuro do sistema ativado — o
 * bug relatado nesta sprint. `:not(.cliente-modal--escuro)` preserva
 * intacto o comportamento de quem já escolhe a variante explicitamente
 * (telas de demonstração do Design System). */
.cliente--escuro .cliente-modal:not(.cliente-modal--escuro) {
  background: var(--cliente-fundo-escuro-secundario);
  color: #fff;
}

.cliente-modal__topo {
  display: flex;
  align-items: flex-start;
  justify-content: space-between;
  gap: var(--cliente-space-3);
  margin-bottom: var(--cliente-space-3);
}

.cliente-modal__titulo {
  font-size: 15px;
  font-weight: var(--cliente-fw-bold);
  margin: 0;
}

.cliente-modal__texto {
  font-size: 12.5px;
  opacity: .75;
  line-height: var(--cliente-lh-corpo);
  margin: 0 0 var(--cliente-space-5);
}

.cliente-modal__acoes {
  display: flex;
  gap: var(--cliente-space-3);
}

.cliente-modal__acoes .cliente-btn { flex: 1; }

/* ================= Bottom sheet (uso preferencial em mobile) ================= */
.cliente-overlay--sheet {
  align-items: flex-end;
  justify-content: center;
}

.cliente-sheet {
  width: 100%;
  max-width: var(--cliente-largura-mobile);
  background: var(--cliente-superficie-clara);
  color: var(--cliente-texto-escuro-principal);
  border-radius: var(--cliente-raio-modal) var(--cliente-raio-modal) 0 0;
  padding: 10px var(--cliente-space-6) calc(var(--cliente-space-7) + var(--cliente-safe-bottom));
  box-shadow: var(--cliente-sombra-modal);
  z-index: var(--cliente-z-bottom-sheet);
}

.cliente-sheet--escuro {
  background: var(--cliente-fundo-escuro-secundario);
  color: #fff;
}

/* RC-002-R1 — mesmo achado/mesma razão documentada acima em
 * `.cliente-modal`: sem isto, todo formulário de Peladas aberto num
 * bottom-sheet (Adicionar/Editar Jogador, Restrições) ficava com fundo
 * claro fixo mesmo quando o body virava escuro via preferência do
 * sistema, resultando em texto branco sobre fundo branco. */
.cliente--escuro .cliente-sheet:not(.cliente-sheet--escuro) {
  background: var(--cliente-fundo-escuro-secundario);
  color: #fff;
}

.cliente-sheet__alca {
  width: 40px;
  height: 4px;
  border-radius: 999px;
  background: var(--cliente-borda-clara);
  margin: 6px auto var(--cliente-space-4);
}

.cliente-sheet--escuro .cliente-sheet__alca,
.cliente--escuro .cliente-sheet:not(.cliente-sheet--escuro) .cliente-sheet__alca {
  background: rgba(255, 255, 255, .2);
}

.cliente-sheet__titulo {
  font-size: 14.5px;
  font-weight: var(--cliente-fw-bold);
  margin: 0 0 4px;
}

.cliente-sheet__texto {
  font-size: 12px;
  opacity: .65;
  margin: 0 0 var(--cliente-space-5);
}

.cliente-sheet__opcao {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: var(--cliente-space-4);
  border-radius: 14px;
  border: 1.5px solid var(--cliente-borda-clara);
  margin-bottom: var(--cliente-space-2);
  width: 100%;
  background: transparent;
  color: inherit;
  font-size: 13px;
  min-height: var(--cliente-altura-toque-minima);
}

.cliente-sheet--escuro .cliente-sheet__opcao,
.cliente--escuro .cliente-sheet:not(.cliente-sheet--escuro) .cliente-sheet__opcao {
  border-color: var(--cliente-borda-escura);
}

/* Menu de ações — variação do bottom sheet, lista de ações simples */
.cliente-sheet__acao {
  display: flex;
  align-items: center;
  gap: var(--cliente-space-3);
  padding: 13px var(--cliente-space-2);
  width: 100%;
  background: transparent;
  border: none;
  color: inherit;
  font-size: 13.5px;
  font-weight: var(--cliente-fw-semibold);
  min-height: var(--cliente-altura-toque-minima);
}

.cliente-sheet__acao svg { width: 18px; height: 18px; }

.cliente-sheet__acao--perigo { color: var(--cliente-erro); }

/* ================= Toasts ================= */
.cliente-toasts {
  position: fixed;
  left: 0;
  right: 0;
  bottom: calc(var(--cliente-altura-nav-mobile) + var(--cliente-space-4) + var(--cliente-safe-bottom));
  z-index: var(--cliente-z-toast);
  display: flex;
  flex-direction: column;
  align-items: center;
  gap: var(--cliente-space-2);
  padding: 0 var(--cliente-margem-lateral-mobile);
  pointer-events: none;
}

.cliente-toast {
  pointer-events: auto;
  max-width: 360px;
  width: 100%;
  display: flex;
  align-items: center;
  gap: var(--cliente-space-2);
  background: var(--cliente-fundo-escuro-secundario);
  color: #fff;
  border-radius: 14px;
  padding: var(--cliente-space-3) var(--cliente-space-4);
  font-size: 12.5px;
  font-weight: var(--cliente-fw-semibold);
  box-shadow: var(--cliente-sombra-modal);
}

.cliente-toast svg { width: 16px; height: 16px; flex-shrink: 0; }

.cliente-toast--sucesso svg { color: var(--cliente-sucesso); }
.cliente-toast--erro svg { color: var(--cliente-erro); }
.cliente-toast--atencao svg { color: var(--cliente-amarelo); }
.cliente-toast--info svg { color: var(--cliente-azul-claro); }

/* FRONT-009 — 24x24 corrigido para 44x44 (alvo de toque mínimo); ícone
   interno continua 14x14, centralizado por flex. */
.cliente-toast__fechar {
  margin-left: auto;
  background: transparent;
  border: none;
  color: rgba(255, 255, 255, .6);
  width: 44px;
  height: 44px;
  flex-shrink: 0;
  display: flex;
  align-items: center;
  justify-content: center;
}

.cliente-toast__fechar svg { width: 14px; height: 14px; }