/* Configurações - Estilos customizados */

/* Variáveis CSS */
:root {
  --color-primary: #c6254e;
}

.settings-nav-link {
  transition: all 0.3s ease;
}

.settings-nav-link:hover {
  background-color: #f8f9fa;
}

.settings-nav-link.active {
  background-color: var(--color-primary);
  color: white;
}

/* Animação para as seções */
.settings-section {
  animation: fadeIn 0.3s ease;
}

@keyframes fadeIn {
  from {
    opacity: 0;
    transform: translateY(10px);
  }
  to {
    opacity: 1;
    transform: translateY(0);
  }
}

/* Avatar preview styles */
.avatar-preview {
  transition: all 0.3s ease;
}

.avatar-preview:hover {
  transform: scale(1.05);
  box-shadow: 0 4px 15px rgba(0, 0, 0, 0.2);
}

/* Toggle switch styles */
.switch {
  position: relative;
  display: inline-block;
  width: 60px;
  height: 34px;
}

.switch input {
  opacity: 0;
  width: 0;
  height: 0;
}

.slider {
  position: absolute;
  cursor: pointer;
  top: 0;
  left: 0;
  right: 0;
  bottom: 0;
  background-color: #ccc;
  transition: 0.4s;
  border-radius: 34px;
}

.slider:before {
  position: absolute;
  content: "";
  height: 26px;
  width: 26px;
  left: 4px;
  bottom: 4px;
  background-color: white;
  transition: 0.4s;
  border-radius: 50%;
}

input:checked + .slider {
  background-color: var(--color-primary);
}

input:checked + .slider:before {
  transform: translateX(26px);
}

/* Tabela de funis - estilos aprimorados */
#funisTableBody tr {
  transition: background-color 0.2s ease;
}

#funisTableBody tr:hover {
  background-color: #f8f9fa;
}

#funisTableBody td {
  vertical-align: middle;
}

#funisTableBody .btn {
  margin: 0 2px;
}

#funisTableBody .d-flex {
  gap: 5px;
}

/* Ícone de arrastar */
#funisTableBody .fa-grip-vertical {
  color: #6c757d;
  cursor: move;
  transition: color 0.2s ease;
}

#funisTableBody .fa-grip-vertical:hover {
  color: var(--color-primary);
}

/* Drag and drop styles para funis */
#funisTableBody tr {
  transition: all 0.2s ease;
}

#funisTableBody .funil-row {
  transition: background-color 0.2s ease;
}

#funisTableBody .funil-row.dragging {
  opacity: 0.5;
  background-color: #e9ecef;
}

#funisTableBody .funil-row.drag-over {
  border-top: 3px solid var(--color-primary);
}

#funisTableBody .funil-row[draggable="true"] {
  cursor: move;
}

#funisTableBody .funil-row[draggable="true"]:hover {
  background-color: #f8f9fa;
}

/* Drag and drop styles para origens */
#origensTableBody .origem-row {
  transition: background-color 0.2s ease;
}

#origensTableBody .origem-row.dragging {
  opacity: 0.5;
  background-color: #e9ecef;
}

#origensTableBody .origem-row.drag-over {
  border-top: 3px solid var(--color-primary);
}

#origensTableBody .origem-row[draggable="true"] {
  cursor: move;
}

#origensTableBody .origem-row[draggable="true"]:hover {
  background-color: #f8f9fa;
}

/* Estilos para edição inline de funis - nome */
.funil-nome-cell {
  position: relative;
  cursor: pointer;
  padding: 8px 12px;
  transition: background-color 0.2s ease;
}

.funil-nome-display {
  display: inline-block;
  min-width: 100px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.funil-nome-cell:hover .funil-nome-display {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
}

.funil-edit-icon {
  display: none;
  margin-left: 8px;
  color: #6c757d;
  font-size: 0.8em;
  cursor: pointer;
  transition: color 0.2s ease;
}

.funil-nome-cell:hover .funil-edit-icon {
  display: inline-block;
}

.funil-edit-icon:hover {
  color: var(--color-primary);
}

/* Input de edição */
.funil-nome-input {
  display: none;
  width: 100%;
  min-width: 150px;
  padding: 4px 8px;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  font-size: inherit;
  font-family: inherit;
  background-color: white;
}

.funil-nome-input:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(198, 37, 78, 0.25);
}

