body{
  margin:0;
  font-family:'Segoe UI',sans-serif;
  display:flex;
  background:#0b0f1a;
  color:#e5e7eb;
}


.sidebar{
  width:240px;
  background:#111827;
  height:100vh;
  transition:0.3s;
  display:flex;
  flex-direction:column;
  align-items:center;
}

.sidebar.collapsed{width:70px;}

.logo{
  padding:20px;
  font-weight:bold;
}

.sidebar ul{
  width:100%;
  padding:0;
}

.sidebar li{
  list-style:none;
  padding:14px 20px;
  display:flex;
  align-items:center;
  gap:12px;
  cursor:pointer;
}

.sidebar li:hover{
  background:#1f2937;
}

.sidebar.collapsed span{display:none;}


.main{
  flex:1;
  padding:20px;
  display:flex;
  flex-direction:column;
  min-height:100vh;
}


.topbar{
  display:flex;
  gap:10px;
  margin-bottom:20px;
}

.topbar input{
  flex:1;
  padding:12px;
  border-radius:8px;
  border:none;
  background:#1f2937;
  color:white;
}


section{display:none;}
section.active{display:block;}

/* charts */

.charts{
  display:flex;
  gap:20px;
}

.chart-box{
  flex:1;
  height:300px;
  padding:20px;
  border-radius:16px;
  background: rgba(255,255,255,0.05);
  backdrop-filter: blur(15px);
  border:1px solid rgba(255,255,255,0.08);
  display:flex;
  align-items:center;
  justify-content:center;
  transition:0.3s;
}

.chart-box:hover{
  transform:translateY(-5px);
}

.chart-box canvas{
  width:100% !important;
  height:100% !important;
}


.stats{
  display:flex;
  gap:20px;
}

.card{
  flex:1;
  background:#1f2937;
  padding:20px;
  border-radius:12px;
  text-align:center;
}

.chart-box{
  flex:1;
  height:320px;
  min-height:320px;
}

.chart-box canvas{
  width:100% !important;
  height:100% !important;
}

/* form */
.form input,.form select{
  padding:10px;
  margin:5px;
  border-radius:6px;
  border:none;
  background:#1f2937;
  color:white;
}

/* button */
button{
  padding:10px;
  border:none;
  border-radius:6px;
  background:#6366f1;
  color:white;
}


.kanban{
  display:flex;
  gap:15px;
  margin-top:20px;
}

.column{
  flex:1;
  background:#111827;
  padding:15px;
  border-radius:12px;}

/* filter */

.filters{
  margin:10px 0;
}
.filters button{
  margin:5px;
}

/* sort */

#sort{
  padding:10px;
  border-radius:6px;
  border:none;
  background:#1f2937;
  color:white;
}

/* light mode */

body.light{
  background:#f9fafb;
  color:black;}

body.light .sidebar{
  background:#e5e7eb;
}

body.light .card,
body.light .column,
body.light .job,
body.light .chart-box{
  background:white;
  color:black;
}

.job{
  background:#1f2937;
  padding:10px;
  margin:10px 0;
  border-radius:8px;
}

/* footer */

footer{
  margin-top:auto;
  text-align:center;
  opacity:0.6;
}