/* Kayreal Dark Mode - Black, White & Gray Theme Override */

/* Dark mode color overrides for better black/white/gray appearance */
.dark {
  color-scheme: dark;
}

/* Background Colors - Override slate colors with true blacks/grays */
.dark .dark\:bg-slate-900 {
  background-color: #000000 !important; /* Pure black instead of slate-900 */
}

.dark .dark\:bg-slate-800 {
  background-color: #1a1a1a !important; /* Dark gray instead of slate-800 */
}

.dark .dark\:bg-slate-700 {
  background-color: #2d2d2d !important; /* Medium dark gray */
}

.dark .dark\:bg-gray-900 {
  background-color: #111111 !important; /* Very dark gray */
}

.dark .dark\:bg-gray-800 {
  background-color: #1f1f1f !important; /* Dark gray */
}

.dark .dark\:bg-gray-700 {
  background-color: #333333 !important; /* Medium gray */
}
.dark .dark\:bg-slate-button-white {
  background-color: #ffffff !important; /* White*/
  color: #000000 !important; /* White*/
}

/* Text Colors - Pure whites and light grays */
.dark .dark\:text-white {
  color: #ffffff !important; /* Pure white text */
}

.dark .dark\:text-gray-300 {
  color: #ffff !important; /* Light gray text */
}

.dark .dark\:text-gray-400 {
  color: #ffff !important; /* Medium light gray text */
}

.dark .dark\:text-gray-500 {
  color: #ffff !important; /* Medium gray text */
}

.dark .dark\:text-white\/70 {
  color: rgba(255, 255, 255, 0.7) !important; /* Semi-transparent white */
}

/* Border Colors */
.dark .dark\:border-gray-700 {
  border-color: #374151 !important; /* Dark gray borders */
}

.dark .dark\:border-gray-600 {
  border-color: #4b5563 !important; /* Medium gray borders */
}

/* Colored elements - keep some color but make them more muted in dark mode */
.dark .dark\:bg-red-900 {
  background-color: #450a0a !important; /* Dark red */
}

.dark .dark\:text-red-300 {
  color: #fca5a5 !important; /* Light red text */
}

.dark .dark\:bg-green-900 {
  background-color: #14532d !important; /* Dark green */
}

.dark .dark\:text-green-300 {
  color: #86efac !important; /* Light green text */
}

.dark .dark\:bg-blue-900 {
  background-color: #1e3a8a !important; /* Dark blue */
}

.dark .dark\:text-blue-300 {
  color: #93c5fd !important; /* Light blue text */
}

.dark .dark\:bg-purple-900 {
  background-color: #581c87 !important; /* Dark purple */
}

.dark .dark\:text-purple-300 {
  color: #d8b4fe !important; /* Light purple text */
}

/* Additional body and html overrides for complete dark theme */
.dark body {
  background-color: #000000 !important;
  color: #ffffff !important;
}

.dark html {
  background-color: #000000 !important;
}

/* Form elements in dark mode */
.dark input[type="email"],
.dark input[type="password"],
.dark input[type="text"] {
  background-color: #1a1a1a !important;
  border-color: #374151 !important;
  color: #ffffff !important;
}

.dark input[type="email"]:focus,
.dark input[type="password"]:focus,
.dark input[type="text"]:focus {
  border-color: #6b7280 !important;
  background-color: #2d2d2d !important;
}

.dark input::placeholder {
  color: #9ca3af !important;
}

/* Button styling in dark mode */
.dark button {
  border-color: #374151 !important;
}

/* Checkbox in dark mode */
.dark input[type="checkbox"] {
  background-color: #1a1a1a !important;
  border-color: #374151 !important;
}

.dark input[type="checkbox"]:checked {
  background-color: #ffffff !important;
  border-color: #ffffff !important;
}

/* Links in dark mode */
.dark a {
  color: #ffffff !important;
}

.dark a:hover {
  color: #d1d5db !important;
}

/* Shadows in dark mode - make them more subtle */
.dark .shadow {
  box-shadow: 0 1px 3px 0 rgba(255, 255, 255, 0.1), 0 1px 2px 0 rgba(255, 255, 255, 0.06) !important;
}

.dark .shadow-sm {
  box-shadow: 0 1px 2px 0 rgba(255, 255, 255, 0.05) !important;
}

.dark .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(255, 255, 255, 0.1), 0 4px 6px -2px rgba(255, 255, 255, 0.05) !important;
}

/* Ensure proper contrast for readability */
.dark .bg-white {
  background-color: #ffffff !important;
  color: #000000 !important;
}

.dark .text-gray-900 {
  color: #ffffff !important;
}

/* Override any remaining slate colors */
.dark [class*="slate-"]:not(.bg-slate-900):not(.dark\:bg-slate-800) {
  background-color: inherit !important;
}

/* Ensure buttons maintain their intended styling */
.dark .bg-slate-900 {
  background-color: #000000 !important;
  color: #ffffff !important;
}

.dark .bg-red-500:hover {
  background-color: #dc2626 !important;
}

.dark .bg-red-600 {
  background-color: #dc2626 !important;
}