/* Dark Mode Styles for Dashboard */

/* Base dark mode styles */
html.dark {
  color-scheme: dark;
}

html.dark body {
  background-color: #111827;
  color: rgba(255, 255, 255, 0.9);
}

/* Main container */
html.dark #main-content {
  background-color: #111827; 
}

/* Sidebar */
html.dark #sidebar {
  background-image: none !important;
  background-color: #1f2937 !important;
  border-color: #374151 !important;
  color: #fff;
}

/* Organizations table styling */
html.dark .rounded-2xl {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
}

html.dark .border-gray-100,
html.dark .border-gray-200 {
  border-color: #374151 !important;
}

html.dark .border-y {
  border-color: #374151 !important;
}

html.dark .divide-gray-100 > :not([hidden]) ~ :not([hidden]) {
  border-color: #374151 !important;
}

/* Text colors */
html.dark .text-gray-800,
html.dark .text-gray-900 {
  color: #ffffff !important;
}

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

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

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

html.dark .text-gray-400 {
  color: #9ca3af !important;
}

/* Status badges */
html.dark .bg-success-50 {
  background-color: rgba(16, 185, 129, 0.15) !important;
}

html.dark .bg-warning-50 {
  background-color: rgba(245, 158, 11, 0.15) !important;
}

html.dark .bg-error-50 {
  background-color: rgba(239, 68, 68, 0.15) !important;
}

html.dark .text-success-600,
html.dark .text-success-700 {
  color: #10b981 !important;
}

html.dark .text-warning-600 {
  color: #f59e0b !important;
}

html.dark .text-error-600 {
  color: #ef4444 !important;
}

/* Buttons */
html.dark .bg-white {
  background-color: #1f2937 !important;
}

/* Demo specific styles to match TailAdmin */
html.dark {
  background-color: #111827;
}

html.dark h1, 
html.dark h2, 
html.dark h3, 
html.dark h4, 
html.dark h5, 
html.dark h6 {
  color: #fff;
}

html.dark .border-gray-300 {
  border-color: #374151 !important;
}

html.dark .hover\:bg-gray-50:hover {
  background-color: rgba(255, 255, 255, 0.03) !important;
}

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

/* Fix for SVG colors */
html.dark .fill-gray-800 path {
  fill: rgba(255, 255, 255, 0.9) !important;
}

html.dark .stroke-current path {
  stroke: currentColor !important;
}

/* Organization avatars */
html.dark .bg-blue-100 {
  background-color: rgba(59, 130, 246, 0.2) !important;
}

html.dark .text-blue-600 {
  color: #60a5fa !important;
}

/* Dark mode toggle */
html.dark [data-action="click->theme#toggle"] {
  background-color: #1f2937 !important;
  border-color: #374151 !important;
}

html.dark [data-action="click->theme#toggle"]:hover {
  background-color: #374151 !important;
}

/* Alpine.js transitions */
[x-cloak] {
  display: none !important;
}