/*
 * Relatórios Operacionais — reaproveita o mesmo formato de variáveis de
 * tema claro/escuro do Painel Executivo (resources/css/filament/
 * dashboard.css), mas com nomes próprios (--rel-*) porque esta página
 * tem seu wrapper isolado (.relatorios-page), não .executive-dashboard.
 */

.relatorios-page {
    --rel-text-primary: var(--app-text);
    --rel-text-secondary: var(--app-secondary);
    --rel-text-muted: var(--app-muted);
    --rel-card-bg: var(--app-surface);
    --rel-card-border: var(--app-border);
    --rel-divider: var(--app-divider);
    --rel-tab-bg: var(--app-subtle);
    --rel-tab-active-bg: var(--app-accent);
    --rel-tab-active-text: var(--app-on-accent);
    --rel-btn-secondary-bg: var(--app-subtle);
    --rel-btn-secondary-border: var(--app-border);

    --rel-pill-success-bg: rgba(34, 197, 94, 0.12);
    --rel-pill-success-text: #15803d;
    --rel-pill-warning-bg: var(--app-accent-soft);
    --rel-pill-warning-text: #b45309;
    --rel-pill-danger-bg: rgba(239, 68, 68, 0.12);
    --rel-pill-danger-text: #b91c1c;
    --rel-pill-info-bg: rgba(59, 130, 246, 0.12);
    --rel-pill-info-text: #1d4ed8;
    --rel-pill-gray-bg: rgba(113, 113, 122, 0.12);
    --rel-pill-gray-text: #52525b;

    --rel-valor-positivo: #15803d;
    --rel-valor-negativo: #b91c1c;
    --rel-valor-taxas: #b45309;

    display: flex;
    flex-direction: column;
    gap: 1.5rem;
}

.dark .relatorios-page {
    --rel-text-primary: var(--app-text);
    --rel-text-secondary: var(--app-secondary);
    --rel-text-muted: var(--app-muted);
    --rel-card-bg: var(--app-surface);
    --rel-card-border: var(--app-border);
    --rel-divider: var(--app-divider);
    --rel-tab-bg: var(--app-subtle);
    --rel-tab-active-bg: var(--app-accent);
    --rel-tab-active-text: var(--app-on-accent);
    --rel-btn-secondary-bg: var(--app-subtle);
    --rel-btn-secondary-border: var(--app-border);

    --rel-pill-success-bg: rgba(34, 197, 94, 0.16);
    --rel-pill-success-text: #4ade80;
    --rel-pill-warning-bg: var(--app-accent-soft);
    --rel-pill-warning-text: #fbbf24;
    --rel-pill-danger-bg: rgba(239, 68, 68, 0.16);
    --rel-pill-danger-text: #f87171;
    --rel-pill-info-bg: rgba(59, 130, 246, 0.16);
    --rel-pill-info-text: #60a5fa;
    --rel-pill-gray-bg: rgba(161, 161, 170, 0.16);
    --rel-pill-gray-text: #d4d4d8;

    --rel-valor-positivo: #4ade80;
    --rel-valor-negativo: #f87171;
    --rel-valor-taxas: #fbbf24;
}

/* ------------------------------------------------------------------ Tabs */

.relatorios-tabs {
    display: inline-flex;
    gap: 0.25rem;
    padding: 0.25rem;
    border-radius: 0.625rem;
    background-color: var(--rel-tab-bg);
    border: 1px solid var(--rel-card-border);
    width: fit-content;
}