/* Estados de edição */
.funil-nome-cell.editing .funil-nome-display {
  display: none !important;
}

.funil-nome-cell.editing .funil-edit-icon {
  display: none !important;
}

.funil-nome-cell.editing .funil-nome-input {
  display: inline-block !important;
}

.funil-nome-cell.editing {
  background-color: #fff3cd;
}

/* Estilos para edição inline de funis - sigla */
.funil-sigla-cell {
  position: relative;
  cursor: pointer;
  padding: 8px 12px;
  transition: background-color 0.2s ease;
}

.funil-sigla-display {
  display: inline-block;
  min-width: 60px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.funil-sigla-cell:hover .funil-sigla-display {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
}

.funil-sigla-edit-icon {
  display: none;
  margin-left: 8px;
  color: #6c757d;
  font-size: 0.8em;
  cursor: pointer;
  transition: color 0.2s ease;
}

.funil-sigla-cell:hover .funil-sigla-edit-icon {
  display: inline-block;
}

.funil-sigla-edit-icon:hover {
  color: var(--color-primary);
}

/* Input de edição para sigla */
.funil-sigla-input {
  display: none;
  width: 100%;
  min-width: 80px;
  padding: 4px 8px;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  font-size: inherit;
  font-family: inherit;
  background-color: white;
}

.funil-sigla-input:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(198, 37, 78, 0.25);
}

/* Estados de edição para sigla */
.funil-sigla-cell.editing .funil-sigla-display {
  display: none !important;
}

.funil-sigla-cell.editing .funil-sigla-edit-icon {
  display: none !important;
}

.funil-sigla-cell.editing .funil-sigla-input {
  display: inline-block !important;
}

.funil-sigla-cell.editing {
  background-color: #fff3cd;
}

/* Estilos para edição inline de origens - nome */
.origem-nome-cell {
  position: relative;
  cursor: pointer;
  padding: 8px 12px;
  transition: background-color 0.2s ease;
}

.origem-nome-display {
  display: inline-block;
  min-width: 100px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.origem-nome-cell:hover .origem-nome-display {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
}

.origem-edit-icon {
  display: none;
  margin-left: 8px;
  color: #6c757d;
  font-size: 0.8em;
  cursor: pointer;
  transition: color 0.2s ease;
}

.origem-nome-cell:hover .origem-edit-icon {
  display: inline-block;
}

.origem-edit-icon:hover {
  color: var(--color-primary);
}

/* Input de edição */
.origem-nome-input {
  display: none;
  width: 100%;
  min-width: 150px;
  padding: 4px 8px;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  font-size: inherit;
  font-family: inherit;
  background-color: white;
}

.origem-nome-input:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(198, 37, 78, 0.25);
}

/* Estados de edição */
.origem-nome-cell.editing .origem-nome-display {
  display: none !important;
}

.origem-nome-cell.editing .origem-edit-icon {
  display: none !important;
}

.origem-nome-cell.editing .origem-nome-input {
  display: inline-block !important;
}

.origem-nome-cell.editing {
  background-color: #fff3cd;
}

/* Estilos para edição inline de origens - sigla */
.origem-sigla-cell {
  position: relative;
  cursor: pointer;
  padding: 8px 12px;
  transition: background-color 0.2s ease;
}

.origem-sigla-display {
  display: inline-block;
  min-width: 60px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.origem-sigla-cell:hover .origem-sigla-display {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
}

.origem-sigla-edit-icon {
  display: none;
  margin-left: 8px;
  color: #6c757d;
  font-size: 0.8em;
  cursor: pointer;
  transition: color 0.2s ease;
}

.origem-sigla-cell:hover .origem-sigla-edit-icon {
  display: inline-block;
}

.origem-sigla-edit-icon:hover {
  color: var(--color-primary);
}

/* Input de edição para sigla */
.origem-sigla-input {
  display: none;
  width: 100%;
  min-width: 80px;
  padding: 4px 8px;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  font-size: inherit;
  font-family: inherit;
  background-color: white;
}

.origem-sigla-input:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(198, 37, 78, 0.25);
}

/* Estados de edição para sigla */
.origem-sigla-cell.editing .origem-sigla-display {
  display: none !important;
}

.origem-sigla-cell.editing .origem-sigla-edit-icon {
  display: none !important;
}

.origem-sigla-cell.editing .origem-sigla-input {
  display: inline-block !important;
}

