/**
 * Custom CSS for Dashboard Design
 * Most styling is handled by TailwindCSS - these are only essential overrides
 */

* {
	font-family: 'DM Sans', sans-serif;
}

/* Sidebar transition for collapse/expand */
#sidebar {
	transition: width 300ms ease-in-out;
}

/* Hide text when sidebar is collapsed */
#sidebar.collapsed .sidebar-text {
	opacity: 0;
	width: 0;
	overflow: hidden;
}

/* Center icons when collapsed */
#sidebar.collapsed .menu-item {
	justify-content: center;
	padding-left: 0;
	padding-right: 0;
}

/* Hide submenu container when collapsed */
#sidebar.collapsed .menu-item-with-submenu .submenu {
	display: none !important;
}

/* Ensure separator stays visible */
#sidebar.collapsed .border-slate-700 {
	margin-left: 0.75rem;
	margin-right: 0.75rem;
}

/* Smooth scroll behavior */
html {
	scroll-behavior: smooth;
}

/* Custom scrollbar for webkit browsers */
::-webkit-scrollbar {
	width: 8px;
	height: 8px;
}

::-webkit-scrollbar-track {
	background: #f1f1f1;
}

::-webkit-scrollbar-thumb {
	background: #cbd5e0;
	border-radius: 4px;
}

::-webkit-scrollbar-thumb:hover {
	background: #a0aec0;
}

/* Table row hover effect enhancement */
tbody tr {
	transition: background-color 150ms ease;
}

/* Modal animation */
@keyframes fadeIn {
	from {
		opacity: 0;
		transform: scale(0.95);
	}
	to {
		opacity: 1;
		transform: scale(1);
	}
}

.animate-fade-in {
	animation: fadeIn 200ms ease-out;
}

/* Primary Color Variables (Customizable) */
.bg-primary {
	background-color: var(--primary-color);
}

.bg-primary:hover {
	filter: brightness(0.9);
}

.text-primary {
	color: var(--primary-color);
}

.border-primary {
	border-color: var(--primary-color);
}

.ring-primary {
	--tw-ring-color: var(--primary-color);
}

.focus\:ring-primary:focus {
	--tw-ring-color: var(--primary-color);
}

.focus\:border-primary:focus {
	border-color: var(--primary-color);
}

/* Gradient primary (for public pages) */
.bg-gradient-primary {
	background: linear-gradient(to right, var(--primary-color), var(--primary-color));
	filter: brightness(1);
}

.bg-gradient-primary:hover {
	filter: brightness(0.92);
}