/**
 * Estilos para Tabelas com Cabeçalhos Fixos - Reutilizável em Relatórios
 * 
 * Sistema genérico para relatórios tabulares com:
 * - Cabeçalhos fixos (sticky headers)
 * - Scroll horizontal e vertical
 * - Indicadores visuais de scroll
 * - Grupos coloridos
 * - Navegação por teclado
 * 
 * Uso:
 * <div class="tabela-fixa-wrapper">
 *   <div class="relatorio-gerencial">
 *     <table>...</table>
 *   </div>
 * </div>
 * 
 * Compatível com JavaScript: tabelas-fixas.js
 */

/* ========================================
   CONTAINERS PRINCIPAIS
   ======================================== */

.relatorio-gerencial-wrapper,
.tabela-fixa-wrapper {
    /* Container principal com scroll */
    width: 100%;
    overflow: auto;
    border: 1px solid #dee2e6;
    border-radius: 0.375rem;
    /* Altura máxima para ativar scroll */
    max-height: 71vh;
    /* Sombra para destacar o container */
    box-shadow: 0 0.125rem 0.25rem rgba(0, 0, 0, 0.075);
    /* Scroll suave */
    scroll-behavior: smooth;
    /* Customização da scrollbar */
    scrollbar-width: thin;
    scrollbar-color: #6c757d #f8f9fa;
}

/* ========================================
   SCROLLBAR PERSONALIZADA
   ======================================== */

/* Scrollbar personalizada para Webkit */
.relatorio-gerencial-wrapper::-webkit-scrollbar,
.tabela-fixa-wrapper::-webkit-scrollbar {
    width: 8px;
    height: 8px;
}

.relatorio-gerencial-wrapper::-webkit-scrollbar-track,
.tabela-fixa-wrapper::-webkit-scrollbar-track {
    background: #f8f9fa;
    border-radius: 4px;
}

.relatorio-gerencial-wrapper::-webkit-scrollbar-thumb,
.tabela-fixa-wrapper::-webkit-scrollbar-thumb {
    background: #6c757d;
    border-radius: 4px;
}

.relatorio-gerencial-wrapper::-webkit-scrollbar-thumb:hover,
.tabela-fixa-wrapper::-webkit-scrollbar-thumb:hover {
    background: #495057;
}

/* ========================================
   ESTRUTURA DA TABELA
   ======================================== */

.relatorio-gerencial {
    min-width: 3500px;
    /* Largura mínima para comportar todas as colunas */
    font-size: 12px;
    /* Container para sticky headers */
    position: relative;
}

.relatorio-gerencial table {
    width: 100%;
    border-collapse: collapse;
    table-layout: fixed;
}

.relatorio-gerencial th,
.relatorio-gerencial td {
    border: 1px solid #dee2e6;
    padding: 6px 4px;
    text-align: center;
    vertical-align: middle;
    white-space: nowrap;
    line-height: 1.2;
}

/* ========================================
   CABEÇALHOS FIXOS (STICKY HEADERS)
   ======================================== */

.relatorio-gerencial th {
    background-color: #f8f9fa;
    font-weight: bold;
    position: sticky;
    top: 0;
    z-index: 100;
    /* Sombra para destacar quando fixo */
    box-shadow: 0 2px 4px rgba(0, 0, 0, 0.1);
    /* Garante que o fundo seja completamente opaco */
    background-clip: padding-box;
    opacity: 1;
    backdrop-filter: none;
    /* Layout dos cabeçalhos */
    white-space: normal;
    /* Permite quebra de linha */
    word-wrap: break-word;
    overflow-wrap: break-word;
    height: auto;
    /* Altura automática */
    min-height: 55px;
    /* Altura mínima para acomodar badge + texto */
    vertical-align: top;
    /* Alinha conteúdo no topo */
    padding: 6px 4px;
    display: table-cell;
    /* Mantém comportamento de tabela */
    /* Transição suave para mudanças de sombra */
    transition: box-shadow 0.2s ease;
}

/* Sombra mais intensa quando há scroll */
.relatorio-gerencial th.scrolled {
    box-shadow: 0 4px 8px rgba(0, 0, 0, 0.15);
}

