/* Modern Employer Statistics Page - Matching Homepage Theme */

.container {
    @apply max-w-7xl mx-auto p-8 space-y-8 py-16;
}

/* Header Styles - Enhanced */
.header {
    @apply flex justify-between items-start mb-12;
}

.title {
    @apply text-4xl md:text-5xl font-extrabold;
    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 mt-3 leading-relaxed;
}

.filters {
    @apply flex space-x-6;
}

.searchWrapper {
    @apply relative;
}

.searchIcon {
    @apply absolute left-4 top-1/2 transform -translate-y-1/2 h-5 w-5 text-gray-400;
}

.searchInput {
    @apply pl-12 pr-4 py-3 border-2 border-gray-200 rounded-xl
    focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500
    placeholder-gray-400 w-72 text-lg transition-all duration-300
    bg-white/80 backdrop-blur-sm;
}

.timeframeSelect {
    @apply px-6 py-3 border-2 border-gray-200 rounded-xl
    focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500
    bg-white/80 backdrop-blur-sm text-gray-700 text-lg transition-all duration-300;
}

/* Overview Cards - Premium Design */
.overviewCards {
    @apply grid grid-cols-1 md:grid-cols-2 lg:grid-cols-4 gap-8 mb-12;
}

.card {
    @apply bg-white/80 backdrop-blur-sm rounded-2xl p-8 border border-gray-100
    shadow-lg hover:shadow-2xl transition-all duration-500
    transform hover:-translate-y-1;
}

.cardContent {
    @apply flex justify-between items-start mb-6;
}

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

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

.cardIcon {
    @apply w-12 h-12 text-purple-600 p-2 bg-gradient-to-br from-purple-100 to-indigo-100 
    rounded-xl transition-transform duration-300;
}

.card:hover .cardIcon {
    @apply scale-110;
}

.cardTrend {
    @apply flex items-center text-sm font-semibold px-3 py-1 rounded-full;
}

.cardTrend.positive {
    @apply text-green-700 bg-green-100;
}

.cardTrend.negative {
    @apply text-red-700 bg-red-100;
}

.trendIcon {
    @apply w-4 h-4 mr-2;
}

/* Chart Styles - Enhanced */
.chartCard {
    @apply bg-white/80 backdrop-blur-sm rounded-2xl p-8 border border-gray-100
    shadow-lg hover:shadow-2xl transition-all duration-500;
}

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

.chart {
    @apply h-[400px] rounded-xl;
}

/* Document List Styles - Modern Design */
.documentList {
    @apply bg-white/80 backdrop-blur-sm rounded-2xl border border-gray-100
    shadow-lg overflow-hidden;
}

.sectionTitle {
    @apply text-2xl font-bold text-gray-900 p-8 border-b border-gray-200 
    bg-gradient-to-r from-gray-50/50 to-purple-50/50;
}

.table {
    @apply divide-y divide-gray-100;
}

.tableHeader {
    @apply grid grid-cols-5 gap-6 px-8 py-5 bg-gradient-to-r from-purple-50 to-indigo-50 
    text-left text-sm font-bold text-gray-700 uppercase tracking-wider;
}

.tableRow {
    @apply grid grid-cols-5 gap-6 px-8 py-6 transition-all duration-300;
}

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

.tableCell {
    @apply text-sm text-gray-900 font-medium;
}

.documentCell {
    @apply flex items-center space-x-3;
}

.documentIcon {
    @apply w-6 h-6 text-gray-400 transition-colors duration-300;
}

.tableRow:hover .documentIcon {
    @apply text-purple-600 scale-110;
}

.trendCell {
    @apply font-semibold;
}

.trendCell.positive {
    @apply text-green-600;
}

.trendCell.negative {
    @apply text-red-600;
}

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

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

.statusBadge.inactive {
    @apply bg-gray-100 text-gray-800;
}

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

/* Enhanced Hover Effects */
.searchInput:hover, .timeframeSelect:hover {
    @apply border-purple-300 shadow-md;
}

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

/* Progress Bars */
.progressBar {
    @apply w-full bg-gray-200 rounded-full h-2 overflow-hidden;
}

.progressFill {
    @apply h-full bg-gradient-to-r from-purple-600 to-indigo-600 
    transition-all duration-500 rounded-full;
}

/* Responsive Design */
@media (max-width: 768px) {
    .container {
        @apply p-6 py-12 space-y-6;
    }

    .title {
        @apply text-3xl;
    }

    .subtitle {
        @apply text-lg;
    }

    .header {
        @apply flex-col space-y-6;
    }

    .filters {
        @apply flex-col space-y-4 space-x-0;
    }

    .searchInput {
        @apply w-full;
    }

    .timeframeSelect {
        @apply w-full;
    }

    .overviewCards {
        @apply grid-cols-1 gap-6;
    }

    .card {
        @apply p-6;
    }

    .cardValue {
        @apply text-2xl;
    }

    .chartCard {
        @apply p-6;
    }

    .chart {
        @apply h-[300px];
    }

    .tableHeader, .tableRow {
        @apply grid-cols-3 gap-4 px-6 py-4;
    }

    .tableCell:nth-child(4),
    .tableCell:nth-child(5) {
        @apply hidden;
    }

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

@media (max-width: 640px) {
    .container {
        @apply p-4 py-8;
    }

    .overviewCards {
        @apply gap-4;
    }

    .card {
        @apply p-4;
    }

    .cardValue {
        @apply text-xl;
    }

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

    .chartCard {
        @apply p-4;
    }
}