/* PEF Wizard - Standalone Styles */

/* Bordi colorati per campi non compilati */
.field-empty-essential {
  border-color: #ef4444 !important; /* rosso */
  border-width: 2px !important;
}

.field-empty-optional {
  border-color: #eab308 !important; /* giallo */
  border-width: 2px !important;
}

.dark .field-empty-essential {
  border-color: #dc2626 !important; /* rosso scuro */
}

.dark .field-empty-optional {
  border-color: #ca8a04 !important; /* giallo scuro */
}

/* Dark mode support */
.dark {
  color-scheme: dark;
}

.dark body {
  background-color: #111827;
  color: #f3f4f6;
}

.dark .bg-white {
  background-color: #1f2937;
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px 0 rgba(0, 0, 0, 0.18);
}

.dark .border-b {
  border-color: #374151;
}

.dark input[type="text"],
.dark input[type="number"],
.dark input[type="date"],
.dark select,
.dark textarea {
  background-color: #1f2937;
  border-color: #374151;
  color: #f3f4f6;
}

.dark input[type="text"]:focus,
.dark input[type="number"]:focus,
.dark input[type="date"]:focus,
.dark select:focus,
.dark textarea:focus {
  border-color: #60a5fa;
  box-shadow: 0 0 0 3px rgba(96, 165, 250, 0.1);
}

.dark button {
  background-color: #374151;
  border-color: #4b5563;
  color: #f3f4f6;
}

.dark button:hover:not(:disabled) {
  background-color: #4b5563;
}

.dark .bg-gray-50 {
  background-color: #1f2937;
}

.dark .bg-gray-100 {
  background-color: #1f2937;
}

.dark .text-gray-600 {
  color: #d1d5db;
}

.dark .text-gray-500 {
  color: #9ca3af;
}

/* Assicura visibilità dei testi scuri in dark mode */
.dark .text-gray-800,
.dark .text-gray-900 {
  color: #e5e7eb !important;
}

.dark .text-gray-700 {
  color: #d1d5db !important;
}

/* Assicura visibilità dei testi neri in dark mode */
.dark .text-black {
  color: #f3f4f6 !important;
}

/* Migliora il contrasto per elementi con background chiaro in dark mode */
.dark .bg-gray-100,
.dark .bg-gray-200 {
  background-color: #374151 !important;
}

.dark .bg-gray-200 {
  background-color: #4b5563 !important;
}

/* Custom scrollbar */
.scrollbar-thin::-webkit-scrollbar {
  width: 8px;
  height: 8px;
}

.scrollbar-thin::-webkit-scrollbar-track {
  background: #f1f1f1;
}

.dark .scrollbar-thin::-webkit-scrollbar-track {
  background: #374151;
}

.scrollbar-thin::-webkit-scrollbar-thumb {
  background: #888;
  border-radius: 4px;
}

.scrollbar-thin::-webkit-scrollbar-thumb:hover {
  background: #555;
}