/* Careers Page Specific Styles */
.careers-hero {
    background-image: linear-gradient(rgba(3, 139, 185, 0.3), rgba(17, 107, 181, 0.3)), url('/assets/images/company/backgrounds/hero-background.png');
    background-size: cover;
    background-position: center;
    background-attachment: fixed;
}

/* Missing Tailwind Classes */
.bg-aufg-primary { background-color: #038BB9 !important; }
.bg-aufg-primary-dark { background-color: #1169B5 !important; }
.bg-aufg-primary\/10 { background-color: rgba(3, 139, 185, 0.1) !important; }
.bg-aufg-primary\/5 { background-color: rgba(3, 139, 185, 0.05) !important; }
.bg-aufg-bg-light { background-color: #F8F9FA !important; }
.text-aufg-primary { color: #038BB9 !important; }
.text-aufg-text-primary { color: #112a3b !important; }
.text-aufg-text-secondary { color: #7A7A7A !important; }
.border-aufg-primary { border-color: #038BB9 !important; }
.border-aufg-primary\/10 { border-color: rgba(3, 139, 185, 0.1) !important; }
.border-aufg-primary\/20 { border-color: rgba(3, 139, 185, 0.2) !important; }
.border-aufg-primary\/5 { border-color: rgba(3, 139, 185, 0.05) !important; }
.focus\:border-aufg-primary:focus { border-color: #038BB9 !important; }
.focus\:ring-aufg-primary\/20:focus { box-shadow: 0 0 0 3px rgba(3, 139, 185, 0.2) !important; }
.bg-aufg-gradient { background: linear-gradient(135deg, #038BB9 0%, #1169B5 100%) !important; }
.bg-gradient-to-b { background-image: linear-gradient(to bottom, var(--tw-gradient-stops)) !important; }
.from-aufg-primary { --tw-gradient-from: #038BB9; --tw-gradient-stops: var(--tw-gradient-from), var(--tw-gradient-to, rgba(3, 139, 185, 0)) !important; }
.to-aufg-primary-dark { --tw-gradient-to: #1169B5 !important; }
.animate-fade-in-up { animation: fadeInUp 0.6s ease-out; }
.animate-bounce { animation: bounce 2s infinite; }

/* Border Radius Classes */
.rounded-3xl { border-radius: 1.5rem !important; }
.rounded-2xl { border-radius: 1rem !important; }
.rounded-xl { border-radius: 0.75rem !important; }
.rounded-lg { border-radius: 0.5rem !important; }
.rounded-full { border-radius: 9999px !important; }

/* Negative Margin Classes */
.-mt-\[123px\] { margin-top: -123px !important; }
.pt-\[200px\] { padding-top: 200px !important; }
.pb-\[100px\] { padding-bottom: 100px !important; }

/* Display Classes */
.grid { display: grid !important; }
.grid-cols-1 { grid-template-columns: repeat(1, minmax(0, 1fr)) !important; }
.gap-8 { gap: 2rem !important; }
.space-y-16 > * + * { margin-top: 4rem !important; }
.space-y-6 > * + * { margin-top: 1.5rem !important; }
.flex { display: flex !important; }
.flex-col { flex-direction: column !important; }
.items-center { align-items: center !important; }
.justify-center { justify-content: center !important; }
.justify-between { justify-content: space-between !important; }
.text-center { text-align: center !important; }
.mb-16 { margin-bottom: 4rem !important; }
.mb-6 { margin-bottom: 1.5rem !important; }
.mb-4 { margin-bottom: 1rem !important; }
.mb-12 { margin-bottom: 3rem !important; }
.mt-12 { margin-top: 3rem !important; }
.py-20 { padding-top: 5rem !important; padding-bottom: 5rem !important; }
.px-4 { padding-left: 1rem !important; padding-right: 1rem !important; }
.px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
.px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
.py-2 { padding-top: 0.5rem !important; padding-bottom: 0.5rem !important; }
.py-3 { padding-top: 0.75rem !important; padding-bottom: 0.75rem !important; }
.py-4 { padding-top: 1rem !important; padding-bottom: 1rem !important; }
.p-8 { padding: 2rem !important; }
.p-6 { padding: 1.5rem !important; }
.max-w-7xl { max-width: 80rem !important; }
.max-w-4xl { max-width: 56rem !important; }
.max-w-3xl { max-width: 48rem !important; }
.mx-auto { margin-left: auto !important; margin-right: auto !important; }
.w-16 { width: 4rem !important; }
.h-16 { width: 4rem !important; }
.w-12 { width: 3rem !important; }
.h-12 { height: 3rem !important; }
.w-8 { width: 2rem !important; }
.h-8 { height: 2rem !important; }
.w-6 { width: 1.5rem !important; }
.h-6 { height: 1.5rem !important; }
.w-4 { width: 1rem !important; }
.h-4 { height: 1rem !important; }
.w-0\.5 { width: 0.125rem !important; }
.h-full { height: 100% !important; }
.transform { transform: var(--tw-transform) !important; }
.-translate-x-1\/2 { --tw-translate-x: -50% !important; transform: translateX(-50%) !important; }
.shadow-lg { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; }
.shadow-xl { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; }
.transition-all { transition-property: all !important; transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; transition-duration: 150ms !important; }
.duration-300 { transition-duration: 300ms !important; }
.hidden { display: none !important; }
.absolute { position: absolute !important; }
.relative { position: relative !important; }
.left-1\/2 { left: 50% !important; }
.bg-white { background-color: white !important; }
.inline-block { display: inline-block !important; }
.font-semibold { font-weight: 600 !important; }
.font-bold { font-weight: 700 !important; }
.text-xl { font-size: 1.25rem !important; line-height: 1.75rem !important; }
.text-4xl { font-size: 2.25rem !important; line-height: 2.5rem !important; }
.text-5xl { font-size: 3rem !important; line-height: 1 !important; }
.text-6xl { font-size: 3.75rem !important; line-height: 1 !important; }
.text-white { color: white !important; }
.leading-relaxed { line-height: 1.625 !important; }
.mr-4 { margin-right: 1rem !important; }
.text-lg { font-size: 1.125rem !important; line-height: 1.75rem !important; }
.text-2xl { font-size: 1.5rem !important; line-height: 2rem !important; }
.sm\:flex-row { flex-direction: row !important; }
.hover\:shadow-lg:hover { box-shadow: 0 10px 15px -3px rgba(0, 0, 0, 0.1), 0 4px 6px -2px rgba(0, 0, 0, 0.05) !important; }
.hover\:scale-105:hover { transform: scale(1.05) !important; }
.hover\:-translate-y-2:hover { transform: translateY(-0.5rem) !important; }
.hover\:shadow-xl:hover { box-shadow: 0 20px 25px -5px rgba(0, 0, 0, 0.1), 0 10px 10px -5px rgba(0, 0, 0, 0.04) !important; }
.border-2 { border-width: 2px !important; }
.hover\:bg-aufg-primary:hover { background-color: #038BB9 !important; }
.hover\:text-white:hover { color: white !important; }
.text-sm { font-size: 0.875rem !important; line-height: 1.25rem !important; }
.px-3 { padding-left: 0.75rem !important; padding-right: 0.75rem !important; }
.py-1 { padding-top: 0.25rem !important; padding-bottom: 0.25rem !important; }
.font-medium { font-weight: 500 !important; }
.flex-wrap { flex-wrap: wrap !important; }
.gap-2 { gap: 0.5rem !important; }
.gap-3 { gap: 0.75rem !important; }
.gap-4 { gap: 1rem !important; }
.gap-6 { gap: 1.5rem !important; }
.flex-1 { flex: 1 1 0% !important; }
.object-contain { object-fit: contain !important; }
.resize-none { resize: none !important; }
.cursor-pointer { cursor: pointer !important; }
.border-dashed { border-style: dashed !important; }
.border-gray-200 { border-color: #e5e7eb !important; }
.outline-none { outline: 2px solid transparent !important; outline-offset: 2px !important; }

/* Responsive Classes */
@media (min-width: 768px) {
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .md\:text-5xl { font-size: 3rem !important; line-height: 1 !important; }
    .md\:grid-cols-2 { grid-template-columns: repeat(2, minmax(0, 1fr)) !important; }
    .md\:p-12 { padding: 3rem !important; }
    .sm\:px-6 { padding-left: 1.5rem !important; padding-right: 1.5rem !important; }
}

@media (min-width: 1024px) {
    .lg\:text-6xl { font-size: 3.75rem !important; line-height: 1 !important; }
    .lg\:grid-cols-3 { grid-template-columns: repeat(3, minmax(0, 1fr)) !important; }
    .lg\:px-8 { padding-left: 2rem !important; padding-right: 2rem !important; }
    .lg\:block { display: block !important; }
    .lg\:space-y-24 > * + * { margin-top: 6rem !important; }
    .lg\:flex-row { flex-direction: row !important; }
    .lg\:flex-row-reverse { flex-direction: row-reverse !important; }
    .lg\:w-1\/2 { width: 50% !important; }
    .lg\:pr-12 { padding-right: 3rem !important; }
    .lg\:pl-12 { padding-left: 3rem !important; }
    .lg\:items-center { align-items: center !important; }
    .lg\:justify-between { justify-content: space-between !important; }
    .lg\:w-auto { width: auto !important; }
}

/* Hiring Process Animation Styles */
.hiring-process-step {
    opacity: 0;
    transform: translateY(50px);
    transition: all 0.8s cubic-bezier(0.4, 0, 0.2, 1);
}

.hiring-process-step.animate-in {
    opacity: 1;
    transform: translateY(0);
}

/* Staggered animation delays */
.hiring-process-step:nth-child(1) {
    transition-delay: 0.1s;
}

.hiring-process-step:nth-child(2) {
    transition-delay: 0.2s;
}

.hiring-process-step:nth-child(3) {
    transition-delay: 0.3s;
}

.hiring-process-step:nth-child(4) {
    transition-delay: 0.4s;
}

.hiring-process-step:nth-child(5) {
    transition-delay: 0.5s;
}

/* Central line animation */
.hiring-process-line {
    opacity: 0;
    transform: scaleY(0);
    transform-origin: top;
    transition: all 1.5s ease-out;
}

.hiring-process-line.animate-in {
    opacity: 1;
    transform: scaleY(1);
}

/* Step cards hover effects */
.hiring-step-card {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hiring-step-card:hover {
    transform: translateY(-8px);
    box-shadow: 0 25px 50px rgba(3, 139, 185, 0.15);
    border-color: rgba(3, 139, 185, 0.3);
    background-color: rgba(3, 139, 185, 0.02) !important;
}

/* Step icon animations */
.hiring-step-icon {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hiring-step-icon:hover {
    transform: scale(1.1) rotate(5deg);
    box-shadow: 0 10px 25px rgba(3, 139, 185, 0.3);
}

/* Number badge animations */
.hiring-step-number {
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
}

.hiring-step-card:hover .hiring-step-number {
    transform: scale(1.1);
    box-shadow: 0 5px 15px rgba(3, 139, 185, 0.3);
}

/* Pulse animation for active step */
@keyframes pulse {
    0%, 100% {
        transform: scale(1);
        box-shadow: 0 0 0 0 rgba(3, 139, 185, 0.4);
    }
    50% {
        transform: scale(1.05);
        box-shadow: 0 0 0 10px rgba(3, 139, 185, 0);
    }
}

.hiring-step-active .hiring-step-icon {
    animation: pulse 2s infinite;
}

/* Line draw animation keyframes */
@keyframes drawLine {
    from {
        transform: scaleY(0);
    }
    to {
        transform: scaleY(1);
    }
}

.hiring-process-line.draw-animation {
    animation: drawLine 2s ease-out forwards;
}

/* Alpine.js cloak directive - Make it more specific */
[x-cloak] { display: none !important; }
div[x-cloak] { display: none !important; }
#job-application-modal[x-cloak] { display: none !important; }
#toast-notification[x-cloak] { display: none !important; }

/* Ensure modal is hidden by default - only before Alpine.js takes control */
.modal-hidden { display: none !important; }

/* Modal z-index fixes */
.modal-overlay {
    z-index: 9999 !important;
}

.modal-content {
    z-index: 10000 !important;
}

/* Modal scrolling improvements */
.modal-overlay {
    overflow-y: auto;
}

.modal-content {
    margin: auto;
    display: flex;
    flex-direction: column;
}

/* Smooth scrolling for modal content */
.modal-body-scroll {
    scrollbar-width: thin;
    scrollbar-color: rgba(3, 139, 185, 0.3) transparent;
}

.modal-body-scroll::-webkit-scrollbar {
    width: 6px;
}

.modal-body-scroll::-webkit-scrollbar-track {
    background: transparent;
}

.modal-body-scroll::-webkit-scrollbar-thumb {
    background-color: rgba(3, 139, 185, 0.3);
    border-radius: 3px;
}

.modal-body-scroll::-webkit-scrollbar-thumb:hover {
    background-color: rgba(3, 139, 185, 0.5);
}

/* Remove the specific ID selectors that might conflict with Alpine.js */

@keyframes fadeInUp {
    0% { opacity: 0; transform: translateY(20px); }
    100% { opacity: 1; transform: translateY(0); }
}

@keyframes bounce {
    0%, 20%, 53%, 80%, 100% { transform: translateY(0); }
    40%, 43% { transform: translateY(-10px); }
    70% { transform: translateY(-5px); }
    90% { transform: translateY(-2px); }
}

/* Additional Admin Panel Classes */
.rotate-180 { transform: rotate(180deg) !important; }
.scale-95 { transform: scale(0.95) !important; }
.scale-100 { transform: scale(1) !important; }
.bg-indigo-50 { background-color: #eef2ff !important; }
.bg-indigo-100 { background-color: #e0e7ff !important; }
.text-indigo-700 { color: #3730a3 !important; }
.text-indigo-600 { color: #4f46e5 !important; }
.text-indigo-800 { color: #312e81 !important; }
.text-indigo-900 { color: #1e1b4b !important; }
.hover\:bg-indigo-100:hover { background-color: #e0e7ff !important; }
.hover\:text-indigo-800:hover { color: #312e81 !important; }
.hover\:text-indigo-900:hover { color: #1e1b4b !important; }
.border-indigo-300 { border-color: #a5b4fc !important; }
.border-indigo-400 { border-color: #818cf8 !important; }
.hover\:border-indigo-300:hover { border-color: #a5b4fc !important; }
.bg-blue-100 { background-color: #dbeafe !important; }
.bg-yellow-100 { background-color: #fef3c7 !important; }
.bg-green-100 { background-color: #dcfce7 !important; }
.bg-red-100 { background-color: #fee2e2 !important; }
.text-blue-600 { color: #2563eb !important; }
.text-blue-800 { color: #1e40af !important; }
.text-yellow-600 { color: #d97706 !important; }
.text-yellow-800 { color: #92400e !important; }
.text-green-600 { color: #16a34a !important; }
.text-green-800 { color: #166534 !important; }
.text-red-600 { color: #dc2626 !important; }
.text-red-800 { color: #991b1b !important; }
.bg-gray-50 { background-color: #f9fafb !important; }
.bg-gray-100 { background-color: #f3f4f6 !important; }
.bg-gray-200 { background-color: #e5e7eb !important; }
.bg-gray-300 { background-color: #d1d5db !important; }
.text-gray-400 { color: #9ca3af !important; }
.text-gray-500 { color: #6b7280 !important; }
.text-gray-600 { color: #4b5563 !important; }
.text-gray-700 { color: #374151 !important; }
.text-gray-800 { color: #1f2937 !important; }
.text-gray-900 { color: #111827 !important; }
.hover\:bg-gray-50:hover { background-color: #f9fafb !important; }
.hover\:bg-gray-100:hover { background-color: #f3f4f6 !important; }
.hover\:bg-gray-400:hover { background-color: #9ca3af !important; }
.hover\:text-gray-600:hover { color: #4b5563 !important; }
.hover\:text-gray-800:hover { color: #1f2937 !important; }
.divide-y { border-top-width: 1px !important; }
.divide-gray-200 > * + * { border-top: 1px solid #e5e7eb !important; }
.whitespace-nowrap { white-space: nowrap !important; }
.whitespace-pre-wrap { white-space: pre-wrap !important; }
.min-w-full { min-width: 100% !important; }
.fixed { position: fixed !important; }
.inset-0 { top: 0 !important; right: 0 !important; bottom: 0 !important; left: 0 !important; }
.inset-y-0 { top: 0 !important; bottom: 0 !important; }
.left-0 { left: 0 !important; }
.bottom-4 { bottom: 1rem !important; }
.right-4 { right: 1rem !important; }
.left-4 { left: 1rem !important; }
.z-40 { z-index: 40 !important; }
.z-50 { z-index: 50 !important; }
.overflow-auto { overflow: auto !important; }
.overflow-x-auto { overflow-x: auto !important; }
.overflow-y-auto { overflow-y: auto !important; }
.overflow-hidden { overflow: hidden !important; }
.translate-x-0 { transform: translateX(0) !important; }
.-translate-x-full { transform: translateX(-100%) !important; }
.translate-y-0 { transform: translateY(0) !important; }
.translate-y-2 { transform: translateY(0.5rem) !important; }
.opacity-0 { opacity: 0 !important; }
.opacity-100 { opacity: 1 !important; }
.bg-opacity-50 { background-color: rgba(0, 0, 0, 0.5) !important; }
.ease-in-out { transition-timing-function: cubic-bezier(0.4, 0, 0.2, 1) !important; }
.ease-out { transition-timing-function: cubic-bezier(0, 0, 0.2, 1) !important; }
.ease-in { transition-timing-function: cubic-bezier(0.4, 0, 1, 1) !important; }
.duration-150 { transition-duration: 150ms !important; }
.duration-200 { transition-duration: 200ms !important; }
@media (min-width: 1024px) {
    .lg\:hidden { display: none !important; }
    .lg\:pl-64 { padding-left: 16rem !important; }
    .lg\:pl-72 { padding-left: 18rem !important; }
    .lg\:ml-0 { margin-left: 0 !important; }
    .lg\:ml-64 { margin-left: 16rem !important; }
    .lg\:translate-x-0 { transform: translateX(0) !important; }
}
.space-y-1 > * + * { margin-top: 0.25rem !important; }
.uppercase { text-transform: uppercase !important; }
.tracking-wider { letter-spacing: 0.05em !important; }
.border-l-2 { border-left-width: 2px !important; }
.pl-4 { padding-left: 1rem !important; }
.ml-6 { margin-left: 1.5rem !important; }
.mt-1 { margin-top: 0.25rem !important; }
.ml-4 { margin-left: 1rem !important; }
.w-64 { width: 16rem !important; }
.max-w-2xl { max-width: 42rem !important; }
.max-h-screen { max-height: 100vh !important; }