/* Passagem de pasta em lote (public/passagem-pasta.js). A passagem de uma EOP
   isolada vive na faixa lateral da ficha e tem folha própria em
   styles/eop-handover.css: esta é a gaveta que passa a carteira inteira.

   A lista pode ter dezenas de empreitadas: rola dentro da própria caixa, para
   os botões de executar ficarem sempre à vista sem obrigar a percorrer a
   carteira toda. */
/* A lista rola dentro de si própria, e é isso que a torna traiçoeira num
   portátil: a roda do rato fica presa nela, a gaveta por trás não anda, e o
   botão de executar - que está mais abaixo - nunca aparece. Num ecrã de 1080
   sobrava espaço e ninguém dava por isso.
   Duas correções: a altura passa a ceder ao ecrã (`vh`) em vez de ser fixa, e
   a barra de ação cola-se ao fundo do que está visível. O botão fica sempre
   ao alcance, tenha o ecrã a altura que tiver. */
.handoverBatchGroups {
  margin: 12px 0;
  display: grid;
  gap: 12px;
}

/* Um quadro por gestor que recebe. O cabeçalho diz quem é e quantas leva, e a
   caixa dele escolhe o grupo inteiro. */
.handoverBatchGroup {
  border: 1px solid var(--line);
  border-radius: var(--r-md);
  overflow: hidden;
}

.handoverBatchGroupHead {
  display: flex;
  align-items: center;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  background: var(--subtle);
  cursor: pointer;
  line-height: 1.35;
}

.handoverBatchGroupHead input { flex: none; }

.handoverBatchGroupWho {
  display: flex;
  flex-direction: column;
  min-width: 0;
  flex: 1 1 auto;
}

.handoverBatchGroupRole {
  color: var(--muted);
  font-size: var(--txt-xs);
  font-weight: 700;
  letter-spacing: .04em;
  text-transform: uppercase;
}

.handoverBatchGroupWho b {
  font-size: var(--txt-sm);
  overflow-wrap: anywhere;
}

.handoverBatchGroupCount {
  flex: none;
  color: var(--muted);
  font-size: var(--txt-xs);
  white-space: nowrap;
}

/* Com um destino só o cabeçalho não acrescenta nada, e o quadro volta a ser a
   lista de sempre. A exceção é não haver ninguém nomeado, que é precisamente o
   que convém dizer - e aí o cabeçalho fica. */
.handoverBatchGroup.is-unico .handoverBatchGroupHead { display: none; }

/* A LISTA CEDE AO ECRÃ, E NO DESKTOP NÃO SE FECHA EM SI PRÓPRIA.
   Rolava dentro de uma caixa de 340px mesmo num ecrã de 1080, o que deixava
   metade da gaveta em branco e obrigava a percorrer trinta e sete empreitadas
   por uma janela de seis. Acima dos 900px a caixa deixa de rolar: a gaveta
   rola por ela, os quadros mostram-se inteiros, e o botão de executar continua
   ao alcance porque a barra que o leva está colada ao fundo do que está
   visível. No telemóvel mantém-se a caixa própria, que é o que impede a lista
   de empurrar tudo o resto para fora do ecrã. */
.handoverBatchList {
  max-height: min(340px, 38vh);
  overflow-y: auto;
  overscroll-behavior: contain;
}

@media (min-width: 900px) {
  .handoverBatchList {
    max-height: none;
    overflow-y: visible;
  }
}

.handoverBatchNav {
  margin: 0 0 14px;
  padding: 10px;
  display: flex;
  align-items: center;
  gap: 8px;
  overflow-x: auto;
  border: 1px solid var(--line);
  border-radius: var(--r-lg);
  background: var(--panel);
  scrollbar-width: thin;
}

.handoverBatchNavLabel {
  padding: 0 4px;
  flex: none;
  color: var(--muted);
  font-size: var(--txt-xs);
  font-weight: 700;
  text-transform: uppercase;
}

