/* ---------------------------------------------------------------------------
   Coluna de filtros das Agendas (erp_agendas e as outras telas do `gen_page`:
   conciliacao, pedidos, recebiveis) no tema novo.

   O cartao, a borda e a tipografia base vem do `filtros_solic_v2`
   (`tema_solicitacoes_v2.css`), o mesmo das Solicitacoes. Aqui entra so o que e desta
   coluna: os radios e checklists do Bootstrap, a data do `dcc`, a hierarquia e os
   botoes. Os ids e componentes sao os de antes — nenhum callback sabe desta folha.

   Monta em `gen_page` (`layouts/erp/common_layouts.py`), `get_dt_layout` e
   `get_options_agendas` (`utils/erp/utils_agendas.py`).
   --------------------------------------------------------------------------- */

/* ============================================================ ROTULOS */

.filtros_agendas_v2 .rotulo_filtro_agendas_v2 {
    display: block;
    margin: 0 0 8px;
    font: 700 12px Manrope, sans-serif;
    color: var(--v-verde-escuro);
    letter-spacing: .6px;
    text-transform: uppercase;
}

.filtros_agendas_v2 .cabecalho_filtro_agendas_v2 {
    align-items: center;
    margin-bottom: 8px;
}

.filtros_agendas_v2 .cabecalho_filtro_agendas_v2 .rotulo_filtro_agendas_v2 {
    margin: 0;
}

.filtros_agendas_v2 .chevron_filtro_agendas_v2 {
    display: flex;
    color: var(--v-verde-escuro);
    cursor: pointer;
    transition: transform .15s ease;
}

.filtros_agendas_v2 .chevron_filtro_agendas_v2.fechado_v2 {
    transform: rotate(180deg);
}

.filtros_agendas_v2 .hr_filtros_agendas_v2 {
    margin: 16px 0;
    border-top: 1px solid var(--v-tab-divisoria);
    opacity: 1;
}

.filtros_agendas_v2 .nota_filtro_agendas_v2 {
    font: 500 11.5px/1.4 Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
}

/* ============================================================ RADIOS E CHECKLISTS */

.filtros_agendas_v2 .form-check {
    min-height: 0;
    margin-bottom: 6px;
}

.filtros_agendas_v2 .form-check-inline {
    margin-right: 14px;
}

.filtros_agendas_v2 .form-check-input {
    width: 17px;
    height: 17px;
    margin-top: 1px;
    border: 1.5px solid var(--v-borda-controle);
    cursor: pointer;
}

.filtros_agendas_v2 .form-check-label {
    font: 600 13px/1.45 Manrope, sans-serif;
    color: var(--v-tab-texto);
    cursor: pointer;
}

/* Opcao desmarcada um tom abaixo, como nos filtros de Solicitacoes. */
.filtros_agendas_v2 .form-check:has(.form-check-input:not(:checked)) .form-check-label {
    color: var(--v-texto-inativo);
}

.filtros_agendas_v2 .acoes_filtro_agendas_v2 {
    display: flex;
    align-items: center;
    gap: 6px;
    margin-top: 4px;
}

.filtros_agendas_v2 .acao_filtro_agendas_v2 {
    margin: 0;
    font: 600 12px Manrope, sans-serif;
    color: var(--v-verde-escuro);
    cursor: pointer;
}

.filtros_agendas_v2 .acao_filtro_agendas_v2:hover {
    text-decoration: underline;
}

.filtros_agendas_v2 .sep_acao_filtro_agendas_v2 {
    margin: 0;
    font: 500 12px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
}

/* ============================================================ DATA */

/* O `DatePickerSingle` e do `dcc`: quem desenha a caixa e o `.DateInput_input` do
   react-dates (mesma receita do `tema_extratos_v2.css`). */
.filtros_agendas_v2 .linha_data_agendas_v2 {
    display: flex;
    align-items: center;
    gap: 8px;
}

.filtros_agendas_v2 .linha_data_agendas_v2 .SingleDatePicker,
.filtros_agendas_v2 .linha_data_agendas_v2 .SingleDatePickerInput,
.filtros_agendas_v2 .linha_data_agendas_v2 .DateInput {
    flex: 1;
    width: 100%;
    min-width: 0;
}

.filtros_agendas_v2 .linha_data_agendas_v2 .SingleDatePickerInput {
    border: none;
    background: transparent;
}

