:root{
--primary:#2563EB;
--bg:#F8FAFC;
--card:#FFFFFF;
--border:#E2E8F0;
--text:#64748B;
--dark:#0F172A;
--success:#16A34A;
--warning:#F59E0B;
}

*{
margin:0;
padding:0;
box-sizing:border-box;
}

body{
font-family:Inter,sans-serif;
background:var(--bg);
color:var(--dark);
}

.job_container{
max-width:1800px;
margin:auto;
padding:30px;
}

.hero{

background:
linear-gradient(
135deg,
#2563EB,
#1D4ED8
);

padding:50px;
color:white;
border-radius:32px;
display:flex;
justify-content:space-between;
gap:30px;
flex-wrap:wrap;
margin-bottom:24px;
}

.hero h1{
font-size:46px;
margin-bottom:12px;
}

.hero small{
    color:white;
}


.hero p{
max-width:720px;
line-height:1.8;
}

.hero-actions{
display:flex;
gap:12px;
flex-wrap:wrap;
height: fit-content;
}

.job_btn{
background:white;
color:#2563EB;
padding:14px 20px;
border-radius:14px;
font-weight:700;
text-decoration:none;
}

.filters{
display:grid;
grid-template-columns: repeat( auto-fit, minmax( 170px, 1fr));
gap:14px;
margin-bottom:22px;
}

.filter{
padding:18px;
background:white;
border-radius:18px;
border:1px solid var(--border);
cursor:pointer;
}

.filter.active{
background:#2563EB;
color:white;
}

.kpis{
display:grid;
grid-template-columns: repeat( 6, 1fr); 
gap:20px;
margin-bottom:24px;
}

.kpi{
background:white;
padding:24px;
border-radius:24px;
}

.kpi strong{
display:block;
font-size:34px;
color:#2563EB;
margin-bottom:8px;
}

.layout{
display:grid;
grid-template-columns: 2fr 420px; 
gap:24px;
}

.card{
background:white;
padding:28px;
border-radius:28px;
margin-bottom:24px;
}

.project{
border:1px solid var(--border);
border-radius:22px;
padding:26px;
margin-bottom:18px;
}

.project-top{
display:flex;
justify-content:space-between;
gap:20px;
flex-wrap:wrap;
margin-bottom:18px;
}

.progress{
height:14px;
background:#E2E8F0;
border-radius:999px;
overflow:hidden;
margin:18px 0;
}

.progress-fill{
height:100%;
background:
linear-gradient( 90deg, #2563EB, #60A5FA); 
}

.meta{
display:grid;
grid-template-columns: repeat( 2, 1fr); 
gap:14px;
margin-top:20px;
}

.meta-box{
background:#F8FAFC;
padding:18px;
border-radius:16px;
}

.tasks{
margin-top:20px;
display:flex;
flex-direction:column;
gap:12px;
}

.task{
display:flex;
justify-content:space-between;
gap:20px;
padding:16px;
background:#F8FAFC;
border-radius:16px;
}

.task-left{
display:flex;
gap:14px;
align-items:center;
}

.task-right{
display:flex;
gap:14px;
align-items:right;
}


.task input{
width:20px;
height:20px;
}

.jobs_toggle{
padding:6px 10px;
border-radius:999px;
background:#DBEAFE;
color:#2563EB;
font-size:12px;
font-weight:700;
}

.actions{
display:flex;
gap:10px;
margin-top:20px;
flex-wrap:wrap;
}

.action{
padding:12px 16px;
background:#2563EB;
color:white;
border-radius:12px;
text-decoration:none;
}

.side-card{
background:white;
padding:24px;
border-radius:24px;
margin-bottom:20px;
}

.health{
display:flex;
justify-content:space-between;
padding:14px 0;
border-bottom:1px solid #F1F5F9;
}

.preview{
padding:18px;
background:#F8FAFC;
border-radius:18px;
margin-top:16px;
}

@media(max-width:1400px){

.kpis{
grid-template-columns: repeat( 3, 1fr); 
}

.layout{
grid-template-columns:1fr;
}

.meta{
grid-template-columns: repeat( 2, 1fr); 
}

}

@media(max-width:768px){

.job_container{
    padding-top: 0px;
    padding-bottom: 40px;
    padding-left: 0px;
    padding-right: 0px;

}

.kpis{
grid-template-columns:1fr;
}

.meta{
#grid-template-columns:1fr;
grid-template-columns: repeat( 2, 1fr); 
}

.card{
padding-left:5px;
padding-right:5px;
}

}