/**
 * Estilos para o shortcode [nova_bling_pedidos]
 * Visual inspirado na interface original do Bling
 */

/* Estilos de reset para o componente */
.nb-pedidos-container *,
.nb-pedidos-container *::before,
.nb-pedidos-container *::after {
    box-sizing: border-box !important;
}

/* Variáveis de cores e configurações básicas */


/* Wrapper principal - novo */
.nb-wrapper {
    max-width: 100% !important;
    overflow-x: hidden !important;
}

/* Container principal */
.nb-pedidos-container .nb-card {
    background-color: #fff !important;
    border: 1px solid var(--cor-borda) !important;
    border-radius: var(--raio-borda) !important;
    box-shadow: var(--sombra-card) !important;
    margin-bottom: 20px !important;
}

/* Container de filtros superiores - novo */
.nb-pedidos-container .nb-top-filters {
    background-color: #f5f5f5 !important;
    padding: 15px 20px !important;
    border-bottom: 1px solid var(--cor-borda) !important;
}

.nb-pedidos-container .nb-filter-row {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 10px !important;
    align-items: center !important;
}

.nb-pedidos-container .nb-filter-group {
    min-width: 150px !important;
    position: relative !important;
}

.nb-pedidos-container .nb-search-group {
    flex-grow: 1 !important;
    position: relative !important;
    display: flex !important;
    align-items: center !important;
}

.nb-pedidos-container .nb-btn-search,
.nb-pedidos-container .nb-btn-clear {
    background: none !important;
    border: none !important;
    position: absolute !important;
    right: 10px !important;
    top: 50% !important;
    transform: translateY(-50%) !important;
    cursor: pointer !important;
    padding: 0 !important;
    color: #777 !important;
}

.nb-pedidos-container .nb-btn-clear {
    right: 35px !important;
}

/* Cabeçalho com título "Pedidos Bling" */
.nb-pedidos-container .nb-card-header {
    display: flex;
    align-items: center !important;
    justify-content: space-between !important;
    background-color: #fff !important;
    border-bottom: 1px solid var(--cor-borda) !important;
    padding: 15px 20px !important;
}

.nb-pedidos-container .nb-header-title {
    display: flex !important;
    align-items: center !important;
}

.nb-pedidos-container .nb-icon-cart {
    margin-right: 10px !important;
    color: var(--cor-primaria) !important;
    font-size: 24px !important;
}

.nb-pedidos-container .nb-card-header h4 {
    color: #333 !important;
    font-size: 18px !important;
    font-weight: 600 !important;
    margin: 0 !important;
    display: flex ;
    align-items: center !important;
}

.nb-pedidos-container .nb-exibindo-info {
    color: #777 !important;
    font-size: 14px !important;
    font-weight: normal !important;
    margin-left: 10px !important;
}

.nb-pedidos-container .nb-exibindo-container {
    padding: 8px 20px !important;
    background-color: #f9f9f9 !important;
    font-size: 13px !important;
    color: #666 !important;
    border-bottom: 1px solid var(--cor-borda) !important;
}

.nb-pedidos-container .nb-card-body {
    padding: 0 !important;
}

/* Botões de ação */
.nb-pedidos-container .nb-btn-container {
    display: flex !important;
    gap: 10px !important;
}

.nb-pedidos-container .nb-btn {
    display: inline-flex !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 8px 16px !important;
    font-size: 14px !important;
    font-weight: 500 !important;
    border-radius: var(--raio-borda) !important;
    transition: all 0.2s !important;
    cursor: pointer !important;
    border: none !important;
}

.nb-pedidos-container .nb-btn-primary {
    background-color: var(--cor-primaria) !important;
    color: white !important;
    border-radius: 12px !important;
}

.nb-pedidos-container .nb-btn-primary:hover {
    background: #084298 !important;
}

.nb-pedidos-container .nb-btn-success {
    background-color: var(--cor-sucesso) !important;
    color: white !important;
    border-radius: 12px !important;

}
.nb-pedidos-container .nb-btn-success:hover {
    background: #0bb32f !important;
}

.nb-pedidos-container .nb-btn-icon {
    margin-right: 8px !important;
}