.origem-sigla-cell.editing {
  background-color: #fff3cd;
}

/* Drag and drop styles para categorias */
#categoriasTableBody .categoria-row {
  transition: background-color 0.2s ease;
}

#categoriasTableBody .categoria-row.dragging {
  opacity: 0.5;
  background-color: #e9ecef;
}

#categoriasTableBody .categoria-row.drag-over {
  border-top: 3px solid var(--color-primary);
}

#categoriasTableBody .categoria-row[draggable="true"] {
  cursor: move;
}

#categoriasTableBody .categoria-row[draggable="true"]:hover {
  background-color: #f8f9fa;
}

/* Estilos para edição inline de categorias - nome */
.categoria-nome-cell {
  position: relative;
  cursor: pointer;
  padding: 8px 12px;
  transition: background-color 0.2s ease;
}

.categoria-nome-display {
  display: inline-block;
  min-width: 100px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.categoria-nome-cell:hover .categoria-nome-display {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
}

.categoria-edit-icon {
  display: none;
  margin-left: 8px;
  color: #6c757d;
  font-size: 0.8em;
  cursor: pointer;
  transition: color 0.2s ease;
}

.categoria-nome-cell:hover .categoria-edit-icon {
  display: inline-block;
}

.categoria-edit-icon:hover {
  color: var(--color-primary);
}

/* Input de edição */
.categoria-nome-input {
  display: none;
  width: 100%;
  min-width: 150px;
  padding: 4px 8px;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  font-size: inherit;
  font-family: inherit;
  background-color: white;
}

.categoria-nome-input:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(198, 37, 78, 0.25);
}

/* Estados de edição */
.categoria-nome-cell.editing .categoria-nome-display {
  display: none !important;
}

.categoria-nome-cell.editing .categoria-edit-icon {
  display: none !important;
}

.categoria-nome-cell.editing .categoria-nome-input {
  display: inline-block !important;
}

.categoria-nome-cell.editing {
  background-color: #fff3cd;
}

/* Estilos para edição inline de categorias - sigla */
.categoria-sigla-cell {
  position: relative;
  cursor: pointer;
  padding: 8px 12px;
  transition: background-color 0.2s ease;
}

.categoria-sigla-display {
  display: inline-block;
  min-width: 60px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.categoria-sigla-cell:hover .categoria-sigla-display {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
}

.categoria-sigla-edit-icon {
  display: none;
  margin-left: 8px;
  color: #6c757d;
  font-size: 0.8em;
  cursor: pointer;
  transition: color 0.2s ease;
}

.categoria-sigla-cell:hover .categoria-sigla-edit-icon {
  display: inline-block;
}

.categoria-sigla-edit-icon:hover {
  color: var(--color-primary);
}

/* Input de edição para sigla */
.categoria-sigla-input {
  display: none;
  width: 100%;
  min-width: 80px;
  padding: 4px 8px;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  font-size: inherit;
  font-family: inherit;
  background-color: white;
}

.categoria-sigla-input:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(198, 37, 78, 0.25);
}

/* Estados de edição para sigla */
.categoria-sigla-cell.editing .categoria-sigla-display {
  display: none !important;
}

.categoria-sigla-cell.editing .categoria-sigla-edit-icon {
  display: none !important;
}

.categoria-sigla-cell.editing .categoria-sigla-input {
  display: inline-block !important;
}

.categoria-sigla-cell.editing {
  background-color: #fff3cd;
}

/* Drag and drop styles para setores */
#setoresTableBody .setor-row {
  transition: background-color 0.2s ease;
}

#setoresTableBody .setor-row.dragging {
  opacity: 0.5;
  background-color: #e9ecef;
}

#setoresTableBody .setor-row.drag-over {
  border-top: 3px solid var(--color-primary);
}

#setoresTableBody .setor-row[draggable="true"] {
  cursor: move;
}

#setoresTableBody .setor-row[draggable="true"]:hover {
  background-color: #f8f9fa;
}

/* Estilos para edição inline de setores - nome */
.setor-nome-cell {
  position: relative;
  cursor: pointer;
  padding: 8px 12px;
  transition: background-color 0.2s ease;
}

