/* =============== BACKDROP E CONTAINER =============== */

.modal-backdrop {
  position: fixed;
  inset: 0;
  z-index: 50;
  display: flex;
  align-items: center;
  justify-content: center;
  background: rgba(15, 23, 42, 0.78); /* overlay escuro mesmo no light fica ok */
  backdrop-filter: blur(6px);
}

.modal {
  width: min(480px, 100% - 32px);
  background: var(--modal-bg);
  border-radius: 20px;
  padding: 24px 28px 20px;
  box-shadow: var(--modal-shadow);
  border: 1px solid var(--modal-border);
  color: var(--text);
}

/* Grade reutilizável para inputs lado a lado em modais (melhora compacidade) */
.modal .form-grid {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(200px, 1fr));
  gap: 14px 16px;
}

.modal .form-grid.form-grid-2 {
  grid-template-columns: repeat(2, minmax(0, 1fr));
}

/* Grade de 3 colunas para modais com muitos campos, mantendo responsividade */
.modal .form-grid.form-grid-3 {
  grid-template-columns: repeat(3, minmax(0, 1fr));
}

/* Variante específica do modal de produtos para acomodar mais campos por linha */
.modal.modal--product .form-grid.form-grid-3 {
  /* Comentário: primeira coluna menor para código e status, demais maiores para textos */
  grid-template-columns: 150px 1fr 1fr;
}

.modal .form-group {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modal .form-group--wide {
  grid-column: 1 / -1;
}

/* Span de duas colunas para campos que devem ocupar mais espaço sem alongar a modal */
.modal .form-group--span2 {
  grid-column: span 2;
}

/* Larguras auxiliares para inputs curtos, evitando que campos pequenos alonguem a modal */
.modal .form-group--xs {
  max-width: 160px;
  justify-self: start;
}

.modal .form-group--sm {
  max-width: 200px;
  justify-self: start;
}

/* Versões equivalentes para form-row para manter identidade visual entre modais */
.modal .form-row--wide {
  grid-column: 1 / -1;
}

.modal .form-row--span2 {
  grid-column: span 2;
}

.modal .form-row--xs {
  max-width: 160px;
  justify-self: start;
}

.modal .form-row--sm {
  max-width: 200px;
  justify-self: start;
}

/* título */

.modal .modal-title {
  margin: 0 0 18px;
  font-size: 1.25rem;
  font-weight: 600;
  letter-spacing: 0.01em;
  color: var(--text);
}

/* =============== FORM DENTRO DA MODAL =============== */

/* Quando a form usa grade, sobrescrevemos o display para habilitar colunas */
.modal .form.form-grid {
  display: grid;
  gap: 14px 16px;
}

.modal .form {
  display: flex;
  flex-direction: column;
  gap: 14px;
}

.modal .form-row {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.modal .form-row label {
  font-size: 0.85rem;
  font-weight: 500;
  color: var(--muted);
}

/* inputs/select/textarea – tema-aware via vars */

.modal .form-row input,
.modal .form-row select,
.modal .form-row textarea {
  width: 100%;
  border-radius: 12px;
  border: 1px solid var(--modal-input-border);
  background: var(--modal-input-bg);
  color: var(--text);
  font-size: 0.95rem;
  padding: 10px 12px;
  outline: none;
  transition:
    border-color 0.15s ease,
    box-shadow 0.15s ease,
    background-color 0.15s ease,
    transform 0.08s ease;
}

.modal .form-row textarea {
  min-height: 80px;
  resize: vertical;
}

/* foco */

.modal .form-row input:focus,
.modal .form-row select:focus,
.modal .form-row textarea:focus {
  border-color: var(--accent);
  box-shadow:
    0 0 0 1px var(--accent-soft),
    0 0 0 8px rgba(79, 70, 229, 0.18);
  background: var(--modal-input-bg-focus);
  transform: translateY(-1px);
}

.modal .form-row input::placeholder,
.modal .form-row textarea::placeholder {
  color: rgba(148, 163, 184, 0.6);
}

/* =============== AÇÕES DA MODAL =============== */

.modal .modal-actions {
  margin-top: 16px;
  display: flex;
  justify-content: flex-end;
  gap: 0.75rem;
}

/* botões dentro da modal */

.modal .btn {
  border-radius: 999px;
  padding-inline: 18px;
  font-size: 0.9rem;
}

.modal .btn-primary {
  box-shadow: 0 14px 30px rgba(37, 99, 235, 0.45);
}

.modal .btn-ghost {
  background: transparent;
  border-color: transparent;
}

.modal .btn-ghost:hover {
  background: rgba(15, 23, 42, 0.07);
}

.modal .modal-block {
  border: 1px solid var(--modal-border);
  border-radius: 16px;
  padding: 14px;
  display: flex;
  flex-direction: column;
  gap: 12px;
  background: rgba(148, 163, 184, 0.08);
}

/* Modal de produtos com proporções mais retangulares e espaço para duas colunas */
.modal.modal--product {
  width: min(620px, 100% - 48px);
  max-width: 620px;
}

.modal .modal-block h3 {
  margin: 0;
}

.modal .js-validation-range {
  display: none;
}

.modal .js-validation-range.is-visible {
  display: grid;
}

.modal .is-hidden {
  display: none !important;
}

/* =============== MODAL DE CONFIRMAÇÃO =============== */

.modal.modal--confirm {
  display: grid;
  grid-template-columns: auto 1fr;
  gap: 14px;
  align-items: start;
  width: min(460px, 100% - 32px);
}

/* Modal específica para permissões do perfil com altura previsível (evita jump de layout) */
.modal.modal--role-perms {
  width: min(640px, 100% - 32px);
  max-width: 640px;
  height: min(620px, 80vh);
  max-height: 80vh;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Comentário: impede conteúdo de escapar do container */
}

.modal--role-perms .role-perms-form {
  flex: 1;
  display: flex;
  flex-direction: column;
  overflow: hidden; /* Comentário: mantém scroll apenas na lista interna */
}

.role-perms-content {
  flex: 1;
  display: flex;
  flex-direction: column;
  gap: 12px;
  min-height: 0; /* Comentário: permite que a lista ocupe o espaço restante */
}

.role-perms-list {
  border: 1px solid var(--modal-border);
  border-radius: 12px;
  padding: 10px 12px;
  background: rgba(148, 163, 184, 0.06);
  flex: 1;
  min-height: 0;
  overflow: auto;
  display: flex;
  flex-direction: column;
  gap: 8px;
}

.role-perms-pagination {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 12px;
  color: var(--muted);
  font-size: 0.9rem;
}

.role-perms-pagination .pagination-actions {
  display: flex;
  gap: 8px;
}

.role-perms-pagination .btn {
  min-width: 96px;
}

.confirm-icon {
  width: 46px;
  height: 46px;
  border-radius: 14px;
  display: grid;
  place-items: center;
  font-size: 22px;
  background: var(--accent-soft);
  color: var(--accent-strong);
  box-shadow: inset 0 1px 0 rgba(255, 255, 255, 0.05);
}

.confirm-icon--danger {
  background: rgba(220, 38, 38, 0.15);
  color: #fca5a5;
}

.confirm-content {
  display: flex;
  flex-direction: column;
  gap: 6px;
}

.confirm-title {
  margin: 0;
  font-size: 1.15rem;
}

.confirm-message {
  margin: 0 0 12px;
  color: var(--muted);
  line-height: 1.5;
}

.confirm-actions {
  grid-column: 1 / -1;
  margin-top: 4px;
}