body.tasks-page #page-content.all-tasks-view > .nav.nav-tabs.title,
body.tasks-page .tasks-kanban-shell > .nav.nav-tabs.title {
  border: 1px solid var(--border-soft);
  border-radius: var(--radius-card) var(--radius-card) 0 0;
  background: var(--surface-light);
  padding: 8px 10px;
  margin-bottom: 0;
  display: flex;
  align-items: center;
  gap: 8px;
  flex-wrap: wrap;
}

body.tasks-page #page-content.all-tasks-view > .nav.nav-tabs.title > li > a,
body.tasks-page .tasks-kanban-shell > .nav.nav-tabs.title > li > a {
  border-radius: 999px;
  border: 1px solid transparent;
  color: var(--text-secondary);
  min-height: 38px;
  display: inline-flex;
  align-items: center;
}

body.tasks-page #page-content.all-tasks-view > .nav.nav-tabs.title > li > a.active,
body.tasks-page .tasks-kanban-shell > .nav.nav-tabs.title > li > a.active {
  border-color: color-mix(in srgb, var(--brand-cyan) 44%, transparent);
  background: color-mix(in srgb, var(--brand-cyan) 16%, transparent);
  color: var(--text-primary);
}

body.tasks-page #page-content.all-tasks-view > .card,
body.tasks-page .tasks-kanban-shell {
  border: 1px solid var(--border-soft);
  border-top: 0;
  border-radius: 0 0 var(--radius-card) var(--radius-card);
  background: var(--surface-light);
}

body.tasks-page #task-table_wrapper .filter-section-container,
body.tasks-page #task-table_wrapper .filter-form,
body.tasks-page #js-kanban-filter-container {
  background: color-mix(in srgb, var(--surface-muted) 88%, transparent);
  border-color: var(--border-soft);
}

body.tasks-page .all-tasks-kanban-view .kanban-col-title {
  border: 1px solid var(--border-soft);
  border-radius: 16px 16px 0 0;
  background: var(--surface-light);
  color: var(--text-primary);
}

body.tasks-page .all-tasks-kanban-view .kanban-item-list {
  border: 1px solid var(--border-soft);
  border-top: 0;
  border-radius: 0 0 16px 16px;
  background: color-mix(in srgb, var(--surface-muted) 84%, transparent);
}

body.tasks-page .all-tasks-kanban-view a.kanban-item {
  border-radius: 14px;
  border: 1px solid var(--border-soft);
  background: var(--surface-light);
}

body.tasks-page .all-tasks-kanban-view a.kanban-item:hover {
  border-color: color-mix(in srgb, var(--brand-cyan) 46%, transparent);
  box-shadow: var(--shadow-glow);
}

@media (max-width: 767px) {
  body.tasks-page #page-content.all-tasks-view > .nav.nav-tabs.title,
  body.tasks-page .tasks-kanban-shell > .nav.nav-tabs.title {
    gap: 6px;
    padding: 8px;
  }
}
