/* =============================================================================
   UNIPLIM-V2-OVV-CORRECTIONS-01 (OVV-F43, DEC-J3-02) — contrato responsivo de DADOS da família Uni

   Tabelas, listas-tabela e cartões de métricas. Camada canônica: carrega depois de uni-charts.css e ANTES das folhas de
   superfície (App.razor), para que a superfície ajuste tipografia, bordas e espaçamento sem reimplementar a regra.

   Origem: no cartão "Responsáveis" da Visão geral a coluna Pipeline quebrava "R$" numa linha e o número na outra, e o
   cabeçalho "Conversão" ocupava mais largura que o conteúdo — as colunas eram frações iguais (`fr`) que acompanhavam a tela
   sem limite e ignoravam o tipo do dado. O Owner pediu um padrão para o app inteiro, não um ajuste daquele cartão.

   O contrato (docs/design-system/uni: authority §1.6, §9 e §12 — componente de dado responde à LARGURA ÚTIL do contêiner,
   nunca à viewport; rótulo de cartão declarativo no markup, nunca texto gerado por pseudo-elemento; `body` nunca rola na
   horizontal):

   1. Valor (`.uni-value`, `.uni-num`) — número, moeda, percentual, duração e data NUNCA quebram por dentro (`nowrap`) e usam
      algarismos tabulares. `.uni-num` é a célula numérica de tabela: alinhada à direita.
   2. Largura mínima por tipo (`.uni-num--int|percent|money|duration|date`, `.uni-data-text`, `.uni-data-person`), em `ch` da
      própria célula: acompanha a fonte. A coluna numérica é `auto` (cabe o maior valor, nunca menos que o mínimo do tipo) e a
      coluna de identificação absorve o resto com reticências.
   3. Lista-tabela (`.uni-data-table` › `.uni-data-grid` › `.uni-data-head` + `.uni-data-row`) — cabeçalho e linhas são
      SUBGRID da mesma grade: a largura de cada coluna é a mesma em todas as linhas e vem do conteúdo, não de frações iguais.
      Colunas declaradas pela superfície em `--uni-data-cols` (e, opcional, `--uni-data-cols-compact`).
   4. Prioridade de colunas por faixa do CONTÊINER (`container: uni-data`):
        ≥ 480 px  completa — todas as colunas;
        340–479   compacta — colunas `.uni-data-p2` saem da grade e o dado delas aparece na linha secundária
                  (`.uni-data-sub`) da célula principal; o cabeçalho quebra entre palavras, os valores não;
        < 340 px  cartões — cada linha vira um bloco "rótulo : valor" (`.uni-data-k` declarado no markup, lido também pelo
                  leitor de tela nas outras faixas), em `--uni-data-card-cols` colunas, separados por divisória (sem card
                  dentro de card — authority §8).
   5. Rolagem horizontal (`.uni-data-scroll`) só para relatório denso em `<table>` e só quando o conteúdo não cabe
      (`overflow-x: auto`), CONTIDA no contêiner e com indicação visual: sombra na borda do lado que ainda tem conteúdo.

   Faixas validadas por contrato (largura útil aproximada do cartão de módulo da Visão geral, página com rail de 72 px):
     1440 → grade de 3 módulos, cartão ~380 px: compacta   · 1280 → 2 módulos, ~510 px: completa
     1060 → 2 módulos, ~410 px: compacta                    · 1023 → 2 módulos (shell tablet), ~430 px: compacta
      390 → 1 módulo, ~310 px: cartões                      ·  360 → 1 módulo, ~280 px: cartões
   ============================================================================= */

:root {
    --uni-data-w-int: 3ch;
    --uni-data-w-percent: 6ch;
    --uni-data-w-money: 9ch;
    --uni-data-w-duration: 6ch;
    --uni-data-w-date: 10ch;
    --uni-data-w-text: 10ch;
    --uni-data-w-person: 12ch;
    --uni-data-gap: var(--uni-space-3);
    --uni-data-cols: minmax(var(--uni-data-w-text), 1fr);
    --uni-data-card-cols: 2;
    --uni-data-scroll-fade: var(--uni-color-surface);
    --uni-data-scroll-shadow: color-mix(in srgb, var(--uni-color-text) 18%, transparent);
}

/* -----------------------------------------------------------------------------
   1. Valores
   ----------------------------------------------------------------------------- */

.uni-value,
.uni-num {
    white-space: nowrap;
    font-variant-numeric: tabular-nums;
}

.uni-num { text-align: right; }

/* -----------------------------------------------------------------------------
   2. Largura mínima por tipo de dado
   ----------------------------------------------------------------------------- */

.uni-num--int { min-width: var(--uni-data-w-int); }
.uni-num--percent { min-width: var(--uni-data-w-percent); }
.uni-num--money { min-width: var(--uni-data-w-money); }
.uni-num--duration { min-width: var(--uni-data-w-duration); }
.uni-num--date { min-width: var(--uni-data-w-date); }
.uni-data-text { min-width: var(--uni-data-w-text); }
.uni-data-person { min-width: var(--uni-data-w-person); }

/* -----------------------------------------------------------------------------
   3. Lista-tabela em subgrid
   ----------------------------------------------------------------------------- */

.uni-data-table {
    container: uni-data / inline-size;
    min-width: 0;
}

.uni-data-grid {
    display: grid;
    grid-template-columns: var(--uni-data-cols);
    column-gap: var(--uni-data-gap);
}

.uni-data-head,
.uni-data-row {
    display: grid;
    grid-column: 1 / -1;
    grid-template-columns: subgrid;
    align-items: center;
}

