/* ============================================================
   Dashboard Comercial — Tema visual (replicando o mockup)
   ============================================================ */

:root {
  --sidebar-bg-1: #5B0A0A;
  --sidebar-bg-2: #3D0707;
  --bg: #F6F7FB;
  --card: #FFFFFF;
  --text: #1F2733;
  --muted: #6B7280;
  --primary: #2D4F8A;
  --positive: #1E9E5A;
  --negative: #C0392B;
  --border: #E9ECF2;

  /* Tokens de design premium */
  --radius: 14px;
  --radius-sm: 10px;
  --shadow-sm: 0 1px 2px rgba(16,24,40,0.05), 0 1px 3px rgba(16,24,40,0.06);
  --shadow-md: 0 4px 12px rgba(16,24,40,0.08);
  --shadow-lg: 0 12px 28px rgba(45,79,138,0.16);
  --kpi-glow: none;

  /* Paleta ACL Data — usada no portal de abertura */
  --duby-bg: #ffffff;
  --duby-principal: #1F6AAB;   /* azul médio (texto DATA da logo) */
  --duby-comp-1: #1A5790;      /* hover */
  --duby-comp-2: #14416E;      /* gradiente médio */
  --duby-tipografia: #0F2545;  /* texto principal navy */
  --duby-extra: #5DC1E8;       /* ciano do swoosh — acento */

  /* Gradiente azul ACL Data (anexo Figma) — fundo do login */
  --acl-grad-1: #30648A;
  --acl-grad-2: #5FBADD;

  /* Login dark navy (paleta do arquivo da logo ACL Data) */
  --login-bg-glow: #16315C;   /* brilho azul atrás da logo (centro) */
  --login-bg-deep: #0C1E3D;   /* navy base */
  --login-bg-edge: #081328;   /* navy nas bordas */
  --login-card:    #122A4D;   /* card um pouco mais claro que o fundo */
  --login-card-bd: rgba(255,255,255,0.10);
  --login-input:   #0E2142;   /* fundo dos inputs */
  --login-input-bd: rgba(255,255,255,0.16);
  --login-text:    #EAF1F9;   /* texto claro */
  --login-muted:   #93A4BA;   /* labels/subtítulo */
}