.relatorios-tabs__button {
    padding: 0.5rem 1.125rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    color: var(--rel-text-secondary);
    background: transparent;
    border: none;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.relatorios-tabs__button--ativo {
    background-color: var(--rel-tab-active-bg);
    color: var(--rel-tab-active-text);
}

/* ------------------------------------------------------------------ Card */

.relatorios-card {
    border-radius: 0.875rem;
    background-color: var(--rel-card-bg);
    border: 1px solid var(--rel-card-border);
    padding: 1.25rem;
}

.relatorios-card__titulo {
    font-size: 0.875rem;
    font-weight: 600;
    color: var(--rel-text-primary);
    margin-bottom: 1rem;
}

.relatorios-card__titulo:has(+ .relatorios-card__hint) {
    margin-bottom: 0.25rem;
}

.relatorios-card__hint {
    font-size: 0.75rem;
    color: var(--rel-text-muted);
    margin-bottom: 1rem;
}

/* --------------------------------------------------------------- Filtros */

/*
 * O layout em colunas já vem do próprio Filament\Schemas\Components\Grid
 * dentro de vendasFiltrosForm()/estoqueFiltrosForm() — este wrapper NÃO
 * pode ser um grid próprio também, senão os campos (um único elemento
 * raiz do schema) ficam espremidos dentro de 1 coluna do NOSSO grid,
 * e o grid do Filament tenta caber 5 campos lá dentro (foi exatamente o
 * bug do combo quebrado: texto vertical, "Todos" letra por letra).
 */
.relatorios-filtros-grid {
    margin-bottom: 1rem;
}

.relatorios-filtros-busca {
    margin-bottom: 1rem;
}

.relatorios-acoes {
    display: flex;
    flex-wrap: wrap;
    gap: 0.625rem;
}

.relatorios-botao {
    display: inline-flex;
    align-items: center;
    gap: 0.5rem;
    padding: 0.5625rem 1.125rem;
    border-radius: 0.5rem;
    font-size: 0.8125rem;
    font-weight: 600;
    border: none;
    cursor: pointer;
    text-decoration: none;
    transition: opacity 120ms ease;
}

.relatorios-botao:hover {
    opacity: 0.88;
}

.relatorios-botao:disabled {
    opacity: 0.45;
    cursor: not-allowed;
}

.relatorios-botao--primario {
    background-color: var(--app-accent);
    color: var(--app-on-accent);
}

.relatorios-botao--secundario {
    background-color: var(--rel-btn-secondary-bg);
    border: 1px solid var(--rel-btn-secondary-border);
    color: var(--rel-text-primary);
}

.relatorios-botao-icon {
    width: 1rem;
    height: 1rem;
}

/* ------------------------------------------------------------------ KPIs */

.relatorios-kpis {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(9.5rem, 1fr));
    gap: 1rem;
}

@media (max-width: 639px) {
    .relatorios-kpis {
        grid-template-columns: repeat(2, minmax(0, 1fr));
    }
}

.relatorios-kpi {
    border-radius: 0.75rem;
    background-color: var(--rel-card-bg);
    border: 1px solid var(--rel-card-border);
    padding: 1rem 1.125rem;
}

.relatorios-kpi__label {
    font-size: 0.75rem;
    color: var(--rel-text-muted);
}

.relatorios-kpi__valor {
    font-size: 1.5rem;
    font-weight: 700;
    color: var(--rel-text-primary);
    margin-top: 0.375rem;
}

/*
 * Cores discretas por natureza do indicador (Parte 10 da task): receita/
 * aquisição ficam neutras (cor de texto padrão), taxas em âmbar, lucro/
 * margem acompanham o resultado (verde positivo, vermelho negativo) — sem
 * virar um dashboard multicolorido.
 */
.relatorios-kpi--taxas .relatorios-kpi__valor {
    color: var(--rel-valor-taxas);
}

.relatorios-kpi--positivo .relatorios-kpi__valor {
    color: var(--rel-valor-positivo);
}

.relatorios-kpi--negativo .relatorios-kpi__valor {
    color: var(--rel-valor-negativo);
}

/* ----------------------------------------------------------------- Table */

.relatorios-table-wrapper {
    overflow-x: auto;
}

.relatorios-table {
    width: 100%;
    border-collapse: collapse;
    font-size: 0.8125rem;
    white-space: nowrap;
}

.relatorios-table th {
    text-align: left;
    font-weight: 500;
    color: var(--rel-text-muted);
    font-size: 0.6875rem;
    text-transform: uppercase;
    letter-spacing: 0.03em;
    padding: 0 0.75rem 0.625rem 0;
}

.relatorios-table td {
    padding: 0.75rem 0.75rem 0.75rem 0;
    border-top: 1px solid var(--rel-divider);
    color: var(--rel-text-primary);
    vertical-align: middle;
}

.relatorios-link {
    color: var(--rel-tab-active-bg);
    font-weight: 600;
    text-decoration: none;
}

.relatorios-link:hover {
    text-decoration: underline;
}

.relatorios-table__num,
.relatorios-table th.relatorios-table__num {
    text-align: right;
}

/* Nome do cliente longo quebra linha (a tabela é nowrap) em vez de
 * empurrar as colunas de valores para fora da tela. */
.relatorios-table td.relatorios-table__cliente {
    white-space: normal;
    min-width: 10rem;
    max-width: 16rem;
    overflow-wrap: anywhere;
}

/* Tabela "Resultados" (detalhada, muitas colunas) — fonte menor + linha
 * de grupos (Receita / Custos / Resultado) acima dos cabeçalhos. */
.relatorios-table--detalhada {
    font-size: 0.75rem;
}

