html {
    font-size: 16px; /* Default base font size */
}

body {
    font-family: Arial, sans-serif;
    margin: 0;
    padding: 0;
    box-sizing: border-box;
    height: 100vh;
    background-color: #2e003e; /* Deep purple background */
    color: #f0f0f0; /* Light text for contrast */
}

.container {
    display: grid;
    grid-template-columns: 2fr 0.05fr 1fr; /* 2/3 for task list, 0.05fr for vertical line, 1/3 for details */
    grid-template-rows: 1fr;
    width: 100%;
    height: 100%;
}

/* Task List Section */
.task-list {
    grid-column: 1 / 2;
    padding: 2rem;
    overflow-y: auto;
    background-color: #3e004f; /* Darker purple */
}

.search-bar {
    width: 96%;
    padding: 1rem;
    border: none;
    border-radius: 0.5rem;
    margin-bottom: 1rem;
    background-color: #5c007a; /* Slightly lighter purple */
    color: white;
    font-size: 1rem;
}

/* Separators between tasks and search bar */
.separator {
    border: none;
    border-bottom: 1px solid #aaa;
    margin: 1rem 0;
}

/* Vertical separator between Task List 1 and Task List 2/3 */
.vertical-separator {
    grid-column: 2 / 3;
    background-color: #aaa;
    width: 2px;
    height: 100%;
}

/* Task List Item */
.task {
    display: flex;
    justify-content: space-between;
    align-items: center;
    padding: 1rem;
    border-radius: 0.5rem;
    background-color: #501a96; /* Rich purple for tasks */
}

.task.completed {
    background-color: #34105a; /* Dimmed color for completed tasks */
    text-decoration: line-through;
}

.task-info {
    flex-grow: 1;
    margin-right: 1rem;
    display: flex;
    flex-direction: column; /* Stack elements vertically */
}

.task-date {
    font-size: 0.875rem; /* Slightly smaller than task description */
    color: #ddd; /* Lighter color for date */
    margin-top: 0.5rem; /* Add some space between the description and the date */
}

.task-priority {
    margin-top: 0.5rem; /* Add space between the date and priority */
    font-size: 0.75rem;
    color: #ccc;
}


.actions button {
    padding: 0.5rem;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    width: 5rem;
    font-size: 1rem;
}

.edit-btn {
    background-color: #ffcc00; /* Golden for edit */
    color: #2e003e;
}

.delete-btn {
    background-color: #ff6347; /* Tomato red for delete */
    color: white;
}

/* Task Details Section */
.task-details {
    grid-column: 3 / 4;
    display: grid;
    grid-template-rows: 1fr 1fr; /* Two equal halves for task list 2 and form */
    background-color: #3e004f;
}

/* Task List 2 (Top Right) */
.task-list-right {
    padding: 2rem;
}

.task-creation-form {
    padding: 2rem;
    display: flex;
    flex-direction: column;
}

.task-creation-form textarea,
.task-creation-form input {
    width: 96%;
    padding: 1rem;
    margin-bottom: 1rem;
    border-radius: 0.5rem;
    border: none;
    background-color: #5c007a; /* Same as search bar */
    color: white;
    font-size: 1rem;
}

.priority-options {
    display: flex;
    justify-content: space-between;
    margin-bottom: 1rem;
}

.priority-options label {
    display: flex;
    align-items: center;
    font-size: 1rem;
}

.priority-options input {
    margin-right: 0.5rem;
}

.task-creation-form button {
    padding: 1rem;
    margin-top: 0.5rem;
    background-color: #ffcc00;
    color: #2e003e;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
}

.date-container {
    display: flex;
    align-items: center; /* Center vertically */
    margin-bottom: 1rem; /* Add space below the date input */
}

.date-input {
    flex-grow: 1; /* Allow input to take available space */
    margin-right: 0.5rem; /* Space between input and button */
}

.date-btn {
    background-color: #501a96; /* Rich purple for the date picker */
    margin-top: 0.5rem;
    color: white;
    border: none;
    border-radius: 0.5rem;
    cursor: pointer;
    font-size: 1rem;
    padding: 1rem;
}