/* =============================================================================
   UNICHAT-DASHBOARD-VISUAL-ASSISTED-CONVERGENCE-01 — folha da superfície Visão geral

   Carrega DEPOIS de crm-dashboard.css: enquanto os componentes anteriores não forem removidos
   com prova (§17.4), a ordem de carga é o que garante que a composição nova vença. Tudo aqui sai
   da escada de VL-05 e dos tokens canônicos — nenhum valor literal de cor, tipografia ou raio.
   ============================================================================= */

.crm-dashboard-page {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-5);
}

/* OVV2 F07: a faixa rolável não pode encolher verticalmente entre módulos preenchidos. */
.crm-dashboard-page > .uni-filter-chips { flex: 0 0 auto; }

/* -----------------------------------------------------------------------------
   Barra de controles
   ----------------------------------------------------------------------------- */

.crm-overview-toolbar {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--uni-space-3);
}

.crm-overview-toolbar-end {
    position: relative;
    display: flex;
    align-items: center;
    gap: var(--uni-space-3);
}

/* UNIPLIM-DEMO-UAT-CLOSURE-01 (BUG-09) — abas de visão + (só no celular) o gatilho de Filtros. */
.crm-overview-toolbar-start {
    display: flex;
    align-items: center;
    gap: var(--uni-space-3);
    min-width: 0;
}

/* A faixa de visão é `UniTabs` (VL-16). `flex: 0 0 auto` porque o trilho com `width: fit-content`
   é esmagado dentro de um contêiner flex — o defeito de 8px medido no piloto (§14, VL-16). */
.crm-overview-viewtabs { flex: 0 0 auto; }

/* -----------------------------------------------------------------------------
   Popover de filtros — classes PRÓPRIAS

   A mecânica é a mesma de /contatos (VL-30 + `uniUx.anchor`), mas as classes não podem ser
   `crm-contacts-*`: emprestar CSS de outra feature é a proibição nº 1 do contrato, e é
   literalmente como o UniChat acumulou três gramáticas. Geometria idêntica, nome próprio.
   ----------------------------------------------------------------------------- */

.crm-overview-filter-backdrop {
    position: fixed;
    inset: 0;
    z-index: var(--uni-z-dropdown);
    border: 0;
    padding: 0;
    background: transparent;
    cursor: default;
}

/* OR-6 — 360px espremia os campos: o `UniSelect` tem 200px de largura mínima (VL-13) e, somado
   ao padding de 16px de cada lado, sobrava pouco para rótulos como "Todos os responsáveis" e
   para as opções longas. O painel passa a acompanhar o conteúdo entre 380 e 460px, em vez de
   impor um teto que os filhos não cabem. */
.crm-overview-filters-panel {
    position: fixed;
    z-index: var(--uni-z-dropdown);
    display: flex;
    flex-direction: column;
    overflow: hidden;
    width: max-content;
    min-width: min(380px, calc(100vw - 32px));
    max-width: min(460px, calc(100vw - 32px));
    border: 1px solid var(--crm-color-border);
    border-radius: var(--uni-radius-lg);
    background: var(--crm-color-surface);
    box-shadow: var(--uni-shadow-md);
}

/* O campo ocupa a largura do painel: sem isso o `width: max-content` do pai encolheria o select
   até o conteúdo, e os três campos ficariam com larguras diferentes entre si. */
.crm-overview-filters-body .uni-field,
.crm-overview-filters-body .uni-field .app-control,
.crm-overview-filters-body .uni-field select {
    width: 100%;
}

/* VL-38 — o PAINEL respeita a altura calculada; o corpo rola por dentro e o rodapé fica preso.
   O corpo não declara `max-height` própria: ela competiria com o limite do ancoramento e o
   conteúdo vazaria pela borda inferior. */
.crm-overview-filters-body {
    flex: 1 1 auto;
    min-height: 0;
    overflow-y: auto;
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-4);
    padding: var(--uni-space-4);
}

