/* Basic Styling */
body {
  font-family: 'Segoe UI', Tahoma, Geneva, Verdana, sans-serif; /* Set the font for the entire page */
  background-color: #f0f0f0; /* Light gray background */
  color: #333; /* Dark gray text color */
  display: flex; /* Use flexbox for layout */
  justify-content: center; /* Center content horizontally */
  align-items: center; /* Center content vertically */
  min-height: 100vh; /* Make the body take up the full viewport height */
  margin: 0; /* Remove default browser margins */
}

/* Container */
.container {
  background-color: #fff; /* White background */
  border-radius: 10px; /* Rounded corners */
  box-shadow: 0 2px 5px rgba(0, 0, 0, 0.1); /* Subtle shadow */
  padding: 30px; /* Padding around the content */
  max-width: 600px; /* Maximum width of the container */
  width: 100%; /* Take up full width of the parent element */
}

h1 {
  text-align: center; /* Center the heading text */
  color: #333; /* Dark gray color for the heading */
  margin-bottom: 20px; /* Margin below the heading */
}

/* Form Styling */
#form {
  display: flex; /* Use flexbox for form layout */
  flex-direction: column; /* Arrange form elements vertically */
}

.input-group {
  margin-bottom: 15px; /* Margin below each input group */
}

label {
  display: block; /* Make labels occupy the full width */
  margin-bottom: 5px; /* Margin below each label */
  font-weight: bold;
}

input[type="text"],
input[type="radio"] {
  padding: 10px; /* Padding inside the input field */
  border: 1px solid #ddd; /* Light gray border */
  border-radius: 5px; /* Rounded corners */
  box-sizing: border-box; /* Include padding and border in the width */
  margin-bottom: 10px;
}

/* Button Styling */
button {
  background-color: #007bff; /* Blue background */
  color: white; /* White text color */
  padding: 12px 20px; /* Padding inside the button */
  border: none; /* Remove default border */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Change cursor to a pointer on hover */
  transition: background-color 0.3s; /* Smooth background color transition */
  font-weight: bold;
}

button:hover {
  background-color: #0056b3; /* Darker blue on hover */
}

/* List Styling */
#list {
  list-style: none; /* Remove default list markers */
  padding: 0; /* Remove default list padding */
  margin: 0;
}

/* List Item Styling */
li {
  padding: 15px; /* Padding inside the list item */
  border-bottom: 1px solid #eee; /* Thin border below each list item */
  background-color: #fff; /* White background */
  margin-bottom: 5px;
}

/* Hover Effect for List Items */
li:hover {
  background-color: #f5f5f5; /* Light gray background on hover */
}

/* Task Content (within li) */
.task-content {
  display: flex;
  align-items: center;
  flex-grow: 1;
}

.task-text {
  flex-grow: 1;
  margin-right: 10px;
}


.task-buttons {
  display: flex;
  align-items: center;
}

.task-buttons button {
  margin-left: 5px;
}


/* Delete Button Styling */
.delete-button {
  background-color: #dc3545; /* Red background */
  color: white; /* White text color */
  padding: 8px 12px; /* Padding inside the button */
  border: none; /* Remove default border */
  border-radius: 5px; /* Rounded corners */
  cursor: pointer; /* Change cursor to a pointer on hover */
  transition: background-color 0.3s; /* Smooth background color transition */
}

.delete-button:hover {
  background-color: #c82333; /* Darker red on hover */
}

/* Error Styling */
.error {
  color: #dc3545; /* Red text color for error messages */
  font-size: 14px; /* Smaller font size for error messages */
  margin-bottom: 10px; /* Margin below error messages */
}

/* Priority Indicator Styling */
.priority-indicator {
  font-size: 12px;
  font-weight: bold;
  padding: 3px 6px;
  border-radius: 3px;
}

.priority-indicator[data-priority="1"] {
  background-color: #4CAF50; /* Green for low */
  color: white;
}

.priority-indicator[data-priority="2"] {
  background-color: #FFC107; /* Yellow for medium */
  color: white;
}

.priority-indicator[data-priority="3"] {
  background-color: #F44336; /* Red for high */
  color: white;
}

/* Rank Indicator Styling */
.rank-indicator {
  font-size: 12px;
  color: #777;
  margin-right: 10px;
}


/* Filter/Search Section */
#filter,
#search {
  margin-bottom: 15px;
  padding: 10px;
  border: 1px solid #ddd;
  border-radius: 5px;
  width: 100%;
}

/* Responsive Design */
@media (max-width: 768px) {
  /* Styles for tablets and smaller screens */
  .container {
    max-width: 90%; /* Adjust container width for smaller screens */
  }

  #form {
    flex-direction: column;
    align-items: stretch;
  }

  .input-group {
    margin-right: 0;
  }
}

/* Completed Task Styling */
li.completed {
  text-decoration: line-through; /* Add a line-through to completed tasks */
  color: #777; /* Gray out completed tasks */
}

/* Alternating Task Colors */
li:nth-child(odd) {
  background-color: #f9f9f9; /* Light gray background for odd list items */
}

li:nth-child(even) {
  background-color: #fafafa; /* Lighter gray background for even list items */
}

/* List Item Styling */
li {
  padding: 15px;
  border-bottom: 1px solid #eee;
  background-color: #fff;
  margin-bottom: 5px;
  display: flex;
  align-items: center;
}


/* Task Content (within li) */
.task-content {
  display: flex;
  align-items: center;
  flex-grow: 1;
  margin-right: 10px; /* Added margin to separate content from buttons */
}

.task-text {
  flex-grow: 1;
}


.task-buttons {
  display: flex;
  align-items: center;
  gap: 5px; /* Added gap to space buttons */
}

.task-buttons button {
  /* margin-left: 5px; */ /* Removed, using gap for spacing */
}