:root {
  --bg-primary: #ffffff;
  --bg-secondary: #f8fafc;
  --text-primary: #1f2937;
  --text-secondary: #374151; 
  --border-color: #d1d5db;  
  --sidebar-bg: #ffffff;
  --sidebar-text: #1f2937; 
  --header-bg: #ffffff;
  --card-bg: #ffffff;
  --hover-bg: #f3f4f6;
  --topbar-bg: #ffffff;
  --topbar-text: #1f2937;
}

.dark {
  --bg-primary: #0f172a;
  --bg-secondary: #1e293b;
  --text-primary: #f1f5f9;
  --text-secondary: #cbd5e1;
  --border-color: #334155;
  --sidebar-bg: #0f172a;
  --sidebar-text: #f1f5f9; 
  --header-bg: #0f172a;
  --card-bg: #1e293b;
  --hover-bg: #334155;
  --topbar-bg: #0f172a;
  --topbar-text: #f1f5f9;
}

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

.dark body {
  background-color: var(--bg-secondary);
  color: var(--text-primary);
}

.theme-toggle {
  transition: all 0.3s ease;
}

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

html:not(.dark) .theme-toggle {
  color: #111827 !important; 
}

.dark .theme-toggle {
  color: #f9fafb !important; 
}

.theme-toggle svg {
  color: inherit;
}

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

.theme-toggle svg circle[fill="currentColor"] {
  fill: currentColor !important;
}

* {
  transition: background-color 0.3s ease, color 0.3s ease, border-color 0.3s ease;
}

.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;
}

.text-gray-400 {
  color: #9ca3af; 
}

html:not(.dark) .text-gray-400 {
  color: #6b7280 !important; 
}

html:not(.dark) .text-gray-500 {
  color: #4b5563 !important; 
}

html:not(.dark) ::placeholder {
  color: #6b7280 !important; 
  opacity: 1 !important;
}

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

html:not(.dark) input:disabled, 
html:not(.dark) select:disabled, 
html:not(.dark) textarea:disabled {
  background-color: #f3f4f6 !important; 
  color: #4b5563 !important; 
  border-color: #d1d5db !important; 
  opacity: 1 !important;
}

html:not(.dark) .border-gray-200 {
  border-color: #d1d5db !important; 
}

html:not(.dark) .border-gray-100 {
  border-color: #e5e7eb !important; 
}

html:not(.dark) svg.text-gray-400,
html:not(.dark) .text-gray-400 svg {
  color: #6b7280 !important; 
  fill: #6b7280 !important;
}

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

html:not(.dark) .menu-group-title,
html:not(.dark) h3.text-gray-600 {
  color: #4b5563 !important; 
}

html:not(.dark) a.text-gray-400,
html:not(.dark) a.text-gray-500 {
  color: #4b5563 !important; 
}

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