/* ============================================================================
   tabela-colunas.css — estilos do recurso "colunas ajustáveis" reutilizável
   (arrastar p/ reordenar, borda p/ redimensionar), consumido por
   static/js/utils/tabela-colunas.js.

   IMPORTANTE: as regras que alteram o layout da TABELA são escopadas com
   [data-colunas-layout] para NÃO afetar /lancamentos, que já possui a sua
   própria implementação (colunas-layout.js + <style> embutido).
   As regras utilitárias (barra, alça de resize, cursor) são idênticas às de
   /lancamentos e portanto seguras globalmente.
   ============================================================================ */

/* --- Barra de controle acima da tabela --- */
.colunas-layout-bar {
    display: flex;
    align-items: center;
    justify-content: flex-end;
    gap: 10px;
    margin: 4px 2px 8px;
    font-size: 0.78rem;
}
.colunas-layout-hint {
    color: var(--pf-gray-500, #94a3b8);
    cursor: help;
    user-select: none;
}
.btn-restaurar-colunas { font-size: 0.74rem; padding: 2px 8px; }

/* --- Tabela sob gestão do módulo (layout fixo p/ redimensionamento previsível) --- */
.modern-table.cols-managed[data-colunas-layout] {
    table-layout: fixed !important;
    min-width: 0 !important;
}
.modern-table.cols-managed[data-colunas-layout] th,
.modern-table.cols-managed[data-colunas-layout] td {
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    white-space: nowrap !important;
}
/* Neutraliza o max-width:200px base das .modern-data-col para o resize funcionar
   além de 200px (o ellipsis continua respeitando a largura da coluna). */
.modern-table.cols-managed[data-colunas-layout] td.modern-data-col,
.modern-table.cols-managed[data-colunas-layout] th.modern-data-col {
    max-width: none !important;
}
/* A célula de ações permite quebra (rede de segurança): se o usuário estreitar a
   coluna abaixo do necessário, os botões quebram em linha nova em vez de estourar
   para fora da coluna e sobrepor a coluna vizinha. No load a coluna já é medida
   larga o suficiente (measureActionsWidth), então por padrão fica em 1 linha. */
.modern-table.cols-managed[data-colunas-layout] td.modern-actions-col {
    overflow: visible !important;
    white-space: normal !important;
}
.modern-table.cols-managed[data-colunas-layout] th { position: relative; }
.modern-table.cols-managed[data-colunas-layout] th[draggable="true"] {
    cursor: grab;
    user-select: none;
}
.modern-table.cols-managed[data-colunas-layout] th.col-dragging {
    opacity: 0.45;
    cursor: grabbing;
}
.modern-table.cols-managed[data-colunas-layout] th.col-drop-before {
    box-shadow: inset 3px 0 0 0 #6366f1;
}
.modern-table.cols-managed[data-colunas-layout] th.col-drop-after {
    box-shadow: inset -3px 0 0 0 #6366f1;
}

/* --- Alça de redimensionamento (borda direita do cabeçalho) --- */
.col-resize-handle {
    position: absolute;
    top: 0;
    right: 0;
    width: 8px;
    height: 100%;
    cursor: col-resize;
    z-index: 5;
    user-select: none;
}
.col-resize-handle:hover { box-shadow: inset -3px 0 0 0 rgba(99, 102, 241, 0.55); }
body.col-resizing,
body.col-resizing * { cursor: col-resize !important; user-select: none !important; }