/* app/assets/stylesheets/05_screens.css — excecoes por tela */

/* ---- calendario (FullCalendar) ---- */

/* Ancorado em `.fc`, NAO em `:root`: o FullCalendar injeta o CSS dele via CSSOM antes das
   nossas folhas e define as --fc-* no :root, e `:root` e `.fc` empatam em especificidade
   (0,1,0) — dependeria de ordem de origem. Custom property herda, entao definir no proprio
   elemento do calendario vence por proximidade na cascata. Medido no navegador em 07/08/2026.

   Isto e SOBREPOSICAO de variavel, nao reescrita: a lib continua dona do layout. */
.fc {
  --fc-border-color: var(--line);
  --fc-page-bg-color: var(--surface);
  --fc-neutral-bg-color: var(--bg);
  --fc-today-bg-color: color-mix(in srgb, var(--accent) 8%, transparent);
  --fc-now-indicator-color: var(--danger);
  --fc-event-bg-color: var(--accent);
  --fc-event-border-color: var(--accent);
  --fc-event-text-color: var(--surface);
  --fc-button-bg-color: var(--surface);
  --fc-button-border-color: var(--line);
  --fc-button-text-color: var(--ink);
  --fc-button-hover-bg-color: var(--bg);
  --fc-button-hover-border-color: var(--ink-faint);
  --fc-button-active-bg-color: var(--accent);
  --fc-button-active-border-color: var(--accent);
  --fc-small-font-size: var(--t2);
  font-family: var(--font-ui);
  font-size: var(--t3);
  background: var(--surface);
  border-radius: var(--radius-lg);
  padding: var(--s4);
}

/* A lib traz botao com raio e caixa-alta proprios; o resto (cor, borda, estado ativo) ja
   veio das variaveis acima. */
.fc .fc-button {
  border-radius: var(--radius);
  font-size: var(--t3);
  font-weight: 600;
  text-transform: none;
  box-shadow: none;
}
.fc .fc-button:focus-visible { outline: 2px solid var(--accent); outline-offset: 2px; }
.fc .fc-toolbar-title { font-family: var(--font-display); font-size: var(--t6); color: var(--ink); }
.fc .fc-col-header-cell-cushion,
.fc .fc-timegrid-axis-cushion,
.fc .fc-timegrid-slot-label-cushion { color: var(--ink-muted); text-decoration: none; }

/* Aula de 50 minutos ocupa pouca altura e o rotulo tem duas linhas (hora + ocupacao):
   em --t3 a segunda linha era cortada. */
.fc .fc-event-time,
.fc .fc-event-title { font-size: var(--t1); line-height: 1.2; }
/* Sem padding vertical: as duas linhas ja consomem toda a altura de uma aula de 50 min. */
.fc .fc-timegrid-event .fc-event-main { padding: 0 var(--s1); }

/* Agenda: classes emitidas por LessonCalendarEvent. O JSON diz o que a aula e, a cor mora aqui. */
.lesson--canceled { opacity: .55; text-decoration: line-through; }
.lesson--full {
  font-weight: 700;
  --fc-event-bg-color: var(--warm);
  --fc-event-border-color: var(--warm);
}

/* ---- painel da aula (turbo frame abaixo do calendario) ---- */

.lesson-panel { margin-top: var(--s5); display: flex; flex-direction: column; gap: var(--s4); }
.lesson-panel__header { display: flex; flex-direction: column; gap: var(--s1); }
.lesson-panel__meta { margin: 0; font-size: var(--t3); color: var(--ink-muted); }
.lesson-panel__status { color: var(--ink-muted); }
.lesson-panel__student { flex-wrap: wrap; gap: var(--s3); }
.lesson-panel__actions { display: flex; flex-wrap: wrap; align-items: center; gap: var(--s2); }
/* O painel e uma pilha de linhas de acao, e o `.inline-form` foi desenhado para o uso
   solto: traz `margin-top` proprio e `select { flex: 1 }`. Dentro do painel os dois
   desalinhavam — o margin empurrava a linha de remarcacao para baixo das de presenca, e o
   flex esticava o select de "Adicionar aluna" ate a borda enquanto o de remarcacao ficava
   pequeno. Aqui o espacamento vem do `gap` do painel e os campos tem largura de conteudo. */
.lesson-panel .inline-form { margin-top: 0; align-items: center; }
.lesson-panel .inline-form select,
.lesson-panel .inline-form input[type="text"] { flex: 0 1 auto; width: auto; }

.lesson-panel__footer {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  justify-content: space-between;
  gap: var(--s3);
  padding-top: var(--s3);
  border-top: 1px solid var(--line);
}

/* ---- Mensagens ---- */

/* O corpo da mensagem e o unico texto longo de uma tabela no sistema: sem limite ele
   rouba a largura das outras cinco colunas. */
.message-body {
  max-width: 22rem;
  color: var(--ink-muted);
  font-size: var(--t2);
}

/* ---- cancelamento em lote ---- */

.batch-cancellation__summary { margin: 0 0 var(--s3); font-size: var(--t4); max-width: var(--measure); }