/* ContaFarma — Relatório Contabilidade (Dash)
   Identidade visual ContaFarma:
     Primária (accent):   #00BBBC (teal)
     Secundária escura:   #263846
   Padrão dark-theme (igual financeiro.php / relatorio-parceiros-tax):
   fundo em gradiente escuro, painéis claros, bordas superiores coloridas nos KPIs.

   Isolamento (Tarefa 08 / D-005): todo o arquivo vive dentro de
   @scope (.rt-app-contabilidade) — nenhuma regra daqui vaza pra outra página
   (placeholder, login, ou o relatório Parceiros/NimbusTax). `:root`/`body`/
   `.rt-app` viraram um único `:scope` (a própria div raiz do relatório,
   className="rt-app-contabilidade" em pages/relatorio_contabilidade.py) —
   mesmas variáveis/fundo/padding de antes, só que escopados. Nenhuma outra
   regra precisou mudar: @scope aplica o escopo a todo seletor comum do bloco
   automaticamente (só :root/body/* têm comportamento especial, tratado aqui). */
@scope (.rt-app-contabilidade) {

:scope {
    /* Variáveis (antes em :root) */
    --bg-1: #182833;
    --bg-2: #263846;
    --card: #ffffff;
    --ink: #1a202c;
    --muted: #64748b;
    --line: #e2e8f0;
    --accent: #00BBBC;
    --accent-dark: #263846;
    --propria: #00BBBC;
    --indicada: #7C3AED;
    --total: #3B82F6;
    --ticket: #F59E0B;
    /* Cores por contabilidade (breakdown): ContaFarma teal, Capiton laranja (capiton.com.br) */
    --contafarma: #00BBBC;
    --capiton: #FF5F2D;
    /* CHANGE 3 — espaçamento/forma uniformes de todas as seções e cards */
    --section-gap: 1.25rem;
    --card-radius: 12px;
    --card-shadow: 0 10px 30px rgba(0, 0, 0, 0.18);

    /* Fundo/tipografia (antes em body — escopado aqui, não vaza mais) */
    margin: 0;
    font-family: 'Inter', system-ui, sans-serif;
    background: linear-gradient(160deg, var(--bg-1) 0%, var(--bg-2) 100%);
    color: var(--ink);
    /* SEM min-height:100vh (Tarefa 09 / D-006) — de propósito: o container
       cobre exatamente a altura do próprio conteúdo, sem sobrar fundo escuro
       vazio abaixo dos cards quando o conteúdo é mais baixo que a tela
       (achado do Gabriel ao validar a Tarefa 08). */

    /* Layout do container (antes em .rt-app) */
    padding: 18px 22px 40px;
    /* largura cheia + espaçamento vertical UNIFORME entre todas as seções
       (KPIs, donuts, tabelas, detalhamento) via uma única variável (CHANGE 2/3) */
    width: 100%;
    /* box-sizing no PRÓPRIO container raiz: o reset `* { box-sizing }` abaixo vive
       dentro do @scope e NÃO alcança a raiz de escopo (só :scope a atinge). Sem esta
       linha, com width:100% o padding de 22px somava POR FORA da largura e gerava
       ~44px de scroll lateral (Tarefa correção-scroll). */
    box-sizing: border-box;
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
}

* {
    box-sizing: border-box;
}

/* As views Dashboard/relatório são wrappers intermediários: reproduzem o mesmo
   espaçamento vertical do .rt-app entre os blocos internos (KPIs, donuts,
   tabelas, detalhamento). O display real (flex/none) vem inline do toggle_views. */
#ct-dashboard-view,
#ct-report-view {
    display: flex;
    flex-direction: column;
    gap: var(--section-gap);
}

/* Cabeçalho */
.rt-header {
    display: flex;
    align-items: center;
    gap: 18px;
    margin-bottom: 0;   /* o gap do .rt-app já separa as seções */
    flex-wrap: wrap;
}

.rt-brand {
    font-family: 'Rubik', sans-serif;
    font-weight: 700;
    font-size: 1.25rem;
    color: var(--accent);
    letter-spacing: 0.02em;
}

.rt-tabs {
    display: flex;
    gap: 6px;
    flex-wrap: wrap;
}

