/**
* TasksView Styles
*
* Implements the tasks view layout with:
* - SearchFilterBar at top
* - OverallProgress component
* - TaskCards grouped by task list using TaskListGroup
*
* Requirements: 7.1, 7.2, 7.3
*/
.tasksView {
display: flex;
flex-direction: column;
gap: var(--space-6);
height: 100%;
}
/* Header section with title and search/filter */
.header {
display: flex;
flex-direction: column;
gap: var(--space-4);
}
/* Search filter bar container */
.searchFilterContainer {
position: relative;
}
/* Task list groups container */
.taskListGroups {
display: flex;
flex-direction: column;
gap: var(--space-6);
}
/* Empty state */
.emptyState {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-16);
text-align: center;
}
.emptyIcon {
width: 64px;
height: 64px;
color: var(--text-muted);
margin-bottom: var(--space-4);
}
/* Error state */
.errorState {
display: flex;
flex-direction: column;
align-items: center;
justify-content: center;
padding: var(--space-16);
text-align: center;
}
.errorIcon {
width: 64px;
height: 64px;
color: var(--error);
margin-bottom: var(--space-4);
}
/* Loading skeleton grid */
.loadingGrid {
display: grid;
grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
gap: var(--space-4);
}
/* Results count */
.resultsCount {
text-align: center;
}
/* Responsive adjustments */
@media (max-width: 768px) {
.loadingGrid {
grid-template-columns: 1fr;
}
}
