/*
 * Os documentos: a árvore de pastas e a lista de arquivos de cada perfil, dos
 * dois lados — o do cliente, em /perfis/:id/documentos, e o do escritório, na
 * aba Documentos do perfil, em /admin/recebidos e em /admin/lembretes —, e os
 * lembretes no topo da área de documentos.
 *
 * Mora aqui o que só os documentos desenham. Cor, espaço, cartão, botão,
 * etiqueta e formulário vêm de `application.css`, pelos tokens e pelas classes
 * que já existem — este arquivo não redefine nenhum deles.
 */

/* --------------------------------------------------------------- as pastas */
/* A árvore de pastas, uma lista dentro da outra. É `.pastas`, e não
   `.arvore`: esse nome já é da árvore de categorias, com cartão em cada item.
   O traço à esquerda de cada nível é o que mostra de quem a subpasta é filha
   sem precisar repetir o nome da mãe. */

.pastas__nivel { list-style: none; margin: 0; padding: 0; }

.pastas__nivel .pastas__nivel {
  margin-left: .85rem;
  padding-left: .5rem;
  border-left: 1px solid var(--line);
}

/* O nome primeiro; as etiquetas e a contagem vão para a linha de baixo quando
   a coluna é estreita, em vez de espremer o nome até ele quebrar no meio de
   uma palavra. */
.pastas__link {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .3rem .5rem;
  padding: .45rem .55rem;
  border-radius: var(--raio);
  color: var(--ink);
  text-decoration: none;
}

.pastas__link:hover { background: var(--surface-alt); }
.pastas__link:focus-visible { outline: 2px solid var(--foco); outline-offset: 2px; }

/* A pasta aberta na aba do escritório, como o item atual da lateral. */
.pastas__link[aria-current] {
  background: var(--acento-fraco);
  color: var(--acento);
  font-weight: 600;
}

.pastas__link .icone { flex: none; color: var(--ink-fraco); }
.pastas__link[aria-current] .icone { color: var(--acento); }

.pastas__nome { flex: 1 1 8rem; min-width: 0; overflow-wrap: break-word; }

.pastas__meta {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin-left: auto;
}

.pastas__contagem {
  font-size: .8rem;
  font-weight: 400;
  color: var(--ink-fraco);
  font-variant-numeric: tabular-nums;
}

/* As subpastas soltas no alto de uma pasta, fora de cartão. */
.pastas--solta { margin-bottom: 1.35rem; }

/* O caminho até a pasta, acima do título dela. */
.trilha-de-pastas {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin-bottom: .3rem;
  font-size: .85rem;
  color: var(--ink-fraco);
}

.trilha-de-pastas a { color: var(--ink-medio); }

/* --------------------------------------------------------- os arquivos */

.novos-do-escritorio { margin-bottom: 1.35rem; }
.novos-do-escritorio .icone { flex: none; color: var(--acento); }
.novos-do-escritorio__arquivo { min-width: 0; }

/* O nome do arquivo é o título da linha, e não mais um cabeçalho de coluna:
   na tabela comum o `th` da linha sai em caixa alta e cinza, como os do
   `thead`, e um título de guia longo vira uma faixa difícil de ler. No
   celular a ficha já o desenha assim. O título do lembrete, no painel do
   escritório, é a mesma coisa. */
.tabela-de-arquivos tbody th[scope="row"],
.tabela-de-lembretes tbody th[scope="row"] {
  background: none;
  color: var(--ink);
  font-size: .95rem;
  font-weight: 600;
  text-transform: none;
  letter-spacing: normal;
  white-space: normal;
}

/* A última linha não tem traço embaixo — a moldura da tabela já fecha ali —, e
   a regra comum só o tira das células `td`. */
.tabela-de-arquivos tbody tr:last-child th,
.tabela-de-lembretes tbody tr:last-child th { border-bottom: 0; }

/* O tipo, o tamanho, quem enviou e quando — ou a pasta —, embaixo do nome. */
.arquivo__detalhe {
  display: block;
  margin-top: .15rem;
  font-size: .8rem;
  font-weight: 400;
  color: var(--ink-fraco);
}

.acoes-da-linha {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: flex-end;
  gap: .4rem;
}

.acoes-da-linha form { margin: 0; }
.acoes-da-linha .botao { white-space: nowrap; }
.acoes-da-linha .campo select { padding-block: .3rem; font-size: .875rem; }