.crm-overview-filters-footer {
    flex: 0 0 auto;
    display: flex;
    justify-content: flex-end;
    gap: var(--uni-space-3);
    padding: var(--uni-space-3) var(--uni-space-4);
    border-top: 1px solid var(--crm-color-border);
}

/* UNIPLIM-FC-06 (FC-06.3, filtro da Visão geral) — a sheet do toque ganhou o mesmo rodapé (Limpar · Ver resultado), preso ao pé. */
.crm-overview-sheet-footer {
    display: flex;
    justify-content: flex-end;
    gap: var(--uni-space-3);
    padding-top: var(--uni-space-3);
    margin-top: var(--uni-space-4);
    border-top: 1px solid var(--crm-color-border);
}
.crm-overview-sheet-footer .app-button { min-height: calc(var(--uni-space-7) + var(--uni-space-1)); }

/* Abaixo de 1024px o filtro é a sheet: um popover que ficou aberto ao redimensionar não pode aparecer solto, sem o gatilho —
   regra única no fim deste arquivo, no componente (.crm-dashboard-filters.has-desktop-popover, UNIPLIM-V2-CORRECTIONS-CONSOLIDATION-01
   N5-13). */

/* BUG-09 reforçado — no celular as abas e o gatilho de Filtros quebram de linha em vez de vazar pela direita (360 px, "Filtros (N)"). */
@media (max-width: 767px) {
    .crm-overview-toolbar-start { flex-wrap: wrap; row-gap: var(--uni-space-2); }
}

/* -----------------------------------------------------------------------------
   Relatórios operacionais dentro do modal
   ----------------------------------------------------------------------------- */

.crm-operational-report-bar {
    position: relative;
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: var(--uni-space-3);
    margin-bottom: var(--uni-space-4);
}

.crm-operational-report-bar .crm-operational-report-period {
    margin: 0;
    font-size: var(--uni-font-size-xs);
    color: var(--crm-color-text-muted);
}

/* Embutido no modal, o painel não desenha superfície própria: a superfície é o modal. */
.crm-operational-report.is-embedded {
    padding: 0;
    border: 0;
    background: transparent;
    box-shadow: none;
}

/* -----------------------------------------------------------------------------
   KPIs — VL-01 (2xl no valor), VL-06 (borda superior de 3px por tom)
   ----------------------------------------------------------------------------- */

.crm-overview-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(180px, 1fr));
    gap: var(--uni-space-4);
}

/* UNIPLIM-FC-06 (FC-06.3) — os 8 KPIs comerciais quebravam em 6 + 2 a 1440 px (dois cards órfãos numa segunda linha): no desktop
   viram 4 + 4. Em duas colunas (tablet e celular), número ímpar de KPIs deixa o último ocupando a linha inteira em vez de sozinho
   pela metade (os 5 operacionais). */
@media (min-width: 1024px) {
    .crm-overview-kpis.is-commercial { grid-template-columns: repeat(4, minmax(0, 1fr)); }
}
@media (max-width: 1023px) {
    .crm-overview-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .crm-overview-kpis > :last-child:nth-child(odd) { grid-column: span 2; }
}

/* UNIPLIM-FC-06.5 (residual dos cinco KPIs, Owner Visual) — no desktop, os 5 KPIs operacionais caíam em 4 + 1 sempre que a área
   útil ficava entre ~784 e ~963 px (viewport ~904–1083 com a barra lateral recolhida): o último sozinho numa linha. Regra pela
   LARGURA REAL da página (container), não da viewport: cabendo cinco de 180 px + 4 vãos de 16 px (964 px), uma linha de cinco;
   não cabendo, 3 + 2 equilibrado numa grade de 6 trilhos (os de cima ocupam 2, os de baixo 3) — nunca um card órfão, nada
   esticado além da linha, nenhum overflow. Só para exatamente cinco; os demais números seguem a regra geral. */
.crm-dashboard-page { container: crm-dashboard / inline-size; }

