/**
 * Correções de CSS para conflitos entre jQuery UI 1.13.2 e AngularJS
 *
 * Problema: Após atualização do jQuery UI, tabelas renderizadas com AngularJS
 * (especialmente componente abltTable) apresentam problemas de layout:
 * - Tabelas estourando o container mesmo com width: 100%
 * - Caption com botões de exportação e paginação desconfigurando
 *
 * Causa: jQuery UI 1.13.2 aplica box-sizing e display properties que conflitam
 * com a renderização dinâmica do Angular
 */

/* ========================================================================
   CORREÇÕES PARA TABELAS ANGULAR
   ======================================================================== */

/* Força box-sizing correto em tabelas Angular */
[ng-app] table,
[ng-app] table *,
#abltTable table,
#abltTable table * {
    box-sizing: border-box !important;
}

/* Garante que tabelas Angular respeitem o width: 100% do container */
[ng-app] .listTable,
#abltTable .listTable {
    width: 100% !important;
    max-width: none !important; /* Mudado para permitir que tabela cresça se necessário */
    table-layout: auto !important; /* Mudado de fixed para auto para respeitar conteúdo */
    overflow: visible !important; /* Mudado para visible permitir overflow no wrapper */
}

/* Corrige o caption que contém botões de exportação e paginação */
[ng-app] .listTable caption,
#abltTable .listTable caption {
    width: 100% !important;
    max-width: 100% !important;
    display: table-caption !important;
    box-sizing: border-box !important;
}

/* Caption no topo (tablePager) */
[ng-app] .listTable caption#tablePager,
#abltTable .listTable caption#tablePager {
    caption-side: top !important;
}

/* Caption no rodapé (tablePagerBottom) */
[ng-app] .listTable caption#tablePagerBottom,
[ng-app] .listTable caption.tablePagerBottom,
#abltTable .listTable caption#tablePagerBottom,
#abltTable .listTable caption.tablePagerBottom {
    caption-side: bottom !important;
    margin-top: 10px !important;
}

/* Garante que elementos dentro do caption não causem overflow */
[ng-app] .listTable caption *,
#abltTable .listTable caption * {
    box-sizing: border-box !important;
}

/* Corrige tabelas aninhadas dentro do caption (paginação) */
/* Removido width: 100% para deixar auto-ajustar (fica pequena na esquerda) */
[ng-app] .listTable caption table,
#abltTable .listTable caption table {
    width: auto !important;
    table-layout: auto !important;
}

/* Garante que células da tabela não estourem */
[ng-app] .listTable td,
[ng-app] .listTable th,
#abltTable .listTable td,
#abltTable .listTable th {
    box-sizing: border-box !important;
    overflow: hidden !important;
    text-overflow: ellipsis !important;
    word-wrap: break-word !important;
}

/* Colunas pequenas de ícones precisam de largura mínima */
[ng-app] .listTable th[style*="width:1px"],
[ng-app] .listTable th[style*="width: 1px"],
[ng-app] .listTable th[style*="width:5px"],
[ng-app] .listTable th[style*="width: 5px"],
#abltTable .listTable th[style*="width:1px"],
#abltTable .listTable th[style*="width: 1px"],
#abltTable .listTable th[style*="width:5px"],
#abltTable .listTable th[style*="width: 5px"] {
    min-width: 30px !important;
    width: auto !important;
}

/* Colunas de ícones (baseado em classes/IDs comuns) */
[ng-app] .listTable th#pId,
[ng-app] .listTable th#pCor,
[ng-app] .listTable th.tdCor,
#abltTable .listTable th#pId,
#abltTable .listTable th#pCor,
#abltTable .listTable th.tdCor {
    min-width: 30px !important;
    width: auto !important;
}

/* Corrige thead e tbody para não estourar */
[ng-app] .listTable thead,
[ng-app] .listTable tbody,
#abltTable .listTable thead,
#abltTable .listTable tbody {
    width: 100% !important;
    display: table-header-group !important;
}

/* Garante que tfoot apareça EMBAIXO da tabela */
[ng-app] .listTable tfoot,
#abltTable .listTable tfoot {
    width: 100% !important;
    display: table-footer-group !important;
}

/* Corrige linhas da tabela */
[ng-app] .listTable tr,
#abltTable .listTable tr {
    width: 100% !important;
    display: table-row !important;
}

/* ========================================================================
   CORREÇÕES ESPECÍFICAS PARA COMPONENTE abltTable
   ======================================================================== */

/* Wrapper do abltTable - permite scroll horizontal quando tabela estoura */
#abltTable.formContainer {
    width: 100% !important;
    max-width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
}

/* Wrapper genérico para tabelas Angular que podem precisar de scroll */
[ng-app] .listTable-wrapper,
.listTable-wrapper[ng-app],
[ng-app] .table-container,
.table-container[ng-app] {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: visible !important;
}

