/* Reset específico para modais */
.modal *, .modal *::before, .modal *::after {
  box-sizing: border-box !important;
}

/* Modal Overlay */
.modal {
    display: none;
    position: fixed !important;
    top: 0 !important;
    left: 0 !important;
    width: 100vw !important;
    height: 100vh !important;
    background-color: rgba(0, 0, 0, 0.4) !important;
    z-index: 9999 !important;
    align-items: center !important;
    justify-content: center !important;
    padding: 0 !important;
    opacity: 1 !important;
    visibility: visible !important;
    transform: none !important;
    border-radius: 0 !important;
}

.modal.show {
  display: flex !important;
}

/* Modal Content - Exato do Figma */
.modal .modal-content,
.modal-content {
  background-color: white !important;
  border-radius: 12px !important;
  width: 100% !important;
  min-height: auto !important;
  overflow: hidden !important;
  box-shadow: 0 10px 40px transparent !important;
  border: 1px solid #eee !important;
  position: relative !important;
  margin: 0 auto !important;
  transform: scale(1) translateY(0) !important;
  transition: none !important;
}
.modal .modal-content,
.modal-content {
    position: absolute !important;
    top: 50% !important;
    left: 50% !important;
    transform: translate(-50%, -50%) !important;
}
/* Modal Header - Design Figma */
.modal .modal-header,
.modal-header {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  padding: 32px !important;
  margin-bottom: 0 !important;
  border-bottom: none !important;
  background: transparent !important;
  justify-content: flex-start !important;
}

.modal .modal-header .header-icon {
  background: transparent !important;
font-size: 28px;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  flex-shrink: 0 !important;
}



.modal .modal-header .header-icon i {
  color: #219962 !important;
  font-size: 28px !important;
  width: auto !important;
  height: auto !important;
}




/* Modal Title - Design Figma */
.modal .modal-header h3,
.modal .modal-title,
.modal h3 {
  font-size: 20px !important;
  font-weight: 700 !important;
  color: #111 !important;
  flex: 1 !important;
  margin: 0 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  line-height: 1 !important;
}

/* Modal Close - Design Figma */
.modal .modal-close,
.modal-close {
  background: none !important;
  border: none !important;
  cursor: pointer !important;
  color: #6b7280 !important;
  padding: 4px !important;
  border-radius: 6px !important;
  transition: all 0.2s !important;
  width: 24px !important;
  height: 24px !important;
  display: flex !important;
  align-items: center !important;
  justify-content: center !important;
  margin-left: auto !important;
}

.modal .modal-close:hover,
.modal-close:hover {
  background: #f3f4f6 !important;
  color: #374151 !important;
}

.modal .modal-close i,
.modal-close i {
  font-size: 14px !important;
  width: auto !important;
  height: auto !important;
}

/* Modal Body - Design Figma */
.modal .modal-body,
.modal-body {
  padding: 0 32px 32px 32px !important;
 max-height: 70vh !important;
  overflow-y: auto !important;
  overflow-x: hidden !important;
}

/* Form Groups - Design Figma */
.modal .form-group {
  margin-bottom: 16px !important;
}

.modal .form-group:last-child {
  margin-bottom: 0 !important;
}

.modal .form-group label,
.modal label {
  display: block !important;
  font-size: 14px !important;
  line-height: 1 !important;
  font-weight: 600 !important;
  color: #757575 !important;
  margin-bottom: 12px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Form Controls - Exato do Figma */
.modal .form-control, 
.modal .form-select,
.modal input[type="text"],
.modal input[type="email"],
.modal input[type="password"],
.modal input[type="tel"],
.modal input[type="url"],
.modal input[type="number"],
.modal input[type="date"],
.modal select,
.modal textarea {
  width: 100% !important;
  padding: 16px !important;
  border: 1px solid #dedede !important;
  border-radius: 8px !important;
  font-size: 14px !important;
  background: white !important;
color: #111 !important;
  transition: all 0.2s !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  box-sizing: border-box !important;
  line-height: 1 !important;
  outline: none !important;
}

.modal .form-control:focus, 
.modal .form-select:focus,
.modal input:focus,
.modal select:focus,
.modal textarea:focus {
  outline: none !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.modal .form-control::placeholder,
.modal input::placeholder,
.modal textarea::placeholder {
  color: #b5b5b5 !important;
}

.modal .form-select,
.modal select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 10px center !important;
  background-repeat: no-repeat !important;
  background-size: 14px !important;
  padding-right: 36px !important;
  appearance: none !important;
  cursor: pointer !important;
}

/* Form Row - Design Figma */
.modal .form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 12px !important;
}

