/**
 * FlexJob Job List Page Styles
 * Extracted from index_list_job.jsp
 * Version: 1.0.0
 * Created: 2025-01-15
 */

/* Import Design System */
@import url('design-system.css');

/* Legacy Color Variables (for compatibility) */
:root {
    --primary-orange: var(--color-primary);
    --dark-orange: var(--color-primary-dark);
    --light-orange: var(--color-primary-light);
}

/* BASE STYLES */
body {
    font-family: var(--font-sans);
    background-color: var(--color-bg-secondary);
}

/* BUTTON STYLES */
.btn-primary {
    background-color: var(--color-primary);
    border-color: var(--color-primary);
}

.btn-primary:hover {
    background-color: var(--color-primary-dark);
    border-color: var(--color-primary-dark);
}

.text-primary {
    color: var(--color-primary) !important;
}

/* JOB TYPE BADGES */
.badge-bidding {
    background-color: #0d6efd;
}

.badge-microtask {
    background-color: var(--color-success);
}

.badge-contest {
    background-color: var(--color-error);
}

/* JOB CARD */
.job-card {
    transition: transform var(--transition-base), box-shadow var(--transition-base);
    border: none;
    height: 100%;
}

.job-card:hover {
    transform: translateY(-5px);
    box-shadow: var(--shadow-lg);
}

/* FILTER SIDEBAR */
.filter-sidebar {
    background-color: var(--color-white);
    border-radius: var(--radius-md);
    padding: var(--spacing-5);
    box-shadow: var(--shadow-sm);
    z-index: var(--z-index-sticky);
}

/* PAGE HEADER */
.page-header {
    background: linear-gradient(135deg, var(--color-primary) 0%, var(--color-primary-dark) 100%);
    color: var(--color-white);
    padding: 60px 0 40px;
    margin-bottom: 40px;
}

/* SKILL TAGS */
.skill-tag {
    background-color: var(--color-gray-200);
    padding: var(--spacing-1) var(--spacing-3);
    border-radius: var(--radius-2xl);
    font-size: var(--font-size-sm);
    display: inline-block;
    margin: var(--spacing-1);
}

/* JOB META */
.job-meta {
    font-size: var(--font-size-sm);
    color: var(--color-text-secondary);
}

/* FILTER SECTION */
.filter-section {
    margin-bottom: var(--spacing-6);
}

.filter-section h6 {
    font-weight: var(--font-weight-semibold);
    margin-bottom: var(--spacing-4);
    color: var(--color-gray-900);
}

.form-check-label {
    cursor: pointer;
}

/* CTA SECTION */
.cta-section {
    padding: 100px 0;
    background: linear-gradient(135deg, var(--color-gray-900) 0%, var(--color-gray-800) 100%);
    color: var(--color-white);
    position: relative;
    overflow: hidden;
}

.cta-section::before {
    content: '';
    position: absolute;
    top: 0;
    left: 0;
    right: 0;
    bottom: 0;
    background: radial-gradient(circle at 30% 50%, rgba(255, 102, 0, 0.2) 0%, transparent 50%);
}

/* EMPTY STATE */
.empty-state {
    text-align: center;
    padding: 60px 0;
}

.empty-state i {
    font-size: var(--font-size-5xl);
    color: var(--color-gray-300);
    margin-bottom: var(--spacing-5);
}