/**
 * Theme Management CSS
 * This file provides proper theme switching between light and dark modes
 * Based on Tailadmin HTML Pro v2.2 implementation
 */

/* CSS Variables for consistent theming */
:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --text-primary: #1f2937;
  --text-secondary: #374151; /* Darkened from #4b5563 for better contrast */
  --border-color: #d1d5db;  /* Darkened from #e5e7eb for better visibility */
  --sidebar-bg: #ffffff;
  --sidebar-text: #1f2937; /* Dark text for white sidebar */
  --header-bg: #ffffff;
  --card-bg: #ffffff;
  --hover-bg: #f3f4f6;
  --topbar-bg: #ffffff;
  --topbar-text: #1f2937;
}

/* Dark mode variables */
.dark {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --border-color: #334155;
  --sidebar-bg: #0f172a;
  --sidebar-text: #f1f5f9; /* Light text for dark sidebar */
  --header-bg: #0f172a;
  --card-bg: #1e293b;
  --hover-bg: #334155;
  --topbar-bg: #0f172a;
  --topbar-text: #f1f5f9;
}

/* Base styles */
body {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
  transition: background-color 0.3s ease, color 0.3s ease;
}

/* Ensure proper theme application */
.dark body {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

/* Theme toggle button styles */
.theme-toggle {
  transition: all 0.3s ease;
}

.theme-toggle:hover {
  background-color: var(--hover-bg);
}

/* Ensure theme toggle icon is always visible */
html:not(.dark) .theme-toggle {
  color: #111827 !important; /* gray-900 - dark text on light background */
}

.dark .theme-toggle {
  color: #f9fafb !important; /* gray-50 - light text on dark background */
}

/* Ensure the SVG shapes render with the intended color (no accidental white-on-white) */
.theme-toggle svg {
  color: inherit;
}

.theme-toggle svg path,
.theme-toggle svg line,
.theme-toggle svg circle {
  stroke: currentColor !important;
  fill: none;
}

/* Keep the sun's center filled (it explicitly uses fill="currentColor") */
.theme-toggle svg circle[fill="currentColor"] {
  fill: currentColor !important;
}

/* Ensure smooth transitions for all elements */
* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

/* Fix sidebar contrast issues */
.sidebar {
  background-color: var(--sidebar-bg) !important;
  color: var(--sidebar-text) !important;
}

.menu-item-inactive {
  color: var(--sidebar-text) !important;
}

.menu-item-inactive:hover {
  background-color: var(--hover-bg) !important;
  color: var(--sidebar-text) !important;
}

.menu-item-icon-inactive {
  color: var(--sidebar-text) !important;
}

/* Fix text contrast on light backgrounds */
.text-gray-400 {
  color: #9ca3af; /* Default gray-400 for dark mode */
}

/* In light mode, make gray-400 and gray-500 darker for better contrast on white backgrounds */
html:not(.dark) .text-gray-400 {
  color: #6b7280 !important; /* gray-500 equivalent for better contrast */
}

html:not(.dark) .text-gray-500 {
  color: #4b5563 !important; /* gray-600 equivalent for better contrast */
}

/* Fix input placeholders - ensure they're visible on white backgrounds */
html:not(.dark) ::placeholder {
  color: #6b7280 !important; /* gray-500 for better contrast */
  opacity: 1 !important;
}

html:not(.dark) input::placeholder,
html:not(.dark) textarea::placeholder,
html:not(.dark) select::placeholder {
  color: #6b7280 !important; /* gray-500 */
  opacity: 1 !important;
}

/* Fix disabled inputs for better contrast */
html:not(.dark) input:disabled, 
html:not(.dark) select:disabled, 
html:not(.dark) textarea:disabled {
  background-color: #f3f4f6 !important; /* gray-100 */
  color: #4b5563 !important; /* gray-600 for better contrast */
  border-color: #d1d5db !important; /* gray-300 */
  opacity: 1 !important;
}

/* Fix borders for better visibility in light mode when on white backgrounds */
html:not(.dark) .border-gray-200 {
  border-color: #d1d5db !important; /* gray-300 - darker for better visibility */
}

html:not(.dark) .border-gray-100 {
  border-color: #e5e7eb !important; /* gray-200 - darker for better visibility */
}

/* Fix icon colors that might be too light on white backgrounds */
html:not(.dark) svg.text-gray-400,
html:not(.dark) .text-gray-400 svg {
  color: #6b7280 !important; /* gray-500 */
  fill: #6b7280 !important;
}

html:not(.dark) svg.text-gray-500,
html:not(.dark) .text-gray-500 svg {
  color: #4b5563 !important; /* gray-600 */
  fill: #4b5563 !important;
}

/* Fix sidebar group titles for better visibility */
html:not(.dark) .menu-group-title,
html:not(.dark) h3.text-gray-600 {
  color: #4b5563 !important; /* gray-600 for better contrast on white */
}

/* Fix links with gray text colors */
html:not(.dark) a.text-gray-400,
html:not(.dark) a.text-gray-500 {
  color: #4b5563 !important; /* gray-600 for links - needs better contrast */
}

html:not(.dark) a.text-gray-400:hover,
html:not(.dark) a.text-gray-500:hover {
  color: #1f2937 !important; /* gray-800 for hover state */
}