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

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

/* Settings Container - Premium Card */
.settingsContainer {
    @apply max-w-2xl mx-auto mt-16 bg-white/80 backdrop-blur-sm rounded-2xl 
    shadow-xl p-10 border border-gray-100
    hover:shadow-2xl transition-all duration-500;
}

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

/* Form Elements - Modern Design */
.formGroup {
    @apply mb-6;
}

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

.input {
    @apply w-full px-4 py-3 border-2 border-gray-200 rounded-xl
    focus:border-purple-500 focus:ring-2 focus:ring-purple-200
    transition-all duration-300 hover:border-purple-300 
    bg-white/50 backdrop-blur-sm text-lg;
}

.input:focus {
    @apply outline-none shadow-lg;
}

.saveButton {
    @apply mt-8 w-full px-8 py-4 rounded-xl font-semibold text-lg
    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 disabled:opacity-50
    focus:outline-none focus:ring-2 focus:ring-purple-500 focus:ring-offset-2;
}

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

/* Modal/Popup - Enhanced Design */
.popupOverlay {
    position: fixed;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: rgba(0, 0, 0, 0.6);
    backdrop-filter: blur(8px);
    display: flex;
    justify-content: center;
    align-items: center;
    z-index: 9999;
    animation: fadeIn 0.3s ease-out;
}

.popup {
    background: white;
    padding: 32px;
    border-radius: 16px;
    max-width: 400px;
    width: 90%;
    text-align: center;
    box-shadow: 0 25px 50px -12px rgba(0, 0, 0, 0.25);
    border: 1px solid rgba(255, 255, 255, 0.2);
    animation: slideUp 0.3s ease-out;
}

.popup h3 {
    @apply text-xl font-bold text-gray-900 mb-4;
}

.popup p {
    @apply text-gray-600 mb-6 leading-relaxed;
}

.popupButton {
    @apply 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 cursor-pointer;
}

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

.input:hover {
    @apply 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); 
    }
}

/* Form Section Grouping */
.formSection {
    @apply bg-gray-50/50 rounded-xl p-6 mb-8 border border-gray-100;
}

.formSectionTitle {
    @apply text-xl font-bold text-gray-800 mb-4 pb-2 border-b border-gray-200;
}

/* Input States */
.input[readonly] {
    @apply bg-gray-100 text-gray-600 cursor-not-allowed;
}

.input:disabled {
    @apply bg-gray-100 text-gray-500 cursor-not-allowed;
}

/* Responsive Design */
@media (max-width: 768px) {
    .settingsContainer {
        @apply mt-8 mx-4 p-6;
    }

    .settingsTitle {
        @apply text-2xl;
    }

    .label {
        @apply text-base;
    }

    .input {
        @apply py-2 text-base;
    }

    .saveButton {
        @apply py-3 text-base;
    }

    .popup {
        @apply p-6 mx-4;
    }
}

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

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

    .settingsContainer {
        @apply p-4;
    }
}