/* =====================================================================
   calendario.css — tema do calendário dos campos de data (Flatpickr)

   Ver docs/specs/core/calendario-nos-campos-de-data.md.
   Só tokens de albergue-tokens.css. O escopo é `.seletor-data`, classe
   posta pelo calendario.js; as classes do Flatpickr não se editam fora dele.
   ===================================================================== */

.flatpickr-calendar.seletor-data {
    /* Acima do .app-modal (3000), dos modais das oportunidades (1000) e do quadro de mérito (900/901). */
    z-index: 3100;
    max-width: calc(100vw - 16px);
    background: var(--color-surface);
    color: var(--color-text);
    font-family: var(--font-body);
    border: 1px solid var(--color-border);
    border-radius: var(--radius);
    box-shadow: var(--shadow-soft);
}

.seletor-data.arrowTop::before,
.seletor-data.arrowTop::after,
.seletor-data.arrowBottom::before,
.seletor-data.arrowBottom::after {
    display: none;
}

.seletor-data .flatpickr-months .flatpickr-month,
.seletor-data .flatpickr-current-month,
.seletor-data .flatpickr-current-month input.cur-year,
.seletor-data .flatpickr-current-month .flatpickr-monthDropdown-months,
.seletor-data span.flatpickr-weekday {
    color: var(--color-text);
    fill: var(--color-text);
    font-family: var(--font-body);
}

.seletor-data .flatpickr-current-month .flatpickr-monthDropdown-months {
    background: var(--color-surface);
}

.seletor-data .flatpickr-months .flatpickr-prev-month,
.seletor-data .flatpickr-months .flatpickr-next-month {
    color: var(--color-text);
    fill: var(--color-text);
}

.seletor-data .flatpickr-months .flatpickr-prev-month:hover svg,
.seletor-data .flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--color-acao);
}

.seletor-data .flatpickr-day {
    color: var(--color-text);
    border-radius: var(--radius);
}

.seletor-data .flatpickr-day.prevMonthDay,
.seletor-data .flatpickr-day.nextMonthDay {
    color: var(--color-text-faint);
}

.seletor-data .flatpickr-day:hover,
.seletor-data .flatpickr-day.prevMonthDay:hover,
.seletor-data .flatpickr-day.nextMonthDay:hover {
    background: var(--color-categoria-caminheiro-light);
    border-color: var(--color-categoria-caminheiro-light);
}

.seletor-data .flatpickr-day:focus {
    outline: 2px solid var(--color-foco-anel);
    outline-offset: 1px;
}

/* O flatpickr dá ao foco e ao «hoje» sob rato/foco um fundo cinzento com
   texto próprio (branco no «hoje»): sem isto o dia fica ilegível, nos dois
   temas (E2E da US26.3, CA11). Os dias escolhidos mantêm o seu estilo. */
.seletor-data .flatpickr-day:focus:not(.selected),
.seletor-data .flatpickr-day.today:hover:not(.selected),
.seletor-data .flatpickr-day.today:focus:not(.selected) {
    background: var(--color-categoria-caminheiro-light);
    border-color: var(--color-acao);
    color: var(--color-text);
}

.seletor-data .flatpickr-day.today {
    border-color: var(--color-acao);
}

.seletor-data .flatpickr-day.selected,
.seletor-data .flatpickr-day.selected:hover,
.seletor-data .flatpickr-day.selected.prevMonthDay,
.seletor-data .flatpickr-day.selected.nextMonthDay {
    background: var(--color-acao);
    border-color: var(--color-acao);
    color: var(--color-surface);
}