.jobFilterCheckbox{

margin-right:10px;
width:16px;
height:16px;
cursor:pointer;

}

/* DASHBOARD TITLE */

.dashboard-title{

font-size:26px;
font-weight:700;
margin-bottom:25px;

}


/* CARDS LAYOUT */

.dashboard-cards{

display:grid;
grid-template-columns:repeat(4,1fr);
gap:22px;
margin-bottom:30px;

}


/* STAT CARDS */

.stat-card{

background:white;
border-radius:12px;
padding:24px;
box-shadow:0 4px 20px rgba(0,0,0,0.06);
transition:all .25s ease;
cursor:pointer;

}

.stat-card:hover{

transform:translateY(-5px);
box-shadow:0 8px 30px rgba(0,0,0,0.12);

}

.stat-label{

font-size:18px;
color:#050505;
font-weight:600;

}

.stat-value{

font-size:34px;
font-weight:700;
margin-top:6px;

}


/* TABLE CARD */

.dashboard-table-card{

background:white;
padding:24px;
border-radius:12px;
box-shadow:0 4px 20px rgba(0,0,0,0.06);

}

.table-header{

font-size:18px;
font-weight:600;
margin-bottom:16px;

}


/* TABLE */

.dashboard-table{

width:100%;
border-collapse:collapse;

}

.dashboard-table th{

text-align:left;
padding:14px;
font-size:14px;
background:#f3f4f6;

}

.dashboard-table td{

padding:14px;
border-bottom:1px solid #e5e7eb;

}

.dashboard-table tr:hover{

background:#f9fafb;

}


/* STATUS */

.status-active{

color:#16a34a;
font-weight:600;

}


/* BUTTONS */

.view-btn{

background:#6366f1;
color:white;
padding:6px 14px;
border-radius:6px;
font-size:13px;

}

.view-btn:hover{

background:#4f46e5;

}

.deactivate-btn{

background:#ef4444;
color:white;
padding:6px 14px;
border-radius:6px;
font-size:13px;
margin-left:6px;

}

.deactivate-btn:hover{

background:#dc2626;

}
/* GRAPH CARD */

.dashboard-graph-card{

background:white;
padding:24px;
border-radius:12px;
box-shadow:0 4px 20px rgba(0,0,0,0.06);
margin-bottom:30px;

}

.graph-title{

font-size:18px;
font-weight:600;
margin-bottom:15px;

}
.graph-container{
height:360px;
position:relative;
padding-bottom:20px;
}

.graph-container canvas{

width:100% !important;
height:100% !important;

}
.dashboard-graph-card{
height:350px;
position:relative;
}

.dashboard-graph-card canvas{
height:100% !important;
width:100% !important;
}
.dashboard-graph-card{

background:white;
padding:28px;
border-radius:14px;
box-shadow:0 6px 20px rgba(0,0,0,0.05);
margin-bottom:30px;

}

.graph-title{

font-size:18px;
font-weight:600;
color:#111827;
margin-bottom:20px;

}
.graph-container{
height:300px;
position:relative;
}

/* GLOBAL FONT */

body{
font-family: Inter, system-ui, -apple-system, sans-serif;
font-size:15px;
}

/* SIDEBAR */

.nav-btn{
display:flex;
align-items:center;
gap:12px;
width:100%;
padding:12px 14px;
border-radius:10px;
font-size:15px;
font-weight:500;
color:#e5e7eb;
transition:0.2s;
}

.nav-btn:hover{
background:#1e293b;
}

.nav-btn.active{
background:#1e293b;
}

/* SIDEBAR TITLE */

.sidebar-title{
font-size:20px;
font-weight:600;
letter-spacing:0.5px;
}

/* CARDS */

.stat-card,
.dashboard-graph-card,
.dashboard-table-card,
.bg-white{
border-radius:14px;
border:1px solid #e5e7eb;
}

/* BUTTONS */

button{
font-weight:500;
}

/* PRIMARY BUTTON */

.btn-primary{
background:#4f46e5;
color:white;
padding:8px 14px;
border-radius:8px;
}

