.job-card {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 14px;
    margin-bottom: 8px;
    transition: box-shadow 0.3s;
    box-shadow: 0 2px 3px rgba(0,0,0,0.15);
    transition: box-shadow 0.7s, transform 0.7s;
}

    /* Alternate row coloring for job cards */
    .job-card:nth-child(even) {
        background: #f7f7f7cc;
    }


    .job-card:hover {
        box-shadow: 0 4px 8px rgba(0,0,255,0.33);
        transform: translateX(7px);
        transition: box-shadow 0.7s, transform 0.7s;
    }

.edgecolor-complete {
    border-left: 5px solid green;
}

.edgecolor-in-process {
    border-left: 5px solid orange;
}

.edgecolor-waiting {
    border-left: 5px solid #6c757d;
}

.priority-high {
    color: #CA5A1A;
}

.priority-normal {
    color: #00317eAA;
}

.status-completed {
    background-color: #d4edda;
    color: #155724;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.875rem;
    padding-bottom: 2px;
}

.status-active {
    background-color: #f5d292;
    color: #004085;
    padding: 4px 8px;
    border-radius: 4px;
    font-size: 0.875rem;
    padding-bottom: 2px;
}

.filter-section {
    background: transparent;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 20px;
    margin-bottom: 20px;
    box-shadow: 0 2px 4px rgba(0,0,0,0.2);
}

.stats-box {
    background: white;
    border: 1px solid #ddd;
    border-radius: 8px;
    padding: 15px;
    text-align: center;
    margin-bottom: 15px;
}

    .stats-box h3 {
        margin: 0;
        color: #333;
    }

    .stats-box p {
        margin: 0;
        color: #666;
        font-size: 0.9rem;
    }

/* STICKY SIDEBAR STYLES */
/* For medium screens and up (tablets and desktops) */
@media (min-width: 768px) {
    .sticky-sidebar {
        position: sticky;
        top: 20px; /* Distance from top when stuck */
        height: fit-content;
    }
}

/* For small screens (mobile) - ensure normal behavior */
@media (max-width: 767px) {
    .sticky-sidebar {
        position: relative;
        top: auto;
    }
}


/* Alternative: Fixed header approach */
@media (min-width: 768px) {
    .jobs-listing-container {
        position: relative;
    }

    .jobs-header-fixed {
        position: fixed;
        top: 70px;
        /*background: #E1DED9;*/
        /*background: #9BB82A;*/
        background: #D9DDAA;
        z-index: 100;
        padding: 0.5rem 1rem;
        box-shadow: 0 2px 3px rgba(0,0,0,0.15);
        border-bottom-left-radius: 6px;
        border-bottom-right-radius: 6px;
        width: calc(75% - 2.25rem);
    }

        /* Ensure inline-block elements actually display inline */
        .jobs-header-fixed .d-inline-block {
            display: inline-block !important;
            vertical-align: middle;
        }

        .jobs-header-fixed .btn-sm {
            padding: 0.25rem 0.5rem;
        }

    .jobs-content-area {
        padding-top: 15px; /* Reduced for smaller header */
    }
}

/* For smaller screens, use the simpler approach */
@media (max-width: 767px) {
    .jobs-header-fixed {
        position: relative;
        padding: 1rem 0;
    }

    .jobs-content-area {
        padding-top: 0;
    }
}

@media (min-width: 768px) {
    .form-control-sm.d-inline-block {
        display: inline-block !important;
    }

    .vr {
        height: 20px;
        opacity: 0.3;
    }
}



/* Mobile-specific header adjustments */
@media (max-width: 767px) {
    .jobs-header-fixed {
        position: relative;
        padding: 1rem;
        background-color: white;
        border-bottom: 1px solid #ddd;
        margin-bottom: 1rem;
    }

        /* Ensure dropdowns don't get too small on mobile */
        .jobs-header-fixed .form-select {
            min-width: 0;
            font-size: 14px;
        }

    /* Reduce pagination button size on very small screens */
    @media (max-width: 400px) {
        .pagination-sm .page-link {
            padding: 0.25rem 0.4rem;
            font-size: 0.8rem;
        }
    }

    /* Optional: Hide some pagination elements on very small screens */
    @media (max-width: 360px) {
        /* Hide the first/last buttons to save space */
        .pagination .page-item:first-child,
        .pagination .page-item:last-child {
            display: none;
        }
    }
}

/* Ensure proper spacing in the flex containers */
.jobs-header-fixed .gap-2 {
    gap: 0.5rem !important;
}

/* Make sure the job count doesn't wrap awkwardly */
.jobs-header-fixed h5 {
    white-space: nowrap;
    overflow: hidden;
    text-overflow: ellipsis;
}

.bold-input {
    font-weight: 800;
}

    /* override only the placeholder to a normal weight */
    .bold-input::placeholder {
        font-weight: 400;
    }

    /* (for broader browser support, include vendor‐prefixed rules) */
    .bold-input::-webkit-input-placeholder {
        font-weight: 400;
    }

    .bold-input:-moz-placeholder {
        font-weight: 400;
        opacity: 1;
    }

    .bold-input::-moz-placeholder {
        font-weight: 400;
        opacity: 1;
    }

    .bold-input:-ms-input-placeholder {
        font-weight: 400;
    }

.cachebust {
    color: yellow;
}