.rt-tab {
    border: none;
    background: rgba(255, 255, 255, 0.06);
    color: #cbd5e1;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    font-weight: 500;
    cursor: pointer;
    transition: background 0.15s;
}

.rt-tab:hover:not(:disabled) {
    background: rgba(255, 255, 255, 0.12);
}

.rt-tab-active {
    background: var(--accent) !important;
    color: #06202b !important;
    font-weight: 700;
    opacity: 1 !important;
}

/* Bloco da direita do cabeçalho: filtro de data + botão Atualizar */
.rt-header-right {
    margin-left: auto;
    display: flex;
    align-items: center;
    gap: 12px;
    flex-wrap: wrap;
}

.rt-datawrap {
    position: relative;
}

.rt-data-panel {
    display: none;
    position: absolute;
    top: calc(100% + 8px);
    right: 0;
    z-index: 2000;
    background: #fff;
    border-radius: 10px;
    box-shadow: 0 12px 40px rgba(0, 0, 0, 0.28);
    padding: 14px 16px;
}

.rt-data-panel.open {
    display: block;
}

.rt-data-fields {
    display: flex;
    gap: 14px;
}

.rt-data-field {
    display: flex;
    flex-direction: column;
    gap: 5px;
}

.rt-data-flabel {
    font-size: 0.7rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: #64748b;
}

.rt-data-limpar {
    margin-top: 12px;
    background: #fff0f0;
    color: #c53030;
    border: 1px solid #fecaca;
    border-radius: 6px;
    padding: 5px 14px;
    font-size: 0.8rem;
    font-weight: 700;
    cursor: pointer;
}

.rt-data-limpar:hover {
    background: #fee2e2;
}

.rt-refresh {
    border: 1px solid rgba(255, 255, 255, 0.18);
    background: rgba(255, 255, 255, 0.06);
    color: #e2e8f0;
    padding: 8px 16px;
    border-radius: 8px;
    font-size: 0.85rem;
    cursor: pointer;
}

.rt-refresh:hover {
    background: rgba(255, 255, 255, 0.14);
}

/* Cards */
.rt-card {
    background: var(--card);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    overflow: hidden;
    margin-bottom: 0;   /* espaçamento vem do gap do .rt-app / dos grids */
}

.rt-card-head {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 12px 16px;
    border-bottom: 1px solid var(--line);
    font-size: 0.72rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.06em;
    color: var(--muted);
}

.rt-card-head i {
    color: var(--accent);
}

.rt-card-body {
    padding: 6px 10px 10px;
}

.rt-col-full {
    width: 100%;
}

/* ── Bloco 1: KPIs (4 cards com borda superior colorida) ──────────────────── */
.rt-kpi-row {
    display: grid;
    grid-template-columns: repeat(4, minmax(0, 1fr));
    gap: 16px;
    margin-bottom: 0;
}

@media (max-width: 900px) {
    .rt-kpi-row {
        grid-template-columns: 1fr 1fr;
    }
}

.rt-kpi {
    background: var(--card);
    border-radius: var(--card-radius);
    box-shadow: var(--card-shadow);
    padding: 16px 18px;
    height: 100%;          /* todas as 4 colunas com a MESMA altura */
    display: flex;
    flex-direction: column;   /* linha de cima (ícone+valor) + breakdown full-width */
    border-top: 4px solid var(--accent);
}
.rt-kpi-top { display: flex; align-items: center; gap: 14px; }

.kpi-accent-total    { border-top-color: var(--total); }
.kpi-accent-propria  { border-top-color: var(--propria); }
.kpi-accent-indicada { border-top-color: var(--indicada); }
.kpi-accent-ticket   { border-top-color: var(--ticket); }

.rt-kpi-icon {
    font-size: 1.5rem;
    opacity: 0.85;
}
.kpi-accent-total    .rt-kpi-icon { color: var(--total); }
.kpi-accent-propria  .rt-kpi-icon { color: var(--propria); }
.kpi-accent-indicada .rt-kpi-icon { color: var(--indicada); }
.kpi-accent-ticket   .rt-kpi-icon { color: var(--ticket); }

.rt-kpi-body { min-width: 0; }

.rt-kpi-label {
    font-size: 0.68rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.05em;
    color: var(--muted);
}

.rt-kpi-value {
    font-family: 'Rubik', sans-serif;
    font-size: 1.45rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.25;
}

