/* Dark mode styles */
.dark body {
  background-color: var(--bg);
  color: var(--text-primary);
}

.dark .bg-white {
  background-color: var(--surface) !important;
}

.dark .text-black,
.dark .text-black\/80,
.dark .text-black\/90 {
  color: var(--text-primary) !important;
}
.dark .text-black\/60,
.dark .text-black\/70 {
  color: var(--text-secondary) !important;
}
.dark .text-black\/40,
.dark .text-black\/50 {
  color: var(--text-muted) !important;
}

.dark .border-black\/10,
.dark .border-black\/5{
  border-color: var(--border) !important;
}
.dark .divide-black\/10 > :not(:last-child) {
  border-color: var(--border) !important;
}

.dark .hover\:bg-black\/5:hover {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.dark .bg-black\/5 {
  background-color: rgba(255, 255, 255, 0.1) !important;
}

.dark .shadow {
  box-shadow: 0 1px 3px 0 rgba(0, 0, 0, 0.3), 0 1px 2px -1px rgba(0, 0, 0, 0.3) !important;
}

/* Dark mode for form inputs */
.dark input,
.dark select,
.dark textarea {
  background-color: var(--surface) !important;
  color: var(--text-primary) !important;
  border-color: var(--border) !important;
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
  border-color: var(--accent) !important;
}

/* Dark mode for dropdowns and menus */
.dark details > div {
  background-color: var(--surface) !important;
  border-color: var(--border) !important;
}

/* Date picker calendar icon in dark mode */
.dark input[type="date"]::-webkit-calendar-picker-indicator {
  filter: invert(1);
  cursor: pointer;
}

.dark input[type="date"]::-webkit-datetime-edit-fields-wrapper {
  color: var(--text-primary) !important;
}

.dark input[type="date"]::-webkit-datetime-edit-text {
  color: var(--text-secondary) !important;
}

.dark input[type="date"]::-webkit-datetime-edit-month-field,
.dark input[type="date"]::-webkit-datetime-edit-day-field,
.dark input[type="date"]::-webkit-datetime-edit-year-field {
  color: var(--text-primary) !important;
}