.nb-pedidos-container .nb-btn-sm {
    padding: 5px 10px !important;
    font-size: 12px !important;
}

/* Checkbox de seleção */
.nb-pedidos-container .nb-checkbox {
    width: 18px !important;
    height: 18px !important;
    cursor: pointer !important;
}

.nb-pedidos-container .nb-checkbox-header {
    display: flex !important;
    justify-content: center !important;
    align-items: center !important;
}

/* Estilos da tabela de pedidos */
.nb-pedidos-container .nb-table-responsive {
    overflow-x: auto !important;
    width: 100% !important;
}

.nb-pedidos-container .nb-table {
    width: 100% !important;
    border-collapse: separate !important;
    border-spacing: 0 !important;
    font-size: 14px !important;
}

.nb-pedidos-container .nb-table th {
    color: #555 !important;
    font-weight: 600 !important;
    padding: 12px 15px !important;
    text-align: left !important;
    border-bottom: 1px solid var(--cor-borda) !important;
    background-color: var(--cor-fundo-cabecalho) !important;
    white-space: nowrap !important;
    position: sticky !important;
    top: 0 !important;
    z-index: 10 !important;
}

.nb-pedidos-container .nb-table td {
    padding: 12px 15px !important;
    vertical-align: middle !important;
    border-bottom: 1px solid var(--cor-borda) !important;
    font-size: 12px;
}

.nb-pedidos-container .nb-table tbody tr:nth-of-type(odd) {
    background-color: var(--cor-fundo-zebra) !important;
}

.nb-pedidos-container .nb-table tbody tr:hover {
    background-color: var(--cor-fundo-hover) !important;
}

/* Estilos específicos para as células */
.nb-pedidos-container .nb-numero-pedido {
    font-weight: 600 !important;
    color: var(--cor-texto-muted) !important;
    margin-left: 25%
}

.nb-pedidos-container .nb-data-pedido {
    white-space: nowrap !important;
    display: block !important;
    font-weight: 600 !important;
    color: var(--cor-texto-muted) !important;
    font-size: 13px;
}

.nb-pedidos-container .nb-data-previsao {
    font-size: 13px !important;
    color: #888 !important;
    display: block !important;
}

.nb-pedidos-container .nb-dias-uteis {
    font-weight: 600 !important;
    display: block !important;
}

.nb-pedidos-container .nb-dias-corridos {
    font-size: 13px !important;
    color: #888 !important;
    display: block !important;
}

.nb-pedidos-container .nb-nome-cliente {
    display: block !important;
    font-weight: 600 !important;
    color: #736b6b;
    font-size: 13px;
}

.nb-pedidos-container .nb-cidade-cliente {
    font-size: 13px !important;
    color: #888 !important;
    display: block !important;
}

/* Resumo dos pedidos selecionados na parte inferior */
.nb-pedidos-container .nb-resumo-pedidos {
    display: flex !important;
    flex-wrap: wrap !important;
    gap: 20px !important;
    padding: 15px 20px !important;
    background-color: #f8f9fa !important;
    border-top: 1px solid var(--cor-borda) !important;
    font-size: 14px !important;
}

.nb-pedidos-container .nb-resumo-item {
    display: flex !important;
    flex-direction: column !important;
    min-width: 120px !important;
}

.nb-pedidos-container .nb-resumo-label {
    font-size: 12px !important;
    color: #666 !important;
    margin-bottom: 3px !important;
}

.nb-pedidos-container .nb-resumo-valor {
    font-weight: 600 !important;
    font-size: 16px !important;
    color: #333 !important;
}

.nb-pedidos-container .nb-resumo-valor-destaque {
    color: var(--cor-primaria) !important;
    font-weight: 700 !important;
}

/* Mensagens e alertas */
.nb-pedidos-container .nb-alert {
    padding: 15px 20px !important;
    margin-bottom: 20px !important;
    border-radius: var(--raio-borda) !important;
    border-left: 4px solid !important;
}

.nb-pedidos-container .nb-alert-info {
    background-color: #e3f2fd !important;
    border-color: var(--cor-info) !important;
    color: #0c5460 !important;
}

