/*
 * This is a manifest file that'll be compiled into application.css.
 *
 * With Propshaft, assets are served efficiently without preprocessing steps. You can still include
 * application-wide styles in this file, but keep in mind that CSS precedence will follow the standard
 * cascading order, meaning styles declared later in the document or manifest will override earlier ones,
 * depending on specificity.
 *
 * Consider organizing styles into separate files for maintainability.
 */

@tailwind base;
@tailwind components;
@tailwind utilities;

/* Dark Mode Styles */
.dark {
  background-color: #1a202c; /* Dark background */
  color: #e2e8f0; /* Light text */
}

.dark .bg-white {
  background-color: #2d3748; /* Darker background for cards/forms */
}

.dark .text-gray-700 {
  color: #cbd5e0;
}

.dark .border-gray-300 {
  border-color: #4a5568;
}

.dark .shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(0, 0, 0, 0.5);
}

.dark .shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.5), 0 2px 4px -1px rgba(0, 0, 0, 0.5);
}

.dark .bg-gray-100 {
  background-color: #4a5568;
}

.dark .text-blue-500 {
  color: #90cdf4;
}

.dark .hover\:bg-blue-700:hover {
  background-color: #2c5282;
}

.dark .bg-indigo-600 {
  background-color: #5a67d8;
}

.dark .hover\:bg-indigo-700:hover {
  background-color: #434190;
}

.dark .bg-red-500 {
  background-color: #e53e3e;
}

.dark .hover\:bg-red-700:hover {
  background-color: #c53030;
}

.dark .bg-gray-500 {
  background-color: #718096;
}

.dark .hover\:bg-gray-700:hover {
  background-color: #4a5568;
}

details summary {
  list-style: none;
}

details summary::-webkit-details-marker {
  display: none;
}