/* ==========================================================================
   LAYOUT GERAL (Container)
   ========================================================================== */
.pivot-wrapper {
    /* Define uma altura mínima para caber Tabela + Gráfico confortavelmente */
    height: 90vh; 
    width: 105%;
    display: flex;
    flex-direction: column;
    background: #fff;
    font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif;
}

/* A Tabela ocupa todo o espaço disponível restante (Flex 1) */
#myGrid {
    flex: 1; 
    width: 100%;
    min-height: 300px; /* Garante que a tabela nunca suma */
}


/* ==========================================================================
   TOOLBAR (Barra de Ferramentas)
   ========================================================================== */
.grid-toolbar {
    display: flex;
    flex-wrap: wrap;
    gap: 8px;
    padding: 10px;
    background: #f8f9fa;
    border-bottom: 1px solid #dee2e6;
    align-items: center;
    position: relative; /* Importante para o posicionamento do Dropdown */
}

/* Separadores Verticais na Toolbar */
.grid-toolbar .separator {
    width: 1px;
    background: #dee2e6;
    margin: 0 5px;
    height: 24px;
}

/* Espaçador Flexível (Empurra itens para a direita) */
.grid-toolbar .spacer {
    margin-left: auto;
}

/* ==========================================================================
   BOTÕES
   ========================================================================== */
.grid-toolbar button {
    cursor: pointer;
    padding: 6px 12px;
    border: 1px solid #ced4da;
    background: white;
    border-radius: 4px;
    font-size: 13px;
    font-weight: 500;
    color: #495057;
    transition: all 0.2s ease-in-out;
    display: flex;
    align-items: center;
    gap: 6px;
    box-shadow: 0 1px 2px rgb(0 0 0 / 5%);
}

.grid-toolbar button:hover {
    background: #e9ecef;
    border-color: #adb5bd;
    transform: translateY(-1px);
}

.grid-toolbar button:active {
    transform: translateY(0);
}

/* Estado Ativo (Ligado) */
.grid-toolbar button.active { 
    background: #0d6efd; 
    color: white; 
    border-color: #0d6efd; 
    box-shadow: 0 2px 4px rgb(13 110 253 / 30%);
}

/* Botão de Perigo (Limpar) */
.grid-toolbar button.danger { 
    color: #dc3545; 
    border-color: #dc3545; 
}

.grid-toolbar button.danger:hover { 
    background: #dc3545; 
    color: white; 
}

/* ==========================================================================
   MENU DROPDOWN (Seletor de Colunas)
   ========================================================================== */
.column-picker-dropdown {
    position: absolute;
    top: 100%; /* Logo abaixo da toolbar */
    left: 10px;
    margin-top: 5px;
    background: white;
    border: 1px solid rgb(0 0 0 / 15%);
    box-shadow: 0 6px 16px rgb(0 0 0 / 15%);
    border-radius: 6px;
    padding: 12px;
    z-index: 1000;
    min-width: 220px;
    display: none; /* Oculto por padrão */
    opacity: 0;
    transform: translateY(-10px);
    transition: opacity 0.2s, transform 0.2s;
}

.column-picker-dropdown.show { 
    display: block; 
    opacity: 1; 
    transform: translateY(0); 
}

.picker-header {
    font-size: 11px;
    text-transform: uppercase;
    letter-spacing: 0.8px;
    color: #6c757d;
    font-weight: 700;
    margin-bottom: 10px;
    border-bottom: 1px solid #eee;
    padding-bottom: 5px;
}

.column-item { 
    margin-bottom: 8px; 
    display: flex; 
    align-items: center; 
    padding: 4px 0; 
    cursor: pointer;
}

.column-item:hover label { color: #0d6efd; }

.column-item input { 
    margin-right: 10px; 
    cursor: pointer; 
    accent-color: #0d6efd; 
    transform: scale(1.1); 
}

.column-item label { 
    cursor: pointer; 
    font-size: 14px; 
    user-select: none; 
    color: #212529; 
}

/* ==========================================================================
   FORMATADORES VISUAIS (Valores)
   ========================================================================== */
.val-negative { 
    color: #d9534f; 
    font-weight: bold; 
}

.val-positive { 
    color: #212529; 
}

/* Estilo para cabeçalhos de grupos específicos (Opcional) */
.ag-header-group-cell-label {
    justify-content: center; /* Centraliza títulos dos grupos */
}

/* ==========================================================================
   MODO TELA CHEIA (Fullscreen)
   ========================================================================== */
.grid-fullscreen-mode {
    position: fixed !important;
    inset: 0;
    z-index: 99999; /* Garante que fique acima de tudo */
    background: white;
    padding: 20px;
    height: 100vh !important;
    width: 100vw !important;

    /* Remove bordas arredondadas em tela cheia */
    border-radius: 0; 
}


.grid-fullscreen-mode #myGrid {
    flex: 1; /* Ocupa o restante (60% aprox) */
}