.btn-primary:hover{
background:#4338ca;
}

/* TABLE */

table{
border-radius:10px;
overflow:hidden;
}

thead{
background:#f3f4f6;
font-size:14px;
}

th{
padding:10px;
font-weight:600;
}

td{
padding:10px;
}

/* INPUTS */

input,
select,
textarea{
border:1px solid #e5e7eb;
border-radius:8px;
padding:8px 10px;
font-size:14px;
}

/* FILTER BAR */

.filters-row input{
min-width:140px;
}

/* HOVER EFFECT */

.stat-card:hover,
.bulk-card:hover{
transform:translateY(-2px);
box-shadow:0 6px 14px rgba(0,0,0,0.08);
transition:0.2s;
}


.job-card{
background:#ffffff;
border-radius:14px;
padding:22px;
box-shadow:0 6px 18px rgba(0,0,0,0.06);
transition:0.25s;
}

.job-card:hover{
transform:translateY(-4px);
box-shadow:0 10px 24px rgba(0,0,0,0.08);
}

.job-title{
font-size:22px;
font-weight:700;
color:#111827;
margin-bottom:6px;
}

.company-name{
font-size:14px;
color:#6366f1;
margin-bottom:12px;
}

.job-info{
font-size:13px;
color:#374151;
line-height:1.7;
margin-bottom:12px;
}

.job-info span{
font-weight:600;
color:#111827;
}

.job-desc{
font-size:13px;
color:#6b7280;
line-height:1.6;
margin-bottom:18px;
}

.job-footer{
display:flex;
justify-content:space-between;
font-size:12px;
color:#6b7280;
margin-top:12px;
border-top:1px solid #f3f4f6;
padding-top:10px;
}

.edit-btn{
width:100%;
background:linear-gradient(90deg,#6366f1,#8b5cf6);
color:white;
padding:10px;
border-radius:8px;
font-size:14px;
font-weight:500;
border:none;
cursor:pointer;
transition:0.2s;
}

.edit-btn:hover{
opacity:0.9;
}

#activeJobsContainer{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:22px;
margin-top:10px;
}

/* ============================= */
/* JOB GRID */
/* ============================= */

#activeJobsContainer,
#inactiveJobsContainer{
display:grid;
grid-template-columns:repeat(auto-fill,minmax(340px,1fr));
gap:28px;
margin-top:25px;
}


/* ============================= */
/* JOB CARD */
/* ============================= */

.job-card{
background:#ffffff;
border-radius:14px;
padding:24px;
border:1px solid #e5e7eb;
box-shadow:0 4px 12px rgba(0,0,0,0.04);
transition:all 0.25s ease;
display:flex;
flex-direction:column;
justify-content:space-between;
}

.job-card:hover{
transform:translateY(-5px);
box-shadow:0 10px 25px rgba(0,0,0,0.08);
border-color:#d1d5db;
}


/* ============================= */
/* JOB FORM CARD */
/* ============================= */

.job-card{
max-width:900px;
margin:auto;
background:#ffffff;
padding:35px;
border-radius:14px;
border:1px solid #e5e7eb;
box-shadow:0 8px 25px rgba(0,0,0,0.05);
}


/* ============================= */
/* FORM GRID */
/* ============================= */

.job-form{
display:grid;
grid-template-columns:1fr 1fr;
gap:22px;
}


/* FULL WIDTH FIELD */

.form-group.full{
grid-column:1 / -1;
}


/* ============================= */
/* LABEL */
/* ============================= */

.form-group label{
display:block;
font-size:13px;
font-weight:600;
color:#374151;
margin-bottom:6px;
}


/* ============================= */
/* INPUT */
/* ============================= */

.form-group input,
.form-group select,
.form-group textarea{
width:100%;
padding:10px 12px;
border:1px solid #d1d5db;
border-radius:8px;
font-size:14px;
outline:none;
transition:0.2s;
background:#ffffff;
}


/* INPUT FOCUS */

