:root{
  --primary:#1e3a8a;
  --green:#10b981;
  --red:#ef4444;
   --gray:#f3f4f6;
   --dark:#111827;
 }

  *{margin:0;
    padding:0;
    box-sizing:border-box;
    font-family: segoe UI, sans-serif;}

body{
    background: #f9fafb;
    padding:20px;}

.container{
    max-width:1200px;
    margin:auto;
}

h1{
    margin-bottom:20px;
}
/* Dashboard cards */

  .dashboard{
    display:grid;
    grid-template-columns:repeat(auto-fit,minmax(200px,1fr));
    gap:20px;
    margin-bottom:30px;
  }

.d-card{
    background:white;
    padding:20px;
    border-radius:10px;
    box-shadow:0 5px 15px rgba(0,0,0,0.05);
}

.d-card h3{
  font-size:14px;
  color:#000309;
}


.d-card p{
    font-size:26px;
    font-weight:bold;
    margin-top:10px;
}

/* section */

.section-header{
    display:flex;
    justify-content:space-between;
    align-items:center;
    margin-bottom:15px;
}

.tabs{
    margin-bottom:20px;
}

.tabs button{
    padding:8px 15px;
    border:none;
    background:#e5e7eb;
    margin-right:10px;
    border-radius:6px;
    font-weight:600;
}

.tabs button.active{
    background: var(--primary);
    color:white;
}

/* cards */

.jobs{
    display:grid;
    gap:20px;
}


.card{
    background: white;
    padding:20px;
    border-radius:10px;
   box-shadow:0 5px 15px rgba(0,0,0,0.05);
   position: relative;
}
.card h3{
  color:black;
}


 .meta{
  font-size:14px;
 margin:5px 0;
color: #6b7280;
}


.description{
 font-size:14px;
 margin:10px 0;
  color:#374151;
}

.status{
  font-size: 12px;  
  padding: 5px 10px;
  display:inline-block;
  margin-bottom:10px;
  font-weight:600;
}

.status.none{ background: #e5e7eb;}
.status.interview{ background: var(--green); color:white}
.status.rejected{ background: var(--red); color:white}

.buttons{
    margin-top: 10px;
}

.buttons button{
    padding: 6px 12px;
    cursor:pointer;
    font-weight:600;
    margin-right: 8px;
}

.interview-btn{
    background:white;
    color:var(--green);
    border: 2px solid var(--green);
}

.reject-btn{ background: white; color:var(--red);
border:2px solid var(--red)}

.delete{
    position: absolute;
    top:10px;
    right:10px;
    cursor:pointer;
    font-weight: bold;
    color:#9ca3af;
}
.delete:hover{ color:black;}

/* Empty State */

.empty{
    text-align:center;
    padding:50px;
    color:#6b7280;

}

.empty img{
    width:80px;
    margin-bottom:15px;
}



/* Responsive */
@media(max-width:600px){
  .section-header{
    flex-direction:column;
    align-items:flex-start;
    gap:10px;
  }
}