/*
 * O seletor de intervalo de datas do painel de filtros.
 *
 * Nada aqui inventa linguagem visual: o gatilho copia a caixa dos outros campos do
 * painel (mesma borda, mesmo raio, mesma altura), e o calendário usa o âmbar da marca só
 * nas duas PONTAS do período — o miolo fica num tom fraco do mesmo âmbar, porque marcar
 * dez dias com a cor de ação transformaria o sinal em decoração.
 *
 * O painel flutua em `position: absolute` dentro de um `relative` próprio, e por isso o
 * contêiner do filtro não pode ter `overflow: hidden` — conferido no navegador antes de
 * fechar. `z-index: 30` fica acima da barra de controles da tabela (25) e abaixo dos
 * modais do Filament.
 */

.apostolos-intervalo {
    position: relative;
}

.apostolos-intervalo-gatilho {
    display: flex;
    width: 100%;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    border-radius: var(--radius-lg);
    border: 1px solid var(--gray-300);
    background-color: transparent;
    padding: calc(var(--spacing) * 1.5) calc(var(--spacing) * 3);
    font-size: var(--text-sm);
    line-height: 1.5rem;
    color: var(--gray-950);
    cursor: pointer;
    text-align: start;
}

.dark .apostolos-intervalo-gatilho {
    border-color: var(--gray-700);
    color: var(--white);
}

.apostolos-intervalo-gatilho:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 2px;
}

/* Sem período, o texto é placeholder e segue o contraste dos outros campos vazios. */
.apostolos-intervalo-vazio {
    color: var(--gray-500);
}

.dark .apostolos-intervalo-vazio {
    color: var(--gray-400);
}

.apostolos-intervalo-icone {
    width: 1.25rem;
    height: 1.25rem;
    flex-shrink: 0;
    color: var(--gray-500);
}

/* ------------------------------------------------------------------ */
/* O painel do calendário                                              */
/* ------------------------------------------------------------------ */

.apostolos-cal {
    position: absolute;
    z-index: 30;
    inset-inline-start: 0;
    top: calc(100% + calc(var(--spacing) * 1.5));
    width: 18rem;
    border-radius: var(--radius-xl);
    border: 1px solid var(--gray-200);
    background-color: var(--white);
    padding: calc(var(--spacing) * 3);
    box-shadow:
        0 10px 15px -3px rgb(0 0 0 / 0.1),
        0 4px 6px -4px rgb(0 0 0 / 0.1);
}

.dark .apostolos-cal {
    border-color: var(--gray-700);
    background-color: var(--gray-900);
    box-shadow:
        0 10px 15px -3px rgb(0 0 0 / 0.5),
        0 4px 6px -4px rgb(0 0 0 / 0.4);
}

/* Perto da borda direita da tela o painel abre para a esquerda, senão ele sairia do
   viewport — os filtros da direita são os últimos da grade de cinco colunas. */
.apostolos-intervalo-fim .apostolos-cal {
    inset-inline-start: auto;
    inset-inline-end: 0;
}

.apostolos-cal-topo {
    display: flex;
    align-items: center;
    justify-content: space-between;
    margin-bottom: calc(var(--spacing) * 3);
}

.apostolos-cal-mes {
    font-size: var(--text-sm);
    font-weight: 600;
    color: var(--gray-950);
}

.dark .apostolos-cal-mes {
    color: var(--white);
}

.apostolos-cal-seta {
    display: flex;
    height: 1.75rem;
    width: 1.75rem;
    align-items: center;
    justify-content: center;
    border-radius: var(--radius-lg);
    border: none;
    background-color: transparent;
    color: var(--gray-500);
    cursor: pointer;
    transition: background-color 75ms ease;
}

.apostolos-cal-seta:hover {
    background-color: var(--gray-100);
    color: var(--gray-950);
}

.dark .apostolos-cal-seta:hover {
    background-color: rgb(255 255 255 / 0.05);
    color: var(--white);
}

.apostolos-cal-seta:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: 1px;
}

.apostolos-cal-grade {
    display: grid;
    grid-template-columns: repeat(7, minmax(0, 1fr));
    gap: 2px;
}

.apostolos-cal-inicial {
    padding-block: calc(var(--spacing) * 1);
    text-align: center;
    font-size: var(--text-xs);
    font-weight: 600;
    color: var(--gray-500);
}

.apostolos-cal-dia {
    height: 2rem;
    border: none;
    border-radius: var(--radius-lg);
    background-color: transparent;
    font-size: var(--text-sm);
    color: var(--gray-950);
    cursor: pointer;
    transition: background-color 75ms ease;
}

.dark .apostolos-cal-dia {
    color: var(--white);
}

.apostolos-cal-dia:hover {
    background-color: var(--gray-100);
}

.dark .apostolos-cal-dia:hover {
    background-color: rgb(255 255 255 / 0.05);
}

.apostolos-cal-dia:focus-visible {
    outline: 2px solid var(--primary-600);
    outline-offset: -2px;
}

/* Dia de outro mês: continua clicável, só não disputa a leitura do mês corrente. */
.apostolos-cal-dia-fora {
    color: var(--gray-400);
}

.dark .apostolos-cal-dia-fora {
    color: var(--gray-600);
}

/* O miolo do período: o mesmo âmbar, fraco. Marcar dez dias com a cor de ação faria o
   sinal virar enfeite — é a Regra do Sinal do DESIGN.md. */
.apostolos-cal-dia-meio {
    border-radius: 0;
    background-color: var(--primary-50);
    color: var(--primary-900);
}

.dark .apostolos-cal-dia-meio {
    background-color: rgb(255 255 255 / 0.06);
    color: var(--white);
}

/* As pontas: cheias, porque são as duas datas que a pessoa escolheu. */
.apostolos-cal-dia-ponta,
.apostolos-cal-dia-ponta:hover {
    background-color: var(--primary-600);
    color: var(--white);
    font-weight: 600;
}

.apostolos-cal-rodape {
    margin-top: calc(var(--spacing) * 3);
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: calc(var(--spacing) * 2);
    border-top: 1px solid var(--gray-200);
    padding-top: calc(var(--spacing) * 2);
}

.dark .apostolos-cal-rodape {
    border-top-color: var(--gray-700);
}

.apostolos-cal-resumo {
    font-size: var(--text-xs);
    color: var(--gray-500);
}

@media (prefers-reduced-motion: reduce) {
    .apostolos-cal-seta,
    .apostolos-cal-dia {
        transition: none;
    }
}


/* O limpador compartilhado (definido no apostolos-grid.css) encosta no ícone de
   calendário, que ocupa aqui o lugar do chevron dos campos de lista. */
.apostolos-intervalo:has(.apostolos-campo-limpar) .apostolos-intervalo-gatilho {
    padding-inline-end: calc(var(--spacing) * 11);
}