@media (min-width: 1024px) {
    .crm-overview-kpis:has(> :nth-child(5):last-child) { grid-template-columns: repeat(6, minmax(0, 1fr)); }
    .crm-overview-kpis:has(> :nth-child(5):last-child) > :nth-child(-n+3) { grid-column: span 2; }
    .crm-overview-kpis:has(> :nth-child(5):last-child) > :nth-child(n+4) { grid-column: span 3; }

    @container crm-dashboard (min-width: 964px) {
        .crm-overview-kpis:has(> :nth-child(5):last-child) { grid-template-columns: repeat(5, minmax(0, 1fr)); }
        /* Mesma especificidade dos spans acima (`:nth-child(n)`, não `*`), senão os spans de 2/3 sobrevivem em 5 trilhos (2+2+1). */
        .crm-overview-kpis:has(> :nth-child(5):last-child) > :nth-child(n) { grid-column: auto; }
    }
}

/* Redefine o card antigo, que somava borda E sombra (proibido por VL-08 fora de superfície
   flutuante), usava raio `md` onde VL-07 pede `lg` num card, padding de 14px fora da escada e
   `font-weight: 700` com caixa alta num rótulo de leitura. */
.crm-overview-kpis .crm-dashboard-kpi-card {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-2);
    min-height: 0;
    padding: var(--uni-space-4);
    border: 1px solid var(--crm-color-border);
    border-top-width: 3px;
    border-radius: var(--uni-radius-lg);
    background: var(--crm-color-surface);
    box-shadow: none;
    /* O popover do (i) não pode ser recortado pelo card — VL-30. */
    overflow: visible;
}

.crm-overview-kpis .crm-dashboard-kpi-top {
    display: flex;
    align-items: flex-start;
    justify-content: space-between;
    gap: var(--uni-space-2);
}

/* Especificidade deliberada (0,3,0): a folha anterior declara
   `.crm-dashboard-kpi-top > span:first-child { text-transform: uppercase; font-weight: 700 }`,
   que é 0,2,0 e vencia por especificidade mesmo carregando antes. Medido na captura: os rótulos
   saíam em caixa alta e peso 700, contra VL-02 (700 é ênfase excepcional, não rótulo) e VL-03
   (caixa alta só no micro-rótulo `2xs` de cabeçalho de coluna). */
.crm-overview-kpis .crm-dashboard-kpi-top .crm-dashboard-kpi-label {
    display: inline-flex;
    align-items: center;
    gap: var(--uni-space-1);
    min-width: 0;
    font-size: var(--uni-font-size-sm);
    font-weight: 500;
    line-height: 1.3;
    text-transform: none;
    letter-spacing: 0;
    color: var(--crm-color-text-muted);
}

/* Duas linhas de rótulo empurravam o valor para baixo e desalinhavam a fileira inteira — a mesma
   mecânica do §1.2 que motivou VL-52. Reservar a altura de duas linhas iguala todos os cards,
   tenham eles rótulo curto ou longo. */
.crm-overview-kpis .crm-dashboard-kpi-top { min-height: 2.6em; }