/* Checkbox Container - Design Figma */
.modal .checkbox-container {
  display: flex !important;
  align-items: flex-start !important;
  gap: 10px !important;
  margin-top: 12px !important;
  padding: 12px !important;
  background: #f9fafb !important;
  border-radius: 8px !important;
  border: 1px solid #e5e7eb !important;
}

.modal .checkbox-container input[type="checkbox"] {
  width: 16px !important;
  height: 16px !important;
  accent-color: #3b82f6 !important;
  cursor: pointer !important;
  margin: 2px 0 0 0 !important;
  flex-shrink: 0 !important;
}

.modal .checkbox-container label {
  font-size: 13px !important;
  color: #374151 !important;
  cursor: pointer !important;
  margin: 0 !important;
  flex: 1 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  line-height: 1.4 !important;
}

/* Tags Options - Design Figma */
.modal .tags-options {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 6px !important;
  margin-top: 6px !important;
}

.modal .tag-btn {
  background: #f3f4f6 !important;
  border: 1px solid #d1d5db !important;
  color: #374151 !important;
  padding: 6px 10px !important;
  border-radius: 6px !important;
  font-size: 11px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  letter-spacing: 0.3px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.modal .tag-btn:hover {
  border-color: #3b82f6 !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}

.modal .tag-btn.selected {
  background: #3b82f6 !important;
  color: white !important;
  border-color: #3b82f6 !important;
}

/* Modal Footer - Design Figma */
.modal .modal-footer,
.modal-footer {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 8px !important;
  padding: 16px 24px 24px 24px !important;
  border-top: 1px solid #f3f4f6 !important;
  margin-top: 8px !important;
  background: transparent !important;
}

/* Buttons - Exato do Figma */
.modal .btn,
.modal button[class*="btn"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 6px !important;
  padding: 10px 20px !important;
  border-radius: 8px !important;
  font-size: 13px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  border: 1px solid transparent !important;
  text-decoration: none !important;
  min-height: 36px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  user-select: none !important;
}

.modal .btn i,
.modal button i {
  font-size: 14px !important;
  width: auto !important;
  height: auto !important;
}

.modal .btn-primary,
.modal .btn.btn-primary {
  background: #3b82f6 !important;
  color: white !important;
  border-color: #3b82f6 !important;
}

.modal .btn-primary:hover,
.modal .btn.btn-primary:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
}

.modal .btn-outline,
.modal .btn.btn-outline {
  background: white !important;
  color: #6b7280 !important;
  border-color: #d1d5db !important;
}

.modal .btn-outline:hover,
.modal .btn.btn-outline:hover {
  background: #f9fafb !important;
  border-color: #9ca3af !important;
  color: #374151 !important;
}

.modal .btn-success,
.modal .btn.btn-success {
  background: #16a34a !important;
  color: white !important;
  border-color: #16a34a !important;
}

.modal .btn-success:hover,
.modal .btn.btn-success:hover {
  background: #15803d !important;
  border-color: #15803d !important;
}

.modal .btn-warning,
.modal .btn.btn-warning {
  background: #d97706 !important;
  color: white !important;
  border-color: #d97706 !important;
}

.modal .btn-warning:hover,
.modal .btn.btn-warning:hover {
  background: #b45309 !important;
  border-color: #b45309 !important;
}

.modal .btn-danger,
.modal .btn.btn-danger {
  background: #dc2626 !important;
  color: white !important;
  border-color: #dc2626 !important;
}

.modal .btn-danger:hover,
.modal .btn.btn-danger:hover {
  background: #b91c1c !important;
  border-color: #b91c1c !important;
}

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden !important;
}

/* Confirmation Modal Styles */
.modal .confirmation-content {
  text-align: center !important;
  padding: 0 !important;
}

.modal .confirmation-icon {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 48px !important;
  height: 48px !important;
  margin: 0 auto 16px !important;
  background: #fef3c7 !important;
  border-radius: 50% !important;
  color: #d97706 !important;
}

.modal .confirmation-icon i {
  font-size: 20px !important;
  width: auto !important;
  height: auto !important;
}

