.reports-category {
    margin-bottom: 24px;
}

.reports-category-title {
    font-size: 0.75rem;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.5px;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 12px;
    padding-left: 4px;
}

.reports-grid {
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(240px, 1fr));
    gap: 12px;
}

/* === Níveis de Hierarquia para Tabelas Aninhadas === */

/* Nível 1 - Principal (Colaborador) */
.report-level-1 {
    background: #f8f9fa;
    border-radius: 8px;
}

.report-level-1 .mud-table-head {
    background: #e9ecef;
}

.report-level-1 .mud-table-row:hover {
    background: #e9ecef !important;
}

/* Nível 2 - Secundário (Data) */
.report-level-2 {
    background: #ffffff;
    margin-left: 8px;
    margin-top: 8px;
    margin-bottom: 8px;
    border-radius: 8px;
    box-shadow: 0 1px 4px rgba(0,0,0,0.06);
}

.report-level-2 .mud-table-head {
    background: #f0f7f9;
}

/* Nível 3 - Terciário (Paciente) */
.report-level-3 {
    background: #fafbfc;
    margin-left: 16px;
    margin-top: 8px;
    margin-bottom: 8px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.05);
}

.report-level-3 .mud-table-head {
    background: #e8f4f8;
}

/* Nível 4 - Quaternário (Nota) */
.report-level-4 {
    background: #ffffff;
    margin-left: 24px;
    margin-top: 8px;
    margin-bottom: 8px;
    border-radius: 8px;
    box-shadow: 0 1px 3px rgba(0,0,0,0.04);
}

.report-level-4 .mud-table-head {
    background: #f5fafb;
}

/* Nível 5 - Quinário (Serviço) - Tabela final */
.report-level-5 {
    background: #fdfdfd;
    margin-left: 32px;
    margin-top: 8px;
    margin-bottom: 8px;
    border-radius: 8px;
    border: 1px solid #e9ecef;
}

.report-level-5 .mud-table-head {
    background: #f8f9fa;
}

/* === Cabeçalhos de Expansão === */
.report-expand-header {
    display: flex;
    align-items: center;
    gap: 12px;
    padding: 12px 16px;
    background: linear-gradient(to right, var(--mud-palette-surface), transparent);
    border-radius: 8px 8px 0 0;
    margin-bottom: 8px;
}

.report-expand-title {
    font-weight: 600;
    font-size: 0.95rem;
    color: var(--mud-palette-text-primary);
}

.report-expand-subtitle {
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
}

/* === Totalizadores === */
.report-totals {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 12px;
    background: #f8f9fa;
    border-radius: 8px;
    margin-top: 8px;
}

.report-total-item {
    display: flex;
    align-items: center;
    gap: 4px;
    padding: 4px 12px;
    background: white;
    border-radius: 16px;
    font-size: 0.85rem;
    border: 1px solid #e9ecef;
}

.report-total-label {
    color: var(--mud-palette-text-secondary);
    font-weight: 500;
}

.report-total-value {
    color: var(--mud-palette-text-primary);
    font-weight: 600;
}

.report-total-value.positive {
    color: #2e7d32;
}

.report-total-value.negative {
    color: #c62828;
}

/* === Cards de Nível (para ChildRowContent) === */
.report-child-card {
    padding: 16px;
    margin: 8px 0;
    border-radius: 8px;
    background: var(--mud-palette-surface);
}

.report-child-card-l1 {
    background: #f8f9fa;
    border: 1px solid #e9ecef;
}

.report-child-card-l2 {
    background: #ffffff;
    border: 1px solid #eef2f5;
    margin-left: 12px;
}

.report-child-card-l3 {
    background: #fafbfc;
    border: 1px solid #f0f4f7;
    margin-left: 24px;
}

.report-child-card-l4 {
    background: #ffffff;
    border: 1px solid #f3f6f9;
    margin-left: 36px;
}

/* === Melhorias na Tabela MudDataGrid === */
.report-datagrid {
    border-radius: 8px;
    overflow: hidden;
}

.report-datagrid .mud-table-container {
    border-radius: 8px;
}

