/* --- Grid de 5 gráficos, sempre numa linha só (nunca quebra pra 3/2 colunas — o pedido é
   os cards encolherem pra caber, não empilhar em mais linhas e estourar a tela sem scroll).
   Por padrão os cards são maiores (tela grande sobra espaço, os gráficos são o conteúdo
   central da tela) — só encolhe abaixo de 1400px (mesmo breakpoint de "telas menores" já
   usado em layout.css), onde de fato falta espaço pra caber as 5 colunas sem cortar. */
.dash-charts-grid {
    display: grid;
    grid-template-columns: repeat(5, minmax(0, 1fr));
    gap: 10px;
    margin-bottom: 10px;
    flex-shrink: 0;
}

/* Sem isso, cada coluna do grid herda a largura mínima do conteúdo (o <canvas> do Chart.js
   tem 300px de largura intrínseca por padrão) — em telas menores 5 colunas de "no mínimo
   ~300px" somam mais que o espaço disponível e, como #page-content tem overflow:hidden, o
   excesso é cortado (Aging aparecia pela metade, Evolução nem aparecia). min-width:0 propaga
   essa permissão de encolher pro card e pro wrapper; max-width:100% trava o canvas no
   tamanho que o Chart.js (responsive:true) calcular pro container. */
.dash-charts-grid .uso-chart-card {
    padding: 12px;
    min-width: 0;
}

.dash-charts-grid .uso-chart-wrapper {
    height: 170px;
    min-width: 0;
}

.dash-charts-grid .uso-chart-wrapper canvas {
    max-width: 100%;
}

/* Título do card também precisa encolher junto — sem isso ele quebra em 2 linhas antes do
   card ficar pequeno o bastante, empurrando a altura do card e desalinhando a linha. */
