/* css/views/tasks.css */

/* ============================================= */
/*            Tasks Section Styles               */
/* ============================================= */

#tasks .content-header {
    margin-bottom: 30px;
    padding-bottom: 15px;
}
#tasksSubjectName {
    color: var(--accent-primary);
    font-weight: 500; /* Slightly less bold than main h1 */
}

/* --- Main Layout for Tasks View --- */
.tasks-layout {
    display: grid;
    grid-template-columns: 1fr;
    gap: 30px;
}

@media (min-width: 1024px) {
    .tasks-layout {
        grid-template-columns: minmax(350px, 1.2fr) 3fr; /* Sidebar : Main Area */
    }
    /* Sticky sidebar for form and filters */
    .tasks-sidebar-area {
        position: sticky;
        top: calc(var(--topbar-height) + 25px); /* Account for topbar and padding */
        align-self: start; /* Important for sticky behavior */
        max-height: calc(100vh - var(--topbar-height) - 50px); /* Prevent overflow */
        overflow-y: auto; /* Allow sidebar to scroll if content is too long */
        padding-right: 10px; /* Space for scrollbar if it appears */
    }
}
@media (min-width: 1200px) {
    .tasks-layout {
        grid-template-columns: minmax(380px, 1fr) 2.8fr;
    }
}

/* --- Add/Edit Task Form Card --- */
#addTaskFormContainer.card {
    box-shadow: var(--shadow-strong); /* More prominent shadow for form card */
}
#addTaskFormContainer .card-header h3#taskFormTitleHeader { /* Updated ID from JS */
    font-size: 1.2rem;
}
#addTaskFormContainer .card-header h3#taskFormTitleHeader .mr-2 {
    color: var(--accent-primary);
}
#addTaskForm .form-group {
    margin-bottom: 1.1rem;
}
#addTaskForm label {
    font-size: 0.875rem;
    font-weight: 500;
    color: var(--text-secondary); /* Softer label color */
}
#addTaskForm button[type="submit"]#taskFormSubmitButton {
    padding: 11px 20px; /* Slightly adjusted padding */
    font-size: 0.95rem;
    margin-top: 15px;
}
#addTaskForm button[type="button"]#taskFormCancelButton {
    font-size: 0.9rem;
}

/* Sub-Task Input in Form */
#addTaskForm .form-group .input-group { /* For sub-task text input and add button */
    /* Generic input-group styles may come from a framework or need to be defined */
    display: flex;
}
#addTaskForm #newSubTaskText {
    flex-grow: 1;
    border-top-right-radius: 0;
    border-bottom-right-radius: 0;
}
#addTaskForm #addSubTaskBtnToForm {
    border-top-left-radius: 0;
    border-bottom-left-radius: 0;
    /* Generic .btn .btn-sm .btn-outline-secondary styles apply */
}
#currentSubTasksListInForm { /* UL for sub-tasks in form */
    list-style: none;
    padding: 0;
    margin-top: 10px;
    max-height: 150px; /* Limit height for scroll */
    overflow-y: auto;
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-sm);
    background-color: var(--bg-secondary);
}
#currentSubTasksListInForm li {
    font-size: 0.85rem;
    padding: 6px 10px;
    /* Generic .list-group-item, .d-flex, etc. from components.css apply */
    background-color: transparent; /* Let parent UL handle BG */
}
#currentSubTasksListInForm li:not(:last-child) {
    border-bottom: 1px dashed var(--border-color);
}
#currentSubTasksListInForm .form-delete-subtask-btn {
    /* Generic .btn .btn-xs .btn-icon .btn-outline-danger styles apply */
    opacity: 0.7;
}
#currentSubTasksListInForm .form-delete-subtask-btn:hover { opacity: 1; }


/* --- Filter Controls Card --- */
#taskFilterControlsContainer.card {
    margin-top: 25px;
}
#taskFilterControlsContainer .card-header h3 { font-size: 1.1rem; }
#taskFilterControlsContainer .card-header h3 .mr-2 { color: var(--accent-primary); }

.task-filters-grid {
    display: grid;
    grid-template-columns: repeat(auto-fit, minmax(150px, 1fr));
    gap: 12px;
}
.task-filters-grid .form-group { margin-bottom: 0.5rem; }
.task-filters-grid label { font-size: 0.8rem; font-weight: 500; color: var(--text-secondary); }


/* --- Task List Area --- */
.tasks-main-area {
    min-height: 400px;
}
.tasks-main-area .d-flex.justify-content-end.mb-2 { /* Container for toggle view button */
    /* Styles for this container if needed, e.g., border-bottom */
}
#toggleTaskViewBtn {
    /* Generic .btn .btn-sm .btn-outline-secondary styles apply */
    font-size: 0.85rem;
}
#toggleTaskViewBtn .fas { margin-right: 0.4em; }


#taskListContainer {
    display: flex;
    flex-direction: column;
    gap: 18px; /* Increased gap */
}

