/* Job Badge Styles - Global */

/* Base job badge styling */
.job-badge {
    display: inline-flex;
    align-items: center;
    justify-content: center;
    font-weight: 600;
    text-transform: uppercase;
    letter-spacing: 0.025em;
    transition: all 0.3s cubic-bezier(0.4, 0, 0.2, 1);
    backdrop-filter: blur(4px);
    position: relative;
    overflow: hidden;
}

.job-badge::before {
    content: '';
    position: absolute;
    inset: 0;
    background: linear-gradient(45deg, transparent, rgba(255, 255, 255, 0.1), transparent);
    opacity: 0;
    transition: opacity 0.3s ease;
}

.job-badge:hover::before {
    opacity: 1;
}

.job-badge:hover {
    transform: translateY(-1px) scale(1.02);
    filter: brightness(1.15);
}

/* Specific job type styles */

/* Trader - Green */
.job-trader {
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.2), rgba(22, 163, 74, 0.3));
    color: #4ade80;
    border-color: rgba(34, 197, 94, 0.4);
    box-shadow: 0 0 15px rgba(34, 197, 94, 0.2);
}

.job-trader:hover {
    box-shadow: 0 0 25px rgba(34, 197, 94, 0.4);
    background: linear-gradient(135deg, rgba(34, 197, 94, 0.3), rgba(22, 163, 74, 0.4));
}

/* Thief - Violet */
.job-thief {
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.2), rgba(124, 58, 237, 0.3));
    color: #a78bfa;
    border-color: rgba(139, 92, 246, 0.4);
    box-shadow: 0 0 15px rgba(139, 92, 246, 0.2);
}

.job-thief:hover {
    box-shadow: 0 0 25px rgba(139, 92, 246, 0.4);
    background: linear-gradient(135deg, rgba(139, 92, 246, 0.3), rgba(124, 58, 237, 0.4));
}

/* Hunter - Blue */
.job-hunter {
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.2), rgba(37, 99, 235, 0.3));
    color: #60a5fa;
    border-color: rgba(59, 130, 246, 0.4);
    box-shadow: 0 0 15px rgba(59, 130, 246, 0.2);
}

.job-hunter:hover {
    box-shadow: 0 0 25px rgba(59, 130, 246, 0.4);
    background: linear-gradient(135deg, rgba(59, 130, 246, 0.3), rgba(37, 99, 235, 0.4));
}

/* No Job - Gray */
.job-no-job {
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.2), rgba(75, 85, 99, 0.3));
    color: #9ca3af;
    border-color: rgba(107, 114, 128, 0.4);
    box-shadow: 0 0 15px rgba(107, 114, 128, 0.2);
}

.job-no-job:hover {
    box-shadow: 0 0 25px rgba(107, 114, 128, 0.4);
    background: linear-gradient(135deg, rgba(107, 114, 128, 0.3), rgba(75, 85, 99, 0.4));
}

/* Size variations */
.job-badge-sm {
    padding: 0.25rem 0.5rem;
    font-size: 0.75rem;
    border-radius: 9999px;
}

.job-badge-md {
    padding: 0.375rem 0.75rem;
    font-size: 0.875rem;
    border-radius: 9999px;
}

.job-badge-lg {
    padding: 0.5rem 1rem;
    font-size: 1rem;
    border-radius: 9999px;
}

/* Icon support */
.job-badge-with-icon {
    display: inline-flex;
    align-items: center;
    gap: 0.375rem;
}

.job-badge-with-icon i {
    font-size: 0.875em;
}

/* Animation for new badges */
@keyframes jobBadgeAppear {
    from {
        opacity: 0;
        transform: scale(0.8) translateY(10px);
    }
    to {
        opacity: 1;
        transform: scale(1) translateY(0);
    }
}

.job-badge-animate {
    animation: jobBadgeAppear 0.4s cubic-bezier(0.4, 0, 0.2, 1);
}

/* Responsive design */
@media (max-width: 640px) {
    .job-badge {
        font-size: 0.75rem;
        padding: 0.25rem 0.5rem;
    }

    .job-badge-lg {
        font-size: 0.875rem;
        padding: 0.375rem 0.75rem;
    }
}