/* Áreas de trabalho principais.
   Estes módulos têm densidade e duração de uma página,
   não de um diálogo. Esta casca dá-lhes largura, ritmo vertical e um fundo
   comum sem interferir na composição própria de cada módulo. */

.moduleWorkspace {
  min-width: 0;
  width: 100%;
  margin: 26px 0 0;
}

.moduleSurface {
  min-width: 0;
}

.moduleBody {
  min-width: 0;
}

.moduleBody > :first-child {
  margin-top: 0;
}

/* A introdução de cada módulo passa a funcionar como uma faixa de contexto,
   e não como mais um cartão indistinguível no meio dos resultados. */
.moduleBody > .sec:first-child,
#moduleAuditoriaBody > .auditRoleBar:first-child {
  border-color: color-mix(in srgb, var(--accent) 22%, var(--line));
  background: color-mix(in srgb, var(--panel) 96%, var(--accent) 4%);
  box-shadow: none;
}

/* Todos os módulos são mesas de trabalho e usam a janela toda: tabelas de
   consumo, listas de contas, achados com dezenas de empreitadas por linha,
   resultados de pesquisa documental. Espremidos a 1180px sobrava uma faixa
   vazia de cada lado do ecrã enquanto o conteúdo alongava o scroll por dentro.
   As Notificações tinham ainda um teto próprio de 980px, mais apertado do que
   o de todos os outros, e ficavam a ocupar pouco mais de metade do monitor. */
#moduleEmailBody,
#moduleRelatoriosBody,
#moduleOperacoesBody,
#moduleAuditoriaBody,
#moduleNotificacoesBody,
#moduleDocumentalBody {
  width: 100%;
  max-width: none;
  margin-inline: 0;
}


/* As notificações têm uma ordem de leitura, e o que não pode crescer com a
   janela é a MEDIDA DO TEXTO: uma mensagem numa linha de 1400px lê-se mal. O
   teto passa da coluna para a prosa de cada notificação, que é onde ele
   resolve alguma coisa; o cartão, os botões e os agrupamentos usam a largura
   toda. Duas colunas continuam fora de questão - criavam um vazio grande
   quando o primeiro grupo estava aberto e o seguinte fechado. */
#moduleNotificacoesBody .notificationCard > p,
#moduleNotificacoesBody > .sec > p {
  max-width: 96ch;
}

/* Um estado comum evita que cada módulo deixe apenas uma linha solta no topo
   durante pedidos demorados ou quando a rede falha. */
.moduleState {
  min-height: 180px;
  padding: 28px;
  display: grid;
  place-content: center;
  gap: 6px;
  border: 1px dashed var(--line);
  border-radius: var(--r-lg);
  background: color-mix(in srgb, var(--panel) 86%, var(--bg));
  text-align: center;
}

.moduleState b {
  color: var(--ink);
  font-size: var(--txt-lg);
}

.moduleState span {
  max-width: 520px;
  color: var(--muted);
  font-size: var(--txt-sm);
  line-height: 1.5;
}

.moduleState.isError {
  border-color: color-mix(in srgb, var(--vermelho) 45%, var(--line));
  background: color-mix(in srgb, var(--vermelho) 5%, var(--panel));
}

@media (max-width: 620px) {
  .moduleWorkspace {
    margin-top: 20px;
  }

  .moduleBody > .sec:first-child {
    padding: 14px;
  }

  /* Os separadores extensos destas páginas não escondem a última opção para
     lá da margem. Ficam todos visíveis numa grelha de duas colunas. */
  #moduleOperacoesBody > .operationsNav,
  #moduleRelatoriosBody > .operationsNav,
  #moduleEmailBody > .emailSectionsNav {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    overflow: visible;
  }

  #moduleOperacoesBody > .operationsNav button,
  #moduleRelatoriosBody > .operationsNav button,
  #moduleEmailBody > .emailSectionsNav button {
    min-width: 0;
    width: 100%;
    min-height: 44px;
    white-space: normal;
  }
}