/* GRADE DE DOCENTES: a tabela grande de cabeçalho e coluna fixos, células de slot
   e tooltip da aula. NÃO cobre a grade semanal 5x5 (grade-semanal.css). */

/* ==========================================================================
   ESTILIZAÇÃO DA ABA: GRADE DE DOCENTES (TABELA GIGANTE STICKY)
   ========================================================================== */

.filter-bar {
  display: flex;
  align-items: center;
  justify-content: space-between;
  flex-shrink: 0;
  margin-bottom: var(--esp-3);
  background: var(--fundo-superficie);
  border: 1px solid var(--borda);
  padding: var(--esp-2) var(--esp-3);
  border-radius: var(--radius-md);
}

.grid-table-container {
  flex: 1;
  min-height: 0;
  overflow-x: hidden;
  overflow-y: auto;
  scrollbar-gutter: stable;
  border: 1px solid var(--borda);
  border-radius: var(--radius-lg);
  background: var(--fundo-superficie);
  box-shadow: var(--shadow-main);
  position: relative;
}

.grid-table {
  border-collapse: separate;
  border-spacing: 0;
  width: 100%;
  font-size: var(--fonte-xs);
  table-layout: fixed;
}

/* Forçar larguras das colunas do Grid */

.cell-docente {
  width: 180px;
}

.day-group {
  text-align: center;
  font-weight: 700;
  font-size: var(--fonte-xs);
  background: var(--camada-sutil);
  border-bottom: 1px solid var(--borda);
  padding: var(--esp-2);
  letter-spacing: 1px;
}

.grid-table th,
.grid-table td {
  border-right: 1px solid var(--borda);
  border-bottom: 1px solid var(--borda);
  /* folga mínima: a fonte da grade subiu para 12px e a coluna de horário tem
     menos de 40px, então cada pixel de padding vira texto cortado no cabeçalho */
  padding: var(--esp-1);
  text-align: center;
}

/* Colunas de separação entre dias (coluna vazia do Excel) */

.col-separator {
  width: 15px;
  background: var(--fundo-separador);
  padding: 0 !important;
  border-right: 2px solid var(--borda-separador) !important;
  border-left: 2px solid var(--borda-separador) !important;
}

/* Sticky Headers da Tabela */

.grid-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* No claro o cabeçalho perdeu o contraste que tinha contra o fundo escuro,
   então ganhou fundo próprio mais cinza e uma sombra que separa da rolagem */

.grid-table tr.header-days th {
  position: sticky;
  top: 0;
  background: var(--fundo-cabecalho-tabela);
  z-index: 10;
  color: var(--texto);
  border-bottom: 2px solid var(--borda);
}

.grid-table tr.header-hours th {
  position: sticky;
  top: 28px; /* altura da linha header-days: 18px de texto + 8px de padding + 2px de borda */
  background: var(--fundo-cabecalho-horas);
  z-index: 10;
  color: var(--texto-suave);
  font-weight: 600;
  padding: var(--esp-1);
  border-bottom: 2px solid var(--borda);
  box-shadow: var(--sombra-tabela);
}

/* Coluna Docente Sticky à esquerda */

.grid-table th.sticky-column,
.grid-table td.sticky-column {
  position: sticky;
  left: 0;
  background: var(--fundo-coluna-fixa);
  z-index: 8;
  text-align: left;
  font-weight: 600;
  padding-left: var(--esp-3);
  border-right: 2px solid var(--borda);
}

.grid-table tr:hover td.sticky-column {
  background: var(--fundo-coluna-fixa-hover) !important;
}

.grid-table tr.header-days th.sticky-column {
  z-index: 12; /* Superior a todos no canto superior esquerdo */
}

/* Nome do docente na coluna fixa. Substitui o style inline que o app.js cravava
   com #fff, que sumia sobre o fundo branco do tema claro. */

.docente-nome {
  font-weight: 700;
  color: var(--texto);
}

.docente-turno {
  font-size: var(--fonte-xs);
  color: var(--texto-suave);
  margin-top: 4px;
}

/* Estilo das Células de Grade de Docente */

.docente-row {
  transition: var(--transition-fast);
}

.docente-row:hover td {
  background: var(--camada-sutil);
}

/* Célula do Slot de Aula */

.schedule-cell {
  height: 68px; /* subiu de 62px porque a fonte mínima do slot foi para 12px */
  cursor: pointer;
  transition: var(--transition-fast);
  vertical-align: middle;
  border-radius: var(--radius-sm);
}