.filtros_agendas_v2 .linha_data_agendas_v2 .DateInput_input {
    box-sizing: border-box;
    width: 100%;
    height: 42px;
    padding: 0 12px;
    border: 1px solid var(--v-borda-input);
    border-radius: 10px;
    font: 600 13px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

.filtros_agendas_v2 .linha_data_agendas_v2 .DateInput_input__focused {
    border-color: var(--v-verde-escuro);
}

/* ============================================================ CAMPOS */

.filtros_agendas_v2 .form-control,
.filtros_agendas_v2 .input-group-text {
    height: 42px;
    border-color: var(--v-borda-input);
    font: 600 13px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

.filtros_agendas_v2 .form-control {
    border-radius: 10px;
}

.filtros_agendas_v2 .input-group > .form-control {
    border-radius: 10px 0 0 10px;
}

.filtros_agendas_v2 .input-group-text {
    border-radius: 0 10px 10px 0;
    background: var(--v-tab-cabecalho);
    color: var(--v-tab-texto-sub);
}

/* ============================================================ HIERARQUIA */

.filtros_agendas_v2 div.rowOptions {
    gap: 4px;
    height: 36px;
}

.filtros_agendas_v2 div.margin_rowOptions {
    margin-bottom: 6px;
}

.filtros_agendas_v2 div.container_title_options {
    margin: 0;
    border: 1px solid var(--v-borda-clara);
    border-radius: 8px;
    background: #fff;
}

.filtros_agendas_v2 div.container_title_options label {
    margin: 0;
    font: 700 13px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

/* No lugar dos PNGs verde e vermelho: contorno neutro e a seta na cor do tema. Subir e
   descer nao sao certo e errado, e o par verde/vermelho dizia isso. */
.filtros_agendas_v2 .seta_hierarquia_v2 {
    display: flex;
    flex: none;
    align-items: center;
    justify-content: center;
    box-sizing: border-box;
    width: 30px;
    height: 100%;
    border: 1px solid var(--v-borda-input);
    border-radius: 8px;
    background: #fff;
    color: var(--v-verde-escuro);
    cursor: pointer;
}

.filtros_agendas_v2 .seta_hierarquia_v2:hover {
    border-color: var(--v-borda-tint);
    background: var(--v-tint);
}

.filtros_agendas_v2 .remover_hierarquia_v2 {
    color: var(--v-erro-icone);
}

.filtros_agendas_v2 .remover_hierarquia_v2:hover {
    border-color: var(--v-erro-borda);
    background: var(--v-erro-fundo);
}

/* `hidden` e classe do portal (`display: none`); a regra de cima, mais especifica, a
   venceria e o X apareceria fora do modo Editar. */
.filtros_agendas_v2 .seta_hierarquia_v2.hidden {
    display: none;
}

/* ============================================================ BOTOES */

.filtros_agendas_v2 .botoes_filtros_agendas_v2 {
    display: flex;
    flex-direction: column;
    gap: 8px;
    margin-top: 4px;
}

.filtros_agendas_v2 .btn_ok_agendas_v2.btn,
.filtros_agendas_v2 .botoes_filtros_agendas_v2 .btn {
    height: 42px;
    border-radius: 10px;
    font: 800 13.5px Manrope, sans-serif;
}

.filtros_agendas_v2 .btn_ok_agendas_v2.btn {
    flex: none;
    padding: 0 18px;
}

.filtros_agendas_v2 .btn_ok_agendas_v2.btn,
.filtros_agendas_v2 .btn_aplicar_agendas_v2.btn {
    border-color: var(--v-verde-escuro);
    background: var(--v-verde-escuro);
    color: #fff;
}

.filtros_agendas_v2 .btn_ok_agendas_v2.btn:hover,
.filtros_agendas_v2 .btn_aplicar_agendas_v2.btn:hover {
    border-color: var(--v-marca-hover);
    background: var(--v-marca-hover);
}

.filtros_agendas_v2 .btn_resetar_agendas_v2.btn {
    border: 1px solid var(--v-borda-input);
    background: #fff;
    color: var(--v-tab-texto);
}

.filtros_agendas_v2 .btn_resetar_agendas_v2.btn:hover {
    border-color: var(--v-verde-escuro);
    color: var(--v-verde-escuro);
}

/* ============================================================ TABELA DE RESUMO

   Uma linha por no da hierarquia, montada sob demanda (`gen_resumo_layout_sob_demanda`,
   `utils/erp/utils_agendas.py`). Cada linha e um grid so — rotulo + um periodo por coluna
   —, e o grid vem de variaveis que o Python poe no cartao (`--n-periodos`,
   `--rotulo-resumo`, `--min-periodo-resumo`): as linhas que nascem dentro dos colapsos
   herdam as mesmas colunas, sem precisar casar altura com uma coluna vizinha.

   O rotulo e `sticky` na rolagem horizontal. Por isso o fundo mora numa variavel
   (`--fundo-linha`) que todas as celulas usam: o rotulo precisa de fundo opaco, e o hover
   tem de pintar ele junto com os valores. */

.tabela_resumo_agenda_v2 {
    overflow-x: auto;
    border: 1px solid var(--v-tab-divisoria);
    border-radius: 10px;
    background: #fff;
}

.corpo_resumo_agenda_v2 {
    min-width: calc(var(--rotulo-resumo) + var(--n-periodos) * var(--min-periodo-resumo));
}

.linha_resumo_agenda_v2 {
    --fundo-linha: #fff;
    display: grid;
    grid-template-columns: var(--rotulo-resumo) repeat(var(--n-periodos), minmax(var(--min-periodo-resumo), 1fr));
    border-bottom: 1px solid var(--v-tab-divisoria);
}

.linha_resumo_agenda_v2 > div {
    background: var(--fundo-linha);
}

.linha_resumo_agenda_v2:not(.cabecalho_resumo_agenda_v2):hover {
    --fundo-linha: var(--v-tab-hover);
}

/* Niveis de baixo um tom abaixo: da para ler onde um grupo termina sem linha extra. */
.nivel_2_resumo_agenda_v2 { --fundo-linha: #FBFCFC; }
.nivel_3_resumo_agenda_v2,
.nivel_4_resumo_agenda_v2,
.nivel_5_resumo_agenda_v2 { --fundo-linha: #F8FAF9; }

.corpo_resumo_agenda_v2 > div:last-child > .linha_resumo_agenda_v2 {
    border-bottom: none;
}

/* ---- cabecalho ---- */

.cabecalho_resumo_agenda_v2 {
    --fundo-linha: var(--v-tab-cabecalho);
}

/* Com a classe da linha na frente: a regra do `.rotulo_resumo_agenda_v2`, mais abaixo,
   empataria e venceria pela ordem. */
.cabecalho_resumo_agenda_v2 .cabecalho_rotulo_resumo_agenda_v2 {
    font: 700 12px Manrope, sans-serif;
    color: var(--v-verde-escuro);
    letter-spacing: .6px;
    text-transform: uppercase;
}

.periodo_resumo_agenda_v2 {
    font: 800 12.5px Manrope, sans-serif;
    color: var(--v-verde-escuro);
}

.datas_periodo_resumo_agenda_v2 {
    margin-top: 2px;
    font: 500 10.5px Manrope, sans-serif;
    color: var(--v-tab-texto-sub);
}

/* ---- rotulo ---- */

.rotulo_resumo_agenda_v2 {
    position: sticky;
    left: 0;
    z-index: 1;
    display: flex;
    align-items: center;
    gap: 6px;
    min-width: 0;
    padding: 10px 12px 10px calc(12px + var(--nivel, 0) * 18px);
    border-right: 1px solid var(--v-tab-divisoria);
    font: 600 13px Manrope, sans-serif;
    color: var(--v-tab-texto);
}

.nivel_1_resumo_agenda_v2 .rotulo_resumo_agenda_v2 {
    font-weight: 800;
}

.texto_rotulo_resumo_agenda_v2 {
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}

.clicavel_resumo_agenda_v2 {
    cursor: pointer;
    user-select: none;
}

.clicavel_resumo_agenda_v2:hover .texto_rotulo_resumo_agenda_v2 {
    color: var(--v-verde-escuro);
}

.chevron_resumo_agenda_v2 {
    display: inline-flex;
    flex: none;
    width: 16px;
    color: var(--v-verde-escuro);
    transition: transform .15s ease;
}

.chevron_resumo_agenda_v2.aberto_v2 {
    transform: rotate(90deg);
}

.chevron_resumo_agenda_v2.vazio_v2 {
    visibility: hidden;
}

.ponto_status_v2 {
    flex: none;
    width: 8px;
    height: 8px;
    border-radius: 50%;
}

.status_livre_v2 { background: var(--v-verde-escuro); }
.status_bloqueado_v2 { background: #8FA39C; }
.status_auto_v2 { background: var(--v-aviso-icone); }

/* ---- valores ---- */

.valor_resumo_agenda_v2 {
    display: flex;
    flex-direction: column;
    align-items: flex-end;
    justify-content: center;
    padding: 10px 20px;
    font: 600 13px Manrope, sans-serif;
    font-variant-numeric: tabular-nums;
    color: var(--v-tab-texto);
    white-space: nowrap;
}

.zero_resumo_agenda_v2 {
    color: #A9B7B2;
}

/* ---- total ---- */

.total_resumo_agenda_v2 {
    --fundo-linha: var(--v-tab-cabecalho);
}

.total_resumo_agenda_v2 .valor_resumo_agenda_v2,
.total_resumo_agenda_v2 .rotulo_resumo_agenda_v2 {
    font-weight: 800;
}

/* ============================================================ DIAS / INICIO (DIARIO)

   Os dois campos do "Tipo de visualizacao: Diario", lado a lado. O "Inicio" usa a mesma
   caixa da data de referencia (`linha_data_agendas_v2`, acima). */

.filtros_agendas_v2 .linha_periodo_agendas_v2 {
    display: flex;
    gap: 8px;
    margin-bottom: 6px;
}

.filtros_agendas_v2 .campo_periodo_agendas_v2 {
    flex: 1;
    min-width: 0;
}

.filtros_agendas_v2 .campo_periodo_agendas_v2:first-child {
    flex: 0 0 72px;
}