.handoverBatchNavItem {
  min-height: 36px;
  padding: 6px 8px 6px 11px;
  display: inline-flex;
  align-items: center;
  gap: 8px;
  flex: none;
  border: 1px solid var(--line);
  border-radius: var(--r-pill);
  background: var(--subtle);
  color: var(--ink);
  font: inherit;
  font-size: var(--txt-xs);
  font-weight: 650;
  cursor: pointer;
}

.handoverBatchNavItem:hover { border-color: var(--accent); color: var(--accent); }
.handoverBatchNavItem b {
  min-width: 22px;
  height: 22px;
  padding: 0 6px;
  display: grid;
  place-items: center;
  border-radius: var(--r-pill);
  background: var(--panel);
  color: var(--accent);
  font-size: var(--txt-xs);
}

.handoverBatchSection { scroll-margin-top: 82px; }

/* A PERGUNTA QUE ABRE O PAINEL, e a largura que ela não pode ter.
 *
 * Um `select` mede-se pela opção mais comprida, e estas são frases inteiras -
 * "Cessação de funções na U/E/O, continuando ao serviço - rotação interna,
 * deslocamento, missão, cargo ou curso". Sem teto, o campo saía da gaveta pela
 * direita e ia parar por cima do que está por trás. O `flabel` de origem é
 * `inline-flex`, e nele o rótulo e o campo dividem uma linha que também não
 * cabe; aqui empilham-se, e o campo toma a largura da caixa e mais nenhuma.
 *
 * O `min-width: 0` é o que faz o `width: 100%` valer: `select.inl` traz um
 * mínimo de 130px que, sozinho, não chegava para transbordar - mas é a regra
 * que impede um `select` de encolher abaixo do seu conteúdo em contentores
 * apertados. A lista aberta continua a mostrar o texto todo, porque quem a
 * desenha é o sistema e não esta folha. */
.handoverBatchMotivo {
  margin: 14px 0 6px;
  max-width: 100%;
}

.handoverBatchMotivo .flabel {
  display: grid;
  gap: 6px;
  width: 100%;
  align-items: start;
}

.handoverBatchMotivo select {
  width: 100%;
  max-width: 100%;
  min-width: 0;
}

/* As que ficam com o gestor efetivo. Discreta por ser uma explicação, e não uma
   segunda lista para escolher: quem a abre quer conferir, não decidir. */
.handoverBatchRetidas {
  margin: 10px 0 4px;
  font-size: var(--txt-md);
}

.handoverBatchRetidas > summary {
  cursor: pointer;
  color: var(--muted);
  padding: 4px 0;
}

.handoverBatchRetidas > summary:hover { color: var(--ink); }

.handoverBatchRetidas ul {
  margin: 6px 0 0;
  max-height: 220px;
  overflow-y: auto;
  font-size: var(--txt-sm);
  color: var(--muted);
}

.handoverBatchRetidas li { padding: 2px 0; }

.handoverBatchItem {
  display: flex;
  align-items: flex-start;
  gap: 10px;
  padding: 9px 12px;
  border-bottom: 1px solid var(--line);
  cursor: pointer;
  line-height: 1.4;
}

.handoverBatchItem:last-child {
  border-bottom: 0;
}

.handoverBatchItem:hover {
  background: var(--subtle);
}

.handoverBatchItem input {
  margin-top: 3px;
  flex: none;
}

.handoverBatchItem small {
  display: block;
  color: var(--muted);
  font-size: var(--txt-xs);
}

/* Os dois botões de seleção pertencem à lista, não à execução: ficam colados
   a ela e discretos. */
.handoverBatchSelectors {
  margin-top: -2px;
}

/* A barra que executa é outra coisa, e tem de se ler como tal: separada por
   um traço, com respiração por cima, e colada ao fundo do que está visível
   para não fugir por baixo do ecrã num portátil. */
.handoverBatchRun {
  position: sticky;
  bottom: -14px;
  margin: 16px -16px -14px;
  padding: 12px 16px 14px;
  border-top: 1px solid var(--line);
  background: var(--panel);
  border-radius: 0 0 var(--r-lg) var(--r-lg);
}

.handoverBatchState {
  margin-top: 10px;
  color: var(--muted);
  font-size: var(--txt-xs);
  line-height: 1.55;
}

.handoverBatchState p {
  margin: 0 0 6px;
}