.setor-nome-display {
  display: inline-block;
  min-width: 100px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.setor-nome-cell:hover .setor-nome-display {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
}

.setor-edit-icon {
  display: none;
  margin-left: 8px;
  color: #6c757d;
  font-size: 0.8em;
  cursor: pointer;
  transition: color 0.2s ease;
}

.setor-nome-cell:hover .setor-edit-icon {
  display: inline-block;
}

.setor-edit-icon:hover {
  color: var(--color-primary);
}

/* Input de edição */
.setor-nome-input {
  display: none;
  width: 100%;
  min-width: 150px;
  padding: 4px 8px;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  font-size: inherit;
  font-family: inherit;
  background-color: white;
}

.setor-nome-input:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(198, 37, 78, 0.25);
}

/* Estados de edição */
.setor-nome-cell.editing .setor-nome-display {
  display: none !important;
}

.setor-nome-cell.editing .setor-edit-icon {
  display: none !important;
}

.setor-nome-cell.editing .setor-nome-input {
  display: inline-block !important;
}

.setor-nome-cell.editing {
  background-color: #fff3cd;
}

/* Estilos para edição inline de setores - sigla */
.setor-sigla-cell {
  position: relative;
  cursor: pointer;
  padding: 8px 12px;
  transition: background-color 0.2s ease;
}

.setor-sigla-display {
  display: inline-block;
  min-width: 60px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.setor-sigla-cell:hover .setor-sigla-display {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
}

.setor-sigla-edit-icon {
  display: none;
  margin-left: 8px;
  color: #6c757d;
  font-size: 0.8em;
  cursor: pointer;
  transition: color 0.2s ease;
}

.setor-sigla-cell:hover .setor-sigla-edit-icon {
  display: inline-block;
}

.setor-sigla-edit-icon:hover {
  color: var(--color-primary);
}

/* Input de edição para sigla */
.setor-sigla-input {
  display: none;
  width: 100%;
  min-width: 80px;
  padding: 4px 8px;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  font-size: inherit;
  font-family: inherit;
  background-color: white;
}

.setor-sigla-input:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(198, 37, 78, 0.25);
}

/* Estados de edição para sigla */
.setor-sigla-cell.editing .setor-sigla-display {
  display: none !important;
}

.setor-sigla-cell.editing .setor-sigla-edit-icon {
  display: none !important;
}

.setor-sigla-cell.editing .setor-sigla-input {
  display: inline-block !important;
}

.setor-sigla-cell.editing {
  background-color: #fff3cd;
}

/* Drag and drop styles para etapas */
#etapasFunilTableBody .etapa-row {
  transition: background-color 0.2s ease;
}

#etapasFunilTableBody .etapa-row.dragging {
  opacity: 0.5;
  background-color: #e9ecef;
}

#etapasFunilTableBody .etapa-row.drag-over {
  border-top: 3px solid var(--color-primary);
}

#etapasFunilTableBody .etapa-row[draggable="true"] {
  cursor: move;
}

#etapasFunilTableBody .etapa-row[draggable="true"]:hover {
  background-color: #f8f9fa;
}

/* Estilos para edição inline de etapas - nome */
.etapa-nome-cell {
  position: relative;
  cursor: pointer;
  padding: 8px 12px;
  transition: background-color 0.2s ease;
}

.etapa-nome-display {
  display: inline-block;
  min-width: 100px;
  padding: 4px 8px;
  border-radius: 4px;
  transition: all 0.2s ease;
}

.etapa-nome-cell:hover .etapa-nome-display {
  background-color: #f8f9fa;
  border: 1px solid #dee2e6;
}

.etapa-edit-icon {
  display: none;
  margin-left: 8px;
  color: #6c757d;
  font-size: 0.8em;
  cursor: pointer;
  transition: color 0.2s ease;
}

.etapa-nome-cell:hover .etapa-edit-icon {
  display: inline-block;
}

.etapa-edit-icon:hover {
  color: var(--color-primary);
}

/* Input de edição */
.etapa-nome-input {
  display: none;
  width: 100%;
  min-width: 150px;
  padding: 4px 8px;
  border: 2px solid var(--color-primary);
  border-radius: 4px;
  font-size: inherit;
  font-family: inherit;
  background-color: white;
}

.etapa-nome-input:focus {
  outline: none;
  box-shadow: 0 0 0 0.2rem rgba(198, 37, 78, 0.25);
}

/* Estados de edição */
.etapa-nome-cell.editing .etapa-nome-display {
  display: none !important;
}

.etapa-nome-cell.editing .etapa-edit-icon {
  display: none !important;
}