.relatorios-table--detalhada th,
.relatorios-table--detalhada td {
    padding-right: 0.5rem;
}

.relatorios-table__grupos th {
    padding-bottom: 0.25rem;
    border-bottom: 1px solid var(--rel-divider);
    font-weight: 700;
    color: var(--rel-text-primary);
    text-align: center;
}

/*
 * Qualificado com `td` (não só a classe) pra empatar em especificidade
 * com `.relatorios-table td` (classe + elemento) e realmente vencer a
 * cor padrão — um seletor de classe única sozinho perde esse empate,
 * mesmo vindo depois no arquivo.
 */
td.relatorios-table__num--positivo {
    color: var(--rel-valor-positivo);
    font-weight: 600;
}

td.relatorios-table__num--negativo {
    color: var(--rel-valor-negativo);
    font-weight: 600;
}

td.relatorios-table__num--taxas {
    color: var(--rel-valor-taxas);
}

.relatorios-badge-legado {
    display: inline-block;
    margin-left: 0.375rem;
    padding: 0.0625rem 0.4375rem;
    border-radius: 9999px;
    font-size: 0.625rem;
    font-weight: 600;
    white-space: nowrap;
    background-color: var(--rel-pill-warning-bg);
    color: var(--rel-pill-warning-text);
}

.relatorios-status-pill {
    display: inline-flex;
    align-items: center;
    padding: 0.1875rem 0.5rem;
    border-radius: 9999px;
    font-size: 0.75rem;
    font-weight: 600;
    white-space: nowrap;
}

.relatorios-status-pill--success { background-color: var(--rel-pill-success-bg); color: var(--rel-pill-success-text); }
.relatorios-status-pill--warning { background-color: var(--rel-pill-warning-bg); color: var(--rel-pill-warning-text); }
.relatorios-status-pill--danger { background-color: var(--rel-pill-danger-bg); color: var(--rel-pill-danger-text); }
.relatorios-status-pill--info { background-color: var(--rel-pill-info-bg); color: var(--rel-pill-info-text); }
.relatorios-status-pill--gray { background-color: var(--rel-pill-gray-bg); color: var(--rel-pill-gray-text); }

.relatorios-table-empty {
    padding: 2rem 0;
    text-align: center;
    color: var(--rel-text-muted);
    font-size: 0.875rem;
}

/* ------------------------------------------------------------ Paginação */

.relatorios-rodape-tabela {
    display: flex;
    align-items: center;
    justify-content: space-between;
    flex-wrap: wrap;
    gap: 0.75rem;
    margin-top: 1rem;
    padding-top: 1rem;
    border-top: 1px solid var(--rel-divider);
}

.relatorios-exibir {
    display: flex;
    align-items: center;
    gap: 0.5rem;
    font-size: 0.8125rem;
    color: var(--rel-text-secondary);
}

.relatorios-exibir select {
    border-radius: 0.375rem;
    border: 1px solid var(--rel-card-border);
    background-color: var(--rel-card-bg);
    color: var(--rel-text-primary);
    font-size: 0.8125rem;
    padding: 0.25rem 0.5rem;
}

.relatorios-exibir__resumo {
    color: var(--rel-text-muted);
}

.relatorios-paginacao {
    display: flex;
    align-items: center;
    gap: 0.25rem;
}

.relatorios-paginacao__botao,
.relatorios-paginacao__pagina {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    min-width: 2rem;
    height: 2rem;
    padding: 0 0.5rem;
    border-radius: 0.375rem;
    border: 1px solid var(--rel-card-border);
    background-color: var(--rel-card-bg);
    color: var(--rel-text-secondary);
    font-size: 0.8125rem;
    font-weight: 500;
    cursor: pointer;
    transition: background-color 120ms ease, color 120ms ease;
}

.relatorios-paginacao__botao:hover:not(:disabled),
.relatorios-paginacao__pagina:hover {
    background-color: var(--rel-btn-secondary-bg);
    color: var(--rel-text-primary);
}

.relatorios-paginacao__botao:disabled {
    opacity: 0.4;
    cursor: not-allowed;
}

.relatorios-paginacao__pagina--ativa {
    background-color: var(--app-accent);
    border-color: var(--app-accent);
    color: var(--app-on-accent);
}

.relatorios-paginacao__pagina--ativa:hover {
    background-color: var(--app-accent);
    color: var(--app-on-accent);
}

.relatorios-paginacao__icone {
    width: 1rem;
    height: 1rem;
}

.relatorios-paginacao__reticencias {
    color: var(--rel-text-muted);
    padding: 0 0.25rem;
    font-size: 0.8125rem;
}