@import url('https://fonts.googleapis.com/css2?family=Inter:wght@300;400;500;600;700&display=swap');

body {
	font-family: 'Inter', sans-serif;
}


/* Loading screen */
.loading-screen {
	position: fixed;
	top: 0;
	left: 0;
	width: 100vw;
	height: 100vh;
	background-color: rgba(255, 255, 255, 0.8);
	display: flex;
	justify-content: center;
	align-items: center;
	z-index: 9999;
	transition: opacity 0.5s ease;
}

/* Custom scrollbar */
.custom-scrollbar::-webkit-scrollbar {
	width: 6px;
}

.custom-scrollbar::-webkit-scrollbar-track {
	background: #f7f7f7;
}

.custom-scrollbar::-webkit-scrollbar-thumb {
	background-color: #d1d5db;
	border-radius: 3px;
}

.custom-scrollbar::-webkit-scrollbar-thumb:hover {
	background-color: #9ca3af;
}

/* Highlight animation */
@keyframes highlight-pulse {

	0%,
	100% {
		background-color: #ffffff;
	}

	50% {
		background-color: #fff8e1;
	}
}

.highlight-project {
	animation: highlight-pulse 2s ease-in-out 3;
}

/* Star animation */
@keyframes star-pulse {
	0% {
		transform: scale(1);
	}

	50% {
		transform: scale(1.3);
	}

	100% {
		transform: scale(1);
	}
}

.star-animation {
	animation: star-pulse 0.5s ease-in-out;
}

/* Tag hover effect */
.category-tag {
	transition: all 0.2s ease;
}

.category-tag:hover {
	transform: translateY(-2px);
}

/* Mobile sidebar */
.mobile-sidebar {
	transition: transform 0.3s ease-in-out;
}

/* File type colors */
.file-pdf {
	color: #ff5252;
}

.file-zip {
	color: #ff9800;
}

.file-image {
	color: #4caf50;
}

.file-doc {
	color: #2196f3;
}

.file-default {
	color: #607d8b;
}

/* Dark mode styles */
.dark {
	/* Background colors */
	--bg-primary: #121212;
	--bg-secondary: #1e1e1e;
	--bg-tertiary: #2a2a2a;

	/* Text colors */
	--text-primary: #f3f4f6;
	--text-secondary: #d1d5db;
	--text-muted: #9ca3af;

	/* Border colors */
	--border-color: #374151;
}

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

.dark .bg-white {
	background-color: var(--bg-secondary);
}

.dark .bg-gray-50,
.dark .bg-bg-light {
	background-color: var(--bg-primary);
}

.dark .bg-gray-100 {
	background-color: var(--bg-tertiary);
}

.dark .text-gray-700,
.dark .text-gray-800 {
	color: var(--text-primary);
}

.dark .text-gray-500,
.dark .text-gray-600 {
	color: var(--text-secondary);
}

.dark .border-gray-200,
.dark .border-gray-300 {
	border-color: var(--border-color);
}

.dark .shadow-md,
.dark .shadow-lg,
.dark .shadow-sm {
	box-shadow: 0 4px 6px -1px rgba(0, 0, 0, 0.3), 0 2px 4px -1px rgba(0, 0, 0, 0.2);
}

.dark .hover\:bg-gray-100:hover {
	background-color: var(--bg-tertiary);
}

.dark .hover\:bg-gray-200:hover {
	background-color: #3a3a3a;
}

/* Dark mode for form elements */
.dark input,
.dark select,
.dark textarea {
	background-color: var(--bg-tertiary);
	border-color: var(--border-color);
	color: var(--text-primary);
}

.dark input:focus,
.dark select:focus,
.dark textarea:focus {
	border-color: var(--primary);
}

/* Dark mode for filters and sidebar */
.dark .filter-toggle {
	color: var(--text-secondary);
}

.dark aside {
	background-color: var(--bg-secondary);
}