/* ========================================
   INDICADORES VISUAIS DE SCROLL
   ======================================== */

/* Indicadores visuais de scroll disponível */
.relatorio-gerencial-wrapper.has-vertical-scroll::after,
.tabela-fixa-wrapper.has-vertical-scroll::after {
    content: "↕";
    position: absolute;
    top: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    z-index: 200;
}

.relatorio-gerencial-wrapper.has-horizontal-scroll::before,
.tabela-fixa-wrapper.has-horizontal-scroll::before {
    content: "↔";
    position: absolute;
    bottom: 10px;
    right: 10px;
    background: rgba(0, 0, 0, 0.7);
    color: white;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 12px;
    pointer-events: none;
    z-index: 200;
}

/* Quando tem ambos os scrolls, ajusta posição */
.relatorio-gerencial-wrapper.has-vertical-scroll.has-horizontal-scroll::after,
.tabela-fixa-wrapper.has-vertical-scroll.has-horizontal-scroll::after {
    right: 35px;
}

/* ========================================
   NAVEGAÇÃO POR TECLADO
   ======================================== */

/* Foco para navegação por teclado */
.relatorio-gerencial-wrapper:focus,
.tabela-fixa-wrapper:focus {
    outline: 2px solid var(--bs-primary);
    outline-offset: -2px;
}

/* ========================================
   BADGES NOS CABEÇALHOS
   ======================================== */

/* Estilo específico para badges nos cabeçalhos */
.relatorio-gerencial th .badge {
    display: block;
    margin: 0 auto 6px auto;
    /* Centraliza badge e adiciona margem inferior */
    font-size: 10px;
    padding: 3px 6px;
}

/* Container para o texto do título após a badge */
.relatorio-gerencial th .titulo-texto {
    display: block;
    font-size: 11px;
    line-height: 1.2;
    text-align: center;
    margin-top: 2px;
}

/* ========================================
   LARGURAS DAS COLUNAS
   ======================================== */

/* Larguras específicas das colunas */
.relatorio-gerencial .col-toggle {
    width: 50px;
}

.relatorio-gerencial .col-ncm {
    width: 100px;
}

.relatorio-gerencial .col-alerta {
    width: 80px;
}

.relatorio-gerencial .col-produto {
    width: 400px;
    max-width: 400px;
    text-align: left;
    white-space: normal;
    word-wrap: break-word;
    overflow-wrap: break-word;
    line-height: 1.3;
}

.relatorio-gerencial .col-volume {
    width: 90px;
}

.relatorio-gerencial .col-embalagem {
    width: 90px;
}

.relatorio-gerencial .col-estoque {
    width: 100px;
}

/* Colunas de processos */
.relatorio-gerencial .col-processo {
    width: 100px;
}

/* Colunas de análise temporal */
.relatorio-gerencial .col-temporal {
    width: 90px;
}

/* Coluna de amostras */
.relatorio-gerencial .col-amostras {
    width: 100px;
}

/* ========================================
   COLUNAS SEPARADORAS
   ======================================== */

/* Colunas separadoras - Gap visual entre tabelas */
.relatorio-gerencial .gap-separador {
    width: 20px;
    min-width: 20px;
    max-width: 20px;
    background-color: #f8f9fa;
    border: none !important;
    padding: 0;
    margin: 0;
    /* Efeito visual de separação */
    box-shadow: inset 0 0 0 1px #f8f9fa;
}

/* ========================================
   GRUPOS COLORIDOS - CABEÇALHOS
   ======================================== */

/* Grupos coloridos - Fundos opacos para cabeçalhos fixos */
/* 1) Amarelo claro - Pedido e 12 meses */
.relatorio-gerencial th.grupo-pedido {
    background-color: #fff8e1 !important;
    opacity: 1 !important;
}

.relatorio-gerencial th.grupo-12meses {
    background-color: #fff8e1 !important;
    opacity: 1 !important;
}

/* 2) Azul claro - Fabricação e 9 meses */
.relatorio-gerencial th.grupo-fabricacao {
    background-color: #e3f2fd !important;
    opacity: 1 !important;
}

