/* Custom styles for General Wingate Polytechnic College */

/* Navigation styles */
.nav-link {
    @apply px-3 py-2 text-sm font-medium text-gray-700 hover:text-blue-800 transition-colors duration-200 border-b-2 border-transparent hover:border-blue-800;
}

.nav-link.active {
    @apply text-blue-800 border-blue-800;
}

.mobile-nav-link {
    @apply block px-3 py-2 text-base font-medium text-gray-700 hover:text-blue-800 hover:bg-gray-50 transition-colors duration-200;
}

/* Admin link styling */
.admin-link {
    @apply bg-blue-800 text-white hover:bg-blue-900 px-3 py-2 rounded-lg transition-all duration-200;
}

.admin-link:hover {
    @apply text-white transform scale-105;
}

/* Hero section animations */
.hero-title {
    animation: fadeInUp 1s ease-out;
}

.hero-subtitle {
    animation: fadeInUp 1s ease-out 0.2s both;
}

.hero-buttons {
    animation: fadeInUp 1s ease-out 0.4s both;
}

@keyframes fadeInUp {
    from {
        opacity: 0;
        transform: translateY(30px);
    }
    to {
        opacity: 1;
        transform: translateY(0);
    }
}

/* Card hover effects */
.card-hover {
    @apply transition-all duration-300 hover:shadow-xl hover:-translate-y-1;
}

/* Button styles */
.btn-primary {
    @apply bg-blue-800 hover:bg-blue-900 text-white px-8 py-3 rounded-lg font-semibold transition-all duration-200 transform hover:scale-105;
}

.btn-secondary {
    @apply border-2 border-white hover:bg-white hover:text-blue-900 text-white px-8 py-3 rounded-lg font-semibold transition-all duration-200 transform hover:scale-105;
}

.btn-accent {
    @apply bg-yellow-500 hover:bg-yellow-600 text-blue-900 px-8 py-3 rounded-lg font-semibold transition-all duration-200 transform hover:scale-105;
}

.btn-admin {
    @apply bg-gray-800 hover:bg-gray-900 text-white px-8 py-3 rounded-lg font-semibold transition-all duration-200 transform hover:scale-105 border-2 border-gray-800 hover:border-gray-900;
}

/* Feature icons */
.feature-icon {
    @apply inline-flex items-center justify-center w-16 h-16 bg-blue-100 rounded-full mb-4 group-hover:bg-blue-200 transition-colors;
}

/* News card styles */
.news-card {
    @apply bg-white rounded-lg shadow-md overflow-hidden hover:shadow-lg transition-shadow duration-300;
}

/* Department card styles */
.dept-card {
    @apply bg-white rounded-lg shadow-lg overflow-hidden hover:shadow-xl transition-shadow duration-300;
}

/* Form styles */
.form-input {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors;
}

.form-textarea {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors resize-none;
}

.form-select {
    @apply w-full px-4 py-3 border border-gray-300 rounded-lg focus:ring-2 focus:ring-blue-500 focus:border-transparent transition-colors;
}

/* Admin styles */
.admin-sidebar {
    @apply bg-gray-800 text-white w-64 min-h-screen fixed left-0 top-0 transform -translate-x-full lg:translate-x-0 transition-transform duration-300 ease-in-out z-30;
}

.admin-sidebar.open {
    @apply translate-x-0;
}

.admin-nav-link {
    @apply flex items-center px-6 py-3 text-gray-300 hover:bg-gray-700 hover:text-white transition-colors duration-200;
}

.admin-nav-link.active {
    @apply bg-gray-700 text-white border-r-4 border-blue-500;
}

/* Table styles */
.admin-table {
    @apply min-w-full divide-y divide-gray-200;
}

.admin-table th {
    @apply px-6 py-3 text-left text-xs font-medium text-gray-500 uppercase tracking-wider bg-gray-50;
}

.admin-table td {
    @apply px-6 py-4 whitespace-nowrap text-sm text-gray-900;
}

/* Status badges */
.badge-success {
    @apply px-2 py-1 text-xs font-medium bg-green-100 text-green-800 rounded-full;
}

.badge-warning {
    @apply px-2 py-1 text-xs font-medium bg-yellow-100 text-yellow-800 rounded-full;
}

.badge-info {
    @apply px-2 py-1 text-xs font-medium bg-blue-100 text-blue-800 rounded-full;
}

.badge-danger {
    @apply px-2 py-1 text-xs font-medium bg-red-100 text-red-800 rounded-full;
}

/* Responsive utilities */
@media (max-width: 768px) {
    .hero-title {
        @apply text-3xl;
    }
    
    .hero-subtitle {
        @apply text-lg;
    }
}

/* Loading spinner */
.spinner {
    @apply inline-block w-4 h-4 border-2 border-gray-300 border-t-blue-600 rounded-full animate-spin;
}

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

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

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

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