/* ── Sticky table headers — OPT-IN via classe .vox-table-sticky.

   Padrão GitHub Issues / Notion / Linear: scroll da PÁGINA toda.
   Título, filtros e stats scrollam junto, o thead fica grudado
   relativo ao viewport (abaixo do navbar fixo) quando ultrapassa.

   Estratégia técnica:
   - Desktop: overflow: visible — sem contexto de scroll, sticky
     relativo ao viewport
   - Mobile: overflow-x: auto — permite scroll horizontal (tabela
     larga em tela pequena)
   - :has() detecta se há toolbar global para ajustar o offset
     (Chrome 105+, Safari 15.4+, Firefox 121+)

   Uso (substitui .table-responsive):
     <div class="table-responsive vox-table-sticky">
       <table class="table">...</table>
     </div>
*/
.table-responsive.vox-table-sticky {
    overflow: visible;  /* remove scroll context em desktop para sticky funcionar no viewport */
}
@media (max-width: 767.98px) {
    .table-responsive.vox-table-sticky {
        overflow-x: auto;  /* em mobile, permite scroll horizontal quando tabela é larga */
    }
}
.vox-table-sticky thead th {
    position: sticky;
    top: 70px;  /* altura do navbar fixo */
    z-index: 2;
    background-color: var(--card-primary, #fff);
    box-shadow: inset 0 -2px 0 var(--border-color, #dee2e6);
}
/* Quando a tela tem toolbar de filtros globais, sticky offset considera a toolbar */
body:has(.vox-filtros-toolbar) .vox-table-sticky thead th {
    top: 126px;  /* 70px navbar + ~56px toolbar */
}
[data-bs-theme="dark"] .vox-table-sticky thead th {
    background-color: var(--card-primary, #212529);
}

/* ── Sticky hierarquico multi-nivel — OPT-IN via classe .vox-table-hier.
   Para tabelas com accordion/agrupamento (ex: insumo_lista: Tipo > Categoria
   > Insumos). Empilha thead + tipo-row + categoria-row naturalmente via
   stacking do position: sticky (padrao iOS section headers / Notion).

   Heights assumidos (height da linha Bootstrap padrao ~42px):
     thead: top = 70px (navbar)
     tipo-row: top = 112px (70 + 42)
     categoria-row: top = 154px (70 + 42 + 42)

   Quando ha toolbar global, todos os offsets sobem +56px.

   Uso (substitui .table-responsive):
     <div class="table-responsive vox-table-hier">
       <table class="table">
         <thead>...</thead>
         <tbody>
           <tr class="tipo-row">...</tr>        -- nivel 1
           <tr class="categoria-row">...</tr>   -- nivel 2
           <tr class="insumo-row">...</tr>      -- nivel 3 (itens)
           ...
         </tbody>
       </table>
     </div>

   O CSS nativo de sticky resolve stacking: ao rolar, o proximo tipo-row
   "empurra" o anterior para cima. Igual comportamento de section headers
   em iOS UITableView.
*/
.table-responsive.vox-table-hier {
    overflow: visible;
}
@media (max-width: 767.98px) {
    .table-responsive.vox-table-hier {
        overflow-x: auto;
    }
}
/* Bootstrap 5 usa border-collapse: collapse por padrao, que tem bug conhecido
   com position:sticky em <th>/<td> (gaps antes de ativar sticky e saltos de
   posicionamento em alguns browsers). Forcar border-collapse: separate
   resolve — cada celula tem box independente e sticky funciona precisamente.
   border-spacing: 0 mantem a aparencia visual identica. */
.vox-table-hier table.table {
    border-collapse: separate;
    border-spacing: 0;
}
/* Cor do trilho lateral (rail) — cada template define via style inline
   na raiz .vox-table-hier, ex.: style="--vox-table-hier-rail: var(--color-insumos);"
   Fallback: border-color padrao. */
.vox-table-hier {
    --vox-table-hier-rail: var(--border-color, #dee2e6);
}

/* thead — nivel 0 (topo absoluto, abaixo do navbar).
   Offsets dinamicos: JS (vox-table-hier.js) mede alturas reais e grava
   --vox-thier-top-* no container. Fallback CSS cobre o caso do JS nao
   ter rodado ainda. */
.vox-table-hier thead th {
    position: sticky;
    top: var(--vox-thier-top-thead, 70px);
    z-index: 4;
    background-color: var(--card-primary, #fff);
    box-shadow: inset 0 -2px 0 var(--border-color, #dee2e6);
}

/* Nivel 1 — borda superior adicional desenha o separador thead↔nivel1
   que ficaria sobreposto pelos 2px de overlap aplicado no JS. */
.vox-table-hier tr.tipo-row > td,
.vox-table-hier tr.cultura-row > td,
.vox-table-hier tr.ordem-row > td {
    position: sticky;
    top: var(--vox-thier-top-1, 110px);
    z-index: 3;
    background-color: var(--card-secondary, #f1f3f5);
    box-shadow:
        inset 0 2px 0 var(--border-color, #dee2e6),
        inset 0 -1px 0 var(--border-color, #dee2e6);
}

/* Nivel 2 — sombra de profundidade por padrao (valida para tabelas de 3 niveis).
   Quando existe nivel 3 (.grande-grupo-row), a sombra eh suprimida aqui e
   transferida para nivel 3 abaixo via :has() — evita sombra dupla.
   NOTA: variedade-row (cultura_lista) NAO esta aqui — ela eh a LEAF do
   cultura_lista, nao um grupo intermediario. Folhas nao stickam (evita
   empilhamento ao rolar). */
.vox-table-hier tr.categoria-row > td,
.vox-table-hier tr.subordem-row > td {
    position: sticky;
    top: var(--vox-thier-top-2, 150px);
    z-index: 2;
    background-color: var(--card-secondary, #f1f3f5);
    box-shadow:
        inset 0 -1px 0 var(--border-color, #dee2e6),
        0 4px 6px -4px rgba(0, 0, 0, 0.08);
}
.vox-table-hier:has(tr.grande-grupo-row) tr.subordem-row > td {
    box-shadow: inset 0 -1px 0 var(--border-color, #dee2e6);
}

/* Nivel 3 — ex.: grande-grupo-row em tipo_solo_lista (hierarquia de 4 niveis).
   Sombra inferior sutil marca o fim do bloco sticky sobre o conteudo. */
.vox-table-hier tr.grande-grupo-row > td {
    position: sticky;
    top: var(--vox-thier-top-3, 190px);
    z-index: 1;
    background-color: var(--card-secondary, #f1f3f5);
    box-shadow:
        inset 0 -1px 0 var(--border-color, #dee2e6),
        0 4px 6px -4px rgba(0, 0, 0, 0.08);
}

/* ── Rails coloridos progressivos por nivel ──
   Cada nivel da hierarquia desenha um rail vertical de 3px na primeira
   celula, posicionado cada vez mais a direita para refletir a profundidade.
   Implementacao via ::before absoluto (evita conflito com box-shadow
   interno do Bootstrap em .table > * > *). */
/* Reset borders do template + paddings ajustados por nivel (step ~12px).
   Paddings originais (40/60/80px) criavam espacamento excessivo. */
.vox-table-hier tr.tipo-row > td:first-child,
.vox-table-hier tr.cultura-row > td:first-child,
.vox-table-hier tr.ordem-row > td:first-child {
    border-left: 0 !important;
    padding-left: 16px !important;
}
.vox-table-hier tr.categoria-row > td:first-child,
.vox-table-hier tr.subordem-row > td:first-child {
    border-left: 0 !important;
    padding-left: 28px !important;
}
/* variedade-row eh LEAF do cultura_lista (nao-sticky) — recebe indent L2 e
   position:relative para contexto do ::before. */
.vox-table-hier tr.variedade-row > td:first-child {
    border-left: 0 !important;
    padding-left: 28px !important;
    position: relative;
}
.vox-table-hier tr.grande-grupo-row > td:first-child {
    border-left: 0 !important;
    padding-left: 40px !important;
}
/* Leaf rows — nao-sticky, precisam position:relative para contexto do ::before.
   Cada leaf usa indent do seu nivel de profundidade no respectivo template:
     - item-row (alvo_lista, 2 niveis): indent de nivel 2
     - insumo-row (insumo_lista, 3 niveis): indent de nivel 3
     - subgrupo-row (tipo_solo_lista, 4 niveis): indent de nivel 4
   (variedade-row em cultura_lista eh folha tambem, mas ja recebe indent L2 acima) */
.vox-table-hier tr.item-row > td:first-child {
    border-left: 0 !important;
    padding-left: 28px !important;
    position: relative;
}
.vox-table-hier tr.insumo-row > td:first-child {
    border-left: 0 !important;
    padding-left: 40px !important;
    position: relative;
}
.vox-table-hier tr.subgrupo-row > td:first-child {
    border-left: 0 !important;
    padding-left: 52px !important;
    position: relative;
}
.vox-table-hier tr.tipo-row > td:first-child::before,
.vox-table-hier tr.cultura-row > td:first-child::before,
.vox-table-hier tr.ordem-row > td:first-child::before,
.vox-table-hier tr.categoria-row > td:first-child::before,
.vox-table-hier tr.variedade-row > td:first-child::before,
.vox-table-hier tr.subordem-row > td:first-child::before,
.vox-table-hier tr.grande-grupo-row > td:first-child::before,
.vox-table-hier tr.insumo-row > td:first-child::before,
.vox-table-hier tr.item-row > td:first-child::before,
.vox-table-hier tr.subgrupo-row > td:first-child::before {
    content: '';
    position: absolute;
    top: 0;
    bottom: 0;
    width: 3px;
    background-color: var(--vox-table-hier-rail);
    pointer-events: none;
    z-index: 1;
}
/* Leaf insumo-row: usa a cor especifica do grupo do insumo (herbicida,
   fungicida, acaricida, etc.) definida inline no template via --grupo-cor.
   Fallback para o rail generico se a variavel nao estiver setada. */
.vox-table-hier tr.insumo-row > td:first-child::before {
    background-color: var(--grupo-cor, var(--vox-table-hier-rail));
}
/* Posicao horizontal do rail por nivel (profundidade cresce para direita).
   Rail fica 12px a esquerda do conteudo, alinhado com o step de indentacao. */
.vox-table-hier tr.tipo-row > td:first-child::before,
.vox-table-hier tr.cultura-row > td:first-child::before,
.vox-table-hier tr.ordem-row > td:first-child::before {
    left: 4px;   /* L1 */
}
.vox-table-hier tr.categoria-row > td:first-child::before,
.vox-table-hier tr.variedade-row > td:first-child::before,
.vox-table-hier tr.subordem-row > td:first-child::before,
.vox-table-hier tr.item-row > td:first-child::before {
    left: 16px;  /* L2 (inclui item-row leaf do alvo_lista) */
}
.vox-table-hier tr.grande-grupo-row > td:first-child::before,
.vox-table-hier tr.insumo-row > td:first-child::before {
    left: 28px;  /* L3 (inclui insumo-row leaf do insumo_lista) */
}
.vox-table-hier tr.subgrupo-row > td:first-child::before {
    left: 40px;  /* L4 (subgrupo-row leaf do tipo_solo_lista) */
}
/* Offsets para telas com toolbar global sao calculados dinamicamente
   por vox-table-hier.js (mede navbar + toolbar + alturas reais das linhas).
   Fallback CSS quando JS ainda nao rodou: */
body:has(.vox-filtros-toolbar) .vox-table-hier thead th {
    top: var(--vox-thier-top-thead, 126px);
}
body:has(.vox-filtros-toolbar) .vox-table-hier tr.tipo-row > td,
body:has(.vox-filtros-toolbar) .vox-table-hier tr.cultura-row > td,
body:has(.vox-filtros-toolbar) .vox-table-hier tr.ordem-row > td {
    top: var(--vox-thier-top-1, 166px);
}
body:has(.vox-filtros-toolbar) .vox-table-hier tr.categoria-row > td,
body:has(.vox-filtros-toolbar) .vox-table-hier tr.subordem-row > td {
    top: var(--vox-thier-top-2, 206px);
}
[data-bs-theme="dark"] .vox-table-hier thead th {
    background-color: var(--card-primary, #212529);
}
[data-bs-theme="dark"] .vox-table-hier tr.tipo-row > td,
[data-bs-theme="dark"] .vox-table-hier tr.cultura-row > td,
[data-bs-theme="dark"] .vox-table-hier tr.ordem-row > td,
[data-bs-theme="dark"] .vox-table-hier tr.categoria-row > td,
[data-bs-theme="dark"] .vox-table-hier tr.subordem-row > td {
    background-color: var(--card-secondary, #2b3036);
}

/* ── Loading state transicional durante htmx swap (ao trocar filtros globais).
   O conteúdo fica meio-transparente brevemente enquanto o swap acontece,
   indicando "carregando". Muito sutil — se o swap for rápido nem aparece. ── */
.vox-content-loading {
    opacity: 0.5;
    pointer-events: none;
    transition: opacity 0.15s ease-in;
}
@media (prefers-reduced-motion: reduce) {
    .vox-content-loading { transition: none; }
}

/* ── Micro-animações de feedback (todas OPT-IN via classe específica) ── */

/* Slide-out para linhas de tabela removidas (usado por vox-exclusao.js
   antes do reload — adiciona classe no <tr>/<div> da linha via JS) */
@keyframes vox-row-remove {
    to { opacity: 0; transform: translateX(-20px); max-height: 0; padding: 0; border: 0; }
}
.vox-row-removing {
    animation: vox-row-remove 0.3s ease-in forwards;
    overflow: hidden;
}

/* Feedback de sucesso em botão após submit — checkmark animado.
   OPT-IN: adicionar classe vox-success-flash via JS após save bem-sucedido. */
.btn.vox-success-flash {
    position: relative;
    overflow: hidden;
}
.btn.vox-success-flash::after {
    content: '✓';
    position: absolute;
    inset: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    background: var(--color-success, #28a745);
    color: #fff;
    font-weight: 700;
    animation: vox-success-flash 1.2s ease-out forwards;
}
@keyframes vox-success-flash {
    0%   { opacity: 0; }
    15%  { opacity: 1; }
    85%  { opacity: 1; }
    100% { opacity: 0; }
}

@media (prefers-reduced-motion: reduce) {
    .vox-row-removing,
    .btn.vox-success-flash::after,
    .vox-success-pop { animation: none; }
}

/* Pop-in animation aplicado a alerts/toasts de sucesso que aparecem logo
   apos um form submit (UX-1.5 — plugado via base.html sessionStorage).
   Sutil bounce + glow verde para reforcar o feedback de "save bem-sucedido". */
.vox-success-pop {
    animation: vox-success-pop 0.5s cubic-bezier(0.2, 0.9, 0.4, 1.2);
    box-shadow: 0 0 0 3px rgba(40, 167, 69, 0.25), 0 4px 12px rgba(40, 167, 69, 0.15);
}
@keyframes vox-success-pop {
    0%   { transform: scale(0.92); opacity: 0.6; }
    50%  { transform: scale(1.02); }
    100% { transform: scale(1); opacity: 1; }
}

/* Skeleton overlay durante htmx swap de filtros globais (UX-1.3).
   Injetado dinamicamente por base.html somente se o swap demorar >250ms,
   evitando flicker em requests rapidos. Posicionado no topo do target, por
   cima do conteudo semi-transparente (.vox-content-loading). */
.vox-content-skeleton {
    position: absolute;
    top: 1rem;
    left: 1rem;
    right: 1rem;
    z-index: 5;
    padding: 1.5rem;
    background: var(--card-primary, #fff);
    border-radius: 0.5rem;
    box-shadow: 0 2px 8px rgba(0, 0, 0, 0.05);
    display: flex;
    flex-direction: column;
    gap: 0.75rem;
}
[data-bs-theme="dark"] .vox-content-skeleton {
    background: var(--card-primary, #212529);
}
/* Target precisa ser positioning context para skeleton absoluto funcionar */
#vox-content.vox-content-loading {
    position: relative;
}

/* ── Empty state unificado (listas sem dados ou sem match de filtros) ── */
.vox-empty-state {
    padding: 3rem 1.5rem;
}
.vox-empty-state .vox-empty-icon {
    animation: vox-empty-pulse 3s ease-in-out infinite;
}
@keyframes vox-empty-pulse {
    0%, 100% { transform: translateY(0); }
    50% { transform: translateY(-4px); }
}
@media (prefers-reduced-motion: reduce) {
    .vox-empty-state .vox-empty-icon { animation: none; }
}

/* ── Skeleton loading placeholder ── */
.skeleton {
    background: linear-gradient(90deg, var(--bs-gray-200) 25%, var(--bs-gray-300) 50%, var(--bs-gray-200) 75%);
    background-size: 200% 100%;
    animation: skeleton-shimmer 1.5s ease-in-out infinite;
    border-radius: 4px;
}
.skeleton-text { height: 1em; margin-bottom: 0.5em; }
.skeleton-title { height: 1.5em; width: 60%; margin-bottom: 0.75em; }
.skeleton-card { height: 120px; }
@keyframes skeleton-shimmer {
    0% { background-position: 200% 0; }
    100% { background-position: -200% 0; }
}
[data-bs-theme="dark"] .skeleton {
    background: linear-gradient(90deg, var(--bs-gray-700) 25%, var(--bs-gray-600) 50%, var(--bs-gray-700) 75%);
    background-size: 200% 100%;
}
@media (prefers-reduced-motion: reduce) {
    .skeleton { animation: none; }
}

/* ── Override global do Bootstrap .btn — unifica tipografia do sistema ──
   Usa CSS custom properties para preservar o cascade do Bootstrap 5.3.
   .btn-sm e .btn-lg continuam ajustando --bs-btn-border-radius normalmente. ── */
.btn {
    --bs-btn-font-weight: 500;
    --bs-btn-border-radius: 8px;
}

/* Cards modernos */
.card-modern {
    background-color: var(--card-primary);
    border: none;
    border-radius: 12px;
    box-shadow: 0 4px 15px var(--shadow-color);
    transition: transform 0.2s ease, box-shadow 0.2s ease;
}

.card-modern:hover {
    transform: translateY(-2px);
    box-shadow: 0 8px 25px var(--shadow-medium);
}

/* Cards secundários (internos) */
.card-modern .card {
    background-color: var(--card-secondary);
}

.card {
    background-color: var(--card-primary);
}

.card .card {
    background-color: var(--card-secondary);
}

/* Badges de status */
.status-badge {
    padding: 8px 16px;
    border-radius: 20px;
    font-weight: 600;
    font-size: 0.875rem;
    display: inline-flex;
    align-items: center;
    margin: 4px;
}

.status-badge i {
    margin-right: 6px;
}

.status-executadas {
    background: linear-gradient(135deg, #d4edda, #c3e6cb);
    color: #155724;
    border: 1px solid #c3e6cb;
}

.status-pendentes {
    background: linear-gradient(135deg, #fff3cd, #ffeaa7);
    color: #856404;
    border: 1px solid #ffeaa7;
}

.status-atrasadas {
    background: linear-gradient(135deg, #f8d7da, #f5c6cb);
    color: #721c24;
    border: 1px solid #f5c6cb;
}

.status-fora-prazo {
    background: linear-gradient(135deg, #e2e3e5, #d6d8db);
    color: #383d41;
    border: 1px solid #d6d8db;
}

/* Formulários modernos */
.form-control-modern {
    border-radius: 8px;
    border: 2px solid var(--border-light);
    padding: 12px 16px;
    transition: all 0.3s ease;
    background-color: var(--input-bg);
    color: var(--text-primary);
}

.form-control-modern:focus {
    border-color: var(--accent-green);
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Padrão verde para todos os form-controls do sistema */
.form-control:focus {
    border-color: var(--accent-green);
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Padrão verde para selects */
.form-select:focus {
    border-color: var(--accent-green);
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Padrão verde para textareas */
textarea.form-control:focus {
    border-color: var(--accent-green);
    box-shadow: 0 0 0 0.2rem rgba(40, 167, 69, 0.25);
}

/* Padrão verde para checkboxes e radios */
.form-check-input:focus {
    border-color: var(--accent-green);
    box-shadow: 0 0 0 0.25rem rgba(40, 167, 69, 0.25);
}

.btn-custom {
    padding: 12px 24px;
    font-weight: 600;
    transition: all 0.3s ease;
}

/* Timeline específica */
.timeline-container-modern {
    background: var(--card-primary);
    border-radius: 16px;
    box-shadow: 0 6px 20px var(--shadow-medium);
    padding: 2rem;
    margin: 2rem 0;
}

.timeline-marker-modern {
    width: 18px;
    height: 18px;
    border-radius: 50%;
    border: 3px solid var(--card-secondary);
    box-shadow: 0 3px 10px rgba(0,0,0,0.2);
    position: relative;
    z-index: 3;
}

.timeline-card-modern {
    background: var(--card-secondary);
    border: 1px solid var(--border-light);
    border-radius: 12px;
    padding: 1.25rem;
    transition: all 0.3s ease;
    cursor: pointer;
}

.timeline-card-modern:hover {
    transform: translateY(-3px);
    box-shadow: 0 8px 25px var(--shadow-medium);
    border-color: var(--accent-green);
}

/* Responsive adjustments */
@media (max-width: 768px) {
    .navbar-nav {
        text-align: center;
    }
    
    .status-badge {
        font-size: 0.75rem;
        padding: 6px 12px;
    }
}

/* Breadcrumb personalizado */
.breadcrumb-item a {
    color: var(--primary-green);
    text-decoration: none;
    font-weight: 500;
    transition: all 0.2s ease;
}

.breadcrumb-item a:hover {
    color: var(--accent-green);
    text-decoration: underline;
}

/* Avatar Circle */
.avatar-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    font-size: 1rem;
    flex-shrink: 0;
}

/* Classes de cores por módulo */
/* Gestão Cadastral */
.btn-produtores { background-color: var(--color-produtores); border-color: var(--color-produtores); color: white; }
.btn-produtores:hover { background-color: #4a6a8f; border-color: #4a6a8f; color: white; }
.btn-outline-produtores { background-color: transparent !important; border-color: var(--color-produtores) !important; color: var(--color-produtores) !important; }
.btn-outline-produtores:hover { background-color: var(--color-produtores) !important; border-color: var(--color-produtores) !important; color: white !important; }
.badge-produtores { background-color: var(--color-produtores); color: white; }
.bg-produtores { background-color: rgba(90, 123, 163, 0.1) !important; }
.text-produtores { color: var(--color-produtores); }

.btn-fazendas { background-color: var(--color-fazendas); border-color: var(--color-fazendas); color: white; }
.btn-fazendas:hover { background-color: #4a7958; border-color: #4a7958; color: white; }
.btn-outline-fazendas { background-color: transparent !important; border-color: var(--color-fazendas) !important; color: var(--color-fazendas) !important; }
.btn-outline-fazendas:hover { background-color: var(--color-fazendas) !important; border-color: var(--color-fazendas) !important; color: white !important; }
.badge-fazendas { background-color: var(--color-fazendas); color: white; }
.bg-fazendas { background-color: rgba(90, 138, 104, 0.1) !important; }
.bg-fazendas-solid { background-color: var(--color-fazendas) !important; }
.text-fazendas { color: var(--color-fazendas); }
.border-fazendas { border-color: var(--color-fazendas) !important; }

.btn-talhoes { background-color: var(--color-talhoes); border-color: var(--color-talhoes); color: white; }
.btn-talhoes:hover { background-color: #54865d; border-color: #54865d; color: white; }
.btn-outline-talhoes { background-color: transparent !important; border-color: var(--color-talhoes) !important; color: var(--color-talhoes) !important; }
.btn-outline-talhoes:hover { background-color: var(--color-talhoes) !important; border-color: var(--color-talhoes) !important; color: white !important; }
.badge-talhoes { background-color: var(--color-talhoes); color: white; }
.bg-talhoes { background-color: rgba(111, 168, 122, 0.1) !important; }
.text-talhoes { color: var(--color-talhoes); }
.border-talhoes { border-color: var(--color-talhoes) !important; }

.btn-agronomos { background-color: var(--color-agronomos); border-color: var(--color-agronomos); color: white; }
.btn-agronomos:hover { background-color: #c27818; border-color: #c27818; color: white; }
.btn-outline-agronomos { background-color: transparent !important; border-color: var(--color-agronomos) !important; color: var(--color-agronomos) !important; }
.btn-outline-agronomos:hover { background-color: var(--color-agronomos) !important; border-color: var(--color-agronomos) !important; color: white !important; }
.badge-agronomos { background-color: var(--color-agronomos); color: white; }
.bg-agronomos { background-color: rgba(212, 136, 28, 0.1) !important; }
.text-agronomos { color: var(--color-agronomos); }

.btn-operadores { background-color: var(--color-operadores); border-color: var(--color-operadores); color: white; }
.btn-operadores:hover { background-color: #a54444; border-color: #a54444; color: white; }
.btn-outline-operadores { background-color: transparent !important; border-color: var(--color-operadores) !important; color: var(--color-operadores) !important; }
.btn-outline-operadores:hover { background-color: var(--color-operadores) !important; border-color: var(--color-operadores) !important; color: white !important; }
.badge-operadores { background-color: var(--color-operadores); color: white; }
.bg-operadores { background-color: rgba(184, 79, 79, 0.1) !important; }
.text-operadores { color: var(--color-operadores); }

.btn-safras { background-color: var(--color-safras); border-color: var(--color-safras); color: white; }
.btn-safras:hover { background-color: #7a6345; border-color: #7a6345; color: white; }
.btn-outline-safras { background-color: transparent !important; border-color: var(--color-safras) !important; color: var(--color-safras) !important; }
.btn-outline-safras:hover { background-color: var(--color-safras) !important; border-color: var(--color-safras) !important; color: white !important; }
.badge-safras { background-color: var(--color-safras); color: white; }
.bg-safras { background-color: rgba(139, 115, 85, 0.1) !important; }
.text-safras { color: var(--color-safras); }

.btn-maquinarios { background-color: var(--color-maquinarios); border-color: var(--color-maquinarios); color: white; }
.btn-maquinarios:hover { background-color: #2a2a2a; border-color: #2a2a2a; color: white; }
.btn-outline-maquinarios { background-color: transparent !important; border-color: var(--color-maquinarios) !important; color: var(--color-maquinarios) !important; }
.btn-outline-maquinarios:hover { background-color: var(--color-maquinarios) !important; border-color: var(--color-maquinarios) !important; color: white !important; }
.badge-maquinarios { background-color: var(--color-maquinarios); color: white; }
.bg-maquinarios { background-color: rgba(58, 58, 58, 0.1) !important; }
.text-maquinarios { color: var(--color-maquinarios); }

/* Controle de Acesso */
.btn-atribuir-fazendas { background-color: var(--color-atribuir-fazendas); border-color: var(--color-atribuir-fazendas); color: white; }
.btn-atribuir-fazendas:hover { background-color: #4a7a7a; border-color: #4a7a7a; color: white; }
.badge-atribuir-fazendas { background-color: var(--color-atribuir-fazendas); color: white; }
.bg-atribuir-fazendas { background-color: rgba(90, 138, 138, 0.1) !important; }
.text-atribuir-fazendas { color: var(--color-atribuir-fazendas); }

.btn-usuarios { background-color: var(--color-usuarios); border-color: var(--color-usuarios); color: white; }
.btn-usuarios:hover { background-color: #5b4b85; border-color: #5b4b85; color: white; }
.btn-outline-usuarios { background-color: transparent !important; border-color: var(--color-usuarios) !important; color: var(--color-usuarios) !important; }
.btn-outline-usuarios:hover { background-color: var(--color-usuarios) !important; border-color: var(--color-usuarios) !important; color: white !important; }
.badge-usuarios { background-color: var(--color-usuarios); color: white; }
.bg-usuarios { background-color: rgba(107, 91, 149, 0.1) !important; }
.text-usuarios { color: var(--color-usuarios); }

.btn-admin { background-color: var(--color-admin); border-color: var(--color-admin); color: white; }
.btn-admin:hover { background-color: #5c636a; border-color: #5c636a; color: white; }
.btn-outline-admin { background-color: transparent !important; border-color: var(--color-admin) !important; color: var(--color-admin) !important; }
.btn-outline-admin:hover { background-color: var(--color-admin) !important; border-color: var(--color-admin) !important; color: white !important; }
.badge-admin { background-color: var(--color-admin); color: white; }
.bg-admin-entity { background-color: rgba(108, 117, 125, 0.1) !important; }
.text-admin { color: var(--color-admin); }

.btn-superadmin { background-color: var(--color-superadmin); border-color: var(--color-superadmin); color: white; }
.btn-superadmin:hover { background-color: #5b4b85; border-color: #5b4b85; color: white; }
.btn-outline-superadmin { background-color: transparent !important; border-color: var(--color-superadmin) !important; color: var(--color-superadmin) !important; }
.btn-outline-superadmin:hover { background-color: var(--color-superadmin) !important; border-color: var(--color-superadmin) !important; color: white !important; }
.badge-superadmin { background-color: var(--color-superadmin); color: white; }
.bg-superadmin { background-color: rgba(107, 91, 149, 0.1) !important; }
.text-superadmin { color: var(--color-superadmin); }

.btn-organizacoes { background-color: var(--color-organizacoes); border-color: var(--color-organizacoes); color: white; }
.btn-organizacoes:hover { background-color: #7a6a5a; border-color: #7a6a5a; color: white; }
.btn-outline-organizacoes { background-color: transparent !important; border-color: var(--color-organizacoes) !important; color: var(--color-organizacoes) !important; }
.btn-outline-organizacoes:hover { background-color: var(--color-organizacoes) !important; border-color: var(--color-organizacoes) !important; color: white !important; }
.badge-organizacoes { background-color: var(--color-organizacoes); color: white; }
.bg-organizacoes { background-color: rgba(138, 122, 106, 0.1) !important; }
.text-organizacoes { color: var(--color-organizacoes); }

.btn-vinculos { background-color: var(--color-vinculos); border-color: var(--color-vinculos); color: white; }
.btn-vinculos:hover { background-color: #2a6f51; border-color: #2a6f51; color: white; }
.btn-outline-vinculos { background-color: transparent !important; border-color: var(--color-vinculos) !important; color: var(--color-vinculos) !important; }
.btn-outline-vinculos:hover { background-color: var(--color-vinculos) !important; border-color: var(--color-vinculos) !important; color: white !important; }
.badge-vinculos { background-color: var(--color-vinculos); color: white; }
.bg-vinculos { background-color: rgba(52, 131, 97, 0.1) !important; }
.text-vinculos { color: var(--color-vinculos); }

.btn-delegacoes { background-color: var(--color-delegacoes); border-color: var(--color-delegacoes); color: white; }
.btn-delegacoes:hover { background-color: #6a5b7a; border-color: #6a5b7a; color: white; }
.btn-outline-delegacoes { background-color: transparent !important; border-color: var(--color-delegacoes) !important; color: var(--color-delegacoes) !important; }
.btn-outline-delegacoes:hover { background-color: var(--color-delegacoes) !important; border-color: var(--color-delegacoes) !important; color: white !important; }
.badge-delegacoes { background-color: var(--color-delegacoes); color: white; }
.bg-delegacoes { background-color: rgba(122, 107, 138, 0.1) !important; }
.text-delegacoes { color: var(--color-delegacoes); }
.border-delegacoes { border-color: var(--color-delegacoes) !important; }

/* Botões customizados para filtros */
.btn-dark-filled { background-color: #3a3a3a; border-color: #3a3a3a; color: white; }
.btn-dark-filled:hover { background-color: #2a2a2a; border-color: #2a2a2a; color: white; }
.btn-secondary-filled { background-color: #6c757d; border-color: #6c757d; color: white; }
.btn-secondary-filled:hover { background-color: #5c636a; border-color: #5c636a; color: white; }

.btn-usuarios { background-color: var(--color-usuarios); border-color: var(--color-usuarios); color: white; }
.btn-usuarios:hover { background-color: #5b4b85; border-color: #5b4b85; color: white; }
.badge-usuarios { background-color: var(--color-usuarios); color: white; }
.text-usuarios { color: var(--color-usuarios); }

.btn-organizacoes { background-color: var(--color-organizacoes); border-color: var(--color-organizacoes); color: white; }
.btn-organizacoes:hover { background-color: #7a6a5a; border-color: #7a6a5a; color: white; }
.badge-organizacoes { background-color: var(--color-organizacoes); color: white; }
.text-organizacoes { color: var(--color-organizacoes); }

.btn-vinculos { background-color: var(--color-vinculos); border-color: var(--color-vinculos); color: white; }
.btn-vinculos:hover { background-color: #2a6f51; border-color: #2a6f51; color: white; }
.badge-vinculos { background-color: var(--color-vinculos); color: white; }
.text-vinculos { color: var(--color-vinculos); }

/* Gestão Operacional */
.btn-planejamentos { background-color: var(--color-planejamentos); border-color: var(--color-planejamentos); color: white; }
.btn-planejamentos:hover { background-color: #5b6b95; border-color: #5b6b95; color: white; }
.btn-outline-planejamentos { background-color: transparent !important; border-color: var(--color-planejamentos) !important; color: var(--color-planejamentos) !important; }
.btn-outline-planejamentos:hover { background-color: var(--color-planejamentos) !important; border-color: var(--color-planejamentos) !important; color: white !important; }
.badge-planejamentos { background-color: var(--color-planejamentos); color: white; }
.bg-planejamentos { background-color: rgba(107, 123, 165, 0.1) !important; }
.text-planejamentos { color: var(--color-planejamentos); }

/* Programação (alias para planejamentos) */
.btn-programacao { background-color: var(--color-planejamentos); border-color: var(--color-planejamentos); color: white; }
.btn-programacoes:hover { background-color: #5b6b95; border-color: #5b6b95; color: white; }
.btn-outline-programacao, .btn-outline-programacoes { background-color: transparent !important; border-color: var(--color-planejamentos) !important; color: var(--color-planejamentos) !important; }
.btn-outline-programacao:hover, .btn-outline-programacoes:hover { background-color: var(--color-planejamentos) !important; border-color: var(--color-planejamentos) !important; color: white !important; }
.badge-programacao { background-color: var(--color-planejamentos); color: white; }
.bg-programacao { background-color: rgba(107, 123, 165, 0.1) !important; }
.text-programacao { color: var(--color-planejamentos); }

.pagination-programacao .page-item.active .page-link {
    background-color: var(--color-planejamentos);
    border-color: var(--color-planejamentos);
}

.pagination-programacao .page-link {
    color: var(--color-planejamentos);
}

.pagination-programacao .page-link:hover {
    color: #5b6b95;
}

/* Templates */
.btn-templates { background-color: var(--color-templates); border-color: var(--color-templates); color: white; }
.btn-templates:hover { background-color: #6a5b7a; border-color: #6a5b7a; color: white; }
.btn-outline-templates { background-color: transparent !important; border-color: var(--color-templates) !important; color: var(--color-templates) !important; }
.btn-outline-templates:hover { background-color: var(--color-templates) !important; border-color: var(--color-templates) !important; color: white !important; }
.badge-templates { background-color: var(--color-templates); color: white; }
.bg-templates { background-color: rgba(122, 107, 138, 0.1) !important; }
.text-templates { color: var(--color-templates); }
.border-templates { border-color: var(--color-templates) !important; }

.btn-recomendacoes { background-color: var(--color-recomendacoes); border-color: var(--color-recomendacoes); color: white; }
.btn-recomendacoes:hover { background-color: #b7852d; border-color: #b7852d; color: white; }
.btn-outline-recomendacoes, .btn-outline-recomendacao { background-color: transparent !important; border-color: var(--color-recomendacoes) !important; color: var(--color-recomendacoes) !important; }
.btn-outline-recomendacoes:hover, .btn-outline-recomendacao:hover { background-color: var(--color-recomendacoes) !important; border-color: var(--color-recomendacoes) !important; color: white !important; }
.badge-recomendacoes { background-color: var(--color-recomendacoes); color: white; }
.bg-recomendacoes { background-color: var(--color-recomendacoes) !important; }
.text-recomendacoes { color: var(--color-recomendacoes); }

.btn-plantios { background-color: var(--color-plantios); border-color: var(--color-plantios); color: white; }
.btn-plantios:hover { background-color: #5b7a4a; border-color: #5b7a4a; color: white; }
.btn-outline-plantios { background-color: transparent !important; border-color: var(--color-plantios) !important; color: var(--color-plantios) !important; }
.btn-outline-plantios:hover { background-color: var(--color-plantios) !important; border-color: var(--color-plantios) !important; color: white !important; }
.badge-plantios { background-color: var(--color-plantios); color: white; }
.bg-plantios { background-color: rgba(107, 138, 90, 0.1) !important; }
.text-plantios { color: var(--color-plantios); }

.btn-colheitas { background-color: var(--color-colheitas); border-color: var(--color-colheitas); color: white; }
.btn-colheitas:hover { background-color: #8a6a4a; border-color: #8a6a4a; color: white; }
.btn-outline-colheitas { background-color: transparent !important; border-color: var(--color-colheitas) !important; color: var(--color-colheitas) !important; }
.btn-outline-colheitas:hover { background-color: var(--color-colheitas) !important; border-color: var(--color-colheitas) !important; color: white !important; }
.badge-colheitas { background-color: var(--color-colheitas); color: white; }
.bg-colheitas { background-color: rgba(154, 122, 90, 0.1) !important; }
.text-colheitas { color: var(--color-colheitas); }

.btn-aplicacoes { background-color: var(--color-aplicacoes); border-color: var(--color-aplicacoes); color: white; }
.btn-aplicacoes:hover { background-color: #4a8a7a; border-color: #4a8a7a; color: white; }
.btn-outline-aplicacoes { background-color: transparent !important; border-color: var(--color-aplicacoes) !important; color: var(--color-aplicacoes) !important; }
.btn-outline-aplicacoes:hover { background-color: var(--color-aplicacoes) !important; border-color: var(--color-aplicacoes) !important; color: white !important; }
.badge-aplicacoes { background-color: var(--color-aplicacoes); color: white; }
.bg-aplicacoes { background-color: rgba(90, 154, 138, 0.1) !important; }
.text-aplicacoes { color: var(--color-aplicacoes); }

.btn-timeline { background-color: var(--color-timeline); border-color: var(--color-timeline); color: white; }
.btn-timeline:hover { background-color: #3a5a7a; border-color: #3a5a7a; color: white; }
.btn-outline-timeline { background-color: transparent !important; border-color: var(--color-timeline) !important; color: var(--color-timeline) !important; }
.btn-outline-timeline:hover { background-color: var(--color-timeline) !important; border-color: var(--color-timeline) !important; color: white !important; }
.badge-timeline { background-color: var(--color-timeline); color: white; }
.bg-timeline { background-color: rgba(90, 123, 154, 0.1) !important; }

/* Mapa de Situação */
.text-mapa-situacao { color: var(--color-mapa-situacao) !important; }
.btn-mapa-situacao { background-color: var(--color-mapa-situacao); border-color: var(--color-mapa-situacao); color: white; }
.btn-mapa-situacao:hover { background-color: #3a6a5a; border-color: #3a6a5a; color: white; }
.btn-outline-mapa-situacao { background-color: transparent !important; border-color: var(--color-mapa-situacao) !important; color: var(--color-mapa-situacao) !important; }
.btn-outline-mapa-situacao:hover { background-color: var(--color-mapa-situacao) !important; border-color: var(--color-mapa-situacao) !important; color: white !important; }
.badge-mapa-situacao { background-color: var(--color-mapa-situacao); color: white; }
.bg-mapa-situacao { background-color: var(--color-mapa-situacao) !important; color: white !important; }
.text-timeline { color: var(--color-timeline); }
.text-colheitas { color: var(--color-colheitas); }

.btn-maquinarios:hover { background-color: #2a2a2a; border-color: #2a2a2a; color: white; }
.badge-maquinarios { background-color: var(--color-maquinarios); color: white; }
.text-maquinarios { color: var(--color-maquinarios); }

/* Paginação personalizada por módulo */
.pagination-produtores .page-item.active .page-link { background-color: var(--color-produtores); border-color: var(--color-produtores); color: white; }
.pagination-produtores .page-link { color: var(--color-produtores); }
.pagination-produtores .page-link:hover { background-color: rgba(90, 123, 163, 0.1); color: var(--color-produtores); }

.pagination-fazendas .page-item.active .page-link { background-color: var(--color-fazendas); border-color: var(--color-fazendas); color: white; }
.pagination-fazendas .page-link { color: var(--color-fazendas); }
.pagination-fazendas .page-link:hover { background-color: rgba(90, 138, 104, 0.1); color: var(--color-fazendas); }

.pagination-agronomos .page-item.active .page-link { background-color: var(--color-agronomos); border-color: var(--color-agronomos); color: white; }
.pagination-agronomos .page-link { color: var(--color-agronomos); }
.pagination-agronomos .page-link:hover { background-color: rgba(212, 136, 28, 0.1); color: var(--color-agronomos); }

.pagination-operadores .page-item.active .page-link { background-color: var(--color-operadores); border-color: var(--color-operadores); color: white; }
.pagination-operadores .page-link { color: var(--color-operadores); }
.pagination-operadores .page-link:hover { background-color: rgba(184, 79, 79, 0.1); color: var(--color-operadores); }

.pagination-safras .page-item.active .page-link { background-color: var(--color-safras); border-color: var(--color-safras); color: white; }
.pagination-safras .page-link { color: var(--color-safras); }
.pagination-safras .page-link:hover { background-color: rgba(139, 115, 85, 0.1); color: var(--color-safras); }

.pagination-maquinarios .page-item.active .page-link { background-color: var(--color-maquinarios); border-color: var(--color-maquinarios); color: white; }
.pagination-maquinarios .page-link { color: var(--color-maquinarios); }
.pagination-maquinarios .page-link:hover { background-color: rgba(58, 58, 58, 0.1); color: var(--color-maquinarios); }

.pagination-usuarios .page-item.active .page-link { background-color: var(--color-usuarios); border-color: var(--color-usuarios); color: white; }
.pagination-usuarios .page-link { color: var(--color-usuarios); }
.pagination-usuarios .page-link:hover { background-color: rgba(107, 91, 149, 0.1); color: var(--color-usuarios); }

.pagination-vinculos .page-item.active .page-link { background-color: var(--color-vinculos); border-color: var(--color-vinculos); color: white; }
.pagination-vinculos .page-link { color: var(--color-vinculos); }
.pagination-vinculos .page-link:hover { background-color: rgba(52, 131, 97, 0.1); color: var(--color-vinculos); }

.pagination-atribuir-fazendas .page-item.active .page-link { background-color: var(--color-atribuir-fazendas); border-color: var(--color-atribuir-fazendas); color: white; }
.pagination-atribuir-fazendas .page-link { color: var(--color-atribuir-fazendas); }
.pagination-atribuir-fazendas .page-link:hover { background-color: rgba(90, 138, 138, 0.1); color: var(--color-atribuir-fazendas); }

.pagination-recomendacoes .page-item.active .page-link { background-color: var(--color-recomendacoes); border-color: var(--color-recomendacoes); color: white; }
.pagination-recomendacoes .page-link { color: var(--color-recomendacoes); }
.pagination-recomendacoes .page-link:hover { background-color: rgba(199, 149, 61, 0.1); color: var(--color-recomendacoes); }

/* ========================================
   ESTILOS PARA ORDENAÇÃO DE COLUNAS
   ======================================== */

/* Esconder ícones de ordenação não ativos por padrão */
th a .fa-sort {
    opacity: 0;
    transition: opacity 0.2s ease;
}

/* Mostrar ícones não ativos apenas no hover */
th a:hover .fa-sort {
    opacity: 0.5;
}

/* Ícones ativos (fa-sort-up e fa-sort-down) sempre visíveis */
th a .fa-sort-up,
th a .fa-sort-down {
    opacity: 1 !important;
}

/* Melhorar a transição no hover dos cabeçalhos */
th a {
    transition: all 0.2s ease;
}

/* ─── Dark mode: components ─── */
[data-bs-theme="dark"] .status-executadas {
    background: linear-gradient(135deg, #1a3020, #1e3a24);
    color: #78d078; border-color: #2a5a30;
}
[data-bs-theme="dark"] .status-pendentes {
    background: linear-gradient(135deg, #302a18, #3a3018);
    color: #f0c050; border-color: #5a4a20;
}
[data-bs-theme="dark"] .status-atrasadas {
    background: linear-gradient(135deg, #301a1e, #3a2024);
    color: #f08080; border-color: #5a2a30;
}
[data-bs-theme="dark"] .status-fora-prazo {
    background: linear-gradient(135deg, #252a27, #2a302c);
    color: #a0a8a2; border-color: #344038;
}
[data-bs-theme="dark"] .timeline-marker-modern {
    border-color: var(--card-primary);
    box-shadow: 0 3px 10px var(--shadow-heavy);
}
[data-bs-theme="dark"] .page-link {
    background-color: var(--card-primary);
    border-color: var(--border-color);
    color: var(--text-primary);
}
[data-bs-theme="dark"] .page-item.disabled .page-link {
    background-color: var(--bg-light);
    border-color: var(--border-color);
    color: var(--text-muted);
}
[data-bs-theme="dark"] th a { color: var(--text-primary); }
[data-bs-theme="dark"] th a:hover { color: var(--accent-green); }

/* Dark mode: cards e formulários inherit */
[data-bs-theme="dark"] .card-modern { box-shadow: 0 4px 15px var(--shadow-color); }
[data-bs-theme="dark"] .card-modern:hover { box-shadow: 0 8px 25px var(--shadow-medium); }

/* Dark mode: Bootstrap buttons — garantir contraste */
[data-bs-theme="dark"] .btn-outline-secondary {
    --bs-btn-color: var(--text-secondary);
    --bs-btn-border-color: var(--text-muted);
    --bs-btn-hover-bg: var(--panel-hover);
    --bs-btn-hover-border-color: var(--text-secondary);
    --bs-btn-hover-color: var(--text-primary);
}
[data-bs-theme="dark"] .btn-outline-primary {
    --bs-btn-color: var(--accent-green);
    --bs-btn-border-color: var(--accent-green);
    --bs-btn-hover-bg: var(--accent-green);
    --bs-btn-hover-border-color: var(--accent-green);
    --bs-btn-hover-color: #fff;
}
[data-bs-theme="dark"] .btn-outline-danger {
    --bs-btn-color: #f08080;
    --bs-btn-border-color: #f08080;
    --bs-btn-hover-bg: rgba(240, 128, 128, 0.15);
    --bs-btn-hover-border-color: #f08080;
    --bs-btn-hover-color: #f08080;
}
[data-bs-theme="dark"] .btn-secondary {
    --bs-btn-bg: var(--card-secondary);
    --bs-btn-border-color: var(--border-color);
    --bs-btn-color: var(--text-primary);
    --bs-btn-hover-bg: var(--panel-hover);
    --bs-btn-hover-border-color: var(--text-muted);
    --bs-btn-hover-color: var(--text-primary);
}
[data-bs-theme="dark"] .btn-light {
    --bs-btn-bg: var(--card-secondary);
    --bs-btn-border-color: var(--border-color);
    --bs-btn-color: var(--text-primary);
    --bs-btn-hover-bg: var(--panel-hover);
    --bs-btn-hover-border-color: var(--text-muted);
    --bs-btn-hover-color: var(--text-primary);
}

/* Dark mode: botões outline de módulo — forçar visibilidade do texto/ícone */
[data-bs-theme="dark"] [class*="btn-outline-"]:not(.btn-outline-secondary):not(.btn-outline-primary):not(.btn-outline-danger):not(.btn-outline-success):not(.btn-outline-warning):not(.btn-outline-info):not(.btn-outline-light):not(.btn-outline-dark) {
    --bs-btn-color: currentColor;
    --bs-btn-hover-color: #fff;
}

/* Dark mode: form-select (dropdown arrows, contraste) */
[data-bs-theme="dark"] .form-select {
    --bs-form-select-bg-img: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' viewBox='0 0 16 16'%3e%3cpath fill='none' stroke='%239ca8a0' stroke-linecap='round' stroke-linejoin='round' stroke-width='2' d='m2 5 6 6 6-6'/%3e%3c/svg%3e");
}

/* Dark mode: table headers */
[data-bs-theme="dark"] .table-light th,
[data-bs-theme="dark"] .table-light td {
    background-color: var(--card-secondary) !important;
    color: var(--text-primary) !important;
    border-color: var(--border-color) !important;
}

/* Dark mode: row clicável */
[data-bs-theme="dark"] tr[data-href] { cursor: pointer; }
[data-bs-theme="dark"] tr[data-href]:hover td { background-color: var(--table-row-hover); }

/* ============================================================
   Dark mode: hover-bg-light (modais de seleção)
   ============================================================ */
.hover-bg-light {
    transition: background-color 0.2s ease;
}
.hover-bg-light:hover {
    background-color: #f8f9fa !important;
}
[data-bs-theme="dark"] .hover-bg-light:hover {
    background-color: var(--panel-hover) !important;
}
[data-bs-theme="dark"] .hover-bg-light.text-dark {
    color: var(--text-primary) !important;
}
[data-bs-theme="dark"] .hover-bg-light .text-muted {
    color: var(--text-secondary) !important;
}

/* Dark mode: avatar modal items */
[data-bs-theme="dark"] .vox-modal-user-item:hover {
    background: var(--panel-hover) !important;
    border-color: var(--border-color) !important;
}

/* Dark mode: modal de busca de similares (padrão form-check usado em vários templates) */
[data-bs-theme="dark"] #lista_similares,
[data-bs-theme="dark"] #plantio_lista_similares,
[data-bs-theme="dark"] #edit_lista_similares {
    border-color: var(--border-color) !important;
}
[data-bs-theme="dark"] #lista_similares .form-check,
[data-bs-theme="dark"] #plantio_lista_similares .form-check,
[data-bs-theme="dark"] #edit_lista_similares .form-check {
    border-color: var(--border-color) !important;
}
[data-bs-theme="dark"] #lista_similares .form-check.bg-light,
[data-bs-theme="dark"] #plantio_lista_similares .form-check.bg-light,
[data-bs-theme="dark"] #edit_lista_similares .form-check.bg-light {
    background-color: var(--card-secondary) !important;
}
[data-bs-theme="dark"] #lista_similares .form-check-label strong,
[data-bs-theme="dark"] #plantio_lista_similares .form-check-label strong,
[data-bs-theme="dark"] #edit_lista_similares .form-check-label strong {
    color: var(--text-primary);
}
[data-bs-theme="dark"] #lista_similares .list-group-item,
[data-bs-theme="dark"] #plantio_lista_similares .list-group-item,
[data-bs-theme="dark"] #edit_lista_similares .list-group-item {
    background-color: var(--card-secondary);
    border-color: var(--border-color);
    color: var(--text-primary);
}
[data-bs-theme="dark"] #lista_similares .list-group-item:hover,
[data-bs-theme="dark"] #plantio_lista_similares .list-group-item:hover,
[data-bs-theme="dark"] #edit_lista_similares .list-group-item:hover {
    background-color: var(--panel-hover);
}

/* =========================================================================
   BARRA DE AÇÕES STICKY — Rodapé de criação de recomendações
   Inspiração: mobile BarraAcoesCriar (barra inferior sempre visível)
   ========================================================================= */

.barra-acoes-sticky {
    position: fixed;
    bottom: 0;
    left: 70px;
    right: 0;
    z-index: 1020;
    display: flex;
    align-items: center;
    gap: 12px;
    min-height: 60px;
    padding: 10px 20px;
    background: var(--navbar-bg-start);
    box-shadow: 0 -4px 12px var(--shadow-medium);
    transition: left 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

body.sidebar-expanded .barra-acoes-sticky {
    left: 250px;
}

body.no-sidebar .barra-acoes-sticky {
    left: 0;
}

.barra-acoes-sticky .spacer {
    flex: 1 1 auto;
}

/* ── Botão Cancelar/Voltar (sólido, à esquerda) ── */

.btn-cancelar-barra {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    padding: 8px 16px;
    border: none;
    border-radius: 8px;
    background: #6c757d;
    color: #fff !important;
    font-size: 13px;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.2s;
    text-decoration: none !important;
    white-space: nowrap;
}

.btn-cancelar-barra:hover {
    background: #5a6268;
}

/* ── Botão Rascunho (secundário, mesma tipografia da barra) ── */

.btn-rascunho-barra {
    display: inline-flex;
    align-items: center;
    gap: 6px;
    height: 42px;
    padding: 0 20px;
    border: none;
    border-radius: 8px;
    background: #f0ad4e;
    color: #212529;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.2s;
    white-space: nowrap;
}

.btn-rascunho-barra:hover {
    background: #ec971f;
}

/* ── Botões de Ação Secundários (Foto, Mapa, Vincular) ── */

.btn-acao-barra {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 2px;
    padding: 6px 10px;
    border: none;
    border-radius: 8px;
    background: transparent;
    color: var(--chrome-text);
    cursor: pointer;
    transition: background 0.2s, color 0.2s;
    text-decoration: none;
    position: relative;
    min-width: 52px;
}

.btn-acao-barra:hover {
    background: color-mix(in srgb, var(--color-recomendacoes) 25%, transparent);
    color: var(--chrome-text-hover);
    text-decoration: none;
}

.btn-acao-barra.active {
    background: color-mix(in srgb, var(--color-recomendacoes) 40%, transparent);
    color: var(--chrome-text-hover);
}

.btn-acao-barra .acao-icone {
    font-size: 20px;
    line-height: 1;
}

.btn-acao-barra .acao-rotulo {
    font-size: 11px;
    line-height: 1.2;
    white-space: nowrap;
}

.btn-acao-barra[disabled],
.btn-acao-barra.disabled {
    color: var(--chrome-text-muted);
    opacity: 0.5;
    cursor: not-allowed;
    pointer-events: none;
}

.btn-acao-barra .badge {
    position: absolute;
    top: 0;
    right: 2px;
    font-size: 10px;
    min-width: 18px;
    padding: 2px 5px;
    background-color: var(--color-recomendacoes, #c7953d) !important;
    color: white !important;
}

/* ── Botão Principal com Progresso (Recomendar) ── */

.btn-progresso {
    position: relative;
    overflow: hidden;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    gap: 6px;
    height: 42px;
    padding: 0 20px;
    border: none;
    border-radius: 8px;
    background: var(--border-color);
    color: #fff;
    font-size: 14px;
    font-weight: 600;
    cursor: pointer;
    transition: background 0.3s, box-shadow 0.3s;
    white-space: nowrap;
    --btn-progress-color: var(--color-recomendacoes);
}

.btn-progresso::before {
    content: "";
    position: absolute;
    inset: 0;
    width: var(--progress-pct, 0%);
    background: color-mix(in srgb, var(--btn-progress-color) 70%, transparent);
    border-radius: 8px;
    transition: width 0.4s ease-in-out;
    z-index: 0;
}

.btn-progresso .btn-progresso-conteudo {
    position: relative;
    z-index: 1;
    display: inline-flex;
    align-items: center;
    gap: 6px;
}

.btn-progresso.completo {
    background: var(--btn-progress-color);
    box-shadow: 0 2px 8px color-mix(in srgb, var(--btn-progress-color) 50%, transparent);
}

.btn-progresso.completo::before {
    width: 100%;
    background: var(--btn-progress-color);
}

.btn-progresso.processando {
    pointer-events: none;
    opacity: 0.85;
}

.btn-progresso[disabled] {
    opacity: 0.6;
    cursor: not-allowed;
}

/* Variantes de cor por entidade */
.btn-progresso.btn-programacoes { --btn-progress-color: var(--color-programacoes); }
.btn-progresso.btn-templates    { --btn-progress-color: var(--color-templates); }
.btn-progresso.btn-relatorios   { --btn-progress-color: var(--color-relatorios); }

/* Largura dos botões de progresso: Programação/Recomendar = 1/3, Template = 1/9, Relatório = 1/4 */
.barra-acoes-sticky .btn-progresso {
    flex: 0 0 calc(100% / 3);
    max-width: calc(100% / 3);
}
.barra-acoes-sticky .btn-progresso.btn-templates {
    flex: 0 0 calc(100% / 9);
    max-width: calc(100% / 9);
}
.barra-acoes-sticky .btn-progresso.btn-relatorios {
    flex: 0 0 calc(100% / 4);
    max-width: calc(100% / 4);
}

/* =========================================================================
   SEÇÕES ACCORDION — Formulário de criação colapsável
   ========================================================================= */

.secao-accordion {
    border: 1px solid var(--border-color);
    border-radius: 12px;
    margin-bottom: 12px;
    background: var(--card-secondary);
    transition: border-color 0.3s;
}

.secao-accordion-header {
    display: flex;
    align-items: center;
    gap: 10px;
    padding: 14px 18px;
    cursor: pointer;
    user-select: none;
    transition: background 0.2s;
    background: var(--card-primary);
    border-radius: 12px;
}

.secao-accordion.aberta .secao-accordion-header {
    border-radius: 12px 12px 0 0;
}

.secao-accordion-header:hover {
    background: var(--panel-hover);
}

.secao-accordion-header .secao-titulo {
    flex: 1;
    font-size: 15px;
    font-weight: 600;
    color: var(--text-primary);
    margin: 0;
}

.secao-accordion-header .secao-status {
    font-size: 13px;
    padding: 2px 10px;
    border-radius: 12px;
    font-weight: 500;
}

.secao-accordion-header .toggle-icon {
    font-size: 14px;
    color: var(--text-muted);
    transition: transform 0.3s ease;
}

.secao-accordion-header[aria-expanded="true"] .toggle-icon {
    transform: rotate(180deg);
}

.secao-accordion-body {
    padding: 0 18px;
    max-height: 0;
    overflow: hidden;
    opacity: 0;
    transition: max-height 0.35s cubic-bezier(0.4, 0, 0.2, 1),
                opacity 0.25s ease,
                padding 0.35s cubic-bezier(0.4, 0, 0.2, 1);
}

.secao-accordion.aberta .secao-accordion-body {
    padding: 16px 18px;
    opacity: 1;
    /* max-height definido via JS com scrollHeight real */
}

/* ─── VoxWizard: Step Indicators ─── */
.step-indicator,
.stepper {
    display: flex;
    justify-content: center;
    align-items: center;
    margin-bottom: 2rem;
}

.step-item,
.stepper-step {
    display: flex;
    align-items: center;
}

.step-circle,
.stepper-circle {
    width: 40px;
    height: 40px;
    border-radius: 50%;
    display: flex;
    align-items: center;
    justify-content: center;
    font-weight: 700;
    font-size: 1rem;
    border: 2px solid #dee2e6;
    color: #6c757d;
    background: white;
    transition: all 0.3s ease;
}

.step-item.active .step-circle,
.stepper-step.active .stepper-circle {
    border-color: var(--bs-success);
    color: #fff;
    background: var(--bs-success);
}

.step-item.completed .step-circle,
.stepper-step.completed .stepper-circle {
    border-color: #1e7e34;
    color: #fff;
    background: #1e7e34;
}

.step-label,
.stepper-label {
    margin-left: 0.5rem;
    font-weight: 500;
    color: #6c757d;
    font-size: 0.9rem;
}

.step-item.active .step-label,
.stepper-step.active .stepper-label {
    color: var(--bs-success);
    font-weight: 600;
}

.step-item.completed .step-label,
.stepper-step.completed .stepper-label {
    color: #1e7e34;
}

.step-connector,
.stepper-line {
    width: 60px;
    height: 2px;
    background: #dee2e6;
    margin: 0 12px;
    align-self: center;
    transition: background 0.3s ease;
}

/* Painéis do wizard */
.step-panel,
.etapa-panel {
    display: none;
}

.step-panel.active,
.etapa-panel.active {
    display: block;
}

/* Dark mode: step indicators */
[data-bs-theme="dark"] .step-circle,
[data-bs-theme="dark"] .stepper-circle {
    background: var(--card-secondary, #2d3238);
    color: var(--text-muted, #6c757d);
    border-color: var(--border-color, #495057);
}

[data-bs-theme="dark"] .step-item.active .step-circle,
[data-bs-theme="dark"] .stepper-step.active .stepper-circle {
    background: var(--bs-success);
    border-color: var(--bs-success);
    color: #fff;
}

[data-bs-theme="dark"] .step-item.completed .step-circle,
[data-bs-theme="dark"] .stepper-step.completed .stepper-circle {
    background: #1e7e34;
    border-color: #1e7e34;
    color: #fff;
}

[data-bs-theme="dark"] .step-label,
[data-bs-theme="dark"] .stepper-label {
    color: var(--text-muted, #6c757d);
}

[data-bs-theme="dark"] .step-connector,
[data-bs-theme="dark"] .stepper-line {
    background: var(--border-color, #495057);
}

/* Resumo visível quando colapsado */
.secao-resumo {
    font-size: 12px;
    color: var(--text-muted);
    margin-left: 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
    max-width: 400px;
}

.secao-accordion.aberta .secao-resumo {
    display: none;
}

/* Estados visuais da seção */
.secao-accordion.secao-vazia .secao-status {
    background: var(--border-light);
    color: var(--text-muted);
}

.secao-accordion.secao-parcial .secao-status {
    background: rgba(243, 156, 18, 0.15);
    color: #e67e22;
}

.secao-accordion.secao-parcial {
    border-color: rgba(243, 156, 18, 0.3);
}

.secao-accordion.secao-completa .secao-status {
    background: rgba(40, 167, 69, 0.12);
    color: var(--accent-green);
}

.secao-accordion.secao-completa {
    border-color: rgba(40, 167, 69, 0.25);
}

.secao-accordion.secao-erro .secao-status {
    background: rgba(220, 53, 69, 0.12);
    color: #dc3545;
}

.secao-accordion.secao-erro {
    border-color: rgba(220, 53, 69, 0.3);
}

/* =========================================================================
   VALIDAÇÃO INLINE — Erros e highlights em campos
   ========================================================================= */

.campo-erro-inline {
    border-color: var(--bs-danger, #dc3545) !important;
    box-shadow: 0 0 0 0.15rem rgba(220, 53, 69, 0.2) !important;
}

.mensagem-erro {
    display: block;
    font-size: 12px;
    color: var(--bs-danger, #dc3545);
    margin-top: 4px;
    padding-left: 2px;
}

/* Pulse de highlight — usado no scroll-to-error (auto-remove em 2s) */
@keyframes highlightPulse {
    0%   { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0.5); }
    50%  { box-shadow: 0 0 0 6px rgba(243, 156, 18, 0.2); }
    100% { box-shadow: 0 0 0 0 rgba(243, 156, 18, 0); }
}

.campo-highlight-pulse {
    animation: highlightPulse 0.8s ease-in-out 2;
    border-color: #f39c12 !important;
}

/* =========================================================================
   INSUMO CARDS — Borda colorida por categoria + resumo colapsado
   ========================================================================= */

.insumo-card-categoria {
    border-left: 4px solid var(--grupo-cor, #6c757d) !important;
    transition: border-color 0.3s;
}

.insumo-resumo-colapsado {
    display: none;
    font-size: 12px;
    color: var(--text-secondary);
    padding: 0 4px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Mostrar resumo quando card está colapsado (body hidden) */
.insumo-card-categoria.collapsed .insumo-resumo-colapsado {
    display: inline-block;
}

/* =========================================================================
   WIZARD STEP INDICATOR — Etapas numeradas (reutilizável)
   ========================================================================= */

.wizard-steps {
    display: flex;
    align-items: center;
    justify-content: center;
    gap: 0;
    padding: 12px 0;
}

.wizard-step {
    display: flex;
    align-items: center;
    gap: 8px;
    font-size: 13px;
    color: var(--text-muted);
    font-weight: 500;
}

.wizard-step .step-number {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 28px;
    height: 28px;
    border-radius: 50%;
    background: var(--border-light);
    color: var(--text-muted);
    font-weight: 600;
    font-size: 13px;
    transition: background 0.3s, color 0.3s;
}

.wizard-step.ativa .step-number,
.wizard-step.completa .step-number {
    background: var(--accent-green);
    color: #fff;
}

.wizard-step.ativa .step-label,
.wizard-step.completa .step-label {
    color: var(--text-primary);
}

.wizard-step-separator {
    width: 40px;
    height: 2px;
    background: var(--border-color);
    margin: 0 8px;
    transition: background 0.3s;
}

.wizard-step-separator.completa {
    background: var(--accent-green);
}

/* =========================================================================
   MODAL DE IMAGENS POR TALHÃO — Upload wizard
   ========================================================================= */

.talhao-sidebar {
    border-right: 1px solid var(--border-color);
    max-height: 500px;
    overflow-y: auto;
}

.talhao-sidebar-item {
    padding: 10px 14px;
    cursor: pointer;
    border-bottom: 1px solid var(--border-light);
    transition: background-color 0.15s;
    display: flex;
    align-items: center;
    gap: 10px;
}

.talhao-sidebar-item:hover {
    background-color: var(--panel-hover);
}

.talhao-sidebar-item.active {
    background-color: rgba(199, 149, 61, 0.1);
    border-left: 3px solid var(--color-recomendacoes, #c7953d);
}

.talhao-sidebar-item .talhao-count {
    font-size: 0.75rem;
    padding: 2px 8px;
    border-radius: 10px;
    background-color: var(--border-light);
    color: var(--text-primary);
    margin-left: auto;
    white-space: nowrap;
}

.talhao-sidebar-item.active .talhao-count {
    background-color: var(--color-recomendacoes, #c7953d);
    color: #fff;
}

.talhao-sidebar-item .talhao-check {
    color: var(--accent-green);
    display: none;
}

.talhao-sidebar-item.has-images .talhao-check {
    display: inline;
}

.wizard-upload-area {
    min-height: 350px;
}

.wizard-upload-dropzone {
    border: 2px dashed var(--border-color);
    border-radius: 8px;
    padding: 30px;
    text-align: center;
    cursor: pointer;
    transition: all 0.2s;
}

.wizard-upload-dropzone.drag-over {
    border-color: var(--color-recomendacoes, #c7953d);
    background-color: rgba(199, 149, 61, 0.05);
}

.wizard-upload-dropzone:hover {
    border-color: var(--color-recomendacoes, #c7953d);
}

/* ──────────────────────────────────────────────────────────────────────────
 * Kebab dropdown (⋮) — arredondamento do último botão
 *
 * Bootstrap remove border-radius-right de .btn:not(:last-child). Quando o
 * botão de dropdown é seguido por <ul class="dropdown-menu"> dentro de um
 * btn-group, o <ul> é :last-child no DOM, não o <button>. Resultado: o
 * botão perde o arredondamento à direita. O fix usa --bs-btn-border-radius
 * (já definido pelo BS por tamanho sm/md/lg) para restaurar o raio correto.
 * ──────────────────────────────────────────────────────────────────────── */
.btn-group > .btn-group:last-child > .btn[data-bs-toggle="dropdown"] {
    border-top-right-radius: var(--bs-btn-border-radius) !important;
    border-bottom-right-radius: var(--bs-btn-border-radius) !important;
}

/* ──────────────────────────────────────────────────────────────────────────
 * Dropdown com animação suave (menu kebab de ações)
 * Uso: <ul class="dropdown-menu vox-dropdown-anim">
 *
 * Anima APENAS opacity para não conflitar com o transform inline que o
 * Popper.js define para posicionar o menu abaixo do botão. Animar transform
 * aqui causaria o menu aparecer na origem default e "pular" para a posição.
 * ──────────────────────────────────────────────────────────────────────── */
@keyframes voxDropdownFade {
    from { opacity: 0; }
    to   { opacity: 1; }
}

.vox-dropdown-anim.show {
    animation: voxDropdownFade 0.12s ease-out;
}

@media (prefers-reduced-motion: reduce) {
    .vox-dropdown-anim.show {
        animation: none;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
 * Mapa de Situação — View Transitions (UX-0.13 Fase 3)
 *
 * Crossfade entre breadcrumb/titulo/sidebar ao navegar entre N1<->N2 e entre
 * fazendas. Depende do navegador suportar startViewTransition (Chrome 111+,
 * Safari 18+, Firefox 127+). Browsers antigos simplesmente trocam o DOM sem
 * animacao — fallback gracioso ja embutido no controller.
 *
 * prefers-reduced-motion: zeramos a duracao (swap instantaneo) — mas o ganho
 * principal (nao recarregar a pagina) continua valendo.
 * ──────────────────────────────────────────────────────────────────────── */
::view-transition-old(root),
::view-transition-new(root) {
    animation-duration: 0.35s;
    animation-timing-function: cubic-bezier(0.4, 0, 0.2, 1);
}

@media (prefers-reduced-motion: reduce) {
    ::view-transition-old(root),
    ::view-transition-new(root) {
        animation-duration: 0s !important;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
 * Loading indicator durante SPA nav (UX-0.13 — Commit C).
 * Ativado pelo controller via body.vox-mapa-nav-loading apos 200ms de fetch
 * (evita flicker em requests rapidos).
 * ──────────────────────────────────────────────────────────────────────── */
body.vox-mapa-nav-loading { cursor: progress; }

body.vox-mapa-nav-loading::before {
    content: '';
    position: fixed;
    top: 0;
    left: 0;
    height: 3px;
    width: 30%;
    background: linear-gradient(90deg,
        transparent 0%, var(--color-mapa-situacao, #4a8a7a) 50%, transparent 100%);
    z-index: 9999;
    animation: voxMapaNavProgress 1.2s ease-in-out infinite;
    pointer-events: none;
}

@keyframes voxMapaNavProgress {
    0% { transform: translateX(-100%); }
    100% { transform: translateX(400%); }
}

@media (prefers-reduced-motion: reduce) {
    body.vox-mapa-nav-loading::before {
        animation: none;
        width: 100%;
        opacity: 0.4;
    }
}

/* ──────────────────────────────────────────────────────────────────────────
 * Fallback sutil sem View Transitions API (Firefox <127, Safari <18).
 * Crossfade por CSS nos elementos swap-OOB que o controller substitui.
 * Aplicado so quando :not(:has(...)) indica browser sem suporte nativo VT.
 * Atual: fade-in em replace de #vox-mapa-titulo e #vox-mapa-sidebar-wrapper.
 * ──────────────────────────────────────────────────────────────────────── */
@supports not (animation-timeline: view()) {
    #vox-mapa-titulo,
    #vox-mapa-sidebar-wrapper {
        animation: voxMapaFadeIn 0.25s ease-out;
    }
}

@keyframes voxMapaFadeIn {
    from { opacity: 0.4; }
    to   { opacity: 1; }
}

@media (prefers-reduced-motion: reduce) {
    @supports not (animation-timeline: view()) {
        #vox-mapa-titulo,
        #vox-mapa-sidebar-wrapper {
            animation: none;
        }
    }
}

/* ==========================================================================
 * Filtros Locais das Listas de Manejo
 * Usado em recomendacao_lista, plantio_lista, colheita_lista, programacao_lista.
 * Layout: busca (linha 1) + chips de talhao selecionados (entre linhas) +
 * picker/status chips (linha 2). Chips no estilo do mobile: nome+fazenda, X.
 * Visual: inspirado em filtros-globais; usa variaveis de tema para dark mode.
 * ========================================================================== */

.vox-manejo-filtros {
    display: flex;
    flex-direction: column;
    gap: 0.625rem;
    margin-bottom: 1.25rem;
}

.vox-manejo-filtros__linha {
    display: flex;
    flex-wrap: wrap;
    align-items: center;
    gap: 0.5rem;
}

.vox-manejo-filtros__busca {
    flex: 1 1 280px;
    min-width: 220px;
}

.vox-manejo-filtros__acoes {
    display: flex;
    gap: 0.375rem;
    flex-shrink: 0;
}

/* ---------- Status chips (multi-select, submit automatico ao clicar) ---------- */

.vox-status-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
    flex: 1 1 auto;
}

.vox-status-chips__label {
    font-size: 0.75rem;
    color: var(--text-muted, #6c757d);
    font-weight: 500;
    margin-right: 0.25rem;
    flex-shrink: 0;
}

.vox-status-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.3125rem;
    padding: 0.25rem 0.625rem;
    border-radius: 999px;
    font-size: 0.78125rem;
    font-weight: 500;
    cursor: pointer;
    border: 1.5px solid var(--chip-color, #adb5bd);
    color: var(--chip-color, #495057);
    background: transparent;
    transition: background-color 0.15s, color 0.15s, box-shadow 0.15s;
    user-select: none;
    line-height: 1.25;
    white-space: nowrap;
    position: relative;
}

.vox-status-chip input {
    position: absolute;
    opacity: 0;
    pointer-events: none;
    width: 0;
    height: 0;
}

.vox-status-chip:hover {
    background: color-mix(in srgb, var(--chip-color, #adb5bd) 12%, transparent);
}

.vox-status-chip.is-active {
    background: var(--chip-color, #adb5bd);
    color: var(--chip-text, #ffffff);
    border-color: var(--chip-color, #adb5bd);
    box-shadow: 0 1px 3px rgba(0, 0, 0, 0.12);
}

.vox-status-chip:focus-within {
    outline: 2px solid var(--chip-color, #0d6efd);
    outline-offset: 2px;
}

.vox-status-chip .vox-status-chip__icon {
    font-size: 0.75rem;
}

/* Dark mode: suaviza borda e clareia texto inativo pra nao parecer "apagado" */
[data-bs-theme="dark"] .vox-status-chip {
    border-color: color-mix(in srgb, var(--chip-color, #adb5bd) 70%, transparent);
    color: color-mix(in srgb, var(--chip-color, #adb5bd) 85%, #ffffff 15%);
}

[data-bs-theme="dark"] .vox-status-chip:hover {
    background: color-mix(in srgb, var(--chip-color, #adb5bd) 22%, transparent);
}

[data-bs-theme="dark"] .vox-status-chip.is-active {
    border-color: var(--chip-color, #adb5bd);
    color: var(--chip-text, #ffffff);
}

/* ---------- Multi-talhao picker (largura menor, estilo filtros-globais) ---------- */

.vox-talhao-picker {
    position: relative;
    flex: 0 1 320px;
    min-width: 240px;
    max-width: 320px;
}

.vox-talhao-picker__trigger {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    background-color: var(--input-bg, #f8f9fa);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 6px;
    color: var(--text-primary, #495057);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 0.15s, border-color 0.15s;
    line-height: 1.4;
    font-family: inherit;
    width: 100%;
    justify-content: space-between;
}

.vox-talhao-picker__trigger:hover {
    background-color: color-mix(in srgb, var(--input-bg, #f8f9fa) 70%, var(--border-color, #ced4da) 30%);
    border-color: var(--border-color, #ced4da);
}

.vox-talhao-picker__trigger:focus-visible,
.vox-talhao-picker[aria-expanded="true"] .vox-talhao-picker__trigger {
    outline: 2px solid var(--accent-green, #0d6efd);
    outline-offset: 1px;
}

.vox-talhao-picker__trigger.is-active {
    background-color: color-mix(in srgb, var(--accent-green, #0d6efd) 12%, var(--input-bg, transparent));
    border-color: color-mix(in srgb, var(--accent-green, #0d6efd) 45%, var(--border-color, #9ec5fe));
    color: var(--accent-green, #0d6efd);
}

.vox-talhao-picker__icon {
    opacity: 0.75;
}

.vox-talhao-picker__label {
    flex-grow: 1;
    text-align: left;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vox-talhao-picker__caret {
    font-size: 0.5625rem;
    opacity: 0.7;
    transition: transform 0.15s;
}

.vox-talhao-picker[aria-expanded="true"] .vox-talhao-picker__caret {
    transform: rotate(180deg);
}

/* Popover — largura fixa (independe da largura do trigger) */
.vox-talhao-picker__popover {
    position: absolute;
    top: calc(100% + 4px);
    left: 0;
    width: 320px;
    max-width: calc(100vw - 2rem);
    z-index: 1030;
    background: var(--card-primary, #fff);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 8px;
    box-shadow: 0 10px 25px -5px rgba(0, 0, 0, 0.18), 0 4px 10px -2px rgba(0, 0, 0, 0.10);
    max-height: 360px;
    flex-direction: column;
    overflow: hidden;
    display: none;
}

.vox-talhao-picker[aria-expanded="true"] .vox-talhao-picker__popover {
    display: flex;
}

.vox-talhao-picker__search {
    padding: 0.5rem;
    border-bottom: 1px solid var(--border-color, #e9ecef);
    flex-shrink: 0;
}

.vox-talhao-picker__search input {
    width: 100%;
    padding: 0.375rem 0.625rem;
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 4px;
    font-size: 0.8125rem;
    background: var(--input-bg, #fff);
    color: var(--text-primary, #212529);
}

.vox-talhao-picker__search input:focus {
    outline: none;
    border-color: var(--input-focus-border, #86b7fe);
    box-shadow: 0 0 0 0.15rem color-mix(in srgb, var(--input-focus-border, #86b7fe) 25%, transparent);
}

.vox-talhao-picker__opcoes {
    overflow-y: auto;
    padding: 0.25rem 0;
    flex-grow: 1;
}

.vox-talhao-picker__grupo-label {
    padding: 0.375rem 0.75rem 0.125rem;
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--text-muted, #6c757d);
    font-weight: 600;
}

.vox-talhao-picker__opcao {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.375rem 0.75rem;
    font-size: 0.8125rem;
    cursor: pointer;
    transition: background-color 0.1s;
    color: var(--text-primary, #212529);
}

.vox-talhao-picker__opcao:hover {
    background-color: var(--panel-hover, #f1f3f5);
}

.vox-talhao-picker__opcao input[type="checkbox"] {
    flex-shrink: 0;
    accent-color: var(--accent-green, #0d6efd);
    cursor: pointer;
}

.vox-talhao-picker__opcao-nome {
    flex-grow: 1;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.vox-talhao-picker__opcao-area {
    font-size: 0.75rem;
    color: var(--text-muted, #6c757d);
    flex-shrink: 0;
}

.vox-talhao-picker__vazio {
    padding: 1rem;
    text-align: center;
    font-size: 0.8125rem;
    color: var(--text-muted, #6c757d);
}

/* ---------- Chips dos talhoes selecionados (estilo mobile) ---------- */

.vox-talhao-chips {
    display: flex;
    flex-wrap: wrap;
    gap: 0.375rem;
    align-items: center;
}

.vox-talhao-chip {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
    padding: 0.1875rem 0.3125rem 0.1875rem 0.5rem;
    background: var(--panel-hover, #f1f3f5);
    border: 1px solid var(--border-color, #dee2e6);
    border-radius: 10px;
    line-height: 1.15;
}

.vox-talhao-chip__texto {
    display: flex;
    flex-direction: column;
    gap: 0;
}

.vox-talhao-chip__nome {
    font-size: 0.6875rem;
    font-weight: 500;
    color: var(--text-primary, #212529);
    line-height: 1.2;
}

.vox-talhao-chip__fazenda {
    font-size: 0.5625rem;
    color: var(--text-muted, #6c757d);
    opacity: 0.9;
    line-height: 1.15;
}

.vox-talhao-chip__remover {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 16px;
    height: 16px;
    border: 0;
    background: transparent;
    color: var(--text-muted, #6c757d);
    border-radius: 50%;
    cursor: pointer;
    padding: 0;
    font-size: 0.625rem;
    transition: background-color 0.15s, color 0.15s;
}

.vox-talhao-chip__remover:hover {
    background: #dc3545;
    color: #fff;
}

@media (prefers-reduced-motion: reduce) {
    .vox-status-chip,
    .vox-talhao-picker__trigger,
    .vox-talhao-picker__caret,
    .vox-talhao-chip__remover {
        transition: none;
    }
}

/* ---------- Estado de carregamento do container da lista ----------
 * Aplicado pelo filtros_manejo.js entre o clique no filtro e a navegacao.
 * O fade sutil mascara a "piscada" do reload full-page. Sem este fallback
 * o usuario ve um flash branco/preto durante a transicao HTTP.
 */
.vox-lista--carregando {
    opacity: 0.55;
    transition: opacity 0.12s ease-out;
    pointer-events: none;
}

@media (prefers-reduced-motion: reduce) {
    .vox-lista--carregando {
        transition: none;
    }
}