/* Ajustes visuais do Gerador de Designacoes (complemento do Bootstrap 5) */

body {
  min-height: 100vh;
}

/* =========================================================================
   TABELA DA ESCALA

   As mesmas cores e os mesmos icones sao usados no PDF (ver
   app/services/tema.py e app/services/icones.py), para que o arquivo baixado
   seja igual ao que aparece na tela.

   Estrutura do cabecalho: UMA linha de <th>. O <th> de cada departamento faz
   colspan sobre as colunas dele e contem a "faixa" colorida — o rotulo do
   departamento em cima e as pilulas das funcoes embaixo. Foi assim que deu
   para pintar o degrade continuo por tras dos dois niveis: um fundo de CSS
   nao atravessa duas linhas de tabela.
   ========================================================================= */

:root {
  --cor-pagina: #faf8f5;   /* creme do fundo, igual ao do PDF */
  --gap-grupo: 3px;        /* meia-folga; dois lados vizinhos somam 6px */
  --gap-pilulas: 16px;     /* folga entre pilulas vizinhas dentro da faixa */
  --raio-bloco: 12px;
}

.area-escala {
  background: var(--cor-pagina);
  border: none;
}

/* Cabecalho da escala: titulo grande e periodo abaixo, como no PDF */
.escala-titulo {
  font-size: 1.55rem;
  font-weight: 700;
  color: #1f2937;
  margin-bottom: .1rem;
}

.escala-periodo {
  font-size: .92rem;
  color: #4b5563;
  text-transform: uppercase;
  letter-spacing: .04em;
}

.tabela-moderna {
  /* Colunas padronizadas: a largura vem do <colgroup>, e nao do conteudo.
     Sem isto, um nome comprido alarga a coluna dele e desalinha o resto. */
  table-layout: fixed;
  width: 100%;
  /* `separate` (e nao `collapse`) porque border-radius em <td> so funciona
     assim — e sao os cantos de baixo que fecham o bloco de cada departamento. */
  border-collapse: separate;
  border-spacing: 0;
  background: transparent;
}

.tabela-moderna th,
.tabela-moderna td {
  text-align: center;
  vertical-align: middle;
  border: none;
}

/* ---- Faixa colorida do departamento ----

   `height: 1px` NAO encolhe a celula: uma celula de tabela nunca fica menor
   que o conteudo dela, e todas as celulas da linha crescem ate a altura da
   mais alta. O que esse valor faz e dar a celula uma altura DECLARADA, que e
   a condicao para o `height: 100%` da faixa (abaixo) ter contra o que
   resolver. Com `height: 100%` aqui em vez de 1px, a conta era 100% de
   `auto` — ou seja, nada — e cada faixa continuava do tamanho do proprio
   texto: "Leitor do Estudo Biblico" quebra em tres linhas e deixava a faixa
   dos Leitores mais alta que as vizinhas. */
.tabela-moderna thead th {
  padding: 0;
  vertical-align: bottom;
  height: 1px;
}

/*
  As pilulas dividem a largura da faixa em partes iguais, mas isso sozinho
  NAO as alinha com as colunas do corpo: a faixa tem margem, padding e vaos
  proprios, e o erro se acumula coluna a coluna.

  Chamando W a largura de uma coluna, m a margem lateral da faixa, p o padding
  e g o vao entre pilulas, cada pilula mede W - g e o centro da pilula i cai em
  m + p + i*W + (W - g)/2. Para bater com o centro da coluna, (i + 1/2)*W, e
  preciso que  p = g/2 - m  — e o que o calc() abaixo garante. Mexer em
  --gap-pilulas ou --gap-grupo continua alinhado sozinho.
*/
.tabela-moderna .faixa {
  /* Estica ate a altura da celula (ver `height: 1px` acima) e distribui o
     espaco interno: rotulo colado no topo, pilulas coladas na base. */
  display: flex;
  flex-direction: column;
  justify-content: space-between;
  height: 100%;
  min-height: 100%;
  margin: 0 var(--gap-grupo);
  border-radius: var(--raio-bloco);
  background: linear-gradient(100deg, var(--grad-ini), var(--grad-fim));
  padding: 9px calc(var(--gap-pilulas) / 2 - var(--gap-grupo)) 10px;
}

.tabela-moderna .faixa-titulo {
  color: #fff;
  font-size: .68rem;
  font-weight: 700;
  letter-spacing: .09em;
  text-transform: uppercase;
  padding-bottom: 8px;
}

/* `align-items: stretch` iguala a altura das pilulas DENTRO de um mesmo
   departamento: "Indicador de Entrada" quebra em duas linhas e "1º Volante"
   em uma, mas as duas pilulas saem do mesmo tamanho. */
.tabela-moderna .faixa-pilulas {
  display: flex;
  gap: var(--gap-pilulas);
  align-items: stretch;
}