.nb-pedidos-container .nb-alert-warning {
    background-color: #fff3cd !important;
    border-color: var(--cor-alerta) !important;
    color: #856404 !important;
}

.nb-pedidos-container .nb-alert-danger {
    background-color: #f8d7da !important;
    border-color: var(--cor-erro) !important;
    color: #721c24 !important;
}

.nb-pedidos-container .nb-alert-heading {
    font-weight: 600 !important;
    margin-top: 0 !important;
    margin-bottom: 10px !important;
}

/* Spinner de carregamento */
.nb-pedidos-container .nb-spinner {
    width: 40px !important;
    height: 40px !important;
    border: 3px solid rgba(0, 0, 0, 0.1) !important;
    border-top-color: var(--cor-primaria) !important;
    border-radius: 50% !important;
    animation: nb-spin 1s linear infinite !important;
    margin: 0 auto !important;
}

@keyframes nb-spin {
    to {
        transform: rotate(360deg) !important;
    }
}

/* Classes utilitárias */
.nb-pedidos-container .nb-text-center {
    text-align: center !important;
}

.nb-pedidos-container .nb-p-5 {
    padding: 3rem !important;
}

.nb-pedidos-container .nb-mt-2 {
    margin-top: 0.5rem !important;
}

.nb-pedidos-container .nb-mb-3 {
    margin-bottom: 1rem !important;
}

/* Estilos para o modal de detalhes do pedido */
#nb-modalDetalhesPedido .modal-header {
    background-color: var(--cor-primaria) !important;
    color: white !important;
    border-bottom: none !important;
}

#nb-modalDetalhesPedido .modal-title {
    color: white !important;
    font-weight: 600 !important;
}

#nb-modalDetalhesPedido .btn-close {
    color: white !important;
    opacity: 0.8 !important;
    filter: brightness(5) !important;
}

.nb-detalhes-pedido {
    padding: 0 !important;
}

.nb-detalhes-cabecalho {
    display: flex !important;
    justify-content: space-between !important;
    align-items: center !important;
    margin-bottom: 20px !important;
    padding-bottom: 15px !important;
    border-bottom: 1px solid var(--cor-borda) !important;
}

.nb-detalhes-cabecalho h3 {
    font-size: 1.5rem !important;
    font-weight: 600 !important;
    margin: 0 !important;
    color: #333 !important;
}

.nb-detalhes-secao {
    margin-bottom: 25px !important;
}

.nb-detalhes-secao h4 {
    font-size: 1.1rem !important;
    font-weight: 600 !important;
    margin: 0 0 15px 0 !important;
    color: #333 !important;
    padding-bottom: 10px !important;
    border-bottom: 1px solid #f0f0f0 !important;
}

.nb-detalhes-grid {
    display: grid !important;
    grid-template-columns: repeat(auto-fill, minmax(200px, 1fr)) !important;
    gap: 15px !important;
}

.nb-detalhes-item {
    margin-bottom: 10px !important;
}

.nb-detalhes-label {
    display: block !important;
    font-size: 0.85rem !important;
    color: #666 !important;
    margin-bottom: 4px !important;
}

.nb-detalhes-valor {
    display: block !important;
    font-weight: 500 !important;
    color: #333 !important;
}

.nb-detalhes-endereco p {
    margin: 0 0 5px 0 !important;
    line-height: 1.5 !important;
}

.nb-tabela-produtos {
    width: 100% !important;
    border-collapse: collapse !important;
    margin-bottom: 20px !important;
}

.nb-tabela-produtos th {
    text-align: left !important;
    padding: 10px !important;
    background-color: #f8f9fa !important;
    border-bottom: 1px solid #ddd !important;
    font-weight: 600 !important;
    color: #555 !important;
}

.nb-tabela-produtos td {
    padding: 10px !important;
    border-bottom: 1px solid #eee !important;
    vertical-align: middle !important;
}

.nb-tabela-produtos tbody tr:hover {
    background-color: #f9f9f9 !important;
}

.nb-tabela-produtos tfoot tr {
    background-color: #f5f5f5 !important;
}

.nb-tabela-produtos .nb-total-label {
    text-align: right !important;
    font-weight: 600 !important;
}

