/*
|--------------------------------------------------------------------------
| Adaptador: FullCalendar 6 no visual do Design System
|--------------------------------------------------------------------------
|
| Só dentro de .ds. Usa as variáveis --fc-* da própria biblioteca, então
| funciona no tema claro e no escuro sem sobrescrever a estrutura.
|
|   <div class="ds-calendario" id="calendar"></div>
|
| Eventos: rótulo curto; o nome completo vai no tooltip (title).
| Clicar num dia = criar; clicar num evento = abrir.
|
*/

.ds .fc {
    --fc-border-color: var(--ds-color-border-subtle);
    --fc-page-bg-color: var(--ds-color-surface);
    --fc-neutral-bg-color: var(--ds-color-surface-subtle);
    --fc-neutral-text-color: var(--ds-color-text-muted);
    --fc-today-bg-color: var(--ds-color-primary-subtle);

    --fc-button-text-color: var(--ds-color-on-secondary);
    --fc-button-bg-color: var(--ds-color-surface);
    --fc-button-border-color: var(--ds-color-border-control);
    --fc-button-hover-bg-color: var(--ds-color-surface-hover);
    --fc-button-hover-border-color: var(--ds-color-border-control);
    --fc-button-active-bg-color: var(--ds-color-secondary-active);
    --fc-button-active-border-color: var(--ds-color-border-strong);

    --fc-event-bg-color: var(--ds-color-primary-subtle);
    --fc-event-border-color: var(--ds-color-primary-subtle-border);
    --fc-event-text-color: var(--ds-color-primary-active);

    color: var(--ds-color-text);

    font: var(--ds-text-body-sm);
}

/* Barra do calendário: título do mês + navegação */
.ds .fc .fc-toolbar.fc-header-toolbar {
    margin-bottom: var(--ds-space-4);
}

.ds .fc .fc-toolbar-title {
    font: var(--ds-text-section-title);
    letter-spacing: var(--ds-text-section-title-tracking);
    text-transform: none;
}

/* "setembro de 2026" → "Setembro de 2026" */
.ds .fc .fc-toolbar-title::first-letter {
    text-transform: uppercase;
}

.ds .fc .fc-button {
    height: var(--ds-control-height-sm);
    padding: 0 var(--ds-space-3);

    border-radius: var(--ds-radius-md);

    font: var(--ds-text-label);
    text-transform: none;

    box-shadow: none;
}

.ds .fc .fc-button:focus-visible,
.ds .fc .fc-button-primary:not(:disabled).fc-button-active:focus,
.ds .fc .fc-button-primary:not(:disabled):active:focus {
    outline: var(--ds-focus-outline);
    outline-offset: 1px;

    box-shadow: none;
}

.ds .fc .fc-button:disabled {
    opacity: .5;
}

/* Cabeçalho dos dias da semana */
.ds .fc .fc-col-header-cell {
    background: var(--ds-color-surface-subtle);
}

.ds .fc .fc-col-header-cell-cushion {
    padding: 8px 4px;

    color: var(--ds-color-text-secondary);

    font: var(--ds-text-label);
    text-decoration: none;
    text-transform: capitalize;
}

.ds .fc .fc-daygrid-day-number {
    padding: 6px 8px;

    color: var(--ds-color-text-secondary);

    font-variant-numeric: tabular-nums;
    text-decoration: none;
}

.ds .fc .fc-day-today .fc-daygrid-day-number {
    color: var(--ds-color-primary-active);
    font-weight: var(--ds-font-weight-semibold);
}

.ds .fc .fc-day-other .fc-daygrid-day-number {
    color: var(--ds-color-text-disabled);
}

/* Hoje: cor do DS (o CSS do FullCalendar fixa um amarelo) */
.ds .fc .fc-daygrid-day.fc-day-today {
    background-color: var(--ds-color-primary-subtle);
}

/* Dia clicável (criar ação naquele dia) */
.ds .fc .fc-daygrid-day {
    cursor: pointer;
}

.ds .fc .fc-daygrid-day:hover .fc-daygrid-day-frame {
    background: var(--ds-color-surface-hover);
}

/* Eventos: chip compacto */
.ds .fc .fc-daygrid-event {
    margin: 1px 4px;
    padding: 1px 6px;

    border-radius: var(--ds-radius-sm);

    font: 500 12px/18px var(--ds-font);

    cursor: pointer;
}

.ds .fc .fc-daygrid-dot-event {
    color: var(--ds-color-text);
}

.ds .fc .fc-daygrid-dot-event:hover {
    background: var(--ds-color-surface-hover);
}

.ds .fc .fc-daygrid-event-dot {
    border-color: var(--ds-color-primary);
}

.ds .fc .fc-daygrid-more-link {
    color: var(--ds-color-text-link);

    font: var(--ds-text-caption);
}

.ds .fc a:hover {
    text-decoration: none;
}