/* --- Grid de 5 gráficos (proporção idêntica à v1: 5 → 3 → 2 colunas conforme a largura) ---
   Altura do wrapper reduzida em relação ao padrão de Uso do Sistema (220px): aqui tem KPIs +
   5 gráficos + tabela na mesma tela, sem scroll de página — precisa de mais espaço sobrando
   pra tabela ter onde rolar internamente. */
.dash-charts-grid {
    display: grid;
    grid-template-columns: repeat(5, 1fr);
    gap: var(--space-sm);
    margin-bottom: var(--space-sm);
    flex-shrink: 0;
}

.dash-charts-grid .uso-chart-wrapper {
    height: 140px;
}

.dash-charts-grid .uso-chart-card {
    padding: var(--space-sm);
}

@media (max-width: 1400px) {
    .dash-charts-grid { grid-template-columns: repeat(3, 1fr); }
}

@media (max-width: 900px) {
    .dash-charts-grid { grid-template-columns: repeat(2, 1fr); }
}

/* --- 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: 5px;
    margin-bottom: 5px;
}

.dash-kpi-row .uso-kpi-card {
    padding: 6px 10px;
}

/* --- 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). --- */
.dash-bo-card {
    flex: 1;
    min-height: 0;
    display: flex;
    flex-direction: column;
    overflow: hidden;
}

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

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

/* Linha ~15% mais baixa que o padrão de .uso-table (8px de padding vertical) */
.dash-bo-table th,
.dash-bo-table td {
    padding: 6px 8px;
    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%; }

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