/* Colori globali */
body.dark-mode {
  background-color: #121212;
  color: #e0e0e0;
}

/* Testi e titoli */
body.dark-mode h1,
body.dark-mode h2,
body.dark-mode h3,
body.dark-mode h4,
body.dark-mode label,
body.dark-mode .switch-label {
  color: #e0e0e0 !important;
}

/* Link */
body.dark-mode a {
  color: #90caf9;
}

/* Immagini */
body.dark-mode img {
  filter: brightness(0.8) contrast(1.2);
}

/* Contenitori */
body.dark-mode .container {
  background-color: #1e1e1e;
  box-shadow: 0 4px 12px rgba(0, 0, 0, 0.5);
}

/* Input e form */
body.dark-mode input,
body.dark-mode textarea,
body.dark-mode select {
  background-color: #2a2a2a;
  color: #e0e0e0;
  border: 1px solid #555;
}

/* Pulsanti generici */
body.dark-mode button {
  color: #fff;
  border: 1px solid #444;
}

/* Pulsanti speciali */
body.dark-mode button.generate {
  background-color: #2563eb;
}
body.dark-mode button.generate:hover {
  background-color: #1d4ed8;
}

body.dark-mode button.download {
  background-color: #218838;
}
body.dark-mode button.download:hover {
  background-color: #1e7e34;
}

body.dark-mode button.pdf {
  background-color: #5a6268;
}
body.dark-mode button.pdf:hover {
  background-color: #495057;
}

body.dark-mode button.remove {
  background-color: #d9534f;
}
body.dark-mode button.remove:hover {
  background-color: #c9302c;
}

body.dark-mode button.reset {
  background-color: #6c757d;
}
body.dark-mode button.reset:hover {
  background-color: #5a6268;
}

body.dark-mode .secondary-button {
  background-color: #444 !important;
  color: #fff !important;
}

/* Etichette extra */
body.dark-mode #styleLabel {
  color: #bbb;
}

/* Titoli personalizzati */
body.dark-mode #title,
body.dark-mode #pdfHeaderTitle {
  color: #e0e0e0 !important;
  background-color: #1e1e1e !important;
  border-color: #333 !important;
}

/* Elementi della lista */
body.dark-mode .entry {
  background-color: #1e1e1e !important;
  border-color: #333 !important;
}

body.dark-mode .entry .content {
  color: #e0e0e0 !important;
}

body.dark-mode .entry-buttons button {
  background-color: #333 !important;
  color: #fff !important;
}

body.dark-mode .entry-buttons .secondary-button {
  background-color: #444 !important;
  color: #fff !important;
}

/* Topbar */
body.dark-mode #topbar {
  background-color: #181818;
  color: #e0e0e0;
}

/* Footer */
body.dark-mode #customFooter {
  background-color: #181818;
  color: #e0e0e0;
}

/* Menu laterale */
body.dark-mode #sideMenu {
  background-color: #1e1e1e;
  color: #e0e0e0;
  box-shadow: 2px 0 5px rgba(0, 0, 0, 0.5);
}

/* Overlay menu */
body.dark-mode #menuOverlay {
  background-color: rgba(0, 0, 0, 0.8);
}

/* Modali */
.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;
}

/* Quando i modali sono attivi */
.modal-overlay[style*="display: flex"] {
  display: flex !important;
}

.modal-content {
  background: #fff;
  padding: 24px 16px;
  border-radius: 8px;
  min-width: 320px;
  max-width: 90vw;
  margin: auto;
  position: relative;
}

.modal-content-wide {
  background: #fff;
  padding: 24px 16px;
  border-radius: 8px;
  min-width: 420px;
  max-width: 95vw;
  margin: auto;
  position: relative;
  display: flex;
  flex-direction: column;
}

.modal-title {
  margin-top: 0;
  color: #222;
}

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

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

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

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

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

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

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

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

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

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

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

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

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

.modal-column strong {
  color: #222;
}

/* Dark mode per modali */
body.dark-mode .modal-overlay {
  background: rgba(0, 0, 0, 0.6);
}

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

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;
}