.tabela-moderna .faixa-pilulas .pilula {
  flex: 1 1 0;
  min-width: 0;
  height: 100%;
}

/* A coluna "Data" nao pertence a departamento nenhum: so a pilula branca,
   alinhada pela base com as demais. */
.tabela-moderna .celula-data-topo {
  /* Mesmo recuo das pilulas de dentro da faixa, para a de "Data" sair com a
     mesma largura e alinhada com a coluna. */
  padding: 0 calc(var(--gap-pilulas) / 2) 10px;
}

/* ---- Pilula (cabecalho de coluna) ---- */
.tabela-moderna .pilula {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 6px;
  padding: 8px 10px;
  border-radius: 10px;
  background: var(--pilula-bg, #fff);
  color: var(--pilula-texto, #374151);
  font-size: .72rem;
  font-weight: 700;
  line-height: 1.25;
  text-align: center;
}

.tabela-moderna .pilula i {
  font-size: .95rem;
  flex: 0 0 auto;
}

.tabela-moderna .pilula span {
  flex: 1 1 auto;
  min-width: 0;
  word-break: break-word;
}

.tabela-moderna .pilula-neutra {
  --pilula-bg: #fff;
  --pilula-texto: #374151;
  border: 1px solid #e5e1dc;
}

/* ---- Corpo ----
   Cada coluna carrega o tom do seu departamento; as bordas laterais na cor
   do fundo abrem a folga entre um bloco e outro, e a borda inferior branca
   e o fio entre as datas. */
.tabela-moderna tbody td {
  background: var(--cor-coluna, #fcfbfa);
  border-bottom: 2px solid #fff;
  padding: 1.05rem .5rem;
  font-size: .95rem;
  color: #1f2937;
  word-break: break-word;
}

.tabela-moderna tbody tr:nth-child(even) td {
  background: var(--cor-coluna-alt, #f5f3f0);
}

.tabela-moderna tbody td.inicio-grupo {
  border-left: var(--gap-grupo) solid var(--cor-pagina);
}

.tabela-moderna tbody td.fim-grupo {
  border-right: var(--gap-grupo) solid var(--cor-pagina);
}

/* Fecha o bloco de cada departamento com o canto arredondado de baixo */
.tabela-moderna tbody tr:last-child td {
  border-bottom: none;
}

.tabela-moderna tbody tr:last-child td.inicio-grupo {
  border-bottom-left-radius: var(--raio-bloco);
}

.tabela-moderna tbody tr:last-child td.fim-grupo {
  border-bottom-right-radius: var(--raio-bloco);
}

/* Coluna de data em duas linhas: o dia em destaque, o dia da semana apagado
   logo abaixo. Cabe na coluna estreita e cria hierarquia de leitura. */
.tabela-moderna .data-dia {
  display: block;
  font-weight: 700;
  color: #111827;
  font-size: .95rem;
  line-height: 1.3;
}

.tabela-moderna .data-semana {
  display: block;
  font-size: .68rem;
  font-weight: 600;
  letter-spacing: .06em;
  text-transform: uppercase;
  color: #9ca3af;
}

/* Vaga sem voluntario */
.tabela-moderna .celula-vazia {
  color: #dc2626;
  font-weight: 600;
  font-size: .8rem;
  letter-spacing: .03em;
}

/* Funcao que nao acontece naquele dia da semana.
   Fica apagada de proposito: nao e uma pendencia, e uma vaga inexistente. */
.tabela-moderna .celula-na {
  color: #b9b4b0;
  letter-spacing: .1em;
}

/* Na tela de edicao as celulas tem <select>, entao o respiro vertical e menor
   e o fundo fica neutro para os campos se destacarem. */
.tabela-edicao tbody td {
  padding: .5rem .35rem;
}

/* =========================================================================
   IMPRESSAO / PRINT DE TELA
   Tudo com a classe .no-print desaparece: navbar, botoes, alertas e o painel
   de estatisticas. Sobram apenas as tabelas da escala.
   ========================================================================= */
@media print {
  .no-print {
    display: none !important;
  }

  body {
    background: #fff !important;
  }

  main.container {
    padding: 0 !important;
    max-width: 100% !important;
  }

  .area-escala {
    border: none !important;
    box-shadow: none !important;
  }

  /* Sem isto o navegador descarta os fundos coloridos ao imprimir e a escala
     sai em preto e branco, perdendo a separacao por departamento. */
  .area-escala,
  .tabela-moderna .faixa,
  .tabela-moderna .pilula,
  .tabela-moderna tbody td {
    -webkit-print-color-adjust: exact;
    print-color-adjust: exact;
  }

  /* Evita quebrar uma linha da escala entre duas paginas */
  .tabela-moderna tr {
    page-break-inside: avoid;
  }

  /* Cada visao comeca numa folha */
  .area-escala {
    page-break-after: always;
  }
  .area-escala:last-of-type {
    page-break-after: auto;
  }
}