.form-group input:focus,
.form-group select:focus,
.form-group textarea:focus{
border-color:#6366f1;
box-shadow:0 0 0 2px rgba(99,102,241,0.1);
}


/* TEXTAREA */

.form-group textarea{
min-height:140px;
resize:vertical;
}


/* ============================= */
/* FORM ACTIONS */
/* ============================= */

.form-actions{
grid-column:1 / -1;
margin-top:10px;
}


/* ============================= */
/* CREATE BUTTON */
/* ============================= */

.create-btn{
width:100%;
padding:12px;
background:linear-gradient(90deg,#6366f1,#8b5cf6);
color:white;
border:none;
border-radius:8px;
font-size:15px;
font-weight:600;
cursor:pointer;
transition:0.2s;
}

.create-btn:hover{
opacity:0.9;
}

/* ============================= */
/* JOB SECTION BACKGROUND */
/* ============================= */

.job-section-box{

background:linear-gradient(135deg,#6366f115,#8b5cf615);

border-radius:16px;

padding:30px;

margin-top:15px;

backdrop-filter:blur(10px);

border:1px solid rgba(255,255,255,0.4);

box-shadow:0 8px 25px rgba(0,0,0,0.05);

}


/* ============================= */
/* JOB GRID */
/* ============================= */

#activeJobsContainer,
#inactiveJobsContainer{

display:grid;

grid-template-columns:repeat(auto-fill,minmax(340px,1fr));

gap:24px;

}

.section-title{

text-align:center;

font-size:24px;

font-weight:700;

margin-bottom:20px;

color:#111827;

letter-spacing:0.5px;

}

.section-title::after{

content:"";

display:block;

width:60px;

height:3px;

background:linear-gradient(90deg,#6366f1,#8b5cf6);

margin:10px auto 0;

border-radius:10px;

}

.view-all-container{

display:flex;
justify-content:center;
margin-top:20px;

}

.view-all-btn{

background:linear-gradient(90deg,#6366f1,#8b5cf6);
color:white;
border:none;
padding:10px 20px;
border-radius:8px;
font-size:14px;
cursor:pointer;
transition:0.2s;

}

.view-all-btn:hover{

opacity:0.9;
transform:translateY(-2px);

}

.job-grid{
display:grid;
grid-template-columns:repeat(3,1fr);
gap:30px;
}

.view-more-wrapper{
display:flex;
justify-content:center;
margin-top:15px;
}

.view-more-btn{
width:45px;
height:45px;
border-radius:50%;
background:linear-gradient(90deg,#6366f1,#9333ea);
color:white;
font-size:20px;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
transition:0.3s;
}

.view-more-btn:hover{
transform:scale(1.1);
}

.view-more-wrapper{
display:flex;
justify-content:center;
margin-top:20px;
}

.view-more-btn{
width:50px;
height:50px;
border-radius:50%;
background:linear-gradient(135deg,#6366f1,#8b5cf6);
color:white;
font-size:22px;
border:none;
display:flex;
align-items:center;
justify-content:center;
cursor:pointer;
}

.view-more-btn{
transition: transform 0.3s ease;
}

.arrow-left{
transform: rotate(180deg);
}
.delete-btn{
background:red;
color:white;
padding:6px 10px;
border:none;
border-radius:6px;
cursor:pointer;
margin-top:8px;
}

.back-dashboard-fixed{
position:fixed;
bottom:20px;
left:20px;
z-index:9999;
}

.hidden{
display:none;
}

.inactive-card .job-content{
opacity:0.5;
}

.activate-wrapper{
margin-top:15px;
}

.activate-btn{
width:100%;
background:#22c55e;
color:white;
padding:10px;
border-radius:8px;
font-weight:600;
}

.job-card{
height:100%;
}

.job-content{
display:flex;
flex-direction:column;
height:100%;
}

.job-desc{
min-height:70px;
margin-bottom:20px;
color:#6b7280;
font-size:14px;
}

.desc-text{
display:block;
max-height:60px;
overflow:hidden;
}

.job-actions{
margin-top:auto;
margin-bottom:10px;
}