.crm-dashboard-kpi-value {
    font-size: var(--uni-font-size-2xl);
    font-weight: 600;
    line-height: 1.15;
    letter-spacing: -0.01em;
    color: var(--crm-color-text);
    font-variant-numeric: tabular-nums;

    /* O valor NUNCA quebra: "BRL 113.485,10" partido em duas linhas desalinhava a fileira e
       ainda dava ao card a aparência de dois números. O texto encolhe antes de quebrar. */
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

/* Altura reservada mesmo vazio: sem ela, um card com tendência e outro sem ficam com alturas
   diferentes e a fileira desalinha (§1.2, pareamento). */
.crm-dashboard-kpi-foot {
    display: flex;
    align-items: center;
    flex-wrap: wrap;
    gap: var(--uni-space-1) var(--uni-space-2);
    min-height: 18px;
}

.crm-dashboard-kpi-hint {
    font-size: var(--uni-font-size-xs);
    line-height: 1.35;
    color: var(--crm-color-text-muted);
}

.crm-dashboard-kpi-trend {
    display: inline-flex;
    align-items: center;
    gap: 3px;
    font-size: var(--uni-font-size-xs);
    font-weight: 600;
    font-variant-numeric: tabular-nums;
}

.crm-dashboard-kpi-trend .crm-icon { width: 13px; height: 13px; }

/* Julgamento só onde o domínio declarou polaridade (adendo §9). */
.crm-dashboard-kpi-trend.is-good { color: var(--crm-color-success); }
.crm-dashboard-kpi-trend.is-bad { color: var(--crm-color-danger); }
.crm-dashboard-kpi-trend.is-neutral { color: var(--crm-color-text-muted); }

/* -----------------------------------------------------------------------------
   Grade dos módulos — ritmo, não widgets iguais (adendo §14)
   ----------------------------------------------------------------------------- */

/* UNIPLIM-FC-06 (FC-06.3, decisão do Owner) — cards da mesma linha com a MESMA altura no desktop e no tablet (antes "start": cada card
   tinha a altura do próprio conteúdo e a linha ficava serrilhada). No celular volta à altura natural (ver Responsivo). */
.crm-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--uni-space-4);
    align-items: stretch;
}

/* Listas paginadas dos cards: reserva de UMA página cheia (cabeçalho + linhas), para a linha da grade não saltar entre páginas. */
.crm-overview-agents.is-paged,
.crm-overview-responsibles.is-paged {
    min-height: calc(var(--uni-space-5) + var(--uni-space-1) + var(--uni-chart-rows, 6) * (var(--uni-space-7) + var(--uni-space-1)));
}

.crm-overview-stages.is-paged {
    min-height: calc(var(--uni-space-5) + var(--uni-space-1) + var(--uni-chart-rows, 6) * var(--uni-space-7));
}

.crm-dashboard-connection-list.is-paged {
    min-height: calc(var(--uni-chart-rows, 6) * (var(--uni-space-6) + var(--uni-space-1) / 2) + (var(--uni-chart-rows, 6) - 1) * (var(--uni-space-2) + var(--uni-space-1) / 2));
    align-content: start;
}

.uni-chart-card-link {
    font-size: var(--uni-font-size-xs);
    font-weight: 600;
    color: var(--crm-color-primary);
    text-decoration: none;
    white-space: nowrap;
}

.uni-chart-card-link:hover { text-decoration: underline; }

/* -----------------------------------------------------------------------------
   Resumo em rodapé de card
   ----------------------------------------------------------------------------- */

.crm-overview-inline-stats {
    display: flex;
    flex-wrap: wrap;
    gap: var(--uni-space-2) var(--uni-space-5);
}

.crm-overview-inline-stats > span {
    display: flex;
    flex-direction: column;
    gap: 1px;
}

.crm-overview-inline-stats small {
    font-size: var(--uni-font-size-2xs);
    color: var(--crm-color-text-muted);
}

.crm-overview-inline-stats strong {
    font-size: var(--uni-font-size-md);
    font-weight: 600;
    color: var(--crm-color-text);
    font-variant-numeric: tabular-nums;
}

/* -----------------------------------------------------------------------------
   Tabelas compactas — atendentes e responsáveis
   ----------------------------------------------------------------------------- */

.crm-overview-agents,
.crm-overview-responsibles {
    display: flex;
    flex-direction: column;
}

/* OR-5 — colunas DETERMINÍSTICAS (cabeçalho e valor alinhados). UNIPLIM-V2-OVV-CORRECTIONS-01 (OVV-F43, DEC-J3-02) — a
   determinação deixou de ser `fr` (frações iguais que cresciam com a tela e quebravam "R$" do número) e passou a ser o contrato
   de dados: cabeçalho e linhas são SUBGRID de `.uni-data-grid` (uni-data-responsive.css), então `auto` resolve uma vez para a
   tabela inteira, pelo maior valor de cada coluna. Aqui a superfície só declara as colunas por TIPO e as faixas. */
