.hidden-child { display: none !important; }

/* Stili modali di emergenza */
.modal-overlay {
  display: none !important;
  position: fixed !important;
  top: 0 !important;
  left: 0 !important;
  width: 100vw !important;
  height: 100vh !important;
  background: rgba(0, 0, 0, 0.4) !important;
  z-index: 1000 !important;
  align-items: center !important;
  justify-content: center !important;
}

#reorderArticlesModal {
  z-index: 1001 !important;
}

.modal-overlay[style*="display: flex"] {
  display: flex !important;
}

/* Contenuto modali */
.modal-content {
  background: #fff !important;
  padding: 24px 16px !important;
  border-radius: 8px !important;
  min-width: 320px !important;
  max-width: 90vw !important;
  margin: auto !important;
  position: relative !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.modal-content-wide {
  background: #fff !important;
  padding: 24px 16px !important;
  border-radius: 8px !important;
  min-width: 420px !important;
  max-width: 95vw !important;
  margin: auto !important;
  position: relative !important;
  display: flex !important;
  flex-direction: column !important;
  box-shadow: 0 4px 20px rgba(0, 0, 0, 0.3) !important;
}

.modal-title {
  margin-top: 0 !important;
  color: #222 !important;
  font-size: 1.2em !important;
  font-weight: bold !important;
}

.modal-list {
  list-style: none !important;
  padding: 0 !important;
  margin: 0 0 16px 0 !important;
}

.modal-list-item {
  padding: 8px 12px !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  margin-bottom: 6px !important;
  background: #fafafa !important;
  cursor: grab !important;
  color: #222 !important;
}

.modal-list-item:hover {
  background: #f0f0f0 !important;
}

.modal-list-item-current {
  padding: 6px 10px !important;
  border-bottom: 1px solid #eee !important;
  color: #222 !important;
}

.modal-list-drag {
  list-style: none !important;
  padding: 0 !important;
  min-width: 160px !important;
  border: 1px solid #eee !important;
  border-radius: 4px !important;
  min-height: 40px !important;
  background: #fff !important;
}

.modal-list-drag-item {
  padding: 6px 10px !important;
  border: 1px solid #ddd !important;
  border-radius: 4px !important;
  margin-bottom: 6px !important;
  background: #fafafa !important;
  cursor: grab !important;
  color: #222 !important;
}

.modal-list-drag-item:hover {
  background: #f0f0f0 !important;
}

.modal-buttons {
  text-align: right !important;
  margin-top: 18px !important;
}

.modal-button-cancel {
  margin-right: 8px !important;
  background: #6c757d !important;
  color: #fff !important;
  border: 1px solid #6c757d !important;
  padding: 8px 16px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
}

.modal-button-save {
  background: #4CAF50 !important;
  color: #fff !important;
  border: 1px solid #4CAF50 !important;
  padding: 8px 16px !important;
  border-radius: 4px !important;
  cursor: pointer !important;
}

.modal-button-save:hover {
  background: #45a049 !important;
}

.modal-flex-container {
  display: flex !important;
  gap: 32px !important;
  justify-content: center !important;
  align-items: flex-start !important;
}

.modal-column {
  min-width: 160px !important;
}

.modal-column strong {
  color: #222 !important;
  font-weight: bold !important;
}

/* Dark mode per modali */
body.dark-mode .modal-content,
body.dark-mode .modal-content-wide {
  background: #1e1e1e !important;
  color: #e0e0e0 !important;
  border: 1px solid #333 !important;
}

body.dark-mode .modal-title {
  color: #e0e0e0 !important;
}

body.dark-mode .modal-list-item,
body.dark-mode .modal-list-drag-item {
  background: #2a2a2a !important;
  border-color: #444 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .modal-list-item:hover,
body.dark-mode .modal-list-drag-item:hover {
  background: #333 !important;
}

body.dark-mode .modal-list-item-current {
  background: transparent !important;
  border-bottom-color: #444 !important;
  color: #e0e0e0 !important;
}

body.dark-mode .modal-list-drag {
  border-color: #444 !important;
  background: #2a2a2a !important;
}

body.dark-mode .modal-button-cancel {
  background: #444 !important;
  color: #e0e0e0 !important;
  border: 1px solid #555 !important;
}

body.dark-mode .modal-button-save {
  background: #2563eb !important;
  color: #fff !important;
  border: 1px solid #2563eb !important;
}

body.dark-mode .modal-button-save:hover {
  background: #1d4ed8 !important;
}

body.dark-mode .modal-column strong {
  color: #e0e0e0 !important;
}