.task-item {
    background-color: var(--bg-primary);
    border: 1px solid var(--border-color);
    border-radius: var(--border-radius-md);
    padding: 18px 20px; /* Increased padding */
    display: flex;
    align-items: flex-start;
    gap: 15px;
    box-shadow: var(--shadow-color) 0 2px 6px;
    transition: box-shadow var(--transition-speed-normal) ease, transform var(--transition-speed-normal) ease,
                border-left-color var(--transition-speed-fast) ease; /* Added border-left for priority */
    position: relative;
    overflow: hidden;
    border-left-width: 6px; /* Make priority strip part of the main border */
    border-left-style: solid;
    border-left-color: transparent; /* Default, overridden by priority */
}
.task-item:hover {
    box-shadow: var(--shadow-strong) 0 5px 15px;
    transform: translateY(-3px);
}

/* Priority Indicator via Left Border */
.task-item.priority-low { border-left-color: var(--info); }
.task-item.priority-medium { border-left-color: var(--warning); }
.task-item.priority-high { border-left-color: var(--danger); }
/* Remove ::before if using border for priority */

.task-item-checkbox-wrapper {
    padding-top: 4px; /* Align checkbox with title */
    flex-shrink: 0;
}

.task-item-content {
    flex-grow: 1;
    /* padding-left: 5px; (No longer needed if using border for priority) */
}
.task-title {
    font-weight: 600;
    color: var(--text-primary);
    font-size: 1.1rem;
    margin-bottom: 6px;
    cursor: pointer;
    line-height: 1.35;
    transition: color var(--transition-speed-fast) ease;
}
.task-title:hover { color: var(--accent-primary); }
.task-item.status-completed .task-title {
    text-decoration: line-through solid var(--text-muted) 2px;
    color: var(--text-muted);
    font-weight: 500;
}
.task-item.status-completed .task-title:hover { color: var(--text-secondary); }

.task-description-preview {
    font-size: 0.9rem;
    color: var(--text-secondary);
    margin-bottom: 12px; /* More space before meta */
    display: -webkit-box;
    -webkit-line-clamp: 2;
    -webkit-box-orient: vertical;
    overflow: hidden;
    line-height: 1.5;
}

.task-meta-info {
    display: flex;
    flex-wrap: wrap;
    gap: 10px; /* Consistent gap */
    row-gap: 6px;
    font-size: 0.8rem;
    color: var(--text-muted);
    align-items: center;
}
.task-meta-info > span {
    background-color: var(--bg-tertiary);
    padding: 4px 10px;
    border-radius: var(--border-radius-sm);
    display: inline-flex;
    align-items: center;
    line-height: 1.3;
}
.task-meta-info > span .mr-1 { margin-right: 0.4em; }
.task-meta-info .due-date.overdue {
    color: var(--danger);
    background-color: rgba(var(--danger-rgb), 0.1);
    font-weight: 600;
    border: 1px solid rgba(var(--danger-rgb), 0.2); /* Subtle border */
}
.task-meta-info .priority-text-high { color: var(--danger); background-color: transparent; padding: 0; }
.task-meta-info .priority-text-medium { color: var(--warning); background-color: transparent; padding: 0;}
.task-meta-info .priority-text-low { color: var(--info); background-color: transparent; padding: 0;}
.task-meta-info .task-linked-goal, .task-meta-info .task-recurrence-info {
    /* Similar styling to other meta items */
    font-style: italic;
}


.task-item-actions {
    display: flex;
    gap: 8px;
    flex-shrink: 0;
    align-items: center;
    margin-left: 10px;
}
.task-item-actions .btn-icon:hover {
    transform: scale(1.1);
    /* Colors for outline buttons from components.css */
}


/* Sub-Tasks Display within Task Item */
.sub-tasks-container {
    margin-top: 12px !important; /* Ensure it's !important if Bootstrap is interfering */
    padding-top: 10px !important;
    border-top: 1px dashed var(--border-color) !important; /* Dashed separator */
}
.sub-tasks-title {
    font-size: 0.85rem;
    font-weight: 600;
    color: var(--text-secondary);
    margin-bottom: 8px;
}
.sub-tasks-list { /* ul */
    list-style: none;
    padding-left: 5px; /* Slight indent for sub-tasks */
    margin: 0;
}
.sub-task-item {
    display: flex;
    align-items: center;
    justify-content: space-between;
    padding: 6px 0; /* Vertical padding only */
    font-size: 0.9rem;
}
.sub-task-item:not(:last-child) {
    border-bottom: 1px dotted var(--border-color); /* Dotted separator for sub-tasks */
}
.sub-task-item .custom-checkbox + label.sub-task-label { /* Sub-task label specific */
    font-size: 0.9em; /* Relative to .sub-task-item */
    color: var(--text-secondary);
    padding-left: 28px; /* Adjust if checkbox size differs */
    flex-grow: 1;
    margin-right: 8px;
}
.sub-task-item.completed label.sub-task-label {
    text-decoration: line-through;
    color: var(--text-muted);
    opacity: 0.8;
}
.sub-task-item .delete-subtask-btn {
    /* Generic .btn .btn-xs .btn-icon .btn-outline-danger apply */
    opacity: 0.6;
}
.sub-task-item .delete-subtask-btn:hover { opacity: 1; }


