/**
 * Global Modal Text Color Fix
 * This file fixes text color issues in modals across the application
 */

/* General modal content */
.modal:not(.dashboard-modal):not(.sidebar-modal) .modal-content {
    color: #333333 !important;
}

/* Modal body elements */
.modal:not(.dashboard-modal):not(.sidebar-modal) .modal-body h2,
.modal:not(.dashboard-modal):not(.sidebar-modal) .modal-body h3,
.modal:not(.dashboard-modal):not(.sidebar-modal) .modal-body h4,
.modal:not(.dashboard-modal):not(.sidebar-modal) .modal-body h5,
.modal:not(.dashboard-modal):not(.sidebar-modal) .modal-body p,
.modal:not(.dashboard-modal):not(.sidebar-modal) .modal-body span,
.modal:not(.dashboard-modal):not(.sidebar-modal) .modal-body div:not(.modal-header),
.modal:not(.dashboard-modal):not(.sidebar-modal) .modal-body label,
.modal:not(.dashboard-modal):not(.sidebar-modal) .modal-body input,
.modal:not(.dashboard-modal):not(.sidebar-modal) .modal-body select,
.modal:not(.dashboard-modal):not(.sidebar-modal) .modal-body textarea,
.modal:not(.dashboard-modal):not(.sidebar-modal) .modal-body a,
.modal:not(.dashboard-modal):not(.sidebar-modal) .modal-body li,
.modal:not(.dashboard-modal):not(.sidebar-modal) .modal-body td,
.modal:not(.dashboard-modal):not(.sidebar-modal) .modal-body th {
    color: #333333 !important;
}

/* Form elements */
.modal:not(.dashboard-modal):not(.sidebar-modal) .form-group label {
    color: #333333 !important;
}

.modal:not(.dashboard-modal):not(.sidebar-modal) .form-control,
.modal:not(.dashboard-modal):not(.sidebar-modal) input.form-control,
.modal:not(.dashboard-modal):not(.sidebar-modal) select.form-control,
.modal:not(.dashboard-modal):not(.sidebar-modal) textarea.form-control {
    color: #333333 !important;
}

/* Keep modal headers with correct contrast */
.modal:not(.dashboard-modal):not(.sidebar-modal) .modal-header {
    color: #ffffff !important;
}

/* CORREÇÃO: Títulos de todos os modais em branco */
.modal:not(.dashboard-modal):not(.sidebar-modal) .modal-header h2,
.modal:not(.dashboard-modal):not(.sidebar-modal) .modal-header h3,
.modal:not(.dashboard-modal):not(.sidebar-modal) .modal-header h4 {
    color: #fff !important;
}

/* Modal footer */
.modal:not(.dashboard-modal):not(.sidebar-modal) .modal-footer {
    color: #333333 !important;
}

/* Specific modal components */
.modal:not(.dashboard-modal):not(.sidebar-modal) .payment-summary,
.modal:not(.dashboard-modal):not(.sidebar-modal) .receipt-content,
.modal:not(.dashboard-modal):not(.sidebar-modal) .form-section,
.modal:not(.dashboard-modal):not(.sidebar-modal) .permissions-container {
    color: #333333 !important;
}

/* FORCE MODAL VISIBILITY - EMERGENCY FIX */
.modal:not(.dashboard-modal):not(.sidebar-modal).active {
    display: flex !important;
    visibility: visible !important;
    opacity: 1 !important;
    z-index: 99999 !important;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100% !important;
    height: 100% !important;
    background-color: rgba(0, 0, 0, 0.5) !important;
    align-items: center !important;
    justify-content: center !important;
}

/* Ensure modal content is also visible */
.modal:not(.dashboard-modal):not(.sidebar-modal).active .modal-content {
    visibility: visible !important;
    opacity: 1 !important;
    display: block !important;
    position: relative !important;
    z-index: 100000 !important;
}

/* Override any conflicting display rules */
#batch-modal:not(.dashboard-modal).active,
#batch-details-modal:not(.dashboard-modal).active {
    display: flex !important;
    visibility: visible !important;
}

/* Product and Inventory modal specific fixes */
#product-modal:not(.dashboard-modal).active,
#batch-modal:not(.dashboard-modal).active,
#batch-details-modal:not(.dashboard-modal).active {
    z-index: 99999 !important;
}

#product-modal:not(.dashboard-modal).active .modal-content,
#batch-modal:not(.dashboard-modal).active .modal-content,
#batch-details-modal:not(.dashboard-modal).active .modal-content {
    z-index: 100000 !important;
    max-width: 900px !important;
    width: 95% !important;
    max-height: 90vh !important;
    /* CORRIGIDO: Removido overflow:hidden que bloqueava scroll */
    display: flex !important;
    flex-direction: column !important;
    overflow: visible !important;
}

/* CRÍTICO: modal-body precisa ter scroll habilitado */
#product-modal:not(.dashboard-modal).active .modal-body,
#batch-modal:not(.dashboard-modal).active .modal-body,
#batch-details-modal:not(.dashboard-modal).active .modal-body {
    flex: 1 1 auto !important;
    min-height: 0 !important;
    overflow-y: auto !important;
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
}

/* Header e footer não devem encolher */
#product-modal:not(.dashboard-modal).active .modal-header,
#product-modal:not(.dashboard-modal).active .modal-footer,
#batch-modal:not(.dashboard-modal).active .modal-header,
#batch-modal:not(.dashboard-modal).active .modal-footer,
#batch-details-modal:not(.dashboard-modal).active .modal-header,
#batch-details-modal:not(.dashboard-modal).active .modal-footer {
    flex-shrink: 0 !important;
}