/* ============== DARK MODE OVERRIDES =============== */
[data-theme="dark"] {
  --bg: #090B13;
  --card: #12141F;
  --text: #D7DBE3;
  --muted: #8A91A0;
  --primary: #5B86C7;
  /* Traço translúcido (branco a 8%) em vez de cinza sólido: lê como borda de
     material captando luz, não como linha desenhada — é essa a diferença
     entre um dark mode "cinza" e um dark mode premium (Linear/Stripe/Vercel).
     Se ajusta sozinho a qualquer superfície por trás, sem hex por caso. */
  --border: rgba(255,255,255,0.08);
  --border-soft: rgba(255,255,255,0.05);
  --shadow-sm: 0 1px 3px rgba(0,0,0,0.55);
  --shadow-md: 0 6px 18px rgba(0,0,0,0.62);
  --shadow-lg: 0 14px 32px rgba(0,0,0,0.72);
  --kpi-glow: 0 0 18px rgba(91,134,199,0.28);
  --chart-text: color-mix(in srgb, var(--empresa-cor, #E0E0E0) 55%, white);
}
/* --bg/--card/--primary/--kpi-glow acima são só o fallback (fora de página
   com empresa — admin, login). Dentro de uma página de dashboard real
   (.vendas-dashboard, onde --empresa-cor já foi setada inline por
   pages/*.py — ver pages/vendas.py::layout), redeclaramos os quatro
   DERIVADOS da própria --empresa-cor via color-mix(), igual --chart-text já
   fazia — precisa ser redeclarado NO MESMO elemento (ou abaixo) que define
   --empresa-cor, já que custom property não "vê" valores de descendentes.
   Cada empresa passa a ter o seu próprio escuro em vez de um navy genérico
   pra todo mundo. */
[data-theme="dark"] .vendas-dashboard {
  --bg: color-mix(in srgb, var(--empresa-cor, #1F3864) 16%, #05060A 84%);
  --card: color-mix(in srgb, var(--empresa-cor, #1F3864) 28%, #05060A 72%);
  --primary: color-mix(in srgb, var(--empresa-cor, #5B86C7) 70%, white 30%);
  --kpi-glow: 0 0 18px color-mix(in srgb, var(--empresa-cor, #5B86C7) 45%, transparent);
}
[data-theme="dark"] .main-content {
  background: var(--bg);
  color: var(--text);
}
[data-theme="dark"] body,
[data-theme="dark"] html,
[data-theme="dark"] #react-entry-point,
[data-theme="dark"] #_dash-app-content { background: var(--bg); color: var(--text); }
[data-theme="dark"] .panel {
  /* Gradiente quase imperceptível (topo levemente mais claro) + friso interno
     no bordo superior: simula a superfície pegando uma luz de cima, em vez de
     uma cor chapada — o "bevel" sutil que separa um cartão premium de uma caixa. */
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 100%, white 4%), var(--card) 140%);
  border-color: var(--border);
  box-shadow: inset 0 1px 0 var(--border-soft), 0 1px 3px rgba(0,0,0,0.4);
}
[data-theme="dark"] .panel:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow: inset 0 1px 0 var(--border-soft), var(--shadow-lg);
}
[data-theme="dark"] .page-title { color: var(--text); }
[data-theme="dark"] .page-title b { color: #FFF; }
/* Mistura com branco em vez de usar --empresa-cor cru: a cor da marca é
   escolhida pra contraste em fundo CLARO (ex.: um vermelho escuro), e no
   dark mode ficava ilegível contra o fundo escuro do painel — o fallback
   (#E0E0E0) nunca entrava em ação porque a variável está sempre definida. */
[data-theme="dark"] .panel-title { color: var(--chart-text); }

/* Ticks de eixo e rótulos de valor das barras (ano atual) herdam a cor padrão
   do layout (definida em Python, sempre clara — _layout_base em charts.py) e
   só ficam escuras aqui por um bug de refresh: o Plotly.react() de cada
   atualização de dados reaplica a figure ORIGINAL do Python (fundo claro) e
   sobrescreve o relayout de tema que o clientside callback já tinha feito —
   esse relayout só roda de novo em troca de tema/sidebar, não em cada refresh
   de dados. `!important` no `fill` do SVG resolve na raiz: sobrevive a
   qualquer Plotly.react futuro, sem precisar reaplicar JS a cada callback.
   Cor igual à do título do painel, para os dois lerem como o mesmo texto. */
[data-theme="dark"] .js-plotly-plot .xtick text,
[data-theme="dark"] .js-plotly-plot .ytick text,
[data-theme="dark"] .js-plotly-plot .bartext,
[data-theme="dark"] .js-plotly-plot .legendtext {
  fill: var(--chart-text) !important;
}
/* "FATURAMENTO MENSAL POR VENDEDOR" (Monte Claro): rótulo de valor no topo de
   cada ponto usa mode="...+text" do Scatter (`.textpoint`, classe própria —
   não pega na regra acima, que é só ticks/bartext/legendtext). Testado: um
   `textfont.color: var(--chart-text)` passado pro Plotly NÃO funciona — a API
   de cor dele não resolve custom properties, só literais — daqui de fora, via
   CSS puro no SVG, resolve normal. Escopado ao id do gráfico (não ao
   `.js-plotly-plot` geral) porque outros gráficos usam `.textpoint` com cor
   PRÓPRIA intencional (ex.: linha do ano anterior) — um `!important` global
   apagaria essa cor também. */
[data-theme="dark"] #g-vend-mensal .js-plotly-plot .textpoint text {
  fill: var(--chart-text) !important;
}
[data-theme="dark"] .filter-label { color: var(--muted); }
[data-theme="dark"] .last-update { color: var(--muted); }
[data-theme="dark"] .form-label { color: #B8BCC4; }
[data-theme="dark"] .form-hint { color: #888; }
[data-theme="dark"] .form-input,
[data-theme="dark"] .form-dd .Select-control,
[data-theme="dark"] .dim-dropdown .Select-control,
[data-theme="dark"] .Select.is-focused > .Select-control {
  background: #262A31 !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
[data-theme="dark"] .Select-value-label,
[data-theme="dark"] .Select-placeholder,
[data-theme="dark"] .Select-input > input { color: var(--text) !important; }
[data-theme="dark"] .Select-menu-outer {
  background: #262A31 !important;
  border-color: var(--border) !important;
  color: var(--text) !important;
}
[data-theme="dark"] .VirtualizedSelectOption { color: var(--text); }
[data-theme="dark"] .VirtualizedSelectFocusedOption { background: #2D3138 !important; }
[data-theme="dark"] .btn-toolbar {
  background: linear-gradient(180deg, color-mix(in srgb, #262A31 100%, white 5%), #262A31);
  color: var(--text);
  border-color: var(--border);
  box-shadow: inset 0 1px 0 var(--border-soft);
}
[data-theme="dark"] .btn-toolbar.btn-primary {
  background: linear-gradient(180deg, color-mix(in srgb, var(--primary) 100%, white 12%), var(--primary));
  color: #FFF;
}
[data-theme="dark"] .data-table { color: var(--text); }
[data-theme="dark"] .data-table th { background: #262A31; color: var(--text); border-color: var(--border); }
[data-theme="dark"] .data-table td { border-color: var(--border); }
[data-theme="dark"] .data-table tbody tr:nth-child(odd) { background: #1B1E24; }
[data-theme="dark"] .data-table tbody tr:hover td { background: #262A31; }
[data-theme="dark"] .kpi-card {
  background: linear-gradient(180deg, color-mix(in srgb, var(--card) 100%, white 4%), var(--card) 140%);
  border-color: var(--border);
  box-shadow: inset 0 1px 0 var(--border-soft), var(--shadow-sm);
}
[data-theme="dark"] .kpi-card:hover {
  border-color: color-mix(in srgb, var(--primary) 45%, var(--border));
  box-shadow: inset 0 1px 0 var(--border-soft), var(--shadow-lg);
}
[data-theme="dark"] .kpi-icon {
  /* Círculo do ícone com leve profundidade: gradiente diagonal na própria cor
     de acento (marca/filial) + friso interno, em vez do preenchimento chapado. */
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--kpi-accent, var(--empresa-cor, var(--primary))) 24%, var(--card)),
    color-mix(in srgb, var(--kpi-accent, var(--empresa-cor, var(--primary))) 10%, var(--card)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.08), 0 2px 8px rgba(0,0,0,0.35);
}
[data-theme="dark"] .kpi-value { color: #F0F2F6; }
[data-theme="dark"] .kpi-title { color: var(--muted); }
[data-theme="dark"] .delta-label { color: #888; }
[data-theme="dark"] .dev-table thead th,
[data-theme="dark"] .conf-table thead th {
  background: var(--card);
  color: var(--empresa-cor, #E0E0E0);
  border-color: var(--border);
}
[data-theme="dark"] .dev-table tbody td,
[data-theme="dark"] .conf-table tbody td {
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .dev-table tbody tr:hover td,
[data-theme="dark"] .conf-table tbody tr:hover td {
  background: #262A31;
}
[data-theme="dark"] .dev-table tfoot td { background: #262A31; }
[data-theme="dark"] .dev-table tbody tr.dev-row-selected td,
[data-theme="dark"] .conf-table tbody tr.conf-row-selected td {
  background: #232838;
}
[data-theme="dark"] .chip {
  background: #262A31;
  border-color: var(--border);
  color: var(--text);
}
[data-theme="dark"] .audit-changes {
  background: #1B1E24;
  border-left-color: var(--border);
}
[data-theme="dark"] .audit-detail-line { color: var(--text); }
[data-theme="dark"] .audit-field { color: #B8BCC4; }
[data-theme="dark"] .audit-before { background: #3a1f1f; color: #FF6E6E; }
[data-theme="dark"] .audit-after { background: #1f3a26; color: #7CD789; }
/* Compras DataTable */
[data-theme="dark"] .dash-spreadsheet-container .dash-spreadsheet-inner table {
  background: var(--card);
  color: var(--text);
}
[data-theme="dark"] .dash-spreadsheet-container .dash-spreadsheet-inner th {
  background: var(--primary) !important;
}
[data-theme="dark"] .dash-cell {
  background: var(--card) !important;
  color: var(--text) !important;
  border-color: var(--border) !important;
}
[data-theme="dark"] .dash-cell.focused { background: #2D3138 !important; }

/* ============== AG Grid — base compartilhada (Previsão, Produto, ...) =====
   Marcador `.acl-ag-grid` comum a toda tabela AG Grid do dashboard (junto do
   className de tema do próprio AG Grid, ex. "ag-theme-quartz acl-ag-grid"),
   pra não duplicar essa base a cada página nova migrada de dash_table. */
.acl-ag-grid {
  --ag-font-family: "Segoe UI", system-ui, Arial, sans-serif;
  --ag-font-size: 14px;
  --ag-header-background-color: var(--empresa-cor, #1F3868);
  --ag-header-foreground-color: #FFFFFF;
  --ag-header-font-weight: 700;
  --ag-background-color: var(--card, #FFFFFF);
  --ag-foreground-color: var(--text, #1F2733);
  --ag-border-color: var(--border, #E9ECF2);
  --ag-row-border-color: var(--border, #E9ECF2);
  --ag-odd-row-background-color: #FAFAFA;
  --ag-row-hover-color: #F0F3FA;
  --ag-cell-horizontal-padding: 8px;
  border: 1px solid var(--border, #E5E5E5);
  border-radius: 6px;
}
.acl-ag-grid .ag-header-cell-label,
.acl-ag-grid .ag-header-group-cell-label { justify-content: center; }
/* O label do header de grupo (ex.: "Treze"/"Jardins") vem `position: sticky`
   e encolhido ao tamanho do texto (`ag-sticky-label`, feature do AG Grid
   pra manter o nome visível ao rolar um grupo largo) — nesse estado o
   `justify-content: center` acima não tem espaço sobrando pra centralizar.
   Força largura cheia da célula pra centralizar de fato. */
.acl-ag-grid .ag-header-group-cell-label {
  position: static !important;
  width: 100%;
}
/* Linha divisória entre blocos de empresa/loja (Grupo, SubGrupo, Produto,
   Pagamento) — `.acl-grp-end` marcada na última coluna de cada bloco por
   `to_ag_grid_columns` (components/pivot_table.py). Cor clara no cabeçalho
   (fundo escuro --empresa-cor) e cinza nas células (fundo claro). */
.acl-ag-grid .ag-header-group-cell.acl-grp-end,
.acl-ag-grid .ag-header-cell.acl-grp-end {
  border-right: 2px solid rgba(255, 255, 255, 0.45);
}
.acl-ag-grid .ag-cell.acl-grp-end {
  border-right: 2px solid #C7CCD6;
}
[data-theme="dark"] .acl-ag-grid .ag-cell.acl-grp-end {
  border-right-color: #3A404C;
}
/* Fallback à prova de falhas pro texto do header: em produção (app completo,
   com o CSS do dash-bootstrap-components junto) a variável --ag-header-
   foreground-color não estava pegando nos headers/grupos — mesmo bloco de
   estilo funcionou isolado (sem bootstrap). Regra direta na classe evita
   depender de qual variável a Theming API do AG Grid decide honrar aqui. */
.acl-ag-grid .ag-header-cell-label,
.acl-ag-grid .ag-header-group-cell-label,
.acl-ag-grid .ag-header-cell-text {
  color: #FFFFFF !important;
}
.acl-ag-grid .ag-header,
.acl-ag-grid .ag-header-row,
.acl-ag-grid .ag-pinned-left-header {
  background-color: var(--empresa-cor, #1F3868) !important;
}
/* Header de GRUPO pintado com a cor fixa da filial (Treze/Jardins/Atalaia) nas
   tabelas de Pagamento e Previsão — mesma identidade das pílulas do app
   (`charts.FILIAL_CORES_FIXAS`). Classe posta no grupo por `charts.filial_slug`
   (via `to_ag_grid_columns`/`_grid_columns`). Especificidade alta + `!important`
   pra vencer o fundo `--empresa-cor` e o texto branco forçados acima. Filial
   sem cor fixa não casa nenhuma regra e fica na cor da empresa. */
.acl-ag-grid .ag-header-group-cell.acl-filhdr-treze { background-color: #0B2A5B !important; }
.acl-ag-grid .ag-header-group-cell.acl-filhdr-jardins { background-color: #D9A62E !important; }
.acl-ag-grid .ag-header-group-cell.acl-filhdr-atalaia { background-color: #C0202C !important; }
.acl-ag-grid .ag-header-group-cell.acl-filhdr-jardins .ag-header-group-cell-label,
.acl-ag-grid .ag-header-group-cell.acl-filhdr-jardins .ag-header-group-text {
  color: #1A1A1A !important;
}
/* Linha Total via `pinnedBottomRowData` nativo do AG Grid (`.ag-row-pinned`
   já vem do próprio grid) — sem o hack de `position: sticky` + coluna oculta
   `_total` que o dash_table exigia. */
.acl-ag-grid .ag-row-pinned {
  font-weight: 700;
  background: #F0F1F4;
  border-top: 2px solid #D0D3DA;
}
/* Subtotal de grupo (Pagamento — via rowClassRules, _nivel=0) — mesma
   pegada visual do Total pinado, mas em linha normal (rola com o resto). */
.acl-ag-grid .ag-row.pivfin-nivel0 {
  font-weight: 700;
  background: #F0F1F4;
}
[data-theme="dark"] .acl-ag-grid .ag-row.pivfin-nivel0 {
  background: #262A31;
}
.acl-ag-grid .ag-cell.ag-diff-pos { color: #1E7A4C; }
.acl-ag-grid .ag-cell.ag-diff-neg { color: #C0202C; }
/* Urgência de vencimento (Vencimento): vencido / 0-30 dias / 31-60 dias. */
.acl-ag-grid .ag-cell.ag-venc-vencido { color: #C00000; font-weight: 700; }
.acl-ag-grid .ag-cell.ag-venc-urgente { color: var(--negative, #C00000); font-weight: 700; }
.acl-ag-grid .ag-cell.ag-venc-atencao { color: #E8590C; font-weight: 600; }
.acl-ag-grid .ag-cell.televenda-sem-telefone { color: #B0B0B0; font-style: italic; }
/* Cliente: linha do cliente em negrito, linha de produto (expandida sob o
   cliente) com fundo diferenciado + texto menor; a célula "entidade" na
   linha de produto ganha itálico/recuo (ver components/... _row_produto). */
.acl-ag-grid .ag-row.cliente-row-cliente { font-weight: 600; }
.acl-ag-grid .ag-row.cliente-row-produto { background: #F4F6FB; font-size: 12.5px; }
[data-theme="dark"] .acl-ag-grid .ag-row.cliente-row-produto { background: #1B222E; }
.acl-ag-grid .ag-cell.cliente-entidade-produto {
  color: #888; font-style: italic; font-weight: 400;
}
/* Vendedor: mesma pele das tabelas "VOLUME DE VENDAS" (linha do vendedor/cliente
   em negrito, sub-linhas de produto tingidas e em itálico). */
.acl-ag-grid .ag-row.vend-row-top { font-weight: 600; }
.acl-ag-grid .ag-row.vend-row-sub { background: #F4F6FB; font-size: 12.5px; }
[data-theme="dark"] .acl-ag-grid .ag-row.vend-row-sub { background: #1B222E; }
.acl-ag-grid .ag-cell.vend-entidade-sub {
  color: #888; font-style: italic; font-weight: 400;
}
/* Consumo Sócios (pages/consumo_socios.py): linha-mãe do sócio em negrito,
   linhas de detalhe (produtos consumidos) tingidas, texto menor e nome do
   produto sem negrito/com recuo. Mesma pele das tabelas "VOLUME DE VENDAS". */
.acl-ag-grid .ag-row.consumo-row-socio { font-weight: 600; }
.acl-ag-grid .ag-row.consumo-row-produto { background: #F4F6FB; font-size: 12.5px; }
[data-theme="dark"] .acl-ag-grid .ag-row.consumo-row-produto { background: #1B222E; }
.acl-ag-grid .ag-cell.consumo-dim-produto {
  color: #888; font-style: italic; font-weight: 400 !important;
}
/* Vendas Especiais (pages/vendas_especiais.py): mesma pele do Consumo Sócios —
   linha-mãe do vendedor/canal em negrito, produtos tingidos e recuados. */
.acl-ag-grid .ag-row.vesp-row-vendedor { font-weight: 600; }
.acl-ag-grid .ag-row.vesp-row-produto { background: #F4F6FB; font-size: 12.5px; }
[data-theme="dark"] .acl-ag-grid .ag-row.vesp-row-produto { background: #1B222E; }
.acl-ag-grid .ag-cell.vesp-dim-produto {
  color: #888; font-style: italic; font-weight: 400 !important;
}
/* Compras: célula editável (Comprar) com fundo diferenciado + Sugestão > 0
   destacada em negrito na cor da marca. */
.acl-ag-grid .ag-cell.compras-editable-cell { background: #FFF8E1; cursor: text; }
[data-theme="dark"] .acl-ag-grid .ag-cell.compras-editable-cell { background: #3A3620; }
.acl-ag-grid .ag-cell.compras-sugestao-hot { font-weight: 700; color: var(--empresa-cor, #1F3864); }
/* Vendas Mensal (components/metric_matrix.py): linhas da seção MENSAL em azul,
   linhas da seção ANUAL em verde — mesma ideia de tinta de fundo por seção do
   pivfin-nivel0, mas cor fixa (não é subtotal, é agrupamento visual pedido
   pelo usuário pra bater com o rascunho em papel). */
.acl-ag-grid .ag-row.mm-row-mensal { background: #E8EEF9; }
.acl-ag-grid .ag-row.mm-row-anual { background: #E7F3EA; }
.acl-ag-grid .ag-row.mm-row-pagamentos { background: #FBEADA; }
.acl-ag-grid .ag-row.mm-row-entradas { background: #FBEADA; }
[data-theme="dark"] .acl-ag-grid .ag-row.mm-row-mensal { background: #1B2432; }
[data-theme="dark"] .acl-ag-grid .ag-row.mm-row-anual { background: #17251C; }
[data-theme="dark"] .acl-ag-grid .ag-row.mm-row-pagamentos { background: #2E2013; }
[data-theme="dark"] .acl-ag-grid .ag-row.mm-row-entradas { background: #2E2013; }
.acl-ag-grid .ag-cell.mm-placeholder { color: #9AA1AC; font-style: italic; }
/* Realce de linha ao clicar (rowSelection: "single") — substitui o
   active_cell + style_data_conditional do dash_table antigo. */
.acl-ag-grid .ag-row-selected {
  background: var(--empresa-cor, #1F3864) !important;
  color: #FFF !important;
  font-weight: 600;
}
.acl-ag-grid .ag-row-selected .ag-cell.compras-editable-cell { background: color-mix(in srgb, var(--empresa-cor, #1F3864) 80%, white); }
[data-theme="dark"] .acl-ag-grid {
  --ag-background-color: var(--card);
  --ag-foreground-color: var(--text);
  --ag-border-color: var(--border);
  --ag-row-border-color: var(--border);
  --ag-odd-row-background-color: #1B1E24;
  --ag-row-hover-color: #262A31;
}
[data-theme="dark"] .acl-ag-grid .ag-row-pinned {
  background: #262A31;
  border-top-color: #3A404C;
}
/* Linha Total via rowClassRules (não pinnedBottomRowData) — mesma pegada
   visual do .ag-row-pinned acima, pra quem usa o outro mecanismo (Previsão). */
.acl-ag-grid .ag-row.prev-total-row {
  font-weight: 700;
  background: #F0F1F4;
}
[data-theme="dark"] .acl-ag-grid .ag-row.prev-total-row {
  background: #262A31;
}

/* Tema/Sair, avatar/nome/cargo: ver `.user-menu-*` (popover do avatar no
   topo da sidebar) mais abaixo — não moram mais soltos no rodapé. */

* { box-sizing: border-box; }
html, body, #react-entry-point, #_dash-app-content {
  height: 100%;
  margin: 0;
  padding: 0;
  background: var(--bg);
  font-family: 'Inter', 'Segoe UI', system-ui, -apple-system, Arial, sans-serif;
  color: var(--text);
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

/* ============== LAYOUT ROOT =============== */
.app-shell {
  display: flex;
  min-height: 100vh;
}
.main-content {
  flex: 1;
  min-width: 0;
  padding: 18px 24px;
  margin-left: 208px;
  /* Livra o conteúdo de baixo da topbar fixa de 52px (ver `.topbar`) — a
     sidebar já se desloca sozinha (seu próprio `top: 52px`), só o main-content
     (que segue em fluxo normal, não fixed) precisa desse respiro. */
  margin-top: 52px;
}

/* ============== TOPBAR (global) =============== */
/* Barra fixa no topo, acima da sidebar: empresa ativa + busca de contexto à
   esquerda, ícones utilitários (Suporte/sinos/Nota/Admin/avatar) à direita —
   ver `components/topbar.py`. Isso é o que ANTES vivia espremido no topo da
   sidebar (comentário removido dizia "224px pro grupo de 6 ícones caber numa
   linha só"); com eles aqui a sidebar volta a ser só navegação e pôde
   estreitar de 224px pra 208px. */
.topbar {
  position: fixed;
  top: 0; left: 0; right: 0;
  height: 52px;
  background: var(--card);
  border-bottom: 1px solid var(--border);
  box-shadow: 0 1px 2px rgba(16,24,40,0.05);
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 0 18px;
  /* Acima da sidebar (500) — os popovers de sino/admin/avatar (2000+) e os
     modais fullscreen continuam por cima dos dois. */
  z-index: 600;
}
.topbar-brand {
  display: flex;
  align-items: center;
  gap: 10px;
  padding-right: 16px;
  border-right: 1px solid var(--border);
  min-width: 0;
  /* Nunca encolhe pra ceder espaço ao .topbar-middle — sem isto o nome da
     empresa truncava ("Constr...") assim que o toolbar da página ficava
     largo, porque todo item de flex encolhe por padrão. Quem cede espaço
     é só o .topbar-middle (flex:1 1 auto) — e, dentro dele, o scroll
     horizontal do próprio toolbar. */
  flex-shrink: 0;
}
.topbar-logo {
  height: 30px;
  max-width: 130px;
  width: auto;
  object-fit: contain;
  border-radius: 4px;
}
.topbar-brand-name {
  font-weight: 700;
  font-size: 15px;
  color: var(--text);
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
  max-width: 200px;
}
.topbar-brand-empty { color: var(--muted); font-weight: 500; }
/* Nome da página ("VENDAS"/"GRUPO"/...) — ao lado do nome da empresa (a
   pedido do usuário). Compacto (era 24px/300 pensado pra ter uma faixa
   inteira só pra ele) pra caber nos 52px da topbar; herda a borda de
   `.topbar-brand` como separador, só falta o respiro à esquerda dela. */
.topbar-page-title {
  padding-left: 16px;
  min-width: 0;
  flex-shrink: 0;
  max-width: 220px;
}
.topbar-page-title .page-title {
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.3px;
  color: var(--empresa-cor, var(--primary));
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.topbar-page-title .page-title b { font-weight: 700; }
/* Dropdown de empresa ativa (só quando o usuário tem mais de uma) — SEM
   herdar a pele escura do antigo `.empresa-selector` (pensada pra sidebar
   escura): aqui o fundo é claro, então o Select de sempre já serve. */
.topbar-empresa-dd { min-width: 180px; }
.topbar-empresa-dd .Select-control { min-height: 30px; font-size: 14.5px; }
.topbar-icons {
  margin-left: auto;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-shrink: 0;
}
/* Sem margin própria: o gap do container-pai (.toolbar/.topbar-icons, ambos
   8px) já espaça o divisor igual aos ícones vizinhos — margin própria
   somava em cima do gap e deixava o vão ao redor do traço maior que entre
   os outros ícones (a pedido do usuário: espaçamento igual pra todos). */
.topbar-sep { width: 1px; height: 24px; background: var(--border); }
/* Popovers dos ícones da topbar abrem alinhados à DIREITA do botão — o grupo
   inteiro vive perto da borda direita da tela, um painel de 190-300px
   abrindo pra esquerda (`left:0`/`left:8px`, herdado de quando isso ficava
   na sidebar à esquerda) estouraria a viewport à direita. */
.topbar-icons .notif-panel,
.topbar-icons .admin-menu-panel {
  left: auto;
  right: 0;
}

/* Toolbar da PÁGINA (Filtros/Insights/Atualizar/Exportar/Limpar), reaproveitado
   dentro da topbar — ver components/topbar.py `page_toolbar` e pages/_base.py
   `pop_page_toolbar`. O .toolbar em si é o mesmo de sempre (mesmas classes/ids,
   só mudou de endereço no DOM); só neutraliza o margin-left que fazia sentido
   colado no header-info da página, não aqui. min-width:0 + overflow-x:auto é
   rede de segurança pras páginas com toolbar mais cheio (Grupo/SubGrupo/
   Produto, com botões extras de exportar/alternar visão) não estourarem a
   topbar em telas estreitas — rola por dentro em vez de cortar ícones. */
/* Vão do meio: absorve TODO o espaço livre entre marca+título e o grupo
   de ícones fixo (Suporte...avatar) — antes esse espaço ficava vazio (o
   `margin-left:auto` do .topbar-icons empurrava tudo pra ponta) e o
   toolbar da página, espremido dentro do próprio grupo de ícones, tinha
   só uma fatia pequena/fixa pra caber (cortava/escondia botões numa
   página com bastante filtro ativo). */
.topbar-middle {
  flex: 1 1 auto;
  min-width: 0;
  display: flex;
  align-items: center;
  /* flex-end desloca o toolbar da página pra ponta DIREITA deste vão — cola
     ele no grupo fixo de ícones (Suporte é o primeiro), a pedido do usuário
     (antes ficava encostado na marca/título, à esquerda). */
  justify-content: flex-end;
  /* SEM overflow:hidden aqui — cortava o popover de Filtros (.filters-panel,
     position:absolute, abre abaixo do botão): qualquer overflow não-visible
     num ancestral, em QUALQUER eixo, clipa filhos posicionados que
     extrapolem a caixa — inclusive o overflow-x:auto do .topbar-page-toolbar
     abaixo tinha o mesmo efeito. O botão clicava certinho, só o painel
     ficava invisível. */
}
.topbar-page-toolbar {
  display: flex;
  align-items: center;
  min-width: 0;
  max-width: 100%;
  height: 40px;
  flex-wrap: nowrap;
}
/* Agora carrega o .header-right INTEIRO (chips de filtro + "Atualizado" +
   toolbar — antes só o .toolbar) — sem forçar 1 linha só e sem cortar o
   padding pro tamanho da topbar, "Atualizado" quebrava pra uma 2ª linha e
   estourava os 52px de altura da barra (cortado/clipado). */
.topbar-page-toolbar .header-right {
  flex-wrap: nowrap;
  white-space: nowrap;
  padding: 4px 10px;
  height: 40px;
  /* Era flex-shrink:0 — impedia o card INTEIRO de encolher, então mesmo com
     o .header-info de dentro sabendo cortar (min-width:0 acima), o card
     nunca chegava a ficar pequeno o bastante pra precisar disso: só
     vazava pra fora da própria caixa (`.topbar-page-toolbar`, sem
     overflow:hidden de propósito, ver comentário dela) e invadia o grupo de
     ícones ao lado. Agora encolhe de verdade; quem cede espaço primeiro é
     o `.header-info` (chip "FILTROS" some antes de "Atualizado"), nunca o
     `.toolbar` (botões, `flex-shrink:0` logo abaixo). */
  flex-shrink: 1;
  min-width: 0;
}
.topbar-page-toolbar .header-info {
  flex-wrap: nowrap;
  white-space: nowrap;
  /* Some (min-width:auto por padrão em flex item) IMPEDIA este bloco de
     encolher — numa tela mais estreita ele estourava a própria caixa e
     invadia visualmente o grupo de ícones ao lado (Suporte...), que pinta
     por cima e "engolia" o texto "Atualizado" (ficava só o ícone visível,
     o texto sumia por baixo). min-width:0 + overflow:hidden deixam ESTE
     bloco encolher e cortar dentro da própria borda (perde primeiro o chip
     "FILTROS", já que justify-content:flex-end do .header-info da base
     mantém "Atualizado" — o mais à direita — visível por mais tempo) em vez
     de vazar pra cima dos ícones. Não afeta o popover de Filtros: ele mora
     no `.toolbar` (irmão deste bloco, fora do overflow:hidden). */
  min-width: 0;
  overflow: hidden;
}
.topbar-page-toolbar .active-filters { flex-wrap: nowrap; white-space: nowrap; }
.topbar-page-toolbar .toolbar { margin-left: 0; flex-shrink: 0; white-space: nowrap; }
/* Card cinza (.header-right) e "círculo" do chip (.chip, pill de fundo) —
   removidos a pedido do usuário, só aqui na topbar: ficam só texto/ícones
   soltos, sem card por trás. */
.topbar-page-toolbar .header-right {
  background: transparent;
  border: none;
  box-shadow: none;
}
.topbar-page-toolbar .header-info .chip {
  background: transparent;
  box-shadow: none;
}
.topbar-page-toolbar .header-info .chip:hover {
  box-shadow: none;
  transform: none;
}
/* Texto do valor do chip ("Por loja", "R$", "2026") e a borda — cinza em
   vez da cor da empresa (a pedido do usuário, mesma linha do .metric-toggle
   acima: tudo neutro aqui na topbar). */
.topbar-page-toolbar .header-info .chip {
  border-color: var(--border);
}
.topbar-page-toolbar .header-info .chip:hover {
  border-color: var(--border);
}
.topbar-page-toolbar .header-info .chip-value {
  color: var(--muted, #8A93A2);
}
/* Rótulo "FILTROS" + ícone de funil (::before) antes dos chips — removido a
   pedido do usuário, só aqui na topbar (os chips "Ano: 2026 x" já deixam
   claro que são filtros ativos). */
.topbar-page-toolbar .header-info .active-filters-label { display: none; }
/* "Atualizado em ..." redirecionado (a pedido do usuário) pro espaço logo
   abaixo do grupo de ícones (Suporte...avatar), à direita — sai do fluxo do
   chip/toolbar (que já tinha pouco espaço, ver .header-info acima) e vira um
   rótulo próprio, ancorado no `.topbar` (position:fixed, é o containing
   block de quem usa position:absolute aqui — não precisa position:relative
   em nenhum ancestral no meio). `right:18px` casa com o padding da própria
   `.topbar` (mesma margem do ícone mais à direita, o avatar). */
.topbar-page-toolbar .header-info .last-update {
  position: absolute;
  top: 52px;
  right: 18px;
  background: transparent;
  border: none;
  padding: 3px 12px;
  box-shadow: none;
  z-index: 500;
  /* Cinza em vez da cor da empresa (a pedido do usuário, mesma linha dos
     chips/toggles acima: tudo neutro aqui). */
  color: var(--muted, #8A93A2);
  font-weight: 500;
}
/* Título da página ("VENDAS") também entrou nesse bloco — compacto (era
   24px/300 pensado pra abrir uma faixa inteira própria, aqui divide os
   40px de altura com chip + toolbar) e com um traço separando ele do
   resto, mesma linguagem do separador entre Suporte e este bloco. */
/* Título da página ("VENDAS"/"GRUPO"/...) — saiu do bloco de chip+toolbar
   (ver .topbar-page-title mais abaixo, ao lado do nome da empresa). */

/* ============== SIDEBAR =============== */
.sidebar {
  position: fixed;
  /* Começa abaixo da topbar fixa (52px) — antes começava em top:0. */
  top: 52px; left: 0;
  width: 208px;
  height: calc(100vh - 52px);
  background: linear-gradient(180deg, var(--sidebar-bg-1) 0%, var(--sidebar-bg-2) 100%);
  display: flex;
  flex-direction: column;
  align-items: stretch;
  padding: 20px 0;
  box-shadow: 2px 0 6px rgba(0,0,0,0.08);
  /* Alto o bastante pra painéis internos (notif-panel, admin-menu-panel, ambos
     z-index:2000) escaparem do conteúdo principal — o sidebar é fixed+z-index,
     então cria seu próprio stacking context e um z-index baixo aqui capava
     esses painéis, mesmo com z-index alto neles. Abaixo dos modais fullscreen
     (zoom/anot/fin-cat: 2000-2100) e dos loaders (9000+). */
  z-index: 500;
  transition: width 0.06s ease-out;
}
.main-content { transition: margin-left 0.06s ease-out; }
.logo-wrap {
  display: flex;
  flex-direction: column;
  justify-content: center;
  align-items: center;
  margin-bottom: 10px;
  padding: 0 10px;
  gap: 6px;
}
.sidebar-logo {
  max-width: 140px;
  max-height: 70px;
  width: auto;
  height: auto;
  object-fit: contain;
  background: white;
  border-radius: 8px;
  padding: 6px 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
  transition: max-width 0.06s ease-out, max-height 0.06s ease-out,
              padding 0.06s ease-out;
}
.sidebar-empresa-name {
  color: rgba(255,255,255,0.92);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.3px;
  text-align: center;
  line-height: 1.2;
  word-break: break-word;
  text-shadow: 0 1px 2px rgba(0,0,0,0.4);
  max-width: 160px;
}
.sidebar-empresa-name:empty { display: none; }

/* Botão chevron de recolher / expandir a sidebar */
.sidebar-toggle-btn {
  position: absolute;
  top: 16px;
  right: -14px;
  width: 32px;
  height: 32px;
  border-radius: 50%;
  background: #FFFFFF;
  color: var(--sidebar-bg-1);
  border: 2px solid var(--sidebar-bg-1);
  cursor: pointer;
  z-index: 11;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 14px;
  padding: 0;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
  transition: background 0.12s, transform 0.12s, box-shadow 0.12s;
}
.sidebar-toggle-btn:hover {
  background: #FFE9E9;
  transform: scale(1.08);
  box-shadow: 0 4px 10px rgba(0,0,0,0.3);
}
.sidebar-toggle-btn:focus-visible {
  outline: none;
  box-shadow: 0 0 0 3px rgba(255,255,255,0.55), 0 2px 6px rgba(0,0,0,0.25);
}
.sidebar-toggle-btn i {
  transition: transform 0.12s ease;
}
.app-shell.collapsed .sidebar-toggle-btn i {
  transform: rotate(180deg);
}
.logo-circle {
  width: 80px; height: 80px;
  border-radius: 50%;
  background: white;
  color: var(--sidebar-bg-1);
  font-size: 41.5px;
  font-weight: 700;
  display: flex;
  align-items: center;
  justify-content: center;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
/* .rocha-logo: legacy alias — preserva compat caso exista markup antigo;
   o componente atual usa .sidebar-logo. Mantém estilo similar ao novo. */
.rocha-logo {
  max-width: 140px;
  max-height: 70px;
  object-fit: contain;
  background: white;
  border-radius: 8px;
  padding: 6px 8px;
  box-shadow: 0 2px 8px rgba(0,0,0,0.25);
}

.menu-nav {
  display: flex;
  flex-direction: column;
  gap: 2px;
  padding: 0 10px;
  flex: 1;
}
.menu-link { text-decoration: none; }
.menu-item {
  display: flex;
  align-items: center;
  gap: 12px;
  padding: 10px 14px;
  border-radius: 6px;
  color: rgba(255,255,255,0.85);
  font-size: 16px;
  cursor: pointer;
  transition: background 0.15s;
}
.menu-item:hover {
  background: rgba(255,255,255,0.08);
}
.menu-item.active {
  background: white;
  color: var(--sidebar-bg-1);
  font-weight: 600;
  box-shadow: inset 3px 0 0 var(--sidebar-bg-1);
}
.menu-icon {
  width: 20px;
  font-size: 18.5px;
  text-align: center;
  opacity: 0.9;
}
.menu-item.active .menu-icon { opacity: 1; }
.menu-badge {
  margin-left: auto;
  min-width: 18px;
  height: 18px;
  padding: 0 5px;
  border-radius: 10px;
  background: #E03131;
  color: #fff;
  font-size: 11.5px;
  font-weight: 700;
  line-height: 18px;
  text-align: center;
}
.menu-badge:empty { display: none; }
.clear-filters {
  margin: 16px 10px 0 10px;
  font-size: 15px;
  opacity: 0.85;
}

/* ============== HEADER =============== */
.page-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  margin-bottom: 6px;
  /* Fixa o cabeçalho (título + chips + toolbar com o botão Filtros) no topo
     enquanto rola os gráficos — assim dá pra filtrar sem voltar ao topo.
     z-index abaixo da sidebar (500) e dos modais (2000). top:52px (não mais
     0) pra grudar logo abaixo da topbar fixa, não atrás dela. */
  position: sticky;
  top: 52px;
  z-index: 300;
  background: var(--bg);
  padding: 12px 24px 8px;
  /* sangra pra cobrir o padding lateral do .main-content */
  margin-left: -24px;
  margin-right: -24px;
  box-shadow: 0 6px 14px -10px rgba(16, 24, 40, 0.35);
}
/* Faixa única agrupando Ano/Mês/Dia + Empresa (pílulas) */
.filters-group {
  display: flex;
  gap: 14px;
  align-items: flex-end;
  flex-wrap: wrap;
}

/* ===== Botão "Filtros" (icon-only, na toolbar ao lado do Atualizar) ===== */
.filters-dropdown { position: relative; display: inline-flex; }
/* realce quando o painel está aberto (o botão herda .btn-icon) */
.filters-dropdown.open .filters-toggle-btn { filter: brightness(1.12); }

.filters-panel {
  position: absolute;
  top: calc(100% + 10px);
  right: 0;
  z-index: 50;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--empresa-cor, var(--primary)) 14%, var(--border));
  border-radius: 14px;
  box-shadow: 0 18px 40px rgba(16,24,40,0.18), 0 2px 6px rgba(16,24,40,0.08);
  padding: 14px;
  min-width: 248px;
  max-height: 80vh;
  overflow-y: auto;
  display: none;
  flex-direction: column;
  gap: 10px;
}
.filters-dropdown.open .filters-panel { display: flex; }
/* setinha premium apontando para o botão */
.filters-panel::before {
  content: "";
  position: absolute;
  top: -6px;
  right: 14px;
  width: 12px;
  height: 12px;
  background: var(--card);
  border-left: 1px solid color-mix(in srgb, var(--empresa-cor, var(--primary)) 14%, var(--border));
  border-top: 1px solid color-mix(in srgb, var(--empresa-cor, var(--primary)) 14%, var(--border));
  transform: rotate(45deg);
}
/* dentro do painel: filtros empilhados, compactos */
.filters-panel .filters-row { flex-direction: column; align-items: stretch; gap: 10px; }
.filters-panel .filter-block,
.filters-panel .empresa-segmentador-wrap { width: 100%; }
.filters-panel .filter-label { margin-bottom: 3px; font-size: 11.5px; }
.filters-panel .Select-control { min-height: 30px !important; border-radius: 14px; }

.filters-backdrop {
  position: fixed;
  inset: 0;
  z-index: 40;
  display: none;
}
.filters-dropdown.open .filters-backdrop { display: block; }

/* ===== Faixa de filtros SEMPRE visível (ver pages/_base.py filters_bar) =====
   Mesma família visual do .filters-panel (card branco, borda tingida na cor
   da empresa) só que HORIZONTAL e sem display:none — não é mais um popover
   escondido atrás do botão "Filtros". Os filtros de Colunas/Metas (Compras,
   Televenda, Vendedor) continuam usando `.filters-panel`/`.filters-dropdown`
   sem mudança, essa faixa é só pros filtros de período/dimensão. */
.filters-bar {
  display: flex;
  align-items: flex-end;
  gap: 14px;
  flex-wrap: wrap;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--empresa-cor, var(--primary)) 14%, var(--border));
  border-radius: 14px;
  box-shadow: var(--shadow-sm);
  padding: 12px 14px;
  margin-bottom: 16px;
}
.page-title {
  font-size: 27.5px;
  font-weight: 300;
  letter-spacing: 0.5px;
  color: var(--empresa-cor, #5C0A0A);
}
.page-title b { font-weight: 700; }

/* ===== Telas administrativas com a paleta ACL Data (navy + azul) ===== */
.admin-page {
  --empresa-cor: #0F2545;   /* títulos/cabeçalhos em navy ACL */
  --primary: #1F6AAB;       /* botões/ações/foco/edit em azul ACL */
}
.admin-page .btn-toolbar.btn-primary {
  background: var(--duby-principal);
  border-color: var(--duby-principal);
}
.admin-page .btn-toolbar.btn-primary:hover {
  background: #2A77BC;
  border-color: #2A77BC;
}
.filters-row {
  display: flex;
  gap: 14px;
  align-items: flex-end;
}
.filter-block {
  display: flex;
  flex-direction: column;
}
.filter-label {
  font-size: 12.5px;
  text-transform: uppercase;
  color: var(--muted);
  letter-spacing: 0.6px;
  margin-bottom: 2px;
}
.filter-block .Select-control,
.filter-block .dash-dropdown {
  min-width: 110px;
  font-size: 15px;
}

/* ====== Segmentadores Ano/Mês/Dia/Empresa como pílulas preenchidas ======
   Escopado aos filtros de período/empresa — NÃO afeta o f-dim ("FATURAMENTO
   POR") que também usa .dim-dropdown dentro de .panel-title. */
.filters-row .filter-block .Select-control,
.empresa-segmentador-wrap .Select-control {
  background: var(--empresa-cor, #1F3864) !important;
  border: 1px solid var(--empresa-cor, #1F3864) !important;
  border-radius: 18px;
  min-height: 32px;
  padding-left: 6px;
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
}
.filters-row .filter-block .Select-value-label,
.filters-row .filter-block .Select-placeholder,
.filters-row .filter-block .Select-input > input,
.filters-row .filter-block .Select--single > .Select-control .Select-value .Select-value-label,
.empresa-segmentador-wrap .Select-value-label,
.empresa-segmentador-wrap .Select-placeholder,
.empresa-segmentador-wrap .Select-input > input {
  color: #fff !important;
}
.filters-row .filter-block .Select-arrow,
.empresa-segmentador-wrap .Select-arrow {
  border-top-color: #fff;
}
.filters-row .filter-block .is-open .Select-arrow,
.empresa-segmentador-wrap .is-open .Select-arrow {
  border-top-color: transparent;
  border-bottom-color: #fff;
}
.filters-row .filter-block .Select-clear,
.empresa-segmentador-wrap .Select-clear {
  color: rgba(255,255,255,0.85);
}

/* ============== KPI CARDS =============== */
.kpi-row {
  display: grid;
  /* auto-fit em vez de repeat(5,1fr) fixo: os cards se distribuem sozinhos
     conforme a largura real disponível (3, 4 ou 5 por linha, sem precisar
     das classes cols-2/3/4 abaixo) e REFLUEM numa tela mais estreita, em vez
     de espremer 5 colunas fixas até truncar o valor (era o caso antes). As
     classes cols-N (Compras/Produto/Subgrupo/...) ficam sem efeito próprio
     agora — com poucos cards reais, o auto-fit já reparte o espaço entre
     eles do mesmo jeito que um grid fixo de N colunas faria. */
  grid-template-columns: repeat(auto-fit, minmax(208px, 1fr));
  gap: 16px;
  margin-bottom: 16px;
}

/* Cards por filial: uma .kpi-row por filial, com rótulo colorido na lateral
   (mesma cor da filial nos demais gráficos "por filial"). */
.kpi-row-filial-group {
  display: flex;
  align-items: stretch;
  gap: 12px;
  margin-bottom: 16px;
}
/* Aqui NÃO segue o auto-fit da base: sempre são as mesmas 5 métricas e
   precisam casar coluna a coluna com `.kpi-row-filial-header-cols` (grid
   irmão, fixo em 5 colunas, logo abaixo) — um reflow independente por linha
   de filial desalinharia os dois. */
.kpi-row-filial-group .kpi-row {
  flex: 1;
  min-width: 0;
  margin-bottom: 0;
  grid-template-columns: repeat(5, minmax(0, 1fr));
}
.kpi-row-filial-label {
  flex-shrink: 0;
  width: 28px;
  display: flex;
  align-items: center;
  justify-content: center;
  writing-mode: vertical-rl;
  transform: rotate(180deg);
  border-radius: var(--radius);
  /* `--label-color` (inline, por linha — ver pages/vendas.py render_kpis_filial
     e as 3 páginas irmãs) em vez da cor direto em `background`: como
     LONGHAND, não reseta o `background-image` abaixo (o shorthand resetaria).
     Fallback pra --empresa-cor cobre a linha "GERAL", que não seta a var. */
  background-color: var(--label-color, var(--empresa-cor, #5C0A0A));
  /* Friso de luz diagonal — mesma ideia do .kpi-icon: o bloco de cor sólida
     ganha profundidade em vez de ficar chapado. */
  background-image: linear-gradient(160deg, rgba(255,255,255,0.20), rgba(255,255,255,0) 65%);
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.16), inset 0 1px 0 rgba(255,255,255,0.14),
              2px 0 6px rgba(16,24,40,0.08);
  color: #fff;
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 8px 4px;
}
[data-theme="dark"] .kpi-row-filial-label {
  /* Friso interno claro no bordo esquerdo: o bloco de cor sólida ganha a
     mesma sensação de "borda pegando luz" dos cards ao lado, em vez de
     destoar como uma tarja chapada. */
  box-shadow: inset 1px 0 0 rgba(255,255,255,0.12), inset 0 1px 0 rgba(255,255,255,0.10);
}
/* Linha "GERAL" (kpi-row normal, sem filial): cor da empresa em vez da paleta
   de filiais, pra não parecer mais uma filial no meio das outras.
   background-COLOR (não o shorthand `background`): shorthand resetaria o
   `background-image` (friso de luz) da regra base pra `none`. */
.kpi-row-filial-label-geral { background-color: var(--empresa-cor, #5C0A0A); }

/* Cabeçalho de colunas (Faturamento / Média dia / ...) acima da grade de
   cards por filial — aparece 1x só, alinhado com as 5 colunas do kpi-row de
   baixo (mesma largura de rótulo + mesmo gap, pra casar exatamente). */
.kpi-row-filial-header {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-bottom: 6px;
}
.kpi-row-filial-header-spacer { flex-shrink: 0; width: 28px; }
.kpi-row-filial-header-cols {
  flex: 1;
  min-width: 0;
  display: grid;
  grid-template-columns: repeat(5, minmax(0, 1fr));
  gap: 16px;
}
.kpi-row-filial-header-col {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 5px;
  font-size: 15px;
  font-weight: 700;
  color: var(--text);
}
.kpi-card {
  position: relative;
  background: var(--card);
  border-radius: var(--radius);
  padding: 16px 20px;
  box-shadow: var(--shadow-sm);
  border: 1px solid var(--border);
}
/* Badge de Mix de Produtos (qtd de SKUs distintos) — canto SUPERIOR DIREITO
   do card, a pedido do usuário (hoje só no card "Qtd vendas", pra todas as
   empresas). `.kpi-card` vira `position:relative` só pra servir de
   containing block deste badge — não afeta o layout normal (flex) do resto
   do card. */
.kpi-mix-badge {
  position: absolute;
  top: 12px;
  right: 14px;
  display: inline-flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  font-weight: 700;
  color: var(--kpi-accent, var(--empresa-cor, var(--primary)));
  background: color-mix(in srgb, var(--kpi-accent, var(--empresa-cor, var(--primary))) 10%, transparent);
  padding: 3px 8px;
  border-radius: 999px;
}
.kpi-mix-badge i { font-size: 11.5px; }
.kpi-mix-badge-label { font-size: 10.5px; font-weight: 800; letter-spacing: 0.4px; opacity: 0.85; }
.kpi-inner {
  display: flex;
  align-items: flex-start;
  gap: 14px;
}
.kpi-text { width: 100%; min-width: 0; }
.kpi-value {
  font-size: 27.5px;
  font-weight: 800;
  color: var(--text);
  line-height: 1.1;
  letter-spacing: -0.4px;
  font-variant-numeric: tabular-nums;
  text-shadow: var(--kpi-glow);
}
.kpi-title {
  font-size: 14.5px;
  font-weight: 500;
  color: var(--muted);
  margin-top: 3px;
  display: flex;
  align-items: center;
  gap: 5px;
  white-space: nowrap;
}
.kpi-delta {
  display: flex;
  align-items: center;
  gap: 4px;
  font-size: 12.5px;
  margin-top: 6px;
}
.kpi-delta.positive { color: var(--positive); }
.kpi-delta.negative { color: var(--negative); }
.kpi-delta.neutral { color: var(--muted); }
.delta-pct { font-weight: 700; }
.delta-label { color: var(--muted); margin-left: 4px; }

/* Layout colunar dos KPIs (rótulo | valor anterior | %) — grid único p/ as duas
   linhas alinharem as colunas entre si. display:contents no wrapper de linha faz
   os 3 spans participarem do grid e herdarem a cor (verde alta / vermelho queda). */
.kpi-deltas.cols {
  display: grid;
  grid-template-columns: auto 1fr auto;
  gap: 3px 10px;
  margin-top: 6px;
  font-size: 12.5px;
}
.kpi-delta-row { display: contents; }
.kpi-delta-row.positive { color: var(--positive); }
.kpi-delta-row.negative { color: var(--negative); }
.kpi-delta-row.neutral  { color: var(--muted); }
.kpi-deltas.cols .delta-label { color: inherit; margin-left: 0; white-space: nowrap; }
.kpi-deltas.cols .delta-val { text-align: right; font-variant-numeric: tabular-nums; }
/* "%" como badge (fundo tingido na cor da linha — verde/vermelho/cinza,
   herdada de .kpi-delta-row) em vez de texto solto colorido — mais fácil de
   escanear a coluna. O "—" (sem comparativo) ganha a mesma pele, só cinza. */
.kpi-deltas.cols .delta-pct {
  text-align: right;
  font-weight: 700;
  font-variant-numeric: tabular-nums;
  display: inline-block;
  padding: 1px 7px;
  border-radius: 6px;
  background: color-mix(in srgb, currentColor 14%, transparent);
}
/* Ícone em CÍRCULO à esquerda do texto (antes: quadrado flutuando sobre o
   texto, top-right). `--kpi-accent` (inline, por card) sobrepõe a cor padrão
   da empresa — usado nas linhas "por filial" do Comercial pra cada card sair
   na cor daquela filial. */
.kpi-icon {
  flex-shrink: 0;
  width: 46px; height: 46px;
  border-radius: 50%;
  /* Gradiente diagonal na própria cor de acento (marca/filial) + friso interno
     de luz, em vez do preenchimento chapado — mesmo truque que o dark mode já
     usava aqui (ver [data-theme="dark"] .kpi-icon), trazido pro modo claro. */
  background: linear-gradient(145deg,
    color-mix(in srgb, var(--kpi-accent, var(--empresa-cor, var(--primary))) 22%, var(--card)),
    color-mix(in srgb, var(--kpi-accent, var(--empresa-cor, var(--primary))) 7%, var(--card)));
  box-shadow: inset 0 1px 0 rgba(255,255,255,0.65),
              0 2px 6px color-mix(in srgb, var(--kpi-accent, var(--empresa-cor, var(--primary))) 20%, transparent);
  color: var(--kpi-accent, var(--empresa-cor, var(--primary)));
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 18.5px;
}

/* ============== PANELS / CARDS DE GRÁFICO =============== */
.panel {
  background: var(--card);
  border-radius: var(--radius);
  padding: 14px 16px;
  border: 1px solid var(--border);
  box-shadow: var(--shadow-sm);
  transition: box-shadow 0.2s ease, transform 0.2s ease, border-color 0.2s ease;
  min-width: 0;
  overflow: hidden;
  position: relative;
}

/* ESTABILIDADE DE LAYOUT (evita "abre pequeno" / layout que pula) -------------
   Rede de segurança: todo gráfico dentro de .panel reserva altura mínima já no
   primeiro paint, então o Plotly renderiza no tamanho certo em vez de nascer
   pequeno e "abrir" quando a cascata de resize roda. Alturas inline (style=...)
   maiores continuam valendo. Sparklines ficam em .dev-kpi-card, fora daqui. */
.panel .dash-graph { min-height: 300px; }
/* Revela cada gráfico suavemente quando a query volta e ele monta (fade-in só na
   1ª montagem — o Plotly reusa o nó no auto-refresh, então NÃO re-anima e não
   "pisca" a cada atualização). */
.panel .js-plotly-plot { animation: acl-chart-in .35s ease-out both; }
@keyframes acl-chart-in { from { opacity: 0; } to { opacity: 1; } }

/* ESQUELETO (shimmer) enquanto a query carrega — no lugar do branco. Usado como
   custom_spinner do dcc.Loading (components/loading.py). Preenche o espaço já
   reservado pela altura mínima do painel. */
.acl-skel {
  width: 100%;
  height: 100%;
  min-height: 260px;
  border-radius: 10px;
  background-color: rgba(0, 0, 0, 0.04);
  background-image: linear-gradient(90deg,
    rgba(0, 0, 0, 0.00) 0%,
    rgba(0, 0, 0, 0.06) 50%,
    rgba(0, 0, 0, 0.00) 100%);
  background-size: 200% 100%;
  background-repeat: no-repeat;
  animation: acl-skel-shimmer 1.3s ease-in-out infinite;
}
@keyframes acl-skel-shimmer {
  0%   { background-position: -120% 0; }
  100% { background-position: 120% 0; }
}
[data-theme="dark"] .acl-skel {
  background-color: rgba(255, 255, 255, 0.03);
  background-image: linear-gradient(90deg,
    rgba(255, 255, 255, 0.00) 0%,
    rgba(255, 255, 255, 0.07) 50%,
    rgba(255, 255, 255, 0.00) 100%);
}

/* Botão "expandir" no canto superior direito de cada panel */
.panel-expand {
  position: absolute;
  top: 8px;
  right: 8px;
  z-index: 5;
  width: 26px;
  height: 26px;
  border: none;
  border-radius: 8px;
  background: transparent;
  color: var(--empresa-cor, #5C0A0A);
  cursor: pointer;
  opacity: 0.45;
  transition: opacity 0.15s ease, background 0.15s ease;
}
.panel:hover .panel-expand { opacity: 0.9; }
.panel-expand:hover { background: rgba(0, 0, 0, 0.06); opacity: 1; }
[data-theme="dark"] .panel-expand { color: #E0E0E0; }
[data-theme="dark"] .panel-expand:hover { background: rgba(255, 255, 255, 0.1); }

/* Segmentador "Top N" (Grupo/SubGrupo/Produto) — suspenso (elevado, sombra
   própria) no canto superior direito do painel, à esquerda do botão
   expandir (ver `_rank_panel`/`_topn_toggle` em pages/vendas.py). */
.panel-topn {
  position: absolute;
  top: 6px;
  right: 40px;
  z-index: 5;
  border-radius: 8px;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16), 0 1px 3px rgba(15, 23, 42, 0.08);
}
[data-theme="dark"] .panel-topn {
  box-shadow: 0 6px 16px rgba(0, 0, 0, 0.5), 0 1px 3px rgba(0, 0, 0, 0.3);
}

/* Modal de apresentação (expandir gráfico) */
.zoom-wrap { display: none; }
.zoom-wrap.open {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2000;
}
.zoom-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.zoom-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  /* Sem teto de largura: o "expandir" é pra ocupar a tela. O teto de 1400px
     deixava faixa branca dos dois lados em monitor grande (1920+). */
  width: 96vw;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
  padding: 16px 20px 20px;
}
.zoom-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.zoom-title {
  font-weight: 700;
  font-size: 17px;
  letter-spacing: 0.5px;
  color: var(--empresa-cor, #5C0A0A);
}
[data-theme="dark"] .zoom-title { color: #E0E0E0; }
.zoom-close {
  border: none;
  background: transparent;
  font-size: 23px;
  line-height: 1;
  width: 39px;
  height: 39px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text, #333);
}
.zoom-close:hover { background: rgba(0, 0, 0, 0.08); }
[data-theme="dark"] .zoom-close { color: #E0E0E0; }
[data-theme="dark"] .zoom-close:hover { background: rgba(255, 255, 255, 0.12); }

/* Modebar premium dentro do modal de apresentação */
.zoom-modal .modebar {
  background: color-mix(in srgb, var(--card) 82%, transparent);
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 2px 5px;
  box-shadow: var(--shadow-sm);
}
.zoom-modal .modebar-group { margin: 0 1px !important; }
.zoom-modal .modebar-btn svg { fill: var(--muted, #8A93A2); transition: fill 0.12s; }
.zoom-modal .modebar-btn:hover svg { fill: var(--empresa-cor, var(--primary)); }
.zoom-modal .modebar-btn.active svg { fill: var(--empresa-cor, var(--primary)); }
[data-theme="dark"] .zoom-modal .modebar {
  background: rgba(255, 255, 255, 0.06);
  border-color: rgba(255, 255, 255, 0.12);
}
[data-theme="dark"] .zoom-modal .modebar-btn svg { fill: #B8C0CC; }
.panel.panel--filtering {
  border-color: var(--primary);
  box-shadow: 0 0 0 1px var(--primary), 0 6px 16px rgba(31,56,100,0.18);
}
.panel:hover {
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  transform: translateY(-2px);
}
.panel:active,
.panel.is-clicked {
  box-shadow: 0 2px 6px rgba(31,56,100,0.18) inset, 0 6px 18px rgba(31,56,100,0.14);
  transform: translateY(0);
}
.kpi-card {
  transition: box-shadow 0.18s ease, transform 0.18s ease, border-color 0.18s ease;
}
.kpi-card:hover {
  box-shadow: var(--shadow-lg);
  border-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  transform: translateY(-2px);
}
/* Plotly cursor pointer nos elementos clicáveis */
.panel .js-plotly-plot .plotly .plot .barlayer .point,
.panel .js-plotly-plot .plotly .plot .surfacelayer .slice {
  cursor: pointer !important;
}
.panel-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--empresa-cor, #5C0A0A);
  margin-bottom: 6px;
  display: flex;
  justify-content: flex-start;
  gap: 8px;
  align-items: center;
  padding-right: 30px;   /* reserva o canto p/ o botão expandir, sem sobrepor */
}
/* Ícone (i) com o significado da métrica — tooltip NATIVO via atributo `title`
   (hover). Usa o tooltip do navegador de propósito: ele é desenhado fora do
   fluxo do DOM, então nunca é cortado pelo overflow:hidden do .panel/.kpi-card
   (uma tooltip-box em CSS, posicionada dentro do painel, seria decepada perto
   das bordas — ver comentário da linha ~609). */
.info-icon {
  font-size: 12.5px;
  color: var(--muted);
  cursor: help;
  opacity: 0.65;
  transition: opacity 0.15s ease, color 0.15s ease;
}
.info-icon:hover { opacity: 1; color: var(--empresa-cor, var(--primary)); }

/* Contagem total de produtos da tabela pivô de Produto — ver pages/produto.py */
.pivot-pagina-bar {
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 12px;
  margin-bottom: 6px;
}
.pivot-pagina-label {
  font-size: 14px;
  font-weight: 600;
  color: var(--muted);
  min-width: 220px;
  text-align: center;
}

.panel-title .dim-dropdown {
  text-transform: none;
  letter-spacing: 0;
  font-weight: 400;
  font-size: 14px;
}

/* Totalizador no canto superior direito do título (ex.: DESPESAS EM ABERTO
   POR FORNECEDOR) — mesmo truque de margin-left:auto do .metric-toggle pra
   empurrar pro canto oposto do título, sem imitar o visual de botão. */
.panel-total-badge {
  margin-left: auto;
  font-size: 14px;
  font-weight: 700;
  letter-spacing: normal;
  text-transform: none;
  color: var(--empresa-cor, #5C0A0A);
  white-space: nowrap;
  flex-shrink: 0;
}
[data-theme="dark"] .panel-total-badge { color: var(--empresa-cor, #E0E0E0); }

/* Seletor de métrica premium (R$ | Qtd | %) — segmented control */
.panel-title .metric-toggle { margin-left: auto; }
/* Painéis com DOIS seletores (ex.: Total/Média + R$/Qtd/%) agrupam os dois
   num wrapper — só ele recebe o margin-left:auto, senão o navegador reparte o
   espaço livre entre os dois `.metric-toggle` e abre um vão entre eles. */
.panel-title .panel-toggle-group { margin-left: auto; display: inline-flex; align-items: center; gap: 6px; flex-shrink: 0; }
.panel-title .panel-toggle-group .metric-toggle { margin-left: 0; }
.metric-toggle {
  display: inline-flex;
  align-items: stretch;
  border: 1px solid var(--border);
  border-radius: 8px;
  overflow: hidden;
  background: var(--card);
  flex-shrink: 0;
}
.metric-toggle label {
  display: inline-flex;
  align-items: center;
  margin: 0;
  padding: 2px 9px;
  font-size: 11.5px;
  font-weight: 600;
  text-transform: none;
  letter-spacing: 0;
  color: var(--muted, #8A93A2);
  cursor: pointer;
  user-select: none;
  transition: background 0.12s, color 0.12s;
}
.metric-toggle label:not(:last-child) { border-right: 1px solid var(--border); }
.metric-toggle input { display: none; }
.metric-toggle label:hover { background: rgba(0, 0, 0, 0.04); }
.metric-toggle label:has(input:checked) {
  background: var(--muted, #8A93A2);
  color: #fff;
}
[data-theme="dark"] .metric-toggle label:hover { background: rgba(255, 255, 255, 0.06); }

/* Segmentador Top N (Grupo/SubGrupo/Produto) — dropdown compacto: pílula
   sólida (cor da empresa) + seta, mesmo espírito do `.pill.active`. Reaproveita
   as classes internas do react-select (por trás do dcc.Dropdown — mesmo
   mecanismo de `.dim-dropdown .Select-control`). Ver `_topn_toggle` em
   pages/vendas.py. */
.topn-select { min-width: 92px; }
.topn-select .Select-control {
  background: var(--muted, #8A93A2);
  border: none;
  border-radius: 999px;
  min-height: 32px;
  height: 32px;
  cursor: pointer;
  box-shadow: 0 6px 16px rgba(15, 23, 42, 0.16), 0 1px 3px rgba(15, 23, 42, 0.08);
}
.topn-select .Select-control:hover { box-shadow: 0 8px 18px rgba(15, 23, 42, 0.22); }
.topn-select .Select-value,
.topn-select .Select-value-label,
.topn-select .Select-placeholder {
  color: #ffffff !important;
  font-weight: 700;
  font-size: 12.5px;
  line-height: 32px;
  padding-left: 14px;
}
.topn-select .Select-input > input { color: #ffffff; }
.topn-select .Select-arrow { border-top-color: #ffffff; }
.topn-select.is-open .Select-arrow { border-bottom-color: #ffffff; }
.topn-select .Select-menu-outer {
  border-radius: 10px;
  overflow: hidden;
  margin-top: 4px;
  box-shadow: 0 10px 24px rgba(15, 23, 42, 0.18);
}
.topn-select .Select-option.is-focused { background: #eef1f6; }
.topn-select .Select-option.is-selected { background: var(--muted, #8A93A2); color: #ffffff; }

.row-2col {
  display: grid;
  grid-template-columns: 1.4fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
/* Coluna de painéis empilhados dentro de uma linha do grid (ex.: as duas roscas
   do Gerencial, uma sobre a outra, ao lado do painel de grupo). */
.col-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
  min-width: 0;
}
/* Painel que ESTICA: o card é alongado pelo grid até a altura da coluna vizinha,
   e o gráfico acompanha em vez de deixar faixa branca embaixo. O min-height é
   rede de segurança — dcc.Graph sem altura definida colapsa para zero. */
.panel-fill {
  display: flex;
  flex-direction: column;
}
.panel-fill .panel-body {
  position: relative;      /* âncora do .graph-fill abaixo */
  flex: 1 1 auto;
  min-height: 460px;       /* rede: sem isto um colapso vira gráfico de altura 0 */
}
/* O dcc.Loading envolve o gráfico em dois divs SEM classe: o de fora leva
   `position:relative` INLINE. Como ele é posicionado, é ELE (não o .panel-body)
   que ancora o .graph-fill absoluto — e, tendo como único filho um elemento
   absoluto, sua altura desaba para 0. O gráfico ficava sem altura de container e
   o Plotly caía no default dele, deixando faixa branca no resto do card. Esticar
   os dois wrappers devolve a altura do .panel-body à âncora. */
.panel-fill .panel-body > div,
.panel-fill .panel-body > div > div {
  height: 100%;
}
/* O gráfico é ANCORADO nesse wrapper (já esticado acima), não encadeado por
   height:100% no próprio dcc.Graph: o Loading quebra a cadeia de percentuais. */
.panel-fill .graph-fill {
  position: absolute;
  top: 0;
  right: 0;
  bottom: 0;
  left: 0;
}
.row-2col-eq {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
}
.col-stack {
  display: flex;
  flex-direction: column;
  gap: 14px;
}
/* Linha de um painel só, largura total. */
.row-1col { margin-bottom: 14px; }

/* Dois painéis de ranking lado a lado, colunas iguais (Grupo | SubGrupo etc.). */
.row-rank-2col {
  display: grid;
  grid-template-columns: 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
  /* Grid estica os itens pra igualar a altura por padrão (align-items:
     stretch) — com um ranking bem maior que o outro (ex.: dezenas de
     clientes vs. poucos vendedores), o card mais curto ficava com uma
     sobra de espaço em branco embaixo do gráfico, que tem altura própria
     fixa por número de linhas. Cada painel agora fica só do tamanho que
     precisa. */
  align-items: start;
}
/* min-width:0 — sem isso o item de grid usa a largura mínima do conteúdo e o
   par de painéis estoura a linha em nomes longos (cliente/produto). */
.row-rank-2col > .panel { min-width: 0; }
/* Abaixo de 1100px as barras horizontais não cabem em meia tela: empilha. */
@media (max-width: 1100px) {
  .row-rank-2col { grid-template-columns: 1fr; }
}

/* Três painéis lado a lado (ex.: Faturamento por Grupo/SubGrupo/Produto). */
.row-3col {
  display: grid;
  grid-template-columns: 1fr 1fr 1fr;
  gap: 14px;
  margin-bottom: 14px;
}
/* Faixa intermediária nova (1101-1400px): antes só existia o breakpoint de
   1100px (empilha tudo em 1 coluna) — entre 1100 e 1400, com a sidebar de
   208px, 3 gráficos lado a lado ficavam espremidos. Cai pra 2 colunas antes
   de empilhar de vez; o 3º painel flui pra uma nova linha sozinho (grid
   auto-placement), sem precisar de markup extra. */
@media (max-width: 1400px) and (min-width: 1101px) {
  .row-3col { grid-template-columns: 1fr 1fr; }
}
@media (max-width: 1100px) {
  .row-3col { grid-template-columns: 1fr; }
}

/* ============== TABELA TOP VENDEDORES =============== */
.top-vendedores-table .dash-spreadsheet-container {
  border: none !important;
}
.top-vendedores-table table { border-collapse: collapse; }
.top-vendedores-table th {
  background: white !important;
  color: #555 !important;
  font-weight: 600 !important;
  font-size: 12.5px !important;
  text-transform: uppercase;
  border-bottom: 1px solid #DDD !important;
}
.top-vendedores-table td {
  font-size: 14px !important;
  padding: 8px 10px !important;
  color: white !important;
}
.top-vendedores-table .vend-row {
  cursor: pointer;
  transition: filter 0.15s, transform 0.12s;
}
.top-vendedores-table .vend-row:hover {
  filter: brightness(1.15);
}
.top-vendedores-table .vend-row.selected td {
  box-shadow: inset 0 0 0 2px white;
}
.top-vendedores-table .vend-row:active {
  transform: scale(0.995);
}
/* Produto que também está no Top Produtos de outra(s) filial(is) — faixa
   dourada na borda esquerda da 1ª célula + ícone, pra destacar sem competir
   com o tingido por ranking (bg inline) nem com o box-shadow de seleção. */
.top-vendedores-table .vend-row.repetido td:first-child {
  box-shadow: inset 3px 0 0 #FFC107;
}
.vend-row-repetido-icon {
  margin-left: 6px;
  font-size: 11.5px;
  opacity: 0.9;
}

/* Top Produtos por filial: N tabelas lado a lado (grid-template-columns vem
   inline, com o nº de filiais em escopo). */
.top-prod-grid {
  display: grid;
  gap: 16px;
  align-items: start;
}
.top-prod-col { min-width: 0; }
.top-prod-filial {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 0 0 6px 2px;
  margin-bottom: 4px;
  border-bottom: 2px solid transparent;
}
/* Em telas estreitas as tabelas empilham (nomes de produto não cabem em 1/3). */
@media (max-width: 1100px) {
  .top-prod-grid { grid-template-columns: 1fr !important; }
}

/* ============== PLACEHOLDER =============== */
.placeholder-page {
  background: var(--card);
  border-radius: 8px;
  padding: 80px 24px;
  text-align: center;
  color: var(--muted);
  border: 1px solid var(--border);
}
.placeholder-page h2 {
  color: #5C0A0A;
  margin-bottom: 8px;
}

/* ============== UTILS =============== */
.dim-dropdown .Select-control { border: 1px solid #DDD; min-height: 28px; }

/* ============== TOOLBAR (atualizar / limpar / timestamp) =============== */
.toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-left: 14px;
}
/* Toggle "Por loja | Mensal" dos relatórios de pivô (Grupo/SubGrupo/Produto):
   reaproveita a pele do .metric-toggle, só alinhando à altura da toolbar. */
.view-toggle-wrap {
  display: flex;
  align-items: center;
}
.view-toggle-wrap .metric-toggle {
  margin: 0;
}
/* `hidden_columns` faz o DataTable renderizar o menu "Toggle Columns". Nesses
   relatórios as colunas ocultas são internas (marcador da linha de total e o
   valor numérico da variação, usado só para colorir), então o menu não serve
   a ninguém e ainda rouba altura da tabela. */
#grupo-table .dash-spreadsheet-menu,
#subgrupo-table .dash-spreadsheet-menu,
#produto-table .dash-spreadsheet-menu {
  display: none;
}
/* Retorno do upload de planilha (relatório Previsão). */
.upload-msg:empty { display: none; }
.upload-msg {
  margin: 6px 0 10px;
  font-size: 14px;
  border-radius: 6px;
  padding: 8px 12px;
}
.upload-msg .upload-ok {
  color: var(--positive);
}
.upload-msg .upload-erro {
  color: var(--negative);
}
#previsao-table .dash-spreadsheet-menu,
#pagamento-table .dash-spreadsheet-menu {
  display: none;
}
#previsao-table .dash-spreadsheet.dash-freeze-top,
#pagamento-table .dash-spreadsheet.dash-freeze-top {
  max-height: calc(100vh - 158px);
}
/* Compras: cabeçalho congelado ao rolar. Acima da tabela ficam o header do
   relatório e a linha de KPIs (filtros são popover, não ocupam altura).
   Sem `fixed_rows` (recursão do handleResize) — o header é fixado via
   `position: sticky`, e o rolo é o próprio contêiner do style_table.
   O dash_table NÃO usa `<thead>` real: cada linha do cabeçalho (título e a
   linha de filtro do `filter_action="native"`, que só o Compras usa) é uma
   `<table>` própria com `<th>` — por isso `thead{position:sticky}` não pega
   nada. E grudar TODO `th` (`.dash-spreadsheet-container th`) gruda a linha
   de filtro junto, sobrepondo-a na linha de título ao rolar. A fórmula certa
   é grudar só `th.dash-header` (linha de título) — a linha de filtro rola
   normalmente, sem sobrepor nada. */
#compras-table .dash-spreadsheet.dash-freeze-top,
#compras-table .dash-spreadsheet.dash-virtualized {
  max-height: calc(100vh - 240px);
}
#compras-table th.dash-header {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* Pivôs (grupo/subgrupo/produto) e pagamento/previsao: idem compras — saíram do
   `fixed_rows` (recursão do handleResize). Como têm cabeçalho de 2 linhas
   (merge_duplicate_headers), fixa o thead inteiro em vez de th linha a linha,
   pra as duas linhas não empilharem no topo. O rolo é o style_table. */
#grupo-table thead,
#subgrupo-table thead,
#produto-table thead,
#pagamento-table thead,
#previsao-table thead {
  position: sticky;
  top: 0;
  z-index: 10;
}

/* O dash_table embute `.dash-spreadsheet.dash-freeze-top, .dash-virtualized
   { max-height: 500px }`. O `height` do `style_table` vai no contêiner externo,
   mas quem rola é esse elemento interno — e max-height vence height. Sem
   sobrescrever aqui, a tabela trava em 500px e sobra tela em branco.
   O seletor com #id (1,2,0) já supera o do pacote (0,2,0): sem !important. */
#grupo-table .dash-spreadsheet.dash-freeze-top,
#grupo-table .dash-spreadsheet.dash-virtualized,
#subgrupo-table .dash-spreadsheet.dash-freeze-top,
#subgrupo-table .dash-spreadsheet.dash-virtualized,
#produto-table .dash-spreadsheet.dash-freeze-top,
#produto-table .dash-spreadsheet.dash-virtualized {
  max-height: calc(100vh - 118px);
}
.last-update {
  font-size: 12.5px;
  color: var(--muted);
  letter-spacing: 0.3px;
  white-space: nowrap;
}

/* ===== Lado direito do header: faixa de info (filtros ativos + atualizado) =====
   Um módulo só (card sutil) — chip + "Atualizado" + ícones andavam soltos,
   3 peças flutuando sobre o fundo da página (o chip quase não se via, cor
   quase igual à do fundo). Agora tudo mora dentro do mesmo card. */
.header-right {
  display: flex;
  flex-direction: row;
  align-items: center;
  gap: 12px;
  background: color-mix(in srgb, var(--empresa-cor, var(--primary)) 4%, var(--card));
  border: 1px solid color-mix(in srgb, var(--empresa-cor, var(--primary)) 13%, var(--border));
  border-radius: 16px;
  padding: 7px 10px 7px 16px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.05);
}
.header-right .toolbar {
  margin-left: 0;
  /* Traço separando o grupo de INFO (filtros ativos + atualizado) do grupo
     de AÇÃO (ícones) — sem ele os dois blocos ficavam soltos lado a lado. */
  padding-left: 14px;
  border-left: 1px solid color-mix(in srgb, var(--empresa-cor, var(--primary)) 22%, var(--border));
}
.header-info {
  display: flex;
  align-items: center;
  justify-content: flex-end;
  gap: 10px;
  flex-wrap: wrap;
  max-width: 640px;
}
/* "Atualizado em ..." bem pequeno, na cor primária da empresa */
.header-info .last-update {
  font-size: 12.5px;
  color: var(--empresa-cor, var(--primary));
  font-weight: 600;
  opacity: 1;
  white-space: nowrap;
}

/* Chip "FILTROS" — sem card/borda própria agora: já mora dentro do card do
   .header-right (acima), um contorno aqui duplicaria a borda. */
.header-info .active-filters {
  margin: 0;
  padding: 0;
  gap: 8px;
  background: transparent;
  border: none;
  box-shadow: none;
}
.header-info .active-filters-label { font-size: 12px; letter-spacing: 1px; margin: 0 2px 0 0; }
.header-info .chip {
  padding: 3px 6px 3px 11px;
  font-size: 14px;
  background: color-mix(in srgb, var(--empresa-cor, var(--primary)) 6%, var(--card));
  box-shadow: 0 1px 2px rgba(16,24,40,0.05);
}
.header-info .chip:hover {
  box-shadow: 0 2px 6px color-mix(in srgb, var(--empresa-cor, var(--primary)) 25%, transparent);
  transform: translateY(-1px);
}
.header-info .chip-label { font-size: 11.5px; }
.header-info .chip-close {   /* "×" para remover o filtro */
  display: inline-flex;
  width: 18px;
  height: 18px;
  font-size: 14px;
  margin-left: 4px;
}
.btn-toolbar {
  display: inline-flex;
  align-items: center;
  background: white;
  border: 1px solid #DDD;
  border-radius: 6px;
  padding: 6px 12px;
  font-size: 14px;
  font-weight: 600;
  color: #444;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s, color 0.12s;
}
.btn-toolbar:hover { background: #F4F6FB; border-color: #BBB; }
.btn-toolbar:disabled { opacity: 0.45; cursor: default; pointer-events: none; }
.btn-toolbar.btn-primary {
  background: var(--primary);
  border-color: var(--primary);
  color: white;
}
.btn-toolbar.btn-primary:hover { background: #16294A; border-color: #16294A; }
/* Botões só com ícone (Atualizar / Limpar filtros / Exportar / Insights):
   quadrados e centrados. Raio maior + sombra própria (abaixo) — eram
   achatados, sem a profundidade que o resto do app já tem (kpi-card,
   panel, chip). */
.btn-toolbar.btn-icon {
  justify-content: center;
  padding: 7px;
  width: 44px;
  height: 41px;
  font-size: 18.5px;
  border-radius: 12px;
  box-shadow: 0 1px 2px rgba(16,24,40,0.06);
  transition: background 0.12s, border-color 0.12s, color 0.12s,
              transform 0.15s ease, box-shadow 0.15s ease, filter 0.15s ease;
}
/* Revertido a pedido do usuário: o gradiente "premium" fica só no botão de
   Filtros (a ação principal do toolbar — ver .filters-toggle-btn logo
   abaixo). Os demais ícones (Insights/Atualizar/Exportar/Limpar) voltam a
   ser discretos — mesmo tratamento do .notif-toggle da topbar (transparente,
   cinza, só acende no hover), pra não competir todos por atenção. */
.btn-toolbar.btn-primary.btn-icon {
  background: transparent;
  border-color: transparent;
  color: var(--muted);
  box-shadow: none;
}
.btn-toolbar.btn-primary.btn-icon:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  border-color: transparent;
  color: var(--text);
  transform: none;
  box-shadow: none;
  filter: none;
}
.btn-toolbar.btn-primary.btn-icon:active { transform: none; filter: none; }

/* Filtros: revertido a pedido do usuário — sem exceção nenhuma agora, usa o
   mesmo .btn-toolbar.btn-primary.btn-icon discreto de cima. Regra própria
   removida (não sobrava nada além do que a base já faz). */

/* ============== ACTIVE FILTER CHIPS =============== */
/* ===== Barra de filtros ativos (premium) ===== */
.active-filters {
  display: flex;
  flex-wrap: wrap;
  align-items: center;
  gap: 8px;
  margin: 0 0 14px 0;
  padding: 8px 12px;
  background: color-mix(in srgb, var(--empresa-cor, var(--primary)) 5%, var(--card));
  border: 1px solid var(--border);
  border-radius: 14px;
}
.active-filters:empty { display: none; }
.active-filters-label {
  display: inline-flex;
  align-items: center;
  gap: 6px;
  margin: 0 4px 0 2px;
  align-self: center;
  font-size: 12px;
  font-weight: 700;
  letter-spacing: 0.8px;
  text-transform: uppercase;
  color: var(--empresa-cor, var(--primary));
  opacity: 0.85;
}
.active-filters-label::before {
  content: "\f0b0";                 /* funil (Font Awesome) */
  font-family: "Font Awesome 6 Free";
  font-weight: 900;
  font-size: 11.5px;
}
.chip {
  display: inline-flex;
  align-items: center;
  background: var(--card);
  border: 1px solid color-mix(in srgb, var(--empresa-cor, var(--primary)) 35%, var(--border));
  color: var(--text);
  border-radius: 999px;
  padding: 4px 5px 4px 12px;
  font-size: 14px;
  line-height: 1.4;
  box-shadow: 0 1px 3px rgba(16,24,40,0.06);
  transition: box-shadow 0.15s, border-color 0.15s, transform 0.1s;
}
.chip:hover {
  box-shadow: 0 3px 8px color-mix(in srgb, var(--empresa-cor, var(--primary)) 22%, transparent);
  border-color: var(--empresa-cor, var(--primary));
}
.chip-label {
  color: var(--muted);
  margin-right: 5px;
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.3px;
}
.chip-value {
  font-weight: 700;
  color: var(--empresa-cor, var(--primary));
  max-width: 240px;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.chip-close {
  background: transparent;
  border: none;
  color: var(--muted);
  font-size: 15px;
  line-height: 1;
  cursor: pointer;
  width: 23px;
  height: 23px;
  border-radius: 50%;
  margin-left: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  padding: 0;
  transition: background 0.12s, color 0.12s;
}
.chip-close:hover {
  background: var(--empresa-cor, var(--primary));
  color: #fff;
}

/* ============== LOGIN PAGE — paleta ACL Data =============== */
.login-page {
  position: fixed;
  inset: 0;
  display: flex;
  align-items: center;
  justify-content: center;
  background:
    radial-gradient(ellipse 80% 60% at 50% 40%, var(--login-bg-glow) 0%, transparent 60%),
    linear-gradient(160deg, var(--login-bg-deep) 0%, var(--login-bg-edge) 100%);
  z-index: 100;
}
.login-card {
  background: var(--login-card);
  border: 1px solid var(--login-card-bd);
  border-top: 4px solid var(--duby-extra);
  border-radius: 16px;
  padding: 40px 44px;
  box-shadow: 0 24px 60px rgba(0,0,0,0.55);
  width: 400px;
  max-width: 92vw;
  text-align: center;
}
.login-logo {
  margin: 0 auto 10px;
  display: flex;
  align-items: center;
  justify-content: center;
  padding: 8px 14px;
}
.login-logo img {
  max-width: 200px;
  max-height: 64px;
  object-fit: contain;
  display: block;
}
.login-brand {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-size: 32px;
  font-weight: 800;
  letter-spacing: -0.5px;
  color: var(--duby-principal);
  margin: 4px 0 2px;
}
.login-title {
  font-size: 18.5px;
  font-weight: 600;
  margin: 0 0 2px;
  color: var(--login-text);
  letter-spacing: 0.3px;
  text-transform: uppercase;
  opacity: 0.95;
}
.login-subtitle {
  font-size: 15px;
  color: var(--login-muted);
  margin: 0 0 22px;
}
.login-form { display: flex; flex-direction: column; text-align: left; }
.login-label {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--login-muted);
  opacity: 1;
  margin-top: 10px;
  margin-bottom: 4px;
  font-weight: 600;
}
.login-input {
  width: 100%;
  padding: 11px 13px;
  border: 1px solid var(--login-input-bd);
  border-radius: 8px;
  font-size: 16px;
  background: var(--login-input);
  color: var(--login-text);
  outline: none;
  transition: border-color 0.15s, box-shadow 0.15s;
}
.login-input::placeholder { color: #7C8DA3; }
.login-input:focus {
  border-color: var(--duby-extra);
  box-shadow: 0 0 0 3px rgba(93,193,232,0.25);
}
.login-error {
  color: #FF7A7A;
  font-size: 14px;
  min-height: 16px;
  margin-top: 10px;
  font-weight: 600;
}
.login-button {
  margin-top: 20px;
  background: var(--duby-principal);
  color: white;
  border: none;
  border-radius: 8px;
  padding: 12px 18px;
  font-size: 16px;
  font-weight: 700;
  letter-spacing: 0.4px;
  cursor: pointer;
  transition: background 0.15s, transform 0.1s, box-shadow 0.15s;
  box-shadow: 0 4px 12px rgba(31,106,171,0.30);
}
.login-button:hover {
  background: #2A77BC;
  box-shadow: 0 6px 16px rgba(31,106,171,0.45);
}
.login-button:active {
  transform: translateY(1px);
  box-shadow: 0 2px 8px rgba(31,106,171,0.30);
}

/* Wordmark fallback — usado se não houver imagem da logomarca */
.duby-wordmark {
  font-family: 'Segoe UI', system-ui, sans-serif;
  font-weight: 800;
  font-size: 34.5px;
  letter-spacing: -1.2px;
  color: var(--duby-principal);
  display: inline-flex;
  align-items: baseline;
  line-height: 1;
}
.duby-wordmark::after {
  content: '.';
  color: var(--duby-extra);
  margin-left: 1px;
}

/* ============== USER BOX (sidebar) =============== */
/* Região central rolável: menu ocupa o meio e empurra o rodapé p/ baixo */
.sidebar-menu-scroll {
  flex: 1 1 auto;
  overflow-y: auto;
  overflow-x: hidden;
  min-height: 0;
}
.sidebar-menu-scroll::-webkit-scrollbar { width: 6px; }
.sidebar-menu-scroll::-webkit-scrollbar-thumb {
  background: rgba(255,255,255,0.18); border-radius: 3px;
}

/* Bloco ADMIN fixado acima do rodapé (fora da área de scroll) */
.sidebar-admin {
  flex: 0 0 auto;
  border-top: 1px solid rgba(255,255,255,0.10);
  padding-top: 4px;
  margin-top: 4px;
}

/* Engrenagem ADMIN: agora um ícone igual aos outros do topo (`.notif-toggle`,
   ver `components/sidebar._admin_gear`) — só o popover é próprio, e abre pra
   BAIXO (estava pra cima, de quando isto ficava colado no rodapé). */
.admin-menu-dropdown { position: relative; padding: 3px 5px 0; }
.admin-menu-dropdown.open .notif-toggle {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  color: var(--primary);
}
.admin-menu-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 0;
  z-index: 2000;
  min-width: 190px;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(16,24,40,0.28), 0 2px 6px rgba(16,24,40,0.12);
  padding: 8px;
  display: none;
}
.admin-menu-dropdown.open .admin-menu-panel { display: block; }
.admin-menu-header {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--muted, #8A93A2);
  padding: 2px 8px 6px;
}
.admin-menu-panel .menu-nav { padding: 0; }
.admin-menu-panel .menu-item {
  color: var(--text, #333);
}
.admin-menu-panel .menu-item .menu-icon,
.admin-menu-panel .menu-item .menu-label { color: inherit; }
.admin-menu-panel .menu-item:hover,
.admin-menu-panel .menu-item.active {
  background: color-mix(in srgb, var(--empresa-cor, var(--primary)) 10%, transparent);
}
.admin-menu-backdrop {
  display: none;
}
.admin-menu-dropdown.open .admin-menu-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1999;
}
/* Sidebar em modo ícone: o popover abre pro lado (a sidebar vira uma faixa
   estreita) — mesma ideia de sempre, só trocando `bottom` por `top` porque o
   botão agora mora no topo, não no rodapé. */
.app-shell.collapsed .admin-menu-panel { left: calc(100% + 8px); top: 0; }

/* Separador fino entre o 1º grupo de ícones (Suporte/notificações/Nota
   geral) e o 2º (Admin/usuário) na mesma linha do topo. */
.sidebar-top-sep {
  width: 1px;
  align-self: stretch;
  margin: 2px 3px;
  background: rgba(255, 255, 255, 0.16);
}
.app-shell.collapsed .sidebar-top-sep { width: 20px; height: 1px; margin: 3px auto; }

/* Botão do avatar (abre o popover): mesma bolinha cinza + letra branca do
   avatar de dentro do popover (`.user-avatar`, ver `_user_menu`), pra
   ficar igual fechado e aberto — a pedido do usuário. Não tem mais o
   gradiente colorido por cargo (`role-*`, removido daqui e de `.user-avatar`
   já antes: cinza pra todos os papéis). `background`/`color` ficam definidos
   MAIS ABAIXO, depois de `.notif-toggle` (mesma especificidade — precisa vir
   depois na cascata pra vencer o `background:transparent` genérico daquela
   classe, que este botão também carrega). */
.user-menu-avatar {
  border-radius: 50%;
  font-weight: 800;
  font-size: 12.5px;
  border-color: transparent;
}

/* Popover do avatar: nome/cargo em cima (`.user-avatar`/`.user-name`/
   `.user-role-badge` continuam definidos mais abaixo) + atalho de Suporte +
   (admin) Logins recentes/Online agora + Tema/Sair embaixo — tudo que antes
   vivia solto na fileira de ícones, ao lado do avatar (ver
   components/topbar.py::_user_menu). Mais largo que antes (220px) pra caber
   as listas de login/presença sem espremer. */
.user-menu-panel { width: 280px; padding: 12px; }
.user-menu-head { display: flex; align-items: center; gap: 10px; margin-bottom: 10px; }
.user-menu-actions {
  display: flex;
  flex-direction: column;
  gap: 4px;
  border-top: 1px solid var(--border);
  padding-top: 8px;
  margin-top: 10px;
}
.user-menu-action {
  display: flex;
  align-items: center;
  gap: 8px;
  width: 100%;
  border: none;
  background: transparent;
  color: var(--text, #333);
  font-size: 14.5px;
  padding: 7px 8px;
  border-radius: 6px;
  cursor: pointer;
  text-align: left;
  text-decoration: none;
  transition: background 0.12s;
}
.user-menu-action i { width: 14px; text-align: center; opacity: 0.75; }
.user-menu-action:hover {
  background: color-mix(in srgb, var(--empresa-cor, var(--primary)) 10%, transparent);
}
/* Suporte "ativo" (página atual) — mesmo tratamento de `.notif-toggle.active`. */
.user-menu-action.active {
  background: color-mix(in srgb, var(--empresa-cor, var(--primary)) 12%, transparent);
  color: var(--empresa-cor, var(--primary));
}
/* Seções de Logins recentes/Online agora dentro do popover do avatar (só
   admin) — mesmo `.notif-header` de sempre, com o badge de contagem AO LADO
   do texto (`.notif-badge` original é `position:absolute`, pensado pra
   flutuar em cima de um ÍCONE de sino — aqui é só texto, então volta a ser
   inline). */
.user-menu-section-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-top: 12px;
}
.user-menu-section-header .notif-badge {
  position: static;
  border: none;
  margin-left: 6px;
}

/* Rodapé: só o status do servidor agora (avatar/nome/Tema/Sair subiram pro
   popover do avatar no topo, ver `.user-menu-panel` acima). */
.sidebar-footer {
  margin-top: auto;
  padding: 12px 10px 4px;
  display: flex;
  flex-direction: column;
  gap: 10px;
  border-top: 1px solid rgba(255,255,255,0.12);
}
/* "Servidor online" é só-admin (pedido do usuário) — sem usuário comum, o
   `dcc.Interval` do heartbeat continua rodando (ver `build_sidebar`), só não
   sobra a borda/padding do rodapé com nada visível dentro. */
.sidebar-footer.sidebar-footer-empty { border-top: none; padding: 0; gap: 0; }
/* Indicador de status do servidor (rodapé da sidebar) */
.srv-status {
  display: flex;
  align-items: center;
  gap: 7px;
  font-size: 12.5px;
  color: rgba(255,255,255,0.75);
  letter-spacing: 0.2px;
}
.status-dot {
  width: 8px;
  height: 8px;
  border-radius: 50%;
  background: var(--positive);
  box-shadow: 0 0 0 3px rgba(30,158,90,0.25);
  flex: 0 0 auto;
}
.app-shell.collapsed .srv-status #srv-status-text,
.app-shell.collapsed .srv-status span:last-child { display: none; }
.user-box {  /* compat: caso algum lugar ainda referencie */
  display: flex;
  flex-direction: column;
  gap: 8px;
}
/* Avatar com inicial — círculo cinza + letra branca pra TODOS os papéis (a
   pedido do usuário; antes variava de cor por role: azul admin/verde
   gerente/cinza usuário). */
.user-avatar {
  width: 39px;
  height: 39px;
  flex: 0 0 39px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  font-size: 16px;
  font-weight: 700;
  color: #fff;
  letter-spacing: 0.3px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.30);
  background: linear-gradient(135deg, #9AA3B2, #6B7280);
}
.user-meta { line-height: 1.25; min-width: 0; display: flex; flex-direction: column; gap: 3px; }
.user-name {
  font-size: 15px;
  font-weight: 600;
  color: #fff;
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
/* Badge de papel (pílula colorida) */
.user-role-badge {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  color: #fff;
}
.user-role-badge.role-admin   { background: rgba(79,141,247,0.22); color: #BBD3FB; border: 1px solid rgba(79,141,247,0.45); }
.user-role-badge.role-gerente { background: rgba(52,195,143,0.20); color: #9BE8C7; border: 1px solid rgba(52,195,143,0.45); }
.user-role-badge.role-user    { background: rgba(255,255,255,0.14); color: #D7DBE3; border: 1px solid rgba(255,255,255,0.25); }
/* Dentro do popover do avatar (`.user-menu-panel`) o fundo é o CARD claro
   (`--card`, tema do painel), não mais o navy da sidebar — nome e badge
   precisam de outra paleta pra continuar legíveis (badge sólida + texto
   branco funciona nos dois temas, sem depender de --card). */
.user-menu-panel .user-name { color: var(--text, #1F2733); }
.user-menu-panel .user-role-badge.role-admin   { background: #2D4F8A; color: #fff; border: none; }
.user-menu-panel .user-role-badge.role-gerente { background: #1E9E5A; color: #fff; border: none; }
.user-menu-panel .user-role-badge.role-user    { background: #6B7280; color: #fff; border: none; }

/* ============== ADMIN MENU SECTION =============== */
.menu-section-title {
  margin: 14px 14px 4px;
  padding: 4px 6px;
  border-radius: 6px;
  font-size: 11.5px;
  letter-spacing: 1px;
  color: rgba(255,255,255,0.55);
  text-transform: uppercase;
  display: flex;
  align-items: center;
  justify-content: space-between;
  cursor: pointer;
  user-select: none;
  transition: background 0.15s ease, color 0.15s ease;
}
/* Aberta (não recolhida) ganha um fundo leve — "modelo C" (linha guia) */
.menu-section-title:hover,
.menu-section-title:not(.collapsed) {
  color: rgba(255,255,255,0.9);
  background: rgba(255,255,255,0.06);
}
.menu-section-title:focus-visible {
  outline: none;
  box-shadow: 0 0 0 2px rgba(255,255,255,0.45);
  border-radius: 3px;
}
.menu-section-title:first-child { margin-top: 6px; }
/* Seta que indica recolher/expandir — clique é em QUALQUER ponto do
   subtítulo (delegação em app.py), a seta só sinaliza o estado. */
.menu-section-caret {
  font-size: 10.5px;
  opacity: 0.7;
  transition: transform 0.18s ease;
}
.menu-section-title.collapsed .menu-section-caret { transform: rotate(-90deg); }
/* Corpo da seção (`.menu-nav` embrulhado por `.menu-section-body`, ver
   `components/sidebar._section_title`/`build_sidebar`) — recolhe com um
   deslize suave (truque do grid-template-rows 1fr/0fr, sem medir altura em
   JS) e mostra um traço vertical ligando os itens da seção aberta ("árvore").
   Estado por seção persistido em localStorage (clientside callback em
   app.py), reaplicado a cada navegação (a sidebar é recriada do zero a
   cada troca de página). */
.menu-section-body {
  display: grid;
  grid-template-rows: 1fr;
  transition: grid-template-rows 0.2s ease;
  padding: 0 10px 0 20px;
  position: relative;
}
.menu-section-body.collapsed { grid-template-rows: 0fr; }
.menu-section-body::before {
  content: "";
  position: absolute;
  left: 19px;
  top: 2px;
  bottom: 8px;
  width: 1px;
  background: rgba(255,255,255,0.16);
}
.menu-section-body .menu-nav { padding: 0; overflow: hidden; }
/* Sidebar em modo ícone (recolhida pelo botão de chevron): o subtítulo
   some (regra abaixo), então o accordion por seção perderia o controle —
   força todos os itens visíveis nesse modo (sem a linha guia nem o recuo,
   que não fazem sentido só com ícone), senão o ícone de um relatório cujo
   grupo estava recolhido fica inacessível. Traço fino marca a fronteira
   entre seções (como antes). */
.app-shell.collapsed .menu-section-body {
  grid-template-rows: 1fr !important;
  /* Sem padding própria aqui — o recuo de 6px do modo ícone já vem de
     `.app-shell.collapsed .menu-nav` (regra existente mais abaixo), que
     ganha por especificidade sobre `.menu-section-body .menu-nav { padding: 0 }`. */
  padding: 0;
}
.app-shell.collapsed .menu-section-body::before { display: none; }
.app-shell.collapsed .menu-section-title + .menu-section-body {
  margin-top: 8px;
  padding-top: 8px;
  border-top: 1px solid rgba(255,255,255,0.14);
}
.app-shell.collapsed .menu-section-title:first-child + .menu-section-body {
  margin-top: 0;
  padding-top: 0;
  border-top: none;
}

/* ============== FORM SUBSECTION (sub-card dentro do form-panel) =============== */
.form-subsection {
  border: 1px solid var(--border);
  border-radius: 6px;
  padding: 12px 14px;
  margin: 14px 0;
  background: #FAFBFE;
}
.form-subsection-title {
  font-size: 14px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: var(--primary);
  margin: 0 0 10px 0;
  padding-bottom: 6px;
  border-bottom: 1px solid var(--border);
}

/* ============== FORMS (usuários, auditoria) =============== */
.form-panel {
  margin-bottom: 16px;
}
.form-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(160px, 1fr));
  gap: 14px;
}
.form-field { display: flex; flex-direction: column; gap: 4px; }
.form-field.full { grid-column: 1 / -1; }
.form-label {
  font-size: 12.5px;
  text-transform: uppercase;
  letter-spacing: 0.6px;
  color: var(--muted);
}
.form-input, .form-dd {
  padding: 6px 10px;
  border: 1px solid #DDD;
  border-radius: 6px;
  font-size: 15px;
  font-family: inherit;
  outline: none;
}
.form-input:focus, .form-dd:focus-within {
  border-color: var(--primary);
}
.form-hint {
  font-size: 12px;
  color: var(--muted);
  font-style: italic;
}
.form-feedback {
  font-size: 14px;
  color: var(--primary);
  margin-left: 8px;
}
.form-actions {
  display: flex;
  align-items: center;
  gap: 10px;
  margin-top: 14px;
}
.form-check label, .modules-check label {
  display: inline-flex;
  align-items: center;
  margin-right: 16px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
}
.modules-check {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
  gap: 4px;
  padding: 6px 0;
}
.form-daterange .DateInput_input { font-size: 14px !important; padding: 5px 8px !important; }

/* ============== DATA TABLE (genérica) =============== */
.data-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.data-table th {
  text-align: left;
  background: #F5F7FB;
  border-bottom: 1px solid #DDD;
  padding: 8px 10px;
  font-size: 12.5px;
  text-transform: uppercase;
  color: #555;
  font-weight: 600;
}
.data-table td {
  padding: 8px 10px;
  border-bottom: 1px solid #EEE;
  vertical-align: middle;
}
.data-table tr:hover td { background: #FAFBFE; }

.btn-tab {
  background: white;
  border: 1px solid #DDD;
  border-radius: 5px;
  padding: 4px 10px;
  font-size: 12.5px;
  cursor: pointer;
  margin-right: 4px;
  transition: background 0.12s, border-color 0.12s;
}
.btn-tab:hover { background: #F5F7FB; border-color: #BBB; }
.btn-edit { color: var(--primary); border-color: #C9D2E3; }
.btn-edit:hover { background: #E8EDF5; }
.btn-delete { color: var(--negative); border-color: #E8C9C9; }
.btn-delete:hover { background: #FCE9E9; }

.empty-state {
  padding: 32px 16px;
  text-align: center;
  color: var(--muted);
  font-size: 15px;
}

/* ============== AUDIT COLORS =============== */
.audit-action {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 12.5px;
  font-weight: 600;
  letter-spacing: 0.4px;
  padding: 2px 6px;
  border-radius: 4px;
  background: #EEE;
  color: #444;
}
.audit-info { background: #E8EDF5; color: var(--primary); }
.audit-warn { background: #FFF3CD; color: #8A6500; }
.audit-fail { background: #FCE9E9; color: var(--negative); }
.audit-action { display: inline-block; }
.audit-action-raw {
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
  font-size: 10.5px;
  color: #999;
  margin-top: 2px;
  letter-spacing: 0.3px;
}
.audit-detail-line {
  font-size: 14px;
  color: #444;
  margin-bottom: 4px;
}
.audit-changes {
  font-size: 12.5px;
  background: #FAFAF8;
  border-left: 2px solid #DDD;
  padding: 4px 8px;
  border-radius: 3px;
}
.audit-change-line {
  margin: 2px 0;
  font-family: ui-monospace, SFMono-Regular, Menlo, monospace;
}
.audit-field { color: #666; font-weight: 600; }
.audit-before {
  color: #C00000;
  background: #FCE9E9;
  padding: 1px 4px;
  border-radius: 2px;
}
.audit-after {
  color: #2E7D32;
  background: #E7F3E9;
  padding: 1px 4px;
  border-radius: 2px;
}
.audit-arrow { color: #888; margin: 0 2px; }
.audit-table td { vertical-align: top; padding: 8px 10px; }

/* ============== SUPORTE (form + listagem, admin e usuário) =============== */
/* Painel de filtro (STATUS) precisa de overflow visível — .panel base tem
   overflow:hidden (estabilidade de layout de gráfico) que cortava o menu
   do dropdown ao abrir, sobrando só um fiapo da 1ª opção clicável. Também
   precisa de z-index: como .panel já é position:relative, sem isso o painel
   "SOLICITAÇÕES" logo abaixo (irmão no DOM, também position:relative) pinta
   por cima do menu aberto e intercepta o clique nas opções. */
.sol-filtro-panel { overflow: visible; z-index: 20; }
.sol-filtro-panel .Select-menu-outer { z-index: 20; }

.suporte-list {
  display: flex;
  flex-direction: column;
  gap: 8px;
}
.suporte-item {
  display: flex;
  flex-direction: column;
  gap: 3px;
  padding: 10px 14px;
  border: 1px solid #EEE;
  border-left: 3px solid transparent;
  border-radius: 10px;
  background: #FCFCFD;
  box-shadow: 0 1px 2px rgba(16, 24, 40, 0.04);
  transition: box-shadow 0.15s ease, border-color 0.15s ease;
}
.suporte-item:hover {
  box-shadow: 0 2px 8px rgba(16, 24, 40, 0.08);
  border-color: #E2E5EC;
}
.suporte-item.status-aberto        { border-left-color: #E0A825; }
.suporte-item.status-em_andamento  { border-left-color: var(--primary); }
.suporte-item.status-resolvido     { border-left-color: #2E7D32; }

.suporte-item-header {
  display: flex;
  align-items: center;
  gap: 8px;
}
.suporte-assunto { font-weight: 600; font-size: 15px; color: #2A2E36; letter-spacing: 0.1px; }
.suporte-tipo-tag {
  font-size: 11px;
  font-weight: 600;
  letter-spacing: 0.3px;
  text-transform: uppercase;
  color: var(--muted);
  background: #EEF0F4;
  padding: 2px 7px;
  border-radius: 999px;
}
.suporte-item-meta { font-size: 12px; color: var(--muted); }
.suporte-mensagem {
  font-size: 14.5px;
  color: #444;
  white-space: pre-wrap;
  line-height: 1.4;
  margin-top: 2px;
}
.suporte-resposta {
  margin-top: 4px;
  font-size: 14.5px;
  color: #2E7D32;
  background: #E7F3E9;
  padding: 6px 8px;
  border-radius: 6px;
}

/* Toolbar compacta de gestão (admin): status + resposta + salvar numa
   única linha, em vez de coluna lateral esticada — evita o card "esticar"
   pra acompanhar a altura da coluna de ações quando a mensagem é curta. */
.suporte-item-toolbar {
  display: flex;
  align-items: center;
  gap: 8px;
  margin-top: 6px;
  padding-top: 8px;
  border-top: 1px solid #F0F1F4;
  flex-wrap: wrap;
}
.sol-status-dd { width: 150px; flex: 0 0 auto; }
.sol-resposta-input {
  flex: 1 1 260px;
  min-height: 32px !important;
  height: 32px;
  padding: 6px 10px !important;
  resize: vertical;
}
.suporte-item-toolbar .btn-sm { flex: 0 0 auto; padding: 6px 14px; font-size: 12.5px; }

.suporte-status {
  align-self: flex-start;
  font-size: 11px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 2px 8px;
  border-radius: 999px;
  display: inline-block;
}
.suporte-status-aberto { background: #FFF3CD; color: #8A6500; }
.suporte-status-em_andamento { background: #E8EDF5; color: var(--primary); }
.suporte-status-resolvido { background: #E7F3E9; color: #2E7D32; }

/* ============== CHAT IA — widget flutuante (homologação) =============== */
.chat-ia-badge {
  margin-left: 8px;
  font-size: 10.5px;
  font-weight: 700;
  letter-spacing: 0.4px;
  text-transform: uppercase;
  padding: 2px 7px;
  border-radius: 999px;
  background: #FFF3CD;
  color: #8A6500;
  vertical-align: middle;
}

.chat-widget-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 12px 14px;
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-widget-title { font-size: 16px; color: var(--text, #222); }
.chat-widget-close-btn {
  background: none;
  border: none;
  color: var(--muted);
  font-size: 17px;
  cursor: pointer;
  padding: 4px 6px;
  border-radius: 6px;
}
.chat-widget-close-btn:hover { background: rgba(128,128,128,0.15); }

.chat-widget-subbar {
  display: flex;
  align-items: center;
  gap: 6px;
  padding: 8px 14px;
  font-size: 13px;
  color: var(--muted);
  border-bottom: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-widget-subbar b { color: var(--text, #333); }
.chat-widget-nova {
  margin-left: auto;
  background: none;
  border: none;
  color: var(--muted);
  cursor: pointer;
  font-size: 14px;
  padding: 4px 6px;
  border-radius: 6px;
}
.chat-widget-nova:hover { background: rgba(128,128,128,0.15); color: var(--primary); }

.chat-widget-messages {
  flex: 1;
  overflow-y: auto;
  padding: 12px 14px;
  display: flex;
  flex-direction: column;
}
.chat-widget-composer {
  display: flex;
  align-items: flex-end;
  gap: 8px;
  padding: 10px 12px;
  border-top: 1px solid var(--border);
  flex-shrink: 0;
}
.chat-widget-composer .chat-ia-input { flex: 1; min-height: 38px; max-height: 100px; font-size: 14.5px; }
.chat-widget-send {
  width: 36px;
  height: 36px;
  border-radius: 50%;
  border: none;
  background: var(--primary);
  color: #fff;
  cursor: pointer;
  flex-shrink: 0;
}
.chat-widget-send:hover { background: color-mix(in srgb, var(--primary) 85%, black); }

.chat-ia-list { display: flex; flex-direction: column; gap: 10px; }
.chat-bubble {
  max-width: 78%;
  padding: 10px 14px;
  border-radius: 12px;
  font-size: 15px;
  line-height: 1.5;
}
.chat-bubble-user {
  align-self: flex-end;
  background: var(--primary);
  color: #fff;
  border-bottom-right-radius: 3px;
  white-space: pre-wrap;
}
.chat-bubble-assistant {
  align-self: flex-start;
  background: #F5F7FB;
  color: #333;
  border-bottom-left-radius: 3px;
}
.chat-bubble-assistant .chat-bubble-text { margin: 0; }
.chat-bubble-assistant .chat-bubble-text p:last-child { margin-bottom: 0; }
.chat-tools-used {
  font-size: 12px;
  color: var(--muted);
  margin-bottom: 4px;
  font-style: italic;
}
.chat-ia-empty-wrap {
  flex: 1;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 16px;
  padding: 24px 8px;
  color: var(--muted);
  text-align: center;
}
.chat-ia-empty { display: flex; flex-direction: column; align-items: center; gap: 4px; }
.chat-ia-sugestoes { display: flex; flex-wrap: wrap; gap: 8px; justify-content: center; }
.chat-ia-sugestao {
  background: #EEF0F4;
  border: 1px solid #E2E5EC;
  border-radius: 999px;
  padding: 6px 14px;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: background 0.12s;
}
.chat-ia-sugestao:hover { background: #E2E5EC; }

[data-theme="dark"] .chat-bubble-assistant { background: #262A31; color: var(--text); border: 1px solid var(--border); }
[data-theme="dark"] .chat-ia-sugestao { background: #262A31; border-color: var(--border); color: var(--text); }
[data-theme="dark"] .chat-ia-sugestao:hover { background: #2D3138; }
[data-theme="dark"] .chat-widget-panel { background: var(--card); }

[data-theme="dark"] .suporte-item {
  background: var(--card);
  /* só top/right/bottom — border-left carrega a cor de status (.status-*)
     e não pode ser resetado pelo shorthand border-color aqui. */
  border-top-color: var(--border);
  border-right-color: var(--border);
  border-bottom-color: var(--border);
}
[data-theme="dark"] .suporte-item:hover {
  border-top-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  border-right-color: color-mix(in srgb, var(--primary) 35%, var(--border));
  border-bottom-color: color-mix(in srgb, var(--primary) 35%, var(--border));
}
[data-theme="dark"] .suporte-assunto { color: var(--text); }
[data-theme="dark"] .suporte-mensagem { color: var(--text); }
[data-theme="dark"] .suporte-item-toolbar { border-top-color: var(--border); }
[data-theme="dark"] .suporte-tipo-tag {
  background: #262A31;
  color: var(--muted);
}
[data-theme="dark"] .suporte-resposta { background: #1f3a26; color: #7CD789; }

.suporte-remetente {
  font-size: 14px;
  color: var(--muted);
  background: #E8EDF5;
  border-radius: 6px;
  padding: 8px 12px;
  margin-bottom: 12px;
}
.suporte-remetente b { color: #333; }
[data-theme="dark"] .suporte-remetente { background: #262A31; color: var(--muted); }
[data-theme="dark"] .suporte-remetente b { color: var(--text); }

/* ============== FILTRO DE EMPRESA (dropdown suspenso) =============== */
.empresa-segmentador-wrap {
  display: flex;
  flex-direction: column;
  align-items: flex-start;
  gap: 2px;
  padding: 0;
  margin: 0;
}
.empresa-segmentador-wrap .filter-label {
  margin: 0;
}
.empresa-hint {
  font-size: 14px;
  color: var(--muted);
  font-style: italic;
}
.empresa-error {
  font-size: 14px;
  color: var(--negative);
}

/* ============== UPLOAD / LOGO PREVIEW (admin de empresas) =============== */
.upload-box {
  border: 2px dashed #C9D2E3;
  border-radius: 8px;
  padding: 18px 14px;
  text-align: center;
  background: #FAFBFE;
  color: #555;
  font-size: 15px;
  cursor: pointer;
  transition: background 0.12s, border-color 0.12s;
  margin-bottom: 8px;
}
.upload-box:hover {
  background: #F1F4FA;
  border-color: var(--primary);
}
.emp-logo-preview { margin-top: 6px; }
.emp-logo-thumb-big {
  height: 56px;
  max-width: 180px;
  object-fit: contain;
  border: 1px solid var(--border);
  border-radius: 6px;
  background: white;
  padding: 4px;
}
.emp-logo-thumb {
  height: 28px;
  max-width: 80px;
  object-fit: contain;
  border-radius: 4px;
  background: white;
  padding: 2px;
  border: 1px solid var(--border);
}
.emp-color-swatch {
  display: inline-block;
  width: 18px;
  height: 18px;
  border-radius: 4px;
  border: 1px solid #DDD;
  vertical-align: middle;
}
.emp-color-input {
  border: 1px solid #DDD;
  cursor: pointer;
}

/* ============== ICON PICKER DROPDOWN (admin de relatórios) =============== */
.icon-picker-dd .Select-menu-outer { max-height: 280px; }
.icon-picker-dd .VirtualizedSelectOption {
  display: flex !important;
  align-items: center !important;
  font-size: 15px;
}
.icon-picker-dd .Select-value-label .fa-solid,
.icon-picker-dd .VirtualizedSelectOption .fa-solid {
  color: var(--primary);
}

/* ============== SIDEBAR — COLLAPSED =============== */
.app-shell.collapsed .sidebar { width: 64px; }
.app-shell.collapsed .main-content { margin-left: 64px; }
.app-shell.collapsed .sidebar-logo,
.app-shell.collapsed .rocha-logo {
  max-width: 44px; max-height: 44px; padding: 2px;
}
.app-shell.collapsed .sidebar-empresa-name,
.app-shell.collapsed .menu-label {
  display: none;
}

/* Segmentador de empresa na sidebar: fundo cor primária da empresa,
   texto branco. Usa --sidebar-bg-1 que já vem da cor primária. */
.empresa-fixed {
  background: var(--sidebar-bg-1, #5B0A0A);
  color: #FFFFFF !important;
  border: 1px solid rgba(255,255,255,0.18);
  border-radius: 4px;
  margin: 4px 8px 12px;
  padding: 6px 8px;
  font-size: 14px;
  font-weight: 500;
  display: flex;
  align-items: center;
}
.empresa-selector {
  margin: 4px 8px 12px;
}
.empresa-selector .Select-control,
.empresa-selector .Select.is-open > .Select-control,
.empresa-selector .Select.is-focused > .Select-control {
  background: var(--sidebar-bg-1, #5B0A0A) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  color: #FFFFFF !important;
  box-shadow: none !important;
}
.empresa-selector .Select-value-label,
.empresa-selector .Select-placeholder,
.empresa-selector .Select-input > input {
  color: #FFFFFF !important;
}
.empresa-selector .Select-arrow { border-top-color: rgba(255,255,255,0.85); }
.empresa-selector .is-open .Select-arrow { border-bottom-color: rgba(255,255,255,0.85); }
.empresa-selector .Select-menu-outer {
  background: var(--sidebar-bg-1, #5B0A0A) !important;
  border: 1px solid rgba(255,255,255,0.20) !important;
  color: #FFFFFF !important;
}
.empresa-selector .VirtualizedSelectOption,
.empresa-selector .Select-option {
  background: transparent !important;
  color: #FFFFFF !important;
}
.empresa-selector .VirtualizedSelectFocusedOption,
.empresa-selector .Select-option.is-focused {
  background: rgba(255,255,255,0.12) !important;
}
.empresa-selector .VirtualizedSelectSelectedOption,
.empresa-selector .Select-option.is-selected {
  background: rgba(255,255,255,0.20) !important;
  color: #FFFFFF !important;
}
.empresa-selector label { color: rgba(255,255,255,0.7) !important; }

.app-shell.collapsed .empresa-selector,
.app-shell.collapsed .empresa-fixed,
.app-shell.collapsed .empresa-none,
.app-shell.collapsed .menu-section-title {
  display: none;
}
.app-shell.collapsed .menu-item {
  justify-content: center;
  padding: 10px 8px;
  gap: 0;
}
.app-shell.collapsed .menu-nav { padding: 0 6px; }
.app-shell.collapsed .sidebar-footer {
  padding: 10px 4px 4px;
  align-items: center;
}
.app-shell.collapsed .logo-wrap { margin-bottom: 16px; }
/* Ícones de topo (Suporte/sinos/Nota geral/Admin/avatar): lado a lado quando
   expandida, empilhados e centralizados quando recolhida — não cabem numa
   linha só nos 64px da sidebar recolhida. O separador vira uma linha
   horizontal entre os dois grupos empilhados (ver `.sidebar-top-sep` acima). */
.app-shell.collapsed .sidebar-top-widgets {
  flex-direction: column;
  align-items: center;
  gap: 2px;
}
.app-shell.collapsed .sidebar-top-widgets .notif-dropdown,
.app-shell.collapsed .sidebar-top-widgets .admin-menu-dropdown {
  padding: 0;
}

/* ============== RESPONSIVO — TABLET =============== */
@media (max-width: 900px) {
  .kpi-row { grid-template-columns: repeat(2, 1fr); }
  .row-2col, .row-2col-eq { grid-template-columns: 1fr; }
  .filters-row { flex-wrap: wrap; gap: 8px; }
  /* Grade de cards por filial reflui pra 2 colunas — o cabeçalho de 5
     colunas não casa mais com as cards, então some (nomes já aparecem
     dentro de cada card). */
  .kpi-row-filial-header { display: none; }
}

/* ============== RESPONSIVO — CELULAR =============== */
@media (max-width: 640px) {
  .sidebar { width: 64px; }
  .main-content { margin-left: 64px; padding: 12px 14px; }
  .sidebar-logo,
  .rocha-logo {
    max-width: 44px; max-height: 44px; padding: 2px;
  }
  .sidebar-empresa-name,
  .menu-label,
  .empresa-selector,
  .empresa-fixed,
  .empresa-none,
  .menu-section-title {
    display: none;
  }
  .menu-item { justify-content: center; padding: 10px 8px; gap: 0; }
  .menu-nav { padding: 0 6px; }
  .sidebar-footer { padding: 10px 4px 4px; align-items: center; }
  .logo-wrap { margin-bottom: 16px; }
  .sidebar-top-widgets { flex-direction: column; align-items: center; gap: 2px; }
  .sidebar-top-widgets .notif-dropdown,
  .sidebar-top-widgets .admin-menu-dropdown { padding: 0; }
  .kpi-row { grid-template-columns: 1fr; }
  .kpi-row-filial-group { flex-direction: column; }
  .kpi-row-filial-label {
    width: auto; writing-mode: horizontal-tb; transform: none;
    padding: 4px 8px;
  }
  /* no celular o cabeçalho vira coluna e fica alto demais pra ficar fixo */
  .page-header { position: static; flex-direction: column; align-items: flex-start; gap: 10px; margin-left: 0; margin-right: 0; padding: 0; box-shadow: none; }
  .page-title { font-size: 20.5px; }
  .toolbar { margin-left: 0; flex-wrap: wrap; }
  .dev-kpi-row-wrap { grid-template-columns: 1fr 1fr; }
}

/* ============== DEVOLUÇÃO ================== */
.dev-kpi-row-wrap {
  display: grid;
  grid-template-columns: repeat(5, 1fr);
  gap: 12px;
  margin-bottom: 14px;
}
.dev-kpi-card {
  background: #2E1A6B;
  color: #fff;
  border-radius: 6px;
  padding: 10px 14px 6px 14px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
  display: flex;
  flex-direction: column;
  min-height: 110px;
  cursor: pointer;
  transition: transform 0.15s ease, box-shadow 0.15s ease, opacity 0.18s ease;
  user-select: none;
}
.dev-kpi-card:hover {
  transform: translateY(-1px);
  box-shadow: 0 4px 10px rgba(0,0,0,0.18);
}
.dev-kpi-card.dev-kpi-selected {
  box-shadow: 0 0 0 2px #fff inset, 0 4px 12px rgba(0,0,0,0.22);
}
.dev-kpi-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  margin-bottom: 4px;
  display: flex;
  align-items: center;
  gap: 4px;
}
/* Fundo escuro do card: ícone claro em vez do --muted (cinza escuro, some). */
.dev-kpi-title .info-icon { color: rgba(255,255,255,0.75); }
.dev-kpi-title .info-icon:hover { color: #fff; }
.dev-kpi-row {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
}
.dev-kpi-value {
  font-size: 25.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.1;
  white-space: nowrap;
  overflow: hidden;
  text-overflow: ellipsis;
}
.dev-kpi-icon {
  font-size: 20.5px;
  color: rgba(255,255,255,0.55);
}
.dev-table-wrap {
  max-height: 360px;
  overflow-y: auto;
}
.dev-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.dev-table thead th {
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid #E5E5E5;
  padding: 8px 10px;
  text-align: left;
  font-weight: 600;
  color: var(--empresa-cor, #1F3864);
}
.dev-table tbody td {
  padding: 6px 10px;
  border-bottom: 1px solid #F0F0F0;
}
.dev-table tbody tr:hover td {
  background: #FAFAF8;
}
.dev-table tbody tr.dev-row {
  transition: opacity 0.18s ease;
}
.dev-table tbody tr.dev-row-selected td {
  background: #EEF3FB;
  border-left: 3px solid var(--empresa-cor, #1F3864);
}
.dev-table tfoot td {
  padding: 8px 10px;
  border-top: 2px solid var(--empresa-cor, #1F3864);
  background: #FAFAF8;
}
@media (max-width: 900px) {
  .dev-kpi-row-wrap { grid-template-columns: 1fr 1fr; }
}

/* ============== CONFERENTE ================== */
.conf-page-header {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 16px;
  margin-bottom: 12px;
}
.conf-header-left {
  display: flex;
  flex-direction: column;
  gap: 2px;
}
.conf-page-h1 {
  font-size: 32px;
  font-weight: 800;
  color: var(--empresa-cor, #1F3864);
  letter-spacing: -0.4px;
  line-height: 1.0;
}
.conf-subtitle {
  font-size: 12.5px;
  color: #888;
}
.conf-kpi-row {
  display: grid;
  grid-template-columns: repeat(4, minmax(140px, 1fr));
  gap: 10px;
  flex: 0 0 auto;
}
.conf-kpi-card {
  background: #2E1A6B;
  color: #fff;
  border-radius: 4px;
  padding: 6px 14px 8px 14px;
  display: flex;
  flex-direction: column;
  gap: 2px;
  min-width: 140px;
  box-shadow: 0 2px 6px rgba(0,0,0,0.12);
}
.conf-kpi-title {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  text-transform: uppercase;
  color: rgba(255,255,255,0.85);
  text-align: center;
  display: flex;
  align-items: center;
  justify-content: center;
  gap: 4px;
}
/* Fundo escuro do card: ícone claro em vez do --muted (cinza escuro, some). */
.conf-kpi-title .info-icon { color: rgba(255,255,255,0.75); }
.conf-kpi-title .info-icon:hover { color: #fff; }
.conf-kpi-value {
  font-size: 20.5px;
  font-weight: 700;
  color: #fff;
  line-height: 1.2;
  text-align: center;
  background: rgba(0,0,0,0.18);
  padding: 4px 8px;
  border-radius: 3px;
  font-family: 'Segoe UI Mono', 'Consolas', monospace;
}
.conf-filters-bar {
  display: flex;
  flex-wrap: wrap;
  align-items: flex-end;
  gap: 12px;
  margin-bottom: 12px;
}
.conf-filters-bar .filters-row {
  display: flex;
  flex-wrap: wrap;
  gap: 12px;
  margin: 0;
}
.conf-table-wrap {
  max-height: 460px;
  overflow-y: auto;
}
.conf-table {
  width: 100%;
  border-collapse: collapse;
  font-size: 14px;
}
.conf-table thead th {
  position: sticky;
  top: 0;
  background: #fff;
  border-bottom: 1px solid #E5E5E5;
  padding: 10px 12px;
  text-align: left;
  font-weight: 600;
  color: var(--empresa-cor, #1F3864);
}
.conf-table tbody td {
  padding: 8px 12px;
  border-bottom: 1px solid #F0F0F0;
}
.conf-table tbody tr:hover td {
  background: #FAFAF8;
}
.conf-table tbody tr.conf-row {
  transition: opacity 0.18s ease;
}
.conf-table tbody tr.conf-row-selected td {
  background: #EEF3FB;
  border-left: 3px solid var(--empresa-cor, #1F3864);
}
@media (max-width: 1100px) {
  .conf-page-header { flex-direction: column; }
  .conf-kpi-row { grid-template-columns: repeat(2, 1fr); width: 100%; }
}

/* ============================================================
   Ícones utilitários da topbar (Suporte, sinos de notificação/presença,
   Nota Geral, Admin, avatar) — ver components/topbar.py. Moraram na sidebar
   até aqui (por isso o nome antigo das classes ficou); a pele agora é pra
   fundo CLARO (.topbar), não mais a sidebar escura.
   ============================================================ */
.online-item { display: flex; align-items: center; gap: 7px; }
.online-dot { font-size: 8px; color: #34C38F; }

.notif-dropdown { position: relative; padding: 3px 5px 0; }
/* Botões pequenos e discretos (contorno fino em vez de fundo cheio) — cobre
   os ícones da topbar (Suporte, sinos de notificação/presença, Nota Geral). */
/* Revertido a pedido do usuário: de volta ao ícone discreto (sem fundo,
   cinza, só acende no hover/aberto) — o gradiente "premium" ficou só no
   botão de Filtros (.filters-toggle-btn, mais abaixo), não em TODO ícone
   utilitário (Suporte/sinos/Nota/Admin aqui, e Insights/Atualizar/Limpar
   no toolbar) — ver .btn-toolbar.btn-icon:not(.filters-toggle-btn). */
.notif-toggle {
  position: relative;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 37px;
  height: 37px;
  border: 1px solid transparent;
  border-radius: 8px;
  background: transparent;
  color: var(--muted);
  font-size: 15px;
  cursor: pointer;
  transition: background 0.15s ease, color 0.15s ease, border-color 0.15s ease;
}
.notif-toggle:hover {
  background: color-mix(in srgb, var(--text) 6%, transparent);
  color: var(--text);
}
/* Avatar: bolinha cinza + letra branca sempre (vence o fundo transparente
   genérico de .notif-toggle acima — mesma especificidade, precisa vir
   depois; ver .user-menu-avatar). */
.user-menu-avatar {
  background: linear-gradient(135deg, #9AA3B2, #6B7280);
  color: #fff;
}
.user-menu-avatar:hover {
  background: linear-gradient(135deg, #9AA3B2, #6B7280);
  filter: brightness(1.1);
  color: #fff;
}
.notif-dropdown.open .notif-toggle {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  border-color: color-mix(in srgb, var(--primary) 30%, transparent);
  color: var(--primary);
}
/* Avatar continua com a bolinha cinza (não o tint azul genérico acima) —
   aberto ou fechado, fora ou dentro do popover, sempre igual (ver
   .user-menu-avatar mais acima). */
.notif-dropdown.open .user-menu-avatar {
  background: linear-gradient(135deg, #9AA3B2, #6B7280);
  border-color: transparent;
  color: #fff;
}
/* Ícone de Suporte reaproveita .notif-toggle mas é um <a> (dcc.Link), não
   <button> — precisa do próprio estado "página atual" (.menu-item.active
   não se aplica aqui). */
.notif-toggle.active {
  background: color-mix(in srgb, var(--primary) 12%, transparent);
  color: var(--primary);
}
.notif-badge {
  position: absolute;
  top: -4px;
  right: -4px;
  min-width: 15px;
  height: 15px;
  padding: 0 3px;
  border-radius: 8px;
  background: #E03131;
  /* Contorno na cor de fundo da topbar em vez de encostar direto no ícone —
     separa o badge do botão (o mesmo efeito de "recorte" de um badge de app
     nativo). Era a cor da sidebar (escura) de quando isto vivia lá. */
  border: 1.5px solid var(--card);
  color: #fff;
  font-size: 10px;
  font-weight: 700;
  line-height: 14px;
  text-align: center;
}
.notif-badge:empty { display: none; }
.notif-panel {
  position: absolute;
  top: calc(100% + 8px);
  left: 8px;
  z-index: 2000;
  width: 300px;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(16,24,40,0.28), 0 2px 6px rgba(16,24,40,0.12);
  padding: 10px;
  display: none;
}
.notif-dropdown.open .notif-panel { display: block; }
.notif-backdrop { display: none; }
.notif-dropdown.open .notif-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 1999;
}
.notif-header {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--muted, #8A93A2);
  margin-bottom: 8px;
}
.notif-list { display: flex; flex-direction: column; gap: 6px; }
.notif-item {
  padding: 7px 8px;
  border-radius: 8px;
  background: color-mix(in srgb, var(--empresa-cor, var(--primary)) 5%, transparent);
}
.notif-item-top { display: flex; align-items: center; gap: 6px; }
.notif-item-icon { font-size: 12.5px; color: var(--empresa-cor, var(--primary)); }
.notif-item-user { font-weight: 600; font-size: 15px; color: var(--text, #333); }
.notif-item-bottom {
  display: flex;
  justify-content: space-between;
  gap: 8px;
  margin-top: 2px;
  font-size: 12.5px;
  color: var(--muted, #8A93A2);
}
.notif-item-local { text-align: right; }
.notif-empty { font-size: 14px; color: var(--muted, #8A93A2); padding: 6px; }

/* Chat IA — ícone na topbar, ao lado do Suporte, mesmo design (herda
   .notif-toggle/.notif-panel/.notif-backdrop da classe extra `notif-dropdown`
   que o wrap sempre carrega, ver components/chat_widget.py e
   components/topbar.py). Só o tamanho/overflow do painel muda em relação ao
   .notif-panel genérico (bem maior, com composer/lista de mensagens em vez
   de lista curta) — por isso este bloco vem DEPOIS de .notif-panel acima, pra
   vencer a cascata (mesma ordem de .nota-geral-panel logo abaixo). */
.chat-widget-panel {
  width: 380px;
  max-width: calc(100vw - 32px);
  height: 560px;
  max-height: calc(100vh - 100px);
  overflow: hidden;
  flex-direction: column;
}
.chat-fab-wrap.open .chat-widget-panel { display: flex; }

/* Nota Geral — mural da empresa (sidebar, ao lado do sino de presença
   online). Mesmo esqueleto de .notif-panel, um pouco maior e com
   acabamento mais premium (barra de destaque, ícone em selo, sombra mais
   profunda) já que é um painel de escrita, não uma lista curta. */
.nota-geral-panel {
  width: 360px;
  padding: 0;
  overflow: hidden;
  border-radius: 16px;
  box-shadow: 0 26px 64px rgba(16,24,40,0.34), 0 4px 16px rgba(16,24,40,0.14);
}
.nota-geral-panel::before {
  content: "";
  display: block;
  height: 4px;
  background: linear-gradient(90deg,
    var(--empresa-cor, var(--primary)) 0%,
    color-mix(in srgb, var(--empresa-cor, var(--primary)) 55%, #fff) 100%);
}
.nota-geral-header {
  display: flex;
  align-items: center;
  gap: 8px;
  margin: 0;
  padding: 14px 16px 12px;
  border-bottom: 1px solid var(--border);
  font-size: 15px;
  font-weight: 700;
  letter-spacing: 0.2px;
  color: var(--text, #333);
}
[data-theme="dark"] .nota-geral-header { color: #E8EAED; }
.nota-geral-icon {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  width: 30px;
  height: 30px;
  border-radius: 8px;
  font-size: 14px;
  color: var(--empresa-cor, var(--primary));
  background: color-mix(in srgb, var(--empresa-cor, var(--primary)) 12%, transparent);
}
.nota-geral-panel .anot-textarea {
  margin: 14px 16px 0;
  width: calc(100% - 32px);
  min-height: 170px;
  border-radius: 12px;
  box-shadow: inset 0 1px 2px rgba(16,24,40,0.04);
}
.nota-geral-panel .anot-actions { margin: 12px 16px 14px; }
.nota-geral-panel .notif-item-bottom {
  margin: 0 16px 14px;
  font-size: 12.5px;
  font-style: italic;
  color: var(--muted, #8A93A2);
}

/* ============================================================
   Modal de Anotações (resumo por regras + nota salva)
   ============================================================ */
.anot-wrap { display: none; }
.anot-wrap.open {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2100;
}
.anot-backdrop {
  position: absolute;
  inset: 0;
  background: rgba(0, 0, 0, 0.55);
  backdrop-filter: blur(2px);
}
.anot-modal {
  position: absolute;
  top: 50%;
  left: 50%;
  transform: translate(-50%, -50%);
  width: 92vw;
  max-width: 760px;
  max-height: 86vh;
  overflow-y: auto;
  background: var(--card);
  border-radius: var(--radius);
  border: 1px solid var(--border);
  box-shadow: 0 12px 48px rgba(0, 0, 0, 0.35);
  padding: 18px 22px 22px;
}
.anot-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 14px;
}
.anot-title {
  font-weight: 700;
  font-size: 18.5px;
  color: var(--empresa-cor, #5C0A0A);
}
[data-theme="dark"] .anot-title { color: #E0E0E0; }
.anot-close {
  border: none;
  background: transparent;
  font-size: 23px;
  line-height: 1;
  width: 39px;
  height: 39px;
  border-radius: 8px;
  cursor: pointer;
  color: var(--text, #333);
}
.anot-close:hover { background: rgba(0, 0, 0, 0.08); }
[data-theme="dark"] .anot-close { color: #E0E0E0; }
.anot-resumo-inner { display: flex; flex-direction: column; gap: 12px; }
.anot-sec {
  border-radius: 10px;
  padding: 10px 12px;
  border-left: 4px solid var(--border);
  background: var(--bg, #f6f7f9);
}
.anot-sec.anot-fortes { border-left-color: #2F9E44; background: rgba(47,158,68,0.07); }
.anot-sec.anot-fracos { border-left-color: #E03131; background: rgba(224,49,49,0.07); }
.anot-sec.anot-destaques { border-left-color: #1971C2; background: rgba(25,113,194,0.07); }
.anot-sec.anot-decisoes { border-left-color: #E8590C; background: rgba(232,89,12,0.07); }
.anot-sec-title {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 15px;
  margin-bottom: 6px;
  color: var(--text, #333);
}
.anot-fortes .anot-sec-title { color: #2F9E44; }
.anot-fracos .anot-sec-title { color: #E03131; }
.anot-destaques .anot-sec-title { color: #1971C2; }
.anot-decisoes .anot-sec-title { color: #E8590C; }
.anot-sec-list { margin: 0; padding-left: 20px; }
.anot-sec-list li { font-size: 15px; line-height: 1.5; color: var(--text, #333); }
[data-theme="dark"] .anot-sec-list li { color: #D8DEE6; }
.anot-empty { font-size: 15px; color: var(--muted, #8A93A2); padding: 8px 0; }
.anot-notes { margin-top: 16px; }
.anot-notes-label {
  font-size: 11.5px;
  font-weight: 700;
  letter-spacing: 0.6px;
  color: var(--muted, #8A93A2);
  margin-bottom: 6px;
}
.anot-textarea {
  width: 100%;
  min-height: 110px;
  resize: vertical;
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  font-size: 15px;
  font-family: inherit;
  background: var(--card);
  color: var(--text, #333);
  box-sizing: border-box;
}
.anot-textarea:focus {
  outline: none;
  border-color: var(--empresa-cor, var(--primary));
}
.anot-actions {
  display: flex;
  align-items: center;
  gap: 12px;
  margin-top: 10px;
}
.anot-feedback { font-size: 14px; color: #2F9E44; font-weight: 600; }

/* ============================================================
   Insights & Decisões POR GRÁFICO — ícone lâmpada no panel-title +
   popover flutuante (posicionado via JS, ancorado no ícone clicado;
   foge do overflow:hidden do .panel — ver [[dashboard-chart-stability]]).
   ============================================================ */
.panel-insight-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--muted, #8A93A2);
  font-size: 15px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  opacity: 0.75;
}
.panel-insight-btn:hover {
  opacity: 1;
  color: #E8590C;
  background: rgba(232, 89, 12, 0.10);
}

/* Nota por gráfico — mesmo botão do insight (ícone post-it), cor âmbar pra
   distinguir da lâmpada de Insights & Decisões. Popover reaproveita
   .insight-wrap/.insight-panel/.anot-textarea/.anot-actions como estão. */
.panel-nota-btn {
  border: none;
  background: transparent;
  cursor: pointer;
  color: var(--muted, #8A93A2);
  font-size: 15px;
  width: 28px;
  height: 28px;
  border-radius: 6px;
  display: inline-flex;
  align-items: center;
  justify-content: center;
  margin-left: 2px;
  opacity: 0.75;
}
.panel-nota-btn:hover {
  opacity: 1;
  color: #B8860B;
  background: rgba(184, 134, 11, 0.10);
}
.insight-wrap { display: none; }
.insight-wrap.open { display: block; }
.insight-backdrop {
  display: none;
}
.insight-wrap.open .insight-backdrop {
  display: block;
  position: fixed;
  inset: 0;
  z-index: 2049;
}
.insight-panel {
  position: fixed;
  z-index: 2050;
  width: 320px;
  max-width: 92vw;
  max-height: 70vh;
  overflow-y: auto;
  background: var(--card);
  border: 1px solid var(--border);
  border-radius: 12px;
  box-shadow: 0 18px 40px rgba(16,24,40,0.28), 0 2px 6px rgba(16,24,40,0.12);
  padding: 12px 14px;
}
.insight-header {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.insight-title {
  font-weight: 700;
  font-size: 15px;
  color: var(--empresa-cor, #5C0A0A);
}
[data-theme="dark"] .insight-title { color: #E0E0E0; }
.insight-close {
  border: none;
  background: transparent;
  font-size: 18.5px;
  line-height: 1;
  width: 30px;
  height: 30px;
  border-radius: 6px;
  cursor: pointer;
  color: var(--text, #333);
}
.insight-close:hover { background: rgba(0, 0, 0, 0.08); }
[data-theme="dark"] .insight-close { color: #E0E0E0; }
.insight-body { display: flex; flex-direction: column; gap: 10px; }
.insight-sec-title {
  display: flex;
  align-items: center;
  font-weight: 700;
  font-size: 12.5px;
  letter-spacing: 0.3px;
  margin-bottom: 4px;
  color: #1971C2;
}
.insight-sec-title.insight-dec-title { color: #E8590C; }
.insight-sec-list { margin: 0; padding-left: 18px; }
.insight-sec-list li { font-size: 14.5px; line-height: 1.5; color: var(--text, #333); }
[data-theme="dark"] .insight-sec-list li { color: #D8DEE6; }
.insight-empty { font-size: 14.5px; color: var(--muted, #8A93A2); padding: 4px 0; }

/* ============================================================
   Cards do relatório Vencimento (faixas de prazo a vencer)
   ============================================================ */
.venc-kpi-row {
  display: grid;
  grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
  gap: 12px;
  margin: 14px 0 18px;
}
.venc-kpi-card {
  background: color-mix(in srgb, var(--empresa-cor, var(--primary)) 6%, var(--card));
  border: 1px solid var(--border);
  border-left: 4px solid var(--empresa-cor, var(--primary));
  border-radius: 12px;
  padding: 14px 16px;
  box-shadow: 0 2px 8px rgba(16,24,40,0.06);
}
/* Todos os cards (total + faixas) compartilham a mesma aparência. */
.venc-kpi-card.total { /* sem distinção visual — igual aos demais */ }
.venc-kpi-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  margin-bottom: 8px;
}
.venc-kpi-title {
  font-size: 12.5px;
  font-weight: 700;
  letter-spacing: 0.5px;
  text-transform: uppercase;
  color: var(--muted, #8A93A2);
  display: inline-flex;
  align-items: center;
  gap: 4px;
}
.venc-kpi-icon { font-size: 17px; color: var(--empresa-cor, var(--primary)); }
.venc-kpi-card.alerta .venc-kpi-icon { color: #E03131; }
.venc-kpi-value {
  font-size: 25.5px;
  font-weight: 800;
  color: var(--text, #1A1A1A);
  line-height: 1.1;
}
[data-theme="dark"] .venc-kpi-value { color: #ECECEC; }
.venc-kpi-sub {
  margin-top: 4px;
  font-size: 14px;
  color: var(--muted, #8A93A2);
}
@media (max-width: 1100px) {
  .venc-kpi-row { grid-template-columns: repeat(2, 1fr); }
}

/* ============================================================
   Módulo Finanças — lista de contas conectadas
   ============================================================ */
.fin-contas-list { display: flex; flex-direction: column; gap: 8px; padding: 4px 2px; }
.fin-conta-item {
  display: flex;
  align-items: center;
  justify-content: space-between;
  padding: 10px 12px;
  border-radius: 10px;
  background: color-mix(in srgb, var(--empresa-cor, var(--primary)) 5%, var(--card));
  border: 1px solid var(--border);
}
.fin-conta-info { display: flex; align-items: center; gap: 8px; min-width: 0; }
.fin-conta-banco { font-weight: 600; font-size: 15px; color: var(--text, #333); }
.fin-conta-tipo {
  font-size: 12.5px; color: var(--muted, #8A93A2);
  background: rgba(0,0,0,0.05); padding: 2px 8px; border-radius: 10px;
}
.fin-conta-saldo { font-weight: 700; font-size: 16px; color: var(--text, #1A1A1A); }
[data-theme="dark"] .fin-conta-banco,
[data-theme="dark"] .fin-conta-saldo { color: #ECECEC; }

/* Finanças — KPI cards sempre em uma única linha (larguras iguais que encolhem). */
.fin-kpi-line {
  display: grid;
  grid-auto-flow: column;
  grid-auto-columns: minmax(0, 1fr);
  gap: 12px;
  margin-bottom: 16px;
}

/* ============================================================
   Finanças — limites por categoria (barras de progresso)
   ============================================================ */
.fin-limite-grid {
  display: grid;
  grid-template-columns: repeat(auto-fill, minmax(220px, 1fr));
  gap: 10px;
}
.fin-limite-card {
  border: 1px solid var(--border);
  border-radius: 10px;
  padding: 10px 12px;
  background: var(--card);
}
.fin-limite-card.estourado { border-color: #E03131; background: rgba(224,49,49,0.05); }
.fin-limite-head { display: flex; align-items: center; gap: 6px; margin-bottom: 6px; }
.fin-limite-dot { width: 10px; height: 10px; border-radius: 50%; flex: 0 0 auto; }
.fin-limite-nome { font-size: 14px; font-weight: 600; color: var(--text, #333);
                   white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-limite-tag { margin-left: auto; font-size: 11.5px; font-weight: 700;
                  color: #C00000; text-transform: uppercase; }
.fin-limite-track { height: 8px; border-radius: 6px; background: rgba(0,0,0,0.08);
                    overflow: hidden; }
.fin-limite-fill { height: 100%; border-radius: 6px; transition: width .3s; }
.fin-limite-sub { margin-top: 6px; font-size: 12.5px; color: var(--muted, #8A93A2); }
[data-theme="dark"] .fin-limite-nome { color: #ECECEC; }

/* ============================================================
   Finanças — modal "Gerenciar Categorias"
   ============================================================ */
.fin-cat-wrap { display: none; }
.fin-cat-wrap.open { display: block; position: fixed; inset: 0; z-index: 2100; }
.fin-cat-backdrop { position: absolute; inset: 0; background: rgba(0,0,0,0.55);
                    backdrop-filter: blur(2px); }
.fin-cat-modal {
  position: absolute; top: 50%; left: 50%; transform: translate(-50%, -50%);
  width: 92vw; max-width: 640px; max-height: 86vh; overflow-y: auto;
  background: var(--card); border: 1px solid var(--border);
  border-radius: var(--radius); box-shadow: 0 12px 48px rgba(0,0,0,0.35);
  padding: 18px 22px 22px;
}
.fin-cat-modal-head { display: flex; align-items: center; justify-content: space-between;
                      margin-bottom: 14px; }
.fin-cat-title { font-weight: 700; font-size: 18.5px; color: var(--empresa-cor, #2D4F8A); }
[data-theme="dark"] .fin-cat-title { color: #E0E0E0; }
.fin-cat-close { border: none; background: transparent; font-size: 23px; width: 39px;
                 height: 39px; border-radius: 8px; cursor: pointer; color: var(--text, #333); }
.fin-cat-close:hover { background: rgba(0,0,0,0.08); }
.fin-cat-form { display: flex; flex-wrap: wrap; align-items: center; gap: 8px;
                margin-bottom: 14px; }
.fin-cat-rows { display: flex; flex-direction: column; gap: 6px; }
.fin-cat-row { display: flex; align-items: center; gap: 10px; padding: 8px 10px;
               border-radius: 8px; border: 1px solid var(--border);
               background: color-mix(in srgb, var(--empresa-cor, var(--primary)) 4%, var(--card)); }
.fin-cat-swatch { width: 16px; height: 16px; border-radius: 4px; flex: 0 0 auto; }
.fin-cat-nome { font-weight: 600; font-size: 15px; color: var(--text, #333); flex: 1;
                min-width: 0; white-space: nowrap; overflow: hidden; text-overflow: ellipsis; }
.fin-cat-limite { font-size: 14px; color: var(--muted, #8A93A2); }
.fin-cat-actions { display: flex; gap: 6px; }

.fin-pluggy-hint { font-size: 14px; color: var(--muted, #8A93A2); margin: 0 0 12px; }
.fin-connect-status:empty { display: none; }
.fin-connect-status { font-size: 14px; color: var(--muted, #8A93A2); margin: 6px 2px 0; }

/* ============================================================
   Loader da marca ACL — overlay do dcc.Loading no page-content
   (aparece na transição login→dashboard e em recargas de página)
   ============================================================ */
@keyframes acl-spin { to { transform: rotate(360deg); } }
@keyframes acl-fade { from { opacity: 0; } to { opacity: 1; } }

.acl-loader {
  position: fixed;
  inset: 0;
  display: flex;
  flex-direction: column;
  align-items: center;
  justify-content: center;
  gap: 18px;
  z-index: 9000;
  background: rgba(255, 255, 255, 0.55);
  backdrop-filter: blur(2px);
  animation: acl-fade 0.2s ease-out;
}
[data-theme="dark"] .acl-loader {
  background: rgba(15, 19, 32, 0.55);
}
.acl-loader-badge {
  position: relative;
  width: 96px;
  height: 96px;
  display: flex;
  align-items: center;
  justify-content: center;
}
.acl-loader-logo {
  width: 60px;
  height: 60px;
  object-fit: contain;
  /* leve pulsar pra dar vida sem distrair */
  animation: acl-fade 0.6s ease-in-out alternate infinite;
}
.acl-loader-ring {
  position: absolute;
  inset: 0;
  border-radius: 50%;
  border: 4px solid var(--border, #E9ECF2);
  border-top-color: var(--primary, #2D4F8A);
  border-right-color: var(--primary, #2D4F8A);
  animation: acl-spin 0.9s linear infinite;
}
.acl-loader-text {
  font-size: 16px;
  font-weight: 600;
  color: var(--muted, #6B7280);
  letter-spacing: 0.02em;
}
[data-theme="dark"] .acl-loader-ring {
  border-color: #20242F;
  border-top-color: var(--primary, #5B86C7);
  border-right-color: var(--primary, #5B86C7);
}

/* ============================================================
   Lista rolável do painel "FATURAMENTO POR:" (Grupo/SubGrupo/Produto)
   Mostra TODAS as barras; a figura cresce e rola dentro deste container,
   que mantém a mesma altura visível do gráfico original (320px).
   ============================================================ */
.ranking-scroll {
  height: 320px;
  overflow-y: auto;
  overflow-x: hidden;
}
.ranking-scroll::-webkit-scrollbar { width: 8px; }
.ranking-scroll::-webkit-scrollbar-track { background: transparent; }
.ranking-scroll::-webkit-scrollbar-thumb {
  background: var(--border, #E9ECF2);
  border-radius: 8px;
}
.ranking-scroll::-webkit-scrollbar-thumb:hover { background: var(--muted, #9AA3B2); }
.ranking-scroll { scrollbar-width: thin; scrollbar-color: var(--border, #E9ECF2) transparent; }


/* ============================================================
   Popover "Colunas" (Compras) — painel um pouco mais largo p/ caber
   os chips das colunas selecionadas.
   ============================================================ */
#compras-cols-filters-dropdown .filters-panel { min-width: 340px; }

/* ============================================================
   Popover "Editar metas" (Vendedor) — grade de 18 colunas (vendedor + 2 de
   referência + 12 meses + 3 calculadas), bem mais larga que um popover de
   filtro comum. `right:0` do .filters-panel already ancora pela direita, mas
   sem max-width ela estourava a viewport em telas menores — max-width:95vw +
   overflow-x:auto no wrapper da grade resolve sem mexer no mecanismo comum.
   ============================================================ */
#vendedor-metas-filters-dropdown .filters-panel {
  min-width: min(1180px, 95vw);
  max-width: 95vw;
}
#vendedor-metas-filters-dropdown .ag-theme-quartz.acl-ag-grid {
  overflow-x: auto;
}

/* ---- Loader de boot: logomarca girando, SÓ na tela de login (overlay #acl-boot) ---- */
/* O overlay e o controle de exibição vêm do index_string (app.py). */
#acl-boot {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 99999;
  align-items: center;
  justify-content: center;
  background: var(--bg, #F6F7FB);
  transition: opacity .35s ease;
}
#acl-boot.show { display: flex; }
#acl-boot.hide { opacity: 0; }
#acl-boot img {
  width: 180px;
  height: auto;
  object-fit: contain;
  animation: acl-mark-pulse 1.15s ease-in-out infinite;
}
@keyframes acl-logo-spin {
  from { transform: rotate(0deg); }
  to   { transform: rotate(360deg); }
}
/* Pulse "respiração" da logomarca ACL nos loaders (boot + troca de menu). */
@keyframes acl-mark-pulse {
  0%, 100% { transform: scale(0.94); opacity: 0.55; }
  50%      { transform: scale(1);    opacity: 1; }
}

/* ---- Loader de TROCA DE MENU: logomarca ACL pulsando sobre backdrop leve ---- */
/* Exibição controlada por clientside callbacks (app.py, #acl-nav). */
.acl-nav {
  display: none;
  position: fixed;
  inset: 0;
  z-index: 9000;
  align-items: center;
  justify-content: center;
  background: rgba(246, 247, 251, 0.72);
  background: color-mix(in srgb, var(--bg, #F6F7FB) 72%, transparent);
  backdrop-filter: blur(2px);
  opacity: 1;
  transition: opacity .28s ease;
}
.acl-nav.show { display: flex; }
.acl-nav.hide { opacity: 0; }
.acl-nav img {
  width: 150px;
  height: auto;
  object-fit: contain;
  animation: acl-mark-pulse 1.15s ease-in-out infinite;
}
/* No tema escuro a marca ganha um leve realce p/ destacar do fundo. */
[data-theme="dark"] .acl-nav { background: rgba(15, 19, 32, 0.78); }
[data-theme="dark"] .acl-nav img { filter: brightness(1.35) saturate(1.1); }


/* ============================================================
   SLICER (components/slicer.py) — busca + "Selecionar tudo" + checkboxes.
   Usado no filtro PRODUTO de Compras (alta cardinalidade: ~9 mil itens).
   ============================================================ */
.slicer {
  border: 1px solid var(--border, #E5E5E5);
  border-radius: 6px;
  background: var(--card, #fff);
  overflow: hidden;
}
.slicer-search {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 7px 10px;
  border-bottom: 1px solid var(--border, #E5E5E5);
}
.slicer-search i {
  color: var(--empresa-cor, #4B3FBB);
  font-size: 14px;
}
.slicer-search-input {
  flex: 1;
  min-width: 0;
  border: none;
  outline: none;
  background: transparent;
  font-family: inherit;
  font-size: 15px;
  color: var(--text, #1F2333);
}
.slicer-search-input::placeholder { color: var(--muted, #9AA3B2); }

/* "Selecionar tudo" fica fixo no topo, separado da lista rolável. */
.slicer-all {
  padding: 6px 10px 4px;
  border-bottom: 1px solid var(--border, #E5E5E5);
  font-weight: 600;
}
.slicer-list {
  max-height: 220px;
  overflow-y: auto;
  padding: 4px 10px 6px;
}
.slicer-all label,
.slicer-list label {
  display: flex;
  align-items: center;
  gap: 8px;
  padding: 3px 0;
  font-size: 15px;
  line-height: 1.3;
  cursor: pointer;
  /* nomes longos de produto não podem alargar o popover */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.slicer-list label:hover { color: var(--empresa-cor, #4B3FBB); }
.slicer-all input[type="checkbox"],
.slicer-list input[type="checkbox"] {
  flex: 0 0 auto;
  width: 14px;
  height: 14px;
  accent-color: var(--empresa-cor, #4B3FBB);
  cursor: pointer;
}
.slicer-hint {
  padding: 5px 10px;
  border-top: 1px solid var(--border, #E5E5E5);
  font-size: 12.5px;
  color: var(--muted, #9AA3B2);
}
.slicer-hint:empty { display: none; }
.slicer-list::-webkit-scrollbar { width: 8px; }
.slicer-list::-webkit-scrollbar-track { background: transparent; }
.slicer-list::-webkit-scrollbar-thumb {
  background: var(--border, #E9ECF2);
  border-radius: 8px;
}
.slicer-list { scrollbar-width: thin; scrollbar-color: var(--border, #E9ECF2) transparent; }

/* ============================================================
   SEGMENTADOR (components/segmentador.py) — cabeçalho colapsado + "Selecionar
   tudo" + checkboxes. Usado no MÊS do Comercial (lista curta e fixa).
   Reaproveita .slicer-all/.slicer-list para a pele dos checkboxes.
   A lista abre INLINE (não é position:absolute): o .filters-panel que hospeda
   isto tem overflow-y:auto e deceparia um popover absoluto.
   ============================================================ */
/* O cabeçalho é a MESMA pílula preenchida dos segmentadores de Ano/Dia/Filial
   (ver "Segmentadores Ano/Mês/Dia/Empresa como pílulas preenchidas" acima) —
   aqui à mão, porque aquelas regras miram o .Select-control do dcc.Dropdown. */
.seg-head {
  display: flex;
  align-items: center;
  justify-content: space-between;
  gap: 8px;
  width: 100%;
  min-height: 32px;
  padding: 5px 12px;
  border: 1px solid var(--empresa-cor, #1F3864);
  border-radius: 18px;
  background: var(--empresa-cor, #1F3864);
  box-shadow: 0 1px 3px rgba(0,0,0,0.15);
  font-family: inherit;
  font-size: 15px;
  color: #fff;
  cursor: pointer;
  text-align: left;
}
.seg-head-label {
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.seg-chev {
  flex: 0 0 auto;
  font-size: 11.5px;
  color: #fff;
  transition: transform .15s;
}
.seg.open .seg-chev { transform: rotate(180deg); }
/* Lista: card branco logo abaixo da pílula. */
.seg-body {
  display: none;
  margin-top: 6px;
  border: 1px solid var(--border, #E5E5E5);
  border-radius: 10px;
  background: var(--card, #fff);
  overflow: hidden;
}
.seg.open .seg-body { display: block; }
/* 12 meses cabem sem rolar; acima disso rola dentro do próprio segmentador. */
.seg .seg-list { max-height: 320px; }

/* ---------- PREVISÃO — grade de lançamento manual ----------
   O menu do dropdown das células (Loja/Grupo/Centro/Mês) é desenhado DENTRO da
   tabela, então todo ancestral com `overflow: hidden|auto` o decepa — era por
   isso que a célula parecia vazia e sem opções. O .panel corta por padrão
   (linha 609); aqui o card precisa deixar o menu escapar. */
.previsao-edit-panel { overflow: visible; }
.previsao-edit-panel .dash-spreadsheet-container,
.previsao-edit-panel .dash-spreadsheet-inner,
.previsao-edit-panel .dash-spreadsheet { overflow: visible !important; }
/* O menu abre por cima das linhas de baixo, não empurrando a tabela. */
.previsao-edit-panel .Select-menu-outer {
  display: block !important;
  z-index: 60;
  max-height: 260px;
}
.previsao-edit-panel .Select-menu { max-height: 258px; }
/* Célula de valor: digitação livre, alinhada à direita como número. */
.previsao-edit-panel .dash-cell input.dash-cell-value { text-align: right; }
/* A célula em edição vem com um vermelho translúcido do dash_table por padrão,
   que parece "campo bloqueado / com erro". Troca por um realce azul discreto —
   só sinaliza foco, sem alarmar. */
.previsao-edit-panel .dash-cell.focused,
.previsao-edit-panel td.dash-cell--selected {
  background: #EAF1FB !important;
  box-shadow: inset 0 0 0 1.5px var(--empresa-cor, #1F3864);
}
[data-theme="dark"] .previsao-edit-panel .dash-cell.focused,
[data-theme="dark"] .previsao-edit-panel td.dash-cell--selected {
  background: #2D3138 !important;
}

/* ---- Dashboard de Vendedores: card hero de faturamento/meta ---- */
.vend-kpi-wrap { display: flex; }
.vend-kpi-card {
  display: flex;
  justify-content: space-between;
  align-items: flex-start;
  gap: 12px;
  border-left: 6px solid var(--empresa-cor, #1F3864);
  width: 100%;
}
.vend-kpi-title {
  font-size: 14px; font-weight: 700; letter-spacing: .4px;
  color: var(--muted, #6B7280); text-transform: uppercase;
  display: inline-flex; align-items: center; gap: 5px;
}
.vend-kpi-value {
  font-size: 34.5px; font-weight: 800; margin: 6px 0 10px;
  color: var(--empresa-cor, #1F3864);
}
.vend-kpi-sub { font-size: 14px; margin-top: 4px; color: var(--text, #1F2937); }
.vend-kpi-lbl { color: var(--muted, #6B7280); font-weight: 600; }
.vend-kpi-vs { font-weight: 700; }
.vend-kpi-vs.pos { color: var(--positive, #12805C); }
.vend-kpi-vs.neg { color: var(--negative, #C0202C); }
.vend-kpi-icon { font-size: 34.5px; color: var(--empresa-cor, #1F3864); opacity: .85; }
[data-theme="dark"] .vend-kpi-value,
[data-theme="dark"] .vend-kpi-icon { color: #9DB2E6; }

/* ---- Dashboard de Vendedores: top-5 por faturamento (pódio 1º-3º + 2 extras) ---- */
.podio-wrap {
  display: flex;
  align-items: flex-end;
  justify-content: center;
  flex-wrap: wrap;
  gap: 24px;
  padding: 10px 10px 0;
}
.podio-col { display: flex; flex-direction: column; align-items: center; width: 150px; }
.podio-nome { font-weight: 700; color: var(--text); margin-top: 8px; font-size: 16px; }
.podio-valor { font-weight: 800; font-size: 23px; color: var(--text); margin: 4px 0 12px; }
.podio-card {
  width: 100%;
  border-radius: 12px 12px 0 0;
  display: flex; align-items: flex-start; justify-content: center;
  padding-top: 14px;
}
.podio-1 .podio-card { height: 110px; background: var(--empresa-cor, #1F3864); }
.podio-2 .podio-card { height: 80px; background: #5AA0C8; }
.podio-3 .podio-card { height: 65px; background: #A9AFB8; }
.podio-4 .podio-card,
.podio-5 .podio-card { height: 50px; background: #C9CDD3; }
.podio-medal {
  width: 39px; height: 39px; border-radius: 50%;
  display: flex; align-items: center; justify-content: center;
  font-weight: 800; font-size: 17px; color: #fff;
  box-shadow: 0 2px 6px rgba(0,0,0,0.25);
}
.podio-1 .podio-medal { background: linear-gradient(135deg, #FFD873, #E8A400); color: #5A3D00; }
.podio-2 .podio-medal { background: linear-gradient(135deg, #E4E7EB, #A6ADB8); color: #3A3F47; }
.podio-3 .podio-medal { background: linear-gradient(135deg, #D79A66, #A85F2E); color: #402C15; }
.podio-4 .podio-medal,
.podio-5 .podio-medal { background: #8A93A3; color: #fff; }
[data-theme="dark"] .podio-3 .podio-card { background: #7C838D; }
[data-theme="dark"] .podio-4 .podio-card,
[data-theme="dark"] .podio-5 .podio-card { background: #565C64; }

/* Variante do painel pra papel 'vendedor': só a posição própria (foto + card
   com a medalha do "nível"), nunca nome/foto/valor de colegas. Reaproveita
   `.podio-col`/`.podio-card` (mesma foto/cor por faixa 1º-5º) — só empilha a
   legenda da posição embaixo, por isso sobrescreve o flex-direction/align do
   `.podio-wrap` de que herda. */
.meu-rank-wrap {
  flex-direction: column; align-items: center; justify-content: center;
  padding: 20px 10px;
  gap: 10px;
}
.meu-rank-sub { font-size: 15px; font-weight: 600; color: var(--muted, #6B7280); }

/* MÊS do Cliente e do Vendedor como BOTÕES SEGMENTADOS: um dcc.Checklist (value =
   lista de meses) estilizado como fileira de pills. Clicar no mês inclui/remove; a
   pill acende na cor da empresa quando incluída. O checkbox nativo fica escondido.
   (O Comercial usava isto e passou a usar um dcc.Dropdown multi — ver vendas.py.) */
.mes-segmented {
  display: flex;
  flex-wrap: wrap;
  gap: 4px;
  align-items: center;
}
.mes-segmented .mes-seg-label {
  display: inline-flex;
  align-items: center;
  justify-content: center;
  min-width: 42px;
  padding: 4px 10px;
  border: 1px solid var(--border, #E9ECF2);
  border-radius: 6px;
  font-size: 14px;
  font-weight: 600;
  cursor: pointer;
  user-select: none;
  background: transparent;
  color: inherit;
  transition: background .12s, color .12s, border-color .12s;
}
.mes-segmented .mes-seg-input {
  position: absolute;
  opacity: 0;
  width: 0;
  height: 0;
  pointer-events: none;
}
.mes-segmented .mes-seg-label:hover {
  border-color: var(--empresa-cor, #1F3864);
}
/* Selecionado: o label cujo input (escondido) está :checked. `:has()` é
   suportado nos navegadores em uso (Chrome/Firefox recentes). */
.mes-segmented .mes-seg-label:has(.mes-seg-input:checked) {
  background: var(--empresa-cor, #1F3864);
  border-color: var(--empresa-cor, #1F3864);
  color: #fff;
}

/* Campo de senha com olhinho (mostrar/ocultar) — ver assets/pw_toggle.js */
.pw-wrap { position: relative; }
.pw-wrap .form-input { width: 100%; padding-right: 40px; box-sizing: border-box; }
.pw-eye {
  position: absolute; right: 8px; top: 50%; transform: translateY(-50%);
  border: 0; background: transparent; color: var(--muted, #6b7280);
  cursor: pointer; padding: 6px; font-size: 15px; line-height: 1;
}
.pw-eye:hover { color: var(--text); }

/* Cabeçalho do AG Grid respeita "\n" no headerName (ex.: "QTD\nM. A." no Por Produto). */
.acl-ag-grid .ag-header-cell-text { white-space: pre-line; text-align: center; }