.report-datagrid .mud-table-row {
    transition: background-color 0.15s ease;
}

/* Rolagem pela barra desenhada (HorizontalScroller Class="report-rolagem"). O MudDataGrid rola a tabela dentro
   do próprio container, com a barra nativa que o app esconde: solto, o excesso passa para o viewport do
   scroller e a barra aparece. A grade cresce até a tabela (fit-content: quebra texto enquanto couber) e a
   barra e o pager ficam na largura visível (100cqw), senão rolariam para fora junto com as colunas. */
.report-rolagem {
    container-type: inline-size;
}

.report-rolagem > .mud-table {
    width: fit-content;
    min-width: 100%;
}

.report-rolagem .mud-table-container {
    overflow: visible;
}

.report-rolagem > .mud-table > .mud-toolbar,
.report-rolagem > .mud-table > .mud-table-pagination {
    position: sticky;
    left: 0;
    width: 100cqw;
    box-sizing: border-box;
}

/* o MudBlazor deixa o pager inline (display: initial), e inline ignora a largura */
.report-rolagem > .mud-table > .mud-table-pagination {
    display: block;
}

/* Com a rolagem, a linha da tabela fica numa linha só (como as colunas do kanban): espremer até o mínimo
   quebrava o serviço em 4-5 linhas e a tabela passava da tela do mesmo jeito. O detalhe expandido
   (td com colspan) continua quebrando. Abaixo de 600px a grade vira cartões (rótulo: valor) e o valor
   precisa quebrar. */
@media (min-width: 600px) {
    .report-rolagem > .mud-table > .mud-table-container > .mud-drop-container > table > thead th,
    .report-rolagem > .mud-table > .mud-table-container > .mud-drop-container > table > tbody > tr > td:not([colspan]) {
        white-space: nowrap;
    }
}

/* Quadradinho que leva o próprio valor (data, nº da nota): cresce com o texto em vez de espremer no tile Sm. */
.acoes-quadradas .acao-quadrada.report-acao-valor {
    width: auto;
    min-width: 68px;
}

.acao-quadrada.report-acao-valor .acao-quadrada__label {
    font-size: 0.7rem;
    white-space: nowrap;
}

/* Remove bordas excessivas nas tabelas internas */
.report-nested-grid {
    border: none !important;
}

.report-nested-grid .mud-table {
    border: none !important;
}

.report-nested-grid .mud-table-cell {
    border-bottom: 1px solid #f0f0f0;
}

/* === Chips de Status === */
.report-status-chip {
    font-size: 0.75rem;
    height: 24px;
}

/* === Responsividade === */
@media (max-width: 960px) {
    .reports-grid {
        grid-template-columns: repeat(auto-fill, minmax(200px, 1fr));
    }
    
    .report-level-2,
    .report-level-3,
    .report-level-4,
    .report-level-5 {
        margin-left: 4px;
    }
    
    .report-child-card-l2,
    .report-child-card-l3,
    .report-child-card-l4 {
        margin-left: 4px;
    }
}

@media (max-width: 600px) {
    .reports-grid {
        grid-template-columns: 1fr;
    }
    
    .report-totals {
        flex-direction: column;
    }
    
    .report-total-item {
        width: 100%;
        justify-content: space-between;
    }
}

/* === Animações Sutis === */
.report-fade-in {
    animation: reportFadeIn 0.3s ease-out;
}

@keyframes reportFadeIn {
    from {
        opacity: 0;
        transform: translateY(8px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* === Indicador de Hierarquia Visual === */
.report-hierarchy-indicator {
    display: flex;
    align-items: center;
    gap: 8px;
    padding: 8px 12px;
    background: #f5f5f5;
    border-radius: 4px;
    font-size: 0.8rem;
    color: var(--mud-palette-text-secondary);
    margin-bottom: 12px;
}

.report-hierarchy-indicator .breadcrumb-item {
    display: flex;
    align-items: center;
    gap: 4px;
}

.report-hierarchy-indicator .breadcrumb-separator {
    color: #ccc;
}