[data-theme="dark"] body {
  background-color: #1a1a1a;
  color: #e5e5e5;
}

[data-theme="dark"] .container {
  background-color: #3f3f3f;
}

[data-theme="dark"] #task-input,
[data-theme="dark"] #search-input {
  background-color: #333333;
  color: #e5e5e5;
  border-color: #444444;
}

[data-theme="dark"] .task {
  border-color: #3a3a3a;
}

[data-theme="dark"] .filter-btn {
  background-color: #3a3a3a;
  color: #cccccc;
}

[data-theme="dark"] footer {
  border-top-color: #3a3a3a;
}
*{
    margin : 5px;
    padding: 0;
    box-sizing: border-box;

}
body{
    font-family: system-ui, sans-serif;      
    color: #333;
    background-color: #f5f5f5;
    padding: 40px 20px;

}
h1::before {
  content: "🌸 ";
}

[data-theme="dark"] h1::before {
  content: "🌃 ";
}
h1{
     font-size: 28px;
     margin-bottom: 20px;
}
.container {
    max-width: 500px;
    margin : 0 auto;
    background-color: rgb(216, 227, 244);
    padding: 30px;
    border-radius: 8px;
    box-shadow: 0 4px 20px rgba(0, 0, 0, 0.08);


}
#task-form {
  display: flex;
  flex-wrap: wrap;
  gap: 10px;
  margin-bottom: 20px;

}
#task-input {
  flex: 1;
  padding: 10px 12px;
  border: 1px solid #ac5656;
  border-radius: 6px;
  font-size: 15px;
}
#task-input,
#search-input{
    padding:10px 20px;
    border: 1px solid #ddd;
    border-radius: 6px;
    font-size: 15px;
}
#search-input{
    width:100%;
    margin-bottom:20px;

}
button{
    cursor: pointer;
    border:none;
    border-radius:6px;
    font-size: 15px;
    font-family: inherit;
}
button[type="submit"]{
    background-color:#2563eb;
    color:white;
    padding:10px 18px;

}
button[type="submit"]:hover {
  background-color: #1d4ed8;
}
.filters {
  display: flex;
  gap: 8px;
  margin-bottom: 20px;
  margin-top: 20px;
}

.filter-btn {
  flex: 1;
  padding: 8px;
  background-color: #f1f1f1;
  color: #555;
}

.filter-btn:hover {
  background-color: #e5e5e5;
}

.filter-btn.active {
  background-color: #2563eb;
  color: white;
}
footer {
    display: flex;
    justify-content: space-between;
    align-items: center;
    gap:10px;
    margin-top: 20px;
    padding-top: 15px;
    border-top: 1px solid #eee;
    font-size:14px;
    color: #666;
}

#clear-completed {
  background-color: #fee2e2;
  color: #b91c1c;
  padding: 6px 12px;
  font-size: 13px;
}

#clear-completed:hover {
  background-color: #fecaca;
}
#task-list{
    list-style:none;
}
.task{
    display:flex;
    align-items:center;
    gap: 10px;
    border: 1px solid #eee;
    border-radius:6px;
    margin-bottom: 8px;

}
.task-title{
    flex:1;
}
.task.completed .task-title{
    text-decoration:line-through;
    color: #999;

}
.edit-btn,
.delete-btn{
    padding: 5px 10px;
    font-size: 13px;
    background-color:#f1f1f1;
    color:#555;
}
.delete-btn:hover {
  background-color: #fee2e2;
  color: #b91c1c;
}
.task.editing {
  flex-wrap: wrap;
}

.edit-title-input {
  flex: 1 1 100%;
  padding: 6px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  font-size: 14px;
  font-family: inherit;
}

.edit-priority-select,
.edit-due-input {
  padding: 6px 8px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: white;
  font-family: inherit;
  font-size: 13px;
  color: #333;
  cursor: pointer;
}

.save-edit-btn,
.cancel-edit-btn {
  padding: 5px 10px;
  font-size: 13px;
}

.save-edit-btn {
  background-color: #dbeafe;
  color: #1d4ed8;
}

.save-edit-btn:hover {
  background-color: #bfdbfe;
}

.cancel-edit-btn {
  background-color: #f1f1f1;
  color: #555;
}

.cancel-edit-btn:hover {
  background-color: #e5e5e5;
}

[data-theme="dark"] .edit-title-input,
[data-theme="dark"] .edit-priority-select,
[data-theme="dark"] .edit-due-input {
  background-color: #333333;
  color: #e5e5e5;
  border-color: #444444;
}
.container { max-width: 500px; }
select {
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: white;
  font-family: inherit;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: border-color 0.2s;
}

select:hover {
  border-color: #bbb;
}

select:focus {
  outline: none;
  border-color: #2563eb;
}

[data-theme="dark"] select {
  background-color: #333333;
  color: #e5e5e5;
  border-color: #444444;
}
#greeting {
  font-size: 14px;
  color: #666;
  margin-bottom: 15px;
}
.due {
  font-size: 12px;
  color: #666;
  white-space: nowrap;
}

[data-theme="dark"] .due {
  color: #aaa;
}
#task-input {
  flex: 1 1 100%;
  min-width: 0;
}

#priority-select,
#due-date {
  flex: 1 1 120px;
  min-width: 0;
}

#task-form button[type="submit"] {
  flex: 0 0 auto;
}

#due-date {
  padding: 8px 10px;
  border: 1px solid #ddd;
  border-radius: 6px;
  background-color: white;
  font-family: inherit;
  font-size: 14px;
  color: #333;
  cursor: pointer;
  transition: border-color 0.2s;
}

#due-date:hover {
  border-color: #bbb;
}

#due-date:focus {
  outline: none;
  border-color: #2563eb;
}

[data-theme="dark"] #due-date {
  background-color: #333333;
  color: #e5e5e5;
  border-color: #444444;
}