/* Dark mode for project cards */
.dark .project-cards-container article {
	background-color: var(--bg-secondary);
	border-color: var(--border-color);
}

.dark .category-tag:not(.bg-primary) {
	background-color: var(--bg-tertiary);
	color: var(--text-secondary);
}

/* Custom scrollbar for dark mode */
.dark .custom-scrollbar::-webkit-scrollbar-track {
	background: var(--bg-tertiary);
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb {
	background-color: #4b5563;
}

.dark .custom-scrollbar::-webkit-scrollbar-thumb:hover {
	background-color: #6b7280;
}

/* Dark mode styles for the action buttons */
.dark .project-cards-container article .absolute {
	background-color: var(--bg-secondary)/80;
	backdrop-filter: blur(4px);
}

.dark .project-cards-container article .favorite-toggle-btn,
.dark .project-cards-container article .copy-link-btn,
.dark .project-cards-container article .file-dropdown button,
.dark .project-cards-container article .admin-actions button {
	color: var(--text-secondary);
}

.dark .project-cards-container article .favorite-toggle-btn:hover,
.dark .project-cards-container article .copy-link-btn:hover,
.dark .project-cards-container article .file-dropdown button:hover,
.dark .project-cards-container article .admin-actions button:hover {
	background-color: var(--bg-tertiary);
}

/* Keep specific colors for certain elements */
.dark .project-cards-container article .favorite-toggle-btn i.fa-star {
	color: #f59e0b;
	/* amber-500 - keep yellow for star */
}

.dark .project-cards-container article .file-dropdown i.file-pdf {
	color: #ef4444;
	/* red-500 */
}

.dark .project-cards-container article .file-dropdown i.file-zip {
	color: #f59e0b;
	/* amber-500 */
}

.dark .project-cards-container article .file-dropdown i.file-image {
	color: #10b981;
	/* emerald-500 */
}

.dark .project-cards-container article .file-dropdown i.file-doc {
	color: #3b82f6;
	/* blue-500 */
}

.dark .project-cards-container article .file-dropdown i.file-default {
	color: #6b7280;
	/* gray-500 */
}

.dark .project-cards-container article .admin-actions .edit-project-btn i {
	color: var(--primary);
}

.dark .project-cards-container article .admin-actions .delete-project-btn i {
	color: #ef4444;
	/* red-500 */
}

/* Dark mode for file dropdown menu */
.dark .file-dropdown .absolute {
	background-color: var(--bg-secondary);
	border-color: var(--border-color);
}

.dark .file-dropdown a:hover {
	background-color: var(--bg-tertiary);
}

/* Force the color of the modal title in dark mode */
.dark #addProjectModalLabel {
    color: #e5e7eb !important; /* Using !important to ensure override */
}

/* Force the color of the modal title in dark mode */
.dark #addProjectModalLabel {
    color: #e5e7eb !important; /* Using !important to ensure override */
}

/* Style for the Cancel button in dark mode */
.dark .close-modal {
    color: #ddd; /* Example: Tailwind gray-400 for text color in dark mode */
    /* You can add other styles here if needed, e.g., */
    background-color: #3a3a3a; /* Example: A darker background */
    /* border-color: #ff0000; */    /* Example: A darker border */
}

/* Optional: Style the hover state specifically in dark mode */
.dark .close-modal:hover {
    background-color: #4b5563; /* Example: Tailwind gray-600 for hover background */
    color: #f3f4f6; /* Example: Lighter text on hover */
}

.dark .absolute.rounded-md.shadow-lg {
    background-color: var(--bg-tertiary) !important; /* Use the dark gray hex code */
}

/* Project card highlight animation in dark mode */
@keyframes highlight-pulse-dark {

	0%,
	100% {
		background-color: var(--bg-secondary);
	}

	50% {
		background-color: #543a00;
	}

	/* Darker amber for dark mode highlight */
}

.dark .highlight-project {
	animation: highlight-pulse-dark 2s ease-in-out 3;
}