/* General Body and Font Styles */
body {
    font-family: 'Poppins', sans-serif; /* A more modern font */
    background-color: #f0f2f5; /* Lighter, subtle background */
    color: #333;
    display: flex;
    flex-direction: column;
    align-items: center;
    padding: 30px; /* More padding */
    margin: 0;
    transition: background-color 0.4s ease, color 0.4s ease; /* Smoother transitions */
    min-height: 100vh; /* Ensure body takes full height */
}

body.dark {
    background-color: #2c3e50; /* Darker, professional background */
    color: #ecf0f1; /* Lighter text for dark mode */
}

h1 {
    color: #2c3e50; /* Dark blue for heading */
    margin-bottom: 40px; /* More space below heading */
    font-size: 3em; /* Larger heading */
    font-weight: 700; /* Bolder */
    letter-spacing: 1px;
    text-shadow: 2px 2px 4px rgba(0,0,0,0.1);
    transition: color 0.4s ease;
}

body.dark h1 {
    color: #ecf0f1; /* White in dark mode */
    text-shadow: 2px 2px 6px rgba(0,0,0,0.3);
}

/* Controls and Filter Bar Layout */
.controls, .filter-bar {
    width: 90%;
    max-width: 700px; /* Max width for central content */
    margin-bottom: 25px;
    display: flex;
    flex-wrap: wrap; /* Allow wrapping on smaller screens */
    gap: 12px; /* Consistent spacing */
    justify-content: center;
    align-items: center; /* Vertically align items */
}

/* Input, Select, Button Base Styles */
input, select, button {
    padding: 12px 18px; /* More padding for a bolder look */
    font-size: 1.05em; /* Slightly larger font */
    border-radius: 8px; /* More rounded corners */
    border: 1px solid #c4d0d9; /* Softer border */
    outline: none;
    transition: all 0.3s ease; /* Smooth transitions for hover/focus */
    box-shadow: 0 2px 5px rgba(0,0,0,0.05); /* Subtle shadow */
}

input:focus, select:focus {
    border-color: #3498db; /* Blue on focus */
    box-shadow: 0 0 0 3px rgba(52, 152, 219, 0.2); /* Glow effect */
}

body.dark input, body.dark select {
    background-color: #34495e; /* Darker background for inputs */
    color: #ecf0f1;
    border-color: #555;
}
body.dark input::placeholder {
    color: #bdc3c7; /* Lighter placeholder text */
}

/* Specific Input Widths */
#taskInput {
    flex-grow: 1; /* Allows input to take available space */
    min-width: 200px; /* Minimum width before wrapping */
}

#dueDate {
    width: 150px; /* Fixed width for date input */
}

/* General Button Styles */
button {
    background-color: #3498db; /* Bright blue for primary actions */
    color: white;
    cursor: pointer;
    border: none; /* No border for primary buttons */
    font-weight: 600; /* Slightly bolder text */
    box-shadow: 0 4px 8px rgba(0,0,0,0.15); /* More prominent shadow */
}

button:hover {
    background-color: #2980b9; /* Darker blue on hover */
    transform: translateY(-2px); /* Lift effect */
    box-shadow: 0 6px 12px rgba(0,0,0,0.2);
}

button:active {
    transform: translateY(0); /* Press effect */
    box-shadow: 0 2px 5px rgba(0,0,0,0.1);
}

body.dark button {
    background-color: #1abc9c; /* Greenish-blue for dark mode buttons */
    box-shadow: 0 4px 8px rgba(0,0,0,0.3);
}

body.dark button:hover {
    background-color: #16a085;
}


/* Filter Buttons */
.filter-bar button {
    background-color: #7f8c8d; /* Grey for filter buttons */
    padding: 10px 15px; /* Slightly smaller padding */
    font-size: 0.95em;
    box-shadow: none; /* No shadow by default */
}

.filter-bar button:hover {
    background-color: #95a5a6;
    transform: none; /* No lift for filter buttons */
    box-shadow: none;
}

.filter-bar button.active {
    background-color: #3498db; /* Highlight active filter */
    color: white;
    font-weight: 700;
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

body.dark .filter-bar button {
    background-color: #4a667a;
}
body.dark .filter-bar button.active {
    background-color: #1abc9c;
}


/* Task List (UL) */
#taskList {
    list-style: none;
    padding: 0;
    width: 90%;
    max-width: 700px; /* Same max width as controls */
    margin-top: 20px;
}

