/* =============================================================================
   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);
}

/* -----------------------------------------------------------------------------
   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);
}

/* 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);
}

/* -----------------------------------------------------------------------------
   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);
}

/* 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)
   ----------------------------------------------------------------------------- */

.crm-overview-grid {
    display: grid;
    grid-template-columns: repeat(3, minmax(0, 1fr));
    gap: var(--uni-space-4);
    align-items: 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.
   O cabeçalho e as linhas são grids IRMÃOS, não um só. Com `minmax(44px, auto)` cada grid
   resolvia `auto` pelo próprio conteúdo: o cabeçalho pela largura de "CONVERSÃO" e a linha pela
   de "0,0%". Colunas diferentes, e por isso os números não caíam sob os seus títulos.
   Em `fr` a largura não depende do conteúdo, então todos os grids da tabela chegam ao mesmo
   resultado — que é o que faz cabeçalho e valor se alinharem. */
.crm-overview-agents-head,
.crm-overview-agents-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(3, minmax(52px, 0.8fr));
    align-items: center;
    gap: var(--uni-space-3);
}

.crm-overview-responsibles-head,
.crm-overview-responsibles-row {
    display: grid;
    grid-template-columns: minmax(0, 2fr) repeat(4, minmax(52px, 0.85fr));
    align-items: center;
    gap: var(--uni-space-3);
}

/* 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;
}

.crm-overview-agents-head > span:not(:first-child),
.crm-overview-responsibles-head > span:not(:first-child),
.crm-overview-agents-row > span:not(:first-child),
.crm-overview-responsibles-row > span:not(:first-child) {
    text-align: right;
    font-variant-numeric: tabular-nums;
}

.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;
}

/* VL-33 — degradê cinza frio, inicial branca. A cor NUNCA deriva do nome. */
.crm-overview-agent-avatar {
    flex: 0 0 auto;
    display: inline-flex;
    align-items: center;
    justify-content: center;
    width: 26px;
    height: 26px;
    border-radius: var(--uni-radius-pill);
    background: linear-gradient(160deg, #8f9bb0, #4a5568);
    color: #fff;
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    user-select: none;
}

/* -----------------------------------------------------------------------------
   Ú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); }

    /* 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; }

    /* Tabelas densas no celular: a coluna de identificação manda, os números encolhem. */
    .crm-overview-agents-head,
    .crm-overview-agents-row { grid-template-columns: minmax(0, 1.6fr) repeat(3, minmax(40px, 0.7fr)); }

    /* Cinco colunas não cabem em 348px: medido, o card de Responsáveis chegava a 357px e vazava.
       VL-17 diz que conteúdo que não cabe significa colunas demais — mas esconder uma coluna
       apagaria dado que o ranking existe para comparar. VL-27 dá a saída certa: rolagem
       horizontal CONTIDA no container, nunca no body. O `min-width` interno garante que cada
       coluna receba largura legível em vez de espremer todas. */
    .crm-overview-responsibles {
        overflow-x: auto;
        overscroll-behavior-x: contain;
    }

    .crm-overview-responsibles-head,
    .crm-overview-responsibles-row {
        min-width: 340px;
        grid-template-columns: minmax(104px, 1.5fr) repeat(4, minmax(52px, 0.7fr));
    }

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