/* Modern Employee Management Page - Matching Homepage Theme */

.container {
    @apply min-h-screen bg-gradient-to-br from-slate-50 via-white to-purple-50;
}

/* Navigation - Modern Glassmorphism */
.navbar {
    @apply bg-white/80 backdrop-blur-md border-b border-gray-200/50 sticky top-0 z-50;
}

.navContent {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 h-16 flex items-center justify-between;
}

.logoContainer {
    @apply flex items-center space-x-3 cursor-pointer;
}

.logoIcon {
    @apply w-8 h-8 text-purple-600 transition-colors duration-300;
}

.logoText {
    @apply text-2xl font-bold bg-gradient-to-r from-purple-600 to-indigo-600 
    bg-clip-text text-transparent transition-all duration-300;
}

.homeButton {
    @apply flex items-center px-6 py-3 rounded-xl font-semibold
    bg-gradient-to-r from-purple-600 to-indigo-600 text-white 
    hover:from-purple-700 hover:to-indigo-700 
    shadow-lg hover:shadow-xl transition-all duration-300
    transform hover:-translate-y-0.5
    focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2;
}

/* Main Content - Enhanced Layout */
.main {
    @apply max-w-7xl mx-auto px-4 sm:px-6 lg:px-8 py-16;
}

.welcomeTitle {
    @apply text-4xl md:text-5xl font-extrabold mb-12 text-center;
    background: linear-gradient(135deg, #1f2937 0%, #4f46e5 50%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

/* Employee Sections - Premium Cards */
.employeeSection {
    @apply bg-white/80 backdrop-blur-sm rounded-2xl shadow-xl p-8 
    border border-gray-100 mb-12
    hover:shadow-2xl transition-all duration-500;
}

.sectionTitle {
    @apply text-2xl font-bold text-gray-900 mb-8 pb-4 border-b border-gray-100
    flex items-center;
}

.sectionTitle::before {
    content: "";
    @apply w-1 h-8 bg-gradient-to-b from-purple-600 to-indigo-600 rounded-full mr-4;
}

/* Table Styles - Modern Design */
.employeeTable {
    @apply w-full border-collapse rounded-xl overflow-hidden;
}

.employeeTable thead {
    @apply bg-gradient-to-r from-purple-50 to-indigo-50;
}

.employeeTable th {
    @apply px-6 py-4 text-left text-sm font-bold text-gray-700 uppercase tracking-wider
    border-b border-gray-200;
}

.employeeTable td {
    @apply px-6 py-5 whitespace-nowrap text-sm text-gray-900 border-b border-gray-100
    transition-colors duration-200;
}

.employeeTable tbody tr {
    @apply hover:bg-purple-50/50 transition-colors duration-200;
}

.employeeTable tbody tr:last-child td {
    @apply border-b-0;
}

/* Button Styles - Enhanced Design */
.approveButton {
    @apply inline-flex items-center px-4 py-2 bg-gradient-to-r from-green-100 to-green-50
    text-green-700 text-sm font-semibold rounded-xl
    hover:from-green-200 hover:to-green-100 
    shadow-md hover:shadow-lg transition-all duration-300
    transform hover:-translate-y-0.5 mr-3;
}

.removeButton {
    @apply inline-flex items-center px-4 py-2 bg-gradient-to-r from-red-100 to-red-50
    text-red-700 text-sm font-semibold rounded-xl
    hover:from-red-200 hover:to-red-100 
    shadow-md hover:shadow-lg transition-all duration-300
    transform hover:-translate-y-0.5;
}

.approveButton svg,
.removeButton svg {
    @apply mr-2 w-4 h-4;
}

/* Enhanced Status Indicators */
.statusBadge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold;
}

.statusBadge.verified {
    @apply bg-green-100 text-green-800;
}

.statusBadge.pending {
    @apply bg-yellow-100 text-yellow-800;
}

.statusBadge.rejected {
    @apply bg-red-100 text-red-800;
}

/* Empty State - Enhanced */
.employeeSection p {
    @apply text-gray-600 text-lg text-center py-12 italic;
}

.emptyState {
    @apply text-center py-16;
}

.emptyStateIcon {
    @apply w-16 h-16 text-gray-400 mx-auto mb-4;
}

.emptyStateTitle {
    @apply text-xl font-semibold text-gray-600 mb-2;
}

.emptyStateText {
    @apply text-gray-500;
}

/* Enhanced Hover Effects */
.logoContainer:hover .logoIcon {
    @apply text-purple-700 scale-110;
}

.employeeTable tbody tr:hover {
    @apply bg-gradient-to-r from-purple-50/30 to-indigo-50/30;
}

/* Animation Classes */
.fade-in {
    animation: fadeIn 0.6s ease-out;
}

.slide-up {
    animation: slideUp 0.8s ease-out;
}

@keyframes fadeIn {
    from { opacity: 0; }
    to { opacity: 1; }
}

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

/* Focus States - Enhanced */
.approveButton:focus,
.removeButton:focus {
    @apply outline-none ring-2 ring-offset-2 ring-opacity-50;
}

.approveButton:focus {
    @apply ring-green-500;
}

.removeButton:focus {
    @apply ring-red-500;
}

/* Role Badge */
.roleBadge {
    @apply inline-flex items-center px-3 py-1 rounded-full text-xs font-semibold
    bg-purple-100 text-purple-800;
}

/* Stats Cards for Employee Counts */
.statsGrid {
    @apply grid grid-cols-1 md:grid-cols-3 gap-6 mb-12;
}

.statCard {
    @apply bg-white/80 backdrop-blur-sm rounded-2xl shadow-lg p-6 
    border border-gray-100 text-center
    hover:shadow-xl transition-all duration-300;
}

.statNumber {
    @apply text-3xl font-extrabold mb-2;
    background: linear-gradient(135deg, #7c3aed 0%, #4f46e5 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.statLabel {
    @apply text-gray-600 font-medium;
}

/* Responsive Design */
@media (max-width: 768px) {
    .main {
        @apply px-4 py-12;
    }

    .welcomeTitle {
        @apply text-3xl mb-8;
    }

    .employeeSection {
        @apply p-6 mb-8;
    }

    .sectionTitle {
        @apply text-xl mb-6;
    }

    .employeeTable {
        @apply block overflow-x-auto;
    }

    .employeeTable th,
    .employeeTable td {
        @apply px-4 py-3;
    }

    .statsGrid {
        @apply grid-cols-1 gap-4;
    }
}

@media (max-width: 640px) {
    .navbar {
        @apply px-4;
    }

    .homeButton {
        @apply px-4 py-2 text-sm;
    }

    .employeeSection {
        @apply p-4;
    }

    .approveButton,
    .removeButton {
        @apply px-3 py-1 text-xs mr-2;
    }

    .employeeTable th,
    .employeeTable td {
        @apply px-3 py-2 text-xs;
    }
}