.crm-overview-agents {
    --uni-data-cols: minmax(var(--uni-data-w-person), 1fr) repeat(3, auto);
    --uni-data-card-cols: 3;
}

.crm-overview-responsibles {
    --uni-data-cols: minmax(var(--uni-data-w-person), 1fr) repeat(4, auto);
    /* Faixa compacta: Abertas e Ganhas (prioridade 2) viram a linha secundária sob o nome. */
    --uni-data-cols-compact: minmax(var(--uni-data-w-person), 1fr) repeat(2, auto);
    --uni-data-card-cols: 2;
}

.crm-overview-agent-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

/* VL-17 — cabeçalho de coluna: 2xs/600, caixa alta, letter-spacing 0.04em. */
.crm-overview-agents-head,
.crm-overview-responsibles-head,
.crm-overview-stages-head {
    padding-bottom: var(--uni-space-2);
    border-bottom: 1px solid var(--crm-color-border);
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--crm-color-text-muted);
    user-select: none;
}

/* OVV-F43 — alinhamento à direita, `nowrap` e algarismos tabulares vêm de `.uni-num` (contrato de dados). */

.crm-overview-agents-row,
.crm-overview-responsibles-row {
    padding: var(--uni-space-2) 0;
    font-size: var(--uni-font-size-sm);
    color: var(--crm-color-text);
    border-bottom: 1px solid var(--crm-color-border);
    text-decoration: none;
}

.crm-overview-agents-row:last-child,
.crm-overview-responsibles-row:last-child { border-bottom: 0; }

a.crm-overview-responsibles-row:hover {
    background: color-mix(in srgb, var(--crm-color-primary) 6%, transparent);
}

.crm-overview-agent-name {
    display: flex;
    align-items: center;
    gap: var(--uni-space-2);
    min-width: 0;
}

