/* ─────────────────────────────────────────────────────────────
   AgriFlow — Filtro do cabeçalho: botão sólido no appbar + popover
   ancorado logo abaixo dele. Dashboard, Funil, Clientes, Histórico
   e Relatórios compartilham exatamente este componente.
   ───────────────────────────────────────────────────────────── */

.af-filter {
    position: relative;
    flex: 0 0 auto;
    display: flex;
    align-items: center;
}

/* ── Botão do cabeçalho ───────────────────────────────────── */
/* Appbar é verde escuro no desktop: botão branco sólido, sem sutileza. */
.af-filter-trigger {
    position: relative;
    display: inline-flex;
    align-items: center;
    gap: 8px;
    height: 38px;
    padding: 0 16px;
    box-sizing: border-box;
    border: 1.5px solid #fff;
    border-radius: 10px;
    background: #fff;
    color: #163832;
    font-family: 'Inter', sans-serif;
    font-size: 13px;
    font-weight: 800;
    letter-spacing: .01em;
    white-space: nowrap;
    cursor: pointer;
    box-shadow: 0 1px 3px rgba(0, 0, 0, .18);
    -webkit-tap-highlight-color: transparent;
    transition: background .16s, border-color .16s, color .16s, box-shadow .16s;
}

.af-filter-trigger:hover { background: #F4F0E6; border-color: #F4F0E6; }
.af-filter-trigger:focus-visible { outline: 2px solid #C8A227; outline-offset: 2px; }

/* Aberto: dourado da marca — não há dúvida de qual botão abriu o painel. */
.af-filter.is-open .af-filter-trigger {
    background: #C8A227;
    border-color: #C8A227;
    color: #1C2B27;
}

.af-filter-funil {
    width: 15px;
    height: 15px;
    flex-shrink: 0;
}

/* Bolinha discreta: só aparece quando existe filtro aplicado */
.af-filter-dot {
    position: absolute;
    top: -5px;
    right: -5px;
    width: 11px;
    height: 11px;
    border-radius: 50%;
    background: #C8A227;
    border: 2px solid #163832;
    box-sizing: border-box;
}

.af-filter.is-open .af-filter-dot { background: #163832; border-color: #C8A227; }
.af-filter-dot[hidden] { display: none; }
/* Com número dentro (filters.js conta os campos ativos) a bolinha vira um
   selo: mesma cor, mesmo canto, largura pelo texto. */
.af-filter-dot.is-num {
    width: auto;
    min-width: 17px;
    height: 17px;
    top: -8px;
    right: -8px;
    padding: 0 4px;
    border-radius: 9px;
    font: 700 10px/13px 'Inter', sans-serif;
    color: #163832;
    text-align: center;
}
.af-filter.is-open .af-filter-dot.is-num { color: #C8A227; }

/* ── Popover ──────────────────────────────────────────────── */
.af-filter-panel {
    position: absolute;
    top: calc(100% + 14px);
    right: 0;
    z-index: 300;
    width: min(520px, calc(100vw - 32px));
    box-sizing: border-box;
    padding: 15px 18px 17px;
    background: #fff;
    border: 1px solid rgba(22, 56, 50, .10);
    border-radius: 14px;
    box-shadow: 0 18px 44px rgba(22, 56, 50, .20), 0 3px 10px rgba(22, 56, 50, .07);
    opacity: 0;
    visibility: hidden;
    transform: translateY(-8px) scale(.985);
    transform-origin: top right;
    transition: opacity .17s ease, transform .17s cubic-bezier(.4, 0, .2, 1), visibility .17s;
}

/* Bico apontando para o botão — é o que amarra o painel ao gatilho */
.af-filter-panel::before {
    content: '';
    position: absolute;
    top: -7px;
    right: 28px;
    width: 12px;
    height: 12px;
    background: #fff;
    border-left: 1px solid rgba(22, 56, 50, .10);
    border-top: 1px solid rgba(22, 56, 50, .10);
    border-radius: 3px 0 0 0;
    transform: rotate(45deg);
}

.af-filter.is-open .af-filter-panel {
    opacity: 1;
    visibility: visible;
    transform: none;
}

.af-filter-head {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: 10px;
    margin-bottom: 14px;
}

.af-filter-head-lbl {
    font-family: 'Barlow Condensed', sans-serif;
    font-weight: 800;
    font-size: 15px;
    letter-spacing: .09em;
    text-transform: uppercase;
    color: #163832;
}

.af-filter-close {
    width: 28px;
    height: 28px;
    display: flex;
    align-items: center;
    justify-content: center;
    border: none;
    border-radius: 8px;
    background: rgba(22, 56, 50, .06);
    color: rgba(28, 43, 39, .55);
    cursor: pointer;
    flex-shrink: 0;
    transition: background .15s, color .15s;
}

.af-filter-close:hover { background: rgba(22, 56, 50, .12); color: #163832; }

/* Fundo escuro: só no mobile, onde o popover cobre a tela */
.af-filter-backdrop { display: none; }

/* ── Campos ───────────────────────────────────────────────── */
/* Grade de verdade: colunas alinhadas, sem campo solto esticando. */
.af-filters {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(190px, 1fr));
    gap: 13px 14px;
    align-items: end;
}

/* Vale para campo e para o intervalo de datas — o seletor antigo só
   pegava .af-filters-field, então o range aparecia fora do "Personalizado". */
.af-filters .is-hidden { display: none !important; }

.af-filters-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
    min-width: 0;
}

.af-filters-field.is-wide { grid-column: 1 / -1; }

.af-filters-label {
    font-family: 'Inter', sans-serif;
    font-size: 9.5px;
    font-weight: 800;
    letter-spacing: .07em;
    text-transform: uppercase;
    color: rgba(28, 43, 39, .45);
    white-space: nowrap;
}

/* 16px, nao 13px: abaixo disso o Safari do iPhone amplia ao focar e nao
   desfaz (ADR 0024). Este campo e o mesmo em Dashboard, Funil, Clientes e
   Relatorios — o zoom acontecia em todas. */
.af-filters-input {
    width: 100%;
    height: 40px;
    box-sizing: border-box;
    padding: 0 10px;
    border: 1.5px solid rgba(22, 56, 50, .13);
    border-radius: 9px;
    background: #fff;
    font-family: 'Inter', sans-serif;
    font-size: 16px;
    color: #1C2B27;
    outline: none;
    transition: border-color .15s, box-shadow .15s;
}

.af-filters-input:focus {
    border-color: #10B981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .12);
}

select.af-filters-input {
    appearance: none;
    padding-right: 26px;
    background-image: url("data:image/svg+xml;charset=utf-8,%3Csvg xmlns='http://www.w3.org/2000/svg' fill='none' stroke='%236B7280' stroke-width='2' viewBox='0 0 24 24'%3E%3Cpath stroke-linecap='round' stroke-linejoin='round' d='M19 9l-7 7-7-7'/%3E%3C/svg%3E");
    background-repeat: no-repeat;
    background-position: right 8px center;
    background-size: 14px;
    cursor: pointer;
}

/* Intervalo personalizado ocupa a linha inteira */
.af-filters-range {
    grid-column: 1 / -1;
    display: flex;
    align-items: center;
    gap: 8px;
}

.af-filters-range .af-filters-input { flex: 1; min-width: 0; }

.af-filters-range span {
    font-family: 'Inter', sans-serif;
    font-size: 11px;
    color: rgba(28, 43, 39, .4);
    flex-shrink: 0;
}

/* ── Rodapé: contador + Limpar + Aplicar ──────────────────── */
.af-filters-actions {
    display: flex;
    align-items: center;
    gap: 9px;
    margin-top: 15px;
    padding-top: 14px;
    border-top: 1px solid rgba(22, 56, 50, .09);
}

.af-filters-count {
    font-family: 'Inter', sans-serif;
    font-size: 11.5px;
    font-weight: 600;
    color: rgba(28, 43, 39, .45);
    white-space: nowrap;
    margin-right: auto;
    overflow: hidden;
    text-overflow: ellipsis;
}

.af-filters-clear,
.af-filters-apply {
    height: 36px;
    padding: 0 16px;
    border-radius: 9px;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
    font-weight: 700;
    cursor: pointer;
    white-space: nowrap;
    flex-shrink: 0;
    transition: background .15s, color .15s, border-color .15s, opacity .15s;
}

.af-filters-clear {
    border: 1.5px solid rgba(22, 56, 50, .14);
    background: #fff;
    color: rgba(28, 43, 39, .6);
}

.af-filters-clear:hover:not(:disabled) { background: #F8FAFC; color: #1C2B27; }
.af-filters-clear:disabled { opacity: .4; cursor: default; }

.af-filters-apply {
    border: 1.5px solid #163832;
    background: #163832;
    color: #fff;
}

.af-filters-apply:hover { background: #0f2a25; border-color: #0f2a25; }

/* Há mudança no rascunho esperando o clique */
.af-filters-apply.is-pendente {
    background: #10B981;
    border-color: #10B981;
    box-shadow: 0 0 0 3px rgba(16, 185, 129, .18);
}

/* ── Appbar claro (mobile/tablet): botão inverte ──────────── */
@media (max-width: 1023px) {
    .af-filter-trigger {
        height: 36px;
        padding: 0 14px;
        background: #163832;
        border-color: #163832;
        color: #fff;
        box-shadow: none;
    }
    .af-filter-trigger:hover { background: #0f2a25; border-color: #0f2a25; }
    .af-filter.is-open .af-filter-trigger {
        background: #C8A227;
        border-color: #C8A227;
        color: #1C2B27;
    }
    .af-filter-dot { border-color: #fff; }
    .af-filter.is-open .af-filter-dot { background: #163832; border-color: #fff; }
}

/* ── Mobile: bottom sheet ──────────────────────────────────
   Sobe do rodapé, e não do cabeçalho. O polegar vive embaixo: painel preso
   ao topo obrigava a mão a atravessar a tela inteira para escolher um filtro
   e voltar. Também é o que o sistema faz em toda folha nativa, então não
   precisa ser aprendido.

   O `bottom` acompanha a tab bar flutuante — a folha encosta ACIMA dela, e
   nunca por baixo. Foi `bottom: 0` por três versões (v72–v82) enquanto este
   comentário já prometia o contrário: a barra (safe-area + 20px de offset +
   60px de altura, z-index 3000) cobria exatamente a faixa sticky de
   Aplicar/Limpar, e `elementFromPoint` no botão devolvia um <span> da
   navegação — em cinco telas. A conta é a MESMA do FAB em agriflow.css
   (safe-area + 88px); `smoke-filtros-sheet.js` deriva os números da barra e
   `browser-filtros-sheet.js` toca os botões no Chromium.

   Empilhamento: a folha fica acima do FAB (1000) e abaixo da barra (3000),
   e o FAB some enquanto ela está aberta — ele flutuava por cima do último
   campo da folha. A barra continua navegável com a folha aberta. */
@media (max-width: 640px) {
    .af-filter-backdrop {
        display: block;
        position: fixed;
        inset: 0;
        z-index: 1090;
        background: rgba(12, 26, 23, .42);
        opacity: 0;
        visibility: hidden;
        transition: opacity .2s ease, visibility .2s;
    }
    .af-filter.is-open .af-filter-backdrop { opacity: 1; visibility: visible; }

    .af-filter-panel {
        position: fixed;
        top: auto;
        /* 20px de offset da barra + 60px de altura + 8px de folga, acima da
           safe-area: a folha termina onde a tab bar começa. */
        bottom: calc(env(safe-area-inset-bottom, 0px) + 88px);
        /* Mesmas margens laterais da tab bar (sidebar.css): folha e barra
           formam uma pilha só, alinhada. */
        left: 16px;
        right: 16px;
        width: auto;
        max-width: 100vw;
        z-index: 1100;
        /* Cantos nos quatro lados: a folha flutua acima da barra, não nasce
           colada na borda da tela. */
        border-radius: 18px;
        /* Sobra o suficiente para ver o que está sendo filtrado atrás, e a
           folga da barra sai da conta — senão a folha cresce por baixo dela. */
        max-height: min(78vh, calc(100vh - 72px - 88px - env(safe-area-inset-bottom, 0px)));
        overflow-y: auto;
        overscroll-behavior: contain;
        padding: 6px 16px 12px;
        box-shadow: 0 -10px 34px rgba(22, 56, 50, .22);
        /* Curta e discreta: a folha desliza, não salta. */
        transform: translateY(14px);
        transform-origin: bottom center;
        transition: opacity .18s ease, transform .22s cubic-bezier(.32, .72, 0, 1), visibility .22s;
    }
    /* O bico apontava para o gatilho do cabeçalho; numa folha de rodapé ele
       apontaria para lugar nenhum. Vira o puxador, que diz "isto é uma folha"
       sem precisar de legenda. */
    .af-filter-panel::before {
        position: static;
        display: block;
        width: 38px;
        height: 4px;
        margin: 2px auto 8px;
        border: 0;
        border-radius: 999px;
        background: rgba(22, 56, 50, .18);
        transform: none;
    }

    /* Cabeçalho e ações ficam à mão enquanto o miolo rola. */
    .af-filter-head {
        position: sticky;
        top: 0;
        z-index: 1;
        background: #fff;
        padding-top: 4px;
    }
    .af-filters-actions {
        position: sticky;
        bottom: 0;
        background: #fff;
        margin-top: 14px;
        padding-bottom: 4px;
    }

    /* Fundo travado enquanto a folha está aberta (filters-panel.js). O FAB
       "+" some junto: ele mora na mesma altura da folha (safe-area + 88px) e
       com z-index 1000 flutuava por cima do último campo. `visibility`, não
       `display`: a regra do FAB em agriflow.css usa `display:flex !important`. */
    body.af-filter-aberto { overflow: hidden; }
    body.af-filter-aberto .af-fab-mobile { visibility: hidden !important; pointer-events: none !important; }
    /* O prompt de push (push-manager.js: fixo, bottom 80px, z-index 99998)
       aparece 8 s depois de qualquer tela e pousava em cima de Aplicar. Ele
       volta quando a folha fecha; a decisão de ativar lembretes não é desta
       folha. */
    body.af-filter-aberto #__push_prompt { visibility: hidden !important; pointer-events: none !important; }

    /* Campos e ações da folha no tamanho do polegar. Eram 40px e 36px — o
       suficiente enquanto o painel era um atalho e os controles também
       viviam na tela; agora a folha é o único caminho para o recorte, e um
       alvo curto aqui custa o filtro. No desktop ficam como estão: lá quem
       aponta é o mouse. */
    .af-filters-input { min-height: 44px; }
    .af-filters-clear,
    .af-filters-apply { min-height: 44px; padding-inline: 16px; }
    .af-filter-close { width: 44px; height: 44px; }
}

/* Telas estreitas: o rótulo sai e sobra só o funil */
/* No toque este botão virou a ÚNICA porta para o recorte — os controles
   saíram do conteúdo. 38px de altura passavam perto, mas passavam por baixo
   do mínimo de 44px, e errar aqui agora custa o filtro inteiro. No desktop
   ele continua com a altura do cabeçalho: lá quem aponta é o mouse. */
@media (max-width: 640px) {
    .af-filter-trigger { min-height: 44px; min-width: 44px; justify-content: center; }
}

@media (max-width: 420px) {
    .af-filter-trigger { padding: 0 10px; gap: 0; }
    .af-filter-trigger-lbl { display: none; }
}