/* Individual Task (LI) - Card Design */
li {
    background: white;
    padding: 18px 25px; /* More padding */
    margin-bottom: 15px; /* More space between cards */
    border-radius: 12px; /* More rounded corners */
    display: flex;
    justify-content: space-between;
    align-items: center;
    box-shadow: 0 6px 15px rgba(0,0,0,0.08); /* Soft shadow for card effect */
    transition: all 0.3s ease; /* Smooth transitions for hover and completion */
    border-left: 6px solid; /* Stronger priority bar */
    cursor: pointer; /* Indicates it's clickable for completion */
}

li:hover {
    transform: translateY(-3px); /* Lift effect on hover */
    box-shadow: 0 8px 20px rgba(0,0,0,0.12);
}

body.dark li {
    background-color: #34495e; /* Darker background for task cards */
    color: #ecf0f1;
    box-shadow: 0 6px 15px rgba(0,0,0,0.2);
}

/* Priority Colors for LI */
li.low { border-color: #27ae60; /* Green */ }
li.medium { border-color: #f39c12; /* Orange */ }
li.high { border-color: #e74c3c; /* Red */ }

/* Completed Task State */
li.completed {
    text-decoration: line-through;
    opacity: 0.7; /* Slightly more opaque for completed */
    background-color: #e9ecef; /* Lighter grey for completed */
    border-left-color: #aaa; /* Grey border for completed */
    /* pointer-events: none; Remove or comment out this line */
    box-shadow: 0 3px 8px rgba(0,0,0,0.05); /* Softer shadow */
}

body.dark li.completed {
    background-color: #4a667a;
    border-left-color: #777;
    color: #bdc3c7;
}


/* Task Details - Text and Meta */
.task-details {
    display: flex;
    flex-direction: column;
    align-items: flex-start;
    flex-grow: 1; /* Allow details to take up space */
    margin-right: 15px; /* Space between text and buttons */
}

.task-details strong {
    font-size: 1.2em; /* Larger task text */
    margin-bottom: 5px; /* Space between text and meta */
    color: #333;
    transition: color 0.4s ease;
}

body.dark .task-details strong {
    color: #ecf0f1;
}

.task-meta {
    font-size: 0.85em; /* Slightly larger meta info */
    color: #7f8c8d; /* Muted color for meta */
    transition: color 0.4s ease;
}

body.dark .task-meta {
    color: #bdc3c7;
}

/* Actions (Edit/Delete Buttons) */
.actions {
    display: flex;
    gap: 8px; /* Space between edit and delete */
}

.actions button {
    padding: 8px 12px; /* Smaller padding for action buttons */
    font-size: 0.9em;
    border-radius: 6px;
    box-shadow: none; /* No shadow by default for these buttons */
    transform: none; /* No lift effect for action buttons */
}

.actions .edit {
    background-color: #f39c12; /* Orange for edit */
}
.actions .delete {
    background-color: #e74c3c; /* Red for delete */
}

.actions button:hover {
    opacity: 0.9;
    transform: none; /* Keep flat on hover for action buttons */
    box-shadow: 0 2px 4px rgba(0,0,0,0.1);
}

body.dark .actions .edit {
    background-color: #f1c40f; /* Brighter orange in dark mode */
}
body.dark .actions .delete {
    background-color: #c0392b; /* Darker red in dark mode */
}

/* Dark Mode Toggle Button */
#toggleDarkMode {
    font-size: 1.5em; /* Larger moon icon */
    padding: 8px 12px;
    background: none; /* Transparent background */
    border: 1px solid #ccc;
    color: #34495e; /* Dark moon */
    box-shadow: none;
}
body.dark #toggleDarkMode {
    color: #f1c40f; /* Yellow moon */
    border-color: #555;
    background-color: #34495e; /* Match other dark mode elements */
}
#toggleDarkMode:hover {
    background-color: #ecf0f1; /* Light hover */
    transform: none;
    box-shadow: none;
}
body.dark #toggleDarkMode:hover {
    background-color: #4a667a; /* Darker hover */
}

footer {
    margin-top: 50px; /* Space above footer */
    padding: 20px;
    text-align: center;
    font-size: 0.85em;
    color: #7f8c8d;
    border-top: 1px solid #e0e0e0; /* Subtle line above footer */
    width: 100%;
    max-width: 700px; /* Match content width */
}

body.dark footer {
    color: #bdc3c7;
    border-top-color: #4a667a;
}