.rt-kpi-sub {
    font-size: 0.72rem;
    color: #94a3b8;
    margin-top: 1px;
}

/* ── Breakdown ContaFarma × Capiton — divisão vertical dos cards KPI ───────── */
.rt-kpi-split {
    display: flex;
    margin-top: 10px;
    padding-top: 8px;
    border-top: 1px solid rgba(148, 163, 184, 0.4);
}
/* linha horizontal com a MESMA cor da barra do topo do card (opac. ~0.4),
   igual à divisória vertical ContaFarma | Capiton */
.kpi-accent-total    .rt-kpi-split { border-top-color: color-mix(in srgb, var(--total)    40%, transparent); }
.kpi-accent-propria  .rt-kpi-split { border-top-color: color-mix(in srgb, var(--propria)  40%, transparent); }
.kpi-accent-indicada .rt-kpi-split { border-top-color: color-mix(in srgb, var(--indicada) 40%, transparent); }
.kpi-accent-ticket   .rt-kpi-split { border-top-color: color-mix(in srgb, var(--ticket)   40%, transparent); }
.rt-kpi-half {
    flex: 1 1 0;
    min-width: 0;
    padding: 0 2px;
}
/* linha divisória vertical fina — cor = a da barra do topo daquele card (opac. ~0.4) */
.rt-kpi-half-right { border-left: 1px solid rgba(148, 163, 184, 0.4); padding-left: 8px; }
.kpi-accent-total    .rt-kpi-half-right { border-left-color: color-mix(in srgb, var(--total)    40%, transparent); }
.kpi-accent-propria  .rt-kpi-half-right { border-left-color: color-mix(in srgb, var(--propria)  40%, transparent); }
.kpi-accent-indicada .rt-kpi-half-right { border-left-color: color-mix(in srgb, var(--indicada) 40%, transparent); }
.kpi-accent-ticket   .rt-kpi-half-right { border-left-color: color-mix(in srgb, var(--ticket)   40%, transparent); }
.rt-kpi-half-label {
    font-size: 0.6rem;
    font-weight: 700;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    color: #94a3b8;
    margin-bottom: 2px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rt-kpi-half-val {
    font-family: 'Rubik', sans-serif;
    font-size: 0.9rem;
    font-weight: 700;
    color: var(--ink);
    line-height: 1.2;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}
.rt-kpi-half-qtd { font-size: 0.66rem; color: #a0aec0; margin-top: 1px; }
/* cor por contabilidade só no LABEL e na QTD (o valor em R$ mantém a cor atual) */
.rt-kpi-half-cf  .rt-kpi-half-label, .rt-kpi-half-cf  .rt-kpi-half-qtd { color: var(--contafarma); }
.rt-kpi-half-cap .rt-kpi-half-label, .rt-kpi-half-cap .rt-kpi-half-qtd { color: var(--capiton); }

/* Blocos ContaFarma/Capiton clicáveis → cross-filter por contabilidade */
.rt-kpi-half-click { cursor: pointer; border-radius: 6px; transition: background 0.12s, box-shadow 0.12s; }
.rt-kpi-half-click:hover { background: rgba(148, 163, 184, 0.10); }
/* indicador discreto de selecionado: fundo levemente tingido + anel fino na cor */
.contab-sel-contafarma .rt-kpi-half-cf {
    background: color-mix(in srgb, var(--contafarma) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--contafarma) 55%, transparent);
}
.contab-sel-capiton .rt-kpi-half-cap {
    background: color-mix(in srgb, var(--capiton) 12%, transparent);
    box-shadow: inset 0 0 0 1px color-mix(in srgb, var(--capiton) 55%, transparent);
}

/* Erro */
.rt-error {
    background: #fef2f2;
    color: #b91c1c;
    border: 1px solid #fecaca;
    border-radius: 10px;
    padding: 12px 16px;
    margin-bottom: 16px;
    font-size: 0.9rem;
}

/* ── Tabelas (HTML) — Bloco 2 e Bloco 3 ───────────────────────────────────── */
.rt-table-click {
    width: 100%;
    border-collapse: collapse;
    font-family: 'Inter', sans-serif;
    font-size: 12.5px;
}

.rt-table-click thead th {
    background: #f8fafc;
    color: #475569;
    font-weight: 600;
    text-transform: uppercase;
    font-size: 10.5px;
    letter-spacing: 0.04em;
    padding: 8px 10px;
    position: sticky;
    top: 0;
}

.rt-table-click td {
    padding: 8px 10px;
    border-bottom: 1px solid #f1f5f9;
}

.rt-status-row:hover {
    background: #f8fafc;
}

/* Bloco 2: linha de vendedor (clicável) — sem expansão; clique = cross-filter */
.rt-vend-row {
    cursor: pointer;
    transition: background 0.12s;
}

.rt-vend-row:hover {
    background: #f0fdfd;   /* teal bem claro */
}

/* Linha do vendedor do cross-filter ativo */
.rt-vend-row.rt-vend-active {
    background: #e6fafa;
}

.rt-vend-row.rt-vend-active td {
    font-weight: 600;
}

/* Sublinhas por contabilidade (ContaFarma/Capiton) — subordinadas ao vendedor */
.rt-vend-row td { border-bottom: none; font-weight: 700; }  /* vendedor: linha inteira em negrito, cola nas sublinhas */
.rt-vend-sub td {
    padding: 2px 10px;
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 400;   /* sublinhas SEM negrito */
    border-bottom: none;
}
.rt-vend-sub td:first-child { padding-left: 26px; }        /* recuo */
.rt-vend-sub-end td { border-bottom: 1px solid #e2e8f0; }  /* fecha o grupo */
/* cor por contabilidade — linha inteira (nome + valores) */
.rt-vend-sub-cf  td { color: var(--contafarma); }
.rt-vend-sub-cap td { color: var(--capiton); }

/* Bloco 2 direita: linha de tipo de contrato (clicável) = filtro tipo_contrato */
.rt-tipo-row {
    cursor: pointer;
    transition: background 0.12s;
}

.rt-tipo-row:hover {
    background: #f0fdfd;
}

.rt-tipo-row.rt-tipo-active {
    background: #e6fafa;
}

.rt-tipo-row.rt-tipo-active td {
    font-weight: 600;
}

/* Sublinhas por contabilidade (ContaFarma/Capiton) — subordinadas ao tipo */
.rt-tipo-row td { border-bottom: none; font-weight: 700; }  /* tipo: linha inteira em negrito, cola nas sublinhas */
.rt-tipo-sub td {
    padding: 2px 10px;
    font-size: 0.72rem;
    color: #94a3b8;
    font-weight: 400;   /* sublinhas SEM negrito */
    border-bottom: none;
}
.rt-tipo-sub td:first-child { padding-left: 26px; }        /* recuo */
.rt-tipo-sub-end td { border-bottom: 1px solid #e2e8f0; }  /* fecha o grupo */
/* cor por contabilidade — linha inteira (nome + valores) */
.rt-tipo-sub-cf  td { color: var(--contafarma); }
.rt-tipo-sub-cap td { color: var(--capiton); }

.rt-detail-empty {
    padding: 10px 16px;
    font-size: 0.82rem;
    color: #94a3b8;
    font-style: italic;
}

.rt-empty {
    color: #a0aec0;
    font-size: 0.85rem;
    padding: 16px;
    text-align: center;
}

/* ── Donut sunburst (dois anéis) + legenda ────────────────────────────────── */
.ct-donut-card .rt-card-head { position: relative; }

/* Duas metades EXATAS de 50% (CHANGE 1): esquerda = donut, direita = legenda. */
.ct-donut {
    display: flex;
    align-items: stretch;
    width: 100%;
    padding: 6px 10px;
}

/* Metade ESQUERDA — donut centrado, overflow visível p/ os rótulos das linhas-guia. */
.ct-donut-left {
    flex: 0 0 50%;
    max-width: 50%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
    overflow: visible;
}

/* Metade DIREITA — legenda centrada (horizontal + vertical) dentro dos 50%. */
.ct-donut-right {
    flex: 0 0 50%;
    max-width: 50%;
    min-width: 0;
    display: flex;
    align-items: center;
    justify-content: center;
}

/* Deslocamento do conjunto anel+legenda no Dashboard */
.ct-donut--dashboard {
    justify-content: flex-end;
}

.ct-donut--dashboard .ct-donut-right {
    justify-content: flex-end;
    padding-right: 16px;
}

.ct-donut--dashboard .ct-donut-left {
    justify-content: flex-end;
    padding-right: 16px;
}

.ct-donut-circle {
    flex: 0 0 auto;
}

/* Tooltip do Plotly + rótulos das linhas-guia não podem ser recortados */
.ct-donut-left,
.ct-donut-circle,
.ct-donut-circle .js-plotly-plot,
.ct-donut-circle .plot-container,
.ct-donut-circle svg { overflow: visible !important; }
.rt-card.ct-donut-card { overflow: visible; }

.ct-donut-legend {
    width: 240px;
    max-width: 100%;   /* mantém a largura reduzida das barras dentro da metade direita */
    min-width: 0;
    /* Coluna ÚNICA vertical — um vendedor por linha */
    display: flex;
    flex-direction: column;
    gap: 8px;
    max-height: 380px;
    overflow-y: auto;
    padding-right: 4px;
}

.ct-leg-item {
    display: flex;
    align-items: flex-start;
    gap: 8px;
    padding: 5px 8px;
    border-radius: 7px;
    cursor: pointer;
    transition: opacity 0.12s, background 0.12s;
}
.ct-leg-item:hover { background: #f1f5f9; }
.ct-leg-item.ct-dim { opacity: 0.32; }
.ct-leg-item.ct-leg-active { background: #e6fafa; }

.ct-leg-dot {
    width: 11px;
    height: 11px;
    border-radius: 50%;
    flex: 0 0 auto;
    margin-top: 3px;
}

.ct-leg-main { flex: 1 1 auto; min-width: 0; }

.ct-leg-top {
    display: flex;
    justify-content: space-between;
    align-items: baseline;
    gap: 8px;
}

.ct-leg-name {
    font-family: 'Inter', sans-serif;
    font-size: 12px;
    font-weight: 600;
    color: #1f2937;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.ct-leg-pct {
    font-size: 11px;
    font-weight: 700;
    color: #64748b;
    flex: 0 0 auto;
}

.ct-leg-bar {
    display: flex;
    height: 6px;
    width: 100%;
    margin-top: 4px;
    border-radius: 3px;
    overflow: hidden;
    background: #eef2f5;
}
.ct-leg-bar-seg { height: 100%; }

/* ── Chip de filtro ativo ─────────────────────────────────────────────────── */
.ct-chip-wrap {
    margin-left: auto;
    align-items: center;
    gap: 8px;
    background: #e6fafa;
    border: 1px solid #99e3e4;
    border-radius: 999px;
    padding: 3px 6px 3px 12px;
    font-size: 0.72rem;
    font-weight: 700;
    color: #0a6e73;
    text-transform: none;
    letter-spacing: 0;
}
.ct-chip-wrap i { color: var(--accent); font-size: 0.7rem; }
.ct-chip-text { white-space: nowrap; }
.ct-chip-x {
    border: none;
    background: #00BBBC;
    color: #fff;
    width: 18px;
    height: 18px;
    line-height: 1;
    border-radius: 50%;
    font-size: 13px;
    font-weight: 700;
    cursor: pointer;
    display: flex;
    align-items: center;
    justify-content: center;
    padding: 0;
}
.ct-chip-x:hover { background: #08a0a1; }

/* ── Bloco 2: duas tabelas lado a lado (~65% / ~35%) ──────────────────────── */
.ct-two-col {
    display: grid;
    grid-template-columns: 66fr 34fr;
    gap: var(--section-gap);
    align-items: stretch;   /* os dois cards ocupam a MESMA altura (FIX 3) */
}
/* Altura compartilhada fixa: a tabela mais curta (Tipo de Contrato) estica
   p/ acompanhar a mais alta (Vendedor). O corpo rola se passar do limite. */
.ct-two-col .rt-card {
    margin-bottom: 0;
    min-height: 360px;
    display: flex;
    flex-direction: column;
}
.ct-two-col .rt-card-body {
    flex: 1 1 auto;
    overflow: auto;
}

@media (max-width: 1000px) {
    .ct-two-col { grid-template-columns: 1fr; }
}

/* ── Dashboard: dois cards 50/50 (Distribuição por Vendedor · Parceiros) ───── */
.ct-dash-grid {
    display: grid;
    grid-template-columns: 1fr 1fr;
    gap: var(--section-gap);
    align-items: stretch;   /* os dois cards com a MESMA altura */
}
.ct-dash-grid .rt-card { height: 100%; min-height: 540px; display: flex; flex-direction: column; }
.ct-dash-grid .rt-card-body { flex: 1 1 auto; display: flex; align-items: center; }
@media (max-width: 1000px) {
    .ct-dash-grid { grid-template-columns: 1fr; }
}

/* ── Linha dos dois donuts (Equipe ~34% · por vendedor ~66%) ──────────────── */
.ct-donut-row {
    display: grid;
    grid-template-columns: 66fr 34fr;
    gap: var(--section-gap);
    align-items: stretch;   /* os dois cards com a MESMA altura */
}
/* Cards do donut mais altos (espaço p/ rótulos acima/abaixo); os dois iguais.
   A linha de tabelas abaixo perde altura proporcionalmente (ok por spec). */
.ct-donut-row .rt-card { height: 100%; min-height: 540px; display: flex; flex-direction: column; }
.ct-donut-row .rt-card-body { flex: 1 1 auto; display: flex; align-items: center; }

@media (max-width: 1000px) {
    .ct-donut-row { grid-template-columns: 1fr; }
}

/* Donut 2 — Equipe (compacto, vertical) */
.ct-team-body {
    flex-direction: column;
    gap: 10px;
    justify-content: center;
}
.ct-team-circle { flex: 0 0 auto; }
.ct-team-circle,
.ct-team-circle .js-plotly-plot,
.ct-team-circle .plot-container,
.ct-team-circle svg { overflow: visible !important; }

.ct-teamleg {
    display: flex;
    gap: 18px;
    flex-wrap: wrap;
    justify-content: center;
}
.ct-teamleg-item { display: flex; align-items: center; gap: 7px; }
.ct-teamleg-name { font-size: 12px; font-weight: 600; color: #334155; }
.ct-teamleg-pct { font-size: 12px; font-weight: 700; color: #64748b; }

/* Rodapé da legenda do donut por vendedor (Interno/Indicado + caption) */
.ct-leg-foot {
    grid-column: 1 / -1;
    margin-top: 6px;
    padding-top: 8px;
    border-top: 1px solid #eef2f5;
}
.ct-leg-foot-row { display: flex; align-items: center; gap: 7px; }
.ct-leg-foot-name { font-size: 11.5px; font-weight: 600; color: #475569; }
.ct-leg-foot-cap {
    margin-top: 4px;
    font-size: 10.5px;
    color: #94a3b8;
    font-style: italic;
}

/* ── Detalhamento (DataTable) — link de ID em markdown ────────────────────── */
#tbl-detalhamento a {
    color: var(--accent);
    font-weight: 600;
    text-decoration: none;
}
#tbl-detalhamento a:hover { text-decoration: underline; }

/* ── Seletor de mês (date_picker_fix.js) — dropdown PT-BR no calendário ────── */
.CalendarMonth[data-visible="true"] .CalendarMonth_caption { cursor: pointer; }
.CalendarMonth[data-visible="true"] .CalendarMonth_caption strong {
    border-bottom: 1px dashed #00BBBC;
    padding-bottom: 1px;
}
.rt-monthdd {
    position: absolute;
    z-index: 100;
    background: #ffffff;
    border: 1px solid #d5dde3;
    border-radius: 8px;
    box-shadow: 0 6px 20px rgba(38, 56, 70, 0.18);
    padding: 4px;
    /* Layout vertical: 2 colunas × 6 linhas, fluxo por COLUNA (Jan–Jun | Jul–Dez).
       Também é forçado inline pelo date_picker_fix.js. */
    display: grid;
    grid-auto-flow: column;
    grid-template-rows: repeat(6, auto);
    grid-template-columns: repeat(2, 1fr);
    gap: 2px;
    width: 200px;
}
.rt-monthdd-item {
    padding: 6px 10px;
    font-size: 12.5px;
    color: #263846;
    border-radius: 6px;
    cursor: pointer;
    text-align: center;
    white-space: nowrap;
}
.rt-monthdd-item:hover { background: #e6f8f8; }
.rt-monthdd-item.rt-monthdd-active {
    background: #00BBBC;
    color: #ffffff;
    font-weight: 600;
}

} /* fim @scope (.rt-app-contabilidade) */