/* Modern Employee Pending Approval 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;
}

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

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

/* Status Icon - Premium Design */
.statusIconContainer {
    @apply mx-auto w-24 h-24 bg-gradient-to-br from-purple-100 to-indigo-100 
    rounded-2xl flex items-center justify-center mb-8
    transition-transform duration-300;
}

.statusIconContainer:hover {
    @apply scale-105;
}

.statusIcon {
    @apply w-12 h-12 text-purple-600;
    animation: pulse 2s cubic-bezier(0.4, 0, 0.6, 1) infinite;
}

/* Title and Subtitle - Modern Typography */
.title {
    @apply text-4xl md:text-5xl font-extrabold mb-4;
    background: linear-gradient(135deg, #1f2937 0%, #4f46e5 50%, #7c3aed 100%);
    -webkit-background-clip: text;
    -webkit-text-fill-color: transparent;
    background-clip: text;
}

.subtitle {
    @apply text-xl text-gray-600 mb-12 max-w-2xl mx-auto leading-relaxed;
}

/* Application Details - Enhanced Card */
.detailsContainer {
    @apply bg-gradient-to-r from-gray-50/80 to-purple-50/80 
    rounded-2xl p-8 mb-10 border border-gray-100
    backdrop-blur-sm;
}

.detailsTitle {
    @apply text-2xl font-bold text-gray-900 mb-8 text-center pb-4 
    border-b border-gray-200;
}

.detailsGrid {
    @apply space-y-6;
}

.detailItem {
    @apply flex items-center space-x-4 p-4 bg-white/60 rounded-xl
    border border-gray-100 transition-all duration-300;
}

.detailItem:hover {
    @apply bg-white/80;
}

.detailIcon {
    @apply w-6 h-6 text-purple-600 transition-transform duration-300;
}

.detailItem:hover .detailIcon {
    @apply text-purple-700 scale-110;
}

.detailContent {
    @apply flex flex-col flex-grow;
}

.detailLabel {
    @apply text-sm font-semibold text-gray-500 uppercase tracking-wider mb-1;
}

.detailValue {
    @apply text-lg font-medium text-gray-900;
}

/* Notice - Enhanced Alert */
.notice {
    @apply flex items-start space-x-4 bg-gradient-to-r from-yellow-50 to-amber-50 
    p-6 rounded-2xl mb-8 border border-yellow-200;
}

.noticeIcon {
    @apply w-6 h-6 text-yellow-600 mt-1;
}

.noticeText {
    @apply text-yellow-800 leading-relaxed;
}

/* Support Section - Enhanced Design */
.supportSection {
    @apply text-center border-t border-gray-200/50 pt-8 mt-8;
}

.supportText {
    @apply text-lg text-gray-600 leading-relaxed;
}

.supportLink {
    @apply text-purple-600 font-semibold
    transition-colors duration-300 underline decoration-purple-300;
}

.supportLink:hover {
    @apply text-purple-700 decoration-purple-500;
}

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

/* Animation for status icon */
@keyframes pulse {
    0%, 100% {
        opacity: 1;
    }
    50% {
        opacity: .7;
    }
}

/* 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); 
    }
}

/* Status Badge */
.statusBadge {
    @apply inline-flex items-center px-4 py-2 rounded-full text-sm font-semibold
    bg-yellow-100 text-yellow-800 mb-6;
}

/* Enhanced Focus States */
.supportLink:focus {
    @apply outline-none ring-2 ring-purple-500 ring-offset-2 rounded-lg;
}

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

    .statusCard {
        @apply p-8;
    }

    .title {
        @apply text-3xl;
    }

    .subtitle {
        @apply text-lg mb-8;
    }

    .detailsContainer {
        @apply p-6;
    }

    .detailsTitle {
        @apply text-xl;
    }

    .statusIconContainer {
        @apply w-20 h-20 mb-6;
    }

    .statusIcon {
        @apply w-10 h-10;
    }
}

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

    .navbar {
        @apply px-4;
    }

    .statusCard {
        @apply p-6;
    }

    .detailsContainer {
        @apply p-4;
    }

    .title {
        @apply text-2xl;
    }

    .detailItem {
        @apply p-3;
    }

    .statusIconContainer {
        @apply w-16 h-16 mb-4;
    }

    .statusIcon {
        @apply w-8 h-8;
    }
}