/* Navegador sem subgrid: cada linha declara as mesmas colunas (o alinhamento vertical pode variar em poucos pixels). */
@supports not (grid-template-columns: subgrid) {
    .uni-data-head,
    .uni-data-row {
        grid-template-columns: var(--uni-data-cols);
        column-gap: var(--uni-data-gap);
    }
}

.uni-data-primary { min-width: 0; }

/* O cabeçalho quebra ENTRE palavras ("Em / conversa") quando a coluna aperta; o valor da coluna nunca quebra. */
.uni-data-head > * { min-width: 0; }
.uni-data-head > .uni-num { white-space: normal; }

/* Rótulo declarativo da célula: lido pelo leitor de tela nas faixas de tabela (o cabeçalho visual é `aria-hidden`) e
   mostrado na faixa de cartões. */
.uni-data-k {
    position: absolute;
    width: 1px;
    height: 1px;
    overflow: hidden;
    clip-path: inset(50%);
    white-space: nowrap;
}

/* Linha secundária da célula principal: só existe na faixa compacta. */
.uni-data-sub { display: none; }

/* -----------------------------------------------------------------------------
   4. Faixas do contêiner
   ----------------------------------------------------------------------------- */

@container uni-data (max-width: 479.98px) {
    .uni-data-grid { grid-template-columns: var(--uni-data-cols-compact, var(--uni-data-cols)); }
    .uni-data-p2 { display: none; }

    .uni-data-sub {
        display: block;
        min-width: 0;
        overflow: hidden;
        text-overflow: ellipsis;
        white-space: nowrap;
        font-size: var(--uni-font-size-2xs);
        font-weight: 500;
        color: var(--uni-color-text-muted);
        font-variant-numeric: tabular-nums;
    }
}

@container uni-data (max-width: 339.98px) {
    .uni-data-grid {
        display: flex;
        flex-direction: column;
    }

    .uni-data-head { display: none; }

    .uni-data-row {
        grid-column: auto;
        grid-template-columns: repeat(var(--uni-data-card-cols), minmax(0, 1fr));
        gap: var(--uni-space-2) var(--uni-space-3);
    }

    .uni-data-row > .uni-data-primary { grid-column: 1 / -1; }
    .uni-data-row > .uni-data-p2 { display: flex; }

    .uni-data-row > .uni-num {
        display: flex;
        flex-direction: column;
        align-items: flex-start;
        gap: 1px;
        min-width: 0;
        text-align: left;
    }

    .uni-data-row .uni-data-k {
        position: static;
        width: auto;
        height: auto;
        overflow: visible;
        clip-path: none;
        font-size: var(--uni-font-size-2xs);
        font-weight: 500;
        color: var(--uni-color-text-muted);
    }

    .uni-data-sub { display: none; }
}

/* -----------------------------------------------------------------------------
   5. Rolagem horizontal contida, com indicação
   Sombras "locais": a máscara da cor da superfície rola com o conteúdo e cobre a sombra fixa do lado que já está no fim.
   Quem usa: relatório denso em <table>. A superfície que pinta fundo próprio no MESMO elemento perde a indicação — por isso
   o contrato vai num envoltório sem fundo (ver CrmOperationalReportPanel, OutboundJourneyPanel, CampaignDimensionTable).
   ----------------------------------------------------------------------------- */

.uni-data-scroll {
    max-width: 100%;
    overflow-x: auto;
    overscroll-behavior-x: contain;
    background-color: var(--uni-data-scroll-fade);
    background-image:
        linear-gradient(to right, var(--uni-data-scroll-fade) 30%, transparent),
        linear-gradient(to left, var(--uni-data-scroll-fade) 30%, transparent),
        radial-gradient(farthest-side at 0 50%, var(--uni-data-scroll-shadow), transparent),
        radial-gradient(farthest-side at 100% 50%, var(--uni-data-scroll-shadow), transparent);
    background-position: left center, right center, left center, right center;
    background-size: var(--uni-space-7) 100%, var(--uni-space-7) 100%, var(--uni-space-3) 100%, var(--uni-space-3) 100%;
    background-repeat: no-repeat;
    background-attachment: local, local, scroll, scroll;
}

.uni-data-scroll:focus-visible {
    outline: 2px solid var(--uni-color-focus-ring);
    outline-offset: 2px;
}

/* -----------------------------------------------------------------------------
   6. Tabela densa canônica (`<table class="uni-table">` dentro de `.uni-data-scroll`)
   Relatório comparativo com colunas numéricas (authority §3.4/§9 — SUPPORTED VARIANT). Texto à esquerda, número à direita
   pela célula `.uni-num`; cabeçalho no micro-rótulo `2xs` de coluna (VL-17). Superfícies com tabela própria (`ci-table`,
   `ob-table`, `crm-operational-report-table`) seguem com a sua folha e usam só as classes de valor e de rolagem.
   ----------------------------------------------------------------------------- */

.uni-table {
    width: 100%;
    border-collapse: collapse;
    font-size: var(--uni-font-size-sm);
    color: var(--uni-color-text);
}

.uni-table th,
.uni-table td {
    padding: var(--uni-space-2) var(--uni-space-3);
    border-bottom: 1px solid var(--uni-color-border);
    text-align: left;
    vertical-align: middle;
}

.uni-table thead th {
    font-size: var(--uni-font-size-2xs);
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.04em;
    color: var(--uni-color-text-muted);
}

.uni-table .uni-num { text-align: right; }
.uni-table tbody tr:last-child > * { border-bottom: 0; }