.dash-charts-grid .uso-chart-title {
    font-size: 0.85rem;
    margin: 0 0 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

@media (max-width: 1400px) {
    .dash-charts-grid {
        gap: 6px;
        margin-bottom: 6px;
    }
    .dash-charts-grid .uso-chart-card {
        padding: 6px;
    }
    .dash-charts-grid .uso-chart-wrapper {
        height: 105px;
    }
    .dash-charts-grid .uso-chart-title {
        font-size: 0.74rem;
        margin: 0 0 3px;
    }
}

/* --- KPIs: espaçamento bem mais compacto que o padrão de Uso do Sistema (só esta tela
   precisa disso — o resto do grid/card continua igual, só gap/padding/margin encolhem). --- */
.dash-kpi-row {
    gap: 4px;
    margin-bottom: 4px;
}

.dash-kpi-row .uso-kpi-card {
    padding: 4px 8px;
    gap: 1px;
}

.dash-kpi-row .uso-kpi-label {
    font-size: 0.68rem;
}

.dash-kpi-row .uso-kpi-value {
    font-size: 1.1rem;
}

/* --- "vs. período anterior" ao lado de cada KPI --- */
.dash-kpi-var {
    font-size: 0.66rem;
    color: var(--c-text-muted);
}

.dash-kpi-var-boa   { color: #28a745; font-weight: 700; }
.dash-kpi-var-ruim  { color: #dc3545; font-weight: 700; }
.dash-kpi-var-igual,
.dash-kpi-var-novo  { color: var(--c-text-muted); font-weight: 600; }

/* --- Filtros (Filial/De/Até) no topo: padrão de Auditoria é mais espaçoso (tela dedicada só
   a filtro+tabela) — aqui reduz pra sobrar mais altura pros gráficos/KPIs/tabela abaixo. --- */
.dash-filters {
    gap: 6px;
    padding: 0 0 6px;
}

.dash-filters label {
    font-size: 0.78rem;
}

.dash-filters input,
.dash-filters select {
    padding: 4px 8px;
    font-size: 0.8rem;
}

/* --- Card da tabela de Itens em BO: único elemento com scroll — ocupa todo o espaço
   restante da tela (flex:1) e nunca deixa a página inteira rolar (ver claude.md > zero-scroll).
   Padding reduzido do padrão de 16px (.uso-table-card) — mesmo motivo dos outros cards desta
   tela: mais espaço sobrando pra tabela rolar. --- */
.dash-bo-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
    padding: 8px;
}

.dash-bo-card .uso-table-header-row {
    flex-shrink: 0;
    margin-bottom: 4px;
}

.dash-bo-scroll {
    flex: 1;
    min-height: 0;
    overflow-y: auto;
    overflow-x: hidden;
}

/* Larguras fixas por coluna — sem isso, texto longo de Cliente/Descrição empurra a tabela
   pra fora do card e gera scroll horizontal (o usuário não quer isso; corta com "…" em vez). */
.dash-bo-table {
    table-layout: fixed;
    width: 100%;
    font-size: 0.76rem;
}

/* Linha mais baixa que o padrão de .uso-table (8px de padding vertical) */
.dash-bo-table th,
.dash-bo-table td {
    padding: 4px 6px;
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.dash-bo-table th:nth-child(1),  .dash-bo-table td:nth-child(1)  { width: 6%; }
.dash-bo-table th:nth-child(2),  .dash-bo-table td:nth-child(2)  { width: 9%; }
.dash-bo-table th:nth-child(3),  .dash-bo-table td:nth-child(3)  { width: 8%; }
.dash-bo-table th:nth-child(4),  .dash-bo-table td:nth-child(4)  { width: 16%; }
.dash-bo-table th:nth-child(5),  .dash-bo-table td:nth-child(5)  { width: 19%; }
.dash-bo-table th:nth-child(6),  .dash-bo-table td:nth-child(6)  { width: 9%; }
.dash-bo-table th:nth-child(7),  .dash-bo-table td:nth-child(7)  { width: 5%; }
.dash-bo-table th:nth-child(8),  .dash-bo-table td:nth-child(8)  { width: 8%; }
.dash-bo-table th:nth-child(9),  .dash-bo-table td:nth-child(9)  { width: 10%; }
.dash-bo-table th:nth-child(10), .dash-bo-table td:nth-child(10) { width: 10%; }

/* Mesma cor de hover já usada nas tabelas DataTable do resto do sistema (tables.css) —
   reforça que a linha é clicável (abre o modal de edição do Pedido, ver dashboard.js). */
.dash-bo-table tbody tr:hover td {
    background-color: var(--c-accent-light);
}

/* --- Pill de status genérico da tabela de Itens em BO (Status Item/Status Pedido) --- */
.dash-status-pill {
    display: inline-block;
    padding: 2px 8px;
    border-radius: 12px;
    color: #fff;
    font-size: 0.72rem;
    font-weight: 700;
    white-space: nowrap;
}

/* --- Badge de dias em BO, por criticidade (mesmas cores da v1) --- */
.dash-dias-ok       { background: #d1e7dd; color: #0f5132; }
.dash-dias-warn     { background: #fff3cd; color: #664d03; }
.dash-dias-alert    { background: #ffe5d0; color: #7a3a00; }
.dash-dias-critical { background: #f8d7da; color: #842029; }

/* Fundo pastel claro em cima de tema escuro vira um "furo" de tela clara — inverte pra fundo
   escuro/texto claro, mesma família de cor (verde/amarelo/laranja/vermelho) de cada nível. */
:root[data-theme="dark"] .dash-dias-ok       { background: #173829; color: #8FE6B0; }
:root[data-theme="dark"] .dash-dias-warn     { background: #3D3410; color: #F5D783; }
:root[data-theme="dark"] .dash-dias-alert    { background: #3D2712; color: #F5B37A; }
:root[data-theme="dark"] .dash-dias-critical { background: #3D181C; color: #F28B95; }

/* --- Indicador de filtro ativo (drill-down do gráfico de Aging BO), ao lado do título da
   tabela de Itens em BO --- */
.dash-aging-filtro-ativo {
    font-weight: normal;
    font-size: 11px;
    color: var(--c-text-muted);
}

.dash-aging-filtro-ativo strong {
    color: var(--c-text-primary);
}

#dash-aging-limpar {
    color: var(--c-accent);
    text-decoration: underline;
}