/**
 * ✅ CEAPP: Estilos do UserControl Produtos.ascx
 * 
 * Funcionalidade: Estilos específicos do controle de produtos
 * - Container do UserControl
 * - Mensagens de status
 * - Tabela de resumo
 * - Preview de imagens
 * - Seções de saco promocional
 * 
 * Integração CEAPP:
 * - Estilos separados do HTML para melhor organização
 * - Facilita manutenção e reutilização
 */

/* Container do UserControl */
#produtosUserControlContainer {
    width: 100%;
    min-height: 100%;
    padding: 0;
    margin: 0;
}

/* Mensagem de status (inicialmente oculta - controlada por JavaScript) */
#produtosMensagem {
    display: none;
}

#produtosMensagem.mostrar {
    display: block;
}

/* Tabela de resumo */
.produtos-resumo-table {
    font-size: 0.85rem;
}

.produtos-resumo-table th,
.produtos-resumo-table td {
    padding: 0.25rem;
}

/* Preview de imagem (inicialmente oculto - controlado por JavaScript) */
#previewImagem.oculto,
#previewPlaceholder.oculto {
    display: none;
}

#previewImagem.mostrar,
#previewPlaceholder.mostrar {
    display: block;
}

#previewImagem {
    max-width: 300px;
    max-height: 300px;
    object-fit: contain;
}

/* Seção de saco promocional (inicialmente oculta - controlada por JavaScript) */
#divSacoPromocional.oculto,
#divNovoSacoPromocional.oculto {
    display: none;
}

#divSacoPromocional.mostrar,
#divNovoSacoPromocional.mostrar {
    display: block;
}

/* Card sticky */
.produtos-sticky-card {
    top: 20px;
}

/* ✅ CEAPP: Garantir que TODOS os modais de produtos sejam interativos */
#modalDetalhesProduto,
#modalEditarProduto,
#modalNovoProduto {
    z-index: 1055 !important;
    pointer-events: auto !important;
}

#modalDetalhesProduto .modal-dialog,
#modalEditarProduto .modal-dialog,
#modalNovoProduto .modal-dialog {
    z-index: 1056 !important;
    pointer-events: auto !important;
}

#modalDetalhesProduto .modal-content,
#modalEditarProduto .modal-content,
#modalNovoProduto .modal-content {
    pointer-events: auto !important;
}

#modalDetalhesProduto .modal-body,
#modalEditarProduto .modal-body,
#modalNovoProduto .modal-body {
    pointer-events: auto !important;
    overflow-y: auto;
}

/* Garantir que o backdrop não bloqueie a interação com o modal */
.modal-backdrop {
    z-index: 1054 !important;
}

/* Garantir que elementos dentro dos modais sejam clicáveis */
#modalDetalhesProduto *,
#modalEditarProduto *,
#modalNovoProduto * {
    pointer-events: auto !important;
}