/* --- To-Do Section --- */
#todo-section {
    display: none;
    flex-grow: 1;
    padding: 20px;
    overflow-y: auto;
    text-align: left;
    color: var(--text-dark);
}

#todo-input-container {
    margin-bottom: 20px;
}

#todo-input {
    width: 100%;
    padding: 10px;
    border: 1px solid var(--input-border);
    background-color: var(--input-bg);
    color: var(--input-text);
    transition: background-color 0.3s, color 0.3s;
}

/* --- Todo List Styles --- */
#todo-list {
    list-style: none;
    padding: 0;
    max-height: 70vh; /* Set maximum height to 70% of viewport height */
    overflow-y: auto; /* Add vertical scrolling */
    border: 1px solid var(--border-light);
}

.todo-item {
    background-color: var(--todo-item-bg);
    padding: 10px;
    border-bottom: 1px solid var(--todo-item-border-bottom);
    display: flex;
    align-items: center;
    justify-content: space-between;
    /* Remove overflow-x: auto to prevent horizontal scrolling */
    min-width: 0;
    transition: background-color 0.3s ease;
}

.todo-item.overdue {
    background-color: var(--todo-overdue-bg);
    border-left: 3px solid var(--todo-overdue-color);
}

.todo-item-content {
    flex-grow: 1;
    margin-right: 10px;
    word-wrap: break-word;
    white-space: normal; /* Change from nowrap to normal to allow text wrapping */
    overflow-wrap: break-word; /* Ensure long words can break */
    min-width: 0;
    display: flex;
    flex-direction: column;
}

.todo-item-text {
    word-wrap: break-word;
    white-space: normal;
    overflow-wrap: break-word;
}

.todo-due-date {
    font-size: 0.8em;
    margin-top: 2px;
    color: var(--todo-due-date-color);
}

.todo-due-date.overdue {
    color: var(--todo-overdue-color);
    font-weight: bold;
}

.todo-due-date.due-soon {
    color: var(--todo-due-soon-color);
}

.todo-date-input {
    font-size: 0.9em;
    padding: 3px 5px;
    border: 1px solid var(--todo-input-border);
    background-color: var(--todo-input-bg);
    color: var(--input-text);
    margin-top: 5px;
    border-radius: 3px;
}

.todo-date-buttons {
    display: flex;
    gap: 5px;
    margin-top: 5px;
}

.todo-date-button {
    background-color: var(--dark-gray);
    color: var(--white);
    border: none;
    padding: 2px 6px;
    border-radius: 3px;
    font-size: 0.8em;
    cursor: pointer;
}

body.dark-theme .todo-date-button {
    background-color: var(--dark-medium-gray);
}

.todo-date-button.clear {
    background-color: #d32f2f;
}

body.dark-theme .todo-date-button.clear {
    background-color: #ff6b6b;
}

.todo-item:last-child {
    border-bottom: none;
}

.todo-item-content.completed {
    text-decoration: line-through;
    color: var(--todo-item-completed-color);
}

.todo-controls button {
    background: none;
    border: none;
    cursor: pointer;
    color: var(--todo-control-button-color);
    margin-left: 5px;
    padding: 5px;
}

.todo-controls button:hover {
    color: var(--todo-control-button-hover-color);
}

.todo-datetime-container {
    display: flex;
    gap: 8px;
    margin-top: 5px;
    margin-bottom: 5px;
}

.todo-date-input,
.todo-time-input {
    font-size: 0.9em;
    padding: 3px 5px;
    border: 1px solid var(--todo-input-border);
    background-color: var (--todo-input-bg);
    color: var (--input-text);
    border-radius: 3px;
}

.todo-date-input {
    flex-grow: 2;
}

.todo-time-input {
    flex-grow: 1;
}

/* --- Todo Reminder Styles --- */
.todo-reminder {
    font-size: 0.8em;
    margin-top: 2px;
    color: var(--todo-reminder-color);
    background-color: var(--todo-reminder-bg);
    padding: 2px 5px;
    border-radius: 4px;
    display: inline-block;
    margin-right: 5px;
}

.todo-reminder-container {
    background-color: var(--todo-reminder-bg);
    border-left: 3px solid var(--todo-reminder-color);
    padding-left: 5px;
}

.todo-controls button.active-reminder {
    color: var(--active-reminder-color);
    background-color: var(--active-reminder-bg);
    border-radius: 50%;
}

/* Add specific styles for the date/time inputs in dark mode */
body.dark-theme .todo-date-input,
body.dark-theme .todo-time-input,
body.dark-theme .todo-reminder-input {
    color: var(--dark-black); /* Ensure text is visible */
    background-color: var(--dark-off-white);
    border-color: var(--dark-medium-gray);
}

/* Ensure the datetime container in dark mode has proper contrast */
body.dark-theme .todo-datetime-container.todo-reminder-container {
    background-color: rgba(33, 150, 243, 0.2);
}

body.dark-theme .todo-reminder {
    color: var(--todo-reminder-color); /* Use the updated variable */
}