/* CORREÇÃO ESPECÍFICA PARA SISTEMA DE AJUDA - PERMITIR SCROLL */
#modal-container.active .help-modal-content {
    overflow: visible !important;
    /* Permite scroll interno */
}

#modal-container.active .help-modal-sections {
    overflow-y: auto !important;
    /* Força scroll vertical */
    overflow-x: hidden !important;
    -webkit-overflow-scrolling: touch !important;
    scroll-behavior: smooth !important;
}

/* Garantir que o modal de produtos use a identidade visual correta */
#product-modal:not(.dashboard-modal) .modal-header h2,
#product-modal:not(.dashboard-modal) .modal-header h3,
#product-modal:not(.dashboard-modal) .modal-header h4 {
    color: #ffffff !important;
}

#product-modal:not(.dashboard-modal) .modal-header h2 i,
#product-modal:not(.dashboard-modal) .modal-header h3 i,
#product-modal:not(.dashboard-modal) .modal-header h4 i {
    color: #ffffff !important;
}

#product-modal:not(.dashboard-modal) .close-modal {
    color: #ffffff !important;
}

#product-modal:not(.dashboard-modal) .modal-body {
    color: #000000 !important;
}

#product-modal:not(.dashboard-modal) .form-section h4 {
    color: #000000 !important;
}

/* Garantir que o modal de clientes use a identidade visual correta */
#customer-modal:not(.dashboard-modal) .modal-header {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%) !important;
    border-bottom: 1px solid #4b5563 !important;
    border-radius: 8px 8px 0 0 !important;
}

#customer-modal:not(.dashboard-modal) .modal-header h3 {
    color: #ffffff !important;
}

#customer-modal:not(.dashboard-modal) .close-modal {
    color: #ffffff !important;
}

#customer-modal:not(.dashboard-modal) .close-modal:hover {
    color: #f3f4f6 !important;
    transform: scale(1.1) !important;
}

/* Modal de confirmação de exclusão de clientes */
#delete-confirm-modal:not(.dashboard-modal) .modal-header {
    background: linear-gradient(135deg, #1f2937 0%, #374151 100%) !important;
    border-bottom: 1px solid #4b5563 !important;
    border-radius: 8px 8px 0 0 !important;
}

#delete-confirm-modal:not(.dashboard-modal) .modal-header h3 {
    color: #ffffff !important;
}

#delete-confirm-modal:not(.dashboard-modal) .close-modal {
    color: #ffffff !important;
}

#product-modal:not(.dashboard-modal) .form-group label {
    color: #000000 !important;
}

#product-modal:not(.dashboard-modal) .form-group input,
#product-modal:not(.dashboard-modal) .form-group select,
#product-modal:not(.dashboard-modal) .form-group textarea {
    color: #000000 !important;
}

/* Product and Inventory modals on tablets */
@media (max-width: 992px) {

    #product-modal:not(.dashboard-modal).active .modal-content,
    #batch-modal:not(.dashboard-modal).active .modal-content,
    #batch-details-modal:not(.dashboard-modal).active .modal-content {
        width: 98% !important;
        max-width: 98vw !important;
        max-height: 95vh !important;
    }
}

/* Mobile responsive for all modals */
@media (max-width: 768px) {

    #product-modal:not(.dashboard-modal).active .modal-content,
    #batch-modal:not(.dashboard-modal).active .modal-content,
    #batch-details-modal:not(.dashboard-modal).active .modal-content {
        width: 100% !important;
        height: 100vh !important;
        max-height: 100vh !important;
        border-radius: 0 !important;
        margin: 0 !important;
    }

    /* CORREÇÃO ESPECÍFICA PARA SISTEMA DE AJUDA EM MOBILE */
    #modal-container.active .help-modal-content {
        width: 100vw !important;
        height: 100vh !important;
        max-width: none !important;
        max-height: none !important;
        border-radius: 0 !important;
        overflow: visible !important;
    }

    #modal-container.active .help-modal-sections {
        overflow-y: scroll !important;
        /* CORRIGIDO: scroll para forçar scrollbar sempre visível */
        overflow-x: hidden !important;
        -webkit-overflow-scrolling: touch !important;
        scroll-behavior: smooth !important;
        max-height: calc(100vh - 120px) !important;
        /* CORRIGIDO: considera header e navegação */
        min-height: 0 !important;
        flex: 1 !important;
        /* CORRIGIDO: igual ao sistema de configurações */
        height: auto !important;
        /* CORRIGIDO: altura automática */
        /* CORREÇÃO CRÍTICA: Forçar scrollbar sempre visível em mobile */
        scrollbar-width: thin !important;
        /* Firefox */
        -ms-overflow-style: scrollbar !important;
        /* IE/Edge */
    }

    /* CORREÇÃO CRÍTICA: Garantir que apenas UMA seção seja exibida por vez em mobile */
    #modal-container.active .help-section.active {
        display: block !important;
        visibility: visible !important;
    }

    #modal-container.active .help-section:not(.active) {
        display: none !important;
        visibility: hidden !important;
    }

    /* CORREÇÃO CRÍTICA: Forçar scrollbar webkit sempre visível em mobile */
    #modal-container.active .help-modal-sections::-webkit-scrollbar {
        width: 8px !important;
        display: block !important;
        /* Força exibição */
    }

    #modal-container.active .help-modal-sections::-webkit-scrollbar-track {
        background: #f1f1f1 !important;
        border-radius: 4px !important;
        display: block !important;
        /* Força exibição */
    }

    #modal-container.active .help-modal-sections::-webkit-scrollbar-thumb {
        background: #888 !important;
        border-radius: 4px !important;
        display: block !important;
        /* Força exibição */
    }

    #modal-container.active .help-modal-sections::-webkit-scrollbar-thumb:hover {
        background: #555 !important;
    }
}