/**
 * Tema do flatpickr no SGAD.
 *
 * Carrega sobre o `flatpickr.min.css` do CDN. O flatpickr publica um tema
 * escuro proprio (`dark.css`), mas ele exigiria trocar o <link> a cada clique
 * no seletor de tema. Aqui o dark e so um bloco `[data-theme="dark"]`, que
 * acompanha o atributo do <html> na hora, sem recarregar folha nenhuma.
 *
 * O calendario e renderizado em `document.body`, fora do container da tela,
 * entao os seletores precisam ser globais.
 *
 * Ver "Campos de data (REGRA)" no CLAUDE.md.
 */

.flatpickr-calendar {
    border-radius: 12px;
    border: 1px solid #e5e7eb;
    box-shadow: 0 16px 40px rgba(15, 23, 42, 0.16);
    font-size: 0.875rem;
}

.flatpickr-day.selected,
.flatpickr-day.selected:hover,
.flatpickr-day.startRange,
.flatpickr-day.endRange {
    background: var(--sgad-primary, #4f46e5);
    border-color: var(--sgad-primary, #4f46e5);
    color: #fff;
}

.flatpickr-day.today {
    border-color: var(--sgad-primary, #4f46e5);
}

/* ------------------------------------------------------------------
   Dark mode
   Tema explicito: `data-theme="dark"` no <html> (public/js/theme.js remove o
   atributo no tema claro). Nao usar prefers-color-scheme — ver sgad-form.css.
   ------------------------------------------------------------------ */

[data-theme="dark"] .flatpickr-calendar {
    background: #1e2433;
    border-color: rgba(255, 255, 255, 0.12);
    box-shadow: 0 20px 44px rgba(0, 0, 0, 0.45);
    color: #e5e7eb;
}

/* A setinha que liga o calendario ao input precisa seguir o fundo, senao fica
   um triangulo branco sobre o painel escuro. */
[data-theme="dark"] .flatpickr-calendar.arrowTop::before,
[data-theme="dark"] .flatpickr-calendar.arrowTop::after {
    border-bottom-color: #1e2433;
}

[data-theme="dark"] .flatpickr-calendar.arrowBottom::before,
[data-theme="dark"] .flatpickr-calendar.arrowBottom::after {
    border-top-color: #1e2433;
}

[data-theme="dark"] .flatpickr-months,
[data-theme="dark"] .flatpickr-month,
[data-theme="dark"] .flatpickr-current-month,
[data-theme="dark"] .flatpickr-weekdays,
[data-theme="dark"] span.flatpickr-weekday {
    background: #1e2433;
    color: #e5e7eb;
    fill: #e5e7eb;
}

[data-theme="dark"] .flatpickr-current-month input.cur-year,
[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months {
    background: #1e2433;
    color: #e5e7eb;
}

[data-theme="dark"] .flatpickr-current-month .flatpickr-monthDropdown-months option {
    background: #1e2433;
    color: #e5e7eb;
}

[data-theme="dark"] .flatpickr-months .flatpickr-prev-month svg,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month svg {
    fill: #e5e7eb;
}

[data-theme="dark"] .flatpickr-months .flatpickr-prev-month:hover svg,
[data-theme="dark"] .flatpickr-months .flatpickr-next-month:hover svg {
    fill: var(--sgad-primary, #818cf8);
}

[data-theme="dark"] .flatpickr-day {
    color: #e5e7eb;
}

[data-theme="dark"] .flatpickr-day:hover,
[data-theme="dark"] .flatpickr-day:focus {
    background: rgba(255, 255, 255, 0.08);
    border-color: transparent;
}

[data-theme="dark"] .flatpickr-day.prevMonthDay,
[data-theme="dark"] .flatpickr-day.nextMonthDay,
[data-theme="dark"] .flatpickr-day.flatpickr-disabled,
[data-theme="dark"] .flatpickr-day.flatpickr-disabled:hover {
    color: rgba(229, 231, 235, 0.35);
}

[data-theme="dark"] .flatpickr-day.selected,
[data-theme="dark"] .flatpickr-day.selected:hover {
    background: var(--sgad-primary, #6366f1);
    border-color: var(--sgad-primary, #6366f1);
    color: #fff;
}

/* Seletor de hora (data-sgad-data="datetime"). */
[data-theme="dark"] .flatpickr-time,
[data-theme="dark"] .flatpickr-time input,
[data-theme="dark"] .flatpickr-time .flatpickr-time-separator,
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm {
    background: #1e2433;
    color: #e5e7eb;
}

[data-theme="dark"] .flatpickr-time input:hover,
[data-theme="dark"] .flatpickr-time input:focus,
[data-theme="dark"] .flatpickr-time .flatpickr-am-pm:hover {
    background: rgba(255, 255, 255, 0.08);
}

[data-theme="dark"] .flatpickr-time .numInputWrapper span {
    border-color: rgba(255, 255, 255, 0.12);
}