/* Dark Mode Styles for FBS Algeria */

/* Base dark mode colors */
.dark {
  background-color: #1a202c;
  color: #e2e8f0;
}

.dark body {
  background-color: #1a202c;
  color: #e2e8f0;
}

/* Text colors */
.dark .text-gray-900 {
  color: #f7fafc !important;
}

.dark .text-gray-800 {
  color: #e2e8f0 !important;
}

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

.dark .text-gray-600 {
  color: #a0aec0 !important;
}

.dark .text-gray-500 {
  color: #718096 !important;
}

/* Background colors */
.dark .bg-white {
  background-color: #2d3748 !important;
}

.dark .bg-gray-50 {
  background-color: #2d3748 !important;
}

.dark .bg-gray-100 {
  background-color: #374151 !important;
}

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

/* Cards and containers */
.dark .bg-white.rounded-xl,
.dark .bg-white.rounded-lg {
  background-color: #2d3748 !important;
  border-color: #4a5568 !important;
}

/* Borders */
.dark .border-gray-200 {
  border-color: #4a5568 !important;
}

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

/* Forms */
.dark input,
.dark textarea,
.dark select {
  background-color: #374151 !important;
  border-color: #4a5568 !important;
  color: #e2e8f0 !important;
}

.dark input:focus,
.dark textarea:focus,
.dark select:focus {
  border-color: #667eea !important;
  background-color: #2d3748 !important;
}

.dark input::placeholder,
.dark textarea::placeholder {
  color: #718096 !important;
}

/* Buttons - preserve original colors but adjust for dark mode */
.dark button {
  border-color: transparent;
}

.dark .bg-teal-600 {
  background-color: #319795 !important;
}

.dark .bg-teal-700 {
  background-color: #2c7a7b !important;
}

/* Links */
.dark a {
  color: #63b3ed;
}

.dark a:hover {
  color: #4299e1;
}

/* Navigation */
.dark nav {
  background-color: #2d3748 !important;
  border-color: #4a5568 !important;
}

.dark nav a {
  color: #cbd5e0 !important;
}

.dark nav a:hover,
.dark nav a.active {
  background-color: #374151 !important;
  color: #f7fafc !important;
}

/* Header */
.dark header {
  background-color: #2d3748 !important;
  border-color: #4a5568 !important;
}

/* Modals */
.dark .modal-content {
  background-color: #2d3748 !important;
  border-color: #4a5568 !important;
}

.dark .modal-overlay {
  background-color: rgba(0, 0, 0, 0.85) !important;
}

/* Tables */
.dark table {
  color: #e2e8f0;
}

.dark th {
  background-color: #374151 !important;
  color: #e2e8f0 !important;
  border-color: #4a5568 !important;
}

.dark td {
  border-color: #4a5568 !important;
}

.dark tr:hover {
  background-color: #374151 !important;
}

/* Shadows - reduce in dark mode */
.dark .shadow-md {
  box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.dark .shadow-lg {
  box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.3), 0 4px 6px -2px rgba(0, 0, 0, 0.2);
}

.dark .shadow-xl {
  box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.3), 0 10px 10px -5px rgba(0, 0, 0, 0.2);
}

/* Dropdown menus */
.dark .dropdown-menu {
  background-color: #2d3748 !important;
  border-color: #4a5568 !important;
}

.dark .dropdown-item:hover {
  background-color: #374151 !important;
}

/* Toast notifications */
.dark .toast {
  background-color: #2d3748 !important;
  color: #e2e8f0 !important;
  border-color: #4a5568 !important;
}

/* Wallet UI specific */
.dark #wallet-page .bg-gradient-to-br {
  background: linear-gradient(to bottom right, #2c5282, #2d3748) !important;
}

/* Provider Dashboard */
.dark .order-card {
  background-color: #2d3748 !important;
  border-color: #4a5568 !important;
}

/* Maps - adjust for dark mode */
.dark .leaflet-container {
  background-color: #374151 !important;
}

.dark .leaflet-popup-content-wrapper {
  background-color: #2d3748 !important;
  color: #e2e8f0 !important;
}

.dark .leaflet-popup-tip {
  background-color: #2d3748 !important;
}

/* Scrollbar dark mode */
.dark ::-webkit-scrollbar-track {
  background: #2d3748;
}

.dark ::-webkit-scrollbar-thumb {
  background: #4a5568;
}

.dark ::-webkit-scrollbar-thumb:hover {
  background: #718096;
}

/* Status badges - keep original colors but adjust contrast */
.dark .bg-yellow-100 {
  background-color: #975A16 !important;
  color: #FEF3C7 !important;
}

.dark .bg-blue-100 {
  background-color: #1E429F !important;
  color: #DBEAFE !important;
}

.dark .bg-green-100 {
  background-color: #065F46 !important;
  color: #D1FAE5 !important;
}

.dark .bg-red-100 {
  background-color: #991B1B !important;
  color: #FEE2E2 !important;
}

/* Loading states */
.dark .skeleton {
  background: linear-gradient(90deg, #374151 25%, #4a5568 50%, #374151 75%);
  background-size: 200% 100%;
  animation: loading 1.5s ease-in-out infinite;
}

@keyframes loading {
  0% {
    background-position: 200% 0;
  }
  100% {
    background-position: -200% 0;
  }
}

/* Dark mode toggle button */
#dark-mode-toggle {
  transition: all 0.3s ease;
}

#dark-mode-toggle:hover {
  transform: scale(1.1);
}

#dark-mode-toggle:active {
  transform: scale(0.95);
}

/* RTL adjustments for dark mode toggle */
[dir="rtl"] #dark-mode-toggle {
  right: auto;
  left: 1rem;
}

/* Smooth transitions */
.dark * {
  transition: background-color 0.2s ease, color 0.2s ease, border-color 0.2s ease;
}

/* Override transitions for interactive elements */
.dark button,
.dark a,
.dark input,
.dark textarea,
.dark select {
  transition: all 0.2s ease;
}