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

.mainContainer {
    @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-6 py-4 flex justify-between items-center;
}

.logoWrapper {
    @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;
}

.homeIcon {
    @apply w-5 h-5 mr-2;
}

/* Main Container - Enhanced Layout */
.container {
    @apply max-w-4xl mx-auto p-8 py-16;
}

.header {
    @apply mb-12 text-center;
}

.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 max-w-2xl mx-auto leading-relaxed;
}

.form {
    @apply space-y-8;
}

/* Upload Area - Premium Design */
.uploadArea {
    @apply border-2 border-dashed border-gray-300 rounded-2xl p-12
    flex flex-col items-center justify-center
    transition-all duration-300 bg-white/80 backdrop-blur-sm
    hover:border-purple-400 hover:bg-purple-50/50;
}

.uploadArea.dragActive {
    @apply border-purple-500 bg-purple-50 shadow-lg;
}

.uploadArea.hasFile {
    @apply border-solid border-purple-300 bg-gradient-to-br from-purple-50 to-indigo-50
    shadow-lg;
}

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

.uploadArea:hover .uploadIcon {
    @apply text-purple-500;
}

.uploadText {
    @apply text-gray-700 text-center mb-3 text-lg font-medium;
}

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

.browseButton {
    @apply text-purple-600 font-semibold mx-1 cursor-pointer
    transition-colors duration-300;
}

.browseButton:hover {
    @apply text-purple-700;
}

.fileInput {
    @apply hidden;
}

/* File Info - Enhanced Display */
.fileInfo {
    @apply flex items-center space-x-4 w-full max-w-lg bg-white/60 
    rounded-xl p-4 border border-gray-100;
}

.fileIcon {
    @apply w-10 h-10 text-purple-600;
}

.fileName {
    @apply flex-1 text-gray-700 truncate font-medium;
}

.removeFile {
    @apply p-2 rounded-full transition-all duration-300;
}

.removeFile:hover {
    @apply bg-red-100;
}

.removeIcon {
    @apply w-5 h-5 text-gray-500 transition-colors duration-300;
}

.removeFile:hover .removeIcon {
    @apply text-red-600;
}

/* Form Fields - Modern Design */
.formFields {
    @apply space-y-6 bg-white/80 backdrop-blur-sm p-8 rounded-2xl 
    border border-gray-100 shadow-lg;
}

.formGroup {
    @apply space-y-3;
}

.label {
    @apply block text-lg font-semibold text-gray-700;
}

.inputWrapper {
    @apply relative rounded-xl;
}

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

.input {
    @apply block w-full 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 transition-all duration-300 text-lg
    bg-white/50 backdrop-blur-sm;
}

.select {
    @apply block w-full 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
    appearance-none bg-white/50 backdrop-blur-sm transition-all duration-300 text-lg;
}

.error {
    @apply text-red-500 text-sm mt-2 font-medium;
}

/* Submit Button - Premium Design */
.submitButton {
    @apply w-full flex items-center justify-center px-8 py-4 
    text-lg font-semibold rounded-xl text-white 
    bg-gradient-to-r from-purple-600 to-indigo-600
    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;
}

.buttonIcon {
    @apply -ml-1 mr-3 h-6 w-6;
}

/* Category Management - Enhanced Design */
.categoryManagement {
    @apply mt-12 p-8 bg-white/80 backdrop-blur-sm rounded-2xl 
    border border-gray-100 shadow-lg;
}

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

.addCategoryForm {
    @apply flex items-center space-x-4 mb-6;
}

.addCategoryForm input[type="text"] {
    @apply flex-1 border-2 border-gray-200 rounded-xl p-3 text-lg
    focus:outline-none focus:ring-2 focus:ring-purple-500 focus:border-purple-500
    placeholder-gray-400 transition-all duration-300 bg-white/50;
}

.addCategoryForm button[type="submit"] {
    @apply inline-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;
}

.categoryList {
    @apply space-y-3;
}

.categoryListItem {
    @apply flex items-center justify-between bg-gradient-to-r from-gray-50 to-purple-50/30 
    px-6 py-4 rounded-xl border border-gray-100 transition-all duration-300;
}

.categoryListItem:hover {
    @apply shadow-md bg-gradient-to-r from-purple-50 to-indigo-50;
}

.categoryListItem span {
    @apply text-gray-700 font-medium;
}

.removeCategoryBtn {
    @apply text-red-500 p-2 rounded-lg transition-all duration-300
    focus:outline-none focus:ring-2 focus:ring-red-300 focus:ring-offset-2;
}

.removeCategoryBtn:hover {
    @apply text-red-700 bg-red-50;
}

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

.input:hover, .select:hover {
    @apply border-purple-300 shadow-md;
}

.uploadArea:focus-within {
    @apply border-purple-500 ring-2 ring-purple-200;
}

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

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

    .title {
        @apply text-3xl;
    }

    .subtitle {
        @apply text-lg;
    }

    .uploadArea {
        @apply p-8;
    }

    .formFields {
        @apply p-6;
    }

    .categoryManagement {
        @apply p-6;
    }
}

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

    .navbar {
        @apply px-4;
    }

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

    .uploadArea {
        @apply p-6;
    }

    .formFields {
        @apply p-4;
    }

    .addCategoryForm {
        @apply flex-col space-x-0 space-y-3;
    }

    .addCategoryForm button[type="submit"] {
        @apply w-full;
    }
}
