/* Custom Tailwind CSS overrides */

:root {
  --color-primary: #059669;
  --color-secondary: #0d9488;
  --color-green-700: #047857;
}

/* Primary color classes */
.bg-primary { background-color: var(--color-primary) !important; }
.text-primary { color: var(--color-primary) !important; }
.border-primary { border-color: var(--color-primary) !important; }
.hover\:bg-primary:hover { background-color: var(--color-primary) !important; }
.hover\:text-primary:hover { color: var(--color-primary) !important; }
.hover\:border-primary:hover { border-color: var(--color-primary) !important; }

/* Secondary color classes */
.bg-secondary { background-color: var(--color-secondary) !important; }
.text-secondary { color: var(--color-secondary) !important; }
.border-secondary { border-color: var(--color-secondary) !important; }
.hover\:bg-secondary:hover { background-color: var(--color-secondary) !important; }
.hover\:text-secondary:hover { color: var(--color-secondary) !important; }
.hover\:border-secondary:hover { border-color: var(--color-secondary) !important; }

/* Green-700 classes */
.bg-green-700 { background-color: var(--color-green-700) !important; }
.hover\:bg-green-700:hover { background-color: var(--color-green-700) !important; }

/* Mobile responsiveness fixes */
@media (max-width: 640px) {
  .xs\:inline {
    display: inline !important;
  }
}

/* Fix for sidebar on mobile */
#sidebar {
  transition: transform 0.3s ease-in-out;
}

#sidebar-overlay {
  transition: opacity 0.3s ease-in-out;
}

/* Custom scrollbar styling */
/* Webkit (Chrome, Safari, Edge) */
#sidebar > div::-webkit-scrollbar {
  width: 6px;
}

#sidebar > div::-webkit-scrollbar-track {
  background: #f1f1f1;
  border-radius: 10px;
}

#sidebar > div::-webkit-scrollbar-thumb {
  background: var(--color-primary);
  border-radius: 10px;
}

#sidebar > div::-webkit-scrollbar-thumb:hover {
  background: var(--color-green-700);
}

/* Firefox */
#sidebar > div {
  scrollbar-width: thin;
  scrollbar-color: var(--color-primary) #f1f1f1;
}

/* IE and Edge */
#sidebar > div {
  -ms-overflow-style: auto;
}