.crm-overview-agent-name strong {
    min-width: 0;
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

/* UNIPLIM-MVP-V2 TC-02 (C10, G-02) — o círculo local de iniciais (.crm-overview-agent-avatar) saiu: atendentes e responsáveis usam
   o UniAvatar (foto ou o mesmo fallback canônico de iniciais VL-33), herdando a classe da autoridade de Contatos. */

/* -----------------------------------------------------------------------------
   Últimos atendimentos
   ----------------------------------------------------------------------------- */

.crm-overview-recent {
    list-style: none;
    margin: 0;
    padding: 0;
}

.crm-overview-recent li + li { border-top: 1px solid var(--crm-color-border); }

.crm-overview-recent a {
    display: grid;
    grid-template-columns: minmax(0, 1fr) auto auto;
    align-items: center;
    gap: var(--uni-space-3);
    padding: var(--uni-space-2) 0;
    text-decoration: none;
    color: inherit;
}

.crm-overview-recent a:hover {
    background: color-mix(in srgb, var(--crm-color-primary) 6%, transparent);
}

.crm-overview-recent-main {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.crm-overview-recent-main strong {
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
    color: var(--crm-color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-overview-recent-main small {
    font-size: var(--uni-font-size-2xs);
    color: var(--crm-color-text-muted);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-overview-recent time {
    font-size: var(--uni-font-size-2xs);
    color: var(--crm-color-text-muted);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   Alcance e automação · atividades comerciais
   ----------------------------------------------------------------------------- */

.crm-overview-secondary {
    display: grid;
    grid-template-columns: 1fr;
    gap: var(--uni-space-2);
}

.crm-overview-activities {
    display: grid;
    grid-template-columns: repeat(2, minmax(0, 1fr));
    gap: var(--uni-space-3);
}

.crm-overview-secondary-item {
    display: flex;
    align-items: center;
    gap: var(--uni-space-3);
    padding: var(--uni-space-2);
    border-radius: var(--uni-radius-md);
    text-decoration: none;
    color: inherit;
}

.crm-overview-secondary-item:hover {
    background: color-mix(in srgb, var(--crm-color-primary) 6%, transparent);
}

.crm-overview-secondary-icon {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 34px;
    height: 34px;
    border-radius: var(--uni-radius-md);
    background: var(--uni-color-neutral-soft);
    color: var(--crm-color-text-muted);
}

.crm-overview-secondary-icon.tone-warning {
    background: var(--uni-color-warning-soft);
    color: var(--crm-color-warning);
}

.crm-overview-secondary-icon.tone-danger {
    background: var(--uni-color-danger-soft);
    color: var(--crm-color-danger);
}

.crm-overview-secondary-icon .crm-icon { width: 17px; height: 17px; }

.crm-overview-secondary-text {
    display: flex;
    flex-direction: column;
    min-width: 0;
}

.crm-overview-secondary-text strong {
    font-size: var(--uni-font-size-lg);
    font-weight: 600;
    line-height: 1.2;
    color: var(--crm-color-text);
    font-variant-numeric: tabular-nums;
}

.crm-overview-secondary-text > span {
    font-size: var(--uni-font-size-sm);
    color: var(--crm-color-text);
}

.crm-overview-secondary-text small {
    font-size: var(--uni-font-size-2xs);
    color: var(--crm-color-text-muted);
}

.crm-overview-activity {
    display: flex;
    flex-direction: column;
    gap: 2px;
    padding: var(--uni-space-3);
    border: 1px solid var(--crm-color-border);
    border-radius: var(--uni-radius-md);
    text-decoration: none;
    color: inherit;
}

.crm-overview-activity:hover { border-color: var(--crm-color-primary); }

.crm-overview-activity strong {
    font-size: var(--uni-font-size-xl);
    font-weight: 600;
    line-height: 1.1;
    color: var(--crm-color-text);
    font-variant-numeric: tabular-nums;
}

.crm-overview-activity > span {
    display: inline-flex;
    align-items: center;
    gap: var(--uni-space-1);
    font-size: var(--uni-font-size-xs);
    color: var(--crm-color-text-muted);
}

/* Vencidas só acende quando existe o que vencer — vermelho permanente vira ruído. */
.crm-overview-activity.is-alert strong { color: var(--crm-color-danger); }

/* -----------------------------------------------------------------------------
   Pipeline por etapa
   ----------------------------------------------------------------------------- */

.crm-overview-stages { display: flex; flex-direction: column; }

.crm-overview-stages-head,
.crm-overview-stage-row {
    display: grid;
    grid-template-columns: minmax(96px, 1.2fr) minmax(0, 2.2fr) minmax(96px, 1fr);
    align-items: center;
    gap: var(--uni-space-3);
}

.crm-overview-stages-head > span:last-child,
.crm-overview-stage-value { text-align: right; }

.crm-overview-stage-row {
    padding: var(--uni-space-2) 0;
    border-bottom: 1px solid var(--crm-color-border);
}

.crm-overview-stage-row:last-child { border-bottom: 0; }

.crm-overview-stage-name {
    min-width: 0;
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
    color: var(--crm-color-text);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
}

.crm-overview-stage-bar {
    display: flex;
    align-items: center;
    gap: var(--uni-space-2);
    min-width: 0;
    height: 22px;
}

.crm-overview-stage-fill {
    height: 100%;
    border-radius: var(--uni-radius-sm);
    background: color-mix(in srgb, var(--crm-color-primary) 22%, transparent);
    border-left: 3px solid var(--crm-color-primary);
    min-width: 3px;
}

.crm-overview-stage-bar strong {
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
    color: var(--crm-color-text);
    font-variant-numeric: tabular-nums;
}

.crm-overview-stage-value {
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
    color: var(--crm-color-text);
    font-variant-numeric: tabular-nums;
    white-space: nowrap;
}

/* -----------------------------------------------------------------------------
   Previsão de fechamento
   ----------------------------------------------------------------------------- */

.crm-overview-forecast {
    list-style: none;
    margin: 0;
    padding: 0;
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-3);
}

.crm-overview-forecast li {
    display: flex;
    align-items: center;
    justify-content: space-between;
    gap: var(--uni-space-3);
    padding: var(--uni-space-3);
    border: 1px solid var(--crm-color-border);
    border-radius: var(--uni-radius-md);
}

.crm-overview-forecast-head,
.crm-overview-forecast-value {
    display: flex;
    flex-direction: column;
    gap: 1px;
    min-width: 0;
}

.crm-overview-forecast-value { text-align: right; }

.crm-overview-forecast-head strong {
    font-size: var(--uni-font-size-sm);
    font-weight: 600;
    color: var(--crm-color-text);
}

.crm-overview-forecast-value strong {
    font-size: var(--uni-font-size-md);
    font-weight: 600;
    color: var(--crm-color-text);
    font-variant-numeric: tabular-nums;
}

.crm-overview-forecast small {
    font-size: var(--uni-font-size-2xs);
    color: var(--crm-color-text-muted);
}

/* -----------------------------------------------------------------------------
   Carregando — a geometria do que vai chegar, para a página não saltar
   ----------------------------------------------------------------------------- */

.crm-overview-loading {
    display: flex;
    flex-direction: column;
    gap: var(--uni-space-4);
}

.crm-overview-loading-kpis,
.crm-overview-loading-grid {
    display: grid;
    gap: var(--uni-space-4);
}

.crm-overview-loading-kpis { grid-template-columns: repeat(auto-fit, minmax(180px, 1fr)); }
.crm-overview-loading-grid { grid-template-columns: repeat(3, minmax(0, 1fr)); }

.crm-overview-loading span {
    display: block;
    border-radius: var(--uni-radius-lg);
    background: var(--uni-color-neutral-soft);
}

.crm-overview-loading-kpis span { height: 108px; }
.crm-overview-loading-grid span { height: 280px; }
.crm-overview-loading-grid span:first-child { grid-column: span 2; }

@media (prefers-reduced-motion: no-preference) {
    .crm-overview-loading span { animation: crm-overview-pulse 1.4s ease-in-out infinite; }

    @keyframes crm-overview-pulse {
        0%, 100% { opacity: 1; }
        50% { opacity: 0.55; }
    }
}

/* -----------------------------------------------------------------------------
   Responsivo
   ----------------------------------------------------------------------------- */

@media (max-width: 1279px) {
    .crm-overview-grid,
    .crm-overview-loading-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@media (max-width: 767px) {
    .crm-dashboard-page { gap: var(--uni-space-4); }

    .crm-overview-grid,
    .crm-overview-loading-grid { grid-template-columns: minmax(0, 1fr); }

    /* UNIPLIM-FC-06 — coluna única: altura natural, sem reserva de página (o celular rola; espaço vazio seria só ruído). */
    .crm-overview-grid { align-items: start; }
    .crm-overview-agents.is-paged,
    .crm-overview-responsibles.is-paged,
    .crm-overview-stages.is-paged,
    .crm-dashboard-connection-list.is-paged { min-height: 0; }

    /* Um módulo largo não pode pedir duas colunas onde só existe uma. */
    .crm-overview-grid > .uni-chart-card { grid-column: span 1; }
    .crm-overview-loading-grid span:first-child { grid-column: span 1; }

    .crm-overview-kpis { grid-template-columns: repeat(2, minmax(0, 1fr)); }
    .crm-overview-kpis .crm-dashboard-kpi-card { padding: var(--uni-space-3); }
    .crm-dashboard-kpi-value { font-size: var(--uni-font-size-xl); }

    .crm-overview-toolbar { align-items: stretch; }
    .crm-overview-toolbar-end { justify-content: space-between; min-width: 0; max-width: 100%; }
    /* BUG-09 — linha 1: Operacional/Comercial à esquerda, Filtros à direita; linha 2: período. */
    .crm-overview-toolbar-start { flex: 1 1 100%; justify-content: space-between; }
    /* Rede de segurança: o período rola DENTRO da própria faixa (contrato N) em vez de empurrar a página. */
    .crm-overview-toolbar-end > .crm-overview-period { flex: 0 1 auto; min-width: 0; }

    /* OVV-F43 — Atendentes e Responsáveis não têm mais regra de celular aqui: o contrato de dados decide pela largura útil do
       cartão (compacta ou cartões rótulo:valor), sem a rolagem horizontal de 340 px que Responsáveis usava. */

    .crm-overview-stages-head,
    .crm-overview-stage-row { grid-template-columns: minmax(72px, 1fr) minmax(0, 1.2fr) minmax(78px, auto); }
}

/* -----------------------------------------------------------------------------
   UNIPLIM-V2-OVV-CORRECTIONS-01 (OVV-F43, DEC-J3-02) — grade dos módulos por faixa da LARGURA ÚTIL da página
   (container `crm-dashboard`), não da viewport (authority §1.6). Antes: 3 módulos até 1280 px de viewport — a 1280 cada
   cartão ficava com ~330 px úteis e a tabela de Responsáveis quebrava "R$" do número. Agora:
     ≥ 1200 px úteis → 3 módulos por linha (1440: cartão ~380 px)
     640–1199        → 2 módulos (1280: ~510 px · 1060: ~410 px · 1023/tablet: ~430 px)
     < 640           → 1 módulo (390 e 360: ~310/~280 px; as tabelas viram cartões rótulo:valor)
   As regras de viewport acima continuam como base; estas vêm depois e vencem quando o contêiner existe.
   ----------------------------------------------------------------------------- */

@container crm-dashboard (max-width: 1199.98px) {
    .crm-overview-grid,
    .crm-overview-loading-grid { grid-template-columns: repeat(2, minmax(0, 1fr)); }
}

@container crm-dashboard (max-width: 639.98px) {
    .crm-overview-grid,
    .crm-overview-loading-grid { grid-template-columns: minmax(0, 1fr); }

    .crm-overview-grid > .uni-chart-card,
    .crm-overview-loading-grid span:first-child { grid-column: span 1; }
}

/* O componente de filtros (CrmDashboardFilters), UNIPLIM-V2-CORRECTIONS-CONSOLIDATION-01 (N5-13) — UMA regra, só no toque (≤1023px):
   o popover que só existe no desktop (Mode "responsive"/"desktop") não aparece solto abaixo de 1024 px (popover aberto ao redimensionar), em qualquer barra.
   Substitui a regra da barra da Visão geral (.crm-overview-toolbar-end …) e a antiga .has-sheet, que também caía no Mode="desktop",
   que não tem sheet. O Mode="popover" (relatório, dentro do modal) segue com o popover em qualquer largura. */
@media (max-width: 1023px) {
    .crm-dashboard-filters.has-desktop-popover .crm-overview-filters-panel,
    .crm-dashboard-filters.has-desktop-popover .crm-overview-filter-backdrop { display: none; }
}

/* Relatório operacional (modal Lg): a grade de módulos responde à largura do PRÓPRIO relatório — dentro do modal a viewport
   mente (authority §1.6). Duas colunas só quando cada tabela tem ao menos ~360 px. */
.crm-operational-report { container: crm-operational-report / inline-size; }

@container crm-operational-report (max-width: 759.98px) {
    .crm-operational-report-grid { grid-template-columns: minmax(0, 1fr); }
}

/* OVV-F43 — a tabela do relatório alinha à esquerda por padrão; número à direita só na célula `.uni-num` (antes TODA célula
   que não fosse a primeira ia à direita, inclusive Status). */
.crm-operational-report-table .uni-num { text-align: right; }

/* OVV-F40 — o envoltório do CrmDashboardFilters não cria caixa: o gatilho participa do flex da barra que o recebe (Visão geral ou
   relatório) como antes, e o painel/fundo são fixos. */
.crm-dashboard-filters { display: contents; }