.jobs-section {
padding: 80px 0;
background: #f8fafc;
}

.jobs-header h2 {
font-size: 32px;
font-weight: 700;
margin-bottom: 10px;
}

.job-search {
display: flex;
gap: 10px;
margin: 30px 0;
}

.job-search input {
flex: 1;
padding: 15px;
border-radius: 10px;
border: 1px solid #ddd;
}

.job-search button {
background: #0d6efd;
color: #fff;
border: none;
padding: 15px 25px;
border-radius: 10px;
font-weight: 600;
}

/* FILTERS */
.job-filters {
display: flex;
justify-content: space-between;
align-items: center;
flex-wrap: wrap;
gap: 10px;
margin-bottom: 20px;
}

.filter {
padding: 8px 15px;
border-radius: 20px;
background: #eaeaea;
cursor: pointer;
}

.filter.active {
background: #0d6efd;
color: white;
}

.jobs-table-wrapper {
overflow-x: auto;
background: white;
border-radius: 12px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.jobs-table {
width: 100%;
border-collapse: collapse;
min-width: 700px;
}

.jobs-table thead {
background: #f1f5f9;
}

.jobs-table th {
text-align: left;
padding: 15px;
font-weight: 600;
}

.jobs-table td {
padding: 15px;
border-bottom: 1px solid #eee;
}

.jobs-table tr:hover {
background: #f9fbff;
cursor: pointer;
}

.jobs-table h4 {
margin: 0;
font-size: 15px;
font-weight: 600;
}

.ref {
font-size: 12px;
color: #888;
}

/* STATUS COLORS */
tr[data-status="active"] {
border-left: 4px solid #22c55e;
}

tr[data-status="recent"] {
border-left: 4px solid #f59e0b;
}

tr[data-status="expired"] {
border-left: 4px solid #ef4444;
}

/* MOBILE */
@media(max-width:768px){

.jobs-table thead {
display: none;
}

.jobs-table tr {
display: block;
margin-bottom: 15px;
border: 1px solid #eee;
border-radius: 10px;
}

.jobs-table td {
display: flex;
/* justify-content: space-between; */
padding: 10px;
}

.jobs-table td::before {
content: attr(data-label);
font-weight: 600;
}

}

.clickable-row {
cursor: pointer;
transition: 0.2s;
}

.clickable-row:hover {
background: #f1f5ff;
transform: scale(1.01);
}

/* Job offers detail */
.job-details-section {
padding: 60px 0;
background: #f8fafc;
}

.job-banner img {
border-radius: 12px;
margin-bottom: 20px;
}

.job-header h1 {
font-size: 28px;
font-weight: 700;
margin-bottom: 15px;
}

.job-meta {
display: flex;
flex-wrap: wrap;
gap: 15px;
font-size: 14px;
color: #666;
}

.deadline {
color: #dc3545;
font-weight: 600;
}

.job-content {
background: white;
padding: 25px;
border-radius: 12px;
margin-top: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.job-content h3 {
margin-bottom: 15px;
}

.job-gallery img {
border-radius: 10px;
}

/* SIDEBAR */
.job-sidebar {
position: sticky;
top: 20px;
}

.sidebar-card {
background: white;
padding: 20px;
border-radius: 12px;
margin-bottom: 20px;
box-shadow: 0 10px 30px rgba(0,0,0,0.05);
}

.apply-card {
text-align: center;
}

.sidebar-card ul {
padding-left: 0;
list-style: none;
}

.sidebar-card ul li {
margin-bottom: 10px;
font-size: 14px;
}

/* MOBILE */
@media(max-width:768px){
.job-meta {
flex-direction: column;
}
}