/*
 * Página "Agenda Comercial" e o bloco compacto do calendário na
 * Dashboard. FullCalendar já injeta seu próprio <style> na carga (ver
 * fullcalendar.js) — aqui só o layout ao redor (filtros, moldura do
 * calendário) e os poucos ajustes de tema escuro que o FullCalendar não
 * cobre sozinho. Mesmo racional de compra-analise.css: bundle CSS
 * publicado à parte, então cores em valores fixos.
 */

/*
 * Os 4 filtros do topo agora são um Schema do Filament (Select do
 * pacote, não <select> nativo) — ver AgendaComercial::filtrosForm(). O
 * <select> nativo tinha o popup de opções sempre em tema claro (branco),
 * porque esse popup é desenhado pelo navegador e CSS normal não o
 * alcança; nem color-scheme resolvia de forma confiável. O Select do
 * Filament renderiza a própria lista, então segue o tema do painel
 * sozinho e não precisa de estilo aqui — só a margem do container.
 */
.agenda-comercial__filtros {
    margin-bottom: 1rem;
}

.agenda-comercial__legenda {
    display: flex;
    flex-wrap: wrap;
    gap: 0.25rem 1rem;
    margin-bottom: 1rem;
    font-size: 0.8125rem;
    color: var(--app-secondary);
}

html.dark .agenda-comercial__legenda {
    color: var(--app-secondary);
}

.agenda-comercial__legenda-item {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    white-space: nowrap;
}

.agenda-comercial__legenda-bolinha {
    width: 0.625rem;
    height: 0.625rem;
    border-radius: 9999px;
    flex-shrink: 0;
}

/* Legenda ao lado do título "Calendário comercial" (Dashboard) — mais
   compacta, sem a margem inferior usada na página cheia da Agenda. */
.agenda-comercial__legenda--compacta {
    margin-bottom: 0;
    margin-left: auto;
    font-size: 0.75rem;
    gap: 0.125rem 0.75rem;
}

.agenda-comercial__calendario {
    background-color: var(--app-surface);
    border-radius: 0.75rem;
    border: 1px solid var(--app-border);
    padding: 1rem;
}

html.dark .agenda-comercial__calendario {
    background-color: var(--app-subtle);
    border-color: var(--app-border);
}

/* --- Bloco compacto na Dashboard --- */

.executive-dashboard .agenda-comercial__calendario--compacto {
    padding: 0.75rem;
}

/* Tema escuro: FullCalendar usa a paleta clara por padrão nas bordas de
   grade/texto — sobrescreve só o essencial pra não destoar do painel. */
html.dark .fc {
    --fc-border-color: rgb(255 255 255 / 0.1);
    --fc-page-bg-color: transparent;
    --fc-neutral-bg-color: rgb(255 255 255 / 0.05);
    --fc-list-event-hover-bg-color: rgb(255 255 255 / 0.05);
    color: var(--app-text);
}

html.dark .fc .fc-button {
    background-color: var(--app-subtle);
    border-color: var(--app-border);
    color: #e4e4e7;
}

html.dark .fc .fc-button:hover {
    background-color: var(--app-subtle);
}

html.dark .fc .fc-button-primary:not(:disabled).fc-button-active {
    background-color: var(--app-subtle);
}

html.dark .fc .fc-daygrid-day-number,
html.dark .fc .fc-col-header-cell-cushion {
    color: var(--app-text);
}

html.dark .fc .fc-day-today {
    background-color: var(--app-accent-soft);
}

/*
 * Visão semana/dia (grade de horário) desenha o evento como um bloco
 * cheio, preenchido com a cor do tipo (corHexDoTipo() no back-end) — sem
 * uma cor de texto explícita aqui, o FullCalendar usa a cor padrão dele
 * (pensada pra fundo claro), ilegível em cima de fundo colorido. A
 * maioria das cores da paleta (flatuicolors.com/palette/defo) é clara/
 * média demais pro branco render bem — texto escuro é o padrão (maior
 * contraste calculado via luminância WCAG, ver precisaTextoClaro() no
 * back-end); só os 2 tipos com fundo realmente escuro (Follow-up roxo,
 * Outro cinza-chumbo) ganham a classe .agenda-evento--texto-claro pra
 * virar branco. .fc-daygrid-dot-event (visão mês: bolinha + texto, fundo
 * nunca colorido) fica de fora de propósito — lá o texto usa a cor
 * normal do painel (clara/escura conforme o tema), nunca fixa.
 */
.fc-timegrid-event .fc-event-title,
.fc-timegrid-event .fc-event-time,
.fc-daygrid-block-event .fc-event-title,
.fc-daygrid-block-event .fc-event-time {
    color: #1c1c1c;
}

.fc-timegrid-event.agenda-evento--texto-claro .fc-event-title,
.fc-timegrid-event.agenda-evento--texto-claro .fc-event-time,
.fc-daygrid-block-event.agenda-evento--texto-claro .fc-event-title,
.fc-daygrid-block-event.agenda-evento--texto-claro .fc-event-time {
    color: var(--app-text);
}

/*
 * Evento com desfecho já registrado (Finalizado/Cancelado/Não
 * compareceu, ver classNames em paraFullCalendar()) fica visualmente
 * apagado e riscado — sem isso, marcar um evento como concluído não
 * mudava nada na cor/aparência dele no calendário (só na tela de
 * edição), dando a impressão de que nada tinha acontecido. Opacidade +
 * risco funcionam igual nas duas visões (mês: bolinha; semana/dia:
 * bloco cheio), sem precisar de regra separada por view.
 */
.fc-event.agenda-evento--finalizado {
    opacity: 0.55;
}

.fc-event.agenda-evento--finalizado .fc-event-title {
    text-decoration: line-through;
}