.schedule-cell:hover {
  background: var(--info-camada) !important;
}

/* Renderização Interna do Slot */

.slot-container {
  display: flex;
  flex-direction: column;
  justify-content: center;
  height: 100%;
  gap: 2px;
  line-height: 1.25; /* três linhas de 12px só cabem na célula com a entrelinha apertada */
}

.slot-turma {
  font-weight: 800;
  color: var(--texto);
  font-size: var(--fonte-xs);
}

.slot-subinfo {
  font-size: var(--fonte-xs);
  color: var(--texto-suave);
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}

.slot-sala {
  font-weight: 500;
  color: var(--info);
}

/* Estado Vazio */

.schedule-cell.empty {
  background: transparent;
}

.schedule-cell.empty .slot-turma {
  color: var(--texto-fantasma);
  font-weight: 400;
}

/* Slot com Conflito */

.schedule-cell.has-conflict {
  background: var(--alerta-camada) !important;
  border: 1px solid var(--alerta-borda) !important;
  position: relative;
}

.schedule-cell.has-conflict:hover {
  background: var(--alerta-camada-forte) !important;
}

/* Tooltip do Slot */

.schedule-cell {
  position: relative;
}

.schedule-cell::after {
  content: attr(data-tooltip);
  position: absolute;
  bottom: 115%;
  left: 50%;
  transform: translateX(-50%) scale(0.9);
  background: var(--fundo-tooltip);
  color: var(--texto-tooltip);
  padding: 6px var(--esp-3);
  border-radius: var(--radius-sm);
  font-size: var(--fonte-xs);
  white-space: pre-wrap;
  width: 180px;
  z-index: 100;
  opacity: 0;
  pointer-events: none;
  transition: transform 0.2s, opacity 0.2s;
  box-shadow: var(--sombra-tooltip);
  border: 1px solid var(--borda);
}

.schedule-cell:hover::after {
  opacity: 1;
  transform: translateX(-50%) scale(1);
}
/* Nas colunas da ponta direita (fim de SEXTA), centralizar jogaria metade do
   tooltip para fora da tabela — e com overflow-x:hidden no container não tem
   como rolar até lá para ver. Aqui ele cresce para a esquerda em vez de para
   os dois lados. */
.grid-table td.schedule-cell:nth-last-child(-n+3)::after {
  left: auto;
  right: 0;
  transform: scale(0.9);
  transform-origin: right bottom;
}
.grid-table td.schedule-cell:nth-last-child(-n+3):hover::after {
  transform: scale(1);
}

/* Mesmo raciocínio nas primeiras colunas (início de SEGUNDA), pela borda
   esquerda — a coluna Docente é sticky, mas o tooltip ainda pode nascer
   cortado se o menu lateral estiver expandido. */
.grid-table td.schedule-cell:nth-child(-n+2)::after {
  left: 0;
  transform: scale(0.9);
  transform-origin: left bottom;
}
.grid-table td.schedule-cell:nth-child(-n+2):hover::after {
  transform: scale(1);
}

/* --------------------------------------------------------------------------
   CÉLULA MESCLADA DE BLOCO
   Um bloco de N aulas vira uma célula com colspan=N, como a célula mesclada da
   planilha. Só a largura muda: a ALTURA da linha continua a mesma, senão as
   linhas de docente deixariam de se alinhar entre si.
   -------------------------------------------------------------------------- */
.schedule-cell.celula-bloco .slot-container {
  /* Com 4 colunas de largura o texto cabe inteiro; o corte com reticências
     existia só porque a célula tinha ~40px. */
  line-height: 1.35;
}

.schedule-cell.celula-bloco .slot-turma,
.schedule-cell.celula-bloco .slot-subinfo {
  /* Solta o nowrap herdado do slot estreito e deixa o texto usar a largura. */
  white-space: normal;
  overflow: visible;
  text-overflow: clip;
  padding: 0 var(--esp-2);
}

.schedule-cell.celula-bloco .slot-turma {
  font-size: var(--fonte-sm);
}

/* A preparação não disputa ambiente nem turma; um fundo discreto a separa das
   aulas sem competir com o âmbar do conflito. */
.schedule-cell.celula-preparacao {
  background: var(--camada-sutil);
}

.schedule-cell.celula-preparacao .slot-turma {
  color: var(--texto-suave);
  letter-spacing: 0.5px;
}