.etapa-nome-cell.editing .etapa-nome-input {
  display: inline-block !important;
}

.etapa-nome-cell.editing {
  background-color: #fff3cd;
}

/* Estilos para ícones na navegação */
.list-group-item i {
  width: 20px;
  text-align: center;
}

/* Modal z-index fix */
#addFunilModal {
  z-index: 1055 !important;
}

#addFunilModal .modal-dialog {
  z-index: 1056 !important;
}

/* Backdrop fix */
.modal-backdrop {
  z-index: 1050 !important;
  background-color: rgba(0, 0, 0, 0.5);
  opacity: 1 !important;
}

/* Prevent multiple backdrops */
.modal-backdrop.show {
  opacity: 0.5 !important;
}

/* Modal show state */
.modal.show {
  z-index: 1055 !important;
  display: block !important;
}

/* Body modal open state */
body.modal-open {
  overflow: hidden;
  padding-right: 0 !important;
}

/* Remove duplicate backdrops */
.modal-backdrop:not(:first-of-type) {
  display: none !important;
}

/* Paginação de produtos */
.pagination .page-link {
  color: var(--color-primary);
  border-color: #dee2e6;
}

.pagination .page-item.active .page-link {
  background-color: var(--color-primary);
  border-color: var(--color-primary);
  color: #fff;
}

.pagination .page-link:hover {
  color: #fff;
  background-color: var(--color-primary);
  border-color: var(--color-primary);
}

.pagination .page-item.disabled .page-link {
  color: #6c757d;
  background-color: #fff;
  border-color: #dee2e6;
}

/* Responsividade */
@media (max-width: 768px) {
  .settings-nav-link {
    padding: 0.75rem;
  }

  .avatar-preview {
    width: 80px;
    height: 80px;
  }

  #funisTableBody .btn {
    padding: 0.25rem 0.5rem;
  }

  #funisTableBody .btn i {
    margin-right: 0 !important;
  }

  #funisTableBody .btn span {
    display: none;
  }
}

/* Estilos para tabela de produtos - Overflow horizontal */
#produtos-listagem .table-responsive {
  overflow-x: auto;
  -webkit-overflow-scrolling: touch;
  width: 100%;
}

#produtos-listagem .table {
  min-width: 100%;
  white-space: nowrap;
}

#produtos-listagem .table th,
#produtos-listagem .table td {
  white-space: nowrap;
  vertical-align: middle;
}

#produtos-listagem .table th {
  position: sticky;
  top: 0;
  background-color: #f8f9fa;
  z-index: 10;
}

/* Estilos para Modal de Edição de Produto */
.edit-produto-icon-wrapper {
  width: 80px;
  height: 80px;
  border-radius: 50%;
  display: flex;
  align-items: center;
  justify-content: center;
  margin: 0 auto;
}

.edit-produto-icon-wrapper i {
  font-size: 32px;
  color: white;
}

#editProdutoModal .modal-content {
  border-radius: 12px;
  overflow: hidden;
}

#editProdutoModal .form-label {
  color: #333;
  font-weight: 600;
}

#editProdutoModal .form-control,
#editProdutoModal .form-select {
  border: 1px solid #e0e0e0;
  transition: border-color 0.3s;
}

#editProdutoModal .form-control-lg,
#editProdutoModal .form-select-lg {
  padding: 12px 16px;
  font-size: 16px;
}

/* Campo Categoria com dropdown customizado */
.edit-produto-categoria-actions {
  position: absolute;
  right: 12px;
  top: 50%;
  transform: translateY(-50%);
  display: flex;
  align-items: center;
  gap: 8px;
  pointer-events: none;
  z-index: 5;
}

.edit-produto-clear-categoria {
  pointer-events: all;
  font-size: 14px;
  width: 20px;
  height: 20px;
  display: flex;
  align-items: center;
  justify-content: center;
  text-decoration: none;
}

.edit-produto-dropdown-icon {
  margin-right: 2px;
  margin-bottom: 2px;
  font-size: 14px;
  pointer-events: none;
}

#editProdutoCategoria {
  padding-right: 60px !important;
}

/* Campo Preço */
#editProdutoPreco {
  text-align: right;
}

#editProdutoModal .input-group-text {
  background-color: #f8f9fa;
  border: 1px solid #e0e0e0;
  font-weight: 600;
}