/* ============================================================================
   BASEFLY — MODAIS E ESTADOS VAZIOS (etapa 4)
   Seções 5.7 e 5.8. Carrega depois de navigation.css.
   ============================================================================ */

/* ---------------------------------------------------------------------------
   5.7 MODAIS
   Sobreposição --overlay · superfície branca · raio 8 px · sombra de modal.
   Largura: 560 px para confirmação, 800 px para formulário.
   --------------------------------------------------------------------------- */
.modal-overlay{
  background:var(--overlay);
  padding:var(--s-6);
}
.modal{
  background:var(--n-0);
  border-radius:var(--r-md);
  box-shadow:var(--sh-modal);
  max-width:800px;                 /* formulário: a largura mais comum aqui */
}
.modal.modal-sm{ max-width:560px; }   /* confirmação */
.modal.modal-md{ max-width:640px; }
.modal.modal-lg{ max-width:800px; }
.modal.modal-xl{ max-width:1100px; }  /* tabelas largas; fora da seção 5.7, mas
                                         existe no projeto e não cabe em 800 */

.modal-header{
  padding:var(--s-6) var(--s-6) var(--s-4);
  border-bottom:1px solid var(--n-200);
}
.modal-body{ padding:var(--s-6); }
.modal-footer{
  padding:var(--s-4) var(--s-6);
  border-top:1px solid var(--n-200);
  display:flex;
  justify-content:flex-end;        /* ações à direita, primária mais à direita */
  gap:var(--s-2);
  background:var(--n-0);
}
.modal-title{ color:var(--n-900); }
.modal-subtitle{ color:var(--n-600); }

.modal-close{
  background:transparent;
  border:0;
  color:var(--n-500);
  border-radius:var(--r-sm);
  cursor:pointer;
}
.modal-close:hover{ background:var(--n-100); color:var(--n-900); }
.modal-close:focus-visible{ outline:2px solid var(--blue-500); outline-offset:2px; }

/* banner de sucesso dentro de modal */
.modal-success-banner{
  background:var(--success-bg);
  border:1px solid var(--success);
  border-radius:var(--r-md);
}
.modal-success-title{ color:var(--success-text); font-family:var(--font-display); }
.modal-success-desc{ color:var(--n-600); }

/* ---------------------------------------------------------------------------
   5.8 ESTADOS VAZIOS
   Título curto em Archivo 600/16 px · uma linha de explicação em --n-600 ·
   ação primária quando houver o que fazer.

   Regra da seção 8: área vazia sem explicação não existe. O projeto já traz o
   texto explicativo em quase todos os pontos; o que faltava era forma comum.
   --------------------------------------------------------------------------- */
.empty-state,
.contract-empty-state,
.contact-history-empty,
.materials-empty,
.notif-empty{
  display:flex;
  flex-direction:column;
  align-items:center;
  justify-content:center;
  gap:var(--s-2);
  padding:var(--s-12) var(--s-6);
  background:var(--n-0);
  border:1px dashed var(--n-200);
  border-radius:var(--r-md);
  text-align:center;
  color:var(--n-600);
}

.empty-state-title,
.contract-empty-title{
  font-family:var(--font-display);
  font-weight:600;
  font-size:16px;
  line-height:1.3;
  color:var(--n-900);
  margin:0;
}

.empty-state-desc,
.contract-empty-desc{
  font-family:var(--font-text);
  font-size:13px;
  line-height:1.5;
  color:var(--n-600);
  max-width:52ch;                  /* linha longa demais cansa de ler */
  margin:0;
}

/* o ícone é apoio, não informação: cor terciária e tamanho contido */
.empty-state-icon,
.contract-empty-icon{
  font-size:28px;
  line-height:1;
  color:var(--n-300);
}

/* a ação fica logo abaixo da explicação */
.empty-state .btn,
.contract-empty-state .btn{ margin-top:var(--s-2); }

/* estados vazios embutidos em tabela e lista: mesma linguagem, sem a moldura */
td.empty-state,
tr.empty-state td{
  border:0;
  background:var(--n-0);
  color:var(--n-600);
}