/* -------------------------------------------------------------- o envio */

.envio { margin-bottom: 1.35rem; }

/* Quanto do espaço já foi, logo acima do campo: o envio cabe inteiro ou não
   entra, e é melhor saber antes de escolher os arquivos. */
.envio__cota {
  margin: 0 0 1rem;
  font-size: .9rem;
  color: var(--ink-medio);
}

/* No limite, a explicação no lugar do formulário: o que impede o envio e,
   embaixo, o que fazer. A última linha encosta no fim do cartão, como o
   formulário encostaria. */
.envio__limite { margin: 0; }
.envio__limite p { margin: 0; }
.envio__limite p + p { margin-top: .35rem; }

/* ------------------------------------------------ a aba do escritório */

.secoes-do-perfil { margin-bottom: 1.35rem; }

/* A árvore à esquerda e a pasta à direita. No estreito, uma embaixo da
   outra: a árvore primeiro, porque é por ela que se escolhe a pasta. */
.documentos {
  display: grid;
  grid-template-columns: minmax(16rem, 21rem) minmax(0, 1fr);
  gap: 1.35rem;
  align-items: start;
}

@media (max-width: 64rem) {
  .documentos { grid-template-columns: minmax(0, 1fr); }
}

.documentos__arvore { padding-inline: 1rem; }

.documentos__cabecalho {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  justify-content: space-between;
  gap: .75rem 1rem;
  margin-bottom: 1.1rem;
}

.documentos__cabecalho .texto-apoio { margin: .25rem 0 0; }

/* ------------------------------------------------------------ os lembretes */
/* O prazo que o escritório deu, no topo da estante do cliente. A faixa à
   esquerda é a cor do estado — âmbar no dia de avisar, vermelho no atrasado,
   que é o que custa multa —, e o texto ao lado diz o mesmo: cor sozinha não é
   informação. */

.lembretes { margin-bottom: 1.35rem; }

.lembretes__lista {
  list-style: none;
  margin: 0;
  padding: 0;
  display: flex;
  flex-direction: column;
  gap: .6rem;
}

.lembrete {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-start;
  gap: .6rem 1rem;
  padding: .75rem .95rem;
  background: var(--surface);
  border: 1px solid var(--line);
  border-left: 3px solid var(--cor-do-lembrete, var(--line-forte));
  border-radius: var(--raio);
}

.lembrete--avisado  { --cor-do-lembrete: var(--aviso); }
.lembrete--atrasado { --cor-do-lembrete: var(--saida); }
.lembrete--feito    { --cor-do-lembrete: var(--acento); }

/* O texto ocupa a linha; o "Feito" desce inteiro para baixo dele no
   estreito, em vez de espremer o título. */
.lembrete__texto {
  flex: 1 1 16rem;
  min-width: 0;
  display: flex;
  flex-direction: column;
  gap: .2rem;
}

.lembrete__titulo { font-weight: 600; overflow-wrap: break-word; }

.lembrete__prazo { font-size: .875rem; color: var(--ink-medio); }
.lembrete--atrasado .lembrete__prazo { color: var(--saida); font-weight: 600; }

.lembrete__corpo { font-size: .9rem; color: var(--ink-medio); overflow-wrap: break-word; }
.lembrete__corpo p { margin: .15rem 0 0; }

.lembrete__guia {
  display: inline-flex;
  flex-wrap: wrap;
  align-items: center;
  gap: .35rem;
  margin-top: .2rem;
  font-size: .9rem;
}

.lembrete__guia .icone { flex: none; color: var(--acento); }

.lembrete__acoes { display: flex; align-items: center; gap: .5rem; margin-left: auto; }
.lembrete__acoes form { margin: 0; }

.lembretes__concluidos { margin-top: 1rem; }

.lembretes__concluidos > summary {
  cursor: pointer;
  width: fit-content;
  margin-bottom: .75rem;
  font-size: .875rem;
  font-weight: 600;
  color: var(--acento);
}

.lembretes__concluidos > summary:hover { color: var(--acento-forte); }

/* Do lado do escritório: os abertos do cliente, acima das pastas, e a guia no
   formulário, separada do resto por um fio — é um envio dentro do lembrete. */
.lembretes-do-perfil { margin-bottom: 1.35rem; }

.guia-do-lembrete {
  border-top: 1px solid var(--line);
  padding-top: .85rem;
}