.relatorio-gerencial th.grupo-9meses {
    background-color: #e3f2fd !important;
    opacity: 1 !important;
}

/* 3) Verde claro - Transporte e 6 meses */
.relatorio-gerencial th.grupo-transporte {
    background-color: #e8f5e8 !important;
    opacity: 1 !important;
}

.relatorio-gerencial th.grupo-6meses {
    background-color: #e8f5e8 !important;
    opacity: 1 !important;
}

/* 4) Bege acobreado claro - Consolidado e 3 meses */
.relatorio-gerencial th.grupo-consolidado {
    background-color: #f5f1eb !important;
    opacity: 1 !important;
}

.relatorio-gerencial th.grupo-3meses {
    background-color: #f5f1eb !important;
    opacity: 1 !important;
}

/* ========================================
   GRUPOS COLORIDOS - CÉLULAS DO CORPO
   ======================================== */

/* Grupos coloridos para células do corpo da tabela */
/* 1) Amarelo claro - Pedido e 12 meses */
.relatorio-gerencial td.grupo-pedido {
    background-color: #fff8e1;
}

.relatorio-gerencial td.grupo-12meses {
    background-color: #fff8e1;
}

/* 2) Azul claro - Fabricação e 9 meses */
.relatorio-gerencial td.grupo-fabricacao {
    background-color: #e3f2fd;
}

.relatorio-gerencial td.grupo-9meses {
    background-color: #e3f2fd;
}

/* 3) Verde claro - Transporte e 6 meses */
.relatorio-gerencial td.grupo-transporte {
    background-color: #e8f5e8;
}

.relatorio-gerencial td.grupo-6meses {
    background-color: #e8f5e8;
}

/* 4) Bege acobreado claro - Consolidado e 3 meses */
.relatorio-gerencial td.grupo-consolidado {
    background-color: #f5f1eb;
}

.relatorio-gerencial td.grupo-3meses {
    background-color: #f5f1eb;
}

/* ========================================
   BADGES COLORIDOS
   ======================================== */

/* Badges nos cabeçalhos - Cores seguindo padrão dos grupos */
.relatorio-gerencial .badge {
    font-size: 9px;
    padding: 2px 5px;
    margin-bottom: 3px;
    display: block;
}

/* 1) Badges amarelo - Pedido e 12 meses */
.relatorio-gerencial .grupo-pedido .badge,
.relatorio-gerencial .grupo-12meses .badge {
    background-color: #f57f17 !important;
    color: white !important;
}

/* 2) Badges azul - Fabricação e 9 meses */
.relatorio-gerencial .grupo-fabricacao .badge,
.relatorio-gerencial .grupo-9meses .badge {
    background-color: #1976d2 !important;
    color: white !important;
}

/* 3) Badges verde - Transporte e 6 meses */
.relatorio-gerencial .grupo-transporte .badge,
.relatorio-gerencial .grupo-6meses .badge {
    background-color: #388e3c !important;
    color: white !important;
}

/* 4) Badges bege acobreado - Consolidado e 3 meses */
.relatorio-gerencial .grupo-consolidado .badge,
.relatorio-gerencial .grupo-3meses .badge {
    background-color: #8d6e63 !important;
    color: white !important;
}

/* ========================================
   ZEBRADO E DETALHES
   ======================================== */

/* Zebrado nas linhas */
.relatorio-gerencial tbody tr:nth-child(even) {
    background-color: rgba(0, 0, 0, 0.02);
}

/* Chevron estático para expandir detalhes */
.relatorio-gerencial .expand-icon {
    cursor: pointer;
    text-decoration: none;
    color: inherit;
}

.relatorio-gerencial .expand-icon:hover {
    color: var(--bs-primary);
}

/* Estilo para a linha de detalhes */
.relatorio-gerencial .detalhes-produto {
    background-color: rgba(var(--bs-info-rgb), 0.05);
    border-left: 3px solid var(--bs-info);
}

.relatorio-gerencial .detalhes-produto td {
    padding: 15px;
    border-top: none;
}