.modal .confirmation-content p {
  font-size: 14px !important;
  color: #374151 !important;
  margin-bottom: 20px !important;
  line-height: 1.4 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Supplier Action Options */
.modal .supplier-action-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 8px !important;
  margin-top: 16px !important;
}

.modal .action-option {
  text-align: center !important;
  padding: 12px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 8px !important;
  transition: all 0.2s !important;
  background: white !important;
}

.modal .action-option:hover {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
}

.modal .action-option button {
  width: 100% !important;
  margin-bottom: 6px !important;
  justify-content: center !important;
}

.modal .action-option p {
  margin: 0 !important;
  font-size: 11px !important;
  color: #6b7280 !important;
  line-height: 1.3 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Settings Modal Styles */
.modal .settings-section {
  margin-bottom: 24px !important;
}

.modal .settings-section:last-child {
  margin-bottom: 0 !important;
}

.modal .settings-section h4 {
  font-size: 14px !important;
  font-weight: 600 !important;
  color: #111827 !important;
  margin-bottom: 12px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.modal .tags-list, 
.modal .categories-list {
  margin-bottom: 12px !important;
}

.modal .tag-item, 
.modal .category-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 10px 12px !important;
  border: 1px solid #e5e7eb !important;
  border-radius: 6px !important;
  margin-bottom: 6px !important;
  background: white !important;
  transition: all 0.2s !important;
}

.modal .tag-item:hover, 
.modal .category-item:hover {
  background: #f9fafb !important;
  border-color: #d1d5db !important;
}

.modal .tag-item:last-child, 
.modal .category-item:last-child {
  margin-bottom: 0 !important;
}

.modal .tag-item span, 
.modal .category-item span {
  font-size: 13px !important;
  color: #374151 !important;
  font-weight: 500 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.modal .btn-sm {
  padding: 6px 12px !important;
  font-size: 11px !important;
  min-height: 28px !important;
}

/* Date Range Modal */
.modal .form-info {
  display: flex !important;
  align-items: center !important;
  gap: 6px !important;
  padding: 10px 12px !important;
  background: #eff6ff !important;
  border-radius: 6px !important;
  margin-top: 12px !important;
}

.modal .form-info i {
  color: #3b82f6 !important;
  font-size: 14px !important;
  flex-shrink: 0 !important;
  width: auto !important;
  height: auto !important;
}

.modal .form-info span {
  font-size: 11px !important;
  color: #1d4ed8 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.modal .error-message {
  font-size: 11px !important;
  color: #dc2626 !important;
  margin-top: 4px !important;
  display: none !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.modal .error-message.show {
  display: block !important;
}

.modal .form-control.error {
  border-color: #dc2626 !important;
  box-shadow: 0 0 0 3px rgba(220, 38, 38, 0.1) !important;
}

/* Responsive Design */
@media (max-width: 640px) {
  .modal .modal-content,
  .modal-content {
    width: 95% !important;
    max-width: 95% !important;
    max-height: 90vh !important;
    margin: 8px !important;
    border-radius: 16px !important;
  }

  .modal .modal-header {
    padding: 20px 20px 12px 20px !important;
  }

  .modal .modal-body {
    padding: 0 20px 20px 20px !important;
  }

  .modal .modal-footer {
    padding: 12px 20px 20px 20px !important;
    flex-direction: column-reverse !important;
    gap: 6px !important;
  }

  .modal .modal-footer .btn {
    width: 100% !important;
  }

  .modal .form-row {
    grid-template-columns: 1fr !important;
    gap: 8px !important;
  }

  .modal .supplier-action-options {
    gap: 6px !important;
  }

  .modal .action-option {
    padding: 10px !important;
  }
}W */
.modal .form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

/* Checkbox personalizado */
.modal .checkbox-container {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 16px !important;
  padding: 16px !important;
  background: #f8fafc !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
}

.modal .checkbox-container input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: #3b82f6 !important;
  cursor: pointer !important;
  margin: 0 !important;
}

.modal .checkbox-container label {
  font-size: 14px !important;
  color: #475569 !important;
  cursor: pointer !important;
  margin: 0 !important;
  flex: 1 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Tags selector */
.modal .tags-options {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

.modal .tag-btn {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #475569 !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.modal .tag-btn:hover {
  border-color: #3b82f6 !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}

.modal .tag-btn.selected {
  background: #3b82f6 !important;
  color: white !important;
  border-color: #3b82f6 !important;
}

/* SOBRESCREVE COMPLETAMENTE O MODAL-FOOTER */
.modal .modal-footer,
.modal-footer {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  padding: 20px 24px 24px 24px !important;
  border-top: 1px solid #f1f5f9 !important;
  margin-top: 24px !important;
  background: transparent !important;
}

/* SOBRESCREVE COMPLETAMENTE OS BUTTONS */
.modal .btn,
.modal button[class*="btn"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  border: none !important;
  text-decoration: none !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  user-select: none !important;
}

.modal .btn i,
.modal button i {
  font-size: 16px !important;
  width: auto !important;
  height: auto !important;
}

.modal .btn-primary,
.modal .btn.btn-primary {
  background: #3b82f6 !important;
  color: white !important;
  border: 1px solid #3b82f6 !important;
}

.modal .btn-primary:hover,
.modal .btn.btn-primary:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
}

.modal .btn-outline,
.modal .btn.btn-outline {
  background: white !important;
  color: #6b7280 !important;
  border: 1.5px solid #e2e8f0 !important;
}

.modal .btn-outline:hover,
.modal .btn.btn-outline:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

.modal .btn-success,
.modal .btn.btn-success {
  background: #22c55e !important;
  color: white !important;
  border: 1px solid #22c55e !important;
}

.modal .btn-success:hover,
.modal .btn.btn-success:hover {
  background: #16a34a !important;
  border-color: #16a34a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3) !important;
}

.modal .btn-warning,
.modal .btn.btn-warning {
  background: #f59e0b !important;
  color: white !important;
  border: 1px solid #f59e0b !important;
}

.modal .btn-warning:hover,
.modal .btn.btn-warning:hover {
  background: #d97706 !important;
  border-color: #d97706 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

.modal .btn-danger,
.modal .btn.btn-danger {
  background: #ef4444 !important;
  color: white !important;
  border: 1px solid #ef4444 !important;
}

.modal .btn-danger:hover,
.modal .btn.btn-danger:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden !important;
}

/* Confirmation Modal Styles */
.modal .confirmation-content {
  text-align: center !important;
  padding: 0 !important;
}

.modal .confirmation-icon {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 20px !important;
  background: #fef3c7 !important;
  border-radius: 50% !important;
  color: #f59e0b !important;
}

.modal .confirmation-icon i {
  font-size: 28px !important;
  width: auto !important;
  height: auto !important;
}

.modal .confirmation-content p {
  font-size: 16px !important;
  color: #374151 !important;
  margin-bottom: 24px !important;
  line-height: 1.5 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Supplier Action Options */
.modal .supplier-action-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 24px !important;
}

.modal .action-option {
  text-align: center !important;
  padding: 16px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  transition: all 0.2s !important;
  background: white !important;
}

.modal .action-option:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-1px) !important;
}

.modal .action-option button {
  width: 100% !important;
  margin-bottom: 8px !important;
  justify-content: center !important;
}

.modal .action-option p {
  margin: 0 !important;
  font-size: 12px !important;
  color: #6b7280 !important;
  line-height: 1.4 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Settings Modal Styles */
.modal .settings-section {
  margin-bottom: 32px !important;
}

.modal .settings-section:last-child {
  margin-bottom: 0 !important;
}

.modal .settings-section h4 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin-bottom: 16px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.modal .tags-list, 
.modal .categories-list {
  margin-bottom: 16px !important;
}

.modal .tag-item, 
.modal .category-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 16px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
  background: white !important;
  transition: all 0.2s !important;
}

.modal .tag-item:hover, 
.modal .category-item:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

.modal .tag-item:last-child, 
.modal .category-item:last-child {
  margin-bottom: 0 !important;
}

.modal .tag-item span, 
.modal .category-item span {
  font-size: 14px !important;
  color: #374151 !important;
  font-weight: 500 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.modal .btn-sm {
  padding: 8px 16px !important;
  font-size: 12px !important;
  min-height: 32px !important;
}

/* Date Range Modal */
.modal .form-info {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  background: #f0f9ff !important;
  border-radius: 10px !important;
  margin-top: 16px !important;
}

.modal .form-info i {
  color: #0ea5e9 !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  width: auto !important;
  height: auto !important;
}

.modal .form-info span {
  font-size: 13px !important;
  color: #0369a1 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.modal .error-message {
  font-size: 12px !important;
  color: #ef4444 !important;
  margin-top: 4px !important;
  display: none !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.modal .error-message.show {
  display: block !important;
}

.modal .form-control.error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Responsive Design */
@media (max-width: 640px) {
  .modal .modal-content,
  .modal-content {
width: 95% !important;
        max-width: 95% !important;
        margin: 0px !important;
  }

  .modal .modal-header {
    padding: 20px 20px 0 20px !important;
    margin-bottom: 20px !important;
  }

  .modal .modal-body {
    padding: 0 20px 20px 20px !important;
  }

  .modal .modal-footer {
    padding: 16px 20px 20px 20px !important;
    flex-direction: column-reverse !important;
  }

  .modal .modal-footer .btn {
    width: 100% !important;
  }

  .modal .form-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .modal .supplier-action-options {
    gap: 8px !important;
  }

  .modal .action-option {
    padding: 12px !important;
  }
}
.modal{
    transition: all 0.2s !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  box-sizing: border-box !important;
  line-height: normal !important;
  outline: none !important;
}

.modal .form-control:focus, 
.modal .form-select:focus,
.modal input:focus,
.modal select:focus,
.modal textarea:focus {
  outline: none !important;
  border-color: #3b82f6 !important;
  box-shadow: 0 0 0 3px rgba(59, 130, 246, 0.1) !important;
}

.modal .form-control::placeholder,
.modal input::placeholder,
.modal textarea::placeholder {
  color: #9ca3af !important;
}

.modal .form-select,
.modal select {
  background-image: url("data:image/svg+xml,%3csvg xmlns='http://www.w3.org/2000/svg' fill='none' viewBox='0 0 20 20'%3e%3cpath stroke='%236b7280' stroke-linecap='round' stroke-linejoin='round' stroke-width='1.5' d='m6 8 4 4 4-4'/%3e%3c/svg%3e") !important;
  background-position: right 12px center !important;
  background-repeat: no-repeat !important;
  background-size: 16px !important;
  padding-right: 40px !important;
  appearance: none !important;
  cursor: pointer !important;
}

/* SOBRESCREVE COMPLETAMENTE O FORM-ROW */
.modal .form-row {
  display: grid !important;
  grid-template-columns: 1fr 1fr !important;
  gap: 16px !important;
}

/* Checkbox personalizado */
.modal .checkbox-container {
  display: flex !important;
  align-items: center !important;
  gap: 12px !important;
  margin-top: 16px !important;
  padding: 16px !important;
  background: #f8fafc !important;
  border-radius: 12px !important;
  border: 1px solid #e2e8f0 !important;
}

.modal .checkbox-container input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: #3b82f6 !important;
  cursor: pointer !important;
  margin: 0 !important;
}

.modal .checkbox-container label {
  font-size: 14px !important;
  color: #475569 !important;
  cursor: pointer !important;
  margin: 0 !important;
  flex: 1 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Tags selector */
.modal .tags-options {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

.modal .tag-btn {
  background: #f8fafc !important;
  border: 1.5px solid #e2e8f0 !important;
  color: #475569 !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 500 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  letter-spacing: 0.5px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.modal .tag-btn:hover {
  border-color: #3b82f6 !important;
  background: #eff6ff !important;
  color: #1d4ed8 !important;
}

.modal .tag-btn.selected {
  background: #3b82f6 !important;
  color: white !important;
  border-color: #3b82f6 !important;
}

/* SOBRESCREVE COMPLETAMENTE O MODAL-FOOTER */
.modal .modal-footer,
.modal-footer {
  display: flex !important;
  justify-content: flex-end !important;
  gap: 12px !important;
  padding: 20px 24px 24px 24px !important;
  border-top: 1px solid #f1f5f9 !important;
  margin-top: 24px !important;
  background: transparent !important;
}

/* SOBRESCREVE COMPLETAMENTE OS BUTTONS */
.modal .btn,
.modal button[class*="btn"] {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 8px 16px !important;
  border-radius: 100px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  border: none !important;
  text-decoration: none !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  line-height: 1 !important;
  white-space: nowrap !important;
  user-select: none !important;
}

.modal .btn i,
.modal button i {
  font-size: 16px !important;
  width: auto !important;
  height: auto !important;
}

.modal .btn-primary,
.modal .btn.btn-primary {
  background: #3874FF !important;
  color: white !important;
  border: 1px solid #3874FF !important;
}

.modal .btn-primary:hover,
.modal .btn.btn-primary:hover {
  background: #004DFF !important;
  border-color: #004DFF !important;
    transform: none !important;
    box-shadow: 0 4px 12px transparent !important;
}

.modal .btn-outline,
.modal .btn.btn-outline {
  background: transparent !important;
  color: #757575 !important;
  border: 1px solid #eee !important;
}

.modal .btn-outline:hover,
.modal .btn.btn-outline:hover {
  background: #eee !important;
  border-color: #eee !important;
  color: #757575 !important;
}

.modal .btn-success,
.modal .btn.btn-success {
  background: #22c55e !important;
  color: white !important;
  border: 1px solid #22c55e !important;
}

.modal .btn-success:hover,
.modal .btn.btn-success:hover {
  background: #16a34a !important;
  border-color: #16a34a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3) !important;
}

.modal .btn-warning,
.modal .btn.btn-warning {
  background: #f59e0b !important;
  color: white !important;
  border: 1px solid #f59e0b !important;
}

.modal .btn-warning:hover,
.modal .btn.btn-warning:hover {
  background: #d97706 !important;
  border-color: #d97706 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

.modal .btn-danger,
.modal .btn.btn-danger {
  background: #ef4444 !important;
  color: white !important;
  border: 1px solid #ef4444 !important;
}

.modal .btn-danger:hover,
.modal .btn.btn-danger:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden !important;
}

/* Confirmation Modal Styles */
.modal .confirmation-content {
  text-align: center !important;
  padding: 0 !important;
}

.modal .confirmation-icon {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 20px !important;
  background: #fef3c7 !important;
  border-radius: 50% !important;
  color: #f59e0b !important;
}

.modal .confirmation-icon i {
  font-size: 28px !important;
  width: auto !important;
  height: auto !important;
}

.modal .confirmation-content p {
  font-size: 16px !important;
  color: #374151 !important;
  margin-bottom: 24px !important;
  line-height: 1.5 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Supplier Action Options */
.modal .supplier-action-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 24px !important;
}

.modal .action-option {
  text-align: center !important;
  padding: 16px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  transition: all 0.2s !important;
  background: white !important;
}

.modal .action-option:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-1px) !important;
}

.modal .action-option button {
  width: 100% !important;
  margin-bottom: 8px !important;
  justify-content: center !important;
}

.modal .action-option p {
  margin: 0 !important;
  font-size: 12px !important;
  color: #6b7280 !important;
  line-height: 1.4 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Settings Modal Styles */
.modal .settings-section {
  margin-bottom: 32px !important;
}

.modal .settings-section:last-child {
  margin-bottom: 0 !important;
}

.modal .settings-section h4 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin-bottom: 16px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.modal .tags-list, 
.modal .categories-list {
  margin-bottom: 16px !important;
}

.modal .tag-item, 
.modal .category-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 16px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
  background: white !important;
  transition: all 0.2s !important;
}

.modal .tag-item:hover, 
.modal .category-item:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

.modal .tag-item:last-child, 
.modal .category-item:last-child {
  margin-bottom: 0 !important;
}

.modal .tag-item span, 
.modal .category-item span {
  font-size: 14px !important;
  color: #374151 !important;
  font-weight: 500 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.modal .btn-sm {
  padding: 8px 16px !important;
  font-size: 12px !important;
  min-height: 32px !important;
}

/* Date Range Modal */
.modal .form-info {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  background: #f0f9ff !important;
  border-radius: 10px !important;
  margin-top: 16px !important;
}

.modal .form-info i {
  color: #0ea5e9 !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  width: auto !important;
  height: auto !important;
}

.modal .form-info span {
  font-size: 13px !important;
  color: #0369a1 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.modal .error-message {
  font-size: 12px !important;
  color: #ef4444 !important;
  margin-top: 4px !important;
  display: none !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.modal .error-message.show {
  display: block !important;
}

.modal .form-control.error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Responsive Design */
@media (max-width: 640px) {
  .modal-content {
    width: 95% !important;
    max-height: 90vh !important;
    margin: 10px !important;
  }

  .modal .modal-header {
    padding: 20px 20px 0 20px !important;
    margin-bottom: 20px !important;
  }

  .modal .modal-body {
    padding: 0 20px 20px 20px !important;
  }

  .modal .modal-footer {
    padding: 16px 20px 20px 20px !important;
    flex-direction: column-reverse !important;
  }

  .modal .modal-footer .btn {
    width: 100% !important;
  }

  .modal .form-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .modal .supplier-action-options {
    gap: 8px !important;
  }

  .modal .action-option {
    padding: 12px !important;
  }
}
.modal .checkbox-container {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  margin-top: 24px !important;
  padding: 0px !important;
  background: transparent !important;
  border-radius: 12px !important;
  border: none !important;
}

.modal .checkbox-container input[type="checkbox"] {
  width: 18px !important;
  height: 18px !important;
  accent-color: #3b82f6 !important;
  cursor: pointer !important;
  margin: 0 !important;
}

.modal .checkbox-container label {
  font-size: 14px !important;
  color: #475569 !important;
  cursor: pointer !important;
  margin: 0 !important;
  flex: 1 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Tags selector */
.modal .tags-options {
  display: flex !important;
  flex-wrap: wrap !important;
  gap: 8px !important;
  margin-top: 8px !important;
}

.modal .tag-btn {
  background: #F3F4F6 !important;
  border: 1px solid #eee !important;
  color: #555 !important;
  padding: 8px 12px !important;
  border-radius: 8px !important;
  font-size: 12px !important;
  font-weight: 600 !important;
  line-height: 1 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  white-space: nowrap !important;
  text-transform: uppercase !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.modal .tag-btn:hover,.modal .tag-btn.selected {
  border-color: #FFEEBE !important;
  background-color: #FFF5DC !important;
    color: #555 !important;
}


/* Modal Footer */
.modal .modal-footer {
  display: flex !important;
  justify-content: center !important;
  gap: 15px !important;
  padding: 0 32px !important;
  background: transparent !important;
  margin-top: 0 !important;
  margin-bottom: 32px;
  border: none !important;
}
.modal .modal-footer .btn{
    width: 100%;
    display: flex;
    color: #757575;
text-align: center;
font-size: 16px !important;
font-style: normal;
font-weight: 600 !important;
line-height: 16px; /* 100% */
    padding: 20px 24px !important;
justify-content: center;
align-items: center;
gap: 8px;
border-radius: 8px !important;
border: 1px solid #eee !important;
}
/* Buttons - Força estilos específicos */
.modal .btn {
  display: inline-flex !important;
  align-items: center !important;
  justify-content: center !important;
  gap: 8px !important;
  padding: 12px 24px !important;
  border-radius: 10px !important;
  font-size: 14px !important;
  font-weight: 600 !important;
  cursor: pointer !important;
  transition: all 0.2s !important;
  border: none !important;
  text-decoration: none !important;
  min-height: 44px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
  line-height: 1 !important;
}

.modal .btn i {
  font-size: 16px !important;
  width: auto !important;
  height: auto !important;
}

.modal .btn-primary {
  background: #3b82f6 !important;
  color: white !important;
  border: 1px solid #3b82f6 !important;
}

.modal .btn-primary:hover {
  background: #2563eb !important;
  border-color: #2563eb !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(59, 130, 246, 0.3) !important;
}

.modal .btn-outline {
  background: white !important;
  color: #6b7280 !important;
  border: 1.5px solid #e2e8f0 !important;
}

.modal .btn-outline:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  color: #475569 !important;
}

.modal .btn-success {
  background: #22c55e !important;
  color: white !important;
  border: 1px solid #22c55e !important;
}

.modal .btn-success:hover {
  background: #16a34a !important;
  border-color: #16a34a !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(34, 197, 94, 0.3) !important;
}

.modal .btn-warning {
  background: #f59e0b !important;
  color: white !important;
  border: 1px solid #f59e0b !important;
}

.modal .btn-warning:hover {
  background: #d97706 !important;
  border-color: #d97706 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(245, 158, 11, 0.3) !important;
}

.modal .btn-danger {
  background: #ef4444 !important;
  color: white !important;
  border: 1px solid #ef4444 !important;
}

.modal .btn-danger:hover {
  background: #dc2626 !important;
  border-color: #dc2626 !important;
  transform: translateY(-1px) !important;
  box-shadow: 0 4px 12px rgba(239, 68, 68, 0.3) !important;
}

/* Prevent body scroll when modal is open */
body.modal-open {
  overflow: hidden !important;
}

/* Confirmation Modal Styles */
.modal .confirmation-content {
  text-align: center !important;
  padding: 0 !important;
}

.modal .confirmation-icon {
  display: flex !important;
  justify-content: center !important;
  align-items: center !important;
  width: 64px !important;
  height: 64px !important;
  margin: 0 auto 20px !important;
  background: #fef3c7 !important;
  border-radius: 50% !important;
  color: #f59e0b !important;
}

.modal .confirmation-icon i {
  font-size: 28px !important;
  width: auto !important;
  height: auto !important;
}

.modal .confirmation-content p {
  font-size: 16px !important;
  color: #374151 !important;
  margin-bottom: 24px !important;
  line-height: 1.5 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Supplier Action Options */
.modal .supplier-action-options {
  display: flex !important;
  flex-direction: column !important;
  gap: 12px !important;
  margin-top: 24px !important;
}

.modal .action-option {
  text-align: center !important;
  padding: 16px !important;
  border: 1.5px solid #e2e8f0 !important;
  border-radius: 12px !important;
  transition: all 0.2s !important;
  background: white !important;
}

.modal .action-option:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
  transform: translateY(-1px) !important;
}

.modal .action-option button {
  width: 100% !important;
  margin-bottom: 8px !important;
  justify-content: center !important;
}

.modal .action-option p {
  margin: 0 !important;
  font-size: 12px !important;
  color: #6b7280 !important;
  line-height: 1.4 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

/* Settings Modal Styles */
.modal .settings-section {
  margin-bottom: 32px !important;
}

.modal .settings-section:last-child {
  margin-bottom: 0 !important;
}

.modal .settings-section h4 {
  font-size: 16px !important;
  font-weight: 600 !important;
  color: #1e293b !important;
  margin-bottom: 16px !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.modal .tags-list, 
.modal .categories-list {
  margin-bottom: 16px !important;
}

.modal .tag-item, 
.modal .category-item {
  display: flex !important;
  justify-content: space-between !important;
  align-items: center !important;
  padding: 12px 16px !important;
  border: 1px solid #e2e8f0 !important;
  border-radius: 10px !important;
  margin-bottom: 8px !important;
  background: white !important;
  transition: all 0.2s !important;
}

.modal .tag-item:hover, 
.modal .category-item:hover {
  background: #f8fafc !important;
  border-color: #cbd5e1 !important;
}

.modal .tag-item:last-child, 
.modal .category-item:last-child {
  margin-bottom: 0 !important;
}

.modal .tag-item span, 
.modal .category-item span {
  font-size: 14px !important;
  color: #374151 !important;
  font-weight: 500 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.modal .btn-sm {
  padding: 8px 16px !important;
  font-size: 12px !important;
  min-height: 32px !important;
}

/* Date Range Modal */
.modal .form-info {
  display: flex !important;
  align-items: center !important;
  gap: 8px !important;
  padding: 12px 16px !important;
  background: #f0f9ff !important;
  border-radius: 10px !important;
  margin-top: 16px !important;
}

.modal .form-info i {
  color: #0ea5e9 !important;
  font-size: 16px !important;
  flex-shrink: 0 !important;
  width: auto !important;
  height: auto !important;
}

.modal .form-info span {
  font-size: 13px !important;
  color: #0369a1 !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.modal .error-message {
  font-size: 12px !important;
  color: #ef4444 !important;
  margin-top: 4px !important;
  display: none !important;
  font-family: 'Inter', -apple-system, BlinkMacSystemFont, 'Segoe UI', Roboto, sans-serif !important;
}

.modal .error-message.show {
  display: block !important;
}

.modal .form-control.error {
  border-color: #ef4444 !important;
  box-shadow: 0 0 0 3px rgba(239, 68, 68, 0.1) !important;
}

/* Responsive Design */
@media (max-width: 640px) {
  .modal-content {
    width: 95% !important;
    max-height: 90vh !important;
    margin: 10px !important;
  }

  .modal .modal-header {
    padding: 20px 20px 0 20px !important;
    margin-bottom: 20px !important;
  }

  .modal .modal-body {
    padding: 0 20px 20px 20px !important;
  }

  .modal .modal-footer {
    padding: 16px 20px 20px 20px !important;
    flex-direction: column-reverse !important;
  }

  .modal .modal-footer .btn {
    width: 100% !important;
  }

  .modal .form-row {
    grid-template-columns: 1fr !important;
    gap: 12px !important;
  }

  .modal .supplier-action-options {
    gap: 8px !important;
  }

  .modal .action-option {
    padding: 12px !important;
  }
}