/* Task Item Drag & Drop Ghost/Chosen Styles (if using SortableJS) */
.task-item-ghost {
    opacity: 0.4;
    background: var(--bg-interactive);
    border-style: dashed;
}
.task-item-chosen {
    box-shadow: var(--shadow-strong) 0 5px 15px;
    transform: scale(1.02);
    background-color: var(--bg-secondary);
}

/* Placeholder for Empty Task List */
#tasksPlaceholder {
    text-align: center;
    padding: 40px 20px;
    font-size: 1.1rem;
    color: var(--text-muted);
    border: 2px dashed var(--border-color);
    border-radius: var(--border-radius-lg);
    background-color: var(--bg-secondary);
}
#tasksPlaceholder .fa-3x { margin-bottom: 1rem; }
#tasksPlaceholder p { margin-bottom: 15px; }
#tasksPlaceholder #focusAddTaskFormBtn { /* Specific button in placeholder */
    /* Generic .btn .btn-primary .btn-sm styles apply */
}


/* --- Calendar View Styles (Basic) --- */
#taskCalendarViewContainer .card-header.calendar-controls {
    padding: 10px 15px; /* Tighter padding for controls */
}
#currentCalendarMonthYear {
    font-size: 1.1rem; /* More prominent month/year */
    font-weight: 600;
}
#taskCalendarGrid {
    display: grid;
    grid-template-columns: repeat(7, 1fr);
    border-top: 1px solid var(--border-color);
    border-left: 1px solid var(--border-color);
}
.calendar-day-header, .calendar-day {
    padding: 8px 5px; /* Reduced padding for denser calendar */
    text-align: center;
    border-right: 1px solid var(--border-color);
    border-bottom: 1px solid var(--border-color);
}
.calendar-day-header {
    font-weight: 500;
    font-size: 0.8rem;
    color: var(--text-muted);
    background-color: var(--bg-secondary);
    padding: 6px 5px;
}
.calendar-day {
    min-height: 100px; /* Ensure cells have height */
    font-size: 0.85rem;
    position: relative;
    background-color: var(--bg-primary);
    transition: background-color var(--transition-speed-fast) ease;
}
.calendar-day:hover:not(.empty) { background-color: var(--bg-interactive); }
.calendar-day.empty { background-color: var(--bg-tertiary); opacity: 0.7; }
.calendar-day.today {
    background-color: rgba(var(--accent-primary-rgb), 0.08);
    border: 1px solid var(--accent-primary); /* Highlight today */
}
.calendar-day .day-number {
    display: block;
    margin-bottom: 4px;
    font-weight: 500;
}
.calendar-day.today .day-number { color: var(--accent-primary); }

.day-tasks { /* Container for tasks within a day cell */
    display: flex;
    flex-direction: column;
    gap: 3px;
    max-height: 70px; /* Limit height to show a few tasks, then scroll */
    overflow-y: auto;
    padding-right: 3px; /* For scrollbar */
}
.calendar-task-entry {
    font-size: 0.7rem;
    padding: 2px 5px;
    border-radius: var(--border-radius-sm);
    overflow: hidden;
    text-overflow: ellipsis;
    white-space: nowrap;
    cursor: pointer;
    color: white;
    text-align: left;
    opacity: 0.9;
}
.calendar-task-entry:hover { opacity: 1; }
/* Color coding based on task priority for calendar entries */
.calendar-task-entry.priority-high { background-color: var(--danger); }
.calendar-task-entry.priority-medium { background-color: var(--warning); color: var(--text-primary); }
.calendar-task-entry.priority-low { background-color: var(--info); }
.calendar-task-entry.status-completed {
    background-color: var(--status-learned-bg); /* Use a semantic status color */
    color: var(--status-learned-text) !important; /* Override for completed */
    text-decoration: line-through;
    opacity: 0.7;
}


/* Responsive Adjustments for Tasks View */
@media (max-width: 767px) {
    .tasks-layout { grid-template-columns: 1fr; }
    .tasks-sidebar-area { position: static; max-height: none; overflow-y: visible; padding-right: 0;}
    .task-item { padding: 12px; }
    .task-title { font-size: 1rem; }
    .task-description-preview { font-size: 0.85rem; -webkit-line-clamp: 1; }
    .task-meta-info { font-size: 0.75rem; gap: 6px; }
    .task-meta-info > span { padding: 3px 6px; }
    .sub-tasks-title { font-size: 0.8rem; }
    .sub-task-item { font-size: 0.85rem; }

    .calendar-day { min-height: 70px; padding: 4px; font-size: 0.75rem;}
    .calendar-day .day-number { font-size: 0.9em; }
    .calendar-task-entry { font-size: 0.65rem; padding: 2px 3px; }
    .day-tasks { max-height: 50px; }
}