/* Previne que ng-repeat cause problemas de layout */
[ng-repeat] {
    box-sizing: border-box !important;
}

/* ========================================================================
   CORREÇÕES PARA PAGINAÇÃO E BOTÕES DE EXPORTAÇÃO
   ======================================================================== */

/* Garante que o tablePager não quebre o layout */
#tablePager,
#tablePagerBottom,
#tablePager1 {
    width: 100% !important;
    max-width: 100% !important;
    overflow: hidden !important;
    clear: both !important;
}

/* Controla os spans de paginação */
#tablePager span,
#tablePagerBottom span,
#tablePager1 span {
    display: inline-block !important;
    box-sizing: border-box !important;
}

/* Corrige o display da página atual */
.pagedisplay {
    display: inline-block !important;
    margin: 0 5px !important;
    vertical-align: middle !important;
}

/* ========================================================================
   CORREÇÕES PARA TABELAS tableON e tableOFF (usadas pelo tablesorter)
   ======================================================================== */

.tableON,
.tableOFF {
    width: 100% !important;
    max-width: 100% !important;
    table-layout: fixed !important;
}

/* ========================================================================
   PREVINE OVERFLOW EM CONTAINERS (APENAS EM CONTEXTOS ANGULAR)
   ======================================================================== */

/* Garante que o pageBody contenha a tabela corretamente - APENAS em páginas Angular */
/* Mudado overflow para auto para permitir scroll horizontal */
[ng-app] #pageContainer #pageBody,
#pageContainer #pageBody[ng-app] {
    overflow-x: auto !important;
    overflow-y: visible !important;
    width: 100% !important;
}

/* Containers de formulário e lista também precisam permitir scroll - APENAS em contextos Angular */
[ng-app] .formContainer,
.formContainer[ng-app],
[ng-app] .listContainer,
.listContainer[ng-app] {
    overflow-x: auto !important;
    overflow-y: visible !important;
}

/* Wrapper para tabelas que podem ter scroll horizontal se necessário - APENAS Angular */
[ng-app] .table-wrapper,
.table-wrapper[ng-app] {
    width: 100% !important;
    overflow-x: auto !important;
    overflow-y: hidden !important;
}

/* ========================================================================
   CORREÇÕES PARA ELEMENTOS ESPECÍFICOS DO JQUERY UI
   ======================================================================== */

/* Corrige widgets do jQuery UI dentro de tabelas Angular */
[ng-app] .ui-widget,
[ng-app] .ui-widget-content,
#abltTable .ui-widget,
#abltTable .ui-widget-content {
    box-sizing: border-box !important;
}

/* Corrige inputs do jQuery UI dentro de tabelas Angular */
[ng-app] .ui-widget input,
[ng-app] .ui-widget select,
[ng-app] .ui-widget textarea,
#abltTable .ui-widget input,
#abltTable .ui-widget select,
#abltTable .ui-widget textarea {
    box-sizing: border-box !important;
}

/* ========================================================================
   CORREÇÕES PARA BOTÕES DO JQUERY UI DIALOG
   ======================================================================== */

/**
 * Problema: Regra button.ui-button-text-only em main.css (linha 1191) aplica
 * padding: 0 !important e float: left em TODOS os botões, incluindo os de dialog.
 *
 * Solução: Restaurar os estilos corretos do jQuery UI para botões de dialog.
 */

/* Garante que botões do dialog não sejam afetados pela regra genérica e tenham padding de 8px */
.ui-dialog-buttonpane button.ui-button {
    padding: 8px !important;
    float: none !important;
    margin: .5em .4em .5em 0 !important;
}

/* Garante que botões tenham a aparência padrão do jQuery UI se não tiverem .ui-state-default */
.ui-dialog-buttonpane button.ui-button:not(.ui-state-default):not(.ui-state-hover):not(.ui-state-active) {
    border: 1px solid #d3d3d3 !important;
    background: #e6e6e6 url(img/images/ui-bg_glass_75_e6e6e6_1x400.png) 50% 50% repeat-x !important;
    font-weight: normal !important;
    color: #555555 !important;
}

/* ========================================================================
   CORREÇÕES PARA BOTÃO DE FECHAR (X) DO DIALOG
   ======================================================================== */

/* Garante que o botão de fechar tenha o tamanho correto e esconda o texto */
.ui-dialog-titlebar-close.ui-button-icon-only {
    width: 21px !important;
    height: 21px !important;
    padding: 8px !important;
    color: transparent !important;
}

/* Esconde o texto "Close" dentro do botão de fechar */
.ui-dialog-titlebar-close .ui-button-text,
.ui-dialog-titlebar-close .ui-button-icon-space {
    display: none !important;
}

/* Garante que apenas o ícone seja visível */
.ui-dialog-titlebar-close .ui-icon {
    display: block !important;
    text-indent: -99999px !important;
    overflow: hidden !important;
}