.nb-tabela-produtos .nb-total-valor {
    font-weight: 700 !important;
    color: var(--cor-primaria) !important;
}

.nb-detalhes-observacoes {
    background-color: #f9f9f9 !important;
    padding: 15px !important;
    border-radius: var(--raio-borda) !important;
    border-left: 4px solid #ddd !important;
}

.nb-detalhes-observacoes p {
    margin: 0 !important;
    line-height: 1.5 !important;
    color: #555 !important;
}

/* Estilos responsivos */
@media (max-width: 768px) {
    .nb-pedidos-container .nb-btn-container {
        margin-top: 10px !important;
        justify-content: stretch !important;
        width: 100% !important;
    }
    
    .nb-pedidos-container .nb-btn {
        flex: 1 !important;
    }
    
    .nb-pedidos-container .nb-filtros-container {
        flex-direction: column !important;
    }
    
    .nb-pedidos-container .nb-card-header {
        flex-direction: column ;
        align-items: flex-start !important;
    }
    
    .nb-pedidos-container .nb-btn-container {
        margin-top: 10px !important;
        width: 100% !important;
    }
    
    .nb-pedidos-container .nb-resumo-pedidos {
        flex-direction: column !important;
        gap: 10px !important;
    }
    
    .nb-pedidos-container .nb-filter-group {
        width: 100% !important;
    }
    
    .nb-detalhes-grid {
        grid-template-columns: 1fr !important;
    }
}

/* Estilos para ícones do Bootstrap */
.nb-btn-icon,
.nb-icon-cart {
    font-size: 1.2rem;
    vertical-align: middle;
    margin-right: 5px;
}

.nb-btn-sm .bi {
    font-size: 1rem;
}

.nb-header-title .bi {
    font-size: 1.5rem;
    vertical-align: middle;
    margin-right: 10px;
    color: #0073aa;
}

.nb-search-group .bi {
    font-size: 1rem;
}

/* Estilos para o painel de depuração do administrador */
.nb-admin-debug-panel {
    margin: 10px 0;
    padding: 10px;
    background: #fffbf0;
    border: 1px solid #eee;
    border-left: 4px solid #f0ad4e;
    border-radius: var(--raio-borda);
}

.nb-btn-warning {
    background-color: #f0ad4e !important;
    color: #fff !important;
}

.nb-btn-warning:hover {
    background-color: #ec971f !important;
}

.debug-info {
    margin: 10px 0;
    padding: 8px;
    background: #f8f8f8;
    border: 1px solid #ddd;
    border-radius: 4px;
    font-size: 12px;
}

/* Estilos para notificações informativas */
.nb-notice {
    padding: 12px 15px;
    margin: 0 0 15px 0;
    border-radius: var(--raio-borda);
    display: flex;
    align-items: center;
    font-size: 14px;
}

.nb-notice i {
    font-size: 1.2rem;
    margin-right: 10px;
}

.nb-notice-info {
    background-color: #e7f3ff;
    border-left: 4px solid #0d6efd;
    color: #084298;
}

.nb-notice-warning {
    background-color: #fff3cd;
    border-left: 4px solid #ffc107;
    color: #856404;
}

.nb-notice-error {
    background-color: #f8d7da;
    border-left: 4px solid #dc3545;
    color: #721c24;
}

/* Configuração específica de largura para a coluna Situação no shortcode */
.nb-pedidos-container .nb-table th:nth-child(9),
.nb-pedidos-container .nb-table td:nth-child(9) {
    width: 120px !important;
    max-width: 120px !important;
    min-width: 120px !important;
}

/* Ajustes para o conteúdo da coluna Situação no shortcode */
.nb-pedidos-container .nb-table td:nth-child(9) .nb-badge {
    font-size: 11px !important;
    padding: 3px 6px !important;
    display: inline-block !important;
    max-width: 100% !important;
    line-height: 1.3 !important;
    word-wrap: break-word !important;
    word-break: break-word !important;
    white-space: normal !important;
}

.nb-pedidos-container .nb-table td:nth-child(9) .nb-status-id {
    font-size: 9px !important;
    padding: 1px 3px !important;
}