/**
 * Grade de horários — [pnl_oss_grade]
 *
 * Arquivo próprio, e não dentro do CSS dos formulários, porque a página de
 * horários não tem formulário nenhum: a folha dos formulários só é
 * enfileirada pelos shortcodes de formulário, e a grade saía sem estilo.
 *
 * Ordem importa neste arquivo. As cores de programa ficam no FIM de
 * propósito: elas e o fundo padrão têm a mesma especificidade, e quem vem
 * depois vence. Com o padrão no fim, a legenda inteira ficava cinza.
 */

/* --- Moldura e rolagem --------------------------------------------------- */

.pnl-oss-grade__rolagem {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  /* Cantos arredondados só recortam o conteúdo com o overflow declarado. */
  border-radius: var(--gb-radius, 8px);
}

/*
 * `separate` e não `collapse`, de propósito.
 *
 * Com `border-collapse: collapse` o navegador funde as bordas das células e
 * o fundo de uma célula fixa (`position: sticky`) deixa de ser pintado de
 * forma confiável — as aulas passavam POR BAIXO da coluna de horário ao
 * rolar no celular, que é o vazamento de cor à esquerda. Com `separate`,
 * cada célula pinta o próprio fundo e a coluna fixa tapa o que passa.
 */
.pnl-oss-grade__tabela {
  width: 100%;
  min-width: 640px;
  border-collapse: separate;
  border-spacing: 0;
}

.pnl-oss-grade__tabela th,
.pnl-oss-grade__tabela td {
  border-right: 1px solid var(--gb-border, rgba(255, 255, 255, .10));
  border-bottom: 1px solid var(--gb-border, rgba(255, 255, 255, .10));
  padding: 10px 12px;
  text-align: center;
  vertical-align: middle;
  background: var(--gb-surface, #242424);
}

.pnl-oss-grade__tabela tr > *:last-child { border-right: 0; }
.pnl-oss-grade__tabela tbody tr:last-child > * { border-bottom: 0; }

/* --- Cabeçalho ----------------------------------------------------------- */

.pnl-oss-grade__tabela thead th {
  font-family: var(--gb-font-display, Oswald), sans-serif;
  text-transform: uppercase;
  letter-spacing: .04em;
  color: var(--gb-fg, #F8F8F8);
  background: var(--gb-card, #1B1B1B);
}

/* --- Coluna do horário, fixa --------------------------------------------- */

/*
 * É a referência que diz de que aula se está falando quando o resto anda
 * para o lado. Fundo sólido e z-index acima das células comuns: sem os dois,
 * o conteúdo aparece por baixo dela.
 */
.pnl-oss-grade__tabela tbody th {
  position: sticky;
  left: 0;
  z-index: 2;
  color: var(--gb-muted, #A4A4A4);
  font-weight: 600;
  white-space: nowrap;
  background: var(--gb-surface, #242424);
}

.pnl-oss-grade__tabela thead th:first-child {
  position: sticky;
  left: 0;
  z-index: 3;
  background: var(--gb-card, #1B1B1B);
}

/* --- Aulas --------------------------------------------------------------- */

.pnl-oss-grade__aula {
  display: block;
  padding: 6px 8px;
  border-radius: var(--gb-radius-sm, 6px);
  font-size: 13px;
  line-height: 1.3;
  color: var(--gb-on-primary, #FCFCFC);
  background: var(--gb-prog-outro, #4C5A63);
}

.pnl-oss-grade__aula + .pnl-oss-grade__aula { margin-top: 6px; }

/* --- Legenda ------------------------------------------------------------- */

/*
 * O Divi marca `ul` com disco em `#left-area ul` e `.et-l--body ul`. Um id
 * vence qualquer quantidade de classes, então a regra precisa carregar o id
 * também — senão a legenda sai com marcadores no meio das pílulas.
 */
#left-area ul.pnl-oss-grade__legenda,
.et-l--body ul.pnl-oss-grade__legenda,
.entry-content ul.pnl-oss-grade__legenda,
.pnl-oss-grade ul.pnl-oss-grade__legenda {
  display: flex;
  flex-wrap: wrap;
  gap: 8px;
  list-style: none;
  list-style-type: none;
  margin: 16px 0 4px;
  padding: 0;
}

#left-area ul.pnl-oss-grade__legenda > li,
.et-l--body ul.pnl-oss-grade__legenda > li,
.entry-content ul.pnl-oss-grade__legenda > li,
.pnl-oss-grade ul.pnl-oss-grade__legenda > li {
  list-style: none;
  margin: 0;
  padding: 4px 10px;
}

.pnl-oss-grade__legenda > li::marker { content: ''; }

.pnl-oss-grade__legenda-item {
  border-radius: var(--gb-radius-sm, 6px);
  font-size: 11px;
  letter-spacing: .02em;
  color: var(--gb-on-primary, #FCFCFC);
  background: var(--gb-prog-outro, #4C5A63);
}

/* --- Cores por programa --------------------------------------------------
 *
 * No fim do arquivo de propósito: mesma especificidade que os padrões acima,
 * e é a ordem que decide. Valem para a aula na tabela e para a pílula da
 * legenda ao mesmo tempo — é o que faz a legenda servir para alguma coisa.
 * ---------------------------------------------------------------------- */

.pnl-oss-grade__aula--gb1      { background: var(--gb-prog-gb1, #DF2625); }
.pnl-oss-grade__aula--gb2      { background: var(--gb-prog-gb2, #5A30B9); }
.pnl-oss-grade__aula--kids     { background: var(--gb-prog-kids, #009C3F); }
.pnl-oss-grade__aula--feminino { background: var(--gb-prog-fem, #ED68AE); }
.pnl-oss-grade__aula--nogi     { background: var(--gb-prog-nogi, #2E7D8F); }
.pnl-oss-grade__aula--defesa   { background: var(--gb-prog-defesa, #8C6A2B); }

.gb-schedule__vazio { color: var(--gb-muted, #A4A4A4); }

/* --- Celular ------------------------------------------------------------- */

@media (max-width: 640px) {
  .pnl-oss-grade__dia-longo { display: none; }
  .pnl-oss-grade__dia-curto { display: inline; }
  .pnl-oss-grade__tabela { min-width: 520px; }
  .pnl-oss-grade__tabela th,
  .pnl-oss-grade__tabela td { padding: 8px; }
  .pnl-oss-grade__aula { font-size: 12px; }
  .pnl-oss-grade__legenda-item { font-size: 10px; }
}