/* Ajustes finos que o Tailwind (via CDN) não cobre por padrão */

body {
  -webkit-font-smoothing: antialiased;
}

#tabelaEscala th.sticky,
#tabelaEscala td.sticky {
  z-index: 1;
}

#tabelaEscala {
  border-spacing: 0;
}

::selection {
  background-color: #E4D3B4;
}

input[type="date"]::-webkit-calendar-picker-indicator {
  cursor: pointer;
}

/* Mais espaço apenas na página da equipe; PNG/PDF usam export_utils.py. */
.escala-page {
  width: 100%;
  max-width: 1600px;
}

/* Identidade visual do cabeçalho da escala */
.escala-hero h1 { line-height: 1.05; }
#tabelaEscala thead th, #tabelaEscala tbody td { font-weight: 700; }
#tabelaEscala tbody td:first-child { font-weight: 800; }
@media (max-width: 900px) {
  .escala-hero h1 { font-size: 1.65rem; }
}


/* Escala compacta: colunas fixas e fotos maiores em todas as equipes */
#tabelaEscala {
  width: max-content !important;
  min-width: max-content !important;
  table-layout: fixed;
}

#tabelaEscala th:not(:first-child),
#tabelaEscala td:not(:first-child) {
  width: 220px;
  min-width: 220px;
  max-width: 220px;
}

#tabelaEscala th:first-child,
#tabelaEscala td:first-child {
  width: 150px;
  min-width: 150px;
  max-width: 150px;
}

#tabelaEscala .celula-escala {
  min-height: 52px;
}

@media (max-width: 640px) {
  #tabelaEscala th:not(:first-child),
  #tabelaEscala td:not(:first-child) {
    width: 210px;
    min-width: 210px;
    max-width: 210px;
  }
  #tabelaEscala th:first-child,
  #tabelaEscala td:first-child {
    width: 138px;
    min-width: 138px;
    max-width: 138px;
  }
}

/* Até cinco missas cabem na tela do computador sem rolagem horizontal.
   Em telas menores e meses com mais missas, mantém-se a rolagem. */
@media screen and (min-width: 1024px) {
  #tabelaEscala.escala-ajustada {
    width: 100% !important;
    min-width: 100% !important;
  }

  #tabelaEscala.escala-ajustada col,
  #tabelaEscala.escala-ajustada th,
  #tabelaEscala.escala-ajustada td {
    width: auto !important;
    min-width: 0 !important;
    max-width: none !important;
  }

  #tabelaEscala.escala-ajustada col:first-child,
  #tabelaEscala.escala-ajustada th:first-child,
  #tabelaEscala.escala-ajustada td:first-child:not([colspan]) {
    width: 180px !important;
  }

  #tabelaEscala.escala-ajustada thead th > div {
    flex-wrap: wrap;
  }
}