/* Reset some default styles */
*{
margin:0;
padding:0;
box-sizing:border-box;
}

/* Body and Container */
body{
font-family: 'Segoe UI', sans-serif;
background: linear-gradient(135deg,#0f172a,#1e293b,#334155);
color:white;
display:flex;
justify-content:center;
align-items:center;
min-height:100vh;
padding:20px;

transition:background 0.3s, color 0.3s;
}

.container{
width:100%;
max-width: 420px;
padding:30px;
border-radius:16px;
background:rgba(255,255,255,0.05);
backdrop-filter:blur(10px);
box-shadow:0 10px 30px rgba(0,0,0,0.4);
}

/* Header */
h1{
text-align:center;
margin-bottom:20px;
}

/* Input section*/
input,select{
padding:12px 14px;
border-radius:8px;
border:none;
background:#1e293b;
color:white;
font-size:15px;
}

.input-section{
display:grid;
grid-template-columns: 1fr 110px 130px 80px;
gap:8px;
margin-bottom:15px;
}

.input-section input,
.input-section select{
width:100%;
box-sizing:border-box;
}

input[type="date"]{
font-size:14px;
}
input[type="checkbox"]{
cursor:pointer;
transform:scale(1.2);
}

#taskInput{
font-size:16px;
}
#addTask{
width:100%;
font-weight:600;
}

.priority-high{
color:#ef4444;
font-weight:bold;
}

.priority-medium{
color:#facc15;
font-weight:bold;
}

.priority-low{
color:#22c55e;
font-weight:bold;
}

.progress-container{
margin-top:20px;
}

.progress-bar{
width:100%;
height:10px;
background:#1e293b;
border-radius:10px;
overflow:hidden;
}

.stats{
margin-top:20px;
display:flex;
justify-content:space-between;
font-size:14px;
}

#progressFill{
height:100%;
width:0%;
background:#3b82f6;
transition:0.3s;
}

/* Controls */
.controls{
margin-top:20px;
display:flex;
flex-direction:column;
gap:10px;
}

.filters{
display:flex;
gap:10px;
}

.filters button{
background:#3b82f6;
border:none;
padding:6px 10px;
border-radius:6px;
cursor:pointer;
}

#searchInput{
padding:8px;
border-radius:6px;
border:none;
}

.dark{
background:#f1f5f9;
color:#0f172a;
}

.dark .container{
background:#ffffff;
}

.dark li{
background:#e2e8f0;
}

/* select */
select{
padding:8px;
border-radius:6px;
border:none;
}

/* Button */
button{
padding:10px 14px;
border:none;
border-radius:8px;
background:linear-gradient(45deg,#3b82f6,#2563eb);
color:white;
cursor:pointer;
transition:0.2s;
}

button:hover{
transform:scale(1.05);
}
/* ul and li */
ul{
margin-top:20px;
list-style:none;
}

li{
background:rgba(255,255,255,0.08);
padding:12px;
margin-bottom:10px;
border-radius:10px;
display:flex;
align-items:center;
justify-content:space-between;
transition:0.3s;

animation:fadeIn 0.3s ease;
}
@keyframes fadeIn{
from{
opacity:0;
transform:translateY(10px);
}
to{
opacity:1;
transform:translateY(0);
}
}

li:hover{
transform: translateY(-2px);
}
/* Completed */
.completed{
text-decoration: line-through;
opacity:0.6;
}

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

.delete-btn{
    background:#ef4444;
    padding: 5px 8px;
    border-radius: 5px;
    cursor: pointer;
}

/* Responsive */
@media (max-width: 500px) {

.input-section{
grid-template-columns: 1fr;
}

}